/*
 * The card theme flattens every .bg-white inside a card to a 4% tint
 * (OctaneCardView.css, .octane-card-shell :where(.bg-white ...)). That suits
 * flat panels, but a menu that floats over the content has to be opaque or
 * the rows underneath read through it.
 */
.octane-housekeeping .octane-hk-popover {
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}

/*
 * Housekeeping buttons. They live in this sheet rather than in utility
 * classes because the card theme forces borders, white backgrounds and
 * shadows inside every card with !important.
 *
 * AIR has no housekeeping layout, so the buttons follow the AIR convention:
 * the grey button_thick (habbo_skin_button_shiny_thick 9-slice) with u_bold
 * 12 px black text. Every tone takes it, except danger, which keeps Octane's
 * red shiny skin so a destructive staff action still reads as one.
 */
.octane-housekeeping .hk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 26px;
    padding: 0 6px;
    border: 5px solid transparent !important;
    border-radius: 0;
    border-image-source: var(--habbo-skin-shiny-thick) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #000000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
    white-space: nowrap;
    user-select: none;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-housekeeping .hk-btn:hover:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-thick-hover) !important;
}

.octane-housekeeping .hk-btn:active:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-thick-pressed) !important;
}

.octane-housekeeping .hk-btn:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

/* Disabled reads as disabled for every tone: the disabled skin, grey text, no pointer. */
.octane-housekeeping .hk-btn:disabled {
    border-image-source: var(--habbo-skin-shiny-thick-disabled) !important;
    color: #777777;
    text-shadow: none;
    cursor: not-allowed;
}

/* The small button: 11 px (il_bold), the size dense rows already use. */
.octane-housekeeping .hk-btn--sm {
    height: 22px;
    padding: 0 4px;
    font-size: 11px;
}

/* Danger: Octane's red shiny skin (as the shared danger button), white text. */
.octane-housekeeping .hk-btn--danger:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-red) !important;
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.octane-housekeeping .hk-btn--danger:hover:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-red-hover) !important;
}

.octane-housekeeping .hk-btn--danger:active:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-red-pressed) !important;
}

/* Sub-pages and list choices: a segmented control, the active part lifted. */
.octane-housekeeping .hk-segmented {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid #d4d4d8 !important;
    border-radius: 8px;
    background: #e4e4e7 !important;
}

.octane-housekeeping .hk-segmented__item {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #000000;
    cursor: pointer;
    font-size: 12px; /* u_button_tab: 12 px regular, black */
    font-weight: 400;
    white-space: nowrap;
    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}

.octane-housekeeping .hk-segmented__item:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.55);
    color: #18181b;
}

.octane-housekeeping .hk-segmented__item.is-active {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    color: #000000;
    font-weight: 700;
}

.octane-housekeeping .hk-segmented__item:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

.octane-housekeeping .hk-segmented__count {
    min-width: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d4d4d8;
    color: #000000;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
}

.octane-housekeeping .hk-segmented__item.is-active .hk-segmented__count {
    background: #0284c7;
    color: #ffffff;
}

/* The segmented control compact, for choices inside a page. */
.octane-housekeeping .hk-segmented--compact {
    align-self: flex-start;
}

.octane-housekeeping .hk-segmented--compact .hk-segmented__item {
    flex: 0 0 auto;
    height: 22px;
    font-size: 11px;
}

/*
 * Text as AIR draws it. Housekeeping is Octane's own staff panel (no AIR layout), so it takes the AIR
 * conventions: regular Ubuntu (HabboAirUbuntu; Octane's `Ubuntu` face is the condensed cut), u_regular 12 px
 * pure black body text, 14 px bold section titles, 11 px for the small meta text and the dense rows (never
 * smaller), #666666 for hints. The status colours (rose/emerald/amber/sky pills and banners) stay as they are.
 * The shared card header keeps its own face.
 */
.octane-housekeeping {
    --octane-card-text: #000000;
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
}

@layer base {
    .octane-housekeeping :where(*):not(svg, svg *, .font-mono, .octane-card-header-shell, .octane-card-header-shell *) {
        font-family: HabboAirUbuntu, UbuntuRegular, sans-serif !important;
    }

    /* il_regular 11 px is the floor: the 9 and 10 px labels, counters and table cells come up to it. */
    .octane-housekeeping :where(.text-\[9px\], .text-\[10px\]):not(svg, svg *) {
        font-size: 11px !important;
    }

    /* Section titles: u_headline_small, 14 px bold black. */
    .octane-housekeeping .hk-air-heading {
        color: #000000 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
    }

    /* Body text pure black; the neutral greys that carried body text become black, the hint grey #666666. */
    .octane-housekeeping :where(.text-zinc-600, .text-zinc-700, .text-zinc-800, .text-zinc-900) {
        color: #000000 !important;
    }

    .octane-housekeeping :where(.text-zinc-500, .text-\[\#666666\]) {
        color: #666666 !important;
    }
}