/* Full identity on authentication pages; compact rings in the panel navigation. */
.fi-logo .admin-brand-mark {
    display: block;
    width: auto;
    height: 2.5rem;
}

.fi-logo .admin-brand-full {
    display: none;
}

.fi-simple-header .fi-logo {
    width: 100%;
    max-width: 14rem;
    justify-content: center;
}

.fi-simple-header .admin-brand-mark {
    display: none;
}

.fi-simple-header .admin-brand-full {
    display: block;
    width: 100%;
    height: auto;
}

/* Event form: header / RSVP image pickers show a grid of square thumbnails instead of a text list. */
.gallery-thumb {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: .375rem;
}

.gallery-image-select .fi-dropdown-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .5rem;
    padding: .5rem;
}

.gallery-image-select .fi-select-input-option {
    padding: 0;
    border-radius: .5rem;
    overflow: hidden;
}

.gallery-image-select .fi-select-input-option .gallery-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    transition: transform .2s ease;
}

.gallery-image-select .fi-select-input-option:hover .gallery-thumb {
    transform: scale(1.04);
}

.gallery-image-select .fi-select-input-option.fi-selected {
    outline: 3px solid var(--primary-500);
    outline-offset: -3px;
}

/* Event form: gallery uploader shows the photos only, without file name and size over each one. */
.gallery-uploader .filepond--file-info,
.gallery-uploader .filepond--file-status {
    display: none;
}

/* ==========================================================================
   Tables on phones: one card per record instead of a sideways-scrolling table.
   Every panel table gets .fi-ta-cards and every cell a data-label (AppServiceProvider).
   - header: selection checkbox, first column (title), any .fi-ta-card-aside cells (e.g. QR button)
   - body: two tiles per line, label over value; .fi-ta-card-wide cells take the full width
   - footer: record actions as full-width buttons
   Empty optional cells are left out.
   ========================================================================== */
