/* FoxTS control-panel artifact v3: presentation over the existing Filament application. */
:root {
    --fx-bg: #eef1f4;
    --fx-surface: #ffffff;
    --fx-surface-2: #f6f8fa;
    --fx-fg: #16202a;
    --fx-muted: #5d6b79;
    --fx-line: #d6dde5;
    --fx-accent: #0e6f8e;
    --fx-accent-fg: #ffffff;
    --fx-accent-soft: #dcecf2;
    --fx-good: #1d7d47;
    --fx-good-soft: #dcf2e4;
    --fx-warn: #9a6a0c;
    --fx-warn-soft: #fbefd0;
    --fx-bad: #b83a3a;
    --fx-bad-soft: #f9dede;
    --fx-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --fx-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --fx-radius: 6px;
    --fx-shadow: 0 1px 2px rgba(22, 32, 42, .08);
}

html.dark {
    --fx-bg: #0f151b;
    --fx-surface: #171f27;
    --fx-surface-2: #1d2731;
    --fx-fg: #e4eaf0;
    --fx-muted: #94a3b2;
    --fx-line: #2b3843;
    --fx-accent: #46b4d3;
    --fx-accent-fg: #06202a;
    --fx-accent-soft: #163442;
    --fx-good: #58cf8a;
    --fx-good-soft: #163626;
    --fx-warn: #f0b64a;
    --fx-warn-soft: #3a2d10;
    --fx-bad: #f27b7b;
    --fx-bad-soft: #3f1c1c;
    --fx-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.fi-body.fi-panel-admin {
    margin: 0;
    background: var(--fx-bg);
    color: var(--fx-fg);
    font: 14px/1.5 var(--fx-font);
}

.fi-panel-admin :is(button, input, select, textarea) { font-family: inherit; }
.fi-panel-admin :is(h1, h2, h3, h4) { font-weight: 600; text-wrap: balance; }
.fi-panel-admin :is(code, pre, .font-mono, .fx-mono) { font-family: var(--fx-mono); font-size: 12.5px; }
.fi-panel-admin :is(.fx-num, .fx-big, .fi-ta-text) { font-variant-numeric: tabular-nums; }
.fi-panel-admin :focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; }
.fi-panel-admin .fx-link { color: var(--fx-accent); text-decoration: none; }
.fi-panel-admin .fx-link:hover { text-decoration: underline; }

