/* NuFactureren Standalone Portal — CSS v3.0 */
/* 10 Login Themes + 10 Portal Themes + 3 Layouts */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --nfp-primary: #2563eb;
    --nfp-primary-light: #dbeafe;
    --nfp-primary-dark: #1e40af;
    --nfp-accent: #1e40af;
    --nfp-success: #059669;
    --nfp-success-light: #d1fae5;
    --nfp-warning: #d97706;
    --nfp-warning-light: #fef3c7;
    --nfp-danger: #dc2626;
    --nfp-danger-light: #fee2e2;
    --nfp-slate-50: #f8fafc;
    --nfp-slate-100: #f1f5f9;
    --nfp-slate-200: #e2e8f0;
    --nfp-slate-300: #cbd5e1;
    --nfp-slate-400: #94a3b8;
    --nfp-slate-500: #64748b;
    --nfp-slate-600: #475569;
    --nfp-slate-700: #334155;
    --nfp-slate-800: #1e293b;
    --nfp-slate-900: #0f172a;
    --nfp-bg: #f8fafc;
    --nfp-card-bg: #ffffff;
    --nfp-radius-card: 14px;
    --nfp-radius-input: 12px;
    --nfp-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nfp-login-gradient: linear-gradient(135deg, #f8fafc, #eef2ff);
    --nfp-sidebar-color: #0f172a;
    --nfp-logo-max-h: 48px;
}

body {
    font-family: var(--nfp-font-family);
    background: var(--nfp-bg);
    color: var(--nfp-slate-700);
    line-height: 1.6;
    min-height: 100vh;
}


/* ========================================================= */
/*  LOGIN — BASE                                              */
/* ========================================================= */
.nfp-login-wrap {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 24px;
    background: var(--nfp-login-gradient);
}
.nfp-login-card {
    background: var(--nfp-card-bg);
    border-radius: calc(var(--nfp-radius-card) + 6px);
    border: 1px solid var(--nfp-slate-200);
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
    padding: 48px 40px;
    max-width: 420px; width: 100%;
    text-align: center;
}
.nfp-login-logo { max-height: var(--nfp-logo-max-h); max-width: min(100%, 240px); margin-bottom: 24px; object-fit: contain; }
.nfp-login-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--nfp-primary), var(--nfp-accent));
    color: #fff; font-size: 24px; font-weight: 800;
    border-radius: var(--nfp-radius-card); margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(37,99,235,.3);
}
.nfp-login-title { font-size: 22px; font-weight: 700; color: var(--nfp-slate-900); margin-bottom: 4px; }
.nfp-login-subtitle { font-size: 14px; color: var(--nfp-slate-500); margin-bottom: 28px; }
.nfp-login-form { text-align: left; }
.nfp-login-footer { margin-top: 20px; font-size: 12px; color: var(--nfp-slate-400); }
.nfp-login-support-links { margin-top: 10px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.nfp-login-support-links a { color: var(--nfp-accent); text-decoration: none; font-weight: 600; }
.nfp-login-support-links a:hover { text-decoration: underline; }
.nfp-forgot-link { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--nfp-slate-500); text-decoration: none; }
.nfp-forgot-link:hover { color: var(--nfp-primary); text-decoration: underline; }

