@media (max-width: 843.98px) {
    .fi-body .fi-topbar {
        padding-inline: .625rem;
    }

    .fi-body .fi-topbar-end {
        min-width: 0;
        justify-content: flex-end;
        gap: 1rem;
    }

    .fi-body .fi-global-search-ctn {
        display: none;
    }

    .fi-body .fi-main {
        padding-inline: .75rem;
        padding-block-start: .75rem;
    }

    .fi-body .fi-page-content {
        gap: .875rem;
    }

    .fi-body .fi-header {
        gap: .625rem;
    }

    .fi-body .fi-header-heading {
        font-size: 1.375rem;
        line-height: 1.15;
        letter-spacing: -.02em;
    }

    .fi-body .fi-header-subheading {
        font-size: .75rem;
        line-height: 1.5;
    }

    .fi-body .fi-header-actions-ctn,
    .fi-body .fi-header-actions-ctn > .fi-ac {
        width: 100%;
    }

    .fi-body .fi-header-actions-ctn .fi-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .fi-body .fi-breadcrumbs {
        display: none;
    }

    .fi-body .fi-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fi-body .fi-tabs::-webkit-scrollbar {
        display: none;
    }

    .fi-body .fi-tabs-item {
        white-space: nowrap;
    }

    .fi-body .fi-ta-ctn {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .fi-body .fi-ta-header-ctn,
    .fi-body .fi-ta-header-toolbar {
        padding-inline: .25rem;
    }

    .fi-body .fi-ta-search-field {
        max-width: none;
        width: 100%;
    }

    .fi-body .fi-ta-content-ctn {
        overflow-x: visible;
        border: 0;
    }

    .fi-body .fi-ta-table {
        display: block;
        width: 100%;
    }

    .fi-body .fi-ta-table > thead {
        display: none;
    }

    .fi-body .fi-ta-table > tbody {
        display: grid;
        gap: .625rem;
        border: 0;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .25rem .625rem;
        padding: .875rem;
        background: var(--viki-panel);
        border: 1px solid var(--viki-border);
        border-radius: 14px;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row):hover {
        background: var(--viki-panel);
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) > .fi-ta-cell {
        display: block;
        min-width: 0;
        padding: 0;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) > .fi-ta-cell.md\:fi-visible,
    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) > .fi-ta-selection-cell {
        display: none;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) > .fi-ta-cell:has(> .fi-ta-actions) {
        grid-area: act;
        align-self: stretch;
        min-height: max-content;
        margin-top: .5rem;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions .fi-link {
        min-height: 40px;
        padding-inline: .625rem;
        border: 1px solid var(--viki-border);
        border-radius: 10px;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions .fi-link > * {
        align-self: center;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions .viki-next-step {
        order: -1;
        flex: 1 0 100%;
        justify-content: center;
        min-height: 46px;
        border-color: transparent;
        border-radius: 11px;
        background: var(--primary-600);
        font-weight: 700;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions .viki-next-step,
    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions .viki-next-step .fi-link-label,
    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) .fi-ta-actions .viki-next-step .fi-icon {
        color: #fff;
    }

    .fi-body .fi-ta-empty-state {
        padding-block: 2rem;
    }

    .fi-body .fi-ta-table[aria-label="orders"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-areas:
            "ref    status"
            "name   total"
            "ful    wanted"
            "act    act";
    }

    .fi-ta-table[aria-label="orders"] .fi-ta-cell-reference { grid-area: ref; }
    .fi-ta-table[aria-label="orders"] .fi-ta-cell-status { grid-area: status; justify-self: end; }
    .fi-ta-table[aria-label="orders"] .fi-ta-cell-customer-name { grid-area: name; }
    .fi-ta-table[aria-label="orders"] .fi-ta-cell-total-cents { grid-area: total; justify-self: end; }
    .fi-ta-table[aria-label="orders"] .fi-ta-cell-fulfilment { grid-area: ful; }
    .fi-ta-table[aria-label="orders"] .fi-ta-cell-requested-for { grid-area: wanted; justify-self: end; }

    .fi-body .fi-ta-table[aria-label="bookings"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        grid-template-areas:
            "time   who"
            "size   status"
            "act    act";
    }

    .fi-ta-table[aria-label="bookings"] .fi-ta-cell-reserved-for { grid-area: time; }
    .fi-ta-table[aria-label="bookings"] .fi-ta-cell-customer-name { grid-area: who; }
    .fi-ta-table[aria-label="bookings"] .fi-ta-cell-party-size { grid-area: size; justify-self: start; }
    .fi-ta-table[aria-label="bookings"] .fi-ta-cell-status { grid-area: status; justify-self: end; }

    .fi-body .fi-ta-table[aria-label="customers"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-areas:
            "name    spend"
            "phone   orders"
            "act     act";
    }

    .fi-ta-table[aria-label="customers"] .fi-ta-cell-name { grid-area: name; }
    .fi-ta-table[aria-label="customers"] .fi-ta-cell-phone { grid-area: phone; }
    .fi-ta-table[aria-label="customers"] .fi-ta-cell-lifetime-cents { grid-area: spend; justify-self: end; }
    .fi-ta-table[aria-label="customers"] .fi-ta-cell-orders-count { grid-area: orders; justify-self: end; }
    .fi-body .fi-ta-table[aria-label="customers"] > tbody > .fi-ta-row > .fi-ta-cell-created-at { display: none; }

    .fi-body .fi-ta-table[aria-label="dishes & drinks"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-columns: 3.25rem minmax(0, 1fr) auto;
        grid-template-areas:
            "img   name   avail"
            "img   sect   price"
            "act   act    act";
    }

    .fi-ta-table[aria-label="dishes & drinks"] .fi-ta-cell-image-card { grid-area: img; }
    .fi-ta-table[aria-label="dishes & drinks"] .fi-ta-cell-name { grid-area: name; }
    .fi-ta-table[aria-label="dishes & drinks"] .fi-ta-cell-section\.title { grid-area: sect; }
    .fi-ta-table[aria-label="dishes & drinks"] .fi-ta-cell-price-cents { grid-area: price; justify-self: end; }
    .fi-ta-table[aria-label="dishes & drinks"] .fi-ta-cell-is-available { grid-area: avail; justify-self: end; }
    .fi-body .fi-ta-table[aria-label="dishes & drinks"] > tbody > .fi-ta-row > .fi-ta-cell-tags,
    .fi-body .fi-ta-table[aria-label="dishes & drinks"] > tbody > .fi-ta-row > .fi-ta-cell-updated-at { display: none; }

    .fi-body .fi-ta-table > tbody > .fi-ta-row.fi-ta-group-header-row {
        display: block;
        padding: .875rem .25rem .125rem;
        background: transparent;
        border: 0;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row.fi-ta-group-header-row > .fi-ta-group-selection-cell {
        display: none;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row.fi-ta-group-header-row .fi-ta-group-heading {
        font-size: .75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--viki-t2);
    }

    .fi-body .fi-ta-table[aria-label="sections"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        grid-template-areas:
            "no    title   active"
            "no    tab     count"
            "act   act     act";
    }

    .fi-ta-table[aria-label="sections"] .fi-ta-cell-index-label { grid-area: no; }
    .fi-ta-table[aria-label="sections"] .fi-ta-cell-title { grid-area: title; }
    .fi-ta-table[aria-label="sections"] .fi-ta-cell-tab-label { grid-area: tab; }
    .fi-ta-table[aria-label="sections"] .fi-ta-cell-items-count { grid-area: count; justify-self: end; }
    .fi-ta-table[aria-label="sections"] .fi-ta-cell-is-active { grid-area: active; justify-self: end; }

    .fi-body .fi-ta-table[aria-label="closures"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        grid-template-areas:
            "reason reason"
            "from   from"
            "until  until"
            "act    act";
    }

    .fi-ta-table[aria-label="closures"] .fi-ta-cell-reason { grid-area: reason; }
    .fi-ta-table[aria-label="closures"] .fi-ta-cell-starts-at { grid-area: from; }
    .fi-ta-table[aria-label="closures"] .fi-ta-cell-ends-at { grid-area: until; }

    .fi-ta-table[aria-label="closures"] .fi-ta-cell-starts-at::before,
    .fi-ta-table[aria-label="closures"] .fi-ta-cell-ends-at::before {
        display: inline-block;
        width: 3.25rem;
        font-size: .625rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--viki-t3);
    }

    .fi-ta-table[aria-label="closures"] .fi-ta-cell-starts-at::before { content: "From"; }
    .fi-ta-table[aria-label="closures"] .fi-ta-cell-ends-at::before { content: "Until"; }

    .fi-body .fi-ta-table[aria-label="staff accounts"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-areas:
            "name   role"
            "seen   active"
            "act    act";
    }

    .fi-ta-table[aria-label="staff accounts"] .fi-ta-cell-name { grid-area: name; }
    .fi-ta-table[aria-label="staff accounts"] .fi-ta-cell-roles\.name { grid-area: role; justify-self: end; }
    .fi-ta-table[aria-label="staff accounts"] .fi-ta-cell-last-login-at { grid-area: seen; }
    .fi-ta-table[aria-label="staff accounts"] .fi-ta-cell-is-active { grid-area: active; justify-self: end; }
    .fi-body .fi-ta-table[aria-label="staff accounts"] > tbody > .fi-ta-row > .fi-ta-cell-two-factor-confirmed-at { display: none; }

    .fi-body .fi-ta-table[aria-label="roles"] > tbody > .fi-ta-row:not(.fi-ta-group-header-row) {
        grid-template-areas:
            "name   perms"
            "code   people"
            "act    act";
    }

    .fi-ta-table[aria-label="roles"] .fi-ta-cell-name { grid-area: name; }
    .fi-ta-table[aria-label="roles"] .fi-ta-cell-code { grid-area: code; }
    .fi-ta-table[aria-label="roles"] .fi-ta-cell-permission-count { grid-area: perms; justify-self: end; }
    .fi-ta-table[aria-label="roles"] .fi-ta-cell-users-count { grid-area: people; justify-self: end; }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row).viki-row-off {
        background: var(--viki-late);
        border-color: var(--danger-500);
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row).viki-row-late {
        background: var(--viki-late);
        border-color: var(--danger-500);
    }

    .viki-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .625rem;
    }

    .viki-kpi {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: .75rem;
    }

    .viki-kpi-disc {
        width: 32px;
        height: 32px;
    }

    .viki-kpi-disc svg {
        width: 17px;
        height: 17px;
    }

    .viki-kpi-value {
        font-size: 1.375rem;
    }

    .viki-kpi-label {
        font-size: .6875rem;
        line-height: 1.35;
    }

    .viki-queue-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: .25rem;
        padding: .75rem;
    }

    .viki-queue-ref { grid-column: 1; }
    .viki-queue-wait { grid-column: 2; justify-self: end; }
    .viki-queue-who { grid-column: 1; }
    .viki-queue-total { grid-column: 2; justify-self: end; }
    .viki-queue-for { grid-column: 1; }
    .viki-queue-row .viki-chip { grid-column: 2; justify-self: end; }

    .viki-queue-move {
        grid-column: 1 / -1;
        margin-top: .375rem;
    }

    .viki-queue-move .viki-ghost-btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    .viki-book-row {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        row-gap: .25rem;
    }

    .viki-content-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .viki-content-map {
        display: none;
    }

    .viki-visual-frame-wrap {
        display: none;
    }

    .fi-body .fi-sc-form .fi-sc-actions {
        position: sticky;
        bottom: calc(var(--viki-bottomnav-h) + env(safe-area-inset-bottom));
        z-index: 15;
        margin-inline: -.75rem;
        margin-block-end: -.75rem;
        padding: .75rem;
        background: var(--viki-panel);
        border-top: 1px solid var(--viki-border);
    }

    .fi-body .fi-sc-form .fi-sc-actions .fi-ac {
        width: 100%;
        gap: .5rem;
    }

    .fi-body .fi-sc-form .fi-sc-actions .fi-btn {
        flex: 1;
        justify-content: center;
        min-height: 48px;
    }

    .fi-body .fi-fo-field-label-col {
        padding-block-end: .25rem;
    }

    .fi-body .fi-section-content {
        padding: .875rem;
    }

    .fi-body .fi-modal-window {
        margin-block-end: calc(var(--viki-bottomnav-h) + env(safe-area-inset-bottom));
    }
}

@media (min-width: 844px) and (max-width: 1179.98px) {
    .fi-body .fi-main {
        padding-inline: 1rem;
    }

    .fi-body .fi-ta-table > tbody > .fi-ta-row:not(.fi-ta-group-header-row) > .fi-ta-cell {
        padding-block: .5rem;
    }

    .fi-body .fi-header-heading {
        font-size: 1.5rem;
    }

    .viki-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}