/* Keep Filament's working navigation and account controls in the artifact's compact shell. */
.fi-panel-admin .fi-sidebar {
    background: var(--fx-surface);
    border-inline-end: 1px solid var(--fx-line);
}
.fi-panel-admin :is(.fi-sidebar-header, .fi-topbar > nav) {
    height: 48px;
    min-height: 48px;
    background: var(--fx-surface);
    border-bottom: 1px solid var(--fx-line);
    box-shadow: none;
}
.fi-panel-admin .fi-sidebar-header { padding-inline: 16px; }
.fi-panel-admin .fi-logo { color: var(--fx-fg); font-size: 15px; font-weight: 600; line-height: 1.3; }
.fi-panel-admin .fi-sidebar-nav { gap: 16px; padding: 14px 10px; scrollbar-gutter: auto; }
.fi-panel-admin .fi-sidebar-nav-groups { gap: 16px; margin-inline: 0; }
.fi-panel-admin .fi-sidebar-group-button { padding: 6px 10px; }
.fi-panel-admin .fi-sidebar-group-label {
    color: var(--fx-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fi-panel-admin .fi-sidebar-group-collapse-button { width: 20px; height: 20px; }
.fi-panel-admin .fi-sidebar-item-button { min-height: 35px; gap: 8px; padding: 7px 10px; border-radius: var(--fx-radius); }
.fi-panel-admin .fi-sidebar-item-label { color: var(--fx-fg); font-size: 14px; font-weight: 400; line-height: 1.5; }
.fi-panel-admin .fi-sidebar-item-icon { width: 17px; height: 17px; color: var(--fx-muted); }
.fi-panel-admin :is(.fi-sidebar-item-icon, .fi-sidebar-group-collapse-button) { display: none; }
.fi-panel-admin .fi-sidebar-item-button:hover { background: var(--fx-surface-2); }
.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-button { background: var(--fx-accent-soft); }
.fi-panel-admin .fi-sidebar-item.fi-active :is(.fi-sidebar-item-label, .fi-sidebar-item-icon) { color: var(--fx-accent); font-weight: 600; }
.fi-panel-admin .fi-topbar > nav { gap: 12px; padding-inline: 16px; background: var(--fx-surface-2); }
.fi-panel-admin .fi-main-ctn { min-width: 0; }
.fi-panel-admin .fi-main { max-width: none; padding-inline: 16px; }
.fi-panel-admin .fi-page { padding-block: 0; }
.fi-panel-admin .fi-page > section { gap: 18px; padding-block: 20px; }
.fi-panel-admin .fi-page > section > div > .grid { row-gap: 18px; }
.fi-panel-admin .fi-header { gap: 10px; align-items: end; }
.fi-panel-admin .fi-header-heading { color: var(--fx-fg); font-size: 20px; line-height: 1.4; }
.fi-panel-admin .fi-header-subheading { margin-top: 2px; color: var(--fx-muted); font-size: 14px; line-height: 1.5; }
.fi-panel-admin .fi-breadcrumbs { font-size: 12px; }
.fi-panel-admin .fx-session { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; color: var(--fx-muted); font-size: 12px; }
.fi-panel-admin .fx-session strong { color: var(--fx-fg); font-weight: 500; }
.fi-panel-admin .fx-session-security { color: var(--fx-good); }

/* Native resource screens remain native forms and tables, with the artifact's spacing and colors. */
.fi-panel-admin :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-simple-main) {
    background: var(--fx-surface);
    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow);
}
.fi-panel-admin .fi-section-header { gap: 10px; padding: 14px 16px; }
.fi-panel-admin .fi-section-header-heading { color: var(--fx-fg); font-size: 16px; line-height: 1.4; }
.fi-panel-admin .fi-section-header-description { color: var(--fx-muted); font-size: 13px; }
.fi-panel-admin :is(.fi-section-content, .fi-ta-empty-state) { padding: 16px; }
.fi-panel-admin .fi-section-content-ctn { border-color: var(--fx-line); }
.fi-panel-admin .fi-fo-component-ctn { gap: 16px; }
.fi-panel-admin .fi-fo-field-wrp-label { color: var(--fx-fg); font-size: 12.5px; font-weight: 600; }
.fi-panel-admin .fi-fo-field-wrp-helper-text { color: var(--fx-muted); font-size: 12px; }
.fi-panel-admin .fi-input-wrp {
    background: var(--fx-surface);
    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius);
    box-shadow: none;
}
.fi-panel-admin .fi-input-wrp:focus-within { border-color: var(--fx-accent); outline: 1px solid var(--fx-accent); }
.fi-panel-admin :is(.fi-input, .fi-select-input) { color: var(--fx-fg); font-size: 14px; line-height: 1.5; padding-block: 6px; }
.fi-panel-admin .fi-textarea {
    color: var(--fx-fg);
    background: var(--fx-surface);
    border-radius: var(--fx-radius);
    font-size: 14px;
    line-height: 1.5;
}
.fi-panel-admin :is(.fi-checkbox-input, .fi-radio-input) { accent-color: var(--fx-accent); }
.fi-panel-admin .fi-btn { min-height: 32px; gap: 6px; padding: 6px 12px; border-radius: var(--fx-radius); font-size: 14px; font-weight: 500; line-height: 1.3; box-shadow: none; }
.fi-panel-admin .fi-btn.fi-size-sm { min-height: 27px; padding: 3px 9px; font-size: 12.5px; }
.fi-panel-admin .fi-btn.fi-color-primary:not(.fi-btn-outlined) { background: var(--fx-accent); color: var(--fx-accent-fg); }
.fi-panel-admin .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-icon { color: var(--fx-accent-fg); }
.fi-panel-admin .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { filter: brightness(1.08); }
.fi-panel-admin .fi-btn.fi-color-gray { color: var(--fx-fg); background: var(--fx-surface); border: 1px solid var(--fx-line); }
.fi-panel-admin .fi-ta-header { padding: 14px 16px; }
.fi-panel-admin .fi-ta-header-heading { font-size: 16px; font-weight: 600; }
.fi-panel-admin .fi-ta-header-toolbar { padding: 10px 12px; }
.fi-panel-admin :is(.fi-ta-table, .fi-ta-content) { background: var(--fx-surface); }
.fi-panel-admin .fi-ta-table { font-size: 13.5px; }
.fi-panel-admin .fi-ta-header-cell {
    padding: 8px 10px;
    border-bottom: 1px solid var(--fx-line);
    background: var(--fx-surface);
}
.fi-panel-admin .fi-ta-header-cell-label { color: var(--fx-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fi-panel-admin .fi-ta-cell { border-color: var(--fx-line); }
.fi-panel-admin .fi-ta-text { padding: 9px 10px; color: var(--fx-fg); }
.fi-panel-admin .fi-ta-text-item-label { font-size: 13.5px; line-height: 1.5; }
.fi-panel-admin .fi-ta-row:hover { background: var(--fx-surface-2); }
.fi-panel-admin .fi-pagination { padding: 10px 14px; font-size: 12.5px; }
.fi-panel-admin .fi-tabs { gap: 2px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--fx-line); border-radius: 0; box-shadow: none; }
.fi-panel-admin .fi-tabs-item { padding: 8px 12px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--fx-muted); }
.fi-panel-admin .fi-tabs-item.fi-active { color: var(--fx-accent); border-bottom-color: var(--fx-accent); background: transparent; }
.fi-panel-admin .fi-modal-window { background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); }
.fi-panel-admin .fi-modal-heading { font-size: 18px; font-weight: 600; }
.fi-panel-admin .fi-dropdown-panel { background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); }
.fi-panel-admin .fi-simple-main { padding: 24px; }
.fi-panel-admin .fi-simple-header-heading { font-size: 20px; }