/* Footer Links (login & portal) */
.nfp-login-links { margin-top: 24px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.nfp-login-links a { font-size: 12px; color: var(--nfp-slate-500); text-decoration: none; font-weight: 500; transition: color .15s; }
.nfp-login-links a:hover { color: var(--nfp-primary); text-decoration: underline; }
.nfp-login-copyright { margin-top: 12px; font-size: 11px; color: var(--nfp-slate-400); text-align: center; }

/* Split sidebar extras */
.nfp-login-sidebar {
    display: none;
    flex-direction: column; justify-content: center; align-items: center; text-align: center;
    padding: 48px 32px; color: #fff;
    position: relative; overflow: hidden;
}
.nfp-login-sidebar::before {
    content: ''; position: absolute; inset: 0; opacity: .07;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 24px 24px;
}
.nfp-login-sidebar > * { position: relative; z-index: 1; }
.nfp-login-sidebar .sidebar-logo { max-height: 64px; margin-bottom: 20px; object-fit: contain; }
.nfp-login-sidebar .sidebar-badge {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 20px;
}
.nfp-login-sidebar h2 { font-size: 24px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.nfp-login-sidebar p { font-size: 13px; opacity: .7; line-height: 1.6; }
.nfp-login-sidebar .features { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; text-align: left; }
.nfp-login-sidebar .feature-row { display: flex; align-items: center; gap: 8px; opacity: .65; }
.nfp-login-sidebar .sidebar-links { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nfp-login-sidebar .sidebar-links a { font-size: 11px; color: rgba(255,255,255,.5); text-decoration: none; }
.nfp-login-sidebar .sidebar-links a:hover { color: rgba(255,255,255,.9); text-decoration: underline; }


/* ── Form Fields ── */
.nfp-field { margin-bottom: 18px; }
.nfp-field label { display: block; font-size: 13px; font-weight: 600; color: var(--nfp-slate-700); margin-bottom: 6px; }
.nfp-field label i { color: var(--nfp-slate-400); width: 16px; }
.nfp-input {
    width: 100%; padding: 11px 16px;
    border: 1px solid var(--nfp-slate-200); border-radius: var(--nfp-radius-input);
    font-size: 15px; font-family: inherit; color: var(--nfp-slate-800);
    background: var(--nfp-card-bg);
    transition: border-color .2s, box-shadow .2s;
}
.nfp-input:focus { outline: none; border-color: var(--nfp-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.nfp-input::placeholder { color: var(--nfp-slate-400); }
.nfp-error {
    margin-bottom: 16px; padding: 12px 16px;
    background: var(--nfp-danger-light); color: #b91c1c;
    border-radius: 10px; font-size: 14px; text-align: left;
}

/* ── Buttons ── */
.nfp-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; background: var(--nfp-primary); color: #fff;
    font-weight: 600; font-size: 15px; font-family: inherit;
    border: none; border-radius: var(--nfp-radius-input); cursor: pointer;
    box-shadow: 0 4px 14px rgba(37,99,235,.3);
    transition: all .2s; text-decoration: none;
}
.nfp-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.nfp-btn-full { width: 100%; }
.nfp-btn-style-gradient .nfp-btn-primary { background: linear-gradient(135deg, var(--nfp-primary), var(--nfp-accent)); }
.nfp-btn-style-outline .nfp-btn-primary { background: transparent; color: var(--nfp-primary); border: 2px solid var(--nfp-primary); box-shadow: none; }
.nfp-btn-style-outline .nfp-btn-primary:hover { background: var(--nfp-primary); color: #fff; }
.nfp-btn-style-glow .nfp-btn-primary { box-shadow: 0 0 20px rgba(37,99,235,.5); }

.nfp-btn-secondary-sm, .nfp-btn-primary-sm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    border-radius: calc(var(--nfp-radius-input) - 2px); cursor: pointer;
    transition: all .15s; text-decoration: none; border: none; font-family: inherit;
}
.nfp-btn-secondary-sm { background: var(--nfp-slate-100); color: var(--nfp-slate-600); }
.nfp-btn-secondary-sm:hover { background: var(--nfp-slate-200); }
.nfp-btn-primary-sm { background: var(--nfp-primary); color: #fff; }
.nfp-btn-primary-sm:hover { filter: brightness(1.1); }

.nfp-btn-header {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: rgba(255,255,255,.1);
    color: #fff; font-size: 13px; font-weight: 500; font-family: inherit;
    border: 1px solid rgba(255,255,255,.2); border-radius: calc(var(--nfp-radius-input) - 4px);
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.nfp-btn-header:hover { background: rgba(255,255,255,.2); }


/* ========================================================= */
/*  LOGIN THEME 1: MODERN (default centered card)             */
/* ========================================================= */
/* Default styling — no overrides needed */

/* ========================================================= */
/*  LOGIN THEME 2: SPLIT                                      */
/* ========================================================= */
.nfp-theme-split .nfp-login-wrap { display: flex; padding: 0; min-height: 100vh; }
.nfp-theme-split .nfp-login-sidebar { display: flex; flex: 0 0 42%; background: var(--nfp-login-gradient); }
.nfp-theme-split .nfp-login-card {
    border-radius: 0; border: none; box-shadow: none; max-width: none;
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 48px 60px;
}

/* ========================================================= */
/*  LOGIN THEME 3: CORPORATE                                  */
/* ========================================================= */
.nfp-theme-corporate .nfp-login-wrap { background: var(--nfp-bg); }
.nfp-theme-corporate .nfp-login-card {
    box-shadow: 0 20px 60px rgba(0,0,0,.08); overflow: hidden; padding: 0;
}
.nfp-theme-corporate .corp-top-bar {
    height: 4px; background: linear-gradient(90deg, var(--nfp-primary), var(--nfp-accent));
}
.nfp-theme-corporate .corp-inner { padding: 40px; }
.nfp-theme-corporate .corp-info-banner {
    padding: 10px 14px; border-radius: 10px;
    background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2);
    font-size: 13px; color: var(--nfp-primary); margin-bottom: 20px; text-align: left;
}

/* ========================================================= */
/*  LOGIN THEME 4: BOLD                                       */
/* ========================================================= */
.nfp-theme-bold .nfp-login-wrap { padding: 0; flex-direction: column; background: var(--nfp-bg); }
.nfp-theme-bold .nfp-login-hero {
    background: var(--nfp-login-gradient);
    padding: 48px 24px 72px; text-align: center; color: #fff;
    position: relative; overflow: hidden;
}
.nfp-theme-bold .nfp-login-hero::before {
    content: ''; position: absolute; inset: 0; opacity: .08;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 24px 24px;
}
.nfp-theme-bold .nfp-login-hero > * { position: relative; z-index: 1; }
.nfp-theme-bold .nfp-login-card {
    margin: -48px auto 48px; max-width: 400px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* ========================================================= */
/*  LOGIN THEME 5: GLASS                                      */
/* ========================================================= */
.nfp-theme-glass .nfp-login-wrap {
    background: linear-gradient(160deg, #0f172a, rgba(37,99,235,.15), #0f172a);
    position: relative; overflow: hidden;
}
.nfp-theme-glass .nfp-login-wrap::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 300px; height: 300px; border-radius: 50%;
    background: var(--nfp-primary); opacity: .12; filter: blur(60px);
}
.nfp-theme-glass .nfp-login-wrap::after {
    content: ''; position: absolute; bottom: -80px; left: -80px;
    width: 300px; height: 300px; border-radius: 50%;
    background: var(--nfp-accent); opacity: .12; filter: blur(60px);
}
.nfp-theme-glass .nfp-login-card {
    background: rgba(255,255,255,.06); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1); color: #fff;
    position: relative; z-index: 1;
}
.nfp-theme-glass .nfp-login-title,
.nfp-theme-glass .nfp-login-subtitle { color: rgba(255,255,255,.85); }
.nfp-theme-glass .nfp-field label { color: rgba(255,255,255,.7); }
.nfp-theme-glass .nfp-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #fff; }
.nfp-theme-glass .nfp-input::placeholder { color: rgba(255,255,255,.35); }
.nfp-theme-glass .nfp-login-footer { color: rgba(255,255,255,.4); }
.nfp-theme-glass .nfp-login-links a { color: rgba(255,255,255,.5); }
.nfp-theme-glass .nfp-login-links a:hover { color: rgba(255,255,255,.9); }
.nfp-theme-glass .nfp-login-copyright { color: rgba(255,255,255,.3); }
.nfp-theme-glass .nfp-forgot-link { color: rgba(255,255,255,.5); }
.nfp-theme-glass .nfp-forgot-link:hover { color: rgba(255,255,255,.9); }

/* ========================================================= */
/*  LOGIN THEME 6: MINIMAL                                    */
/* ========================================================= */
.nfp-theme-minimal .nfp-login-wrap { background: var(--nfp-bg); }
.nfp-theme-minimal .nfp-login-card { border: none; box-shadow: none; max-width: 360px; }

/* ========================================================= */
/*  LOGIN THEME 7: ELEGANT                                    */
/* ========================================================= */
.nfp-theme-elegant .nfp-login-wrap { background: #0f172a; padding: 0; }
.nfp-theme-elegant .nfp-login-card {
    background: var(--nfp-login-gradient); max-width: none; width: 100%; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: none; border-radius: 0; position: relative; overflow: hidden;
}
.nfp-theme-elegant .nfp-login-card::before {
    content: ''; position: absolute; top: 15%; right: 10%;
    width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%;
}
.nfp-theme-elegant .elegant-inner { position: relative; z-index: 1; max-width: 380px; width: 100%; }
.nfp-theme-elegant .nfp-login-title { color: #fff; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; }
.nfp-theme-elegant .nfp-login-subtitle { color: rgba(255,255,255,.5); }
.nfp-theme-elegant .nfp-login-divider { width: 40px; height: 2px; background: linear-gradient(90deg, var(--nfp-primary), var(--nfp-accent)); margin: 16px auto; }
.nfp-theme-elegant .nfp-field label { color: rgba(255,255,255,.6); }
.nfp-theme-elegant .nfp-input {
    background: rgba(255,255,255,.04); backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,.08); color: #fff;
    border-radius: 0; border-left: none; border-right: none; border-top: none; padding-left: 0;
}
.nfp-theme-elegant .nfp-input::placeholder { color: rgba(255,255,255,.3); }
.nfp-theme-elegant .nfp-login-footer { color: rgba(255,255,255,.3); }
.nfp-theme-elegant .nfp-login-links a { color: rgba(255,255,255,.4); }
.nfp-theme-elegant .nfp-login-links a:hover { color: rgba(255,255,255,.8); }
.nfp-theme-elegant .nfp-login-copyright { color: rgba(255,255,255,.25); }
.nfp-theme-elegant .nfp-forgot-link { color: rgba(255,255,255,.4); }

/* ========================================================= */
/*  LOGIN THEME 8: BEACON (reference-style premium portal)    */
/* ========================================================= */
.nfp-theme-beacon .nfp-login-wrap {
    display: block;
    background: linear-gradient(135deg, #f4f7fb 0%, #ffffff 100%);
    min-height: 100vh;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.nfp-theme-beacon .nfp-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255,255,255,.92);
    color: var(--nfp-slate-600);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.nfp-theme-beacon .nfp-mode-dark-icon { display: none; }
.nfp-beacon-shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: stretch;
}
.nfp-beacon-brand {
    width: 50%;
    background: linear-gradient(135deg, var(--nfp-primary) 0%, var(--nfp-accent) 100%);
    color: #fff;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.nfp-beacon-brand-box {
    width: 192px;
    height: 120px;
    background: #fff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    margin-bottom: 28px;
    padding: 18px;
}
.nfp-beacon-brand-box.is-mobile {
    width: 132px;
    height: 84px;
    border-radius: 20px;
    margin: 0 auto 16px;
}
.nfp-beacon-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nfp-beacon-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--nfp-primary), var(--nfp-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}
.nfp-beacon-brand h2 {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 14px;
}
.nfp-beacon-brand p {
    font-size: 20px;
    line-height: 1.45;
    color: rgba(219, 234, 254, .96);
    max-width: 520px;
}
.nfp-beacon-features {
    margin-top: 32px;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.nfp-beacon-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: rgba(239, 246, 255, .96);
}
.nfp-beacon-feature i {
    color: #fde68a;
}
.nfp-beacon-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 32px;
    position: relative;
    z-index: 1;
}
.nfp-beacon-mobile-brand {
    display: none;
    text-align: center;
    margin-bottom: 24px;
}
.nfp-beacon-mobile-brand h2 {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--nfp-slate-900);
}
.nfp-theme-beacon .nfp-beacon-card {
    width: 100%;
    max-width: 460px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .08);
    padding: 40px;
}
.nfp-beacon-card-head {
    margin-bottom: 26px;
}
.nfp-theme-beacon .nfp-login-title {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 10px;
}
.nfp-theme-beacon .nfp-login-subtitle {
    font-size: 16px;
    color: var(--nfp-slate-500);
    margin-bottom: 0;
}
.nfp-theme-beacon .nfp-field {
    margin-bottom: 22px;
}
.nfp-theme-beacon .nfp-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--nfp-slate-700);
    margin-bottom: 8px;
}
.nfp-theme-beacon .nfp-input {
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
}
.nfp-theme-beacon .nfp-input:focus {
    border-color: var(--nfp-primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.1);
    background: #fff;
}
.nfp-theme-beacon .nfp-btn-primary {
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(37,99,235,.24);
}
.nfp-theme-beacon .nfp-btn-primary:hover {
    transform: translateY(-1px);
}
.nfp-theme-beacon .nfp-forgot-link {
    margin-top: 18px;
    font-size: 14px;
}
.nfp-beacon-footer {
    width: 100%;
    max-width: 460px;
    margin-top: 20px;
    text-align: center;
}
.nfp-theme-beacon .nfp-login-wrap::before {
    content: '';
    position: absolute;
    inset: auto -140px -180px auto;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37,99,235,.12), rgba(37,99,235,0));
    pointer-events: none;
}
.nfp-theme-beacon .nfp-login-wrap::after {
    content: '';
    position: absolute;
    inset: -160px auto auto -120px;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(30,64,175,.08), rgba(30,64,175,0));
    pointer-events: none;
}
.nfp-theme-beacon .nfp-login-links {
    margin-top: 0;
    gap: 18px;
}
.nfp-theme-beacon .nfp-login-links a {
    font-size: 12px;
}

