/*
 * Geex Modern Admin Dashboard theme.
 *
 * Tokens lifted from the Figma file 8jXrL1MENrsUFOUPCcIGoB (node 1:2) — its
 * "Light Theme Color", "Shadow" and radius values. The palette itself is set on
 * the panel in AdminPanelProvider so Filament can generate its own shade ramps;
 * this file carries the shapes, surfaces and spacing that no panel option
 * covers.
 *
 * This file's own rules are scoped to `html:not(.dark)`, because the Figma file
 * only defines a light theme and Filament's dark styling is already right for
 * the panel chrome. The *tokens* below are not: the travel plugin's components
 * are hand-built and read them directly, so they carry a dark set too. Without
 * it a card built from `--geex-surface` renders white on a black page.
 *
 * The dark values are expressed in Filament's own generated ramps rather than
 * as fresh hexes, so a hand-built card sits at exactly the same grey as the
 * sections around it and follows the panel palette if it is ever changed.
 */
.fi-body {
    --geex-primary: #ab54db;
    --geex-primary-soft: rgba(171, 84, 219, 0.15);

    /*
     * What goes on top of a primary fill. It is not always white: the dark
     * theme's primary is a 400-weight purple, light enough that white text on
     * it fails to read, so the foreground flips with the fill.
     */
    --geex-on-primary: #fff;

    --geex-text: #464255;
    --geex-text-muted: #a3a3a3;
    --geex-text-faint: #b9bbbd;

    --geex-canvas: #f3f2f7;
    --geex-surface: #fdfdfd;
    --geex-line: #eceaf3;
    --geex-quaternary: #f1e6b9;

    /* Status tints, for notices and badges outside Filament's own components. */
    --geex-danger: var(--danger-600, #dc2626);
    --geex-success-text: var(--success-600, #15803d);
    --geex-success-soft: color-mix(in oklab, var(--success-500, #16a34a) 12%, transparent);
    --geex-warning-text: #92400e;
    --geex-warning-soft: color-mix(in oklab, var(--warning-500, #f59e0b) 22%, transparent);
    --geex-info-text: var(--info-600, #1d4ed8);
    --geex-info-soft: color-mix(in oklab, var(--info-500, #3b82f6) 14%, transparent);

    --geex-radius-card: 24px;
    --geex-radius-panel: 33px;
    --geex-radius-control: 8px;
    --geex-radius-chip: 12px;
    --geex-radius-pill: 60px;

    --geex-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.04);
    --geex-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06);

    /*
     * Type scale. Filament's body text is `text-sm` — 0.875rem, 14px — which
     * this panel wants at 0.75rem (12px), so everything is multiplied by
     * 0.75 / 0.875. The ratio is unitless on purpose: Firefox still rejects
     * `calc(0.75rem / 0.875rem)` (length ÷ length), which dropped the whole
     * scale and left icons at 24px. The ramp keeps its proportions, and the
     * travel plugin's hand-built components read the same multiplier, so the
     * media library and the itinerary boards shrink with the forms instead of
     * standing a size apart.
     *
     * The tokens below are Tailwind's own. Re-declaring them here is what makes
     * every `text-sm` in Filament follow, without a rule per component.
     */
    --geex-type-scale: calc(0.75 / 0.875);

    --text-xs: calc(0.75rem * var(--geex-type-scale));
    --text-sm: calc(0.875rem * var(--geex-type-scale));
    --text-base: calc(1rem * var(--geex-type-scale));
    --text-lg: calc(1.125rem * var(--geex-type-scale));
    --text-xl: calc(1.25rem * var(--geex-type-scale));
    --text-2xl: calc(1.5rem * var(--geex-type-scale));
    --text-3xl: calc(1.875rem * var(--geex-type-scale));
}

/*
 * The menu is the exception: 0.875rem (14px), not the body's 0.75rem.
 *
 * Its labels are the only text on the page read at a glance rather than while
 * filling something in, and a nav column set at the body size stops being
 * scannable. Written as sizes rather than as a second scale because custom
 * properties are substituted where they are declared — a `--geex-type-scale`
 * set here would not reach the `--text-*` above, which resolved against
 * `.fi-body`'s value already.
 */
.fi-sidebar {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
}

/*
 * Controls follow the type down.
 *
 * Buttons, icon buttons, tabs and badges take every dimension they have from
 * Tailwind's `--spacing`: an icon is `calc(var(--spacing) * 5)` square, a
 * button's inline padding `calc(var(--spacing) * 3)`. The type came down from
 * 0.875rem to 0.75rem and these did not, which left 12px labels rattling
 * around inside controls built for 14px, and 20px icons beside them.
 *
 * Redeclaring the unit on the controls themselves is what keeps this contained:
 * it scales their padding, gaps and icons together and stops there, so the
 * page's own gutters and the grid between cards stay where the layout puts
 * them. Setting it on the body would have shrunk the whole panel.
 *
 * Standalone icons — a table's true/false glyph, a collapsed sidebar group —
 * use the same unit, because `size-6` is `calc(var(--spacing) * 6)` and would
 * otherwise stay at 24px next to 0.75rem type.
 */
.fi-btn,
.fi-icon-btn,
.fi-tabs-item,
.fi-badge,
.fi-icon {
    --spacing: calc(0.25rem * var(--geex-type-scale));
}

/*
 * The view tabs sit at the start of the table's toolbar — see
 * AppServiceProvider::registerTableViewTabs. The toolbar lays its children out
 * `space-between`, and the empty actions slot between the tabs and the search
 * box would take the middle third of the row; `auto` pushes everything after
 * the tabs to the far end instead.
 */
.fi-ta-header-toolbar .fi-ta-view-tabs {
    margin-inline-end: auto;
}

/*
 * Dark mode. Only the colours move — radii are the same shape in both themes.
 *
 * `--geex-canvas` stops meaning "the page" and starts meaning "inset within a
 * card": in light the page is grey and cards are white, in dark the card is
 * grey and its insets are lighter. That is the one token whose relationship
 * inverts, and every chip, hover fill and empty state depends on it.
 *
 * Shadows become a hairline ring. A drop shadow separates a white card from a
 * grey page; on a dark page it is invisible, and the edge has to be drawn.
 */
html.dark .fi-body {
    --geex-primary: var(--primary-400, #c084fc);
    --geex-primary-soft: color-mix(in oklab, var(--primary-400, #c084fc) 18%, transparent);
    --geex-on-primary: var(--gray-950, #09090b);

    --geex-text: #fff;
    --geex-text-muted: var(--gray-400, #a1a1aa);
    --geex-text-faint: var(--gray-500, #71717a);

    --geex-canvas: rgba(255, 255, 255, 0.05);
    --geex-surface: var(--gray-900, #18181b);
    --geex-line: rgba(255, 255, 255, 0.1);

    --geex-danger: var(--danger-400, #f87171);
    --geex-success-text: var(--success-400, #4ade80);
    --geex-success-soft: color-mix(in oklab, var(--success-400, #4ade80) 15%, transparent);
    --geex-warning-text: var(--warning-400, #fbbf24);
    --geex-warning-soft: color-mix(in oklab, var(--warning-400, #fbbf24) 15%, transparent);
    --geex-info-text: var(--info-400, #60a5fa);
    --geex-info-soft: color-mix(in oklab, var(--info-400, #60a5fa) 15%, transparent);

    --geex-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --geex-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------- surfaces */

html:not(.dark) .fi-body {
    background-color: var(--geex-canvas);
    color: var(--geex-text);
}

html:not(.dark) .fi-main-ctn {
    background-color: var(--geex-canvas);
}

/*
 * Cards float on the canvas: no hard border, a soft shadow and a large radius.
 * Filament draws a 1px ring on sections, which reads as a hairline box against
 * the near-white surface and fights the shadow.
 */
.fi-section,
.fi-sc-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--geex-radius-card);
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-sc-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat {
    background-color: var(--geex-surface);
    border-color: transparent;
    box-shadow: var(--geex-shadow-md);
    --tw-ring-color: transparent;
}

html:not(.dark) .fi-section-header,
html:not(.dark) .fi-section-content-ctn {
    border-color: var(--geex-line);
}

html:not(.dark) .fi-section-header-heading {
    color: var(--geex-text);
}

html:not(.dark) .fi-section-header-description {
    color: var(--geex-text-muted);
}

/* ---------------------------------------------------------------- sidebar */

html:not(.dark) .fi-sidebar {
    background-color: var(--geex-surface);
    border-color: transparent;
}

html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar-ctn {
    background-color: var(--geex-surface);
    border-color: transparent;
    box-shadow: none;
}

.fi-topbar-start .fi-logo {
    margin-inline-start: calc(var(--spacing) * 1);
}

/*
 * Filament separates sidebar groups by 7 spacing units, which leaves the menu
 * spread down the panel. The reference keeps the groups as one dense column.
 */
.fi-sidebar-nav-groups {
    row-gap: calc(var(--spacing) * 1);
}

/* Nav rows are pills, as in the reference — not full-bleed rectangles. */
.fi-sidebar-item-btn,
.fi-sidebar-group-btn {
    border-radius: var(--geex-radius-pill);
    padding-inline: 1.5rem;
}

/*
 * A group's own row spends its leading space on an icon, so its label starts
 * further in than a child item's. Pad the children to match, and the labels
 * read as one column.
 */
.fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline-start: 60px;
}

html:not(.dark) .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-group-label {
    color: var(--geex-text);
}

html:not(.dark) .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: var(--geex-primary-soft);
}

html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--geex-primary-soft);
}

html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active .fi-icon {
    color: var(--geex-primary);
}

/*
 * The dotted connector Filament draws down a grouped sidebar has no counterpart
 * in the reference, and it cuts through the pills.
 */
.fi-sidebar-item-grouped-border {
    display: none;
}

/*
 * Cluster pages list their resources in a second rail. Filament sizes that
 * rail at 18rem; the labels are a short column of names and do not need it.
 * Hug the pills, and drop the main-sidebar child indent — these items carry
 * their own icons.
 */
.fi-page-sub-navigation-sidebar-ctn {
    width: max-content;
    max-width: 18rem;
}

.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline: 0.75rem;
}

/*
 * Collapsed-sidebar flyout. Filament sizes every dropdown at 14rem, which
 * leaves a short Chinese label hugging the left and a third of the panel
 * empty on the right. Narrow the panel by a third, then indent the copy by
 * a fifth of that width so it sits in the remaining space rather than on
 * the edge. Scoped to the sidebar group so table and user-menu dropdowns
 * keep Filament's default.
 */
.fi-sidebar-group .fi-dropdown-panel {
    max-width: calc(14rem * 2 / 3) !important;
}

.fi-sidebar-group .fi-dropdown-panel .fi-dropdown-header,
.fi-sidebar-group .fi-dropdown-panel .fi-dropdown-list-item {
    padding-inline-start: 20%;
}

/* ---------------------------------------------------------- page headers */

/*
 * A page header spends three rows saying one thing: breadcrumbs, then the page
 * name at 30px, then whatever buttons the page has. On a screen whose work is a
 * dense table or a ten-tab form, that is a fifth of the first viewport gone
 * before anything is shown.
 *
 * So the heading is folded away and the buttons come up onto the breadcrumb
 * line. Only on pages that *have* breadcrumbs: those name the page one line
 * above, and a page without them (the dashboard, a standalone page) would be
 * left with nothing on screen saying where you are.
 *
 * Folded, not deleted. The heading is still the page's `<h1>` — it is what a
 * screen reader announces on arrival and what the browser's find-on-page
 * matches, and neither of those costs a pixel.
 */
/*
 * With the heading folded away, the header is one line of breadcrumbs and
 * buttons, but it keeps the 2rem of padding and row gap Filament sizes for a
 * three-row block. Halved again from 1.25rem so the infolist sits closer to
 * the chrome.
 */
.fi-page-header-main-ctn {
    padding-block: calc(var(--spacing) * 2.5);
    row-gap: calc(var(--spacing) * 2.5);
}

/*
 * Filament pads `.fi-main` at `px-4 md:px-6 lg:px-8`. Halved so the page
 * body sits closer to the sidebar and the topbar.
 */
.fi-main {
    padding-inline: 0.5rem;
}

@media (min-width: 768px) {
    .fi-main {
        padding-inline: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .fi-main {
        padding-inline: 1rem;
    }
}

.fi-header-has-breadcrumbs {
    align-items: center;
}

.fi-header-has-breadcrumbs .fi-header-heading {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Both halves of the row carried spacing that only made sense under a title. */
.fi-header-has-breadcrumbs .fi-breadcrumbs {
    margin-block-end: 0;
}

.fi-header-has-breadcrumbs .fi-header-actions-ctn {
    flex-wrap: wrap;
    margin-block-start: 0;
    row-gap: 0.5rem;
}

/*
 * A heading with an icon tile beside it.
 *
 * The tile is rendered from PAGE_HEADER_HEADING_BEFORE — see
 * AppServiceProvider::registerPageHeadingIcons — which lands it inside the
 * header's text column, as a sibling of the `<h1>` and the subheading. Turning
 * that column into a two-column grid and giving the tile both rows is what puts
 * it against the title block as a whole rather than against its first line.
 *
 * `:has()` keeps this to the pages that carry a tile. Every other page has
 * nothing to match and keeps Filament's stacked header.
 */
.fi-header:has(> div > .fi-header-icon) > div {
    align-items: center;
    column-gap: 0.875rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.fi-header-icon {
    align-items: center;
    background-color: var(--geex-primary);
    border-radius: var(--geex-radius-chip);
    color: var(--geex-on-primary);
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.fi-header-icon .fi-icon {
    height: 1.375rem;
    width: 1.375rem;
}

/* ------------------------------------------------------------- typography */

.fi-header-heading {
    font-weight: 600;
    letter-spacing: 0;
}

html:not(.dark) .fi-header-heading {
    color: var(--geex-text);
}

html:not(.dark) .fi-header-subheading,
html:not(.dark) .fi-breadcrumbs-item-label {
    color: var(--geex-text-muted);
}

/* ---------------------------------------------------------------- controls */

/*
 * Inputs are 36px tall. 18px here read as a pill and crowded the text; 8px is
 * the same restrained corner the product form already uses.
 */
.fi-input-wrp,
.fi-fo-file-upload-dropzone {
    border-radius: var(--geex-radius-control);
}

html:not(.dark) .fi-input-wrp {
    background-color: var(--geex-surface);
    --tw-ring-color: var(--geex-line);
}

html:not(.dark) .fi-input-wrp:focus-within {
    --tw-ring-color: var(--geex-primary);
}

html:not(.dark) .fi-input,
html:not(.dark) .fi-select-input {
    color: var(--geex-text);
}

html:not(.dark) .fi-input::placeholder,
html:not(.dark) .fi-select-input::placeholder {
    color: var(--geex-text-faint);
}

html:not(.dark) .fi-fo-field-label-content {
    color: var(--geex-text);
}

html:not(.dark) .fi-fo-field-wrp-hint,
html:not(.dark) .fi-sc-text {
    color: var(--geex-text-muted);
}

.fi-checkbox-input,
.fi-fo-toggle-buttons .fi-btn {
    border-radius: 5px;
}

/* --------------------------------------------------- text on filled colour */

/*
 * Filament derives each palette's "on" shade from its 600. The Geex purple is
 * light enough (oklch L .76) that the derived shade comes back a dark tint, so
 * a label on a filled button or badge sits at almost no contrast. Knock it out
 * to white, which is what the reference does on every filled surface.
 */
.fi-text-color-0,
.fi-text-color-0:hover {
    color: #fff;
}

/*
 * Filament reads the Geex purple as a *light* colour, so it pairs a pale 400
 * background with near-black text instead of filling the button. Restore the
 * reference's treatment: solid brand purple, label knocked out to white.
 */
:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-400, .fi-bg-color-300) {
    background-color: var(--geex-primary);
}

:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-400, .fi-bg-color-300),
:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-400, .fi-bg-color-300):hover,
:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-400, .fi-bg-color-300) .fi-icon {
    color: #fff;
}

/* ------------------------------------------------ toggle button selection */

/*
 * The rule above paints every option in a toggle group purple, chosen or not.
 * Filament gives all of a group's buttons the same colour classes and says
 * which one is picked through `input:checked` alone — so once every button is
 * filled, the group stops answering the only question it is asked.
 *
 * The unpicked ones fall back to a tint of the same purple; the picked one
 * keeps the solid fill. Both are written against the toggle group's own
 * markup, which is more specific than the blanket rule they are undoing.
 */
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary:hover {
    background-color: var(--geex-primary-soft);
    color: var(--geex-primary);
}

/*
 * An outline only where there is nothing else holding the option in: a grouped
 * control draws its own frame, and the 1px separators between its segments are
 * box-shadows — overwriting them here would run the segments together.
 */
.fi-fo-toggle-buttons:not(.fi-btn-group) .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--geex-primary) 24%, transparent);
}

/* Hover reads as "you could pick this", not as picked. */
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary:hover {
    background-color: color-mix(in oklab, var(--geex-primary) 26%, transparent);
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary .fi-icon {
    color: inherit;
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary:hover {
    background-color: var(--geex-primary);
    color: #fff;
}

.fi-fo-toggle-buttons:not(.fi-btn-group) .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary {
    box-shadow: none;
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary .fi-icon {
    color: #fff;
}

/*
 * 「下单时可选」: a dashed chip in the same purple as the tab's "$15 / 团"
 * badge. Geex's blanket fill and Filament's `var(--bg)` both have to be
 * undone, and `:has()` is what finds the pair inside the btn-ctn.
 */
.travel-guide-supply .fi-fo-toggle-buttons-btn-ctn:has(> input[value="optional"]:checked) > label.fi-btn.fi-color-primary,
.travel-guide-supply .fi-fo-toggle-buttons-btn-ctn:has(> input[value="optional"]:checked) > label.fi-btn.fi-color-primary:hover {
    background-color: transparent;
    border: 1px dashed var(--geex-primary);
    box-shadow: none;
    color: var(--geex-primary);
    --bg: transparent;
    --hover-bg: transparent;
    --text: var(--geex-primary);
    --hover-text: var(--geex-primary);
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
}

/* A disabled group should still show which option it is stuck on. */
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary.fi-disabled {
    opacity: 0.55;
}

/* ----------------------------------------------------------------- buttons */

.fi-btn {
    border-radius: var(--geex-radius-control);
    font-weight: 500;
    letter-spacing: 0.4px;
}

.fi-icon-btn {
    border-radius: var(--geex-radius-control);
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    border-radius: var(--geex-radius-chip);
}

/* ------------------------------------------------------------------ tables */

html:not(.dark) .fi-ta-header-cell {
    background-color: transparent;
    color: var(--geex-text-muted);
    font-weight: 500;
}

html:not(.dark) .fi-ta-table tbody tr {
    border-color: var(--geex-line);
}

html:not(.dark) .fi-ta-text-item-label,
html:not(.dark) .fi-ta-record-checkbox + * {
    color: var(--geex-text);
}

/* ------------------------------------------------------ contact identity */

/*
 * The contacts table's first cell — see
 * resources/views/filament/tables/columns/partner-identity.blade.php. Avatar,
 * name and reference are one identity under one heading, so they are laid out
 * here rather than left to three columns' worth of table cells.
 */
.fi-ta-partner-identity {
    align-items: center;
    display: flex;
    gap: 0.625rem;
}

.fi-ta-partner-avatar {
    border-radius: var(--geex-radius-chip);
    flex: none;
    height: 2rem;
    object-fit: cover;
    width: 2rem;
}

/* No photo: the first letter of the name on the primary tint. */
.fi-ta-partner-avatar-initial {
    align-items: center;
    background-color: var(--geex-primary-soft);
    color: var(--geex-primary);
    display: flex;
    font-weight: 500;
    justify-content: center;
    line-height: 1;
}

.fi-ta-partner-identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* The name is the row's anchor, so it is the one thing in it set in bold. */
.fi-ta-partner-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not(.dark) .fi-ta-partner-name {
    color: var(--geex-text);
}

.fi-ta-partner-reference {
    color: var(--geex-text-muted);
    font-size: var(--text-xs);
}

/* ------------------------------------------------------- record grid cards */

/*
 * Contact cards (Figma node 117:67): a 30px-padded panel with the avatar and
 * an overflow button on the top row, then name, role, and icon-led detail
 * rows. Filament stacks a grid record's content and drops its actions at the
 * foot, so the actions are lifted into the card's corner.
 */
.fi-ta-content-grid .fi-ta-record {
    border-radius: var(--geex-radius-card);
    padding: 30px;
    position: relative;
}

html:not(.dark) .fi-ta-content-grid .fi-ta-record {
    background-color: var(--geex-surface);
    box-shadow: var(--geex-shadow-md);
    --tw-ring-color: transparent;
}

/*
 * Filament pads a record's content wrapper for the table layout it was written
 * for. Inside a card that padding stacks on the card's own 30px and opens a
 * band of dead space, so it is cleared and the spacing left to the card.
 */
.fi-ta-content-grid .fi-ta-record-content-ctn,
.fi-ta-content-grid .fi-ta-record-content {
    padding: 0;
    gap: 0;
}

.fi-ta-content-grid .fi-ta-actions {
    position: absolute;
    inset-block-start: 30px;
    inset-inline-end: 30px;
    margin: 0;
}

/* The avatar is a rounded block, not a full-bleed banner. */
.fi-ta-content-grid .fi-ta-image,
.fi-ta-content-grid .fi-ta-image img {
    border-radius: var(--geex-radius-card);
    object-fit: cover;
}

.fi-ta-content-grid .fi-ta-text-item {
    gap: 20px;
}

html:not(.dark) .fi-ta-content-grid .fi-ta-text-item {
    color: var(--geex-text);
}

.fi-ta-content-grid .fi-ta-text-item .fi-icon {
    width: calc(1.5rem * var(--geex-type-scale));
    height: calc(1.5rem * var(--geex-type-scale));
}

/* ------------------------------------------------------------------ chrome */

.fi-badge {
    border-radius: 5px;
    font-weight: 500;
}

.fi-dropdown-panel,
.fi-modal-window {
    border-radius: var(--geex-radius-card);
}

/* -------------------------------------------------------------- tab strips */

/*
 * A tab strip that is not `fi-contained` — a list page's status tabs, a record
 * page's sub-navigation — is drawn by Filament as a floating card and centred
 * with `mx-auto`. Centred is why it never sits with anything: on a list page it
 * floats over the table it belongs to, and in a page header it drifts away from
 * the buttons beside it. These strips start where the content under them does.
 *
 * The rule is deliberately the same selector Filament uses. This file is not in
 * a cascade layer and Filament's stylesheet is, so an unlayered rule of equal
 * specificity wins wherever the two disagree.
 */
.fi-tabs:not(.fi-contained) {
    border-radius: var(--geex-radius-control);
    margin-inline: 0;
}

.fi-tabs-item {
    border-radius: var(--geex-radius-chip);
}

/*
 * The selected tab is filled, not tinted. A 15%-alpha purple on a white strip
 * on a near-white page is three shades of almost-nothing; which tab you are on
 * is the one thing the strip exists to say, so it is said in full colour.
 */
.fi-tabs-item.fi-active {
    background-color: var(--geex-primary);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: var(--geex-on-primary);
}

/* A count that sat on a pale tint now sits on the fill, and has to be cut out of it. */
.fi-tabs-item.fi-active .fi-badge {
    background-color: color-mix(in oklab, var(--geex-on-primary) 22%, transparent);
    color: var(--geex-on-primary);
    --tw-ring-color: transparent;
}

html:not(.dark) .fi-tabs:not(.fi-contained) {
    background-color: var(--geex-surface);
    box-shadow: var(--geex-shadow-md);
    --tw-ring-color: transparent;
}