/* Shared, backend-free building blocks for the real dashboard and CRM overview. */
.fx-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fx-grid { display: grid; gap: 14px; min-width: 0; }
.fx-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fx-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fx-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.fx-card { min-width: 0; padding: 16px; border: 1px solid var(--fx-line); border-radius: var(--fx-radius); background: var(--fx-surface); box-shadow: var(--fx-shadow); }
.fx-card :is(h2, h3) { margin: 0 0 10px; color: var(--fx-fg); line-height: 1.4; }
.fx-card h2 { font-size: 16px; }
.fx-card h3 { font-size: 14px; }
.fx-card a:not(.fi-btn) { color: var(--fx-accent); text-decoration: underline; }
.fx-card-head, .fx-pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 10px; }
.fx-card-head :is(h2, h3) { margin-bottom: 0; }
.fx-eyebrow { color: var(--fx-muted); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.fx-tile .fx-eyebrow { margin-bottom: 4px; }
.fx-big { font-size: 24px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.fx-sub { margin-top: 2px; color: var(--fx-muted); font-size: 12.5px; line-height: 1.5; }
.fx-muted { color: var(--fx-muted); }
.fx-small { font-size: 12.5px; }
.fx-table-wrap { max-width: 100%; overflow-x: auto; }
.fx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fx-table th { padding: 8px 10px; border-bottom: 1px solid var(--fx-line); color: var(--fx-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-align: start; text-transform: uppercase; white-space: nowrap; }
.fx-table td { padding: 9px 10px; border-bottom: 1px solid var(--fx-line); vertical-align: top; }
.fx-table tr:last-child td { border-bottom: 0; }
.fx-table tbody tr:hover td { background: var(--fx-surface-2); }
.fx-table :is(.fx-right, .fx-r) { text-align: end; }
.fx-table a { color: var(--fx-accent); }
.fx-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 1px 9px; border-radius: 999px; color: var(--fx-muted); background: var(--fx-surface-2); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.fx-pill::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.fx-pill.fx-good { color: var(--fx-good); background: var(--fx-good-soft); }
.fx-pill.fx-warn { color: var(--fx-warn); background: var(--fx-warn-soft); }
.fx-pill.fx-bad { color: var(--fx-bad); background: var(--fx-bad-soft); }
.fx-pill.fx-off { color: var(--fx-muted); background: var(--fx-surface-2); }
.fx-pill.fx-info { color: var(--fx-accent); background: var(--fx-accent-soft); }
.fx-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx-list > li { display: flex; align-items: start; gap: 10px; }
.fx-list > li > :last-child { min-width: 0; }
.fx-log { max-width: 100%; margin: 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--fx-line); border-radius: var(--fx-radius); background: var(--fx-surface-2); font: 12px/1.6 var(--fx-mono); white-space: pre; }
.fx-empty { padding-block: 16px; color: var(--fx-muted); font-size: 13px; }
.fx-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 13.5px; }
.fx-kv dt { color: var(--fx-muted); }
.fx-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--fx-line); }
.fx-tabs :is(a, button) { padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--fx-muted); font-size: 14px; font-weight: 500; }
.fx-tabs :is(.fx-active, [aria-current="page"]) { color: var(--fx-accent); border-bottom-color: var(--fx-accent); }
.fx-notice { display: flex; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--fx-line); border-radius: var(--fx-radius); background: var(--fx-surface-2); font-size: 13px; }
.fx-notice.fx-warn { border-color: var(--fx-warn); background: var(--fx-warn-soft); }
.fx-notice.fx-bad { border-color: var(--fx-bad); background: var(--fx-bad-soft); }
.fx-notice.fx-info { border-color: var(--fx-accent); background: var(--fx-accent-soft); }