html.nfp-mode-dark .nfp-theme-beacon .nfp-login-wrap {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%);
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-login-wrap::before {
    background: radial-gradient(circle, rgba(59,130,246,.14), rgba(59,130,246,0));
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-login-wrap::after {
    background: radial-gradient(circle, rgba(147,197,253,.08), rgba(147,197,253,0));
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-theme-toggle {
    background: rgba(17,24,39,.94);
    border-color: rgba(255,255,255,.08);
    color: #f8fafc;
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-mode-light-icon { display: none; }
html.nfp-mode-dark .nfp-theme-beacon .nfp-mode-dark-icon { display: inline-block; }
html.nfp-mode-dark .nfp-theme-beacon .nfp-beacon-content {
    background: transparent;
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-beacon-mobile-brand h2 {
    color: #fff;
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-beacon-card {
    background: #1f2937;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-login-title {
    color: #fff;
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-login-subtitle,
html.nfp-mode-dark .nfp-theme-beacon .nfp-field label,
html.nfp-mode-dark .nfp-theme-beacon .nfp-forgot-link,
html.nfp-mode-dark .nfp-theme-beacon .nfp-login-links a,
html.nfp-mode-dark .nfp-theme-beacon .nfp-login-copyright {
    color: rgba(226,232,240,.78);
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-input {
    background: #111827;
    border-color: #374151;
    color: #fff;
}
html.nfp-mode-dark .nfp-theme-beacon .nfp-input::placeholder {
    color: rgba(255,255,255,.28);
}

/* ========================================================= */
/*  LOGIN THEME 9: WAVE (animated mesh gradient)              */
/* ========================================================= */
@keyframes nfp-wave-shift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.nfp-theme-wave .nfp-login-wrap {
    background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe, #00f2fe);
    background-size: 400% 400%;
    animation: nfp-wave-shift 15s ease infinite;
}
.nfp-theme-wave .nfp-login-card {
    background: rgba(255,255,255,.92); backdrop-filter: blur(20px);
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
    border: 1px solid rgba(255,255,255,.6);
}
.nfp-theme-wave .nfp-login-links a { color: rgba(255,255,255,.8); }
.nfp-theme-wave .nfp-login-links a:hover { color: #fff; }
.nfp-theme-wave .nfp-login-copyright { color: rgba(255,255,255,.6); }

/* ========================================================= */
/*  LOGIN THEME 10: AURORA (northern lights)                  */
/* ========================================================= */
@keyframes nfp-aurora-glow {
    0%,100% { opacity: .3; transform: scale(1) translateY(0); }
    50% { opacity: .5; transform: scale(1.1) translateY(-20px); }
}
.nfp-theme-aurora .nfp-login-wrap {
    background: #0a0e27;
    position: relative; overflow: hidden;
}
.nfp-theme-aurora .nfp-login-wrap::before {
    content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 100%;
    background: linear-gradient(135deg, transparent 20%, rgba(37,99,235,.15) 40%, rgba(16,185,129,.12) 55%, rgba(139,92,246,.1) 70%, transparent 80%);
    filter: blur(80px); animation: nfp-aurora-glow 8s ease-in-out infinite;
}
.nfp-theme-aurora .nfp-login-wrap::after {
    content: ''; position: absolute; bottom: -30%; right: -10%; width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(139,92,246,.15), transparent 60%);
    filter: blur(60px); animation: nfp-aurora-glow 6s ease-in-out infinite 2s;
}
.nfp-theme-aurora .nfp-login-card {
    background: rgba(255,255,255,.04); backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.08); color: #fff;
    position: relative; z-index: 1;
    box-shadow: 0 0 40px rgba(37,99,235,.1), 0 0 80px rgba(139,92,246,.05);
}
.nfp-theme-aurora .nfp-login-title { color: #fff; }
.nfp-theme-aurora .nfp-login-subtitle { color: rgba(255,255,255,.6); }
.nfp-theme-aurora .nfp-field label { color: rgba(255,255,255,.7); }
.nfp-theme-aurora .nfp-input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #fff; }
.nfp-theme-aurora .nfp-input::placeholder { color: rgba(255,255,255,.3); }
.nfp-theme-aurora .nfp-login-footer { color: rgba(255,255,255,.35); }
.nfp-theme-aurora .nfp-login-links a { color: rgba(255,255,255,.45); }
.nfp-theme-aurora .nfp-login-links a:hover { color: rgba(255,255,255,.9); }
.nfp-theme-aurora .nfp-login-copyright { color: rgba(255,255,255,.25); }
.nfp-theme-aurora .nfp-forgot-link { color: rgba(255,255,255,.45); }
.nfp-theme-aurora .nfp-forgot-link:hover { color: rgba(255,255,255,.9); }
.nfp-theme-aurora .nfp-btn-primary { box-shadow: 0 0 20px rgba(37,99,235,.4); }


/* ========================================================= */
/*  LAYOUT: TOP-NAV (default)                                 */
/* ========================================================= */
.nfp-app { min-height: 100vh; display: flex; flex-direction: column; }
.nfp-app-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--nfp-slate-900), var(--nfp-primary-dark));
    color: #fff;
}
.nfp-app-header-left { display: flex; align-items: center; gap: 12px; }
.nfp-app-logo { max-height: var(--nfp-logo-max-h); max-width: 180px; width: auto; height: 32px; object-fit: contain; }
.nfp-app-name { font-size: 17px; font-weight: 700; }
.nfp-app-header-right { display: flex; align-items: center; gap: 12px; }
.nfp-user-name { font-size: 13px; opacity: .85; }
.nfp-user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
}

/* Header styles */
.nfp-header-solid .nfp-app-header { background: var(--nfp-primary); }
.nfp-header-minimal .nfp-app-header { background: #fff; color: var(--nfp-slate-800); border-bottom: 1px solid var(--nfp-slate-200); }
.nfp-header-minimal .nfp-app-name { color: var(--nfp-slate-900); }
.nfp-header-minimal .nfp-user-name { color: var(--nfp-slate-500); opacity: 1; }
.nfp-header-minimal .nfp-btn-header { color: var(--nfp-slate-600); background: var(--nfp-slate-100); border-color: var(--nfp-slate-200); }
.nfp-header-minimal .nfp-user-avatar { background: var(--nfp-slate-200); color: var(--nfp-slate-600); }
.nfp-header-dark .nfp-app-header { background: var(--nfp-slate-900); }

/* Nav */
.nfp-nav {
    display: flex; gap: 0; background: #fff;
    border-bottom: 2px solid var(--nfp-slate-200);
    padding: 0 16px; overflow-x: auto;
}
.nfp-nav-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 20px; font-size: 14px; font-weight: 500;
    color: var(--nfp-slate-500); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    white-space: nowrap; transition: all .15s;
}
.nfp-nav-link:hover { color: var(--nfp-slate-700); }
.nfp-nav-link.active { color: var(--nfp-primary); border-bottom-color: var(--nfp-primary); font-weight: 600; }
.nfp-content { flex: 1; padding: 24px; max-width: 960px; margin: 0 auto; width: 100%; }

/* ========================================================= */
/*  LAYOUT: SIDEBAR                                           */
/* ========================================================= */
.nfp-layout-sidebar .nfp-app { flex-direction: row; }
.nfp-layout-sidebar .nfp-app-header { display: none; }
.nfp-layout-sidebar .nfp-nav { display: none; }
.nfp-sidebar { display: none; width: 240px; min-width: 240px; background: var(--nfp-sidebar-color); flex-direction: column; min-height: 100vh; }
.nfp-layout-sidebar .nfp-sidebar { display: flex; }
.nfp-sidebar-brand { padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 12px; }
.nfp-sidebar-brand img { max-height: 28px; max-width: 150px; width: auto; object-fit: contain; }
.nfp-sidebar-brand .brand-badge {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--nfp-primary); display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 14px;
}
.nfp-sidebar-brand span { color: #fff; font-size: 14px; font-weight: 700; }
.nfp-sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nfp-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; font-size: 13px; color: rgba(255,255,255,.55);
    text-decoration: none; transition: all .15s; border-left: 3px solid transparent;
}
.nfp-sidebar-link:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.04); }
.nfp-sidebar-link.active { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--nfp-primary); font-weight: 600; }
.nfp-sidebar-link i { width: 18px; text-align: center; font-size: 14px; }
.nfp-sidebar-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.25); padding: 16px 18px 6px; }
.nfp-sidebar-user { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; }
.nfp-sidebar-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.nfp-sidebar-user .info { flex: 1; }
.nfp-sidebar-user .name { font-size: 12px; font-weight: 600; color: #fff; }
.nfp-sidebar-user .email { font-size: 10px; color: rgba(255,255,255,.4); }
.nfp-layout-sidebar .nfp-main-content { flex: 1; display: flex; flex-direction: column; }
.nfp-layout-sidebar .nfp-content { max-width: none; }
.nfp-layout-sidebar .nfp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--nfp-slate-200); }
.nfp-topbar { display: none; }
.nfp-topbar-title { font-size: 14px; font-weight: 700; color: var(--nfp-slate-900); }
.nfp-topbar-right { display: flex; align-items: center; gap: 10px; }