@media (max-width: 767px) {
    .fi-ta-cards {
        --card-bg: #fff;
        --card-border: rgb(15 23 42 / .08);
        --card-muted: rgb(100 116 139);
        --card-head: rgb(248 250 252);
        --card-tile: rgb(248 250 252);
        --card-inset: .75rem;
    }

    .dark .fi-ta-cards {
        --card-bg: rgb(24 24 27);
        --card-border: rgb(255 255 255 / .08);
        --card-muted: rgb(161 161 170);
        --card-head: rgb(32 32 36);
        --card-tile: rgb(255 255 255 / .035);
    }

    .fi-ta-cards .fi-ta-content-ctn,
    .fi-ta-cards .fi-ta-table {
        overflow: visible;
    }

    .fi-ta-cards .fi-ta-table,
    .fi-ta-cards .fi-ta-table > tbody {
        display: block;
        width: 100%;
        border: 0;
    }

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

    .fi-ta-cards .fi-ta-table > tbody {
        display: flex;
        flex-direction: column;
        gap: .875rem;
        padding: .875rem;
    }

    .fi-ta-cards .fi-ta-table > tbody > tr {
        border: 0;
    }

    .fi-ta-cards .fi-ta-row:not(.fi-ta-group-header-row) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: .5rem;
        padding: 0 var(--card-inset) var(--card-inset);
        border: 1px solid var(--card-border) !important;
        border-radius: 1rem;
        overflow: hidden;
        background: var(--card-bg) !important;
        box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 14px -6px rgb(0 0 0 / .12);
    }

    .fi-ta-cards .fi-ta-row > td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0 !important;
    }

    .fi-ta-cards .fi-ta-row > td > .fi-ta-col {
        display: block;
        padding: 0;
    }

    .fi-ta-cards .fi-ta-row .fi-ta-text,
    .fi-ta-cards .fi-ta-row .fi-ta-image,
    .fi-ta-cards .fi-ta-row .fi-ta-icon {
        padding: 0;
        width: 100%;
    }

    /* ---- Header band ---- */
    .fi-ta-cards .fi-ta-row > td:is(.fi-ta-selection-cell, .fi-ta-card-aside, :nth-child(1 of [data-label]:not(.fi-ta-card-aside))) {
        order: 0;
        align-self: stretch;
        display: flex;
        align-items: center;
        margin-bottom: .25rem;
        background: var(--card-head);
        box-shadow: 0 1px 0 var(--card-border);
    }

    .fi-ta-cards .fi-ta-row > td.fi-ta-selection-cell {
        flex: 0 0 2.75rem;
        justify-content: center;
        width: auto;
        margin-inline-start: calc(-1 * var(--card-inset));
    }

    .fi-ta-cards .fi-ta-row > td:nth-child(1 of [data-label]:not(.fi-ta-card-aside)) {
        /* wide enough that no tile fits beside it, so the header always gets its own line */
        flex: 1 0 70%;
        min-height: 3.5rem;
        padding-block: .75rem;
    }

    .fi-ta-cards .fi-ta-row:not(:has(> .fi-ta-selection-cell)) > td:nth-child(1 of [data-label]:not(.fi-ta-card-aside)) {
        margin-inline-start: calc(-1 * var(--card-inset));
        padding-inline-start: 1rem;
    }

    .fi-ta-cards .fi-ta-row:not(:has(> .fi-ta-card-aside)) > td:nth-child(1 of [data-label]:not(.fi-ta-card-aside)) {
        margin-inline-end: calc(-1 * var(--card-inset));
        padding-inline-end: 1rem;
    }

    .fi-ta-cards .fi-ta-row > td.fi-ta-card-aside {
        flex: 0 0 auto;
        justify-content: center;
        padding-inline: .75rem;
    }

    .fi-ta-cards .fi-ta-row > td.fi-ta-card-aside:last-of-type,
    .fi-ta-cards .fi-ta-row > td.fi-ta-card-aside:nth-last-child(1 of .fi-ta-card-aside) {
        margin-inline-end: calc(-1 * var(--card-inset));
    }

    .fi-ta-cards .fi-ta-row > td.fi-ta-card-aside > .fi-ta-col:empty,
    .fi-ta-cards .fi-ta-row > td.fi-ta-card-aside > a.fi-ta-col:not(:has(*)) {
        display: none;
    }

    .fi-ta-cards .fi-ta-row > td:nth-child(1 of [data-label]:not(.fi-ta-card-aside)) .fi-ta-text-item {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .fi-ta-cards .fi-ta-row > td:nth-child(1 of [data-label]:not(.fi-ta-card-aside)) .fi-ta-text-description {
        margin-top: .125rem;
        font-size: .75rem;
        letter-spacing: .03em;
        color: var(--card-muted);
    }

    /* ---- Body tiles ---- */
    .fi-ta-cards .fi-ta-row > td[data-label]:not(.fi-ta-card-aside, :nth-child(1 of [data-label]:not(.fi-ta-card-aside))) {
        order: 1;
        flex: 0 0 calc(50% - .25rem);
        padding: .55rem .75rem;
        border-radius: .625rem;
        background: var(--card-tile);
    }

    .fi-ta-cards .fi-ta-row > td.fi-ta-card-wide {
        flex-basis: 100% !important;
    }

    .fi-ta-cards .fi-ta-row > td[data-label]:not(.fi-ta-card-aside, :nth-child(1 of [data-label]:not(.fi-ta-card-aside)))::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .25rem;
        font-size: .6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--card-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fi-ta-cards .fi-ta-row > td[data-label=""]::before {
        display: none !important;
    }

    .fi-ta-cards .fi-ta-row > td[data-label] .fi-ta-text-item {
        font-weight: 600;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .fi-ta-cards .fi-ta-row > td[data-label] .fi-ta-text-description {
        font-size: .75rem;
        color: var(--card-muted);
    }

    .fi-ta-cards .fi-ta-row > td[data-label] .fi-badge {
        max-width: 100%;
        white-space: normal;
        text-align: start;
    }

    /* Optional details left empty: no tile */
    .fi-ta-cards .fi-ta-row > td[data-label]:not(.fi-ta-card-aside):has(> .fi-ta-col):not(:has(.fi-ta-text-item, .fi-ta-placeholder, .fi-badge, img, svg, input, button)) {
        display: none;
    }

    /* ---- Footer: record actions ---- */
    .fi-ta-cards .fi-ta-row > td:not([data-label], .fi-ta-selection-cell) {
        order: 2;
        flex: 0 0 100%;
        margin-top: .25rem;
    }

    .fi-ta-cards .fi-ta-row > td:not([data-label], .fi-ta-selection-cell) .fi-ta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        width: 100%;
    }

    .fi-ta-cards .fi-ta-row > td:not([data-label], .fi-ta-selection-cell) .fi-ta-actions > * {
        flex: 1 1 0;
    }

    .fi-ta-cards .fi-ta-row > td:not([data-label], .fi-ta-selection-cell) .fi-ta-actions :is(.fi-dropdown-trigger, .fi-link, .fi-btn, .fi-icon-btn) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        width: 100%;
        height: 2.5rem;
        border-radius: .625rem;
        background: var(--card-tile);
        box-shadow: none;
        font-size: .875rem;
        font-weight: 600;
    }

    .fi-ta-cards .fi-ta-row > td:not([data-label], .fi-ta-selection-cell) .fi-ta-actions .fi-dropdown-trigger > :is(.fi-btn, .fi-icon-btn) {
        background: transparent;
    }

    /* An icon-only button paired with its labelled twin (labeledFrom): keep the labelled one */
    .fi-ta-cards .fi-ta-row .fi-ta-actions .fi-icon-btn:has(+ .fi-btn) {
        display: none !important;
    }

    /* Guests: the send menu is the card's main action */
    .guests-table .fi-ta-row .fi-ta-actions .fi-dropdown-trigger {
        background: color-mix(in srgb, var(--primary-500) 12%, transparent) !important;
        color: var(--primary-600);
    }

    .dark .guests-table .fi-ta-row .fi-ta-actions .fi-dropdown-trigger {
        color: var(--primary-300);
    }

    .guests-table .fi-ta-row .fi-ta-actions .fi-btn.fi-ac-btn-group::after {
        content: var(--guests-send-label, '');
    }

    /* Toolbar above the cards: search takes the row, filter/column toggles beside it */
    .fi-ta-cards .fi-ta-header-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .fi-ta-cards .fi-ta-search-field {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Phones: tighter pages, forms and infolists
   ========================================================================== */
@media (max-width: 767px) {
    /* Page header: smaller title, actions in one scrollable-free row */
    .fi-header-heading {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    .fi-header .fi-ac {
        gap: .5rem;
    }

    .fi-page-main {
        row-gap: 1rem;
    }

    /* Sections: less padding, nested boxes don't stack their own padding twice */
    .fi-section-header {
        padding: .875rem 1rem;
    }

    .fi-section-content {
        padding: 1rem;
    }

    .fi-section .fi-section .fi-section-content,
    .fi-fieldset {
        padding: .75rem;
    }

    .fi-sc-tabs .fi-tabs {
        padding-inline: .5rem;
    }

    .fi-sc {
        row-gap: 1rem;
    }

    /* Infolists: label on the left, value on the right, so a section reads like a list */
    .fi-in-entry {
        display: grid;
        grid-template-columns: minmax(6.5rem, 40%) 1fr;
        align-items: baseline;
        column-gap: .75rem;
        padding-block: .5rem;
        border-bottom: 1px dashed rgb(15 23 42 / .08);
    }

    .dark .fi-in-entry {
        border-bottom-color: rgb(255 255 255 / .08);
    }

    .fi-in-entry .fi-in-entry-label-col,
    .fi-in-entry .fi-in-entry-label-ctn {
        margin: 0;
    }

    .fi-in-entry .fi-in-entry-label {
        font-size: .8125rem;
        font-weight: 500;
        color: rgb(100 116 139);
    }

    .fi-in-entry .fi-in-entry-content-col {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Long text and images need the whole width */
    .fi-in-entry:has(.fi-in-image, .fi-prose, .fi-in-text-list-limited, .fi-in-repeatable) {
        grid-template-columns: 1fr;
        row-gap: .375rem;
    }

    .fi-sc .fi-in-entry:last-child {
        border-bottom: 0;
    }

    /* Sticky Save / Cancel bar: full-width buttons, clear of the page edges */
    /* Save / Cancel stick to the bottom of the screen with plain CSS: the actions are the form's last flex item,
       so they can stick anywhere within the form. (Filament's own sticky mode toggles on scroll and flickers.) */
    .fi-sc-form > .fi-sc:has(> .fi-grid-col > .fi-sc-component > .fi-sc-actions) {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin-inline: -1rem;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        background: rgb(255 255 255 / .94);
        backdrop-filter: blur(8px);
        box-shadow: 0 -1px 0 rgb(15 23 42 / .08), 0 -8px 20px -12px rgb(0 0 0 / .25);
    }

    .dark .fi-sc-form > .fi-sc:has(> .fi-grid-col > .fi-sc-component > .fi-sc-actions) {
        background: rgb(24 24 27 / .94);
        box-shadow: 0 -1px 0 rgb(255 255 255 / .08);
    }

    .fi-sc-form > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-actions .fi-ac {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: .5rem;
    }

    .fi-sc-form > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-actions .fi-btn {
        width: 100%;
        white-space: nowrap;
    }

    /* Modals take the full width of the phone */
    .fi-modal-window {
        border-radius: 1rem 1rem 0 0;
    }

    /* Bigger touch targets for checkboxes and toggles */
    .fi-checkbox-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Stats widgets: two per row instead of one long column */
    .fi-wi-stats-overview .fi-sc {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem;
    }

    .fi-wi-stats-overview-stat {
        padding: .875rem;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
    }

    .fi-wi-stats-overview-stat-description {
        font-size: .75rem;
    }
}

/* Header search: on phones the results open as a full-width sheet under the top bar */
@media (max-width: 767px) {
    .fi-global-search-results-ctn {
        position: fixed !important;
        inset-inline: .75rem !important;
        top: 4.25rem !important;
        width: auto !important;
        max-height: calc(100dvh - 5.5rem);
        border-radius: 1rem;
    }

    .fi-global-search-field .fi-input {
        font-size: 1rem; /* 16px: iOS doesn't zoom into the field */
    }

    /* No keyboard shortcut on a phone */
    .fi-global-search-field .fi-input-wrp-suffix {
        display: none;
    }
}

.fi-global-search-result-details {
    display: flex;
    flex-wrap: wrap;
    column-gap: .75rem;
}

/* Top bar on phones: menu, search and avatar the same height with equal gaps, search filling the middle */
@media (max-width: 1023px) {
    .fi-topbar {
        gap: .75rem;
    }

    .fi-topbar .fi-topbar-open-sidebar-btn,
    .fi-topbar .fi-topbar-close-sidebar-btn {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
        flex: none;
    }

    .fi-topbar-end {
        flex: 1;
        gap: .75rem;
        margin: 0;
        min-width: 0;
    }

    .fi-topbar-end .fi-global-search-ctn,
    .fi-topbar-end .fi-global-search {
        flex: 1;
        min-width: 0;
        margin: 0;
    }

    .fi-topbar-end .fi-global-search-field .fi-input-wrp {
        height: 2.5rem;
        border-radius: .75rem;
    }

    .fi-topbar-end .fi-user-menu .fi-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }
}