/**
 * SmartPunch Design System — shared tokens (web)
 * Used by: install wizard, login, main dashboard, components
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --nex-primary: #4099ff;
    --nex-primary-dark: #2a75c7;
    --nex-primary-soft: #eff6ff;
    --nex-primary-glow: rgba(64, 153, 255, 0.14);
    --nex-accent: #2a75c7;

    --nex-success: #10b981;
    --nex-success-soft: #d1fae5;
    --nex-warning: #ffb64d;
    --nex-danger: #ef4444;
    --nex-danger-soft: #fee2e2;
    --nex-info-soft: #dbeafe;

    --nex-text: #0f172a;
    --nex-text-body: #475569;
    --nex-text-muted: #64748b;

    --nex-bg: #eef3f8;
    --nex-bg-subtle: #f7fafc;
    --nex-card: #ffffff;
    --nex-border: #e2e8f0;
    --nex-input-border: #e2e8f0;

    --nex-hero-from: #0b1f3a;
    --nex-hero-mid: #123a6b;
    --nex-hero-to: #1d4ed8;
    --nex-sidebar-bg: #0f172a;
    --nex-sidebar-dark: #020617;

    --nex-radius-sm: 0;
    --nex-radius-md: 0;
    --nex-radius-lg: 0;
    --nex-radius-xl: 0;

    --nex-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --nex-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --nex-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);
    --nex-shadow-primary: 0 10px 28px var(--nex-primary-glow);

    --nex-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Legacy aliases (AdminDeck / Bootstrap inline styles) */
    --primary: var(--nex-primary);
    --primary-dark: var(--nex-primary-dark);
    --success: #2ed8b6;
    --danger: #ff5370;
    --warning: var(--nex-warning);
    --dark: #37474f;
    --light: var(--nex-bg-subtle);
    --border-color: var(--nex-input-border);
    --text-color: var(--nex-text-body);
    --sidebar-bg: var(--nex-sidebar-bg);
    --sidebar-dark: var(--nex-sidebar-dark);

    /* Install wizard aliases */
    --primary-glow: var(--nex-primary-glow);
    --hero-from: var(--nex-hero-from);
    --hero-mid: var(--nex-hero-mid);
    --hero-to: var(--nex-hero-to);
    --text: var(--nex-text);
    --text-muted: var(--nex-text-muted);
    --card: var(--nex-card);
    --border: var(--nex-border);
    --success-soft: var(--nex-success-soft);
    --danger-soft: var(--nex-danger-soft);
    --info-soft: var(--nex-info-soft);
}

/* Subtle aurora background for app pages (not data-heavy modals) */
.nex-app-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--nex-bg-subtle);
}

.nex-app-bg::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: var(--nex-primary);
    filter: blur(100px);
    opacity: 0.12;
    top: -160px;
    right: -100px;
    animation: nexFloatOrb 16s ease-in-out infinite;
}

.nex-app-bg::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: #0e7490;
    filter: blur(90px);
    opacity: 0.08;
    bottom: -120px;
    left: 30%;
    animation: nexFloatOrb 16s ease-in-out infinite reverse;
}

.nex-app-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(64, 153, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 153, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 30% 20%, black 0%, transparent 70%);
}

@keyframes nexFloatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-16px, 20px) scale(1.04); }
}

@keyframes nexBtnShine {
    0%, 80%, 100% { left: -100%; }
    40% { left: 120%; }
}

body.nex-themed {
    font-family: var(--nex-font);
}

/*
 * Font Awesome: solid icons need weight 900; regular/brands need 400.
 * UI font-weight (500–700) on parents otherwise makes glyphs disappear.
 */
body.nex-themed .fas,
body.nex-themed .fa-solid,
body.nex-themed .fa,
body.nex-editorial-dash .fas,
body.nex-editorial-dash .fa-solid,
body.nex-editorial-dash .fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    line-height: 1;
}

body.nex-themed .far,
body.nex-themed .fa-regular,
body.nex-editorial-dash .far,
body.nex-editorial-dash .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    line-height: 1;
}

body.nex-themed .fab,
body.nex-themed .fa-brands,
body.nex-editorial-dash .fab,
body.nex-editorial-dash .fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    line-height: 1;
}

/* Outline buttons — keep borders (layout used to set .btn { border: none }) */
body.nex-themed .btn[class*="btn-outline"] {
    border-width: 1px !important;
    border-style: solid !important;
    background-color: #fff;
}

body.nex-themed .btn-outline-primary {
    color: #2a75c7 !important;
    border-color: #93c5fd !important;
}

body.nex-themed .btn-outline-primary:hover,
body.nex-themed .btn-outline-primary:focus {
    color: #1e5aa3 !important;
    border-color: #4099ff !important;
    background: #eff6ff !important;
}

