/* Mobile app navigation and the card layout for the rooms resource. */
.sabo-mobile-nav,
.sabo-room-filter-bar,
.sabo-room-filter-footer,
.sabo-booking-filter-bar,
.sabo-booking-filter-footer {
    display: none;
}

.sabo-room-actions-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.sabo-room-actions-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgb(2 10 24 / 42%);
}

.sabo-room-actions-sheet {
    position: absolute;
    right: 0.625rem;
    bottom: max(0.625rem, env(safe-area-inset-bottom));
    left: 0.625rem;
    overflow: hidden;
    padding: 0.5rem 0.75rem 1rem;
    border: 1px solid #e4eaf2;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 -1rem 3rem rgb(15 35 60 / 20%);
}

.sabo-room-actions-sheet__grabber {
    width: 2.625rem;
    height: 0.3rem;
    margin: 0 auto 0.5rem;
    border-radius: 999px;
    background: #cbd5e1;
}

.sabo-room-actions-sheet :is(a, button) {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    gap: 0.875rem;
    border-top: 1px solid #edf1f5;
    color: #0f2947;
    font-size: 1rem;
    font-weight: 650;
    text-align: left;
}

.sabo-room-actions-sheet a:first-of-type {
    border-top: 0;
}

.sabo-room-actions-sheet :is(a, button) svg {
    width: 1.45rem;
    height: 1.45rem;
    color: #0879df;
}

.sabo-room-actions-sheet button.is-danger,
.sabo-room-actions-sheet button.is-danger svg {
    color: #dc264b;
}

