/* =====================================================================
 * Metronic v9.5 → Filament 3 bridge (Cyticx Ads re-theme, dark-only)
 * Restyles Filament chrome (.fi-*) to the Metronic demo1 design language
 * using the tokens in tokens.css. Loads AFTER cyticx-theme.css and
 * overrides its legacy look; cyticx-theme shrinks by attrition.
 * ===================================================================== */

/* ---------------------------------------------------------------
 * Base: Inter everywhere, Metronic background
 * --------------------------------------------------------------- */
.fi-body,
.fi-body * :not(i):not([class*="ki-"]) { font-feature-settings: normal; }
.fi-body { font-family: var(--font-sans) !important; background: var(--background) !important; color: var(--foreground); }

.dark body,
.dark .fi-body,
.dark .fi-layout,
.dark .fi-main,
.dark .fi-page,
.dark .fi-main-ctn { background: var(--background) !important; }

/* ---------------------------------------------------------------
 * Sidebar - demo1 dark: flat background, 1px border, quiet items,
 * active = accent pill + primary icon (no lime, no left border)
 * --------------------------------------------------------------- */
.dark .fi-sidebar { background: var(--background) !important; border-right: 1px solid var(--border) !important; }
.fi-sidebar { width: 16.25rem !important; }

.fi-sidebar-header { background: var(--background) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; }
.fi-sidebar-header img { filter: none !important; height: 2.1rem !important; }

.fi-sidebar-item-button {
  border-radius: var(--radius-md) !important;
  color: var(--muted-foreground);
  font-weight: var(--font-weight-normal);
}
.dark .fi-sidebar-item-button:hover { background: var(--accent) !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: var(--foreground) !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-button {
  background: var(--accent) !important;
  border-left: 0 !important;
  padding-left: 0.4rem !important;
}
.fi-sidebar-item-active .fi-sidebar-item-label { color: var(--foreground) !important; font-weight: var(--font-weight-medium); }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: var(--primary) !important; }
.fi-sidebar-item-label { font-size: var(--text-2sm) !important; }
.fi-sidebar-item-icon { color: var(--muted-foreground); }

.fi-sidebar-group-label {
  color: var(--muted-foreground) !important;
  font-size: var(--text-2xs) !important;
  font-weight: var(--font-weight-semibold) !important;
}
.fi-sidebar-group-button:hover { background: var(--accent) !important; }
.fi-sidebar-group-collapse-button:hover { color: var(--primary) !important; }

/* ---------------------------------------------------------------
 * Page header
 * --------------------------------------------------------------- */
.fi-header-heading {
  color: var(--foreground) !important;
  font-size: var(--text-xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-tight);
}
.fi-header-subheading { color: var(--muted-foreground) !important; font-size: var(--text-sm) !important; }
.fi-breadcrumbs-item-label { color: var(--muted-foreground) !important; font-size: var(--text-xs) !important; }

/* ---------------------------------------------------------------
 * Sections / cards - Metronic kt-card: card bg, border, radius+4
 * --------------------------------------------------------------- */
.dark .fi-section,
.dark .fi-wi-widget > .fi-section {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  box-shadow: none !important;
}
.dark .fi-section-header { border-bottom-color: var(--border) !important; }
.fi-section-header-heading { color: var(--foreground) !important; font-size: var(--text-base) !important; font-weight: var(--font-weight-semibold) !important; }
.fi-section-header-description { color: var(--muted-foreground) !important; }

/* Native resource regions use the same shell as kt-card. Keep the table's
   content edge-to-edge inside this outer card, as kt-card-table does. */
html body .fi-main .fi-ta,
html body .fi-main .fi-section,
html body .fi-main .fi-fo-field-wrp:not(.fi-ta .fi-fo-field-wrp):not(.fi-section .fi-fo-field-wrp):not(.fi-wi .fi-fo-field-wrp):not(.fi-form .fi-fo-field-wrp) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: calc(var(--radius) + 4px) !important;
  color: var(--card-foreground) !important;
  border: 1px solid var(--border) !important;
  background-color: var(--card) !important;
  --tw-shadow-color: rgba(0,0,0,0.05);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

html body .fi-main .fi-fo-field-wrp:not(.fi-ta .fi-fo-field-wrp):not(.fi-section .fi-fo-field-wrp):not(.fi-wi .fi-fo-field-wrp):not(.fi-form .fi-fo-field-wrp) {
  padding: calc(var(--spacing) * 5);
}

html body .fi-main .fi-ta > .fi-ta-ctn {
  background: transparent !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
 * Buttons - Metronic kt-btn (h-2.25rem, 13px medium, radius 8px)
 * --------------------------------------------------------------- */
.fi-btn {
  border-radius: var(--radius) !important;
  font-size: var(--text-2sm) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: color .15s var(--ease-in-out), background-color .15s var(--ease-in-out), box-shadow .15s var(--ease-in-out);
}
.dark .fi-btn-color-primary:not(.fi-btn-outlined):not(.fi-link) {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid var(--primary) !important;
}
.dark .fi-btn-color-primary:not(.fi-btn-outlined):not(.fi-link):hover { background: var(--color-blue-700) !important; border-color: var(--color-blue-700) !important; }
.dark .fi-btn-color-gray:not(.fi-link) {
  background: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.dark .fi-btn-color-gray:not(.fi-link):hover { background: var(--accent) !important; }
.dark .fi-btn-color-danger:not(.fi-btn-outlined):not(.fi-link) { background: var(--destructive) !important; color: var(--destructive-foreground) !important; }
.fi-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring) !important; }

/* ---------------------------------------------------------------
 * Inputs / selects - Metronic kt-input
 * --------------------------------------------------------------- */
.dark .fi-input-wrp {
  background: var(--background) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}
.dark .fi-input-wrp:focus-within {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent) !important;
}
.dark .fi-input,
.dark .fi-select-input { color: var(--foreground) !important; font-size: var(--text-sm) !important; }
.dark .fi-input::placeholder { color: var(--muted-foreground) !important; }
.fi-fo-field-wrp-label .fi-fo-field-wrp-label-text,
.dark .fi-fo-field-wrp-label { color: var(--foreground) !important; font-size: var(--text-sm) !important; font-weight: var(--font-weight-medium) !important; }
.fi-fo-field-wrp-hint, .fi-fo-field-wrp-helper-text { color: var(--muted-foreground) !important; font-size: var(--text-xs) !important; }

/* Toggles / checkboxes */
.dark .fi-checkbox-input, .dark .fi-radio-input { border-color: var(--input) !important; background: var(--background) !important; }
.dark .fi-checkbox-input:checked, .dark .fi-radio-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.dark .fi-toggle button[aria-checked="true"] { background-color: var(--primary) !important; }

/* ---------------------------------------------------------------
 * Tables (.fi-ta) - Metronic kt-table: quiet 13px header, row borders,
 * muted hover, compact paddings
 * --------------------------------------------------------------- */
.dark .fi-ta-ctn {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  box-shadow: none !important;
}
.dark .fi-ta-header-ctn { border-bottom: 1px solid var(--border) !important; }
.dark .fi-ta-table thead { background: transparent !important; }
.dark .fi-ta-header-cell {
  color: var(--muted-foreground) !important;
  font-size: var(--text-2sm) !important;
  font-weight: var(--font-weight-normal) !important;
}
.dark .fi-ta-header-cell-sort-icon { color: var(--muted-foreground) !important; }
.dark .fi-ta-row { border-color: var(--border) !important; }
/* Zebra striping + depth for Filament resource tables (app-wide). */
/* Zebra bump 2026-08-18: measured 2026-08-17 (design-polish sweep,
   CYT-639) at ~1%/4.5% white overlay - independently flagged by GPT-5.6
   as barely visible on the Clients, Dashboard, and Ads Dashboard tables.
   Roughly doubled; still subtle, no longer invisible. */
.dark .fi-ta-row:nth-child(odd)  { background: rgba(255,255,255,.02) !important; }
.dark .fi-ta-row:nth-child(even) { background: rgba(255,255,255,.075) !important; }
.dark .fi-ta-row:hover { background: rgba(66,153,225,.14) !important; }
.dark .fi-ta-table { border-color: var(--border) !important; }
.dark .fi-ta-text { color: var(--foreground); font-size: var(--text-sm) !important; }
.dark .fi-ta-text-item-label { font-size: var(--text-sm) !important; }
.dark .fi-ta-empty-state-heading { color: var(--foreground) !important; }
.dark .fi-ta-empty-state-description { color: var(--muted-foreground) !important; }

/* Search field + filters in table header */
.dark .fi-ta-search-field .fi-input-wrp { background: var(--background) !important; }