/* The artifact uses a 210px sidebar, changing to wrapped navigation at 760px. */
@media (min-width: 761px) {
    .fi-panel-admin .fi-sidebar {
        position: sticky;
        inset-block-start: 0;
        display: flex !important;
        width: 210px !important;
        height: 100dvh;
        flex: 0 0 210px;
        transform: none !important;
        transition: none;
        box-shadow: none;
    }
    .fi-panel-admin .fi-main-ctn { width: calc(100% - 210px); }
    .fi-panel-admin :is(.fi-sidebar-close-overlay, .fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn) { display: none !important; }
}

@media (max-width: 760px) {
    .fi-panel-admin .fi-layout { flex-direction: column; }
    .fi-panel-admin .fi-sidebar {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        flex: none;
        order: -1;
        border-inline-end: 0;
        border-bottom: 1px solid var(--fx-line);
        box-shadow: none;
    }
    .fi-panel-admin :is(.fi-sidebar-header, .fi-sidebar-group-button, .fi-sidebar-close-overlay, .fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn) { display: none !important; }
    .fi-panel-admin .fi-sidebar-nav { overflow: visible; padding: 8px; }
    .fi-panel-admin :is(.fi-sidebar-nav-groups, .fi-sidebar-group-items) { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .fi-panel-admin .fi-sidebar-group { display: contents; }
    .fi-panel-admin .fi-sidebar-item-button { min-height: 32px; padding: 5px 9px; }
    .fi-panel-admin .fi-sidebar-item-icon { display: none; }
    .fi-panel-admin .fi-main-ctn { width: 100%; }
    .fi-panel-admin .fi-main { padding-inline: 12px; }
    .fi-panel-admin .fi-page > section { padding-block: 16px; }
    .fi-panel-admin .fi-topbar > nav { padding-inline: 12px; gap: 8px; }
    .fi-panel-admin .fx-session { font-size: 11px; gap: 2px 10px; }
    .fi-panel-admin .fx-session-agent { display: none; }
    .fi-panel-admin .fx-session-operator { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fi-panel-admin .fi-header { align-items: start; }
    .fi-panel-admin .fi-header-heading { font-size: 20px; }
    .fx-card { padding: 12px; }
    .fx-kv { gap: 6px 10px; }
}

@media (max-width: 420px) {
    .fi-panel-admin .fx-session-security { display: none; }
    .fx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-big { font-size: 21px; }
    .fx-table th, .fx-table td { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-admin *, .fi-panel-admin *::before, .fi-panel-admin *::after { scroll-behavior: auto !important; }
}

/* CRM detail follows the artifact's seven tabs and three usage tiles. */
.fi-panel-admin .fx-kv dt { color: var(--fx-muted); }
.fi-panel-admin .fx-kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.fi-panel-admin .fx-related { display: grid; gap: 16px; }
.fi-panel-admin .fi-fo-tabs .fi-fo-tabs-tab { padding: 16px 0 0; }
.fi-panel-admin .fx-detail { display: grid; gap: 18px; }
.fi-panel-admin .fx-detail-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--fx-line); }
.fi-panel-admin .fx-detail-tabs button { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fx-muted); font-size: 14px; cursor: pointer; }
.fi-panel-admin .fx-detail-tabs button.is-active { border-bottom-color: var(--fx-accent); color: var(--fx-accent); font-weight: 600; }
.fi-panel-admin .fx-detail-panel { display: grid; gap: 14px; }
.fi-panel-admin .fx-actions { display: flex; flex-wrap: wrap; gap: 8px; }