/* ==========================================================================
   NeroFinance panel look - ported from NeroPOSCashier (resources/css/filament/admin/ynex.css):
   deep-navy sidebar with a lighter "active" pill, white top bar, lavender page, white cards with
   soft shadows, violet accent, an icon tile on the dashboard figures, ten per-user colour themes.

   Presentation only. It overrides Filament 3's classes (fi-*) and adds no behaviour. Logical properties
   (inline-start/end) are used so right-to-left languages (Kurdish, Arabic) mirror correctly.
   Loaded through a panel render hook (see AdminPanelProvider).
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

html.fi {
    --topbar-height: 3.75rem;

    --ynex-navy: #111c43;
    --ynex-navy-hover: rgb(255 255 255 / 0.06);
    --ynex-navy-active: rgb(255 255 255 / 0.1);
    --ynex-navy-text: #b0b9d6;
    --ynex-navy-muted: #7784ad;
    --ynex-navy-line: rgb(255 255 255 / 0.08);

    --ynex-body: #f3f4f9;
    --ynex-card: #ffffff;
    --ynex-line: #e9edf5;
    --ynex-heading: #1b2440;
    --ynex-muted: #6b7695;
    --ynex-shadow: 0 1px 2px rgb(19 32 74 / 0.04), 0 2px 12px rgb(19 32 74 / 0.05);
    --ynex-radius: 0.5rem;
}

html.fi.dark {
    --ynex-navy: #0d1430;
    --ynex-body: #0b1120;
    --ynex-card: #141c31;
    --ynex-line: rgb(255 255 255 / 0.08);
    --ynex-heading: #f1f4fb;
    --ynex-muted: #9aa6c6;
    --ynex-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

html.fi body.fi-body {
    background-color: var(--ynex-body);
    color: var(--ynex-heading);
}

html.fi .fi-simple-layout {
    background-color: var(--ynex-body);
}

/* ------------------------------------------------------------------ sidebar */

html.fi aside.fi-sidebar.fi-main-sidebar {
    background-color: var(--ynex-navy);
    color: var(--ynex-navy-text);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border-inline-end: 0;
}

/* Collapsed icon rail (desktop). */
@media (min-width: 1024px) {
    html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width, 4.5rem);
    }
}

/* The logo cell: same navy as the sidebar, as tall as the white top bar beside it, so the two read as one band. */
html.fi aside.fi-sidebar .fi-sidebar-header {
    height: var(--topbar-height);
    padding-inline: 1rem;
    background-color: var(--ynex-navy);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border-bottom: 1px solid var(--ynex-navy-line);
}

html.fi aside.fi-sidebar .fi-sidebar-header .fi-logo,
html.fi aside.fi-sidebar .fi-sidebar-header a,
html.fi aside.fi-sidebar .fi-sidebar-header div {
    color: #fff;
}

html.fi aside.fi-sidebar .fi-sidebar-header .fi-logo {
    font-weight: 700;
}

html.fi aside.fi-sidebar .fi-sidebar-header .fi-icon-btn {
    color: var(--ynex-navy-text);
    border-radius: var(--ynex-radius);
}

html.fi aside.fi-sidebar .fi-sidebar-header .fi-icon-btn:hover {
    background-color: var(--ynex-navy-hover);
    color: #fff;
}

/* The brand with an uploaded logo: logo + website name side by side; only the logo stays in the collapsed rail. */
.nf-brand { display: flex; align-items: center; gap: 0.6rem; height: 100%; min-width: 0; }
.nf-brand-img { height: 100%; width: auto; max-width: 2.75rem; object-fit: contain; border-radius: 0.5rem; flex: none; }
svg.nf-brand-img { height: 2.25rem; width: 2.25rem; }
.nf-brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .nf-brand-name { display: none; }
.nf-brand-name .nf-name-head { color: var(--nf-head-dark, inherit); }
.nf-brand-name .nf-name-tail { color: var(--nf-tail-dark, #2ee59d); } /* "Spend" green, as in the NeroSpend logo (the sidebar is navy) */

html.fi aside.fi-sidebar .fi-sidebar-nav {
    padding: 0.75rem 0.875rem 1.25rem;
    row-gap: 0.5rem;
    scrollbar-gutter: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
}

html.fi aside.fi-sidebar .fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 0.375rem;
}

/* Breathing room between menu rows. */
html.fi aside.fi-sidebar .fi-sidebar-group,
html.fi aside.fi-sidebar .fi-sidebar-group-items,
html.fi aside.fi-sidebar .fi-sidebar-sub-group-items {
    row-gap: 0.375rem;
}

/* A menu group is a dropdown row: the same size, weight and padding as the menu items under it. */
html.fi aside.fi-sidebar .fi-sidebar-group-button {
    padding: 0.4375rem 0.75rem;
    border-radius: var(--ynex-radius);
    transition: background-color 0.15s;
}

html.fi aside.fi-sidebar .fi-sidebar-group-button:hover {
    background-color: var(--ynex-navy-hover);
}

html.fi aside.fi-sidebar .fi-sidebar-group-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-group-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-group-collapse-button {
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-group-collapse-button:hover {
    background-color: var(--ynex-navy-hover);
    color: #fff;
}

html.fi aside.fi-sidebar .fi-sidebar-item-button {
    column-gap: 0.75rem;
    padding: 0.4375rem 0.75rem;
    border-radius: var(--ynex-radius);
    transition: background-color 0.15s ease, color 0.15s ease;
}

html.fi aside.fi-sidebar .fi-sidebar-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover,
html.fi aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:focus-visible {
    background-color: var(--ynex-navy-hover);
}

html.fi aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html.fi aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #fff;
}

/* The page you are on: a lighter navy pill, white text. */
html.fi aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
html.fi aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button:hover {
    background-color: var(--ynex-navy-active);
}

html.fi aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html.fi aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #fff;
}

html.fi aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    font-weight: 600;
}

/* Tree line + dot for icon-less (grouped) items. */
html.fi aside.fi-sidebar .fi-sidebar-item-grouped-border .w-px {
    background-color: var(--ynex-navy-line);
}

html.fi aside.fi-sidebar .fi-sidebar-item-grouped-border .rounded-full {
    background-color: var(--ynex-navy-muted);
}

html.fi aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-grouped-border .rounded-full {
    background-color: #fff;
}

/* Collapsed rail: centred square buttons. */
@media (min-width: 1024px) {
    html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button,
    html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group > div > button {
        height: 2.75rem;
        padding: 0;
    }

    html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        padding-inline: 0;
    }
}

/* Dropdown trigger used for groups in the collapsed rail. */
html.fi aside.fi-sidebar .fi-sidebar-group .fi-dropdown-trigger button {
    border-radius: var(--ynex-radius);
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-group .fi-dropdown-trigger button:hover {
    background-color: var(--ynex-navy-hover);
}

html.fi aside.fi-sidebar .fi-sidebar-group .fi-dropdown-trigger button svg {
    color: var(--ynex-navy-text);
}

html.fi aside.fi-sidebar .fi-sidebar-group.fi-active .fi-dropdown-trigger button {
    background-color: var(--ynex-navy-active);
}

html.fi aside.fi-sidebar .fi-sidebar-group.fi-active .fi-dropdown-trigger button svg {
    color: #fff;
}

/* ------------------------------------------------------------------ top bar */

/* The top bar's menus (language, currency, profile ...) open out of it, so it must sit above the page: the filters card of the tables
   (nero-lists.css) has z-index 20 too and, coming later, was painted over the open menu. 25 keeps it under the mobile sidebar and its
   overlay (30) and the modals (40+). */
html.fi .fi-topbar { z-index: 25; }

html.fi .fi-topbar > nav {
    height: var(--topbar-height);
    background-color: var(--ynex-card);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border-bottom: 1px solid var(--ynex-line);
}

/* Keep the mobile sidebar toggles first, before the business switcher. */
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    order: -1;
}

html.fi .fi-topbar .fi-icon-btn {
    border-radius: var(--ynex-radius);
}

html.fi .fi-topbar .fi-icon-btn:hover {
    background-color: var(--ynex-body);
}