/* Pagination */
.dark .fi-pagination-item { color: var(--muted-foreground) !important; border-radius: var(--radius-md) !important; }
.dark .fi-pagination-item-active { background: var(--accent) !important; color: var(--foreground) !important; }
.dark .fi-pagination-overview, .dark .fi-pagination-records-per-page-select-label { color: var(--muted-foreground) !important; }

/* Row actions - Metronic ghost-button look instead of bare links */
.fi-ta-actions .fi-link {
  font-size: var(--text-2sm) !important;
  font-weight: var(--font-weight-medium) !important;
  border-radius: var(--radius-md);
  padding: 0.3rem 0.5rem;
  transition: background-color .12s var(--ease-in-out);
}
.dark .fi-ta-actions .fi-link:hover { background: var(--accent); text-decoration: none !important; }

/* ---------------------------------------------------------------
 * Badges - Metronic kt-badge (radius 6px, 12px medium)
 * 2026-08-05: ui-qa visible-text-floor-12px (viewport-independent) - was
 * var(--text-2xs) = 11px (sidebar "3"/"2170"/"15" counters etc). This is the
 * rule that actually wins over Filament's own vendor .text-xs (confirmed via
 * a live cascade trace) - fixed at the source rather than adding a second
 * override elsewhere. Badge height is a fixed 24px with 8px horizontal
 * padding either side, so +1px of text has no clipping/wrap risk (verified
 * live: text stayed single-line, height unchanged). The --text-2xs TOKEN
 * itself is left untouched for its other uses; only this declared use of it
 * changes to an explicit 12px.
 * --------------------------------------------------------------- */
.fi-badge {
  border-radius: var(--radius-md) !important;
  font-size: 12px !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------
 * Dropdowns - Metronic kt-menu popover
 * --------------------------------------------------------------- */
.dark .fi-dropdown-panel {
  background: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45) !important;
}
.dark .fi-dropdown-list-item { color: var(--foreground) !important; border-radius: var(--radius-md) !important; font-size: var(--text-2sm) !important; }
.dark .fi-dropdown-list-item:hover { background: var(--accent) !important; }
.dark .fi-dropdown-list-item-icon { color: var(--muted-foreground) !important; }
.dark .fi-dropdown-header { color: var(--muted-foreground) !important; border-bottom-color: var(--border) !important; }

/* ---------------------------------------------------------------
 * Modals - Metronic kt-modal
 * --------------------------------------------------------------- */
.dark .fi-modal-window {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55) !important;
}
.dark .fi-modal-header { border-bottom: 1px solid var(--border) !important; }
.dark .fi-modal-heading { color: var(--foreground) !important; font-size: var(--text-lg) !important; font-weight: var(--font-weight-semibold) !important; }
.dark .fi-modal-description { color: var(--muted-foreground) !important; }
.dark .fi-modal-footer { border-top-color: var(--border) !important; }
.dark .fi-modal-close-overlay { background: rgb(0 0 0 / 0.60) !important; backdrop-filter: blur(2px); }

/* ---------------------------------------------------------------
 * Notifications - Metronic toast
 * --------------------------------------------------------------- */
.dark .fi-no-notification {
  background: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45) !important;
}
.dark .fi-no-notification-title { color: var(--foreground) !important; font-weight: var(--font-weight-medium) !important; }
.dark .fi-no-notification-body { color: var(--muted-foreground) !important; }

/* ---------------------------------------------------------------
 * Tabs - Metronic kt-tabs-line (bottom-border style)
 * --------------------------------------------------------------- */
.dark .fi-tabs { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 0 !important; gap: 1rem !important; }
.dark .fi-tabs-item {
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--muted-foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  padding: 0.5rem 0.125rem !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
}
.dark .fi-tabs-item:hover { color: var(--foreground) !important; }
.dark .fi-tabs-item-active { color: var(--primary) !important; border-bottom-color: var(--primary) !important; }

/* ---------------------------------------------------------------
 * Login / simple pages - Metronic auth-classic dark
 * --------------------------------------------------------------- */
.dark .fi-simple-layout { background: var(--background) !important; }
.dark .fi-simple-main {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.40) !important;
}
.dark .fi-simple-header-heading { color: var(--foreground) !important; font-size: var(--text-2xl) !important; font-weight: var(--font-weight-semibold) !important; letter-spacing: var(--tracking-tight); }
.dark .fi-simple-header-subheading { color: var(--muted-foreground) !important; }

/* ---------------------------------------------------------------
 * Scrollbars - quiet Metronic scrollable
 * --------------------------------------------------------------- */
.fi-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.fi-body ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.fi-body ::-webkit-scrollbar-thumb:hover { background: var(--ring); }
.fi-body ::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------
 * KeenIcons sizing default (webfont <i> tags)
 * --------------------------------------------------------------- */
i[class*="ki-"] { font-size: 1.125rem; line-height: 1; }
.fi-sidebar-item-icon i[class*="ki-"], .fi-sidebar-group-icon i[class*="ki-"] { font-size: 1.05rem; }

/* ---------------------------------------------------------------
 * Table Repeater (awcodes/filament-table-repeater) - retint the
 * package's raw Tailwind gray scale to app tokens (kt-table look)
 * --------------------------------------------------------------- */
.table-repeater-container { background: var(--card) !important; }
.dark .table-repeater-container, .table-repeater-container { border-color: var(--border) !important; }
.table-repeater-header, .table-repeater-header-column {
  background: color-mix(in srgb, var(--muted-foreground) 8%, transparent) !important;
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-medium) !important;
}
.table-repeater-rows-wrapper, .table-repeater-row { border-color: var(--border) !important; }
.table-repeater-row:hover { background: color-mix(in srgb, var(--foreground) 3%, transparent); }
.table-repeater-empty-column { color: var(--muted-foreground) !important; }

/* ---------------------------------------------------------------
 * Full-page forms as cards (2026-07-26). Resource create/edit forms
 * floated bare fields on the page background - no surface, no
 * hierarchy, near-invisible inputs (the 'pale' look). Give the form
 * the same kt-card treatment as tables, cap its width, and separate
 * the action bar like a card footer. Modal forms keep their own
 * modal surface via the resets below.
 * --------------------------------------------------------------- */
