/* Muteen & Co ERP — Premium UI (login, dashboard, sales, purchase) */

:root {
    --erp-primary: #312783;
    --erp-secondary: #1D71B8;
    --erp-accent: #6366f1;
    --erp-glow: rgba(29, 113, 184, 0.35);
    --erp-surface: rgba(255, 255, 255, 0.97);
    --erp-shadow: 0 20px 50px rgba(49, 39, 131, 0.12);
    --erp-radius: 1rem;
    --erp-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Unified shell — sidebar + topbar + main share this family */
    --erp-shell-1: #151233;
    --erp-shell-2: #1a1464;
    --erp-shell-3: #122a4a;
    --erp-shell-4: #0f172a;
    --erp-shell-gradient: linear-gradient(165deg, var(--erp-shell-1) 0%, var(--erp-shell-2) 42%, var(--erp-shell-3) 78%, var(--erp-shell-4) 100%);
    --erp-shell-border: rgba(255, 255, 255, 0.09);
    --erp-shell-text: #e2e8f0;
    --erp-shell-text-muted: #94a3b8;
    --erp-shell-accent: #60a5fa;
}

/* ── Animations ── */
@keyframes erpFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes erpPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.92); }
}

@keyframes erpFloat {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-12px) translateX(6px); }
}

@keyframes erpShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes erpGradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes erpGridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(48px, 48px); }
}

@keyframes erpOrbPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.08); }
}

@keyframes erpAurora {
    0%, 100% { transform: translateX(-10%) rotate(0deg); opacity: 0.35; }
    50% { transform: translateX(10%) rotate(3deg); opacity: 0.55; }
}

@keyframes erpParticleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    25% { transform: translateY(-18px) rotate(8deg); opacity: 0.5; }
    75% { transform: translateY(12px) rotate(-6deg); opacity: 0.35; }
}

@keyframes erpIconHappy {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.12); }
}

@keyframes erpLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes erpTitleShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes erpCardGlow {
    0%, 100% { box-shadow: 0 20px 50px rgba(49, 39, 131, 0.12), 0 0 0 0 rgba(99, 102, 241, 0); }
    50% { box-shadow: 0 24px 60px rgba(29, 113, 184, 0.22), 0 0 40px rgba(99, 102, 241, 0.15); }
}

@keyframes erpShimmerSweep {
    0% { transform: translateX(-120%) skewX(-12deg); }
    100% { transform: translateX(220%) skewX(-12deg); }
}

@keyframes erpLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.erp-animate-in {
    animation: erpFadeUp 0.65s var(--erp-ease) both;
}

/* Admin pages — stable layout, no slide-up replay on every navigation */
.fi-body.fi-panel-admin:not(:has(.erp-login)) .fi-page,
.fi-body.fi-panel-admin:not(:has(.erp-login)) .fi-wi-widget,
.fi-body.fi-panel-admin:not(:has(.erp-login)) .fi-section,
.fi-body.fi-panel-admin:not(:has(.erp-login)) .erp-animate-in,
.fi-body.fi-panel-admin:not(:has(.erp-login)) .fi-wi-chart canvas,
.fi-body.fi-panel-admin:not(:has(.erp-login)) .erp-nav-item--enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Dashboard — reserve space so charts/widgets don't collapse then expand */
.fi-dashboard-page .fi-wi-chart {
    min-height: 260px;
}

.fi-dashboard-page .fi-wi-stats-overview {
    min-height: 8rem;
}

.erp-animate-in--delay-1 { animation-delay: 0.08s; }
.erp-animate-in--delay-2 { animation-delay: 0.16s; }
.erp-animate-in--delay-3 { animation-delay: 0.24s; }
.erp-animate-in--delay-4 { animation-delay: 0.32s; }

.erp-live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: erpPulse 2s ease-in-out infinite;
    margin-right: 0.35rem;
}

/* ── Login page ── */
.fi-body:has(.erp-login) {
    overflow: hidden;
}

.erp-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #0f0a2e 0%, #1a1464 35%, #0d3d6b 65%, #1e1b4b 100%);
    background-size: 300% 300%;
    animation: erpGradientFlow 14s ease infinite;
}

.erp-login__aurora {
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.25), transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(34, 197, 94, 0.12), transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.15), transparent 55%);
    animation: erpAurora 12s ease-in-out infinite;
    pointer-events: none;
}

.erp-login__particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.erp-login__particle {
    position: absolute;
    animation: erpParticleFloat 8s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

.erp-login__live {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    white-space: nowrap;
}

.erp-login__live-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #22c55e;
    animation: erpLivePulse 2s ease-in-out infinite;
}

.erp-login__live-sep {
    opacity: 0.45;
}

.erp-login__live-msg {
    color: #fde68a;
}

.erp-login__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.erp-login__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    animation: erpFloat 8s ease-in-out infinite, erpOrbPulse 6s ease-in-out infinite;
    transition: transform 0.3s ease-out;
}

