/*
 * NION Invoice — visual layer matching the nion.ro design system
 * (tokens taken from nion.ro: Inter Tight / Instrument Serif, #0B103A ink, #0800FC blue,
 *  20/28px radii, soft navy shadows, ease-out / spring curves).
 */
:root {
    --nion-bg: #F4F5F9;
    --nion-surface: #FFFFFF;
    --nion-surface-2: #F8F9FC;
    --nion-ink: #0B103A;
    --nion-ink-2: #2B3058;
    --nion-muted: #5F6480;
    --nion-faint: #9397AE;
    --nion-line: rgba(11, 16, 58, .08);
    --nion-line-2: rgba(11, 16, 58, .14);
    --nion-blue: #0800FC;
    --nion-blue-500: #3A33FF;
    --nion-blue-400: #6560FF;
    --nion-blue-300: #9C98FF;
    --nion-blue-100: #E4E3FF;
    --nion-blue-50: #F2F1FF;
    --nion-ok: #00A862;
    --nion-font-serif: "Instrument Serif", ui-serif, Georgia, serif;
    --nion-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --nion-ease-out: cubic-bezier(.22, 1, .36, 1);
    --nion-ease-spring: cubic-bezier(.34, 1.36, .64, 1);
    --nion-radius: 20px;
    --nion-radius-lg: 28px;
    --nion-shadow-sm: 0 1px 2px rgba(11, 16, 58, .05), 0 1px 1px rgba(11, 16, 58, .03);
    --nion-shadow: 0 1px 2px rgba(11, 16, 58, .05), 0 12px 32px -12px rgba(11, 16, 58, .16);
    --nion-shadow-lg: 0 2px 4px rgba(11, 16, 58, .04), 0 30px 80px -24px rgba(11, 16, 58, .28);
}

/* ---------- Base ---------- */
body.fi-body {
    background: var(--nion-bg);
    color: var(--nion-ink);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
}

.fi-header-heading {
    font-weight: 500;
    letter-spacing: -.025em;
    color: var(--nion-ink);
}

.nion-serif,
.fi-header-heading em {
    font-family: var(--nion-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--nion-blue);
    letter-spacing: -.01em;
}

.fi-header-subheading { color: var(--nion-muted); }

/* ---------- Brand ---------- */
.nion-brand { display: inline-flex; align-items: baseline; gap: .35rem; line-height: 1; }
.nion-brand-mark { font-weight: 700; letter-spacing: .08em; color: var(--nion-blue); font-size: 1.35rem; }
.nion-brand-tm { font-size: .55rem; color: var(--nion-blue); margin-left: -.3rem; transform: translateY(-.55rem); }
.nion-brand-app { font-family: var(--nion-font-serif); font-style: italic; font-size: 1.3rem; color: var(--nion-ink); }

/* ---------- Topbar & sidebar ---------- */
.fi-topbar {
    background: rgba(244, 245, 249, .72) !important;
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: none !important;
    border-bottom: 1px solid var(--nion-line);
}

.fi-sidebar { background: transparent; }
.fi-sidebar-header { background: transparent !important; box-shadow: none !important; }

.fi-sidebar-item-btn {
    border-radius: 12px !important;
    transition: background-color .25s var(--nion-ease-out), transform .25s var(--nion-ease-out), box-shadow .25s var(--nion-ease-out);
}
.fi-sidebar-item-btn:hover { transform: translateX(2px); background: rgba(255, 255, 255, .7) !important; }

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
    background: var(--nion-surface) !important;
    box-shadow: 0 0 0 1px var(--nion-line), var(--nion-shadow-sm);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--nion-blue-500), var(--nion-blue));
    animation: nion-grow .5s var(--nion-ease-spring) both;
}

/* ---------- Cards ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-in-repeatable-item {
    border-radius: var(--nion-radius) !important;
    background: var(--nion-surface);
    box-shadow: 0 0 0 1px var(--nion-line), var(--nion-shadow) !important;
    transition: box-shadow .35s var(--nion-ease-out), transform .35s var(--nion-ease-out);
}

.fi-wi-stats-overview-stat:hover,
.fi-wi-chart:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--nion-line-2), var(--nion-shadow-lg) !important;
}

.fi-section-header-heading { letter-spacing: -.01em; }

/* Staggered entrance (delay set by nion-motion.js). */
.nion-enter {
    animation: nion-fade-up .65s var(--nion-ease-out) both;
    animation-delay: var(--nion-delay, 0ms);
}

/* ---------- KPI cards ---------- */
.fi-wi-stats-overview-stat-label {
    font-size: .8rem !important;
    color: var(--nion-muted) !important;
}
.fi-wi-stats-overview-stat-value {
    font-weight: 600 !important;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--nion-ink);
}