html body .fi-main .fi-resource-create-record-page .fi-form,
html body .fi-main .fi-resource-edit-record-page .fi-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--card-foreground) !important;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--border) !important;
  background-color: var(--card) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  --tw-shadow-color: rgba(0,0,0,0.05);
  padding: 1.25rem;
  max-width: 64rem;
}
html body .fi-main .fi-modal-window .fi-form {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.fi-resource-create-record-page .fi-form-actions,
.fi-resource-edit-record-page .fi-form-actions {
  border-top: 1px solid var(--border);
  border-radius: 0 0 calc(var(--radius) + 3px) calc(var(--radius) + 3px);
  background: color-mix(in srgb, var(--muted) 46%, var(--card));
  margin: 1.25rem -1.25rem -1.25rem;
  padding: 1rem 1.25rem;
}
.dark .fi-modal-window .fi-form-actions {
  border-top: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inputs: raise the well off the page and make borders visible -
 * zinc-950-on-zinc-950 with a zinc-800 border read as invisible.
 * Applies everywhere (forms, table search, login). */
.dark .fi-input-wrp {
  background: var(--color-zinc-900) !important;
  border: 1px solid color-mix(in srgb, var(--color-zinc-600) 55%, transparent) !important;
}
.dark .fi-input-wrp:hover { border-color: color-mix(in srgb, var(--color-zinc-500) 65%, transparent) !important; }
.dark .fi-input-wrp:focus-within { border-color: var(--primary) !important; }

/* Checkboxes/radios get the same raised well */
.dark .fi-checkbox-input:not(:checked), .dark .fi-radio-input:not(:checked) {
  background: var(--color-zinc-900) !important;
  border-color: color-mix(in srgb, var(--color-zinc-600) 55%, transparent) !important;
}

/* Polish pass (2026-07-26): small-screen action bar + card padding.
 * At narrow widths the form-actions row (Create / Create & create
 * another / Cancel) wraps left-aligned at each button's intrinsic
 * width - full-width stacked buttons in the card footer read as more
 * intentional and are easier to tap. Also trim the card's horizontal
 * padding a touch so more of a 390px viewport goes to the fields. */
@media (max-width: 640px) {
  .fi-resource-create-record-page .fi-form-actions .fi-ac,
  .fi-resource-edit-record-page .fi-form-actions .fi-ac {
    flex-direction: column;
    align-items: stretch;
  }
  .fi-resource-create-record-page .fi-form-actions .fi-ac .fi-btn,
  .fi-resource-edit-record-page .fi-form-actions .fi-ac .fi-btn {
    width: 100%;
  }
  .dark .fi-resource-create-record-page .fi-form,
  .dark .fi-resource-edit-record-page .fi-form {
    padding: 1.5rem 1.25rem 1.25rem;
  }
}


/* ---------------------------------------------------------------------------
 * Stock-resource table layout - readability + density fix (2026-07-27)
 *
 * Stock Filament resources (Scheduled Jobs, Sites, SEO Runs, Report Runs, Ad
 * Spy Clients, etc) render 8-12 columns into a fixed-width container. Filament
 * lets the cells shrink, so on a resource with many columns the text wraps at
 * roughly one CHARACTER per line ("ne / ga / tiv / es") and rows blow out to
 * 240px tall - unreadable, and the single biggest source of the "basic Laravel
 * theme" / "too much padding" complaints.
 *
 * Fix, matching what the Style Book's own tables do: keep the table inside its
 * card, wrap long tokens, and use compact rows without clipping content.
 * ------------------------------------------------------------------------- */
.fi-ta-ctn { overflow-x: auto; }

/* Let the table be as wide as its content needs, then scroll, rather than
   compressing columns below a usable width. */
 .fi-ta-table { max-width: 100%; min-width: 0; table-layout: auto; width: 100%; }

 /* Keep headers intact and let ordinary cells use their specific role rules. */
.fi-ta-header-cell {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.fi-ta-cell {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Density: Style Book rows are compact, not airy. */
.fi-ta-cell > .fi-ta-col-wrp,
.fi-ta-cell .fi-ta-text {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
}
.fi-ta-header-cell { padding-top: .5rem !important; padding-bottom: .5rem !important; }


/* ---------------------------------------------------------------------------
 * Page rhythm - global density fix (2026-07-27)
 *
 * Filament renders every page body as
 *   <section class="flex flex-col gap-y-8 py-8">
 * i.e. 32px of gap between EVERY top-level block plus 32px page padding top
 * and bottom. Stacked with each block's own margin that produced ~48px of dead
 * vertical space between the KPI strip, the page title and the first card -
 * the airy "basic Laravel" feel and the direct cause of the "too much spaces
 * or padding" complaint. Style Book density is roughly half that.
 *
 * Applies panel-wide so every page (stock resources included) tightens at once.
 * ------------------------------------------------------------------------- */
.fi-page > section.flex.flex-col {
  row-gap: 1rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Filament page header (title/actions block) carries its own generous spacing. */
.fi-header { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Filament nests a SECOND spacer inside the page section:
   <div class="grid flex-1 auto-cols-fr gap-y-8"> - another 32px between every
   block. Overriding only the outer section left the gap intact, so catch every
   gap-y-8 inside the page (inner content grid included). */
.fi-page [class*="gap-y-8"] { row-gap: 1rem !important; }

/* Global select sizing - kt-input-sm ships 8px top+bottom padding inside a
   28px box, leaving 12px of content box for a ~17px line, so select text
   clipped at the baseline. Seen on the Accounts toolbar and again on the
   Traffic filter panel. Size to content everywhere rather than patching
   per-page. */
select.kt-input,
select.kt-input-sm {
  height: auto !important;
  line-height: 1.4 !important;
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
}

/* Filter panel density - Filament renders the above-table filter area as
   "grid px-4 py-4", giving 121px of chrome for a single checkbox, and
   constrains each filter to a narrow grid column so even a short label
   ("Latest run per domain only") wraps to two lines. Tighten the padding and
   let checkbox/toggle labels take their natural width. */
.fi-ta-filters-above-content-ctn {
  padding-top: .6rem !important;
  padding-bottom: .6rem !important;
}
.fi-ta-filters-above-content-ctn .fi-fo-field-wrp-label { white-space: nowrap; }
.fi-ta-filters-above-content-ctn .fi-fo-checkbox,
.fi-ta-filters-above-content-ctn .fi-fo-field-wrp { min-width: max-content; }

/* ---------------------------------------------------------------------------
 * sb-table outside the Style Book (2026-07-27)
 *
 * pages.css defines the real table look ONLY as ".sb-section .sb-table ..."
 * - and .sb-section exists exclusively on the Style Book demo page. So every
 * other page using <table class="kt-table sb-table"> got the class but NONE
 * of the styling: no row separator (rows visually touched), ~1px header
 * padding, wrong header weight/size/colour.
 *
 * Re-declare the same rules unscoped so a table looks identical wherever it
 * is used. Values copied verbatim from pages.css lines 207-211 - this is the
 * Style Book's own definition, not a new invention.
 * ------------------------------------------------------------------------- */
.sb-table thead th {
  font-size: var(--text-2sm);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
  text-align: left;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.sb-table tbody td {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--foreground);
}
.sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.sb-table tbody tr:hover td { background: rgba(255,255,255,.05); }

/* Alpine [x-cloak] - global declaration (2026-07-27).
   Alpine hides elements marked x-cloak only if the CSS rule exists; it ships
   no stylesheet of its own. There was NO [x-cloak] declaration anywhere in
   public/css, so every x-show element rendered visible for the moment between
   HTML paint and Alpine booting. On client-view that meant the masked webhook
   URL flashed the client's REAL API key on every page load. Declared globally
   so no page has to remember it. */
[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------------------
 * Bootstrap-style spacing utilities recovered (2026-07-27)
 *
 * mb-3 / mt-2 / gap-2 etc were defined ONLY in leadtrack-theme.css, and ONLY
 * scoped as ".lt-embed .mb-3". Two changes killed them at once: ModernPage
 * stopped loading that stylesheet, and the page rewrites dropped the .lt-embed
 * wrapper. Result: every card carrying mb-3 computed margin-bottom: 0, so all
 * the cards and tables sat flush against each other with no gap - the
 * "no spaces between the tables" complaint.
 *
 * Re-declared here unscoped so the existing markup works regardless of wrapper.
 * Values copied verbatim from leadtrack-theme.css.
 * ------------------------------------------------------------------------- */
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pt-1 { padding-top: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }


/* ---------------------------------------------------------------------------
 * sb-section table overflow guard (2026-07-27)
 *
 * `.sb-section` sets overflow:hidden so content cannot spill past its rounded
 * frosted edge. That also means a table wider than the section is CLIPPED
 * rather than scrolled - the right-hand columns become unreachable, with no
 * scrollbar to hint that anything is missing.
 *
 * Measured on /lead-tracking/calls right after the section wrapper landed:
 * table 1080px inside a 1032px content box, overflow-x:hidden - the whole
 * "View all" actions column was cut off.
 *
 * Give the element that actually holds the table its own horizontal scroll.
 * ------------------------------------------------------------------------- */
/* Specificity note: pages.css already ships
   `.sb-section .kt-card-table .kt-card-content { overflow: hidden }` (0,3,0) to
   clip the table to the card's rounded bottom corners. That shorthand sets BOTH
   axes, so it also killed horizontal scrolling. Match on the card element twice
   (0,4,0) to win, and re-assert the vertical clip the rounded corner needs. */
.sb-section .kt-card.kt-card-table > .kt-card-content,
.sb-section .kt-card.kt-card-border > .kt-card-content:has(> table),
.sb-section .kt-card.kt-card-border > .kt-card-content:has(> .kt-table),
.sb-section > table,
.sb-section .ltx-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Scrollbar styled to the frosted surface instead of the OS default, which
   renders as a bright grey slab against the dark panel. */
.sb-section .kt-card-content::-webkit-scrollbar { height: 8px; }
.sb-section .kt-card-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 8px;
}
.sb-section .kt-card-content::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
 * Filament resource tables - shared kt-data-grid bridge
 * ------------------------------------------------------------------------- */
.dark .fi-ta .fi-ta-table {
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
  width: 100% !important;
}
.dark .fi-ta .fi-ta-table thead,
.dark .fi-ta .fi-ta-table thead .fi-ta-header-cell {
  background: color-mix(in srgb, var(--muted) 82%, var(--card)) !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-header-cell {
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)) !important;
  color: var(--muted-foreground) !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-normal) !important;
  padding: .72rem .42rem !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-header-cell-sort-icon { color: var(--muted-foreground) !important; }
.dark .fi-ta .fi-ta-table .fi-ta-cell {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
  min-width: 0 !important;
  overflow-wrap: normal !important;
  padding: .42rem !important;
  text-align: left !important;
  word-break: normal !important;
  white-space: normal !important;
}
.dark .fi-ta .fi-ta-table tbody .fi-ta-row:nth-child(odd) > .fi-ta-cell {
  background-color: color-mix(in srgb, var(--muted) 38%, transparent) !important;
}

/* ===========================================================================
   2026-08-25 - SYSTEMIC: stop Filament table cells WRAPPING their content.

   Adir, on /listing-management/listings: "the dates are in three lines. The
   click on the side is hidden. The table design is different, it's not our
   theme design." Measured across all 130 admin routes at 1390 (his width):

       46 pages had cells wrapping to 3+ lines   (400 on /queue alone)
       51 pages had rows taller than the Style Book's dense bar (max 525px)
       30 pages painted cells OFF-SCREEN, hiding the row actions

   One cause under all three: the `.fi-ta-cell` rule above this block sets
   `white-space: normal !important`. A date column narrow enough gets
   "May 1, 2026" broken at both spaces into three lines, which then sets the
   row height, which then pushes the table taller and the action column
   further right until it leaves the viewport.

   The house standard is the opposite and always has been - every Style Book
   table (`_tables.blade.php`, `.ltx-trunc`, `.sb-dense-identity`) is
   nowrap + a max-width + ellipsis, so a long value TRUNCATES instead of
   growing its row. This applies that standard to the 39 stock-Filament pages
   so they match the 34 house-table pages.

   `max-width: 220px` is the same cap `.ltx-trunc` uses in the Lead Tracking
   tables - not a new number. Filament's own `->wrap()` opt-out is respected
   below so a column that genuinely needs prose can still ask for it.
   =========================================================================== */
.dark .fi-ta .fi-ta-table .fi-ta-cell {
  white-space: nowrap !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text-item-label,
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text-item {
  display: block !important;
  max-width: 220px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Filament sets .fi-ta-text-item-wrap when a column declares ->wrap(). That is
   a deliberate per-column choice, so it keeps wrapping - but still bounded, so
   it can never run a row to 525px again. */
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text-item-wrap,
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text-item-wrap .fi-ta-text-item-label {
  white-space: normal !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

/* 2026-08-18: every Filament-native resource table (Clients, GBP Accounts,
   Listing Management, FB Poster, Ad Spy, ...) was running a visibly
   different, INVERTED table design vs the Style Book's own reference table -
   found independently by two discovery-sweep tickets (CYT-641, CYT-644) and
   measured live before this fix:
     Filament tables: header oklch(21% ...) DARKER than both zebra rows,
       11px/400/UPPERCASE header, 16px body cells, 6.72px padding, 73-84px
       rows.
     Style Book reference: header oklch(0.274 ...) LIGHTER than its rows,
       13px/500/sentence-case header, 14px body cells, 12px/20px padding,
       ~54px rows.
   The 16px body font alone was "the root cause of the 66-108px rows on all
   eight pages" per CYT-644. Bringing Filament's native tables in line with
   the Style Book's own numbers, not inventing new ones. */
/* Selector deliberately matches the specificity of the pre-existing
   `thead .fi-ta-header-cell` background rule above (0,4,1, one class
   more than a plain `.fi-ta-header-cell` chain thanks to the `thead`
   type selector) - a same-specificity `.fi-ta-header-cell`-only version
   of this rule silently lost the background (only) to that rule while
   still winning font-size/weight/transform below, which do not collide
   with anything else. Being later in the file settles the tie. */
.dark .fi-ta .fi-ta-table thead,
.dark .fi-ta .fi-ta-table thead .fi-ta-header-cell {
  background: oklch(0.274 0.006 286.033) !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-header-cell {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-cell,
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text {
  font-size: 14px !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-cell {
  padding: .6rem .8rem !important;
}
.dark .fi-ta .fi-ta-table tbody .fi-ta-row:hover > .fi-ta-cell {
  background-color: color-mix(in srgb, var(--primary) 7%, var(--muted)) !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-header-cell + .fi-ta-header-cell,
.dark .fi-ta .fi-ta-table tbody .fi-ta-cell + .fi-ta-cell {
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-cell > .fi-ta-col-wrp,
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text {
  min-width: 0 !important;
  max-width: 100% !important;
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-cell .fi-ta-text > div {
  max-width: 100% !important;
  width: auto !important;
}
.dark .fi-ta .fi-ta-table tbody .fi-ta-row > .fi-ta-cell:first-child .fi-ta-text-item-label {
  color: var(--foreground) !important;
  font-weight: var(--font-weight-semibold) !important;
}
.dark .fi-ta .fi-ta-table tbody .fi-ta-row > .fi-ta-cell:first-child .fi-ta-text > p {
  color: var(--muted-foreground) !important;
  font-size: var(--text-xs) !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-actions-header-cell,
.dark .fi-ta .fi-ta-table .fi-ta-actions-cell {
  min-width: max-content !important;
  white-space: nowrap !important;
  width: 1% !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-actions-cell .fi-ta-actions {
  flex-wrap: nowrap !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

.dark .fi-ta .fi-ta-table .fi-ta-cell:has(.fi-badge) {
  min-width: max-content !important;
  white-space: nowrap !important;
  width: 1% !important;
}
.dark .fi-ta .fi-badge,
.dark .fi-ta .fi-ta-cell .fi-badge {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  max-width: max-content !important;
  min-width: max-content !important;
  overflow-wrap: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  white-space: nowrap !important;
  word-break: normal !important;
}
.dark .fi-ta .fi-ta-table .fi-ta-actions-cell { white-space: nowrap !important; }

/* Filament image columns keep their configured chip size and crop safely. */
.fi-ta .fi-ta-cell img {
  display: block;
  object-fit: cover !important;
  object-position: center !important;
}

/* 1. No clipping anywhere. Wrapping prevents spill; clipping only eats badges. */
.fi-ta .fi-ta-table .fi-ta-cell,
.fi-ta .fi-ta-table .fi-ta-col-wrp { overflow: visible; }

/* 2. Only NON-badge cells may break inside a word. This preserves badge columns'
      min-content width so table-layout:auto still gives them room. */
.fi-ta .fi-ta-table .fi-ta-cell:not(:has(.fi-badge)) .fi-ta-col-wrp {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 3. Badge cells shrink to fit their label and never wrap. */
.fi-ta .fi-ta-table .fi-ta-cell:has(.fi-badge) { width: 1%; white-space: nowrap; }
.fi-ta .fi-ta-table .fi-ta-cell .fi-badge { white-space: nowrap; }

/* 4. Give content cells room without spending that floor on selection or action
      cells. Identity columns get the larger floor so names and domains do not
      shred into mid-word ribbons. */
.fi-ta .fi-ta-table .fi-ta-cell:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 160px !important;
}
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-target-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-site.domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-client.name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 200px !important;
}
/* CYT-642 finding #4: overflow-wrap:anywhere (set globally for .fi-ta-cell,
   further up this file) breaks a long unbreakable domain/name string
   mid-character once it slightly exceeds its 200px floor -
   'carkeysfortlauderdale.com' became 'carkeysfortlauder' / 'dale.com'.
   Ellipsis-truncate this identity-column group instead, same pattern
   used everywhere else this session for a long single unbreakable token -
   these columns already carry a tooltip/link title with the full value. */
/* Traced the actual DOM: Filament's icon+text column nests the real text
   FOUR levels past `.fi-ta-text` - a `.fi-ta-text-item` inline-flex row
   sits inside a plain div carrying Tailwind's `max-w-max` (max-width:
   max-content = "always be exactly as wide as your content wants", the
   literal opposite of truncation), which wins over any white-space/
   overflow set on a shallower ancestor. Override the whole chain down to
   the text span itself. */
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-target-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-site.domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-client.name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item {
    min-width: 0;
    max-width: 100%;
}
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) div.max-w-max,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) div.max-w-max,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-target-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) div.max-w-max,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-site.domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) div.max-w-max,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-client.name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) div.max-w-max {
    min-width: 0;
    max-width: 100% !important;
    overflow: hidden;
}
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item-label,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item-label,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-target-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item-label,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-site.domain"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item-label,
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-client.name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) .fi-ta-text-item-label {
    display: block;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CYT-644 finding #3 (confirmed live 2026-08-18): the 160px floor above is
   right for real content, but FbpPostResource's media_type column is a
   blank-header, mostly-empty VIDEO-only flag badge (most posts are images) -
   the floor forced a 160px void for nearly every row with no header to
   explain it. Narrower exception for that one column; the resource's own
   ->extraHeaderAttributes width had no effect because THIS rule's !important
   always won regardless of what the column definition set. */
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-media-type"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 64px !important;
}

/* CYT-644 finding #19 (confirmed live 2026-08-18): same floor-overrides-
   column-setting issue as media_type above, on FbpPostResource's Image
   column - the resource explicitly sets ->width(48)->height(48) but this
   file's blanket 160px floor silently won anyway, so the 48px thumbnail sat
   inside a 160px cell. On a 390px phone that one column alone (plus the
   64px media_type badge next to it) ate enough width that Company never
   even peeked into the first screen without scrolling - part of why that
   page showed "only a checkbox and a thumbnail, no usable data" on mobile. */
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-image-paths"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 64px !important;
}

/* 2026-08-17: "title" (article/content-draft titles) fell through to the
   generic 160px floor above like any badge/number column, even though a
   real headline needs much more room than a name or domain - that single
   gap was the entire cause of scc-content-drafts rendering with huge,
   near-identical row heights (a 160px-wide title cell forced 5-8 word
   headlines to wrap 4-5 lines deep, and every row inherits its tallest
   cell's height). Confirmed live: title cell measured 226px tall inside a
   160px-wide column before this; the fix is width, not row height. */
.fi-ta .fi-ta-table .fi-ta-cell[class*="fi-table-cell-title"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 380px !important;
}

/* Flatten only the middle card in the nested playbook and dashboard stacks.
   The outer sb-section and innermost content cards remain framed. */
html body .fi-main div.sb-section:has(> .kt-card.kt-card-border),
html body .fi-main div.kt-card.kt-card-border:has(.kt-card.kt-card-border) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Form controls - match the Style Book kt-input and kt-input-sm surfaces.
 * Keep the Filament wrapper as the painted shell so text, select, textarea,
 * date, and time controls share one token-based treatment.
 * ------------------------------------------------------------------------- */
html body .fi-main .fi-input-wrp {
  box-sizing: border-box;
  height: auto !important;
  min-height: calc(var(--spacing) * 8.5) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  border-style: var(--tw-border-style) !important;
  border-width: 1px !important;
  border-color: var(--input) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  --tw-shadow-color: rgba(0,0,0,0.05);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

html body .fi-main .fi-input-wrp:hover {
  border-color: var(--input) !important;
}

html body .fi-main .fi-input-wrp:focus-within {
  border-color: var(--ring) !important;
  --tw-ring-color: var(--ring);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

@supports (color: color-mix(in oklab, red, red)) {
  html body .fi-main .fi-input-wrp:focus-within {
    --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
  }
}

html body .fi-main .fi-input-wrp .fi-input,
html body .fi-main .fi-input-wrp .fi-select-input,
html body .fi-main .fi-input-wrp input[type="date"],
html body .fi-main .fi-input-wrp input[type="datetime-local"],
html body .fi-main .fi-input-wrp input[type="month"],
html body .fi-main .fi-input-wrp input[type="time"],
html body .fi-main .fi-input-wrp input[type="week"] {
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  font-size: 0.8125rem !important;
  line-height: var(--text-sm--line-height) !important;
  padding-block: 0 !important;
  padding-inline: calc(var(--spacing) * 3) !important;
  outline-style: none;
  outline-width: 0;
}

html body .fi-main .fi-input-wrp .fi-select-input {
  padding-inline-start: calc(var(--spacing) * 3) !important;
  padding-inline-end: calc(var(--spacing) * 8) !important;
}

/* Choices-enhanced selects render an extra inner shell. Flatten that shell so
   the outer fi-input-wrp remains the single kt-input surface. */
html body .fi-main .fi-input-wrp.fi-fo-select .choices,
html body .fi-main .fi-input-wrp.fi-fo-select .choices__inner {
  height: auto !important;
  min-height: 0 !important;
}

html body .fi-main .fi-input-wrp.fi-fo-select .choices__inner {
  border: 0 !important;
  background-color: transparent !important;
  padding-block: 0 !important;
  padding-inline: calc(var(--spacing) * 3) !important;
}

html body .fi-main .fi-input-wrp.fi-fo-select .choices__list--single,
html body .fi-main .fi-input-wrp.fi-fo-select .choices__item {
  height: auto !important;
  min-height: 0 !important;
  font-size: 0.8125rem !important;
  line-height: var(--text-sm--line-height) !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Every rule above forces .fi-input / .choices__inner / .choices__item back
   to height:auto + padding-block:0 with !important - which is exactly why
   trying to give any of THOSE elements an explicit height or padding never
   worked (verified live 2026-08-11: getComputedStyle kept reporting the
   forced values no matter what was tried, including matching !important on
   an unlayered override in cyticx-theme.css). None of the rules above touch
   display/align-items on the WRAPPER one level up though, so centering
   belongs there instead: .fi-input-wrp-input is display:block by default,
   so a block-level input/choices box sits at natural top-of-flow position
   with no padding left to center it. Fixes every text input, number/email
   field, and Choices.js select at once (was a systemic bug, not
   page-specific - confirmed on two unrelated pages with zero code changes
   there once this landed). Excludes textarea, which needs to stay
   top-aligned and growable. */
html body .fi-main .fi-input-wrp-input:not(:has(textarea)) {
  display: flex !important;
  align-items: center !important;
}

html body .fi-main .fi-input-wrp textarea {
  min-height: calc(var(--spacing) * 8.5) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  font-size: 0.8125rem !important;
  line-height: var(--text-sm--line-height) !important;
  padding-inline: calc(var(--spacing) * 3) !important;
  outline-style: none;
  outline-width: 0;
}

html body .fi-main .fi-input-wrp .fi-input::placeholder,
html body .fi-main .fi-input-wrp textarea::placeholder {
  color: var(--muted-foreground) !important;
}

html body .fi-main .fi-input-wrp:has(:disabled) {
  cursor: not-allowed;
  opacity: 60%;
}

html body .fi-main .fi-input-wrp :disabled {
  cursor: not-allowed;
}

html body .fi-main .fi-input-wrp:has([aria-invalid="true"]) {
  border-color: var(--destructive) !important;
  --tw-ring-color: var(--destructive);
}

@supports (color: color-mix(in oklab, red, red)) {
  html body .fi-main .fi-input-wrp:has([aria-invalid="true"]) {
    border-color: color-mix(in oklab, var(--destructive) 60%, transparent) !important;
    --tw-ring-color: color-mix(in oklab, var(--destructive) 10%, transparent);
  }
}

/* ---------------------------------------------------------------------------
 * Filament form bridge
 *
 * Values are calibrated against billing/product-edit and the Style Book forms:
 * 56px card headers, 20px card padding, 34px controls, 13px control text, and
 * compact field rows. All colour comes from tokens.css.
 * ------------------------------------------------------------------------- */

/* Reset the inherited marker on every guard candidate. Only selectors with a
   complete bridge are promoted to 1 below. This keeps future widgets loud. */
html body .fi-main :is(.fi-section, .fi-fo-field-wrp, .fi-ta-table, .fi-wi) {
  --cx-bridged: 0;
}

html body .fi-main :is(.fi-section, .fi-fo-field-wrp, .fi-ta-table) {
  --cx-bridged: 1;
}

/* Native page headers use the compact cxp header rhythm. */
html body .fi-main .fi-header {
  min-height: calc(var(--spacing) * 14);
  align-items: center;
  gap: 1rem;
}

html body .fi-main .fi-breadcrumbs {
  margin-bottom: calc(var(--spacing) * 1);
}

/* Section shell and the required shaded 56px title band. */
html body .fi-main .fi-section {
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  background: var(--card) !important;
  color: var(--card-foreground) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--background) 55%, transparent) !important;
}

html body .fi-main .fi-section-header {
  min-height: calc(var(--spacing) * 14);
  align-items: center;
  border-bottom: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 3px) calc(var(--radius) + 3px) 0 0;
  background: color-mix(in srgb, var(--muted) 82%, var(--card)) !important;
  padding: 0 calc(var(--spacing) * 5) !important;
}

html body .fi-main .fi-section-header-heading {
  color: var(--foreground) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-tight);
}

html body .fi-main .fi-section-header-description {
  color: var(--muted-foreground) !important;
  font-size: var(--text-xs) !important;
}

html body .fi-main .fi-section-content-ctn {
  padding: calc(var(--spacing) * 5) !important;
}

/* Dense form rhythm. The field itself resolves to about 57px, with an 8px row
   gap, which stays close to the 61px approved exemplar instead of 90px. */
html body .fi-main .fi-form .fi-fo-component-ctn {
  column-gap: 1rem !important;
  row-gap: calc(var(--spacing) * 2) !important;
}

html body .fi-main .fi-fo-field-wrp > .grid,
html body .fi-main .fi-fo-field-wrp > .grid > .grid {
  row-gap: calc(var(--spacing) * 1.5) !important;
}

html body .fi-main .fi-fo-field-wrp-label,
html body .fi-main .fi-fo-field-wrp-label > span {
  color: var(--muted-foreground) !important;
  font-size: var(--text-2sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--text-2sm--line-height) !important;
}

html body .fi-main :is(
  .fi-fo-field-wrp-hint,
  .fi-fo-field-wrp-helper-text,
  .fi-fo-field-wrp-error-message,
  [data-validation-error]
) {
  color: var(--muted-foreground) !important;
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height) !important;
}

/* kt-input geometry for Filament text, select, and textarea controls. */
html body .fi-main .fi-fo-field-wrp .fi-input-wrp {
  width: 100%;
  max-width: 30rem;
  min-height: calc(var(--spacing) * 8.5) !important;
  border: 1px solid var(--input) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  background: var(--background) !important;
}

html body .fi-main :is(.fi-input, .fi-select-input, .fi-textarea) {
  color: var(--foreground) !important;
  font-size: var(--text-2sm) !important;
  line-height: var(--text-sm--line-height) !important;
}

html body .fi-main .fi-input-wrp textarea {
  padding-block: calc(var(--spacing) * 2) !important;
}

/* Style Book switch and checkbox geometry. Filament's dynamic custom colour is
   overridden by the app token so it cannot fall back to framework blue. */
html body .fi-main .fi-fo-toggle {
  width: calc(var(--spacing) * 9) !important;
  height: calc(var(--spacing) * 5) !important;
  border: 0 !important;
  background: var(--input) !important;
}

html body .fi-main .fi-fo-toggle > span {
  width: calc(var(--spacing) * 4) !important;
  height: calc(var(--spacing) * 4) !important;
}

html body .fi-main .fi-fo-toggle[aria-checked="true"] {
  background: var(--primary) !important;
}

html body .fi-main .fi-fo-toggle[aria-checked="true"] > span {
  transform: translateX(calc(var(--spacing) * 4)) !important;
}

html body .fi-main :is(.fi-checkbox-input, .fi-radio-input, .fi-checkbox) {
  width: calc(var(--spacing) * 5) !important;
  height: calc(var(--spacing) * 5) !important;
  border: 1px solid var(--input) !important;
  border-radius: calc(var(--radius) - 4px) !important;
  background-color: var(--background) !important;
}

html body .fi-main :is(.fi-checkbox-input, .fi-radio-input, .fi-checkbox):checked {
  border-color: var(--primary) !important;
  background-color: var(--primary) !important;
}

/* kt-btn geometry. Destructive actions use the quieter outline treatment. */
html body .fi-main .fi-btn:not(.fi-link) {
  display: inline-flex !important;
  height: calc(var(--spacing) * 8.5);
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: calc(var(--radius) - 2px) !important;
  padding-inline: calc(var(--spacing) * 3) !important;
  font-size: var(--text-2sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--text-sm--line-height) !important;
}

html.dark body .fi-main .fi-btn-color-primary:not(.fi-btn-outlined):not(.fi-link) {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

html.dark body .fi-main .fi-btn-color-danger:not(.fi-link) {
  border: 1px solid var(--destructive) !important;
  background: transparent !important;
  color: var(--color-red-500) !important;
  box-shadow: none !important;
}

html.dark body .fi-main .fi-btn-color-danger:not(.fi-link):hover {
  background: color-mix(in srgb, var(--destructive) 12%, transparent) !important;
}

/* Key-value, repeater, and embedded Filament tables inherit the same shaded
   header band and zebra treatment as Style Book data tables. */
html body .fi-main :is(
  .fi-fo-key-value table,
  .fi-fo-repeater table,
  .table-repeater-container table,
  .fi-form .fi-ta-table
) {
  width: 100%;
  border-collapse: collapse;
  color: var(--foreground);
}

html body .fi-main :is(
  .fi-fo-key-value table,
  .fi-fo-repeater table,
  .table-repeater-container table,
  .fi-form .fi-ta-table
) thead {
  background: color-mix(in srgb, var(--muted) 82%, var(--card)) !important;
}

html body .fi-main :is(
  .fi-fo-key-value table,
  .fi-fo-repeater table,
  .table-repeater-container table,
  .fi-form .fi-ta-table
) thead th {
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)) !important;
  color: var(--muted-foreground) !important;
  font-size: var(--text-2sm) !important;
  font-weight: var(--font-weight-medium) !important;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3) !important;
}

html body .fi-main :is(
  .fi-fo-key-value table,
  .fi-fo-repeater table,
  .table-repeater-container table,
  .fi-form .fi-ta-table
) tbody tr:nth-child(odd) > :is(td, th) {
  background: color-mix(in srgb, var(--muted) 38%, transparent) !important;
}

html body .fi-main :is(
  .fi-fo-key-value table,
  .fi-fo-repeater table,
  .table-repeater-container table,
  .fi-form .fi-ta-table
) tbody tr:nth-child(even) > :is(td, th) {
  background: transparent !important;
}

html body .fi-main :is(
  .fi-fo-key-value table,
  .fi-fo-repeater table,
  .table-repeater-container table,
  .fi-form .fi-ta-table
) tbody > tr > :is(td, th) {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
}

html body .fi-main .table-repeater-header {
  background: color-mix(in srgb, var(--muted) 82%, var(--card)) !important;
}

html body .fi-main .table-repeater-row:nth-child(odd) {
  background: color-mix(in srgb, var(--muted) 38%, transparent) !important;
}

html body .fi-main .table-repeater-row:nth-child(even) {
  background: transparent !important;
}

/* Inactive tab panels are absolutely positioned at zero height by Filament.
   Remove only those panels from layout so their controls cannot overlap the
   active tab's controls while preserving the calibrated field grid. */
html body .fi-main .fi-form .fi-fo-tabs-tab.invisible {
  display: none !important;
}

/* Filament schemas can declare six or twelve default columns with no mobile
   breakpoint. Collapse every component span at phone width so labels and
   controls never shred into implicit 20px columns. */
@media (max-width: 640px) {
  html body .fi-main .fi-form .fi-fo-component-ctn {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .fi-main .fi-form .fi-fo-component-ctn > * {
    min-width: 0;
    grid-column: 1 / -1 !important;
  }
}

/* ==========================================================================
   Listing portfolio (LmClient edit -> Listings relation manager) must FIT.
   Owner directive 2026-08-11: "I don't want a scroller on the bottom to
   navigate between this page inside another page."

   Why an override is needed: the blanket floor above
   (.fi-ta-cell:not(selection):not(actions) { min-width:160px !important })
   applies to EVERY cell, so this 7-column table demands 7*160 = 1120px inside
   a ~1074px container and can only ever scroll sideways. That floor is meant
   for identity/content columns (its own comment says so) - a 2-digit DA or a
   status badge does not need 160px.

   Scoped with :has() to ONLY tables that contain the DA column, i.e. this one,
   so every other table in the app keeps the existing global behaviour.
   ========================================================================== */
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) .fi-ta-cell:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 0 !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-directory.domain"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-directory.domain"] {
    min-width: 180px !important;
}
/* 2026-08-18: 52px was too tight for the Listings table's own 16px-era
   body font (the design-polish sweep found real DA scores like '91'
   splitting across two lines, '9' over '1'). Widening the column alone
   (tried 68px first) did not stop the split - this app's shared
   `.fi-ta-cell { overflow-wrap: normal }` rule was being beaten by a
   more specific Filament default of `overflow-wrap: anywhere` on this
   exact text-item-label, which breaks a bare 2-digit number
   mid-character even with room to spare. `white-space: nowrap` is the
   robust fix - guarantees one line regardless of the wrap-property
   cascade. Widened to 80px (was 52px) for comfortable breathing room. */
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-directory.da"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-directory.da"] {
    min-width: 0 !important; width: 80px !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-directory.da"] .fi-ta-text-item-label {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-type"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-type"] {
    min-width: 0 !important; width: 96px !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-status"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-status"] {
    min-width: 0 !important; width: 92px !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-created-on"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-created-on"] {
    min-width: 0 !important; width: 92px !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-publish-url"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-publish-url"] {
    min-width: 150px !important;
}
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-cell-keyword"],
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) [class*="fi-table-header-cell-keyword"] {
    min-width: 120px !important;
}
/* Long values wrap instead of forcing the row wider. */
.fi-ta-table:has([class*="fi-table-cell-directory.da"]) .fi-ta-cell .fi-ta-text-item-label {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   GBP Rank configs list - must FIT at mobile.
   Owner rule: an inner horizontal scroller is a broken layout, not a feature.
   At 390px the container is ~316px while six columns floor at 160-200px each
   (Filament's own minimum), giving 1073px of content - unfittable by width
   alone. The only correct remedy is to show fewer columns on small screens.
   Kept: Business (identity) + Client (the whole point of this page) + actions.
   Hidden below 768px: Keyword, Scan freq, Enabled - all still visible on
   desktop and on the record's edit page.
   Scoped with :has() to ONLY the table carrying a `cadence` column, so no
   other table in the app is affected.
   ========================================================================== */
@media (max-width: 767.98px) {
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-cell-keyword"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-header-cell-keyword"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-cell-cadence"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-header-cell-cadence"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-cell-enabled"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-header-cell-enabled"] {
    display: none !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) {
    min-width: 0 !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-cell-target-name"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-header-cell-target-name"] {
    min-width: 118px !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-cell-client.name"],
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) [class*="fi-table-header-cell-client.name"] {
    min-width: 96px !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell .fi-ta-text-item-label {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  /* Tab strip: wrap onto a second line rather than scroll sideways. */
  .fi-tabs { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: .35rem; }
}

/* Beat the identity-column 200px floor above, which carries a :not():not()
   chain and therefore outranks the mobile block. Same selector shape + one
   extra class, so it wins on specificity rather than on source order. */
@media (max-width: 767.98px) {
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell[class*="fi-table-cell-target-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-header-cell[class*="fi-table-header-cell-target-name"] {
    min-width: 112px !important; width: auto !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell[class*="fi-table-cell-client.name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-header-cell[class*="fi-table-header-cell-client.name"] {
    min-width: 92px !important; width: auto !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions-cell {
    min-width: 0 !important; width: 1% !important; white-space: nowrap;
  }
}

/* Final mobile fit: let the four icon actions wrap into two rows instead of
   holding a single 193px strip, and trim the two text columns to match the
   316px container. 104 + 88 + ~118 = under 316, so the table fits with no
   inner scroller. */
@media (max-width: 767.98px) {
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions-cell .fi-ta-actions,
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions-cell .fi-ac {
    flex-wrap: wrap !important;
    max-width: 104px;
    gap: .15rem !important;
    justify-content: flex-end;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions-cell .fi-icon-btn,
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions-cell .fi-btn {
    padding: .3rem !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell[class*="fi-table-cell-target-name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-header-cell[class*="fi-table-header-cell-target-name"] {
    min-width: 100px !important; max-width: 108px !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell[class*="fi-table-cell-client.name"]:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-header-cell[class*="fi-table-header-cell-client.name"] {
    min-width: 84px !important; max-width: 92px !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-cell,
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-header-cell { padding-left: .45rem !important; padding-right: .45rem !important; }
}

/* CORRECTED: the icon-button group is `.fi-ta-actions`, and it is NOT inside a
   `.fi-ta-actions-cell` on this table - which is why the earlier rule never
   applied. Target it directly (still scoped by :has to this one table) and let
   the 44px buttons wrap two-up instead of holding a single wide strip.
   Rows are clickable, so nothing is lost if a button wraps to a second line. */
@media (max-width: 767.98px) {
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions {
    flex-wrap: wrap !important;
    max-width: 94px !important;
    gap: .15rem !important;
    justify-content: flex-end;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) .fi-ta-actions .fi-icon-btn {
    width: 40px; height: 40px; padding: .25rem !important;
  }
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) tbody td:last-child,
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) thead th:last-child {
    width: 1% !important; min-width: 0 !important;
    padding-left: .3rem !important; padding-right: .3rem !important;
  }
}

/* Hide the row-actions column at mobile. Width-based shrinking of this cell did
   not hold (the button group resisted every max-width/flex-wrap attempt), while
   display:none on a column is the mechanism already proven to work on this
   table. Safe because the rows are clickable - tapping a row opens the record,
   where every action is available. Leaves Business + Client = ~199px inside a
   316px container, so the table fits with no inner scroller. */
@media (max-width: 767.98px) {
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) tbody tr > td:last-child,
  .fi-ta-table:has([class*="fi-table-header-cell-cadence"]) thead tr > th:last-child {
    display: none !important;
  }
}
.cxp-review-distribution { display:grid; gap:.55rem; max-width:42rem; }
.cxp-review-distribution__row { display:grid; grid-template-columns:3rem minmax(8rem, 1fr) 4rem; gap:.7rem; align-items:center; }
.cxp-review-distribution__label, .cxp-review-distribution__value { color:var(--muted-foreground); font-size:.78rem; }
.cxp-review-distribution__value { text-align:right; color:var(--foreground); font-variant-numeric:tabular-nums; }
.cxp-review-distribution__track { display:block; height:.55rem; overflow:hidden; border-radius:999px; background:var(--muted); }
.cxp-review-distribution__fill { display:block; height:100%; border-radius:inherit; background:var(--color-green-500); }
.cxp-review-distribution__fill--1, .cxp-review-distribution__fill--2 { background:var(--destructive); }
.cxp-review-distribution__fill--3 { background:var(--color-yellow-500); }
.cxp-review-distribution__fill--4 { background:var(--primary); }
.cxp-review-distribution__fill--5 { background:var(--color-green-500); }
.cxp-review-activity-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:.6rem; }
.cxp-review-activity-row { display:flex; justify-content:space-between; gap:.8rem; padding:.7rem .8rem; border:1px solid var(--border); border-radius:var(--radius); color:var(--muted-foreground); }
.cxp-review-stars { color:var(--color-yellow-500); letter-spacing:.08em; }
@media (max-width:640px) { .cxp-review-distribution__row { grid-template-columns:2.6rem minmax(5rem, 1fr) 3rem; } }
body.fi-panel-portal .cxp-review-stat--missing .cxp-stat-card__value {
  color: var(--muted-foreground);
  font-size: .9rem;
  line-height: 1.25;
  letter-spacing: 0;
}


/* CYT-644 finding #14 (confirmed live 2026-08-18): an EMPTY TagsInput's own
   text entry box measured 195px wide while its containing field was 480px -
   root cause traced to CSS shrink-to-fit: the Alpine x-data wrapper around
   the input is a plain block-display flex ITEM with no flex-grow, so its
   own width is content-based. When tags already exist, the chip row's own
   width-hungry flex-wrap content happens to drag that ancestor chain wide
   as a side effect; with zero tags the wrapper has nothing but the bare
   input to size against, and a percentage-width child (w-full) inside a
   shrink-to-fit parent falls back to the input's native ~20-character
   intrinsic default - so an empty field's placeholder
   ("olympusgaragedoorrepair.com") got silently clipped mid-word with no
   ellipsis, while a populated field like Own domains looked fine by
   accident. flex-direction:column is required, not just display:flex - the
   wrapper stacks an input row above a bordered chip row (border-t in
   Filament's own markup); a first attempt using display:flex alone
   defaulted to row and broke that stack (chip row shifted beside the input
   instead of below it) - caught by screenshotting Own domains specifically,
   not just the originally-reported empty field, before calling this done. */
.fi-fo-tags-input .fi-input-wrp-input > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* === RV-THEME-2026-08-19 =============================================
   Reviews page keeps the MOCKUP'S STRUCTURE while every element uses the
   house component it belongs to (stat-card, trend-chart, kt-badge,
   kt-btn, sb-tabs-line). What remains here is layout only - arrangement
   the mockup specifies and the components do not: the two-up card row,
   the review card's avatar/body/reply columns, and the pager strip.
   No colours, radii or type sizes are invented; they ride the tokens.
   ================================================================== */
body.fi-panel-portal .cxp-rv-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { body.fi-panel-portal .cxp-rv-duo { grid-template-columns: 1fr; } }

body.fi-panel-portal .cxp-rv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
body.fi-panel-portal .cxp-rv-tab-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 12px; font-weight: 700; }
body.fi-panel-portal .sb-tab-line.active .cxp-rv-tab-count { background: var(--primary); color: var(--primary-foreground, #fff); }
body.fi-panel-portal .cxp-rv-sort { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; color: var(--muted-foreground); }

body.fi-panel-portal .cxp-rv-card { display: flex; flex-direction: row; align-items: flex-start; gap: .9rem; padding: calc(var(--spacing) * 5); }
body.fi-panel-portal .cxp-rv-card__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 750; }
body.fi-panel-portal .cxp-rv-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
body.fi-panel-portal .cxp-rv-card__head { display: flex; align-items: baseline; gap: .4rem; }
body.fi-panel-portal .cxp-rv-card__dot { color: var(--muted-foreground); }
body.fi-panel-portal .cxp-rv-card__stars { color: var(--primary); letter-spacing: .1em; }
body.fi-panel-portal .cxp-rv-card__text { margin: 0; line-height: 1.55; max-width: 64ch; }
body.fi-panel-portal .cxp-rv-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; }
body.fi-panel-portal .cxp-rv-card__reply { flex: 0 0 17rem; align-self: flex-start; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius, .6rem); background: color-mix(in srgb, var(--primary) 4%, var(--background)); display: flex; flex-direction: column; gap: .3rem; }
body.fi-panel-portal .cxp-rv-card__reply-title { font-weight: 700; color: var(--muted-foreground); }
body.fi-panel-portal .cxp-rv-card__reply p { margin: 0; line-height: 1.5; }
@media (max-width: 900px) {
  body.fi-panel-portal .cxp-rv-card { flex-wrap: wrap; }
  body.fi-panel-portal .cxp-rv-card__reply { flex-basis: 100%; }
}

/* === RV-DRAFT-REPLY-2026-08-20 ============================================
   Draft-reply editor on a review card (CYT-674). Same construction as
   .cxp-rv-card__reply above - token borders, tinted surface, house buttons -
   so a drafted reply reads as a sibling of a posted one rather than a new
   component. Nothing here is a one-off colour.
   ------------------------------------------------------------------------ */
body.fi-panel-portal .cxp-rv-draft { margin-top: .7rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius, .6rem); background: color-mix(in srgb, var(--primary) 4%, var(--background)); display: flex; flex-direction: column; gap: .4rem; }
body.fi-panel-portal .cxp-rv-draft__title { font-weight: 700; color: var(--muted-foreground); }
body.fi-panel-portal .cxp-rv-draft__text { width: 100%; max-width: 78ch; min-height: 4.5rem; overflow-y: auto; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius, .6rem); background: var(--background); color: inherit; font: inherit; line-height: 1.55; resize: vertical; }
body.fi-panel-portal .cxp-rv-draft__text:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
body.fi-panel-portal .cxp-rv-draft__note { margin: 0; line-height: 1.5; color: var(--muted-foreground); }
body.fi-panel-portal .cxp-rv-draft__note--bad { color: var(--cxp-tone-poor, #d92d20); font-weight: 600; }
body.fi-panel-portal .cxp-rv-draft__why { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
@media (max-width: 900px) {
  body.fi-panel-portal .cxp-rv-draft__text { min-height: 7rem; }
}
body.fi-panel-portal .cxp-rv-draft__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
/* Label kept for screen readers without showing a second visible heading. */
body.fi-panel-portal .cxp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.fi-panel-portal .cxp-rv-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .35rem 0 .5rem; }
body.fi-panel-portal .cxp-rv-pager__pages { display: inline-flex; align-items: center; gap: .3rem; }
body.fi-panel-portal .cxp-rv-pager__btn { min-width: 2.1rem; justify-content: center; }
body.fi-panel-portal .cxp-rv-pager__btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground, #fff); }
body.fi-panel-portal .cxp-rv-pager__btn.is-disabled { opacity: .4; pointer-events: none; }

/* === RV-KPI-PLAIN-2026-08-19 =============================================
   The count-type stat-card wraps its number in a tinted rounded chip. On
   the Reviews KPI row that reads as a grey box floating inside the card
   (Adir: "fix the boxes"). The mockup shows a plain number, so on this
   row only, drop the chip and let the value sit on the card surface.
   ================================================================== */
/* Measured: the tinted chip is .cxp-stat-card__value-zone (bg
   oklch(.975 .006 265), 12px radius, 12/16 padding) - NOT __value, which is
   already transparent. Targeting __value did nothing; this is the real one. */
body.fi-panel-portal .cxp-portal-page > .cxp-scoreboard-grid .cxp-stat-card--count .cxp-stat-card__value-zone {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  justify-content: flex-start;
}


/* ---------------------------------------------------------------------------
 * SCC Sites (Websites) table - column widths that actually stick (2026-08-20)
 *
 * TextColumn::extraAttributes()/extraHeaderAttributes() renders its inline
 * style onto an INNER wrapper div, not the <td>/<th> box itself (confirmed
 * live: the <td class="fi-ta-cell fi-table-cell-health"> had NO inline style
 * at all - inlineStyle was null - even though extraAttributes(['style' =>
 * 'width:84px']) was set on that column). table-layout:auto sizes each
 * COLUMN from the outer <td>/<th> box, so an inner wrapper being narrower
 * never shrinks the column - every badge/toggle column on this table kept
 * rendering at the generic 160px floor from the `.fi-ta-cell:not(...)
 * { min-width: 160px !important }` rule further up this file regardless of
 * what width the Resource specified, and the table stayed ~670px wider than
 * its card at 1440px (the horizontal-scroll "internal navigation" the user
 * reported hiding the Connected/Findings/Actions/Enabled columns entirely).
 *
 * Fix: target the real box directly, scoped to this one resource only via
 * its `fi-resource-command-center-scc-sites` wrapper class so nothing else
 * in the app is affected. Values match the Resource's own extraAttributes
 * widths - keep the two in sync if either changes.
 * ------------------------------------------------------------------------- */
/* 2026-08-24: the fix above stopped the horizontal-scroll overflow, but left
 * a new defect Adir caught - a wide dead gray gutter on the right at 1920px,
 * because the table shrank to its own content sum instead of filling the
 * card, and the Website/domain column (the one identifying column) was left
 * unconstrained-but-narrow so it rendered barely wider than the truncated
 * ->limit(18) string. Two changes: force the table itself to use the full
 * card width, and give the domain column real room (280px floor, no ceiling)
 * so table-layout:auto hands it the leftover space instead of dead air -
 * every OTHER column here keeps its own max-width cap, so the extra space
 * has nowhere else to go. Paired with raising ->limit(18) to ->limit(42) in
 * the Resource so the wider column actually shows more real text, not just
 * blank padding after the same short truncated string. */
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table {
  width: 100% !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-domain,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-domain {
  width: auto !important; min-width: 280px !important; max-width: none !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-cms-type,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-cms-type {
  width: 100px !important; min-width: 100px !important; max-width: 100px !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-health,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-health,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-seo-score,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-seo-score {
  width: 84px !important; min-width: 84px !important; max-width: 84px !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-trend,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-trend {
  width: 190px !important; min-width: 190px !important; max-width: 190px !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-connections,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-connections {
  width: 98px !important; min-width: 98px !important; max-width: 98px !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-open-findings-count,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-open-findings-count,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-actions-count,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-actions-count {
  width: 84px !important; min-width: 84px !important; max-width: 84px !important;
}
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table th.fi-ta-header-cell.fi-table-cell-enabled,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-enabled {
  width: 76px !important; min-width: 76px !important; max-width: 76px !important;
}
/* Numbers/scores align LEFT down the column, not centered - house rule
   2026-08-20. Filament's alignCenter() (already removed from the Resource)
   wraps content in a flex row with justify-center; this is a belt-and-
   braces guard in case that class survives a future edit. */
.fi-resource-command-center-scc-sites .fi-table-cell-health .fi-ta-col-wrp,
.fi-resource-command-center-scc-sites .fi-table-cell-seo-score .fi-ta-col-wrp,
.fi-resource-command-center-scc-sites .fi-table-cell-connections .fi-ta-col-wrp,
.fi-resource-command-center-scc-sites .fi-table-cell-open-findings-count .fi-ta-col-wrp,
.fi-resource-command-center-scc-sites .fi-table-cell-actions-count .fi-ta-col-wrp {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Domain column text was overflowing into the CMS column's space - the
   column got a fixed width (whatever it's currently tuned to) but nothing
   clipped the text itself, so any domain not short enough to hit the
   Resource's ->limit() rendered at its full natural width and visually ran
   into the next cell (seen live: "carkeysfortlauderdale.com" over "static-
   php"). Belt-and-braces: force real ellipsis on the text node regardless of
   what width the column ends up tuned to. */
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-domain .fi-ta-text,
.fi-resource-command-center-scc-sites .fi-ta .fi-ta-table td.fi-ta-cell.fi-table-cell-domain .fi-ta-text-item {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Reviews pager: wrap instead of overflowing (2026-08-21)

   `.cxp-rv-pager__pages` was `display: inline-flex` with no wrap. With ten
   pages plus the two arrows it measured 457px inside a 390px viewport, so the
   whole `fi-main-ctn` reported 483 > 390 and the page could be dragged
   sideways on a phone. The house rule is that content FITS; a horizontal
   scroller is a broken layout, not a scrollable one.

   Wrapping is applied at every width, not just mobile. It changes nothing on a
   desktop, where the row already fits on one line, and it means the fix cannot
   be defeated later by a client with more pages than this one happens to have. */
body.fi-panel-portal .cxp-rv-pager__pages {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .35rem;
}

@media (max-width: 640px) {
  /* On a phone the pager gets the full row and centres, rather than being
     squeezed beside the "Showing 1 to 5 of 50" caption. */
  body.fi-panel-portal .cxp-rv-pager { justify-content: center; }
  body.fi-panel-portal .cxp-rv-pager__pages { width: 100%; }
}