/*
 * List pages (every resource: revenues, expenses, users, plans ...) in both panels: one calm column made of
 *   page header  ->  tab bar  ->  filters section  ->  table card.
 * The tabs are left-aligned, clearly visible pill buttons (not a faint line, nor a floating box in the middle of the page), the gaps between the blocks are
 * even and small, the filters header is a slim row with its own icon, and an empty table shows a compact, friendly message.
 * Colours come from the --ynex-* variables of nero-sidebar.css, so light, dark and every colour theme follow.
 */

/* The corner size of the cards of the dashboard template in use (the tabs use the same one). Default Nero: --ynex-radius; the other templates
   set their own (Dashlyra: 1rem) next to their other tokens. */
html.fi { --nf-card-radius: var(--ynex-radius); }

/* ---------------------------------------------------------------- the column */

/* Tabs, filters and table sit closer together: one block, not three islands. */
html.fi div.flex.flex-col:has(> nav.fi-tabs):has(.fi-ta) { row-gap: 0.75rem; }

html.fi .fi-ta { row-gap: 0; }

/* ---------------------------------------------------------------- tabs
 * Status / kind tabs of a list (All | Recurring, Open | Resolved ...), and the tabs of relation managers: clearly visible buttons.
 * Every tab is a bordered pill in dark text that can be seen and read at a glance; the open one is filled with the main colour.
 * The tabs inside a form (languages) and the vertical ones have their own design and are left alone.
 */

html.fi div:not(.fi-fo-tabs):not(.fi-in-tabs):not(.fi-fo-vertical-tabs) > nav.fi-tabs:not(.fi-vtabs-nav) {
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
    padding: 0.125rem 0.125rem 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

html.fi div:not(.fi-fo-tabs):not(.fi-in-tabs):not(.fi-fo-vertical-tabs) > nav.fi-tabs::-webkit-scrollbar { display: none; }

html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item {
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--nf-card-radius);
    border: 1px solid rgb(var(--gray-300));
    background: var(--ynex-card);
    box-shadow: 0 1px 2px rgb(19 32 74 / 0.06);
    font-weight: 600;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item .fi-tabs-item-label { color: var(--ynex-heading); }
html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item .fi-tabs-item-icon { color: var(--ynex-muted); }

html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:hover,
html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:focus-visible {
    background: rgb(var(--primary-500) / 0.1);
    border-color: rgb(var(--primary-500) / 0.55);
}

html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:hover .fi-tabs-item-label,
html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:hover .fi-tabs-item-icon { color: rgb(var(--primary-700)); }

/* The open tab: filled with the main colour, white text. */
html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item.fi-active {
    background: rgb(var(--primary-600));
    border-color: rgb(var(--primary-600));
    box-shadow: 0 2px 8px rgb(var(--primary-600) / 0.35);
}

html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item.fi-active .fi-tabs-item-label,
html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item.fi-active .fi-tabs-item-icon { color: #fff; }

/* The count next to a tab: a small pill (white-on-colour in the open tab). */
html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item .fi-badge {
    min-width: 1.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: calc(var(--nf-card-radius) * 0.6);
    font-size: 0.6875rem;
    font-weight: 700;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: none;
    background: rgb(var(--gray-500) / 0.16);
    color: var(--ynex-heading);
}

html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item.fi-active .fi-badge {
    background: rgb(255 255 255 / 0.26);
    color: #fff;
}

/* Dark mode: a lighter border and surface so the tabs still stand out from the page. */
html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item {
    border-color: rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.05);
    box-shadow: none;
}

html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:hover,
html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:focus-visible {
    background: rgb(var(--primary-400) / 0.16);
    border-color: rgb(var(--primary-400) / 0.6);
}

html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:hover .fi-tabs-item-label,
html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item:hover .fi-tabs-item-icon { color: rgb(var(--primary-300)); }

html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item.fi-active {
    background: rgb(var(--primary-500));
    border-color: rgb(var(--primary-500));
    box-shadow: 0 2px 10px rgb(var(--primary-500) / 0.4);
}

html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item .fi-badge { background: rgb(255 255 255 / 0.14); }
html.fi.dark nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item.fi-active .fi-badge { background: rgb(255 255 255 / 0.26); }

/* ---------------------------------------------------------------- the filters section */

html.fi .nf-ta-filters-card { margin-bottom: 0.75rem; }

html.fi .nf-ta-filters-head { padding: 0.7rem 1.25rem; min-height: 3rem; }

/* A funnel in front of the word, so the row reads as a tool and not as a heading. */
html.fi .nf-ta-filters-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

html.fi .nf-ta-filters-title::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background: var(--ynex-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h18l-7 8.5v5.5l-4 2V13L3 4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h18l-7 8.5v5.5l-4 2V13L3 4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.fi .nf-ta-filters-body { padding: 1rem 1.25rem 1.25rem; }

/* ---------------------------------------------------------------- the table card */

html.fi .fi-ta-ctn:not(.nf-ta-filters-card) { overflow: hidden; }

/* The filters card never clips: the lists of its selects (contact, project, currency ...) open over the table below, however short the
   card is. (It is a .fi-ta-ctn too, so the rule above must not reach it.) */
html.fi .fi-ta-ctn.nf-ta-filters-card { overflow: visible; position: relative; z-index: 20; }

/* Toolbar: per-page on one side, search and columns on the other, a little more air than Filament's default. */
html.fi .fi-ta-ctn .fi-ta-header-toolbar { padding: 0.75rem 1.25rem; gap: 0.75rem; }

html.fi .fi-ta-ctn .fi-ta-header-cell { padding-block: 0.8rem; }

/* Rows: a soft highlight under the pointer. */
html.fi .fi-ta-ctn .fi-ta-row { transition: background-color 0.12s; }
html.fi .fi-ta-ctn .fi-ta-row:hover { background-color: rgb(var(--primary-500) / 0.04); }

/* ---------------------------------------------------------------- empty table */

html.fi .fi-ta-empty-state { padding: 2.75rem 1.5rem; }

html.fi .fi-ta-empty-state-content { gap: 0.25rem; }

html.fi .fi-ta-empty-state-icon-ctn {
    margin-bottom: 0.5rem;
    padding: 0.85rem;
    background: rgb(var(--primary-500) / 0.1);
}

html.fi .fi-ta-empty-state-icon-ctn svg { width: 1.5rem; height: 1.5rem; color: rgb(var(--primary-600)); }
html.fi.dark .fi-ta-empty-state-icon-ctn { background: rgb(var(--primary-400) / 0.16); }
html.fi.dark .fi-ta-empty-state-icon-ctn svg { color: rgb(var(--primary-300)); }

html.fi .fi-ta-empty-state-heading { font-size: 1rem; font-weight: 600; color: var(--ynex-heading); }
html.fi .fi-ta-empty-state-description { font-size: 0.875rem; color: var(--ynex-muted); }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 640px) {
    html.fi nav.fi-tabs:not(.fi-vtabs-nav) > .fi-tabs-item { padding: 0.5rem 0.9rem; }
    html.fi .nf-ta-filters-head { padding-inline: 1rem; }
    html.fi .fi-ta-ctn .fi-ta-header-toolbar { padding-inline: 1rem; }
}

@media print { html.fi nav.fi-tabs { display: none !important; } }

/* A form that offers one language only (multi-language writing switched off): no tab bar with a single tab on it. */
html.fi .fi-fo-tabs.nf-lang-single > .fi-tabs,
html.fi .nf-lang-tabs.nf-lang-single > nav.fi-tabs { display: none !important; }