html.fi .fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px var(--ynex-line);
}

/* The profile picture is a full circle (the business logo keeps its rounded square). */
html.fi .fi-topbar .fi-user-avatar {
    border-radius: 9999px;
    object-fit: cover;
}

/* ------------------------------------------------------------------ tenant switcher (topbar) */

/* The open business's logo: a full circle with a thin border (the general avatar ring above is thicker). */
html.fi .fi-topbar .fi-tenant-avatar {
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--ynex-line);
}

.nf-tenant-switcher .fi-tenant-menu-trigger {
    width: auto;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
    border: 0;
    border-radius: var(--ynex-radius);
}

.nf-tenant-switcher-text {
    display: grid;
    justify-items: start;
    line-height: 1.2;
    text-align: start;
}

.nf-tenant-switcher-label {
    font-size: 0.6875rem;
    opacity: 0.6;
}

.nf-tenant-switcher-name {
    max-width: 14rem;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ page header */

html.fi .fi-header-heading {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--ynex-heading);
}

html.fi .fi-header-subheading {
    font-size: 0.875rem;
    color: var(--ynex-muted);
}

/* Dashboard header: title + period selector on one row. */
/* The page puts 2rem between its blocks; the header and the widgets under it belong together, so they sit closer. */
html.fi section:has(> .nf-dashboard-header) {
    row-gap: 0.75rem;
}

.nf-dashboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nf-period-filter .fi-fo-split {
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.75rem;
}

.nf-period-filter .fi-fo-split > * {
    flex: 0 0 auto;
}

/* Fixed width so the selector doesn't jump as its label changes. */
.nf-period-filter .fi-fo-select {
    min-width: 11rem;
}

/* ------------------------------------------------------------------ cards */

html.fi .fi-section,
html.fi .fi-ta-ctn,
html.fi .fi-wi-stats-overview-stat,
html.fi .fi-simple-main,
html.fi .fi-modal-window,
html.fi .fi-fo-tabs {
    background-color: var(--ynex-card);
    border-radius: var(--ynex-radius);
    box-shadow: var(--ynex-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

html.fi .fi-section,
html.fi .fi-ta-ctn,
html.fi .fi-wi-stats-overview-stat,
html.fi .fi-modal-window {
    border: 1px solid var(--ynex-line);
}

/* The language tabs inside a form (Name / Tagline in English, Kurdish ...) are part of the form, not a card of their own:
   no background, shadow or border, and the fields sit below the language switch with room around them. */
html.fi .fi-fo-tabs.nf-lang-tabs {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* The language picker (a select, not a bar of tabs: there can be many languages) sits at the end of the row, above the fields. */
html.fi .fi-fo-tabs.nf-lang-tabs > .nf-lang-picker {
    align-self: flex-end;
    width: 11rem;
    max-width: 100%;
}

html.fi .fi-fo-tabs.nf-lang-tabs .fi-fo-tabs-tab:not(.invisible) {
    padding: 1rem 0 0.25rem;
}

/* The language picker: a soft rounded button that opens a soft list (not the browser's select). */
html.fi .nf-lang-picker { position: relative; }
html.fi .fi-section.nf-section-lang .fi-fo-tabs.nf-lang-tabs > .nf-lang-picker { position: absolute; }

html.fi .nf-lp-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(var(--primary-500), 0.22);
    background-color: rgba(var(--primary-500), 0.07);
    color: rgb(var(--primary-700));
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

html.fi .nf-lp-trigger:hover,
html.fi .nf-lp-trigger[aria-expanded='true'] {
    background-color: rgba(var(--primary-500), 0.13);
    border-color: rgba(var(--primary-500), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--primary-500), 0.1);
}

html.fi .nf-lp-icon, html.fi .nf-lp-chevron { width: 1.1rem; height: 1.1rem; flex: none; opacity: 0.85; }
html.fi .nf-lp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
html.fi .nf-lp-chevron { transition: transform 0.18s; }
html.fi .nf-lp-chevron.is-open { transform: rotate(180deg); }

html.fi .nf-lp-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    inset-inline-end: 0;
    min-width: 100%;
    width: max-content;
    max-width: 16rem;
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: 0.875rem;
    background-color: #fff;
    border: 1px solid rgba(var(--gray-500), 0.16);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
    overscroll-behavior: contain;
}

html.fi .nf-lp-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.8125rem;
    color: rgb(var(--gray-700));
    text-align: start;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

html.fi .nf-lp-item:hover { background-color: rgba(var(--gray-500), 0.1); }
html.fi .nf-lp-item.is-active { background-color: rgba(var(--primary-500), 0.12); color: rgb(var(--primary-700)); font-weight: 600; }
html.fi .nf-lp-name { flex: 1; min-width: 0; }

html.fi.dark .nf-lp-trigger { color: rgb(var(--primary-300)); border-color: rgba(var(--primary-400), 0.28); background-color: rgba(var(--primary-400), 0.1); }
html.fi.dark .nf-lp-trigger:hover, html.fi.dark .nf-lp-trigger[aria-expanded='true'] { background-color: rgba(var(--primary-400), 0.18); border-color: rgba(var(--primary-400), 0.45); box-shadow: 0 0 0 3px rgba(var(--primary-400), 0.14); }
html.fi.dark .nf-lp-panel { background-color: rgb(var(--gray-900)); border-color: rgb(255 255 255 / 0.1); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55); }
html.fi.dark .nf-lp-item { color: rgb(var(--gray-200)); }
html.fi.dark .nf-lp-item:hover { background-color: rgb(255 255 255 / 0.07); }
html.fi.dark .nf-lp-item.is-active { background-color: rgba(var(--primary-400), 0.18); color: rgb(var(--primary-300)); }

/* Very thin, light scrollbars for the picker and the language menu of the top bar. */
html.fi .nf-lp-panel,
html.fi .fi-dropdown-panel.nf-lang-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gray-500), 0.28) transparent;
}

html.fi .nf-lp-panel::-webkit-scrollbar,
html.fi .fi-dropdown-panel.nf-lang-panel::-webkit-scrollbar { width: 4px; height: 4px; }
html.fi .nf-lp-panel::-webkit-scrollbar-track,
html.fi .fi-dropdown-panel.nf-lang-panel::-webkit-scrollbar-track { background: transparent; }
html.fi .nf-lp-panel::-webkit-scrollbar-thumb,
html.fi .fi-dropdown-panel.nf-lang-panel::-webkit-scrollbar-thumb { background: rgba(var(--gray-500), 0.28); border-radius: 999px; }
html.fi .nf-lp-panel::-webkit-scrollbar-thumb:hover,
html.fi .fi-dropdown-panel.nf-lang-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--gray-500), 0.5); }

/* The "More" menu of a table row (three dots + the word): ONE button. The dots and the word share a colour and a size, and the whole
   button (not just the word) reacts to the pointer; it is a soft outlined button so it reads as a single control. */
html.fi .fi-ta-actions .fi-link.nf-more-btn {
    gap: 0.25rem;
    padding: 0.25rem 0.625rem 0.25rem 0.375rem;
    border: 1px solid rgb(var(--gray-300));
    border-radius: 0.5rem;
    color: rgb(var(--gray-700));
    transition: background-color 0.15s, border-color 0.15s;
}

html.fi .fi-ta-actions .fi-link.nf-more-btn .fi-link-icon,
html.fi .fi-ta-actions .fi-link.nf-more-btn > span {
    color: inherit;
    width: auto;
}

html.fi .fi-ta-actions .fi-link.nf-more-btn .fi-link-icon { width: 1.125rem; height: 1.125rem; }
html.fi .fi-ta-actions .fi-link.nf-more-btn > span { font-size: 0.8125rem; text-decoration: none; }

html.fi .fi-ta-actions .fi-link.nf-more-btn:hover,
html.fi .fi-ta-actions .fi-link.nf-more-btn:focus-visible,
html.fi .fi-ta-actions .fi-dropdown-trigger[aria-expanded='true'] .fi-link.nf-more-btn {
    background-color: rgba(var(--gray-500), 0.1);
    border-color: rgb(var(--gray-400));
}

