@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');

/*
 * NIFOX panel identity.
 *
 * Plain CSS on purpose: no build step is needed on the Plesk server. These
 * rules are UNLAYERED, so they win over Filament's own layered styles without
 * !important (Filament ships its CSS inside @layer). They re-dress Filament's
 * native `fi-*` markup into a designed product: a deep-ink full-height sidebar,
 * a quiet topbar, energy-green accents, Outfit display type over Inter.
 *
 * Brand colours and the body font come from config/nifox.php. The energy green
 * (#03D959) and deep ink (#0D0F0E) are sampled from nifox.it.
 *
 * Order: tokens, shell, components, pages, quote editor.
 */

/* ======================================================================
 * Tokens
 * ====================================================================== */

.fi-body {
    --nf-bg: #eef1ef;
    --nf-surface: #ffffff;
    --nf-surface-2: #f6f8f7;
    --nf-line: #e3e8e5;
    --nf-divider: #eef2f0;
    --nf-field-line: #d7ded9;
    --nf-ink: #0f1512;
    --nf-label: #2b322e;
    --nf-sub: #45504a;
    --nf-muted: #6c766f;
    --nf-faint: #97a09a;

    --nf-green: #03d959;
    --nf-green-600: #06b84c;
    --nf-green-700: #0a9c42;
    --nf-green-text: #0a7a39; /* green text on light, readable */
    --nf-green-tint: #e7faef;
    --nf-green-ring: #c9f3d9;
    --nf-green-glow: rgb(3 217 89 / 0.22);

    --nf-sidebar: #0a0c0b;
    --nf-sidebar-2: #12150f;
    --nf-sidebar-txt: #9aa39d;
    --nf-sidebar-faint: #606a63;

    --nf-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nf-card-shadow: 0 1px 2px rgb(15 21 18 / 0.05), 0 1px 1px rgb(15 21 18 / 0.04);
    --nf-card-ring: 0 0 0 1px var(--nf-line), var(--nf-card-shadow);

    /* Keep small text on a comfortable line height. */
    --text-xs--line-height: 1.5;
    --text-sm--line-height: 1.5;

    background-color: var(--nf-bg);
    color: var(--nf-ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Headings in Outfit — the site's display face, tight and confident. */
.fi-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-main h1,
.fi-main h2,
.fi-main h3 {
    font-family: var(--nf-display);
    letter-spacing: -0.015em;
}

/* ======================================================================
 * Shell: deep-ink full-height sidebar, quiet topbar, soft page
 * ====================================================================== */

.fi-sidebar.fi-main-sidebar {
    background-color: var(--nf-sidebar);
    color: var(--nf-sidebar-txt);
    border: none;
}

@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-sidebar.fi-main-sidebar {
        position: fixed;
        top: 0;
        height: 100dvh;
        z-index: 31;
    }

    .fi-body-has-topbar .fi-topbar-ctn,
    .fi-body-has-topbar .fi-main-ctn {
        margin-inline-start: var(--sidebar-width);
    }

    /* Keep the logo in the sidebar, not the topbar. */
    .fi-body-has-topbar .fi-sidebar-header {
        display: flex;
    }

    .fi-topbar-start {
        display: none;
    }
}

.fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar-header {
    justify-content: flex-start;
    height: auto;
    padding: 1.5rem 1.375rem 0.85rem;
    background: transparent;
    box-shadow: none;
}

.fi-sidebar-header .fi-logo {
    margin-inline-start: 0;
    height: auto !important;
    align-items: center;
}

.fi-sidebar-header .fi-logo img {
    height: 1.9rem;
    width: auto;
}

.fi-sidebar-header-controls::after {
    display: none;
}

/* Keep any control inside the dark sidebar (collapse toggle, etc.) visible. */
.fi-sidebar .fi-icon-btn {
    color: var(--nf-sidebar-txt);
}

.fi-sidebar .fi-icon-btn:hover {
    color: #fff;
    background-color: rgb(255 255 255 / 0.06);
}

/* ---------- Navigation ---------- */

.fi-sidebar-nav {
    padding: 0.5rem 0.875rem 1rem;
    gap: 0;
    scrollbar-gutter: auto;
}

.fi-sidebar-nav-groups {
    margin-inline: 0;
    gap: 0;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    gap: 0.125rem;
}

.fi-sidebar-group-btn {
    gap: 0.5rem;
    padding: 1rem 0.75rem 0.375rem;
}

.fi-sidebar-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nf-sidebar-faint);
}