/* ---------- Buttons ---------- */
.fi-btn {
    border-radius: 999px !important;
    transition: transform .2s var(--nion-ease-spring), box-shadow .25s var(--nion-ease-out), background-color .2s;
}
.fi-btn:active { transform: scale(.97); }

.fi-btn.fi-color-primary:not(.fi-outlined) {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(var(--nion-blue-500), var(--nion-blue)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(8, 0, 252, .3), 0 8px 20px -6px rgba(8, 0, 252, .55) !important;
}
.fi-btn.fi-color-primary:not(.fi-outlined) * { color: #fff !important; }
.fi-btn.fi-color-primary:not(.fi-outlined):hover { transform: translateY(-1px); }
.fi-btn.fi-color-primary:not(.fi-outlined)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}
.fi-btn.fi-color-primary:not(.fi-outlined):hover::after { animation: nion-shine .9s var(--nion-ease-out); }

.fi-btn.fi-color-gray:not(.fi-outlined) {
    background: var(--nion-surface) !important;
    box-shadow: 0 0 0 1px var(--nion-line-2), var(--nion-shadow-sm) !important;
}

/* ---------- Inputs, badges, dropdowns, modals ---------- */
.fi-input-wrp { border-radius: 12px !important; transition: box-shadow .2s var(--nion-ease-out); }
.fi-badge { border-radius: 999px !important; font-weight: 600; }
.fi-dropdown-panel { border-radius: 16px !important; box-shadow: 0 0 0 1px var(--nion-line), var(--nion-shadow-lg) !important; animation: nion-pop .22s var(--nion-ease-out) both; }
.fi-modal-window { border-radius: var(--nion-radius-lg) !important; box-shadow: var(--nion-shadow-lg) !important; }

/* ---------- Tables ---------- */
.fi-ta-row { transition: background-color .2s var(--nion-ease-out); }
.fi-ta-row:hover { background: var(--nion-blue-50) !important; }
.fi-ta-row.nion-enter { animation-duration: .5s; }
.fi-ta-header-cell { font-size: .75rem !important; text-transform: uppercase; letter-spacing: .04em; color: var(--nion-muted) !important; }

/* Overdue badges breathe softly so they get noticed. */
.fi-badge.fi-color-danger { animation: nion-breathe 2.6s ease-in-out infinite; }

/* ---------- Live indicator ---------- */
.nion-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #E8F8F0;
    color: var(--nion-ok);
    font-size: .75rem;
    font-weight: 600;
}
.nion-live::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--nion-ok);
    box-shadow: 0 0 0 0 rgba(0, 168, 98, .5);
    animation: nion-ping 1.8s var(--nion-ease-out) infinite;
}

/* ---------- Login (hero like nion.ro) ---------- */
.fi-simple-layout {
    position: relative;
    overflow: hidden;
    background: linear-gradient(#9CB2FF 0%, #C8D5FF 38%, #EBF0FF 70%, #F4F5F9 100%);
}
.fi-simple-layout::before,
.fi-simple-layout::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.fi-simple-layout::before { width: 46vw; height: 22vw; top: 8%; left: -12%; animation: nion-drift 26s ease-in-out infinite alternate; }
.fi-simple-layout::after { width: 38vw; height: 18vw; top: 55%; right: -10%; animation: nion-drift 32s ease-in-out infinite alternate-reverse; }
.fi-simple-main {
    position: relative;
    z-index: 1;
    border-radius: var(--nion-radius-lg) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), var(--nion-shadow-lg) !important;
    animation: nion-fade-up .8s var(--nion-ease-out) both;
}
.fi-simple-header-heading { font-weight: 500 !important; letter-spacing: -.02em; }

/* ---------- Mobile ---------- */
.nion-fab {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 30;
    display: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    background-image: linear-gradient(var(--nion-blue-500), var(--nion-blue));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 28px -8px rgba(8, 0, 252, .65);
    animation: nion-pop .5s var(--nion-ease-spring) .4s both;
}
.nion-fab:active { transform: scale(.94); }

@media (max-width: 767px) {
    .nion-fab { display: inline-flex; }
    .fi-header-heading { font-size: 1.5rem !important; }
    .fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-chart { border-radius: 16px !important; }
    .fi-main { padding-bottom: 96px; }
    .fi-wi-stats-overview-stat-value { font-size: 1.5rem !important; }
}

/* ---------- Keyframes ---------- */
@keyframes nion-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nion-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes nion-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nion-shine { to { transform: translateX(120%); } }
@keyframes nion-ping { 0% { box-shadow: 0 0 0 0 rgba(0, 168, 98, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(0, 168, 98, 0); } }
@keyframes nion-breathe { 0%, 100% { filter: none; } 50% { filter: brightness(1.08) saturate(1.2); } }
@keyframes nion-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 3vh, 0) scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}