html.dark.fi .fi-ta-actions .fi-link.nf-more-btn,
html.fi.dark .fi-ta-actions .fi-link.nf-more-btn {
    border-color: rgb(255 255 255 / 0.14);
    color: rgb(var(--gray-200));
}

html.dark.fi .fi-ta-actions .fi-link.nf-more-btn:hover,
html.fi.dark .fi-ta-actions .fi-link.nf-more-btn:hover,
html.dark.fi .fi-ta-actions .fi-link.nf-more-btn:focus-visible,
html.fi.dark .fi-ta-actions .fi-link.nf-more-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.28);
}

/* A section whose language picker sits in its header, at the end of the title row (add the class "nf-section-lang" to the Section):
   the picker leaves the form body, so the fields start right under the header. */
html.fi .fi-section.nf-section-lang {
    position: relative;
}

html.fi .fi-section.nf-section-lang .fi-fo-tabs.nf-lang-tabs > .nf-lang-picker {
    position: absolute;
    z-index: 1;
    top: 0.5rem;
    inset-inline-end: 1.5rem;
    width: 11rem;
    margin: 0 !important;
}

html.fi .fi-section.nf-section-lang .fi-fo-tabs.nf-lang-tabs .fi-fo-tabs-tab:not(.invisible) {
    padding-top: 0;
}

/* On a phone the header has no room for them: they go back above the fields. */
@media (max-width: 40rem) {
    html.fi .fi-section.nf-section-lang .fi-fo-tabs.nf-lang-tabs > .nf-lang-picker {
        position: static;
        width: 100%;
        margin: 0 0 0.75rem !important;
    }
}

html.fi .fi-section-content-ctn {
    border-color: var(--ynex-line);
}

/* Card titles get a small accent bar on the start side: "| Earnings". */
html.fi .fi-section-header-heading,
html.fi .fi-ta-header-heading {
    position: relative;
    padding-inline-start: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ynex-heading);
}

html.fi .fi-section-header-heading::before,
html.fi .fi-ta-header-heading::before {
    content: '';
    position: absolute;
    inset-block: 0.15em;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 2px;
    background-color: rgb(var(--primary-300));
}

html.fi .fi-section-header-description {
    font-size: 0.8125rem;
    color: var(--ynex-muted);
}

html.fi .fi-ta-ctn .fi-ta-header,
html.fi .fi-ta-ctn .fi-ta-header-toolbar,
html.fi .fi-ta-ctn .fi-ta-filters-above-content-ctn {
    border-color: var(--ynex-line);
}

/* ------------------------------------------------------------------ dashboard
 * Stat cards: a small icon tile next to the label, the figure, a coloured trend line, and a sparkline along the bottom edge.
 * Below them the cash-flow chart (two thirds) and the recent transactions (one third); alerts are small cards with a tile.
 */

.nf-dashboard-header .nf-dashboard-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--ynex-muted);
}

html.fi .fi-wi-stats-overview-stat {
    --tile-bg: rgb(var(--primary-100));
    --tile-fg: rgb(var(--primary-600));
    padding: 1.25rem 1.25rem 3.25rem;
    overflow: hidden;
}

html.fi.dark .fi-wi-stats-overview-stat {
    --tile-bg: rgb(var(--primary-500) / 0.18);
    --tile-fg: rgb(var(--primary-400));
}

/* The red tile of the "money out" card. */
html.fi .fi-wi-stats-overview-stat[data-stat="money_out"] {
    --tile-bg: rgb(var(--danger-100));
    --tile-fg: rgb(var(--danger-600));
}

html.fi.dark .fi-wi-stats-overview-stat[data-stat="money_out"] {
    --tile-bg: rgb(var(--danger-500) / 0.18);
    --tile-fg: rgb(var(--danger-400));
}

html.fi .fi-wi-stats-overview-stat > .grid {
    row-gap: 0.5rem;
}

/* Label row: the label, then the icon tile right after it. */
html.fi .fi-wi-stats-overview-stat > .grid > div:first-child {
    gap: 0.625rem;
}

html.fi .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    order: 1;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ynex-muted);
}

html.fi .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    order: 2;
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: var(--tile-bg);
    color: var(--tile-fg);
}

html.fi .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--ynex-heading);
}

html.fi .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    font-weight: 600;
}

html.fi .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description-icon {
    width: 1rem;
    height: 1rem;
}

/* A taller sparkline hugging the bottom edge. */
html.fi .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart canvas {
    height: 2.75rem;
}

/* ---- recent transactions */

.nf-recent {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nf-recent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-bottom: 1px dashed var(--ynex-line);
}

.nf-recent-item:first-child {
    padding-top: 0;
}

.nf-recent-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.nf-recent-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
}

.nf-recent-icon.is-in {
    background-color: rgb(var(--success-100));
    color: rgb(var(--success-600));
}

.nf-recent-icon.is-out {
    background-color: rgb(var(--danger-100));
    color: rgb(var(--danger-600));
}

html.fi.dark .nf-recent-icon.is-in {
    background-color: rgb(var(--success-500) / 0.18);
    color: rgb(var(--success-400));
}

html.fi.dark .nf-recent-icon.is-out {
    background-color: rgb(var(--danger-500) / 0.18);
    color: rgb(var(--danger-400));
}

.nf-recent-icon-svg {
    width: 1.125rem;
    height: 1.125rem;
}

.nf-recent-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.nf-recent-title {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ynex-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-recent-meta {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--ynex-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-recent-amount {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nf-recent-amount.is-in {
    color: rgb(var(--success-600));
}

.nf-recent-amount.is-out {
    color: rgb(var(--danger-600));
}

html.fi.dark .nf-recent-amount.is-in {
    color: rgb(var(--success-400));
}

html.fi.dark .nf-recent-amount.is-out {
    color: rgb(var(--danger-400));
}

.nf-recent-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ynex-muted);
}

/* ---- alerts: small cards with a coloured tile */

.nf-alerts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.75rem;
}

.nf-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ynex-line);
    border-radius: var(--ynex-radius);
    background-color: var(--ynex-card);
    box-shadow: var(--ynex-shadow);
}

.nf-alert-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background-color: rgb(var(--alert-100));
    color: rgb(var(--alert-600));
}

html.fi.dark .nf-alert-icon {
    background-color: rgb(var(--alert-500) / 0.18);
    color: rgb(var(--alert-400));
}

.nf-alert-primary {
    --alert-100: var(--primary-100);
    --alert-400: var(--primary-400);
    --alert-500: var(--primary-500);
    --alert-600: var(--primary-600);
}

.nf-alert-warning {
    --alert-100: var(--warning-100);
    --alert-400: var(--warning-400);
    --alert-500: var(--warning-500);
    --alert-600: var(--warning-600);
}

.nf-alert-danger {
    --alert-100: var(--danger-100);
    --alert-400: var(--danger-400);
    --alert-500: var(--danger-500);
    --alert-600: var(--danger-600);
}

.nf-alert-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.nf-alert-text {
    min-width: 0;
}

.nf-alert-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ynex-heading);
}

.nf-alert-body {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ynex-muted);
}

/* ------------------------------------------------------------------ tables */

html.fi .fi-ta-header-cell {
    background-color: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ynex-heading);
}

html.fi .fi-ta-header-cell .fi-ta-header-cell-label,
html.fi .fi-ta-header-cell-sort-button {
    font-weight: 600;
    color: var(--ynex-heading);
}

html.fi .fi-ta-table thead,
html.fi .fi-ta-table tr,
html.fi .fi-ta-row {
    border-color: var(--ynex-line);
}

html.fi .fi-ta-content,
html.fi .fi-ta-content-ctn {
    border-color: var(--ynex-line);
}

html.fi .fi-ta-table thead tr {
    background-color: transparent;
}

html.fi .fi-ta-cell {
    font-size: 0.8125rem;
}

html.fi .fi-ta-row:hover {
    background-color: rgb(var(--primary-500) / 0.035);
}