/* ========================================================= */
/*  LAYOUT: COMPACT                                           */
/* ========================================================= */
.nfp-layout-compact .nfp-app-header { padding: 10px 20px; }
.nfp-layout-compact .nfp-app-name { font-size: 14px; }
.nfp-layout-compact .nfp-nav { padding: 0 12px; }
.nfp-layout-compact .nfp-nav-link { padding: 10px 14px; font-size: 12px; }


/* ========================================================= */
/*  DASHBOARD COMPONENTS                                      */
/* ========================================================= */
.nfp-welcome { margin-bottom: 24px; }
.nfp-welcome h2 { font-size: 22px; font-weight: 700; color: var(--nfp-slate-900); }
.nfp-welcome h2 span { color: var(--nfp-primary); }
.nfp-welcome p { font-size: 13px; color: var(--nfp-slate-500); margin-top: 2px; }
.nfp-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

/* KPI Grid */
.nfp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.nfp-kpi-card {
    background: var(--nfp-card-bg); border: 1px solid var(--nfp-slate-200);
    border-radius: var(--nfp-radius-card); padding: 20px; text-align: center;
    transition: all .15s;
}
.nfp-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.nfp-kpi-icon { font-size: 24px; margin-bottom: 8px; }
.nfp-kpi-primary .nfp-kpi-icon { color: var(--nfp-primary); }
.nfp-kpi-warning .nfp-kpi-icon { color: var(--nfp-warning); }
.nfp-kpi-success .nfp-kpi-icon { color: var(--nfp-success); }
.nfp-kpi-danger .nfp-kpi-icon { color: var(--nfp-danger); }
.nfp-kpi-value { font-size: 28px; font-weight: 800; color: var(--nfp-slate-900); margin-bottom: 4px; }
.nfp-kpi-label { font-size: 13px; color: var(--nfp-slate-500); font-weight: 500; }