.erp-login__orb--1 {
    width: 420px;
    height: 420px;
    background: #6366f1;
    top: -80px;
    left: -60px;
    animation-delay: 0s, -1s;
}

.erp-login__orb--2 {
    width: 320px;
    height: 320px;
    background: #1D71B8;
    bottom: 10%;
    right: 15%;
    animation-delay: -3s, -2s;
}

.erp-login__orb--3 {
    width: 200px;
    height: 200px;
    background: #a855f7;
    top: 40%;
    left: 35%;
    animation-delay: -5s, -3s;
}

.erp-login__orb--4 {
    width: 260px;
    height: 260px;
    background: #22c55e;
    bottom: 25%;
    left: 8%;
    opacity: 0.25;
    animation-delay: -2s, -4s;
}

.erp-login__grid {
    position: absolute;
    inset: -48px;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    animation: erpGridMove 20s linear infinite;
}

.erp-login__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 100vh;
    padding-top: 3.5rem;
}

@media (min-width: 1024px) {
    .erp-login__layout {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.erp-login__hero {
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
    color: #fff;
}

@media (min-width: 1024px) {
    .erp-login__hero {
        display: flex;
    }
}

.erp-login__logo {
    height: 3rem;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 1.5rem;
}

.erp-login__logo--float {
    animation: erpLogoFloat 4s ease-in-out infinite;
}

.erp-login__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.erp-login__title--shine {
    background: linear-gradient(90deg, #fff 0%, #c7d2fe 35%, #fff 50%, #93c5fd 65%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: erpTitleShine 5s linear infinite;
}

.erp-login__tagline {
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 28rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}

.erp-login__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.erp-login__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    opacity: 0.92;
}

.erp-login__feature-icon {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
}

.erp-login__feature-icon--bounce {
    animation: erpIconHappy 2.5s ease-in-out infinite;
}

.erp-login__feature-icon--delay-1 { animation-delay: -0.8s; }
.erp-login__feature-icon--delay-2 { animation-delay: -1.6s; }

.erp-login__feature:hover .erp-login__feature-icon {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.15);
    transition: transform 0.25s var(--erp-ease), background 0.25s ease;
}

.erp-login__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.erp-login__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--erp-surface);
    backdrop-filter: blur(16px);
    border-radius: calc(var(--erp-radius) + 4px);
    box-shadow: var(--erp-shadow);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 2rem 1.75rem;
    overflow: hidden;
}

.erp-login__card--glow {
    animation: erpCardGlow 4s ease-in-out infinite;
}

.erp-login__card-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    animation: erpShimmerSweep 5s ease-in-out infinite;
    pointer-events: none;
}

.erp-login__card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--erp-primary);
    margin: 0 0 0.35rem;
    min-height: 1.75rem;
}

.erp-login__card-title [data-erp-login-greeting] {
    display: inline-block;
}

.erp-login__card-sub {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.erp-login__form .fi-btn-color-primary {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-secondary)) !important;
    background-size: 200% auto !important;
    border: none !important;
    transition: transform 0.2s var(--erp-ease), box-shadow 0.2s var(--erp-ease), background-position 0.4s ease !important;
}

.erp-login__form .fi-btn-color-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px var(--erp-glow);
    background-position: 100% center !important;
}

.erp-login__footer {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

/* ── Dashboard hero ── */
.erp-dashboard-hero__inner {
    background: linear-gradient(135deg, var(--erp-primary) 0%, #4338ca 45%, var(--erp-secondary) 100%);
    border-radius: calc(var(--erp-radius) + 4px);
    padding: 1.75rem 1.5rem;
    color: #fff;
    box-shadow: var(--erp-shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.erp-dashboard-hero__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: erpShimmer 6s linear infinite;
    pointer-events: none;
}

.erp-dashboard-hero__content {
    position: relative;
    z-index: 1;
}

.erp-dashboard-hero__eyebrow {
    font-size: 0.8rem;
    opacity: 0.9;
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
}

.erp-dashboard-hero__title {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.erp-dashboard-hero__company {
    margin: 0;
    opacity: 0.85;
    font-size: 0.95rem;
}

.erp-dashboard-hero__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

/* ── Metric cards ── */
.erp-metric-card {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--erp-radius);
    padding: 0.85rem 1rem;
    min-width: 8.5rem;
    backdrop-filter: blur(8px);
    transition: transform 0.25s var(--erp-ease), box-shadow 0.25s var(--erp-ease);
}

.erp-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.erp-metric-card--accent {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
}

.erp-metric-card__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 0.2rem;
}

.erp-metric-card__value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.erp-metric-card__sub {
    display: block;
    font-size: 0.72rem;
    opacity: 0.8;
    margin-top: 0.15rem;
}

/* Metric cards on light backgrounds (list headers) */
.erp-screen-header .erp-metric-card {
    background: #fff;
    border: 1px solid rgba(49, 39, 131, 0.08);
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.06);
}

.erp-screen-header .erp-metric-card--warn {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(180deg, #fffbeb, #fff);
}

.erp-screen-header .erp-metric-card__label {
    color: #64748b;
}

.erp-screen-header .erp-metric-card__value {
    color: var(--erp-primary);
}

/* ── Quick action cards ── */
.erp-quick-links__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.85rem;
}

.erp-action-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: var(--erp-radius);
    text-decoration: none !important;
    color: inherit !important;
    background: #fff;
    border: 1px solid rgba(49, 39, 131, 0.08);
    box-shadow: 0 4px 14px rgba(49, 39, 131, 0.06);
    transition: transform 0.25s var(--erp-ease), box-shadow 0.25s var(--erp-ease), border-color 0.25s;
}