html.fi .fi-badge {
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------ forms, buttons, dropdowns */

html.fi .fi-input-wrp {
    border-radius: 0.375rem;
}

html.fi .fi-btn {
    border-radius: 0.375rem;
    font-weight: 500;
}

html.fi .fi-dropdown-panel {
    background-color: var(--ynex-card);
    border-radius: var(--ynex-radius);
    box-shadow: 0 8px 30px rgb(19 32 74 / 0.12);
}

html.fi .fi-modal-window {
    border: 1px solid var(--ynex-line);
}

/* Every modal and slide-over (confirmations, forms, the exchange-rate and print windows ...) blurs the page behind it.
   The strength is --nf-modal-blur; the same value is used by the System Version overlay. */
html.fi {
    --nf-modal-blur: 10px;
}

html.fi .fi-modal-close-overlay {
    -webkit-backdrop-filter: blur(var(--nf-modal-blur));
    backdrop-filter: blur(var(--nf-modal-blur));
}

/* ------------------------------------------------------------------ sign-in card */

html.fi .fi-simple-main {
    border: 1px solid var(--ynex-line);
    border-radius: 0.75rem;
}

/* ------------------------------------------------------------------ colour theme picker (profile menu) */

.nf-theme-picker {
    padding: 0.5rem 0.75rem;
}

.nf-theme-picker-title {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ynex-muted);
}

/* One small circle per theme, filled with the theme's primary colour. */
.nf-theme-picker-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nf-theme-swatch {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: var(--swatch);
    box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.35);
    color: #fff;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.nf-theme-swatch:hover {
    transform: scale(1.12);
}

.nf-theme-swatch:focus-visible {
    outline: 2px solid var(--swatch);
    outline-offset: 2px;
}

/* The chosen theme: a ring in its own colour, separated from the circle by a gap, and a tick. */
.nf-theme-swatch.is-active {
    box-shadow: 0 0 0 2px var(--ynex-card), 0 0 0 4px var(--swatch);
}

.nf-theme-swatch-check {
    width: 0.8125rem;
    height: 0.8125rem;
    opacity: 0;
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.45));
}

.nf-theme-swatch.is-active .nf-theme-swatch-check {
    opacity: 1;
}

/* ------------------------------------------------------------------ scroll bars: slim, rounded, in the accent colour */

html.fi {
    --scrollbar-thumb: rgb(var(--primary-500) / 0.45);
    --scrollbar-thumb-hover: rgb(var(--primary-500) / 0.8);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb, rgb(132 90 223 / 0.45));
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-hover, rgb(132 90 223 / 0.8));
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* ------------------------------------------------------------------ mouse behaviour: the arrow is normal, the hand is for what can be clicked */

html.fi body {
    cursor: default;
}

html.fi :is(button, a[href], summary, select, label[for], [role='button'], [role='tab'], [role='menuitem'], [type='button'], [type='submit'], [type='checkbox'], [type='radio'], .fi-btn, .fi-icon-btn, .fi-link, .fi-dropdown-list-item, .fi-sidebar-item-button, .fi-sidebar-group-button, .fi-tabs-item) {
    cursor: pointer;
}

html.fi body :is(:disabled, [disabled], [aria-disabled='true']) {
    cursor: not-allowed;
}

html.fi :is(input:not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='range'], [type='color'], [type='file']), textarea, [contenteditable='true']) {
    cursor: text;
}

/* Clicking these never selects their words. */
html.fi :is(button, summary, [role='button'], [role='tab'], .fi-btn, .fi-icon-btn, .fi-badge, .fi-dropdown-list-item, .fi-sidebar, .fi-topbar, .fi-tabs, .fi-wi-stats-overview-stat) {
    -webkit-user-select: none;
    user-select: none;
}

html.fi :is(input, textarea, select, [contenteditable='true']) {
    -webkit-user-select: text;
    user-select: text;
}

html.fi :is(button, a, [role='button']) {
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ colour themes
 * The themes themselves (their ten colours each) live in the database and are managed by super admins under System -> Themes.
 * Their CSS - one block per theme, picked by data-theme on <html> - is printed into the page head by
 * resources/views/filament/components/theme-attribute.blade.php (App\Support\Theme\ThemeStyles). The tokens at the top of this
 * file are the built-in violet look, used until a theme is applied.
 */

/* ------------------------------------------------------------------ tables: "per page" in the header, and the pager
 * The per-page select sits in every table's header toolbar (resources/views/filament/hooks/table-per-page.blade.php);
 * the bottom bar is "Showing 1 to 10 of 83 results" on one side and "< Previous 1 2 3 4 5 Next >" on the other
 * (resources/views/vendor/filament/components/pagination/index.blade.php).
 */

.nf-per-page {
    display: flex;
    flex: none;
}

.nf-per-page .fi-input-wrp {
    width: auto;
}

.nf-per-page select {
    padding-block: 0.3125rem;
    font-size: 0.8125rem;
}

.nf-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.nf-pagination-overview {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ynex-muted);
}

.nf-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-inline-start: auto;
}

.nf-pager-item button,
.nf-pager-gap span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 2.125rem;
    height: 2.125rem;
    padding-inline: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ynex-heading);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nf-pager-gap span {
    color: var(--ynex-muted);
}

/* "< Previous" and "Next >" are outlined; the page numbers are plain until hovered. */
.nf-pager-step button,
.nf-pager-edge button {
    padding-inline: 0.75rem;
    border-color: var(--ynex-line);
    background-color: var(--ynex-card);
}

.nf-pager-edge button {
    padding-inline: 0.5rem;
}

.nf-pager-item button:hover:not(:disabled) {
    background-color: rgb(var(--primary-500) / 0.1);
    color: rgb(var(--primary-600));
}

html.fi.dark .nf-pager-item button:hover:not(:disabled) {
    color: rgb(var(--primary-400));
}

.nf-pager-item button:focus-visible {
    outline: 2px solid rgb(var(--primary-500));
    outline-offset: 1px;
}

/* The page you are on: the accent colour, white text. */
.nf-pager-item.is-active button,
.nf-pager-item.is-active button:hover {
    border-color: transparent;
    background-color: rgb(var(--primary-600));
    color: #fff;
}

.nf-pager-item button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.nf-pager-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

@media (max-width: 640px) {
    .nf-pagination {
        justify-content: center;
    }

    .nf-pager {
        margin-inline-start: 0;
        justify-content: center;
    }
}

/* Top bar "Exchange rate", currency and language: plain items, no button chrome (no fill, no border). Only the dropdown arrow
   marks a menu; hover and open just tint the text in the user's theme colour. */
html.fi .nf-rates-trigger,
html.fi .nf-topbar-select {
    gap: 0.375rem;
    padding: 0.4375rem 0.5rem;
    border: 0;
    border-radius: var(--ynex-radius);
    background: transparent;
    box-shadow: none;
    color: var(--ynex-heading);
    white-space: nowrap;
}

/* .fi-topbar in the selector: the generic ".fi-topbar .fi-icon-btn:hover" rule would otherwise paint the hover pale. */
html.fi .fi-topbar .nf-rates-trigger:hover,
html.fi .fi-topbar .nf-rates-trigger:focus-visible,
html.fi .fi-topbar .nf-topbar-select:hover,
html.fi .fi-topbar .nf-topbar-select:focus-visible,
html.fi .fi-topbar [aria-expanded='true'] > .nf-topbar-select {
    background: transparent;
    color: rgb(var(--primary-600));
}

html.fi .nf-topbar-select > svg:first-child,
html.fi .nf-topbar-select-arrow {
    color: inherit;
}

html.fi .nf-topbar-select-arrow {
    margin-inline-start: 0.125rem;
    transition: transform 0.15s ease;
}

html.fi [aria-expanded='true'] > .nf-topbar-select .nf-topbar-select-arrow {
    transform: rotate(180deg);
}

html.fi.dark .nf-rates-trigger,
html.fi.dark .nf-topbar-select {
    color: var(--ynex-heading);
}