@media (min-width: 768px) {
    .sabo-room-mobile-filter-action,
    .sabo-booking-mobile-filter-action {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --sabo-mobile-nav-height: 5.25rem;
    }

    .fi-layout:has(.sabo-mobile-nav) {
        padding-bottom: calc(var(--sabo-mobile-nav-height) + env(safe-area-inset-bottom));
    }

    .sabo-mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 25;
        display: grid;
        min-height: var(--sabo-mobile-nav-height);
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        padding: 0.5rem 0.25rem max(0.45rem, env(safe-area-inset-bottom));
        border-top: 1px solid #e1e8f1;
        background: rgb(255 255 255 / 97%);
        box-shadow: 0 -0.5rem 1.5rem rgb(30 55 86 / 7%);
        backdrop-filter: blur(14px);
    }

    .sabo-mobile-nav a,
    .sabo-mobile-nav button {
        position: relative;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.2rem;
        border: 0;
        background: transparent;
        color: #647894;
        font-size: 0.72rem;
        font-weight: 550;
        line-height: 1;
        text-align: center;
    }

    .sabo-mobile-nav svg {
        width: 1.6rem;
        height: 1.6rem;
        stroke-width: 1.8;
    }

    .sabo-mobile-nav .is-active {
        color: #0a84ff;
        font-weight: 750;
    }

    .sabo-mobile-nav .is-active::before {
        position: absolute;
        top: -0.55rem;
        width: 3rem;
        height: 0.2rem;
        border-radius: 999px;
        background: #0a84ff;
        content: '';
    }

    .sabo-bookings-page {
        gap: 1rem;
    }

    .sabo-bookings-page > .fi-header {
        align-items: stretch;
        gap: 0.75rem;
    }

    .sabo-bookings-page .fi-header-actions-ctn,
    .sabo-bookings-page .fi-header-actions-ctn .fi-ac {
        width: 100%;
    }

    .sabo-bookings-page .fi-header-actions-ctn .fi-ac {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.625rem;
    }

    .sabo-bookings-page :is(.sabo-booking-mobile-filter-action, .sabo-booking-create-action) {
        min-height: 3.25rem;
        justify-content: center;
        border-radius: 0.875rem;
        font-size: 1rem;
        font-weight: 750;
    }

    .sabo-bookings-page .sabo-booking-create-action {
        border-color: transparent;
        background: #eaf4ff;
        color: #0875dc;
        box-shadow: none;
    }

    .sabo-bookings-page .fi-ta,
    .sabo-bookings-page .fi-ta-main {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sabo-bookings-page .fi-ta-header-ctn {
        border: 0;
        background: transparent;
    }

    .sabo-bookings-page .fi-ta-header {
        padding: 0.25rem 0.25rem 0.6rem;
        border: 0;
    }

    .sabo-bookings-page .fi-ta-header-heading {
        color: #081226;
        font-size: 1.3rem;
        font-weight: 800;
    }

    .sabo-bookings-page .fi-ta-header-toolbar {
        padding: 0 0.25rem 0.75rem;
        border: 0;
    }

    .sabo-bookings-page .fi-ta-search-field {
        width: 100%;
        max-width: none;
    }

    .sabo-bookings-page .fi-ta-content-ctn {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .sabo-bookings-page .fi-ta-table {
        display: block;
        background: transparent;
    }

    .sabo-bookings-page .fi-ta-table > thead {
        display: none;
    }

    .sabo-bookings-page .fi-ta-table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sabo-bookings-page .fi-ta-table > tbody > tr {
        display: block;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sabo-bookings-page .fi-ta-table > tbody > tr > td:not(.fi-ta-cell-mobile-card) {
        display: none !important;
    }

    .sabo-bookings-page .fi-ta-cell-mobile-card {
        display: block !important;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .sabo-bookings-page .fi-ta-cell-mobile-card > .fi-ta-col {
        display: block;
        width: 100%;
    }

    .sabo-mobile-booking-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: 1rem;
        border: 1px solid #e1e8f1;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    .sabo-mobile-booking-card__topline {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-right: 2rem;
    }

    .sabo-mobile-booking-card__topline > a {
        overflow: hidden;
        color: #647894;
        font-size: 0.76rem;
        font-weight: 750;
        letter-spacing: 0.025em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sabo-mobile-booking-status {
        flex: none;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
    }

    .sabo-mobile-booking-status.is-new {
        background: #edf2f8;
        color: #2b4564;
    }

    .sabo-mobile-booking-status.is-confirmed {
        background: #eaf2ff;
        color: #1768cf;
    }

    .sabo-mobile-booking-status.is-checked-in {
        background: #e7f8ee;
        color: #17844e;
    }

    .sabo-mobile-booking-status.is-checked-out {
        background: #ecf7fb;
        color: #087493;
    }

    .sabo-mobile-booking-status.is-cancelled {
        background: #feecef;
        color: #be123c;
    }

    .sabo-mobile-booking-card__guest {
        overflow: hidden;
        padding-right: 2rem;
        color: #081226;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-booking-card__place {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.3rem;
        color: #476481;
        font-size: 0.8rem;
    }

    .sabo-mobile-booking-card__place svg {
        width: 1.05rem;
        height: 1.05rem;
        flex: none;
    }

    .sabo-mobile-booking-card__place span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-booking-card__place b {
        color: #a1afc0;
        font-weight: 600;
    }

    .sabo-mobile-booking-card__details {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.75rem 0;
        border-top: 1px solid #edf1f5;
        border-bottom: 1px solid #edf1f5;
    }

    .sabo-mobile-booking-card__details > div {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.35rem;
        color: #415a77;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .sabo-mobile-booking-card__details svg {
        width: 1rem;
        height: 1rem;
        flex: none;
        color: #0875dc;
    }

    .sabo-mobile-booking-card__footer {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .sabo-mobile-booking-card__footer span {
        color: #60728c;
        font-size: 0.78rem;
    }

    .sabo-mobile-booking-card__footer strong {
        color: #081226;
        font-size: 1.2rem;
        font-weight: 850;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }

    .sabo-mobile-booking-card__dots {
        position: absolute;
        right: 0.35rem;
        top: 0.75rem;
        display: grid;
        width: 2rem;
        height: 2.5rem;
        place-items: center;
        border: 0;
        background: transparent;
        color: #0b629f;
    }

    .sabo-mobile-booking-card__dots svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    .sabo-bookings-page .fi-ta-filters-above-content-ctn {
        display: none;
    }

    .sabo-bookings-page.sabo-booking-filters-open .fi-ta-filters-above-content-ctn {
        position: fixed;
        inset: 4.5rem 0 5.75rem;
        z-index: 61;
        display: block;
        overflow-y: auto;
        padding: 1.25rem;
        background: #fff;
    }

    .sabo-booking-filters-open .fi-ta-filters {
        padding: 0;
    }

    .sabo-booking-filters-open .fi-ta-filters-header,
    .sabo-booking-filters-open .fi-ta-filters-actions-ctn {
        display: none;
    }

    .sabo-booking-filter-bar {
        position: fixed;
        inset: 0 0 auto;
        z-index: 62;
        display: grid;
        height: 4.5rem;
        grid-template-columns: 3rem 1fr auto;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e4eaf2;
        background: #fff;
    }

    .sabo-booking-filter-bar h2 {
        font-size: 1.5rem;
        font-weight: 800;
        text-align: center;
    }

    .sabo-booking-filter-bar button {
        min-height: 2.75rem;
        color: #0875dc;
    }

    .sabo-booking-filter-bar svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .sabo-booking-filter-footer {
        position: fixed;
        inset: auto 0 0;
        z-index: 62;
        display: block;
        padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom));
        background: #fff;
    }

    .sabo-booking-filter-footer .fi-btn {
        width: 100%;
        min-height: 3.5rem;
        border-radius: 0.875rem;
        font-size: 1.05rem;
    }

    html:has(.sabo-booking-filters-open) {
        overflow: hidden;
    }

    .sabo-bookings-page .fi-ta-header-toolbar > .fi-ta-actions:empty {
        display: none;
    }

    .sabo-bookings-page .fi-ta-header-toolbar > div:last-child {
        width: 100%;
    }

    .sabo-bookings-page .sabo-booking-mobile-filter-action {
        background: #0a84ff;
        color: #fff;
    }

    .sabo-rooms-page {
        gap: 1rem;
    }

    .sabo-rooms-page > .fi-header {
        align-items: stretch;
        gap: 0.75rem;
    }

    .sabo-rooms-page .fi-header-actions-ctn,
    .sabo-rooms-page .fi-header-actions-ctn .fi-ac {
        width: 100%;
    }

    .sabo-rooms-page .fi-header-actions-ctn .fi-ac {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.625rem;
    }

    .sabo-rooms-page :is(.sabo-room-mobile-filter-action, .sabo-room-create-action) {
        min-height: 3.25rem;
        justify-content: center;
        border-radius: 0.875rem;
        font-size: 1rem;
        font-weight: 750;
    }

    .sabo-rooms-page .sabo-room-create-action {
        border-color: transparent;
        background: #eaf4ff;
        color: #0875dc;
        box-shadow: none;
    }

    .sabo-rooms-page .fi-ta {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sabo-rooms-page .fi-ta-header-ctn {
        border: 0;
        background: transparent;
    }

    .sabo-rooms-page .fi-ta-header {
        padding: 0.25rem 0.25rem 0.6rem;
        border: 0;
    }

    .sabo-rooms-page .fi-ta-header-heading {
        color: #081226;
        font-size: 1.3rem;
        font-weight: 800;
    }

    .sabo-rooms-page .fi-ta-header-toolbar {
        padding: 0 0.25rem 0.75rem;
        border: 0;
    }


    .sabo-rooms-page .fi-ta-search-field {
        width: 100%;
    }

    .sabo-rooms-page .fi-ta-content-ctn {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .sabo-rooms-page .fi-ta-table {
        display: block;
        background: transparent;
    }

    .sabo-rooms-page .fi-ta-table > thead {
        display: none;
    }

    .sabo-rooms-page .fi-ta-table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sabo-rooms-page .fi-ta-table > tbody > tr {
        display: block;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sabo-rooms-page .fi-ta-table > tbody > tr > td:not(.fi-ta-cell-mobile-card) {
        display: none !important;
    }

    .sabo-rooms-page .fi-ta-cell-mobile-card {
        display: block !important;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .sabo-rooms-page .fi-ta-cell-mobile-card > .fi-ta-col {
        display: block;
        width: 100%;
    }

    .sabo-mobile-room-card {
        position: relative;
        display: grid;
        min-height: 8.5rem;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.65rem;
        border: 1px solid #e1e8f1;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    .sabo-mobile-room-card__image-link,
    .sabo-mobile-room-card__image-link img {
        width: 6.5rem;
        height: 7.25rem;
        border-radius: 0.9rem;
    }

    .sabo-mobile-room-card__image-link {
        overflow: hidden;
        align-self: center;
        background: #edf2f7;
    }

    .sabo-mobile-room-card__image-link img {
        object-fit: cover;
    }

    .sabo-mobile-room-card__main {
        min-width: 0;
        padding-right: 1.15rem;
    }

    .sabo-mobile-room-card__heading {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.4rem;
    }

    .sabo-mobile-room-card__heading > a {
        overflow: hidden;
        min-width: 0;
        margin-top: 0.15rem;
        color: #081226;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-room-status {
        flex: none;
        padding: 0.4rem 0.62rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 650;
        line-height: 1;
    }

    .sabo-mobile-room-status.is-free {
        background: #edf2f8;
        color: #2b4564;
    }

    .sabo-mobile-room-status.is-busy {
        background: #e7f8ee;
        color: #179b57;
    }

    .sabo-mobile-room-status.is-cleaning {
        background: #fff1df;
        color: #cf6a11;
    }

    .sabo-mobile-room-status.is-unavailable {
        background: #feecef;
        color: #be123c;
    }

    .sabo-mobile-room-card__meta {
        display: flex;
        overflow: hidden;
        gap: 0.65rem;
        margin-top: 0.6rem;
        color: #476481;
        font-size: 0.75rem;
    }

    .sabo-mobile-room-card__meta span {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.2rem;
        white-space: nowrap;
    }

    .sabo-mobile-room-card__meta svg {
        width: 1rem;
        height: 1rem;
        flex: none;
    }

    .sabo-mobile-room-card__price {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0.3rem;
        margin-top: 1rem;
        white-space: nowrap;
    }

    .sabo-mobile-room-card__price strong {
        color: #081226;
        font-size: 1.3rem;
        font-weight: 850;
        letter-spacing: -0.025em;
    }

    .sabo-mobile-room-card__price span,
    .sabo-mobile-room-card__date {
        color: #60728c;
        font-size: 0.78rem;
    }

    .sabo-mobile-room-card__date {
        margin-top: 0.15rem;
        text-align: right;
    }

    .sabo-mobile-room-card__dots {
        position: absolute;
        right: 0.25rem;
        top: 3.25rem;
        display: grid;
        width: 2rem;
        height: 2.5rem;
        place-items: center;
        border: 0;
        background: transparent;
        color: #0b629f;
    }

    .sabo-mobile-room-card__dots svg {
        width: 1.4rem;
        height: 1.4rem;
    }

}

@media (max-width: 430px) {
    .sabo-mobile-booking-card__details {
        grid-template-columns: 1fr 1fr;
    }

    .sabo-mobile-booking-card__details > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 370px) {
    .sabo-mobile-room-card {
        grid-template-columns: 5.4rem minmax(0, 1fr);
        gap: 0.6rem;
        padding: 0.55rem;
    }

    .sabo-mobile-room-card__image-link,
    .sabo-mobile-room-card__image-link img {
        width: 5.4rem;
        height: 6.75rem;
    }

    .sabo-mobile-room-card__heading > a {
        font-size: 1rem;
    }

    .sabo-mobile-room-card__price strong {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .sabo-rooms-page .fi-ta-filters-above-content-ctn { display: none; }
    .sabo-rooms-page.sabo-room-filters-open .fi-ta-filters-above-content-ctn {
        display: block; position: fixed; inset: 4.5rem 0 5.75rem; z-index: 61;
        overflow-y: auto; background: #fff; padding: 1.25rem;
    }
    .sabo-room-filters-open .fi-ta-filters { padding: 0; }
    .sabo-room-filters-open .fi-ta-filters-header,
    .sabo-room-filters-open .fi-ta-filters-actions-ctn { display: none; }
    .sabo-room-filter-bar {
        position: fixed; inset: 0 0 auto; height: 4.5rem; z-index: 62;
        display: grid; grid-template-columns: 3rem 1fr auto; align-items: center;
        gap: .75rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #e4eaf2;
    }
    .sabo-room-filter-bar h2 { font-size: 1.5rem; font-weight: 800; text-align: center; }
    .sabo-room-filter-bar button { min-height: 2.75rem; color: #0875dc; }
    .sabo-room-filter-bar svg { width: 1.5rem; height: 1.5rem; }
    .sabo-room-filter-footer {
        position: fixed; inset: auto 0 0; z-index: 62; display: block; background: #fff;
        padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom));
    }
    .sabo-room-filter-footer .fi-btn { width: 100%; min-height: 3.5rem; border-radius: .875rem; font-size: 1.05rem; }
    html:has(.sabo-room-filters-open) { overflow: hidden; }
    .sabo-rooms-page .fi-ta-header-toolbar > .fi-ta-actions:empty { display: none; }
    .sabo-rooms-page .fi-ta-header-toolbar > div:last-child { width: 100%; }
    .sabo-rooms-page .fi-ta-search-field { max-width: none; }
    .sabo-rooms-page .fi-ta-main { border: 0; background: transparent; box-shadow: none; }
    .sabo-mobile-room-card__heading { flex-wrap: wrap; }
    .sabo-mobile-room-card__heading > a { flex: 1 1 100%; }
    .sabo-mobile-room-card__meta { flex-wrap: wrap; gap: .15rem .65rem; }
    .sabo-mobile-room-card__price { flex-wrap: wrap; margin-top: .5rem; }
    .sabo-rooms-page .sabo-room-mobile-filter-action { background: #0a84ff; color: #fff; }
    .sabo-room-actions-sheet { max-height: 80dvh; overflow-y: auto; }
}

@media (max-width: 767px) {
    .sabo-guests-page {
        gap: 1rem;
    }

    .sabo-guests-page > .fi-header {
        align-items: stretch;
        gap: 0.75rem;
    }

    .sabo-guests-page .fi-header-actions-ctn,
    .sabo-guests-page .fi-header-actions-ctn .fi-ac {
        width: 100%;
    }

    .sabo-guests-page .sabo-guest-create-action {
        width: 100%;
        min-height: 3.25rem;
        justify-content: center;
        border-color: transparent;
        border-radius: 0.875rem;
        background: #0a84ff;
        color: #fff;
        font-size: 1rem;
        font-weight: 750;
    }

    .sabo-guests-page .fi-ta,
    .sabo-guests-page .fi-ta-main {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sabo-guests-page .fi-ta-header-ctn {
        border: 0;
        background: transparent;
    }

    .sabo-guests-page .fi-ta-header {
        padding: 0.25rem 0.25rem 0.6rem;
        border: 0;
    }

    .sabo-guests-page .fi-ta-header-heading {
        color: #081226;
        font-size: 1.3rem;
        font-weight: 800;
    }

    .sabo-guests-page .fi-ta-header-toolbar {
        padding: 0 0.25rem 0.75rem;
        border: 0;
    }

    .sabo-guests-page .fi-ta-search-field {
        width: 100%;
        max-width: none;
    }

    .sabo-guests-page .fi-ta-content-ctn {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .sabo-guests-page .fi-ta-table {
        display: block;
        background: transparent;
    }

    .sabo-guests-page .fi-ta-table > thead {
        display: none;
    }

    .sabo-guests-page .fi-ta-table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sabo-guests-page .fi-ta-table > tbody > tr {
        display: block;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sabo-guests-page .fi-ta-table > tbody > tr > td:not(.fi-ta-cell-mobile-card) {
        display: none !important;
    }

    .sabo-guests-page .fi-ta-cell-mobile-card {
        display: block !important;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .sabo-guests-page .fi-ta-cell-mobile-card > .fi-ta-col {
        display: block;
        width: 100%;
    }

    .sabo-mobile-guest-card {
        position: relative;
        display: grid;
        grid-template-columns: 3.75rem minmax(0, 1fr);
        gap: 0.8rem;
        padding: 1rem;
        border: 1px solid #e1e8f1;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    .sabo-mobile-guest-card__avatar {
        display: grid;
        width: 3.75rem;
        height: 3.75rem;
        place-items: center;
        border-radius: 1.1rem;
        background: linear-gradient(145deg, #e7f3ff, #d8e8ff);
        color: #0875dc;
        font-size: 1.05rem;
        font-weight: 850;
        letter-spacing: 0.03em;
    }

    .sabo-mobile-guest-card__main {
        min-width: 0;
        padding-right: 1.7rem;
    }

    .sabo-mobile-guest-card__name {
        display: block;
        overflow: hidden;
        color: #081226;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-guest-card__contacts {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.28rem;
        margin-top: 0.55rem;
        color: #476481;
        font-size: 0.8rem;
    }

    .sabo-mobile-guest-card__contacts :is(a, span),
    .sabo-mobile-guest-card__location {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.35rem;
    }

    .sabo-mobile-guest-card__contacts span,
    .sabo-mobile-guest-card__location span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-guest-card__contacts svg,
    .sabo-mobile-guest-card__location svg {
        width: 1rem;
        height: 1rem;
        flex: none;
        color: #7a8da5;
    }

    .sabo-mobile-guest-card__location {
        margin-top: 0.45rem;
        color: #60728c;
        font-size: 0.78rem;
    }

    .sabo-mobile-guest-card__footer {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #edf1f5;
    }

    .sabo-mobile-guest-card__bookings {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: #0875dc;
        font-size: 0.8rem;
        font-weight: 750;
    }

    .sabo-mobile-guest-card__bookings svg {
        width: 1rem;
        height: 1rem;
    }

    .sabo-mobile-guest-card__footer > span {
        color: #8190a4;
        font-size: 0.72rem;
        text-align: right;
    }

    .sabo-mobile-guest-card__dots {
        position: absolute;
        right: 0.35rem;
        top: 0.7rem;
        display: grid;
        width: 2rem;
        height: 2.5rem;
        place-items: center;
        border: 0;
        background: transparent;
        color: #0b629f;
    }

    .sabo-mobile-guest-card__dots svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    .sabo-guests-page .fi-ta-pagination {
        border: 0;
        background: transparent;
    }
}

@media (max-width: 390px) {
    .sabo-mobile-guest-card {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0.85rem;
    }

    .sabo-mobile-guest-card__avatar {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 0.95rem;
    }

    .sabo-mobile-guest-card__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .sabo-mobile-guest-card__footer > span {
        text-align: left;
    }
}

@media (max-width: 767px) {
    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) {
        gap: 1rem;
    }

    :is(.sabo-payments-page, .sabo-photos-page) > .fi-header {
        align-items: stretch;
        gap: 0.75rem;
    }

    :is(.sabo-payments-page, .sabo-photos-page) .fi-header-actions-ctn,
    :is(.sabo-payments-page, .sabo-photos-page) .fi-header-actions-ctn .fi-ac {
        width: 100%;
    }

    :is(.sabo-payment-create-action, .sabo-photo-create-action) {
        width: 100%;
        min-height: 3.25rem;
        justify-content: center;
        border-color: transparent;
        border-radius: 0.875rem;
        background: #0a84ff;
        color: #fff;
        font-size: 1rem;
        font-weight: 750;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) :is(.fi-ta, .fi-ta-main) {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-header-ctn {
        border: 0;
        background: transparent;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-header {
        padding: 0.25rem 0.25rem 0.6rem;
        border: 0;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-header-heading {
        color: #081226;
        font-size: 1.3rem;
        font-weight: 800;
    }

    :is(.sabo-payments-page, .sabo-photos-page) .fi-ta-header-toolbar {
        padding: 0 0.25rem 0.75rem;
        border: 0;
    }

    :is(.sabo-payments-page, .sabo-photos-page) .fi-ta-search-field {
        width: 100%;
        max-width: none;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-content-ctn {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-table {
        display: block;
        background: transparent;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-table > thead {
        display: none;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page) .fi-ta-table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sabo-photos-page .fi-ta-table > tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-table > tbody > tr {
        display: block;
        min-width: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-table > tbody > tr > td:not(.fi-ta-cell-mobile-card) {
        display: none !important;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-cell-mobile-card {
        display: block !important;
        width: 100%;
        padding: 0;
        border: 0;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-cell-mobile-card > .fi-ta-col {
        display: block;
        width: 100%;
    }

    :is(.sabo-payments-page, .sabo-housekeeping-page, .sabo-photos-page) .fi-ta-pagination {
        border: 0;
        background: transparent;
    }

    .sabo-mobile-payment-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding: 1rem;
        border: 1px solid #e1e8f1;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    .sabo-mobile-payment-card__topline {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding-right: 2rem;
    }

    .sabo-mobile-payment-card__topline > a {
        overflow: hidden;
        color: #60728c;
        font-size: 0.75rem;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-payment-status {
        flex: none;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
    }

    .sabo-mobile-payment-status.is-paid { background: #e7f8ee; color: #17844e; }
    .sabo-mobile-payment-status.is-partial { background: #fff1df; color: #b55b0e; }
    .sabo-mobile-payment-status.is-failed { background: #feecef; color: #be123c; }
    .sabo-mobile-payment-status.is-refunded { background: #edf2f8; color: #53677e; }
    .sabo-mobile-payment-status.is-pending { background: #eaf2ff; color: #1768cf; }

    .sabo-mobile-payment-card__amount {
        width: fit-content;
        color: #081226;
        font-size: 1.45rem;
        font-weight: 850;
        letter-spacing: -0.03em;
        line-height: 1.15;
    }

    :is(.sabo-mobile-payment-card__guest, .sabo-mobile-payment-card__place) {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.4rem;
        color: #476481;
        font-size: 0.8rem;
    }

    :is(.sabo-mobile-payment-card__guest, .sabo-mobile-payment-card__place) svg,
    .sabo-mobile-payment-card__footer svg {
        width: 1rem;
        height: 1rem;
        flex: none;
        color: #7a8da5;
    }

    :is(.sabo-mobile-payment-card__guest, .sabo-mobile-payment-card__place) span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-payment-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: 0.15rem;
        padding-top: 0.75rem;
        border-top: 1px solid #edf1f5;
        color: #60728c;
        font-size: 0.75rem;
    }

    .sabo-mobile-payment-card__footer span {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.35rem;
    }

    .sabo-mobile-payment-card__footer span:last-child {
        justify-content: flex-end;
        text-align: right;
    }

    .sabo-mobile-payment-card__dots,
    .sabo-mobile-photo-card__dots {
        position: absolute;
        right: 0.35rem;
        top: 0.7rem;
        z-index: 2;
        display: grid;
        width: 2rem;
        height: 2.5rem;
        place-items: center;
        border: 0;
        background: transparent;
        color: #0b629f;
    }

    :is(.sabo-mobile-payment-card__dots, .sabo-mobile-photo-card__dots) svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    .sabo-mobile-housekeeping-card {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid #e1e8f1;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    .sabo-mobile-housekeeping-card__topline {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .sabo-mobile-housekeeping-card__topline > span:first-child {
        overflow: hidden;
        color: #60728c;
        font-size: 0.78rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-housekeeping-status {
        flex: none;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
    }

    .sabo-mobile-housekeeping-status.is-free { background: #e7f8ee; color: #17844e; }
    .sabo-mobile-housekeeping-status.is-cleaning { background: #fff1df; color: #b55b0e; }
    .sabo-mobile-housekeeping-status.is-unavailable { background: #feecef; color: #be123c; }

    .sabo-mobile-housekeeping-card__room {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .sabo-mobile-housekeeping-card__icon {
        display: grid;
        width: 3.25rem;
        height: 3.25rem;
        flex: none;
        place-items: center;
        border-radius: 1rem;
        background: #eaf4ff;
        color: #0875dc;
    }

    .sabo-mobile-housekeeping-card__icon svg {
        width: 1.45rem;
        height: 1.45rem;
    }

    .sabo-mobile-housekeeping-card__room div {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.2rem;
    }

    .sabo-mobile-housekeeping-card__room strong {
        color: #081226;
        font-size: 1.1rem;
        font-weight: 800;
    }

    .sabo-mobile-housekeeping-card__room div > span {
        overflow: hidden;
        color: #60728c;
        font-size: 0.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-housekeeping-card__closed {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        color: #b55b0e;
        font-size: 0.76rem;
    }

    .sabo-mobile-housekeeping-card__closed svg {
        width: 1rem;
        height: 1rem;
    }

    .sabo-mobile-housekeeping-card__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.55rem;
        padding-top: 0.75rem;
        border-top: 1px solid #edf1f5;
    }

    .sabo-mobile-housekeeping-card__actions button {
        display: inline-flex;
        min-height: 2.8rem;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid #d9e2ed;
        border-radius: 0.75rem;
        color: #39516d;
        font-size: 0.8rem;
        font-weight: 750;
    }

    .sabo-mobile-housekeeping-card__actions button.is-primary {
        border-color: #0875dc;
        background: #0875dc;
        color: #fff;
    }

    .sabo-mobile-housekeeping-card__actions button.is-success {
        border-color: #179b57;
        background: #e7f8ee;
        color: #117442;
    }

    .sabo-mobile-housekeeping-card__actions svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .sabo-mobile-photo-card {
        position: relative;
        overflow: hidden;
        min-width: 0;
        border: 1px solid #e1e8f1;
        border-radius: 1.15rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    .sabo-mobile-photo-card__image-link {
        position: relative;
        display: block;
        height: 10rem;
        overflow: hidden;
        background: #edf2f7;
    }

    .sabo-mobile-photo-card__image-link img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 180ms ease;
    }

    .sabo-mobile-photo-card__placeholder {
        display: grid;
        width: 100%;
        height: 100%;
        place-items: center;
        color: #9aabba;
    }

    .sabo-mobile-photo-card__placeholder svg {
        width: 2.4rem;
        height: 2.4rem;
    }

    .sabo-mobile-photo-card__cover {
        position: absolute;
        left: 0.6rem;
        top: 0.6rem;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.6rem;
        border-radius: 999px;
        background: rgb(8 18 38 / 78%);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 750;
        backdrop-filter: blur(8px);
    }

    .sabo-mobile-photo-card__cover svg {
        width: 0.85rem;
        height: 0.85rem;
    }

    .sabo-mobile-photo-card__body {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.28rem;
        padding: 0.8rem;
        padding-right: 2.5rem;
    }

    .sabo-mobile-photo-card__title {
        overflow: hidden;
        color: #081226;
        font-size: 0.95rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-photo-card__body > span {
        display: -webkit-box;
        overflow: hidden;
        color: #60728c;
        font-size: 0.74rem;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .sabo-mobile-photo-card__body small {
        color: #8997a9;
        font-size: 0.68rem;
    }

    .sabo-mobile-photo-card__dots {
        top: auto;
        bottom: 0.55rem;
    }
}

@media (max-width: 480px) {
    .sabo-photos-page .fi-ta-table > tbody {
        grid-template-columns: 1fr;
    }

    .sabo-mobile-photo-card__image-link {
        height: 12rem;
    }

    .sabo-mobile-payment-card__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .sabo-mobile-payment-card__footer span:last-child {
        justify-content: flex-start;
        text-align: left;
    }
}

.sabo-report-mobile-list {
    display: none;
}

@media (max-width: 767px) {
    :is(.sabo-amenities-page, .sabo-users-page, .sabo-reports-page) {
        min-width: 0;
        gap: 1rem;
    }

    :is(.sabo-amenities-page, .sabo-users-page) > .fi-header {
        align-items: stretch;
        gap: 0.75rem;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-header-actions-ctn,
    :is(.sabo-amenities-page, .sabo-users-page) .fi-header-actions-ctn .fi-ac {
        width: 100%;
    }

    :is(.sabo-amenity-create-action, .sabo-user-create-action) {
        width: 100%;
        min-height: 3.25rem;
        justify-content: center;
        border-color: transparent;
        border-radius: 0.875rem;
        background: #0a84ff;
        color: #fff;
        font-size: 1rem;
        font-weight: 750;
    }

    :is(.sabo-amenities-page, .sabo-users-page) :is(.fi-ta, .fi-ta-main) {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-header-ctn {
        border: 0;
        background: transparent;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-header {
        padding: 0.25rem 0.25rem 0.6rem;
        border: 0;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-header-heading {
        color: #081226;
        font-size: 1.3rem;
        font-weight: 800;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-header-toolbar {
        padding: 0 0.25rem 0.75rem;
        border: 0;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-search-field {
        width: 100%;
        max-width: none;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-content-ctn {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-table {
        display: block;
        background: transparent;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-table > thead {
        display: none;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-table > tbody > tr {
        display: block;
        min-width: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-table > tbody > tr:not(.fi-ta-group-header-row) > td:not(.fi-ta-cell-mobile-card),
    .sabo-amenities-page .fi-ta-group-header-row .fi-ta-group-selection-cell {
        display: none !important;
    }

    .sabo-amenities-page .fi-ta-group-header-row .fi-ta-group-header-cell {
        display: block;
        width: 100%;
        padding: 0.45rem 0.3rem 0;
        border: 0;
        color: #526c8a;
        font-size: 0.8rem;
        font-weight: 800;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-cell-mobile-card {
        display: block !important;
        width: 100%;
        padding: 0;
        border: 0;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-cell-mobile-card > .fi-ta-col {
        display: block;
        width: 100%;
    }

    :is(.sabo-amenities-page, .sabo-users-page) .fi-ta-pagination {
        border: 0;
        background: transparent;
    }

    .sabo-mobile-amenity-card,
    .sabo-mobile-user-card {
        position: relative;
        min-width: 0;
        padding: 1rem;
        border: 1px solid #e1e8f1;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 0.5rem 1.5rem rgb(21 47 79 / 7%);
    }

    :is(.sabo-mobile-amenity-card, .sabo-mobile-user-card) .fi-ta-col {
        display: contents;
    }

    .sabo-mobile-amenity-card__main {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.75rem;
        padding-right: 2rem;
    }

    .sabo-mobile-amenity-card__icon,
    .sabo-mobile-user-card__avatar {
        display: grid;
        width: 3rem;
        height: 3rem;
        flex: none;
        place-items: center;
        border-radius: 0.9rem;
        background: #eaf4ff;
        color: #0875dc;
    }

    .sabo-mobile-amenity-card__icon svg {
        width: 1.45rem;
        height: 1.45rem;
    }

    .sabo-mobile-amenity-card__main > div,
    .sabo-mobile-user-card__main {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.2rem;
    }

    .sabo-mobile-amenity-card__main > div {
        flex: 1;
    }

    .sabo-mobile-amenity-card__title,
    .sabo-mobile-user-card__name {
        overflow: hidden;
        color: #081226;
        font-size: 1rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-amenity-card__category,
    .sabo-mobile-user-card__email {
        overflow: hidden;
        color: #60728c;
        font-size: 0.78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-amenity-card__badges,
    .sabo-mobile-user-card__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.75rem;
    }

    .sabo-mobile-amenity-badge,
    .sabo-mobile-user-badge {
        padding: 0.35rem 0.6rem;
        border-radius: 999px;
        background: #eef3f8;
        color: #53677e;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.1;
    }

    :is(.sabo-mobile-amenity-badge, .sabo-mobile-user-badge).is-active,
    .sabo-mobile-amenity-badge.is-approved { background: #e7f8ee; color: #17844e; }
    :is(.sabo-mobile-amenity-badge, .sabo-mobile-user-badge).is-inactive,
    .sabo-mobile-amenity-badge.is-rejected { background: #feecef; color: #be123c; }
    .sabo-mobile-amenity-badge.is-pending { background: #fff1df; color: #b55b0e; }
    .sabo-mobile-user-badge.is-role { background: #eaf2ff; color: #1768cf; }

    .sabo-mobile-amenity-card__account {
        overflow: hidden;
        margin-top: 0.7rem;
        color: #60728c;
        font-size: 0.75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-amenity-card__dots,
    .sabo-mobile-user-card__dots {
        position: absolute;
        right: 0.35rem;
        top: 0.6rem;
        z-index: 2;
        display: grid;
        width: 2rem;
        height: 2.5rem;
        place-items: center;
        color: #0b629f;
    }

    :is(.sabo-mobile-amenity-card__dots, .sabo-mobile-user-card__dots) svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    .sabo-mobile-user-card {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        column-gap: 0.75rem;
    }

    .sabo-mobile-user-card__avatar {
        font-size: 0.9rem;
        font-weight: 800;
    }

    .sabo-mobile-user-card__main {
        padding-right: 2rem;
    }

    .sabo-mobile-user-card__badges {
        margin-top: 0.35rem;
    }

    .sabo-mobile-user-card__footer {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.45rem;
        grid-column: 1 / -1;
        margin-top: 0.8rem;
        padding-top: 0.75rem;
        border-top: 1px solid #edf1f5;
        color: #60728c;
        font-size: 0.76rem;
    }

    .sabo-mobile-user-card__footer > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sabo-mobile-user-card__footer svg {
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        margin-right: 0.3rem;
        vertical-align: -0.15rem;
    }

    .sabo-reports-page :is(.fi-section, .fi-section-content-ctn) {
        min-width: 0;
    }

    .sabo-reports-page input[type="date"],
    .sabo-reports-page select {
        min-width: 0;
        max-width: 100%;
    }

    .sabo-reports-page .text-3xl {
        overflow-wrap: anywhere;
    }

    .sabo-report-desktop-table {
        display: none;
    }

    .sabo-report-mobile-list {
        display: grid;
        gap: 0.55rem;
    }

    .sabo-report-mobile-row {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.8rem;
        border: 1px solid #e8eef5;
        border-radius: 0.85rem;
        background: #f8fbff;
        font-size: 0.8rem;
    }

    .sabo-report-mobile-row span {
        min-width: 0;
        color: #425a75;
        overflow-wrap: anywhere;
    }

    .sabo-report-mobile-row strong {
        flex: none;
        color: #081226;
        font-weight: 800;
        white-space: nowrap;
    }

    .sabo-report-mobile-empty {
        color: #60728c;
        font-size: 0.8rem;
    }

    .sabo-user-permissions-page {
        min-width: 0;
    }

    .sabo-user-permissions-page > .fi-header {
        align-items: stretch;
        gap: 0.75rem;
    }

    .sabo-user-permissions-page .fi-header-actions-ctn,
    .sabo-user-permissions-page .fi-header-actions-ctn .fi-ac,
    .sabo-user-permissions-page .fi-header-actions-ctn .fi-ac-btn-action,
    .sabo-user-permissions-save {
        width: 100%;
    }

    .sabo-user-permissions-form :is(.fi-section, .fi-section-content-ctn) {
        min-width: 0;
    }

    .sabo-user-permissions-save {
        min-height: 3.25rem;
        justify-content: center;
        border-radius: 0.875rem;
    }
}