.fi-btn.fi-color-primary {
    background-color: #0071bc !important;
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:hover {
    background-color: #ff3333 !important;
    color: #ffffff !important;
}
@media (max-width: 640px) {
    .fi-topbar {
        gap: 0.5rem;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn {
        display: inline-flex;
        flex: 0 0 3.25rem;
        align-items: center;
        justify-content: center;
        width: 3.25rem;
        height: 3.25rem;
        margin: 0;
        padding: 0;
    }

    .fi-topbar-open-sidebar-btn svg,
    .fi-topbar-close-sidebar-btn svg {
        width: 2rem;
        height: 2rem;
    }

        .fi-topbar-end {
        flex: 1 1 auto;
        min-width: 0;
    }

        .fi-topbar .fi-topbar-end > .fi-global-search-ctn {
        flex: 0 0 calc(100% - 7rem) !important;
        width: calc(100% - 7rem) !important;
        max-width: calc(100% - 7rem) !important;
        min-width: 0 !important;
        margin-right: 0.5rem !important;
    }

    .fi-topbar-database-notifications-btn {
        margin-right: 0.75rem;
    }
}

/*
 * Offer Messages thread. Styled to match the site's form
 * language (bordered cards, generous padding, rounded
 * inputs) rather than a chat-bubble UI. Colors reuse
 * Filament's own --color-gray-* theme tokens where a
 * matching step exists.
 */

.offer-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.offer-thread-messages {
    display: flex;
    flex-direction: column;
    max-height: 34rem;
    padding-right: 0.25rem;
    overflow-y: auto;
}

.offer-thread-message {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-gray-300);
    border-radius: 0.75rem;
    background: #ffffff;
    margin-bottom: 0.75rem;
}

.offer-thread-message:last-child {
    margin-bottom: 0;
}

.offer-thread-message.is-buyer {
    border-left-color: var(--info-600);
}

.offer-thread-message.is-seller {
    border-left-color: var(--success-600);
}

.offer-thread-time {
    color: var(--color-gray-500);
    font-size: 0.78rem;
}

.offer-thread-message-body {
    flex: 1 1 auto;
    min-width: 12rem;
    margin: 0;
    color: var(--color-gray-700);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-line;
    word-break: break-word;
}

.offer-thread-composer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
}

.offer-thread-textarea {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 8rem !important;
    resize: vertical !important;
    border: 2px solid var(--color-gray-300) !important;
    border-radius: 0.6rem !important;
    background: #ffffff !important;
    color: var(--color-gray-950) !important;
    outline: none !important;
}

.offer-thread-textarea:focus {
    border-color: #0071bc !important;
}

.offer-thread-composer-actions {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
}

.offer-thread-send {
    flex-shrink: 0;
}

.offer-thread-error {
    margin: 0;
    color: #ef4444;
    font-size: 0.82rem;
}

/*
 * Admin Analytics page (Fathom dashboard). Plain <table> markup styled
 * directly here rather than borrowing Filament's table-builder classes,
 * since Filament v5's own tables are a CSS-grid layout (not <table>
 * elements) and this app has no Tailwind build pass over its own Blade
 * views — only Filament's pre-purged component CSS ships to the browser,
 * so ad-hoc utility classes (px-3, text-sm, grid-cols-4, ...) render inert.
 */

.fi-analytics-table-scroll {
    overflow-x: auto;
}

.fi-analytics-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.fi-analytics-table th,
.fi-analytics-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    text-align: start;
}

.fi-analytics-table th {
    font-weight: 600;
    color: var(--color-gray-500);
    border-bottom: 1px solid var(--color-gray-200);
    white-space: nowrap;
}

.fi-analytics-table td {
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
}

.fi-analytics-table tbody tr:last-child td {
    border-bottom: none;
}

.fi-analytics-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.fi-analytics-scope-note {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--color-gray-500);
}

/* Domain Listings table: inline Price editor's in-field checkmark
   (InlineSaveTextInputColumn). Hidden in the field's normal display
   state, revealed only while a descendant of the input's wrapper has
   focus — pure CSS, not Alpine state, so it can't affect the input's
   own value hydration. */
.fi-ta-inline-save-btn {
    display: none;
}

.fi-ta-text-input:focus-within .fi-ta-inline-save-btn {
    display: inline-flex;
}

/* Domain Listings table: keep the Category, Sale Type and Price
   columns compact. Category and Sale Type now render as a single
   fi-icon-btn trigger (see inline-option-picker.blade.php) rather
   than a full-width control, so their *cell* only needs to fit that
   icon — but the *column* as a whole still has to fit the header
   label ("Category" / "Sale Type") plus its sort caret, which need
   noticeably more room than the icon does. A cap sized only for the
   icon (a prior version of this rule used 5rem) squeezes the header's
   own text+caret flex layout narrower than it needs, which is what
   made the header look cramped/overlapping — table-layout:auto sizes
   the whole column off the *widest* cell in it regardless, so the
   header was always going to set the real minimum here. 8rem fits
   "Sale Type" (the longer of the two labels) plus its caret with
   comfortable padding to spare. */
.fi-ta-cell-category-id,
.fi-ta-header-cell-category-id,
.fi-ta-cell-sale-type,
.fi-ta-header-cell-sale-type {
    width: 8rem;
    max-width: 8rem;
}

/* Price only sets a preferred `width`, not a `max-width`: unlike
   Category/Sale Type's fixed-size icon, Price's rendered content
   (the "$" prefix box + input, itself padded to leave room for the
   in-field checkmark button) scales with how many digits the actual
   value has. A hard max-width (a prior version of this rule capped
   it at 7rem) can be narrower than that combined content actually
   needs for a realistic 6-figure price — and because table cells
   don't clip overflowing children, the excess doesn't get cut off,
   it visually spills rightward into the Status cell that immediately
   follows Price in column order, with Status's own opaque cell
   background then painting over (in front of) that overflow — which
   is what actually produced the "Status badge behind/overlapping
   Price" bug. A `width` alone still keeps the *typical* short price
   compact, while still letting table-layout:auto grow the column for
   a genuinely wide value instead of silently overlapping the next
   column. */
.fi-ta-cell-price,
.fi-ta-header-cell-price {
    width: 9rem;
}