html.fi.dark .fi-topbar .nf-rates-trigger:hover,
html.fi.dark .fi-topbar .nf-rates-trigger:focus-visible,
html.fi.dark .fi-topbar .nf-topbar-select:hover,
html.fi.dark .fi-topbar .nf-topbar-select:focus-visible,
html.fi.dark .fi-topbar [aria-expanded='true'] > .nf-topbar-select {
    background: transparent;
    color: rgb(var(--primary-400));
}

/* ------------------------------------------------------------------ current plan (profile menu) */

/* A small card instead of a plain menu row: accent-tinted, plan name in front, opens the My plan page. */
html.fi .fi-user-menu .fi-dropdown-panel {
    min-width: 15rem;
}

.nf-plan-menu {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.375rem 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(var(--primary-500), 0.25);
    border-radius: 0.75rem;
    background: rgba(var(--primary-500), 0.1);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nf-plan-menu:hover,
.nf-plan-menu:focus-visible {
    border-color: rgba(var(--primary-500), 0.6);
    background-color: rgba(var(--primary-500), 0.08);
    outline: none;
}

.nf-plan-menu-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    color: #fff;
    background: rgb(var(--primary-600));
}

.nf-plan-menu-text {
    flex: 1;
    min-width: 0;
    display: grid;
    line-height: 1.25;
    text-align: start;
}

.nf-plan-menu-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ynex-muted);
}

.nf-plan-menu-name {
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ynex-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-plan-menu-detail {
    font-size: 0.75rem;
    color: var(--ynex-muted);
}

/* A small "active" dot after the label. */
.nf-plan-menu-dot {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-inline-start: 0.375rem;
    border-radius: 50%;
    background: rgb(var(--primary-500));
    box-shadow: 0 0 0 3px rgba(var(--primary-500), 0.2);
    vertical-align: middle;
}

.nf-plan-menu-arrow {
    flex: none;
    color: var(--ynex-muted);
}

[dir='rtl'] .nf-plan-menu-arrow {
    transform: scaleX(-1);
}

/* A dropdown panel as wide as its longest line (the currency list), never wider than the screen. */
html.fi .fi-dropdown-panel.nf-dropdown-fit {
    width: max-content !important;
    min-width: 12rem;
    max-width: calc(100vw - 2rem) !important;
}


/* The profile menu is as wide as its longest entry (in any language), so no entry is cut with "...". */
html.fi .fi-dropdown-panel.nf-user-panel {
    width: max-content;
    min-width: 15rem;
    max-width: calc(100vw - 1rem) !important;
}

html.fi .fi-dropdown-panel.nf-user-panel .fi-dropdown-list-item-label {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* The language menu is as wide as its longest language name, so every name stays on one line. */
html.fi .fi-dropdown-panel.nf-lang-panel {
    width: max-content;
    min-width: 12rem;
    max-width: calc(100vw - 1rem) !important;
}

html.fi .fi-dropdown-panel.nf-lang-panel .fi-dropdown-list-item-label {
    white-space: nowrap;
}

/* The language list is the same dropdown as the language picker of the forms (.nf-lp-panel): one column of rounded rows with the flag and the
   name, a thin scrollbar when there are more languages than fit, the chosen one tinted. */
html.fi .fi-dropdown-panel.nf-lang-panel {
    max-height: min(26rem, calc(100vh - 5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0.875rem;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
}

html.fi .fi-dropdown-panel.nf-lang-panel .fi-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.35rem;
}

html.fi .fi-dropdown-panel.nf-lang-panel .fi-dropdown-list-item {
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
}

html.fi .fi-dropdown-panel.nf-lang-panel .fi-dropdown-list-item-label {
    font-size: 0.8125rem;
}

html.fi.dark .fi-dropdown-panel.nf-lang-panel { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55); }

/* The chosen entry of a top-bar dropdown (current language / currency): a light tint of the theme colour. */
html.fi .fi-dropdown-list-item.nf-dropdown-active {
    background-color: rgba(var(--primary-500), 0.12);
}

html.fi .fi-dropdown-list-item.nf-dropdown-active .fi-dropdown-list-item-label,
html.fi .fi-dropdown-list-item.nf-dropdown-active .fi-dropdown-list-item-icon {
    color: rgb(var(--primary-700));
    font-weight: 600;
}

html.fi.dark .fi-dropdown-list-item.nf-dropdown-active {
    background-color: rgba(var(--primary-400), 0.16);
}

html.fi.dark .fi-dropdown-list-item.nf-dropdown-active .fi-dropdown-list-item-label,
html.fi.dark .fi-dropdown-list-item.nf-dropdown-active .fi-dropdown-list-item-icon {
    color: rgb(var(--primary-300));
}

/* The resource's own icon in front of its page heading (the same icon as in the sidebar). */
html.fi .nf-heading-icon {
    display: inline-flex;
    vertical-align: -0.2em;
    margin-inline-end: 0.5rem;
    color: rgb(var(--primary-600));
}

html.fi.dark .nf-heading-icon {
    color: rgb(var(--primary-400));
}

html.fi .nf-heading-icon-svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ------------------------------------------------------------------ user menu with the name (Top bar settings) */

/* Avatar + name + arrow, plain like the other top bar items (no fill, no border); hover only tints the text. */
html.fi .nf-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 0.1875rem 0.5rem 0.1875rem 0.1875rem;
    padding-inline: 0.1875rem 0.5rem;
    border: 0;
    border-radius: var(--ynex-radius);
    background: transparent;
    color: var(--ynex-heading);
}

html.fi .nf-user-trigger:hover,
html.fi .nf-user-trigger:focus-visible,
html.fi [aria-expanded='true'] > .nf-user-trigger {
    color: rgb(var(--primary-600));
}

html.fi.dark .nf-user-trigger:hover,
html.fi.dark .nf-user-trigger:focus-visible,
html.fi.dark [aria-expanded='true'] > .nf-user-trigger {
    color: rgb(var(--primary-400));
}

html.fi [aria-expanded='true'] > .nf-user-trigger .nf-user-trigger-arrow {
    transform: rotate(180deg);
}

html.fi .nf-user-trigger .fi-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px; /* a full circle */
    object-fit: cover;
    box-shadow: none;
}