.erp-action-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 32px rgba(29, 113, 184, 0.18);
    border-color: rgba(29, 113, 184, 0.35);
}

.erp-action-card__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.erp-action-card__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--erp-primary);
}

.erp-action-card__sub {
    font-size: 0.72rem;
    color: #64748b;
}

.erp-action-card--pos { border-left: 3px solid #22c55e; }
.erp-action-card--pos2 { border-left: 3px solid #1D71B8; }
.erp-action-card--pos3 { border-left: 3px solid #06b6d4; }
.erp-action-card--purchase { border-left: 3px solid var(--erp-primary); }
.erp-action-card--purchase2 { border-left: 3px solid #f59e0b; }
.erp-action-card--funds { border-left: 3px solid #8b5cf6; }
.erp-action-card--reports { border-left: 3px solid #64748b; }

/* ── Screen headers (Sales / Purchase lists) ── */
.erp-screen-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: var(--erp-radius);
    border: 1px solid rgba(49, 39, 131, 0.08);
    background: linear-gradient(135deg, #fafafe 0%, #f0f7ff 100%);
    box-shadow: 0 4px 18px rgba(49, 39, 131, 0.06);
}

.erp-screen-header__inner--sales {
    border-left: 4px solid #22c55e;
}

.erp-screen-header__inner--purchase {
    border-left: 4px solid var(--erp-primary);
}

.erp-screen-header__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 0.15rem;
}

.erp-screen-header__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--erp-primary);
    margin: 0;
}

.erp-screen-header__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.erp-metric-card--compact {
    min-width: 7rem;
    padding: 0.65rem 0.85rem;
}

.erp-metric-card--compact .erp-metric-card__value {
    font-size: 1.1rem;
}

/* ── Global admin polish ── */
.fi-body.fi-panel-admin:not(:has(.erp-login)) {
    background: var(--erp-shell-gradient) !important;
    background-size: 200% 200% !important;
    animation: erpGradientFlow 22s ease infinite;
}

.fi-layout {
    background: transparent !important;
}

.fi-main {
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: clamp(0.65rem, 2vw, 1.5rem) !important;
}

.fi-main-ctn {
    background: transparent !important;
    width: 100% !important;
}

.fi-page,
.fi-page-content,
.fi-dashboard-page,
.fi-page-main {
    max-width: 100% !important;
    width: 100% !important;
}

.fi-wi {
    width: 100% !important;
    max-width: 100% !important;
}

.fi-wi-widget {
    max-width: 100% !important;
}

/* Light content cards on unified dark shell */
.fi-main .fi-section,
.fi-main .fi-wi-widget .fi-section,
.fi-main .fi-ta-ctn,
.fi-main .fi-wi-stats-overview-stat,
.fi-main .fi-wi-chart,
.fi-main .erp-page-hero,
.fi-main .erp-module-banner,
.fi-main .erp-form-hero,
.fi-main .erp-screen-header__inner,
.fi-main .erp-report-card,
.fi-main .erp-action-card {
    background: var(--erp-surface) !important;
    color: #0f172a;
}

.fi-main .fi-header-heading,
.fi-main .fi-section-header-heading {
    color: var(--erp-primary) !important;
    -webkit-text-fill-color: var(--erp-primary) !important;
}

.fi-main .erp-live-bar {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--erp-shell-text);
    backdrop-filter: blur(10px);
}

.fi-main .erp-live-bar__happy {
    color: #fde047;
}

/* Page titles on unified dark shell */
.fi-main .fi-header-heading,
.fi-main .fi-page-header-heading,
.fi-main .fi-header-subheading,
.fi-main .fi-breadcrumbs-item-label {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    background: none !important;
}

.fi-main .fi-breadcrumbs-item-label:hover {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
}

.fi-wi-stats-overview-stat {
    transition: transform 0.25s var(--erp-ease), box-shadow 0.25s var(--erp-ease) !important;
    border-radius: var(--erp-radius) !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(49, 39, 131, 0.1) !important;
}

.fi-ta-row {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fi-ta-row:hover {
    background-color: rgba(29, 113, 184, 0.04) !important;
}

.fi-header-heading {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Purchase form polish */
.erp-purchase-form .fi-section {
    border-radius: var(--erp-radius);
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.05);
}

/* ── Live status bar ── */
.erp-live-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #475569;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(29, 113, 184, 0.06));
    border: 1px solid rgba(29, 113, 184, 0.12);
    border-radius: 999px;
    width: fit-content;
}

.erp-live-bar__sep {
    opacity: 0.45;
}

/* ── Page heroes (custom Filament pages) ── */
.erp-page-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.35rem;
    border-radius: var(--erp-radius);
    border: 1px solid rgba(49, 39, 131, 0.08);
    background: linear-gradient(135deg, #fafafe 0%, #f0f7ff 100%);
    box-shadow: 0 4px 18px rgba(49, 39, 131, 0.06);
}

.erp-page-hero__icon {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(49, 39, 131, 0.15));
}

.erp-page-hero__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--erp-primary);
}