/* Green indicator dot before each section label. */
.fi-sidebar-group .fi-sidebar-group-label::before {
    content: '';
    flex: 0 0 0.4375rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background-color: var(--nf-green);
    opacity: 0.65;
}

.fi-sidebar-item-btn {
    justify-content: flex-start;
    height: 2.5rem;
    gap: 0.75rem;
    padding: 0 0.75rem;
    border-radius: 0.625rem;
    position: relative;
}

.fi-sidebar-item-btn > .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--nf-sidebar-txt);
}

.fi-sidebar-item-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nf-sidebar-txt);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.05);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon {
    color: #fff;
}

/* Active item: tinted green with a glowing left edge. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: color-mix(in oklab, var(--nf-green) 15%, transparent);
}

/* Indicator sits inside the item (the nav clips horizontal overflow, so a
   negative offset would be cut off). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 0.1875rem;
    border-radius: 0 0.1875rem 0.1875rem 0;
    background-color: var(--nf-green);
    box-shadow: 0 0 12px 1px var(--nf-green-glow);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    font-weight: 600;
    color: #fff;
}

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

/* Sidebar counters: slate pills, green when they carry a NIFOX count. */
.fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    min-width: 1.375rem;
    min-height: 1.25rem;
    padding: 0 0.4375rem;
    border-radius: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 0.75rem;
    background-color: rgb(255 255 255 / 0.1);
    color: #dfe5e1;
    box-shadow: none;
}

.fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color-warning {
    background-color: #f0b429;
    color: #241a00;
}

/* ---------- Topbar ---------- */

/* Blend the topbar into the page: no white strip, no border, so it reads as
   part of the workspace instead of a header "stitched" on top. Content scrolls
   under it (it stays sticky) and disappears cleanly into the same colour. */
.fi-topbar {
    min-height: 4rem;
    gap: 1rem;
    padding-inline: 1rem;
    background-color: var(--nf-bg);
    box-shadow: none;
    border-bottom: 1px solid transparent;
}

/* Hold the topbar controls until the app has booted (html.nf-ready), so the
   search / notifications / user icons appear with the page instead of flashing
   in first on refresh. Without JavaScript (no .nf-js) they stay visible. */
html.nf-js .fi-topbar-end {
    opacity: 0;
}

html.nf-ready .fi-topbar-end {
    opacity: 1;
    transition: opacity 0.25s ease;
}

@media (min-width: 64rem) {
    .fi-topbar {
        padding-inline: 2rem;
    }
}

.fi-topbar-end {
    flex: 1 1 auto;
    gap: 0.75rem;
}

.fi-topbar .fi-global-search-ctn {
    flex: 1 1 auto;
    max-width: 30rem;
    margin-inline-end: auto;
}

.fi-topbar .fi-global-search-field .fi-input-wrp {
    height: 2.5rem;
    align-items: center;
    border-radius: 0.75rem;
    background-color: var(--nf-surface);
    box-shadow: inset 0 0 0 1px var(--nf-line);
}

.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    background-color: var(--nf-surface);
    box-shadow: inset 0 0 0 1px var(--nf-green), 0 0 0 4px var(--nf-green-ring);
}

.fi-topbar .fi-global-search-field .fi-input-wrp-prefix {
    padding-inline-start: 0.875rem;
    color: var(--nf-muted);
}

.fi-topbar .fi-global-search-field input.fi-input {
    font-size: 0.875rem;
    color: var(--nf-ink);
}

.fi-topbar .fi-topbar-database-notifications-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--nf-surface);
    box-shadow: inset 0 0 0 1px var(--nf-line);
    color: var(--nf-sub);
}

.fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
    background-color: #dc2626;
    color: #fff;
    box-shadow: 0 0 0 2px var(--nf-surface);
}

.fi-topbar .fi-user-menu-trigger .fi-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: linear-gradient(145deg, #1b211d, #0b0d0c);
    color: #9fe9bd;
}

/* ---------- Page header ---------- */

.fi-main {
    max-width: none;
    margin-inline: 0;
}