.nf-user-trigger-name {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-user-trigger-arrow {
    flex: none;
    color: inherit;
    transition: transform 0.15s ease;
}

/* No room on a phone: the avatar alone. */
@media (max-width: 640px) {
    .nf-user-trigger-name,
    .nf-user-trigger-arrow {
        display: none;
    }

    html.fi .nf-user-trigger {
        padding: 0;
        border: 0;
        background: transparent;
    }
}

/* The items of an open dropdown (Reports ...): set in from the start edge so the list reads as belonging to its parent. */
html.fi aside.fi-sidebar .fi-sidebar-group:not([data-group-label=""]) > .fi-sidebar-group-items {
    margin-inline-start: 1rem;
    margin-top: 0.25rem;
    padding: 0.375rem;
    border-radius: var(--ynex-radius);
}

/* The collapsed rail has no room for the inset. */
@media (min-width: 1024px) {
    html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group > .fi-sidebar-group-items {
        margin-inline-start: 0;
        padding: 0;
        background-color: transparent;
    }
}

/* Items of a dropdown: just the dot, without the vertical tree line joining them. */
html.fi aside.fi-sidebar .fi-sidebar-item-grouped-border .w-px {
    display: none;
}

/* The header-less group that only places Settings after the Reports dropdown: it looks like part of the main menu. */
html.fi aside.fi-sidebar .fi-sidebar-group[data-group-label="sidebar-tail"] > .fi-sidebar-group-button {
    display: none;
}

html.fi aside.fi-sidebar .fi-sidebar-group[data-group-label="sidebar-tail"] > .fi-sidebar-group-items {
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------ edit page split (Business) */

/* Details form: one third; the related tables (Members, Invitations): two thirds. One column on small screens. */
.nf-edit-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .nf-edit-split.has-related {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

/* Edit Business: one column at every width - the form, then Members, then Invitations, each full width. */
@media (min-width: 1024px) {
    .nf-edit-split.has-related.is-stacked {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Not on Edit Business (is-stacked): its form fills the page whether or not there are related tables (clients have none). */
.nf-edit-split:not(.has-related):not(.is-stacked) > :first-child {
    max-width: 42rem;
}

.nf-edit-related {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.5rem;
}

/* ------------------------------------------------------------------ printing */

/* Paper is narrower than the desktop breakpoint, so Filament shows its mobile sidebar overlay (a fixed, full-page layer) - and
   prints it on top of everything, which gave a blank page. Nothing in the panel's chrome belongs on paper. */
@media print {
    .fi-sidebar-close-overlay, .fi-sidebar, .fi-topbar { display: none !important; }
}

/* Top-bar language and currency menus: a small gap between the items, so the hover / chosen highlights of neighbours never touch. */
html.fi .fi-dropdown-panel:is(.nf-lang-panel, .nf-dropdown-fit) .fi-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem;
}

html.fi .fi-dropdown-panel:is(.nf-lang-panel, .nf-dropdown-fit) .fi-dropdown-list-item {
    border-radius: 0.5rem;
}

/* ------------------------------------------------------------------ table filters section */

/* Every table's filters are a section card of their own above the table card (resources/views/vendor/filament-tables/index.blade.php).
   The header is plain text - "Filters", the number of active filters, "Reset" - not a button, and a click anywhere on it opens or
   closes the fields beneath (closed until opened). */
html.fi .nf-ta-filters-card {
    margin-bottom: 1rem;
    /* Filament's container clips its content; the option lists of the Client / Project / Currency selects must open over the table below. */
    overflow: visible;
    position: relative;
    z-index: 5;
}

html.fi .nf-ta-filters.is-open .nf-ta-filters-head {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

html.fi .nf-ta-filters-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    cursor: pointer;
    user-select: none;
    border-radius: inherit;
    transition: background-color 0.15s;
}

html.fi .nf-ta-filters-head:hover { background-color: rgba(var(--gray-500), 0.06); }
html.fi .nf-ta-filters-head:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: -2px; }

html.fi .nf-ta-filters-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ynex-heading);
}

/* How many filters are on. */
html.fi .nf-ta-filters-count {
    min-width: 1.25rem;
    padding: 0.0625rem 0.4rem;
    border-radius: 999px;
    background-color: rgba(var(--primary-500), 0.14);
    color: rgb(var(--primary-600));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

/* Reset (only while something is filtered) and the open/closed arrow sit at the end of the header. */
html.fi .nf-ta-filters-tools {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

html.fi .nf-ta-filters-reset {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--danger-600));
    cursor: pointer;
}

html.fi .nf-ta-filters-reset:hover { text-decoration: underline; }

html.fi .nf-ta-filters-chevron {
    color: rgb(var(--gray-400));
    transition: transform 0.2s;
}

html.fi .nf-ta-filters.is-open .nf-ta-filters-chevron { transform: rotate(180deg); }

/* The fields, under a line that separates them from the header. */
html.fi .nf-ta-filters-body {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--ynex-line);
}

html.dark.fi .nf-ta-filters-count,
html.fi.dark .nf-ta-filters-count { color: rgb(var(--primary-300)); background-color: rgba(var(--primary-400), 0.18); }
html.dark.fi .nf-ta-filters-reset,
html.fi.dark .nf-ta-filters-reset { color: rgb(var(--danger-400)); }
html.dark.fi .nf-ta-filters-head:hover,
html.fi.dark .nf-ta-filters-head:hover { background-color: rgb(255 255 255 / 0.04); }

/* Nothing to show on paper. */
@media print { .nf-ta-filters-card { display: none !important; } }

/* ------------------------------------------------------------------ notification bell (top bar) */

html.fi .fi-dropdown-panel.nf-notify-panel {
    width: 22rem !important;
    max-width: calc(100vw - 1rem) !important;
}

.nf-notify-trigger { position: relative; }

.nf-notify-badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: rgb(var(--danger-600, 220 38 38));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.nf-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid rgb(229 231 235);
}

.nf-notify-read { font-size: 0.75rem; font-weight: 600; color: rgb(var(--primary-600)); cursor: pointer; }
.nf-notify-read:hover { text-decoration: underline; }

/* The dropdown is as tall as its notifications (10 for a super admin, 7 for everybody else): no short box with its own scrollbar.
   Only a screen too small for it scrolls the whole panel. */
html.fi .fi-dropdown-panel.nf-notify-panel { max-height: calc(100vh - 4.5rem); overflow-y: auto; }
.nf-notify-list { padding: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; }
.nf-notify-list-page { padding: 0; gap: 0.5rem; }
.nf-notify-list-page .nf-notify-item { padding: 0.875rem 1rem; border: 1px solid rgb(229 231 235); }
.nf-notify-list-page .nf-notify-item.is-new { border-color: rgba(var(--primary-500), 0.35); }
html.fi.dark .nf-notify-list-page .nf-notify-item { border-color: rgb(255 255 255 / 0.1); }
/* The footer of the Notifications page (both panels): "Per page" at the start, then "Showing x to y of z" and the page buttons
   taking the rest of the row - like the footer of a table. The pager is a flex item that must be allowed to grow: left at its
   default it shrank to nothing and its text spilled out of the card. */
.nf-notify-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ynex-line);
}
.nf-notify-pagination > .nf-pagination { flex: 1 1 20rem; min-width: 0; }
.nf-notify-pagination .nf-pagination-overview { white-space: nowrap; }
.nf-notify-perpage { display: flex; align-items: center; gap: 0.5rem; flex: none; font-size: 0.8125rem; font-weight: 500; color: var(--ynex-muted); white-space: nowrap; }
.nf-notify-perpage .fi-input-wrp { width: 5rem; }
@media (max-width: 640px) {
    .nf-notify-pagination { justify-content: center; }
    .nf-notify-pagination > .nf-pagination { flex-basis: 100%; }
}

/* "View all notifications" at the bottom of the dropdown: a full-width button, same look in both panels. */
.nf-notify-all {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    margin: 0.25rem 0.5rem 0.5rem; padding: 0.625rem 1rem; border-radius: 0.5rem;
    background: rgba(var(--primary-500), 0.12); color: rgb(var(--primary-700));
    font-size: 0.85rem; font-weight: 600; text-align: center; transition: background-color 0.15s;
}
.nf-notify-all:hover { background: rgba(var(--primary-500), 0.2); }
[dir='rtl'] .nf-notify-all-arrow { transform: scaleX(-1); }
html.fi.dark .nf-notify-all { background: rgba(var(--primary-500), 0.18); color: rgb(var(--primary-300)); }

.nf-notify-item { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.625rem 0.75rem; border-radius: 0.5rem; }
a.nf-notify-item { cursor: pointer; }
a.nf-notify-item:hover { background: rgba(var(--primary-500), 0.08); }
.nf-notify-item.is-new { background: rgba(var(--primary-500), 0.1); }

.nf-notify-icon { flex-shrink: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; }
.nf-notify-created { background: rgb(220 252 231); color: rgb(22 101 52); }
.nf-notify-updated { background: rgba(var(--primary-500), 0.14); color: rgb(var(--primary-700)); }
.nf-notify-deleted { background: rgb(254 226 226); color: rgb(153 27 27); }
.nf-notify-warning { background: rgb(254 243 199); color: rgb(146 64 14); } /* e.g. "Zakat is due" */

