/*
 * REMS panel skin — layer 1: the public website's look (tophillrealty.com) applied to Filament 4.
 *
 * Plain CSS on purpose, no Vite build: it is registered as a panel asset in AdminPanelProvider
 * and published to public/css/app/rems-skin.css by `artisan filament:assets`, which the deploy
 * already runs through `filament:upgrade`. Production has never had a Node toolchain.
 *
 * Why it wins without !important: Filament's own stylesheet is Tailwind v4 output, and every rule
 * in it sits inside an @layer. Unlayered CSS beats layered CSS regardless of specificity or load
 * order, so every selector here is kept NARROW — a broad one would override Filament's utilities too.
 *
 * Tokens mirror resources/css/tokens.css in jcgomar/tophill-website (the design system artifact
 * is its source of truth). Prefixed --rems-* because Filament already owns --gray-*, --primary-*
 * and --danger-*.
 *
 * Density is a PANEL's, not a marketing site's: no display sizes, no 96px section padding,
 * no scroll-linked motion. Tables and forms stay at 13-15px.
 */

:root {
    --rems-surface: #ffffff;
    --rems-surface-alt: #f5f5f7;
    --rems-surface-raised: #ffffff;
    --rems-ink: #1d1d1f;
    --rems-ink-muted: #6e6e73;
    --rems-hairline: #d2d2d7;
    --rems-hairline-soft: #ececf0;
    --rems-seg: #e8e8ed;
    --rems-forest: #056839;
    --rems-forest-text: #056839;
    --rems-focus: #056839;
    --rems-glass: rgba(255, 255, 255, 0.78);
    --rems-shadow-knob: 0 1px 4px rgba(0, 0, 0, 0.14);
    --rems-radius-sm: 8px;
    --rems-radius-md: 14px;
    --rems-radius-lg: 22px;
    --rems-radius-pill: 999px;
    --rems-nav-active-bg: #1d1d1f;
    --rems-nav-active-ink: #ffffff;
}

.dark {
    --rems-surface: #000000;
    --rems-surface-alt: #161617;
    --rems-surface-raised: #1d1d1f;
    --rems-ink: #f5f5f7;
    --rems-ink-muted: #a1a1a6;
    --rems-hairline: #38383b;
    --rems-hairline-soft: #2c2c2e;
    --rems-seg: #2c2c2e;
    --rems-focus: #8cc63f;
    --rems-forest-text: #6fd49a;
    --rems-glass: rgba(22, 22, 23, 0.78);
    --rems-shadow-knob: 0 1px 4px rgba(0, 0, 0, 0.6);
    --rems-nav-active-bg: #f5f5f7;
    --rems-nav-active-ink: #1d1d1f;
}

/* ── Ground ─────────────────────────────────────────────────────────────── */

.fi-body {
    background-color: var(--rems-surface-alt);
    color: var(--rems-ink);
    letter-spacing: -0.01em;
}

/* ── Topbar: glass, hairline, the active item as a black pill ───────────── */

/*
 * The blur lives on a pseudo-element, not on .fi-topbar itself: backdrop-filter makes an element
 * the containing block for its position:fixed descendants, and the user menu and the feedback
 * widget open dropdowns from inside the topbar.
 */
.fi-topbar {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--rems-hairline);
}

.fi-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--rems-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.fi-topbar-item-btn {
    border-radius: var(--rems-radius-pill);
    padding: 7px 14px;
}

.fi-topbar-item-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--rems-ink);
}

.fi-topbar-item:not(.fi-active) .fi-topbar-item-btn:hover {
    background-color: color-mix(in srgb, var(--rems-ink) 6%, transparent);
}

.fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: var(--rems-nav-active-bg);
}

.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon {
    color: var(--rems-nav-active-ink);
}

/* ── Page header ────────────────────────────────────────────────────────── */

.fi-header-heading {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.035em;
}

/* ── Cards: white, 22px, no border and no shadow at rest ────────────────── */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main {
    border-radius: var(--rems-radius-lg);
    background-color: var(--rems-surface-raised);
    box-shadow: none;
}

.fi-section-header-heading {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.fi-modal:not(.fi-modal-slide-over) .fi-modal-window {
    border-radius: var(--rems-radius-lg);
}

.fi-modal-window {
    --tw-ring-color: transparent;
}

.fi-dropdown-panel {
    border-radius: var(--rems-radius-md);
    --tw-ring-color: var(--rems-hairline);
}

/* ── Stats ──────────────────────────────────────────────────────────────── */

.fi-wi-stats-overview-stat-label {
    font-size: 13px;
    color: var(--rems-ink-muted);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.fi-wi-stats-overview-stat-value,
.fi-ta-text,
.fi-ta-text-item,
.fi-in-text-item,
.fi-pagination,
.fi-badge {
    font-variant-numeric: tabular-nums;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.fi-ta-header-cell-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rems-ink-muted);
}

/* ── Things you press: pills ────────────────────────────────────────────── */

.fi-btn,
.fi-icon-btn,
.fi-badge,
.fi-btn-group,
.fi-pagination-items,
.fi-pagination-item-btn {
    border-radius: var(--rems-radius-pill);
}

/* Weight only: Filament's size variants (xs/sm in table rows) keep their own padding. */
.fi-btn {
    font-weight: 600;
}

/* A badge is a filled pill, as on the website: the ring outline goes. */
.fi-badge {
    box-shadow: none;
    font-weight: 600;
}

/* Tabs outside a section read as a segmented control; inside one, as pills on white. */
.fi-tabs:not(.fi-contained) {
    border-radius: var(--rems-radius-pill);
    background-color: var(--rems-seg);
    padding: 3px;
    box-shadow: none;
    width: fit-content;
}

.fi-tabs-item {
    border-radius: var(--rems-radius-pill);
    padding: 6px 14px;
}

.fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active {
    background-color: var(--rems-surface-raised);
    box-shadow: var(--rems-shadow-knob);
}

.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    background-color: var(--rems-surface-alt);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: var(--rems-ink);
}