@media (min-width: 64rem) {
    .fi-main {
        padding-inline: 2rem;
    }
}

.fi-page-header-main-ctn {
    row-gap: 1.5rem;
    padding-block: 1.75rem 2.5rem;
}

.fi-page-content {
    row-gap: 1.5rem;
}

.fi-header {
    align-items: flex-end;
}

.fi-header-heading {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--nf-ink);
}

.fi-header-subheading {
    max-width: none;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--nf-sub);
}

/* ======================================================================
 * Components
 * ====================================================================== */

/* ---------- Buttons ---------- */

.fi-btn {
    min-height: 2.5rem;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.fi-btn.fi-size-sm {
    min-height: 2.125rem;
    border-radius: 0.5625rem;
    font-size: 0.8125rem;
}

.fi-btn > .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* Primary: darken on hover. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--nf-green-700);
}

/* Ghost buttons: surface with a hairline ring. */
.fi-btn:not(.fi-color),
.fi-btn.fi-color-gray:not(.fi-outlined) {
    background-color: var(--nf-surface);
    color: var(--nf-ink);
    box-shadow: inset 0 0 0 1px var(--nf-field-line);
}

.fi-btn:not(.fi-color) > .fi-icon,
.fi-btn.fi-color-gray:not(.fi-outlined) > .fi-icon {
    color: var(--nf-ink);
}

.fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover,
.fi-btn.fi-color-gray:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--nf-surface-2);
}

/* ---------- Links ---------- */

.fi-link {
    font-weight: 600;
}

.fi-link.fi-color-primary {
    color: var(--nf-green-text);
}

/* ---------- Badges ---------- */

.fi-badge {
    min-height: 1.5rem;
    gap: 0.375rem;
    padding: 0 0.5625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    background-color: var(--nf-surface-2);
    color: var(--nf-sub);
    box-shadow: none;
}

.fi-badge .fi-badge-label-ctn {
    align-self: center;
}

.fi-badge.fi-color-warning {
    background-color: #fdf3d6;
    color: #8a5a00;
}

.fi-badge.fi-color-success {
    background-color: var(--nf-green-tint);
    color: var(--nf-green-text);
}

.fi-badge.fi-color-danger {
    background-color: #fde3e1;
    color: #a3281f;
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-info {
    background-color: var(--nf-green-tint);
    color: var(--nf-green-text);
}

/* ---------- Sections (cards) ---------- */

.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-radius: 1rem;
    background-color: var(--nf-surface);
    box-shadow: var(--nf-card-ring);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-top: 1px solid var(--nf-divider);
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 1.25rem;
}

.fi-section-header-heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nf-ink);
}

.fi-section-header-description {
    font-size: 0.8125rem;
    color: var(--nf-sub);
}

/* ---------- Form fields ---------- */

.fi-fo-field-label-content {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nf-label);
}

.fi-input-wrp {
    min-height: 2.5rem;
    align-items: center;
    border-radius: 0.625rem;
    background-color: var(--nf-surface);
    box-shadow: inset 0 0 0 1px var(--nf-field-line);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: inset 0 0 0 1px var(--nf-green), 0 0 0 4px var(--nf-green-ring);
}

.fi-input-wrp.fi-invalid {
    box-shadow: inset 0 0 0 1px #dc2626;
}

.fi-input-wrp.fi-disabled {
    background-color: var(--nf-surface-2);
}

input.fi-input,
.fi-select-input,
.fi-input-wrp textarea {
    font-size: 0.875rem;
    color: var(--nf-ink);
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-content-col .fi-sc-text {
    font-size: 0.75rem;
    color: var(--nf-muted);
}

.fi-checkbox-input {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.3125rem;
}

.fi-checkbox-input:checked,
.fi-toggle.fi-checked {
    background-color: var(--nf-green);
}

/* ---------- Tables ---------- */

.fi-ta-ctn {
    border-radius: 1rem;
    box-shadow: var(--nf-card-ring);
}

/* White header row (Filament tints it gray-50). Setting the row, not just the
   name cells, keeps the select-all and actions cells white too. */
.fi-ta-table > thead > tr {
    background-color: var(--nf-surface);
}

.fi-ta-header-cell {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nf-muted);
    vertical-align: middle;
}