.nf-notify-text { display: flex; flex-direction: column; min-width: 0; }
.nf-notify-message { font-size: 0.85rem; font-weight: 600; }
.nf-notify-label { font-size: 0.8rem; color: rgb(75 85 99); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-notify-time { margin-top: 0.125rem; font-size: 0.7rem; color: rgb(107 114 128); }
.nf-notify-empty { padding: 1.5rem 1rem; text-align: center; font-size: 0.85rem; color: rgb(107 114 128); }

html.fi.dark .nf-notify-head { border-color: rgb(255 255 255 / 0.1); }
html.fi.dark .nf-notify-read { color: rgb(var(--primary-300)); }
html.fi.dark .nf-notify-label { color: rgb(156 163 175); }
html.fi.dark .nf-notify-time { color: rgb(156 163 175); }
html.fi.dark .nf-notify-created { background: rgb(22 101 52 / 0.35); color: rgb(134 239 172); }
html.fi.dark .nf-notify-updated { color: rgb(var(--primary-300)); }
html.fi.dark .nf-notify-deleted { background: rgb(153 27 27 / 0.35); color: rgb(252 165 165); }
html.fi.dark .nf-notify-warning { background: rgb(146 64 14 / 0.35); color: rgb(252 211 77); }

/* The platform bell names the business each activity happened in. */
.nf-notify-business { font-size: 0.72rem; color: rgb(107 114 128); }
.nf-notify-business::before { content: '· '; }

/* ------------------------------------------------------------------ custom fonts (Platform settings > Appearance) */

.nf-fonts { display: grid; gap: 0.75rem; }
.nf-fonts-empty { margin: 0; font-size: 0.875rem; color: rgb(107 114 128); }
.nf-fonts-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; padding: 0.75rem 1rem; border: 1px solid rgb(229 231 235); border-radius: 0.75rem; }
.nf-fonts-sample { display: grid; gap: 0.125rem; min-width: 0; }
.nf-fonts-sample strong { font-size: 1.05rem; }
.nf-fonts-sample span { font-size: 0.85rem; color: rgb(107 114 128); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-fonts-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.nf-fonts-tag { padding: 0.125rem 0.5rem; border-radius: 999px; background: rgb(243 244 246); color: rgb(75 85 99); font-size: 0.72rem; font-weight: 600; }
.nf-fonts-tag.is-used { background: rgba(var(--primary-500), 0.14); color: rgb(var(--primary-700)); }
.nf-fonts-delete { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; color: rgb(220 38 38); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.nf-fonts-delete:hover { background: rgb(254 226 226); }
html.fi.dark .nf-fonts-row { border-color: rgb(255 255 255 / 0.1); }
html.fi.dark .nf-fonts-sample span, html.fi.dark .nf-fonts-empty { color: rgb(156 163 175); }
html.fi.dark .nf-fonts-tag { background: rgb(255 255 255 / 0.08); color: rgb(209 213 219); }
html.fi.dark .nf-fonts-tag.is-used { color: rgb(var(--primary-300)); }
html.fi.dark .nf-fonts-delete { color: rgb(252 165 165); }
html.fi.dark .nf-fonts-delete:hover { background: rgb(153 27 27 / 0.3); }
@media (max-width: 640px) { .nf-fonts-row { grid-template-columns: minmax(0, 1fr); } .nf-fonts-delete { grid-column: 1; grid-row: auto; justify-self: start; } }

/* What changed, under a notification: "Label  old -> new" lines. */
.nf-notify-details { margin: 0.25rem 0 0.125rem; padding: 0.375rem 0.5rem; list-style: none; border-radius: 0.375rem; background: rgba(var(--gray-500), 0.08); font-size: 0.75rem; line-height: 1.35; }
.nf-notify-details li { display: block; overflow-wrap: anywhere; }
.nf-notify-details li + li { margin-top: 0.125rem; }
.nf-notify-details b { font-weight: 600; margin-inline-end: 0.25rem; }
.nf-notify-details b::after { content: ':'; }
.nf-notify-old { text-decoration: line-through; opacity: 0.65; }
.nf-notify-new { font-weight: 600; color: rgb(var(--primary-700)); }
.nf-notify-arrow { display: inline-block; margin-inline: 0.2rem; opacity: 0.6; }
[dir='rtl'] .nf-notify-arrow { transform: scaleX(-1); }
.nf-notify-more { opacity: 0.7; font-style: italic; }
html.fi.dark .nf-notify-details { background: rgb(255 255 255 / 0.06); }
html.fi.dark .nf-notify-new { color: rgb(var(--primary-300)); }

/* The input a notification pointed to (?nf_focus=...): a pulse that fades, so the eye finds it. */
@keyframes nf-focus-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--primary-500), 0.55); background-color: rgba(var(--primary-500), 0.14); }
    70% { box-shadow: 0 0 0 10px rgba(var(--primary-500), 0); background-color: rgba(var(--primary-500), 0.08); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-500), 0); background-color: transparent; }
}

.nf-focus-flash {
    border-radius: 0.5rem;
    animation: nf-focus-pulse 1.4s ease-out 3;
    outline: 2px solid rgba(var(--primary-500), 0.7);
    outline-offset: 4px;
}

/* ------------------------------------------------------------------ cron help (Backups > Automatic backups) */

.nf-cron { display: grid; gap: 0.75rem; padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid rgb(229 231 235); }
.nf-cron-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 600; }
.nf-cron-text, .nf-cron-hint { margin: 0; font-size: 0.875rem; line-height: 1.6; color: rgb(75 85 99); }
.nf-cron-hint { font-size: 0.8rem; color: rgb(107 114 128); }
.nf-cron-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: 0.625rem; font-size: 0.85rem; font-weight: 500; }
.nf-cron-status.is-ok { background: rgb(220 252 231); color: rgb(22 101 52); }
.nf-cron-status.is-warn { background: rgb(254 243 199); color: rgb(146 64 14); }
.nf-cron-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgb(229 231 235); }
.nf-cron-tabs button { padding: 0.5rem 0.875rem; border-bottom: 2px solid transparent; font-size: 0.85rem; font-weight: 600; color: rgb(107 114 128); cursor: pointer; }
.nf-cron-tabs button.is-active { border-color: rgb(var(--primary-600)); color: rgb(var(--primary-600)); }
.nf-cron-panel { display: grid; gap: 0.625rem; }
.nf-cron-steps { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.875rem; line-height: 1.6; list-style: decimal; }
.nf-cron-field { display: grid; gap: 0.25rem; }
.nf-cron-field > span { font-size: 0.78rem; font-weight: 600; color: rgb(107 114 128); }
.nf-cron-code { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.75rem; border-radius: 0.5rem; background: rgb(17 24 39); }
.nf-cron-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: rgb(229 231 235); font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nf-cron-code button { flex: none; padding: 0.25rem 0.625rem; border-radius: 0.375rem; background: rgb(255 255 255 / 0.12); color: #fff; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.nf-cron-code button:hover { background: rgb(255 255 255 / 0.22); }
html.fi.dark .nf-cron, html.fi.dark .nf-cron-tabs { border-color: rgb(255 255 255 / 0.1); }
html.fi.dark .nf-cron-text { color: rgb(209 213 219); }
html.fi.dark .nf-cron-hint, html.fi.dark .nf-cron-field > span, html.fi.dark .nf-cron-tabs button { color: rgb(156 163 175); }
html.fi.dark .nf-cron-tabs button.is-active { color: rgb(var(--primary-400)); border-color: rgb(var(--primary-400)); }
html.fi.dark .nf-cron-status.is-ok { background: rgb(22 101 52 / 0.3); color: rgb(134 239 172); }
html.fi.dark .nf-cron-status.is-warn { background: rgb(146 64 14 / 0.3); color: rgb(252 211 77); }
html.fi.dark .nf-cron-code { background: rgb(0 0 0 / 0.35); }

/* An arrow that points along the reading direction (next / back): mirrored in right-to-left languages. Put the class on the button. */
[dir='rtl'] .nf-rtl-flip svg { transform: scaleX(-1); }

/* A dropdown group (Billing ...) shows the number badges of its items on its own header, and a dot on its icon in the narrow sidebar. */
html.fi aside.fi-sidebar .nf-group-badge { flex: none; margin-inline-end: 0.25rem; }
html.fi aside.fi-sidebar .nf-group-dot { position: absolute; top: 0.3rem; inset-inline-end: 0.35rem; width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: rgb(var(--warning-500)); box-shadow: 0 0 0 2px rgb(var(--gray-50)); }
.dark html.fi aside.fi-sidebar .nf-group-dot, html.dark aside.fi-sidebar .nf-group-dot { box-shadow: 0 0 0 2px rgb(var(--gray-900)); }


/* ---- Top bar search: an icon that opens a window searching the whole system ---- */
.nf-search-modal .fi-modal-content { gap: 0.75rem; }
.nf-search-box { position: relative; display: flex; align-items: center; }
.nf-search-box input {
    width: 100%; height: 2.9rem; padding-block: 0; padding-inline: 2.6rem 2.4rem;
    border-radius: 0.75rem; font-size: 0.95rem; outline: none;
    background: rgb(var(--gray-50)); color: rgb(var(--gray-950));
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.1);
}
.nf-search-box input:focus { box-shadow: 0 0 0 2px rgb(var(--primary-500)); }
.dark .nf-search-box input { background: rgb(255 255 255 / 0.05); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); }
.nf-search-box-icon { position: absolute; inset-inline-start: 0.85rem; width: 1.2rem; height: 1.2rem; color: rgb(var(--gray-400)); pointer-events: none; }
.nf-search-spinner { position: absolute; inset-inline-end: 0.9rem; width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid rgba(var(--primary-500), 0.25); border-top-color: rgb(var(--primary-500)); animation: nf-spin 0.7s linear infinite; }
@keyframes nf-spin { to { transform: rotate(360deg); } }