body.nex-themed .btn-outline-secondary {
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

body.nex-themed .btn-outline-secondary:hover,
body.nex-themed .btn-outline-secondary:focus {
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

body.nex-themed .btn-outline-info {
    color: #0284c7 !important;
    border-color: #7dd3fc !important;
}

body.nex-themed .btn-outline-info:hover,
body.nex-themed .btn-outline-info:focus {
    color: #0369a1 !important;
    border-color: #0ea5e9 !important;
    background: #f0f9ff !important;
}

body.nex-themed .btn-outline-success {
    color: #059669 !important;
    border-color: #6ee7b7 !important;
}

body.nex-themed .btn-outline-success:hover,
body.nex-themed .btn-outline-success:focus {
    color: #047857 !important;
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
}

body.nex-themed .btn-outline-danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

body.nex-themed .btn-outline-danger:hover,
body.nex-themed .btn-outline-danger:focus {
    color: #b91c1c !important;
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

body.nex-themed .btn-outline-warning {
    color: #b45309 !important;
    border-color: #fcd34d !important;
}

body.nex-themed .btn-outline-warning:hover,
body.nex-themed .btn-outline-warning:focus {
    color: #92400e !important;
    border-color: #f59e0b !important;
    background: #fffbeb !important;
}

body.nex-themed .btn-outline-dark {
    color: #334155 !important;
    border-color: #94a3b8 !important;
}

body.nex-themed .btn-outline-dark:hover,
body.nex-themed .btn-outline-dark:focus {
    color: #0f172a !important;
    border-color: #64748b !important;
    background: #f1f5f9 !important;
}

/* Compact table/row action icon buttons (all list pages) */
body.nex-themed .btn-action {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    border-radius: 0 !important;
}

body.nex-themed .btn-action .fas,
body.nex-themed .btn-action .far,
body.nex-themed .btn-action .fab,
body.nex-themed .btn-action i {
    margin: 0 !important;
    width: auto !important;
    line-height: 1 !important;
    color: inherit !important;
    font-size: 14px;
}

body.nex-themed .btn-group-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

body.nex-themed td.action-column,
body.nex-themed .action-column {
    white-space: nowrap;
    vertical-align: middle;
}

/* Icons inside buttons / headers stay aligned */
body.nex-themed .btn:not(.btn-close):not(.btn-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    line-height: 1.25;
}

body.nex-themed .btn > .fas,
body.nex-themed .btn > .far,
body.nex-themed .btn > .fab,
body.nex-themed .btn > i[class*="fa-"] {
    margin: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
    color: inherit !important;
}

body.nex-themed .btn-primary .fas,
body.nex-themed .btn-primary .far,
body.nex-themed .btn-primary .fab,
body.nex-themed .btn-primary i[class*="fa-"],
body.nex-themed .btn-success .fas,
body.nex-themed .btn-danger .fas,
body.nex-themed .btn-warning .fas,
body.nex-themed .btn-info .fas,
body.nex-themed .btn-dark .fas,
body.nex-themed .btn-secondary .fas {
    color: inherit !important;
}

body.nex-themed .btn .fas,
body.nex-themed .btn .far,
body.nex-themed .page-header .btn .fas,
body.nex-themed .page-actions .btn .fas {
    vertical-align: 0;
}

body.nex-themed .btn-action .fas:not(:only-child),
body.nex-themed .btn-action .far:not(:only-child) {
    margin-right: 0 !important;
}

body.nex-themed .dropdown-item .fas,
body.nex-themed .dropdown-item .far,
body.nex-themed .dropdown-item i[class*="fa-"] {
    width: 1.1em;
    text-align: center;
    margin-right: 0.5rem;
}

body.nex-themed .navbar-icon-btn .fas,
body.nex-themed .navbar-icon-btn .far,
body.nex-themed .sidebar-toggle .fas {
    color: inherit !important;
    margin: 0 !important;
}

/* Filter / status pills with icons */
body.nex-themed .saas-filter-pill i,
body.nex-themed .saas-activity-tab i {
    color: inherit !important;
}

/* Square corners — entire application (decorative orbs stay circular) */
body.nex-themed .card,
body.nex-themed .btn,
body.nex-themed .form-control,
body.nex-themed .form-select,
body.nex-themed .input-group-text,
body.nex-themed .alert,
body.nex-themed .modal-content,
body.nex-themed .dropdown-menu,
body.nex-themed .badge,
body.nex-themed .settings-card,
body.nex-themed .settings-card .card,
body.nex-themed .settings-card-icon,
body.nex-themed .saas-settings-card,
body.nex-themed .saas-settings-card .card-icon,
body.nex-themed .page-actions .btn,
body.nex-themed .swal2-popup,
body.nex-themed .swal2-toast,
body.install-page .install-card,
body.install-page .btn-install,
body.install-page .form-control,
body.install-page .wizard-step-dot,
body.install-page .install-step-pill,
body.install-page .alert-install,
body.install-page .next-steps,
body.install-page .success-ring,
body.nex-themed .rounded,
body.nex-themed .rounded-1,
body.nex-themed .rounded-2,
body.nex-themed .rounded-3,
body.nex-themed .rounded-4,
body.nex-themed .rounded-pill,
body.nex-themed [class*="rounded"] {
    border-radius: 0 !important;
}

body.nex-themed #nexCopilotFab,
body.nex-themed .nex-copilot-fab {
    border-radius: 0 !important;
}

.login-right .form-control,
.login-right .btn-login,
.login-right .login-type-switcher,
.login-right .login-type-btn {
    border-radius: 0 !important;
}