.fi-ta-row {
    border-color: var(--nf-divider);
}

/* ---------- Tabs ---------- */

.fi-page .fi-tabs:not(.fi-contained) {
    width: fit-content;
    max-width: 100%;
    margin-inline: 0;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background-color: var(--nf-surface);
    box-shadow: 0 0 0 1px var(--nf-line);
}

.fi-page .fi-tabs:not(.fi-contained) .fi-tabs-item {
    height: 2.25rem;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5625rem;
}

.fi-page .fi-tabs:not(.fi-contained) .fi-tabs-item .fi-tabs-item-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nf-sub);
}

.fi-page .fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active {
    background-color: var(--nf-ink);
}

.fi-page .fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #fff;
}

/* ---------- Dialogs ---------- */

.fi-modal-window {
    border-radius: 1.125rem;
    box-shadow: 0 24px 64px rgb(10 20 14 / 0.3);
}

.fi-modal-heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--nf-ink);
}

.fi-modal-description {
    font-size: 0.875rem;
    color: var(--nf-sub);
}

/* ---------- Stats / widgets ---------- */

.fi-wi-stats-overview-stat {
    border-radius: 1rem;
    box-shadow: var(--nf-card-ring);
    background-color: var(--nf-surface);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nf-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nf-ink);
}

.fi-wi-stats-overview-stat-description {
    color: var(--nf-sub);
}

/* ======================================================================
 * Pages: login
 * ====================================================================== */

.fi-simple-layout {
    min-height: 100dvh;
    background:
        radial-gradient(120% 90% at 50% -10%, rgb(3 217 89 / 0.14), transparent 55%),
        var(--nf-sidebar);
}

/* The login card is white, so show the INK wordmark here (the sidebar keeps the
   white one). `content:url` on the brand <img> isn't honored, so hide the img
   and paint the ink logo as a background on its container. */
.fi-simple-layout .fi-logo {
    display: block;
    width: 6.6rem;
    height: 2.4rem;
    background: url('/images/nifox-logo-light.png') center / contain no-repeat;
}

.fi-simple-layout .fi-logo img {
    display: none;
}

.fi-simple-main {
    background-color: var(--nf-surface);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.5);
    border: 1px solid var(--nf-line);
}

/* ======================================================================
 * NIFOX: registry status rows (ProjectStatus colours)
 * ====================================================================== */

.fi-ta-row.nifox-status-row > td {
    background-color: color-mix(in oklab, var(--nifox-status, transparent) 34%, transparent);
}

.fi-ta-row.nifox-status-row:hover > td {
    background-color: color-mix(in oklab, var(--nifox-status, transparent) 50%, transparent);
}

/* ======================================================================
 * NIFOX: quote editor
 * ====================================================================== */

/* ---------- Lines table: compact, dark sticky header ---------- */
.nifox-lines table {
    font-size: 0.78rem;
}

.nifox-lines thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nf-ink);
    color: #eef2f0;
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-block: 0.45rem;
}

.nifox-lines thead th .fi-fo-table-repeater-header-required-mark {
    color: var(--nf-green);
}

.nifox-lines tbody td {
    padding-block: 0.2rem;
}

.nifox-lines .fi-input,
.nifox-lines .fi-select-input-label,
.nifox-lines .fi-fo-select {
    font-size: 0.78rem;
}

/* Tight input chrome so the numbers fit the compact columns. */
.nifox-lines .fi-input {
    padding-inline: 0.4rem;
}

.nifox-lines .fi-input-wrp {
    min-height: 2rem;
}

.nifox-line-total {
    text-align: right;
    font-family: var(--nf-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--nf-green-text);
}

/* ---------- Signature element: the «Totale offerta» readout ---------- */
.nifox-totals {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.1rem 1.25rem 1.25rem;
    background: #141715;
    color: #e7ece9;
    box-shadow: 0 16px 40px -20px rgb(10 20 14 / 0.6);
}

.nifox-totals__eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-green);
}

.nifox-totals__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 0.25rem;
    position: relative;
    z-index: 1;
}

.nifox-totals__table th {
    text-align: start;
    font-weight: 500;
    color: #9aa39d;
    padding: 0.35rem 0;
    font-size: 0.8rem;
}