.nf-search-results { max-height: 55vh; min-height: 8rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-block: 0.25rem; scrollbar-width: thin; }
.nf-search-group h4 { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.nf-search-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.nf-search-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.6rem; outline: none; color: rgb(var(--gray-900)); }
.dark .nf-search-item { color: rgb(var(--gray-100)); }
.nf-search-item:hover, .nf-search-item:focus { background: rgba(var(--primary-500), 0.12); }
.nf-search-item-title { font-weight: 500; font-size: 0.9rem; }
.nf-search-item-sub { font-size: 0.78rem; color: rgb(var(--gray-500)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nf-search-item-go { margin-inline-start: auto; opacity: 0; flex-shrink: 0; color: rgb(var(--primary-600)); }
[dir="rtl"] .nf-search-item-go { transform: scaleX(-1); }
.nf-search-item:hover .nf-search-item-go, .nf-search-item:focus .nf-search-item-go { opacity: 1; }
.nf-search-empty { margin: 1.5rem 0; text-align: center; font-size: 0.875rem; color: rgb(var(--gray-500)); }
.nf-search-hint { font-size: 0.75rem; color: rgb(var(--gray-500)); display: flex; gap: 0.3rem; align-items: center; }
.nf-search-hint kbd { padding: 0.05rem 0.4rem; border-radius: 0.3rem; font-size: 0.7rem; background: rgb(var(--gray-100)); box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.1); }
.dark .nf-search-hint kbd { background: rgb(255 255 255 / 0.08); }

/* The top bar search looks like its neighbours (exchange rate, currency, language): same colour, size, spacing and hover; icon and word on one line. */
html.fi .nf-search-trigger { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; height: auto; width: auto; }
html.fi .nf-search-trigger > svg { width: 1.25rem; height: 1.25rem; }
html.fi .nf-search-trigger > span { line-height: 1.25rem; }

/* The search's own wrapper (button + its hidden window) must not take height of its own: that pushed the button above the line of the other top bar items. */
html.fi .nf-search-root { display: contents; }
html.fi .fi-topbar .nf-search-trigger { align-self: center; margin-block: 0; }

/* ---- Sidebar dropdowns (Reports, Billing ...): a raised header row with a plain, tight list under it ----
   Only the shape changes - the colours stay the ones of the theme. No dots or tree lines: the labels line up under the header's label. */

/* The open dropdown's header looks like a raised card. */
html.fi aside.fi-sidebar .fi-sidebar-group:not([data-group-label=""]):has(> .fi-sidebar-group-items:not([style*="display: none"])) > .fi-sidebar-group-button {
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 6px 14px -4px rgb(0 0 0 / 0.22);
}

/* The list: no extra box or inset, a little air above, rows close together. */
html.fi aside.fi-sidebar .fi-sidebar-group:not([data-group-label=""]):not([data-group-label="sidebar-tail"]) > .fi-sidebar-group-items {
    margin-inline-start: 0;
    margin-top: 0.375rem;
    padding: 0;
    row-gap: 0.125rem;
}

/* The items sit in from the start edge, so the list is clearly apart from the single menu items; each has its icon before its label. */
html.fi aside.fi-sidebar .fi-sidebar-group:not([data-group-label=""]):not([data-group-label="sidebar-tail"]) > .fi-sidebar-group-items {
    margin-inline-start: 1.25rem;
}

html.fi aside.fi-sidebar .fi-sidebar-item-grouped-border { display: none; }

html.fi aside.fi-sidebar .fi-sidebar-group:not([data-group-label=""]):not([data-group-label="sidebar-tail"]) .fi-sidebar-item > .fi-sidebar-item-button {
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    border-radius: 0.5rem;
}

/* A row without an icon keeps its label lined up with the ones that have one (icon width + gap). */
html.fi aside.fi-sidebar .fi-sidebar-group:not([data-group-label=""]):not([data-group-label="sidebar-tail"]) .fi-sidebar-item > .fi-sidebar-item-button:not(:has(.fi-sidebar-item-icon)) {
    padding-inline-start: 2.75rem;
}

/* The collapsed rail keeps its own centred buttons. */
@media (min-width: 1024px) {
    html.fi aside.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item > .fi-sidebar-item-button {
        padding-inline: 0.75rem;
    }
}

/* Windows task: Program, Arguments and Start in on one row (one below the other on a narrow screen). */
.nf-cron-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: start; } /* one value per row: the whole path shows, no scroll bar */
.nf-cron-fields .nf-cron-field, .nf-cron-fields .nf-cron-code { min-width: 0; }

/* Automatic backups: the times that repeat, two to a row, in a dotted box. */
.nf-times-box { border: 2px dashed rgba(var(--gray-400), 0.55); border-radius: 0.75rem; padding: 1rem; }
.nf-times-box .fi-fo-field-wrp { min-width: 0; }
.nf-times-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.nf-time-chip { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--primary-600)); background: rgba(var(--primary-500), 0.12); border: 1px solid rgba(var(--primary-500), 0.35); }
.nf-time-chip.is-empty { color: rgb(var(--gray-400)); background: transparent; border: 1px dashed rgba(var(--gray-400), 0.5); font-weight: 400; }
.nf-times-hint { margin: 0.5rem 0 0; font-size: 0.8rem; color: rgb(var(--gray-500)); }

/* nero-controls.css turns every two-column form grid into three on a wide screen; the automatic-backup card really is two columns. */
@media (min-width: 1024px) {
    .fi-page .fi-section-content .nf-two-cols .fi-fo-component-ctn[style*="--cols-lg: repeat(2,"] { --cols-lg: repeat(2, minmax(0, 1fr)) !important; }
}

/* Top bar (admin and user side): the items are close together. Filament leaves 1rem between them and each item has its own padding, which made the gaps big. */
html.fi .fi-topbar .ms-auto.gap-x-4 { column-gap: 0.125rem; }
html.fi .fi-topbar .nf-topbar-select,
html.fi .fi-topbar .nf-rates-trigger,
html.fi .fi-topbar .nf-search-trigger { padding-inline: 0.375rem; }

/* The "Have a problem?" window (App\Livewire\ReportProblem). */
/* The wrapper of the top bar button holds the (hidden) window too; as a block it was taller than the button and the button, centred in it,
   sat higher than the language and currency items. It takes no box of its own, so the button is centred in the top bar item like they are. */
.nf-report-root { display: contents; }
html.fi .fi-topbar .nf-report-trigger { margin: 0; align-self: center; }

.nf-report-form { display: grid; gap: 16px; }
.nf-report-field { display: grid; gap: 6px; }
.nf-report-field > label { font-size: 0.875rem; font-weight: 500; }
.nf-report-req, .nf-report-error { color: rgb(var(--danger-600, 220 38 38)); }
.nf-report-error { margin: 0; font-size: 0.8125rem; }

/* "Have a problem?" window: the icon sits above the title (not beside it), so the title and the text use the full width. */
html.fi .nf-report-modal .fi-modal-header {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.75rem;
    column-gap: 0;
}

html.fi .nf-report-modal .fi-modal-header > div:last-child { width: 100%; }