/* KPI: compact */
.nfp-kpi-compact .nfp-kpi-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; }
.nfp-kpi-compact .nfp-kpi-icon { margin-bottom: 0; width: 4px; height: 32px; border-radius: 2px; font-size: 0; }
.nfp-kpi-compact .nfp-kpi-primary .nfp-kpi-icon { background: var(--nfp-primary); }
.nfp-kpi-compact .nfp-kpi-warning .nfp-kpi-icon { background: var(--nfp-warning); }
.nfp-kpi-compact .nfp-kpi-success .nfp-kpi-icon { background: var(--nfp-success); }
.nfp-kpi-compact .nfp-kpi-danger .nfp-kpi-icon { background: var(--nfp-danger); }
.nfp-kpi-compact .nfp-kpi-value { font-size: 20px; }

/* KPI: gradient */
.nfp-kpi-gradient .nfp-kpi-card { border: none; }
.nfp-kpi-gradient .nfp-kpi-primary { background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(37,99,235,.03)); border: 1px solid rgba(37,99,235,.15); }
.nfp-kpi-gradient .nfp-kpi-warning { background: linear-gradient(135deg, rgba(217,119,6,.1), rgba(217,119,6,.03)); border: 1px solid rgba(217,119,6,.15); }
.nfp-kpi-gradient .nfp-kpi-success { background: linear-gradient(135deg, rgba(5,150,105,.1), rgba(5,150,105,.03)); border: 1px solid rgba(5,150,105,.15); }
.nfp-kpi-gradient .nfp-kpi-danger { background: linear-gradient(135deg, rgba(220,38,38,.1), rgba(220,38,38,.03)); border: 1px solid rgba(220,38,38,.15); }

/* KPI: icon-left */
.nfp-kpi-icon-left .nfp-kpi-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
.nfp-kpi-icon-left .nfp-kpi-icon { margin-bottom: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.nfp-kpi-icon-left .nfp-kpi-primary .nfp-kpi-icon { background: var(--nfp-primary-light); }
.nfp-kpi-icon-left .nfp-kpi-warning .nfp-kpi-icon { background: var(--nfp-warning-light); }
.nfp-kpi-icon-left .nfp-kpi-success .nfp-kpi-icon { background: var(--nfp-success-light); }
.nfp-kpi-icon-left .nfp-kpi-danger .nfp-kpi-icon { background: var(--nfp-danger-light); }

/* Quick Actions */
.nfp-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.nfp-quick-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; background: var(--nfp-card-bg);
    border: 1px solid var(--nfp-slate-200); border-radius: var(--nfp-radius-card);
    font-size: 13px; font-weight: 600; color: var(--nfp-primary);
    text-decoration: none; transition: all .15s;
}
.nfp-quick-action:hover { border-color: var(--nfp-primary); box-shadow: 0 2px 8px rgba(37,99,235,.1); }

/* Section & Page Titles */
.nfp-section-title { font-size: 15px; font-weight: 700; color: var(--nfp-slate-900); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--nfp-slate-200); }
.nfp-section-title i { color: var(--nfp-primary); margin-right: 8px; }
.nfp-page-title { font-size: 20px; font-weight: 700; color: var(--nfp-slate-900); margin-bottom: 20px; }
.nfp-page-title i { color: var(--nfp-primary); margin-right: 8px; }