/* ── Inputs: 8px, hairline border ───────────────────────────────────────── */

.fi-input-wrp {
    border-radius: var(--rems-radius-sm);
    --tw-shadow: 0 0 #0000;
}

.fi-input-wrp:not(.fi-invalid):not(:focus-within) {
    --tw-ring-color: var(--rems-hairline);
}

/* ── Focus: a solid 2px ring with 3px offset on every control ───────────── */

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-tabs-item:focus-visible,
.fi-topbar-item-btn:focus-visible,
.fi-pagination-item-btn:focus-visible,
.fi-ta-header-cell-sort-btn:focus-visible,
.fi-input-wrp:not(.fi-invalid):focus-within,
.fi-checkbox-input:focus-visible,
.fi-toggle:focus-visible {
    outline: 2px solid var(--rems-focus);
    outline-offset: 3px;
}

/* Dropdown rows sit flush against the panel edge; an outside offset would be clipped. */
.fi-dropdown-list-item:focus-visible {
    outline: 2px solid var(--rems-focus);
    outline-offset: -2px;
}

/* ── Dashboard (layer 2): the greeting and the scope control ───────────── */

/* The date is the page's subheading in the markup (the h1 stays a plain greeting); shown ABOVE it, as the website's eyebrow. */
.fi-header:has(.dash-eyebrow) > div:first-child {
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
}

.fi-header:has(.dash-eyebrow) .fi-header-heading {
    font-size: 36px;
}

.fi-header:has(.dash-eyebrow) .fi-header-subheading {
    margin: 0;
}

.dash-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rems-forest-text);
}

/* My Business / My Office / Brokerage as a segmented control: the button group is the track, the active mode the knob. */
.fi-btn-group:has(.dash-scope) {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    border-radius: var(--rems-radius-pill);
    background-color: var(--rems-seg);
    box-shadow: none;
}

.fi-btn-group .fi-btn.dash-scope {
    border-radius: var(--rems-radius-pill);
    background-color: transparent;
    color: var(--rems-ink);
    box-shadow: none;
    padding: 6px 14px;
    font-weight: 500;
    white-space: nowrap;
}

.fi-btn-group .fi-btn.dash-scope:not(.is-active):hover {
    background-color: color-mix(in srgb, var(--rems-ink) 6%, transparent);
}

.fi-btn-group .fi-btn.dash-scope.is-active {
    background-color: var(--rems-surface-raised);
    box-shadow: var(--rems-shadow-knob);
    font-weight: 600;
    opacity: 1;
    cursor: default;
}

/* ── Contact page (layer 2): the name with its pills, and the way back ───── */

/* "‹ Contacts" is the page's subheading in the markup; shown ABOVE the name. */
.fi-header:has(.page-back) > div:first-child {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

.fi-header:has(.page-back) .fi-header-subheading {
    margin: 0;
}

.page-back {
    font-size: 13px;
    font-weight: 500;
    color: var(--rems-forest-text);
    text-decoration: none;
}

.page-back:hover {
    text-decoration: underline;
}

.page-back:focus-visible {
    outline: 2px solid var(--rems-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.contact-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.contact-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--rems-radius-pill);
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
}

/* Lime is the logo's roof green: a fill with ink text (on-lime), never text on white. */
.contact-pill--lead {
    background-color: #8cc63f;
    color: #1d1d1f;
}

.contact-pill--active {
    background-color: #dbf6e3;
    color: #034926;
}

.contact-pill--quiet {
    background-color: #ececf0;
    color: #424245;
    font-weight: 500;
}

.dark .contact-pill--active {
    background-color: #032110;
    color: #b9ecc8;
}

.dark .contact-pill--quiet {
    background-color: #2c2c2e;
    color: #d2d2d7;
}

/* ── Dark: the design system's dark values ──────────────────────────────── */

/* The scope knob on the dark track: #1d1d1f would vanish into #2c2c2e. */
.dark .fi-btn-group .fi-btn.dash-scope.is-active {
    background-color: #424245;
}

.dark .fi-input-wrp:not(.fi-invalid):not(:focus-within) {
    --tw-ring-color: var(--rems-hairline);
}

.dark .fi-dropdown-panel {
    background-color: var(--rems-surface-raised);
}

.dark .fi-modal-window {
    background-color: var(--rems-surface-raised);
}

/* Filament's generated avatar is filled with gray-950, which is the dark ground's own colour. */
.dark .fi-user-menu-trigger .fi-avatar {
    box-shadow: 0 0 0 1px var(--rems-hairline);
}