.nifox-totals__table th.nifox-num,
.nifox-totals__table td.nifox-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.nifox-totals__table td {
    padding: 0.35rem 0;
    color: #e7ece9;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nifox-totals__alt {
    color: #828c86;
    font-size: 0.78rem;
    font-weight: 400;
}

.nifox-totals__grand {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    position: relative;
    z-index: 1;
}

.nifox-totals__grand-label {
    font-size: 0.72rem;
    color: #9aa39d;
}

.nifox-totals__grand-net {
    display: block;
    font-family: var(--nf-display);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-top: 0.1rem;
}

.nifox-totals__grand-gross {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #9aa39d;
    font-variant-numeric: tabular-nums;
}

.nifox-totals__pending {
    margin-top: 0.85rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.6rem;
    font-weight: 500;
    font-size: 0.82rem;
    color: #f0c34a;
    background: rgb(240 195 74 / 0.1);
    border: 1px solid rgb(240 195 74 / 0.25);
    position: relative;
    z-index: 1;
}

/* ---------- Profitability card ---------- */
.nifox-profit {
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nifox-profit__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    color: var(--nf-sub);
}

.nifox-profit__chip {
    font-variant-numeric: tabular-nums;
}

.nifox-profit__chip b {
    color: var(--nf-ink);
    font-weight: 600;
}

.nifox-profit__headline {
    font-weight: 600;
    color: var(--nf-ink);
    font-variant-numeric: tabular-nums;
}

.nifox-profit__ok {
    font-weight: 600;
    color: var(--nf-green-text);
}

.nifox-profit__warn {
    font-weight: 700;
    color: #b91c1c;
}

.nifox-profit__pending {
    color: var(--nf-muted);
}

/* The thin green margin "charge bar". */
.nifox-charge {
    margin-top: 0.4rem;
}

.nifox-charge__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--nf-muted);
    margin-bottom: 0.35rem;
}

.nifox-charge__labels b {
    color: var(--nf-green-text);
    font-family: var(--nf-display);
}

.nifox-charge__bar {
    height: 0.5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--nf-green) 14%, transparent);
    overflow: hidden;
}

.nifox-charge__bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nf-green-700), var(--nf-green));
    box-shadow: 0 0 10px var(--nf-green-glow);
}

/* ---------- Signature pad ---------- */
.nifox-sign__canvas {
    touch-action: none;
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 3 / 1;
    border: 1px solid var(--nf-field-line);
    border-radius: 0.6rem;
    background: #fff;
    cursor: crosshair;
    display: block;
}

.nifox-sign__canvas:focus-within,
.nifox-sign__canvas.is-drawing {
    border-color: var(--nf-green);
    box-shadow: 0 0 0 3px var(--nf-green-ring);
}

.nifox-sign__hint {
    font-size: 0.78rem;
    color: var(--nf-muted);
}

/* ======================================================================
 * NIFOX: change log, checklist
 * ====================================================================== */

.nifox-muted {
    color: var(--nf-muted);
    font-size: 0.875rem;
}

.nifox-strong {
    font-weight: 600;
    color: var(--nf-ink);
}

.nifox-history {
    display: grid;
    gap: 1.5rem;
}

.nifox-history > section > p {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.nifox-changes {
    overflow-x: auto;
}

.nifox-changes table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.nifox-changes th {
    text-align: start;
    font-weight: 500;
    color: var(--nf-muted);
    padding: 0.5rem 1rem 0.5rem 0;
}

.nifox-changes td {
    padding: 0.5rem 1rem 0.5rem 0;
    border-top: 1px solid var(--nf-divider);
    word-break: break-word;
    vertical-align: top;
}

.nifox-checklist {
    display: grid;
    gap: 0.75rem;
}

.nifox-checklist li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
}

.nifox-checklist a:hover {
    text-decoration: underline;
}

/* ======================================================================
 * Tablet: bigger touch targets when the pointer is a finger
 * ====================================================================== */
@media (pointer: coarse) {
    .fi-btn,
    .fi-icon-btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    .fi-input-wrp {
        min-height: 2.75rem;
    }

    .fi-ta-row > td {
        padding-block: 0.25rem;
    }

    .fi-sidebar-item-btn {
        height: 2.75rem;
    }
}