/* Rows */
.nfp-invoice-row, .nfp-row-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: var(--nfp-card-bg);
    border: 1px solid var(--nfp-slate-200); border-radius: var(--nfp-radius-input);
    margin-bottom: 8px; transition: all .15s; text-decoration: none; color: inherit;
}
.nfp-invoice-row:hover, .nfp-row-link:hover { border-color: var(--nfp-primary); box-shadow: 0 2px 8px rgba(37,99,235,.1); }
.nfp-invoice-left { flex: 1; min-width: 0; }
.nfp-invoice-number { font-weight: 700; font-size: 14px; color: var(--nfp-slate-900); }
.nfp-invoice-customer { font-size: 13px; color: var(--nfp-slate-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfp-invoice-right { text-align: right; flex-shrink: 0; }
.nfp-invoice-amount { font-weight: 700; font-size: 16px; color: var(--nfp-slate-900); }
.nfp-invoice-date { font-size: 12px; color: var(--nfp-slate-400); margin-top: 2px; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.nfp-table-minimal .nfp-invoice-row { border-radius: 0; border-left: none; border-right: none; border-top: none; padding: 14px 4px; }
.nfp-table-minimal .nfp-invoice-row:last-child { border-bottom: none; }

/* Recent Card */
.nfp-recent-card { background: var(--nfp-card-bg); border: 1px solid var(--nfp-slate-200); border-radius: var(--nfp-radius-card); padding: 0; overflow: hidden; }
.nfp-recent-card .card-header { padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--nfp-slate-900); border-bottom: 1px solid var(--nfp-slate-200); display: flex; align-items: center; justify-content: space-between; }
.nfp-recent-card .card-body { padding: 0; }
.nfp-recent-card .nfp-invoice-row { margin-bottom: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; }
.nfp-recent-card .nfp-invoice-row:last-child { border-bottom: none; }

/* Badges */
.nfp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.nfp-badge-paid, .nfp-badge-betaald { background: var(--nfp-success-light); color: #047857; }
.nfp-badge-sent, .nfp-badge-verzonden { background: var(--nfp-primary-light); color: #1d4ed8; }
.nfp-badge-overdue, .nfp-badge-verlopen { background: var(--nfp-danger-light); color: #b91c1c; }
.nfp-badge-concept { background: var(--nfp-slate-100); color: var(--nfp-slate-600); }
.nfp-badge-open { background: var(--nfp-primary-light); color: #1d4ed8; }
.nfp-badge-accepted, .nfp-badge-geaccepteerd { background: var(--nfp-success-light); color: #047857; }
.nfp-badge-rejected, .nfp-badge-afgewezen { background: var(--nfp-danger-light); color: #b91c1c; }
.nfp-badge-expired { background: var(--nfp-warning-light); color: #92400e; }
.nfp-badge-actief { background: var(--nfp-success-light); color: #047857; }
.nfp-badge-info { background: #eff6ff; color: #1d4ed8; }
.nfp-badge-priority-hoog { background: var(--nfp-warning-light); color: #92400e; }
.nfp-badge-priority-urgent { background: var(--nfp-danger-light); color: #b91c1c; }

/* Tickets */
.nfp-ticket-meta { padding: 14px 18px; background: var(--nfp-slate-50); border-radius: var(--nfp-radius-card); border: 1px solid var(--nfp-slate-200); font-size: 13px; color: var(--nfp-slate-600); margin-bottom: 16px; }
.nfp-ticket-body { padding: 20px; background: var(--nfp-card-bg); border: 1px solid var(--nfp-slate-200); border-radius: var(--nfp-radius-card); font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.nfp-ticket-msg { padding: 14px 18px; border-radius: var(--nfp-radius-card); margin-bottom: 8px; border: 1px solid var(--nfp-slate-200); }
.nfp-ticket-msg-client { background: var(--nfp-card-bg); }
.nfp-ticket-msg-staff { background: var(--nfp-primary-light); border-color: rgba(37,99,235,.2); }
.nfp-ticket-msg-author { font-size: 12px; color: var(--nfp-slate-500); margin-bottom: 6px; }
.nfp-ticket-msg-body { font-size: 14px; line-height: 1.6; }

/* Milestones */
.nfp-milestone-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--nfp-slate-100); font-size: 14px; }
.nfp-milestone-row.completed { opacity: .6; }
.nfp-milestone-icon { color: var(--nfp-slate-300); font-size: 16px; }
.nfp-milestone-row.completed .nfp-milestone-icon { color: var(--nfp-success); }
.nfp-milestone-title { flex: 1; color: var(--nfp-slate-700); }
.nfp-milestone-date { font-size: 12px; color: var(--nfp-slate-400); }
.nfp-empty { text-align: center; padding: 48px 24px; color: var(--nfp-slate-400); font-size: 14px; }
.nfp-empty i { font-size: 36px; display: block; margin-bottom: 12px; }

/* Footer */
.nfp-app-footer {
    padding: 16px 24px; text-align: center; font-size: 12px; color: var(--nfp-slate-400);
    border-top: 1px solid var(--nfp-slate-200); background: #fff;
    display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
}
.nfp-footer-link { color: var(--nfp-accent); text-decoration: none; font-weight: 600; }
.nfp-footer-link:hover { text-decoration: underline; }


/* ========================================================= */
/*  PORTAL THEMES (10 visual overlays, CSS-only)              */
/* ========================================================= */

.nfp-app,
.nfp-main-content {
    min-height: 100vh;
}

.nfp-content {
    position: relative;
}

/* 1. Classic (default) — no overrides */

/* 2. Modern — shadowless borders, soft */
.nfp-portal-modern { --nfp-bg: #f3f7fb; }
.nfp-portal-modern .nfp-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(243,247,251,.65));
    pointer-events: none;
}
.nfp-portal-modern .nfp-content > * { position: relative; z-index: 1; }
.nfp-portal-modern .nfp-kpi-card,
.nfp-portal-modern .nfp-invoice-row,
.nfp-portal-modern .nfp-recent-card,
.nfp-portal-modern .nfp-ticket-body,
.nfp-portal-modern .nfp-ticket-meta,
.nfp-portal-modern .nfp-ticket-msg { border: none; box-shadow: 0 12px 30px rgba(15,23,42,.06); }
.nfp-portal-modern .nfp-app-header,
.nfp-portal-modern .nfp-topbar { background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-color: rgba(148,163,184,.16); }
.nfp-portal-modern .nfp-app-footer { border: none; background: rgba(255,255,255,.76); }

/* 3. Professional — tight, gray */
.nfp-portal-professional { --nfp-radius-card: 8px; --nfp-radius-input: 6px; }
.nfp-portal-professional .nfp-app-header,
.nfp-portal-professional .nfp-topbar { background: linear-gradient(180deg, #0f172a, #1f2937); color: #fff; }
.nfp-portal-professional .nfp-nav,
.nfp-portal-professional .nfp-app-footer { background: #fff; }
.nfp-portal-professional .nfp-kpi-card,
.nfp-portal-professional .nfp-recent-card,
.nfp-portal-professional .nfp-ticket-body,
.nfp-portal-professional .nfp-ticket-meta { background: var(--nfp-slate-50); border-color: var(--nfp-slate-300); box-shadow: none; }
.nfp-portal-professional .nfp-invoice-row { border-color: var(--nfp-slate-300); box-shadow: none; }
.nfp-portal-professional .nfp-welcome h2 { font-size: 18px; }
.nfp-portal-professional .nfp-page-title { font-size: 17px; }

/* 4. Vibrant — colorful accents */
.nfp-portal-vibrant { --nfp-bg: #fff7ed; }
.nfp-portal-vibrant .nfp-app-header,
.nfp-portal-vibrant .nfp-topbar { background: linear-gradient(135deg, #7c3aed, #2563eb 58%, #ec4899); }
.nfp-portal-vibrant .nfp-nav-link.active,
.nfp-portal-vibrant .nfp-sidebar-link.active { background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(37,99,235,.12)); }
.nfp-portal-vibrant .nfp-kpi-card { border: none; box-shadow: 0 16px 34px rgba(124,58,237,.08); }
.nfp-portal-vibrant .nfp-kpi-primary { background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.04)); border: 1px solid rgba(37,99,235,.15); }
.nfp-portal-vibrant .nfp-kpi-warning { background: linear-gradient(135deg, rgba(217,119,6,.12), rgba(217,119,6,.04)); border: 1px solid rgba(217,119,6,.15); }
.nfp-portal-vibrant .nfp-kpi-success { background: linear-gradient(135deg, rgba(5,150,105,.12), rgba(5,150,105,.04)); border: 1px solid rgba(5,150,105,.15); }
.nfp-portal-vibrant .nfp-kpi-danger { background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(220,38,38,.04)); border: 1px solid rgba(220,38,38,.15); }
.nfp-portal-vibrant .nfp-recent-card,
.nfp-portal-vibrant .nfp-invoice-row,
.nfp-portal-vibrant .nfp-ticket-body,
.nfp-portal-vibrant .nfp-ticket-meta,
.nfp-portal-vibrant .nfp-ticket-msg { border-color: rgba(124,58,237,.14); box-shadow: 0 12px 24px rgba(37,99,235,.05); }
.nfp-portal-vibrant .nfp-quick-action { border-color: var(--nfp-primary); background: rgba(37,99,235,.04); }

/* 5. Dark mode */
.nfp-portal-dark { --nfp-bg: #0f172a; --nfp-card-bg: #1e293b; --nfp-slate-200: #334155; --nfp-slate-100: #1e293b; --nfp-slate-50: #1e293b; }
.nfp-portal-dark .nfp-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 35%), linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.98));
    pointer-events: none;
}
.nfp-portal-dark .nfp-content > * { position: relative; z-index: 1; }
.nfp-portal-dark .nfp-content { color: #e2e8f0; }
.nfp-portal-dark .nfp-welcome h2, .nfp-portal-dark .nfp-page-title, .nfp-portal-dark .nfp-kpi-value,
.nfp-portal-dark .nfp-invoice-number, .nfp-portal-dark .nfp-invoice-amount,
.nfp-portal-dark .nfp-section-title, .nfp-portal-dark .nfp-topbar-title,
.nfp-portal-dark .nfp-recent-card .card-header { color: #f1f5f9; }
.nfp-portal-dark .nfp-kpi-label, .nfp-portal-dark .nfp-invoice-customer,
.nfp-portal-dark .nfp-invoice-date, .nfp-portal-dark .nfp-welcome p,
.nfp-portal-dark .nfp-ticket-meta, .nfp-portal-dark .nfp-milestone-title { color: #94a3b8; }
.nfp-portal-dark .nfp-app-footer { background: #1e293b; color: #64748b; border-color: #334155; }
.nfp-portal-dark .nfp-nav { background: #1e293b; border-color: #334155; }
.nfp-portal-dark .nfp-nav-link { color: #94a3b8; }
.nfp-portal-dark .nfp-nav-link.active { color: var(--nfp-primary); }
.nfp-portal-dark .nfp-topbar { background: #1e293b; border-color: #334155; }
.nfp-portal-dark .nfp-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.nfp-portal-dark .nfp-ticket-body { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.nfp-portal-dark .nfp-ticket-meta { background: #0f172a; border-color: #334155; }
.nfp-portal-dark .nfp-btn-secondary-sm { background: #334155; color: #e2e8f0; }
.nfp-portal-dark .nfp-kpi-card,
.nfp-portal-dark .nfp-recent-card,
.nfp-portal-dark .nfp-invoice-row,
.nfp-portal-dark .nfp-ticket-msg,
.nfp-portal-dark .nfp-milestone-row { box-shadow: 0 12px 28px rgba(0,0,0,.18); }

/* 6. Minimal — borderless */
.nfp-portal-minimal .nfp-app-header,
.nfp-portal-minimal .nfp-topbar,
.nfp-portal-minimal .nfp-nav,
.nfp-portal-minimal .nfp-app-footer { background: transparent; border-color: var(--nfp-slate-100); box-shadow: none; }
.nfp-portal-minimal .nfp-kpi-card { border: none; box-shadow: none; background: transparent; padding: 16px 8px; }
.nfp-portal-minimal .nfp-kpi-card:hover { box-shadow: none; transform: none; }
.nfp-portal-minimal .nfp-invoice-row { border: none; border-bottom: 1px solid var(--nfp-slate-100); border-radius: 0; padding: 14px 4px; }
.nfp-portal-minimal .nfp-invoice-row:hover { box-shadow: none; border-color: var(--nfp-slate-200); }
.nfp-portal-minimal .nfp-recent-card { border: none; box-shadow: none; }
.nfp-portal-minimal .nfp-recent-card .card-header { border-bottom-color: var(--nfp-slate-100); }
.nfp-portal-minimal .nfp-quick-action { border: none; background: transparent; text-decoration: underline; text-underline-offset: 2px; padding: 6px 4px; }
.nfp-portal-minimal .nfp-app-footer { border: none; }

/* 7. Warm — rounded, earthy */
.nfp-portal-warm { --nfp-radius-card: 20px; --nfp-radius-input: 16px; --nfp-bg: #fffbf5; --nfp-primary: #c2410c; --nfp-accent: #ea580c; --nfp-primary-light: #fff7ed; }
.nfp-portal-warm .nfp-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(251,146,60,.14), transparent 32%), linear-gradient(180deg, rgba(255,251,245,.92), rgba(255,247,237,.95));
    pointer-events: none;
}
.nfp-portal-warm .nfp-content > * { position: relative; z-index: 1; }
.nfp-portal-warm .nfp-kpi-card,
.nfp-portal-warm .nfp-invoice-row,
.nfp-portal-warm .nfp-recent-card,
.nfp-portal-warm .nfp-ticket-body,
.nfp-portal-warm .nfp-ticket-meta { box-shadow: 0 14px 32px rgba(194,65,12,.08); border-color: rgba(194,65,12,.08); }
.nfp-portal-warm .nfp-sidebar { background: #431407; }
.nfp-portal-warm .nfp-app-header { background: linear-gradient(135deg, #431407, #c2410c); }

/* 8. Sharp — square, technical */
.nfp-portal-sharp { --nfp-radius-card: 0; --nfp-radius-input: 0; }
.nfp-portal-sharp .nfp-app-header,
.nfp-portal-sharp .nfp-topbar { background: linear-gradient(90deg, #111827, #1f2937); }
.nfp-portal-sharp .nfp-kpi-card { border-width: 1px; border-color: var(--nfp-slate-300); }
.nfp-portal-sharp .nfp-badge { border-radius: 2px; }
.nfp-portal-sharp .nfp-sidebar-brand .brand-badge { border-radius: 0; }
.nfp-portal-sharp .nfp-btn-primary { border-radius: 0; }
.nfp-portal-sharp .nfp-btn-primary-sm, .nfp-portal-sharp .nfp-btn-secondary-sm { border-radius: 0; }
.nfp-portal-sharp .nfp-invoice-row,
.nfp-portal-sharp .nfp-recent-card,
.nfp-portal-sharp .nfp-ticket-body,
.nfp-portal-sharp .nfp-ticket-meta { box-shadow: none; }

/* 9. Ocean — teal/aqua */
.nfp-portal-ocean { --nfp-bg: #f0fdfa; --nfp-primary: #0d9488; --nfp-accent: #0f766e; --nfp-primary-light: #ccfbf1; }
.nfp-portal-ocean .nfp-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(240,253,250,.88), rgba(204,251,241,.55));
    pointer-events: none;
}
.nfp-portal-ocean .nfp-content > * { position: relative; z-index: 1; }
.nfp-portal-ocean .nfp-app-header { background: linear-gradient(135deg, #042f2e, #0d9488); }
.nfp-portal-ocean .nfp-sidebar { background: #042f2e; }
.nfp-portal-ocean .nfp-kpi-card,
.nfp-portal-ocean .nfp-recent-card,
.nfp-portal-ocean .nfp-invoice-row,
.nfp-portal-ocean .nfp-ticket-body,
.nfp-portal-ocean .nfp-ticket-meta { border-color: rgba(13,148,136,.12); box-shadow: 0 10px 28px rgba(13,148,136,.08); }
.nfp-portal-ocean .nfp-kpi-card:hover { box-shadow: 0 14px 32px rgba(13,148,136,.12); }
.nfp-portal-ocean .nfp-quick-action { color: #0d9488; }

/* 10. Sunset — amber/warm gradient */
.nfp-portal-sunset { --nfp-bg: #fffbeb; --nfp-primary: #b45309; --nfp-accent: #d97706; --nfp-primary-light: #fef3c7; }
.nfp-portal-sunset .nfp-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,251,235,.92), rgba(254,243,199,.58));
    pointer-events: none;
}
.nfp-portal-sunset .nfp-content > * { position: relative; z-index: 1; }
.nfp-portal-sunset .nfp-app-header { background: linear-gradient(135deg, #78350f, #d97706); }
.nfp-portal-sunset .nfp-sidebar { background: #451a03; }
.nfp-portal-sunset .nfp-kpi-card,
.nfp-portal-sunset .nfp-recent-card,
.nfp-portal-sunset .nfp-invoice-row,
.nfp-portal-sunset .nfp-ticket-body,
.nfp-portal-sunset .nfp-ticket-meta { border-color: rgba(217,119,6,.15); box-shadow: 0 12px 28px rgba(217,119,6,.08); }
.nfp-portal-sunset .nfp-kpi-card:hover { box-shadow: 0 16px 34px rgba(217,119,6,.12); }


/* ========================================================= */
/*  RESPONSIVE                                                */
/* ========================================================= */
@media (max-width: 768px) {
    .nfp-login-card { padding: 32px 24px; }
    .nfp-theme-split .nfp-login-wrap { flex-direction: column; }
    .nfp-theme-split .nfp-login-sidebar { flex: none; padding: 32px 24px; }
    .nfp-theme-split .nfp-login-card { padding: 32px 24px; }
    .nfp-theme-elegant .nfp-login-card { padding: 32px 24px; }
    .nfp-beacon-shell { flex-direction: column; }
    .nfp-beacon-brand, .nfp-beacon-content { width: 100%; }
    .nfp-beacon-brand { display: none; }
    .nfp-beacon-content { padding: 72px 16px 32px; }
    .nfp-beacon-mobile-brand { display: block; }
    .nfp-theme-beacon .nfp-beacon-card { padding: 28px 22px; }
    .nfp-theme-beacon .nfp-login-title { font-size: 28px; }
    .nfp-theme-beacon .nfp-theme-toggle { top: 12px; right: 12px; }

    .nfp-layout-sidebar .nfp-app { flex-direction: column; }
    .nfp-layout-sidebar .nfp-sidebar { width: 100%; min-width: auto; min-height: auto; flex-direction: row; overflow-x: auto; }
    .nfp-layout-sidebar .nfp-sidebar-nav { display: flex; flex-direction: row; padding: 0; }
    .nfp-layout-sidebar .nfp-sidebar-link { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .nfp-layout-sidebar .nfp-sidebar-link.active { border-bottom-color: var(--nfp-primary); border-left: none; }
    .nfp-layout-sidebar .nfp-sidebar-brand { padding: 10px 14px; }
    .nfp-layout-sidebar .nfp-sidebar-user { display: none; }
    .nfp-layout-sidebar .nfp-sidebar-section { display: none; }

    .nfp-app-header { flex-direction: column; gap: 12px; text-align: center; }
    .nfp-nav-link { padding: 12px 14px; font-size: 13px; }
    .nfp-content { padding: 16px; }
    .nfp-kpi-grid { grid-template-columns: 1fr 1fr; }
    .nfp-invoice-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .nfp-invoice-right { text-align: left; }
    .nfp-invoice-date { justify-content: flex-start; }
    .nfp-login-links { gap: 10px; }
}
@media (max-width: 480px) {
    .nfp-kpi-grid { grid-template-columns: 1fr; }
}