.erp-page-hero__sub {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.erp-page-hero--sales { border-left: 4px solid #22c55e; }
.erp-page-hero--purchase { border-left: 4px solid var(--erp-primary); }
.erp-page-hero--inventory { border-left: 4px solid #06b6d4; }
.erp-page-hero--parties { border-left: 4px solid #8b5cf6; }
.erp-page-hero--reports { border-left: 4px solid #64748b; }
.erp-page-hero--funds { border-left: 4px solid #f59e0b; }
.erp-page-hero--admin { border-left: 4px solid #6366f1; }

.erp-screen-header__inner--inventory { border-left: 4px solid #06b6d4; }
.erp-screen-header__inner--parties { border-left: 4px solid #8b5cf6; }
.erp-screen-header__inner--admin { border-left: 4px solid #6366f1; }
.erp-screen-header__inner--reports { border-left: 4px solid #64748b; }

/* ── Report stat cards ── */
.erp-report-card {
    background: #fff;
    border-color: rgba(49, 39, 131, 0.1) !important;
    box-shadow: 0 4px 14px rgba(49, 39, 131, 0.05);
    transition: transform 0.25s var(--erp-ease), box-shadow 0.25s var(--erp-ease), border-color 0.25s;
}

.erp-report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(29, 113, 184, 0.12);
    border-color: rgba(29, 113, 184, 0.25) !important;
}

/* ══════════════════════════════════════════
   UNIFIED SHELL — sidebar + topbar (matches main)
   ══════════════════════════════════════════ */

.fi-sidebar {
    background: linear-gradient(180deg, rgba(21, 18, 51, 0.98) 0%, rgba(26, 20, 100, 0.95) 100%) !important;
    border-right: 1px solid var(--erp-shell-border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--erp-shell-border) !important;
    padding: 0.75rem 0.875rem !important;
    min-height: 3.75rem;
}

.fi-sidebar-header .fi-logo {
    color: #ffffff !important;
    max-width: 220px;
}

.fi-sidebar-header .fi-logo img,
.fi-sidebar-header .fi-logo svg {
    filter: none !important;
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
}

.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-header .fi-logo {
    filter: none;
    background: url('/images/logo-mark.svg') center / contain no-repeat !important;
}

.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-header .fi-logo img,
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-header .fi-logo svg {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

.fi-topbar {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.fi-topbar nav,
.fi-topbar > nav {
    background-color: rgba(21, 18, 51, 0.98) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--erp-shell-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.fi-topbar-item-button,
.fi-topbar .fi-icon-btn,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    color: var(--erp-shell-text) !important;
}

.fi-topbar-item-button:hover,
.fi-topbar .fi-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Company switcher + user menu on dark topbar */
.fi-topbar .text-gray-500,
.fi-topbar label {
    color: #cbd5e1 !important;
}

.fi-topbar select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.fi-topbar .bg-primary-50,
.fi-topbar span.text-primary-600 {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #93c5fd !important;
}

.fi-topbar .fi-user-menu-trigger,
.fi-topbar .fi-user-menu-trigger .fi-user-menu-name {
    color: var(--erp-shell-text) !important;
}

.fi-ta-header-cell {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.fi-section-header {
    border-radius: var(--erp-radius) var(--erp-radius) 0 0;
}

.fi-modal-window {
    border-radius: var(--erp-radius) !important;
    overflow: hidden;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp {
    transition: box-shadow 0.2s ease;
}

/* Keyboard jump — keep focused field clear of sticky topbar / save bar */
.fi-resource-create-record-page .fi-fo-field-wrp,
.fi-resource-edit-record-page .fi-fo-field-wrp {
    scroll-margin-top: 5.5rem;
    scroll-margin-bottom: 7rem;
}

.fi-resource-create-record-page .fi-section,
.fi-resource-edit-record-page .fi-section {
    scroll-margin-top: 4.5rem;
    scroll-margin-bottom: 2rem;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px var(--erp-glow);
}

/* ── Dark mode cards (Filament dark toggle) ── */
.dark .fi-main .fi-section,
.dark .fi-main .fi-ta-ctn,
.dark .fi-main .fi-wi-stats-overview-stat {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #e2e8f0;
}

.dark .erp-live-bar {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
}

.dark .erp-page-hero,
.dark .erp-screen-header__inner,
.dark .erp-module-banner {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-color: rgba(148, 163, 184, 0.15);
}

.dark .erp-page-hero__title,
.dark .erp-screen-header__title,
.dark .erp-module-banner__title {
    color: #e2e8f0;
}

.dark .erp-page-hero__sub,
.dark .erp-screen-header__label,
.dark .erp-module-banner__sub {
    color: #94a3b8;
}

.dark .erp-report-card,
.dark .erp-action-card {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #e2e8f0 !important;
}

.dark .erp-action-card__title {
    color: #93c5fd;
}

.dark .erp-metric-card {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(148, 163, 184, 0.15);
}

.dark .erp-metric-card__value {
    color: #93c5fd;
}

.dark .fi-ta-row:hover {
    background-color: rgba(29, 113, 184, 0.08) !important;
}

.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}

/* ══════════════════════════════════════════
   HAPPY MODE — Navigation & all screens
   ══════════════════════════════════════════ */

@keyframes erpNavPop {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes erpIconWiggle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.12) rotate(-6deg); }
}

@keyframes erpBannerShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes erpHeroIconBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(4deg); }
}

/* Sidebar nav on unified dark shell */
.fi-sidebar-nav {
    gap: 0.35rem !important;
    padding-bottom: 1rem;
}

.fi-sidebar-group-label {
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.68rem !important;
}

.fi-sidebar-group[data-group-label="Inventory"] .fi-sidebar-group-label::before { content: "📦 "; }
.fi-sidebar-group[data-group-label="Sales & POS"] .fi-sidebar-group-label::before { content: "🛒 "; }
.fi-sidebar-group[data-group-label="Purchase"] .fi-sidebar-group-label::before { content: "📥 "; }
.fi-sidebar-group[data-group-label="Accounting"] .fi-sidebar-group-label::before { content: "💰 "; }
.fi-sidebar-group[data-group-label="Parties"] .fi-sidebar-group-label::before { content: "👥 "; }
.fi-sidebar-group[data-group-label="HR & Expense"] .fi-sidebar-group-label::before { content: "💼 "; }
.fi-sidebar-group[data-group-label="Reports"] .fi-sidebar-group-label::before { content: "📊 "; }
.fi-sidebar-group[data-group-label="Administration"] .fi-sidebar-group-label::before { content: "⚙️ "; }

.fi-sidebar-group[data-group-label="Inventory"] .fi-sidebar-group-label { color: #67e8f9 !important; }
.fi-sidebar-group[data-group-label="Sales & POS"] .fi-sidebar-group-label { color: #86efac !important; }
.fi-sidebar-group[data-group-label="Purchase"] .fi-sidebar-group-label { color: #c4b5fd !important; }
.fi-sidebar-group[data-group-label="Accounting"] .fi-sidebar-group-label { color: #fcd34d !important; }
.fi-sidebar-group[data-group-label="Parties"] .fi-sidebar-group-label { color: #d8b4fe !important; }
.fi-sidebar-group[data-group-label="HR & Expense"] .fi-sidebar-group-label { color: #a5b4fc !important; }
.fi-sidebar-group[data-group-label="Reports"] .fi-sidebar-group-label { color: #cbd5e1 !important; }
.fi-sidebar-group[data-group-label="Administration"] .fi-sidebar-group-label { color: #94a3b8 !important; }

.fi-sidebar-item-label {
    color: var(--erp-shell-text) !important;
}

.fi-sidebar-item-icon {
    color: var(--erp-shell-text-muted) !important;
    transition: transform 0.25s var(--erp-ease), color 0.2s ease !important;
}

.fi-sidebar-item-button {
    border-radius: 0.75rem !important;
    margin-inline: 0.25rem;
    transition: background-color 0.22s var(--erp-ease), transform 0.22s var(--erp-ease), box-shadow 0.22s ease !important;
}

.fi-sidebar-item-button:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.22), rgba(99, 102, 241, 0.12)) !important;
    box-shadow: inset 3px 0 0 var(--erp-shell-accent), 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: translateX(3px);
}

.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--erp-shell-accent) !important;
    animation: erpIconWiggle 0.5s var(--erp-ease);
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff !important;
    font-weight: 700 !important;
}

.erp-nav-item--enter {
    animation: erpNavPop 0.45s var(--erp-ease) both;
}

.fi-sidebar-nav > ul > .fi-sidebar-item:first-child .fi-sidebar-item-button:hover {
    background: rgba(34, 197, 94, 0.12) !important;
}

.fi-sidebar-group-button,
.fi-sidebar-group-collapse-button {
    color: var(--erp-shell-text-muted) !important;
}

/* ── Module banner (auto on list pages) ── */
.erp-module-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1.15rem;
    border-radius: var(--erp-radius);
    border: 1px solid rgba(49, 39, 131, 0.08);
    background: linear-gradient(135deg, #fafafe 0%, #f0f7ff 100%);
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.06);
}

.erp-module-banner__icon {
    font-size: 1.65rem;
    animation: erpHeroIconBounce 3s ease-in-out infinite;
}

.erp-module-banner__text {
    flex: 1;
    min-width: 0;
}

.erp-module-banner__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--erp-primary);
}

.erp-module-banner__sub {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.1rem;
}

.erp-module-banner__group {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: #64748b;
    border: 1px solid rgba(49, 39, 131, 0.08);
    white-space: nowrap;
}

.erp-module-banner--inventory { border-left: 4px solid #06b6d4; }
.erp-module-banner--sales { border-left: 4px solid #22c55e; }
.erp-module-banner--purchase { border-left: 4px solid var(--erp-primary); }
.erp-module-banner--funds { border-left: 4px solid #f59e0b; }
.erp-module-banner--parties { border-left: 4px solid #8b5cf6; }
.erp-module-banner--reports { border-left: 4px solid #64748b; }
.erp-module-banner--admin { border-left: 4px solid #6366f1; }

.erp-live-bar__happy {
    color: #fde047;
    transition: opacity 0.28s ease;
}

/* ── Page heroes bounce ── */
.erp-page-hero__icon {
    animation: erpHeroIconBounce 3.5s ease-in-out infinite;
}

.fi-section {
    border-radius: var(--erp-radius) !important;
    border: 1px solid rgba(49, 39, 131, 0.06) !important;
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.04) !important;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s var(--erp-ease);
}

.fi-section:hover {
    box-shadow: 0 8px 24px rgba(29, 113, 184, 0.08) !important;
}

.fi-ta-ctn {
    border-radius: var(--erp-radius) !important;
    overflow: hidden;
    border: 1px solid rgba(49, 39, 131, 0.06);
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.04);
}

.fi-ta-header {
    background: linear-gradient(180deg, #fafafe, #f8fafc) !important;
}

.fi-badge {
    transition: transform 0.2s ease;
}

.fi-badge:hover {
    transform: scale(1.05);
}

.fi-btn {
    transition: transform 0.2s var(--erp-ease), box-shadow 0.2s ease !important;
}

.fi-btn-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--erp-glow) !important;
}

.fi-breadcrumbs-item-label {
    transition: color 0.2s ease;
}

.fi-breadcrumbs-item-label:hover {
    color: var(--erp-secondary) !important;
}

.fi-pagination-item-button {
    border-radius: 0.5rem !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.fi-pagination-item-button:hover {
    transform: translateY(-1px);
}

.fi-wi-widget {
    border-radius: var(--erp-radius) !important;
}

/* ══════════════════════════════════════════
   FORM PAGES — create / edit / view chrome
   ══════════════════════════════════════════ */

.erp-form-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.35rem;
    border-radius: calc(var(--erp-radius) + 2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(49, 39, 131, 0.08);
    box-shadow: 0 8px 28px rgba(49, 39, 131, 0.07);
}

.erp-form-hero__main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: min(100%, 18rem);
}

.erp-form-hero__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    animation: erpHeroIconBounce 3.5s ease-in-out infinite;
}

.erp-form-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.erp-form-hero__title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    color: var(--erp-primary);
}

.erp-form-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.erp-form-hero__badge--create {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.erp-form-hero__badge--edit {
    background: rgba(29, 113, 184, 0.12);
    color: #1d4ed8;
}

.erp-form-hero__badge--view {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.erp-form-hero__sub {
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
    color: #64748b;
}

.erp-form-hero__tip {
    margin: 0;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-style: italic;
}

.erp-form-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.erp-form-hero__chip,
.erp-form-hero__group {
    display: inline-flex;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.erp-form-hero__chip {
    background: rgba(49, 39, 131, 0.08);
    color: var(--erp-primary);
}

.erp-form-hero__group {
    background: rgba(29, 113, 184, 0.08);
    color: var(--erp-secondary);
}

.erp-form-hero--inventory { border-left: 4px solid #06b6d4; }
.erp-form-hero--sales { border-left: 4px solid #22c55e; }
.erp-form-hero--purchase { border-left: 4px solid var(--erp-primary); }
.erp-form-hero--funds { border-left: 4px solid #f59e0b; }
.erp-form-hero--parties { border-left: 4px solid #8b5cf6; }
.erp-form-hero--admin { border-left: 4px solid #6366f1; }

.dark .erp-form-hero {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(148, 163, 184, 0.15);
}

.dark .erp-form-hero__title {
    color: #e2e8f0;
}

.dark .erp-form-hero__sub {
    color: #94a3b8;
}

.dark .erp-form-hero__tip {
    color: #64748b;
}

/* ══════════════════════════════════════════
   GLOBAL FORMS — all resource pages
   ══════════════════════════════════════════ */

/* Flat forms (no Section) — auto card wrapper */
.fi-main form.fi-form > .fi-fo-component:not(:has(.fi-section)) {
    background: var(--erp-surface) !important;
    border-radius: var(--erp-radius) !important;
    border: 1px solid rgba(49, 39, 131, 0.06) !important;
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.04) !important;
    padding: 1.25rem !important;
}

.fi-main form.fi-form > .fi-fo-component:not(:has(.fi-section)) .fi-fo-component-ctn {
    gap: 1rem !important;
}

.fi-resource-create-record-page .fi-fo-component,
.fi-resource-edit-record-page .fi-fo-component,
.fi-resource-view-record-page .fi-infolist {
    gap: 1.25rem !important;
}

.fi-main .fi-section-header {
    background: linear-gradient(90deg, rgba(49, 39, 131, 0.06) 0%, rgba(29, 113, 184, 0.04) 100%) !important;
    border-bottom: 1px solid rgba(49, 39, 131, 0.06) !important;
    padding-block: 0.85rem !important;
}

.fi-main .fi-section-header-heading {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

.fi-main .fi-section-header-description {
    color: #64748b !important;
    font-size: 0.8125rem !important;
    margin-top: 0.15rem !important;
}

.fi-main .fi-section-content {
    padding: 1.15rem 1.25rem !important;
}

.fi-main .fi-section-content-ctn {
    border-top: none !important;
}

.fi-main .fi-fo-field-wrp-label span,
.fi-main label.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    color: #334155 !important;
}

.fi-main .fi-fo-field-wrp-hint,
.fi-main .fi-fo-placeholder {
    font-size: 0.8125rem !important;
    color: #64748b !important;
}

.fi-main .fi-input-wrp,
.fi-main .fi-select-input,
.fi-main .fi-textarea-input {
    border-radius: 0.625rem !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fi-main .fi-input-wrp:focus-within {
    border-color: var(--erp-secondary) !important;
    box-shadow: 0 0 0 3px var(--erp-glow) !important;
}

.fi-main .choices__inner:focus,
.fi-main .choices.is-focused .choices__inner {
    border-color: var(--erp-secondary) !important;
    box-shadow: 0 0 0 3px var(--erp-glow) !important;
    outline: none !important;
}

.fi-main .fi-fo-fieldset {
    border-radius: 0.75rem !important;
    border: 1px solid rgba(49, 39, 131, 0.1) !important;
    background: linear-gradient(180deg, #fafafe 0%, #fff 100%) !important;
    padding: 1rem 1.15rem !important;
    margin-bottom: 0.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fi-main .fi-fo-fieldset legend {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--erp-primary) !important;
    padding-inline: 0.35rem;
}

.fi-main .fi-fo-repeater > ul > li {
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 0.75rem !important;
    background: #f8fafc !important;
    padding: 0.35rem !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 2px 8px rgba(49, 39, 131, 0.04) !important;
}

.fi-main .fi-fo-repeater-item-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
    background: linear-gradient(90deg, rgba(49, 39, 131, 0.06), rgba(29, 113, 184, 0.04)) !important;
    padding: 0.625rem 1rem !important;
}

.fi-main .fi-fo-tabs-tab {
    font-weight: 600 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.fi-main .fi-fo-tabs-tab.fi-active {
    color: var(--erp-primary) !important;
    border-color: var(--erp-secondary) !important;
}

.fi-main .fi-fo-checkbox-list,
.fi-main .fi-fo-radio {
    gap: 0.5rem !important;
}

.fi-main .fi-fo-toggle,
.fi-main .fi-fo-checkbox-list .fi-checkbox-input {
    transition: transform 0.15s ease;
}

.fi-main .fi-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: 1.5rem !important;
    padding: 1rem 1.25rem !important;
    border-radius: var(--erp-radius) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(49, 39, 131, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(49, 39, 131, 0.06) !important;
}

.fi-main .fi-form-actions .fi-btn {
    min-height: 2.5rem;
    padding-inline: 1.25rem !important;
    font-weight: 600 !important;
}

/* Infolist (view pages) */
.fi-main .fi-infolist-entry-wrapper {
    border-radius: 0.625rem !important;
    padding: 0.65rem 0.85rem !important;
    background: rgba(248, 250, 252, 0.8) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    transition: background 0.2s ease;
}

.fi-main .fi-infolist-entry-wrapper:hover {
    background: rgba(238, 244, 251, 0.95) !important;
}

.fi-main .fi-infolist-entry-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b !important;
}

.fi-main .fi-infolist-entry-content {
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* Relation managers */
.fi-main .fi-resource-relation-manager {
    border-radius: var(--erp-radius) !important;
    overflow: hidden;
    border: 1px solid rgba(49, 39, 131, 0.06) !important;
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.04) !important;
}

.fi-main .fi-resource-relation-manager .fi-section-header {
    background: linear-gradient(90deg, rgba(49, 39, 131, 0.05), rgba(29, 113, 184, 0.03)) !important;
}

/* Shared data tables (custom pages) */
.erp-data-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--erp-radius);
    box-shadow: 0 4px 16px rgba(49, 39, 131, 0.04);
}

.erp-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: #fff;
}

.erp-data-table th,
.erp-data-table td {
    padding: 0.625rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.erp-data-table th.num,
.erp-data-table td.num {
    text-align: right;
    white-space: nowrap;
}

.erp-data-table thead th {
    background: linear-gradient(180deg, #fafafe, #f8fafc);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.erp-data-table tbody tr:hover {
    background: rgba(29, 113, 184, 0.04);
}

/* Product stock cost panel */
.product-stock-cost__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.product-stock-cost__card {
    padding: 0.85rem 1rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-stock-cost__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.1);
}

.product-stock-cost__card--muted {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
}

.product-stock-cost__card--avg-pack {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
}

.product-stock-cost__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.product-stock-cost__value {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.product-stock-cost__heading {
    margin: 1rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--erp-primary);
}

.product-stock-cost__hint {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.product-stock-cost__table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.625rem;
    margin-bottom: 0.75rem;
}

.product-stock-cost__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: #fff;
}

.product-stock-cost__table th,
.product-stock-cost__table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.product-stock-cost__table th.num,
.product-stock-cost__table td.num {
    text-align: right;
    white-space: nowrap;
}

.product-stock-cost__table thead th {
    background: linear-gradient(180deg, #fafafe, #f8fafc);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}

.product-stock-cost__row--active {
    background: rgba(240, 253, 244, 0.8);
}

.product-stock-cost__badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
}

.product-stock-cost__avg {
    font-weight: 700;
    color: #15803d;
}

.product-stock-cost__table td.empty {
    color: #94a3b8;
    text-align: center;
}

.dark .fi-main .fi-fo-field-wrp-label span,
.dark .fi-main label.fi-fo-field-wrp-label {
    color: #cbd5e1 !important;
}

.dark .fi-main .fi-input-wrp,
.dark .fi-main .fi-select-input,
.dark .fi-main .fi-textarea-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: #e2e8f0 !important;
}

.dark .fi-main .fi-fo-fieldset {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark .fi-main .fi-fo-fieldset legend {
    color: #93c5fd !important;
}

.dark .fi-main .fi-fo-repeater > ul > li {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark .fi-main .fi-form-actions {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

.dark .fi-main .fi-infolist-entry-wrapper {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

.dark .fi-main .fi-infolist-entry-content {
    color: #e2e8f0 !important;
}

.dark .product-stock-cost__card {
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.5) 0%, rgba(22, 101, 52, 0.35) 100%);
    border-color: #166534;
}

.dark .product-stock-cost__card--muted {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border-color: #334155;
}

.dark .product-stock-cost__value,
.dark .product-stock-cost__heading {
    color: #f8fafc;
}

.dark .product-stock-cost__table {
    background: rgba(15, 23, 42, 0.6);
}

.dark .product-stock-cost__table thead th {
    background: rgba(30, 41, 59, 0.9);
}

    @media (max-width: 1023px) {
        .fi-main {
            padding-inline: 0.5rem !important;
        }

        .erp-quick-links__grid {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        }
    }

    @media (min-width: 1280px) {
        .fi-main {
            padding-inline: 1.25rem !important;
        }
    }

    @media (min-width: 1536px) {
        .fi-main {
            padding-inline: 1.75rem !important;
        }
    }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fi-body.fi-panel-admin:not(:has(.erp-login)),
    .erp-animate-in,
    .erp-login__orb,
    .erp-login__grid,
    .erp-login__aurora,
    .erp-login__particle,
    .erp-login__logo--float,
    .erp-login__title--shine,
    .erp-login__feature-icon--bounce,
    .erp-login__card--glow,
    .erp-login__card-shimmer,
    .erp-login__live-dot,
    .erp-live-dot,
    .erp-dashboard-hero__inner::after,
    .fi-wi-chart canvas {
        animation: none !important;
    }

    .erp-page-hero__icon,
    .erp-form-hero__icon,
    .erp-module-banner__icon,
    .erp-nav-item--enter {
        animation: none !important;
    }

    .fi-sidebar-item-active .fi-sidebar-item-icon,
    .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
        animation: none !important;
    }

    .erp-action-card:hover,
    .erp-metric-card:hover,
    .fi-wi-stats-overview-stat:hover,
    .erp-report-card:hover,
    .fi-sidebar-item-button:hover {
        transform: none !important;
    }
}

/* erp-login-mobile-fix */
@media (max-width: 1023px) {
    .fi-body:has(.erp-login) {
        overflow: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    .erp-login {
        min-height: 100dvh !important;
        height: auto !important;
        animation: none !important;
        background-size: cover !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .erp-login__aurora,
    .erp-login__orb,
    .erp-login__grid,
    .erp-login__particles,
    .erp-login__logo--float,
    .erp-login__title--shine,
    .erp-login__feature-icon--bounce,
    .erp-login__card--glow,
    .erp-login__card-shimmer {
        animation: none !important;
    }
    .erp-login__particles { display: none !important; }
    .erp-login__layout {
        min-height: auto !important;
        padding-top: 3.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .erp-login__panel { width: 100% !important; padding: 1rem !important; }
    .erp-login__card { max-width: 100% !important; }
}