/*
 * ==========================================================
 * PRIMEVIEW NEXUS
 * CANONICAL DESIGN SYSTEM
 * ==========================================================
 *
 * THIS IS THE ONLY GLOBAL CSS ENTRY POINT.
 *
 * Do not create:
 *
 * - override.css
 * - fix.css
 * - final.css
 * - final-v2.css
 * - sidebar-fix.css
 *
 * Modify the canonical component here instead.
 */

@layer reset, tokens, base, layout, components, utilities, pages;


/* ==========================================================
   RESET
   ========================================================== */

@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        min-height: 100%;
    }

    body {
        min-height: 100vh;
        margin: 0;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    a {
        color: inherit;
    }

}


/* ==========================================================
   TOKENS
   ========================================================== */

@layer tokens {

    :root {

        --nx-font:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        --nx-bg:
            #f5f7fb;

        --nx-surface:
            #ffffff;

        --nx-surface-muted:
            #f8fafc;

        --nx-border:
            #dfe6ef;

        --nx-border-strong:
            #cbd7e4;

        --nx-text:
            #162a42;

        --nx-text-muted:
            #718198;

        --nx-text-soft:
            #9aa8b8;

        --nx-primary:
            #218ce5;

        --nx-primary-strong:
            #176fc0;

        --nx-primary-soft:
            #eaf5ff;

        --nx-danger:
            #c84747;

        --nx-danger-soft:
            #fff1f1;

        --nx-success:
            #16845b;

        --nx-success-soft:
            #ebfaf3;

        --nx-warning:
            #a46b15;

        --nx-warning-soft:
            #fff8e8;

        --nx-sidebar-width:
            250px;

        --nx-header-height:
            86px;

        --nx-radius-sm:
            8px;

        --nx-radius-md:
            12px;

        --nx-radius-lg:
            16px;

        --nx-radius-xl:
            22px;

        --nx-shadow-sm:
            0 5px 18px rgba(38, 65, 95, .05);

        --nx-shadow-md:
            0 14px 40px rgba(38, 65, 95, .08);

        --nx-transition:
            160ms ease;

    }

}


/* ==========================================================
   BASE
   ========================================================== */

@layer base {

    body {
        background:
            var(--nx-bg);

        color:
            var(--nx-text);

        font-family:
            var(--nx-font);

        font-size:
            14px;

        line-height:
            1.5;
    }

    h1,
    h2,
    h3,
    p {
        margin-top: 0;
    }

    h1,
    h2,
    h3 {
        color:
            var(--nx-text);
    }

}


/* ==========================================================
   LAYOUT
   ========================================================== */

@layer layout {

    .nx-shell {
        min-height:
            100vh;

        display:
            grid;

        grid-template-columns:
            var(--nx-sidebar-width)
            minmax(0, 1fr);
    }


    .nx-sidebar {
        position:
            sticky;

        top:
            0;

        height:
            100vh;

        display:
            flex;

        flex-direction:
            column;

        padding:
            27px 18px 20px;

        background:
            var(--nx-surface);

        border-right:
            1px solid
            var(--nx-border);
    }


    .nx-main {
        min-width:
            0;
    }


    .nx-page-header {
        min-height:
            var(--nx-header-height);

        display:
            flex;

        align-items:
            center;

        padding:
            18px 34px;

        background:
            rgba(255, 255, 255, .96);

        border-bottom:
            1px solid
            var(--nx-border);
    }


    .nx-content {
        padding:
            30px 34px 50px;
    }


    .nx-footer {
        padding:
            0 34px 28px;

        color:
            var(--nx-text-soft);

        font-size:
            11px;
    }


    .nx-grid {
        display:
            grid;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(220px, 1fr)
            );

        gap:
            16px;
    }

}


/* ==========================================================
   COMPONENTS
   ========================================================== */

@layer components {

    .nx-brand {
        display:
            block;

        padding:
            0 12px 26px;

        text-decoration:
            none;
    }


    .nx-brand__main {
        display:
            block;

        color:
            var(--nx-text);

        font-size:
            25px;

        font-weight:
            900;

        letter-spacing:
            -1.7px;
    }


    .nx-brand__main span {
        color:
            var(--nx-primary);
    }


    .nx-brand__sub {
        display:
            block;

        margin-top:
            2px;

        color:
            var(--nx-text-muted);

        font-size:
            8px;

        font-weight:
            800;

        letter-spacing:
            3.5px;
    }


    .nx-navigation {
        display:
            grid;

        gap:
            4px;
    }


    .nx-navigation__item {
        min-height:
            43px;

        display:
            flex;

        align-items:
            center;

        gap:
            11px;

        padding:
            0 12px;

        border-radius:
            var(--nx-radius-md);

        color:
            #60738a;

        font-size:
            13px;

        font-weight:
            650;

        text-decoration:
            none;

        transition:
            background
            var(--nx-transition),
            color
            var(--nx-transition);
    }


    .nx-navigation__item:hover {
        background:
            var(--nx-surface-muted);

        color:
            var(--nx-text);
    }


    .nx-navigation__item.is-active {
        background:
            var(--nx-primary-soft);

        color:
            var(--nx-primary-strong);
    }


    .nx-navigation__marker {
        width:
            7px;

        height:
            7px;

        flex:
            0 0 auto;

        border-radius:
            999px;

        background:
            currentColor;

        opacity:
            .7;
    }


    .nx-eyebrow {
        margin-bottom:
            4px;

        color:
            var(--nx-text-soft);

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            1.4px;
    }


    .nx-page-title {
        margin:
            0;

        font-size:
            22px;

        line-height:
            1.25;
    }


    .nx-page-description {
        max-width:
            720px;

        margin:
            7px 0 0;

        color:
            var(--nx-text-muted);

        font-size:
            12px;
    }


    .nx-card {
        min-height:
            145px;

        display:
            block;

        padding:
            22px;

        background:
            var(--nx-surface);

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-lg);

        box-shadow:
            var(--nx-shadow-sm);

        text-decoration:
            none;

        transition:
            border-color
            var(--nx-transition),
            box-shadow
            var(--nx-transition),
            transform
            var(--nx-transition);
    }


    a.nx-card:hover {
        border-color:
            #a6cdf0;

        box-shadow:
            var(--nx-shadow-md);

        transform:
            translateY(-1px);
    }


    .nx-card__tag {
        display:
            inline-block;

        color:
            var(--nx-primary-strong);

        font-size:
            8px;

        font-weight:
            800;

        letter-spacing:
            1px;
    }


    .nx-card__title {
        margin:
            7px 0 8px;

        font-size:
            15px;
    }


    .nx-card__description {
        margin:
            0;

        color:
            var(--nx-text-muted);

        font-size:
            11.5px;

        line-height:
            1.55;
    }


    .nx-button {
        min-height:
            42px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0 16px;

        border:
            0;

        border-radius:
            var(--nx-radius-md);

        cursor:
            pointer;

        font-weight:
            700;

        transition:
            filter
            var(--nx-transition);
    }


    .nx-button:hover {
        filter:
            brightness(.97);
    }


    .nx-button--primary {
        color:
            #ffffff;

        background:
            var(--nx-primary);
    }


    .nx-button--secondary {
        color:
            var(--nx-text);

        background:
            var(--nx-surface-muted);

        border:
            1px solid
            var(--nx-border);
    }


    .nx-badge {
        display:
            inline-flex;

        align-items:
            center;

        min-height:
            24px;

        padding:
            0 8px;

        border-radius:
            999px;

        color:
            var(--nx-primary-strong);

        background:
            var(--nx-primary-soft);

        font-size:
            9px;

        font-weight:
            750;
    }


    .nx-alert {
        padding:
            12px 14px;

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-md);

        font-size:
            11px;

        line-height:
            1.5;
    }


    .nx-alert--info {
        color:
            #236da9;

        background:
            var(--nx-primary-soft);

        border-color:
            #cce4f8;
    }


    .nx-alert--success {
        color:
            var(--nx-success);

        background:
            var(--nx-success-soft);
    }


    .nx-alert--danger {
        color:
            var(--nx-danger);

        background:
            var(--nx-danger-soft);
    }


    .nx-table-shell {
        overflow-x:
            auto;

        background:
            var(--nx-surface);

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-lg);

        box-shadow:
            var(--nx-shadow-sm);
    }


    .nx-table {
        width:
            100%;

        border-collapse:
            collapse;
    }


    .nx-table th {
        padding:
            11px 14px;

        color:
            var(--nx-text-muted);

        background:
            var(--nx-surface-muted);

        border-bottom:
            1px solid
            var(--nx-border);

        font-size:
            9px;

        text-align:
            left;

        text-transform:
            uppercase;

        letter-spacing:
            .5px;
    }


    .nx-table td {
        padding:
            13px 14px;

        border-bottom:
            1px solid
            #edf1f5;

        font-size:
            11px;

        vertical-align:
            top;
    }


    .nx-modal[hidden] {
        display:
            none;
    }


    .nx-modal {
        position:
            fixed;

        inset:
            0;

        z-index:
            1000;

        display:
            grid;

        place-items:
            center;

        padding:
            20px;
    }


    .nx-modal__backdrop {
        position:
            absolute;

        inset:
            0;

        background:
            rgba(18, 34, 51, .46);
    }


    .nx-modal__panel {
        position:
            relative;

        z-index:
            1;

        width:
            min(560px, 100%);

        max-height:
            calc(100vh - 40px);

        overflow:
            auto;

        background:
            var(--nx-surface);

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-xl);

        box-shadow:
            0 24px 80px
            rgba(18, 40, 66, .2);
    }


    .nx-modal__header {
        display:
            flex;

        justify-content:
            space-between;

        align-items:
            center;

        padding:
            18px 20px;

        border-bottom:
            1px solid
            var(--nx-border);
    }


    .nx-modal__header h2 {
        margin:
            0;

        font-size:
            17px;
    }


    .nx-modal__close {
        border:
            0;

        background:
            transparent;

        color:
            var(--nx-text-muted);

        cursor:
            pointer;

        font-size:
            24px;
    }


    .nx-modal__body {
        padding:
            20px;
    }


    .nx-form {
        display:
            grid;

        gap:
            15px;
    }



    /* ======================================================
       SIDEBAR ACCOUNT
       ====================================================== */

    .nx-sidebar__user {
        margin-top:
            auto;

        padding:
            16px 12px 2px;

        border-top:
            1px solid
            var(--nx-border);
    }


    .nx-sidebar__identity {
        display:
            grid;

        gap:
            3px;
    }


    .nx-sidebar__identity strong {
        font-size:
            12px;
    }


    .nx-sidebar__role {
        color:
            var(--nx-primary-strong);

        font-size:
            9px;

        font-weight:
            750;

        letter-spacing:
            .2px;
    }


    .nx-logout-form {
        margin-top:
            12px;
    }


    .nx-link-button {
        padding:
            0;

        border:
            0;

        background:
            transparent;

        color:
            var(--nx-text-muted);

        cursor:
            pointer;

        font-size:
            10px;
    }


    .nx-link-button:hover {
        color:
            var(--nx-primary-strong);
    }


    /* ======================================================
       FORMS
       ====================================================== */

    .nx-field {
        display:
            grid;

        gap:
            6px;
    }


    .nx-field__label {
        color:
            #536980;

        font-size:
            10px;

        font-weight:
            700;
    }


    .nx-input {
        width:
            100%;

        min-height:
            44px;

        padding:
            0 13px;

        border:
            1px solid
            var(--nx-border-strong);

        border-radius:
            var(--nx-radius-md);

        background:
            var(--nx-surface);

        color:
            var(--nx-text);

        outline:
            none;

        transition:
            border-color
            var(--nx-transition),
            box-shadow
            var(--nx-transition);
    }


    .nx-input:focus {
        border-color:
            var(--nx-primary);

        box-shadow:
            0 0 0 3px
            rgba(33, 140, 229, .11);
    }


    .nx-table__summary {
        display:
            block;

        max-width:
            440px;

        margin-top:
            4px;

        color:
            var(--nx-text-muted);

        line-height:
            1.45;
    }


    .nx-empty-state {
        max-width:
            640px;

        margin:
            60px auto;

        padding:
            35px;

        text-align:
            center;

        background:
            var(--nx-surface);

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-xl);

        box-shadow:
            var(--nx-shadow-sm);
    }


    .nx-empty-state__icon {
        width:
            58px;

        height:
            58px;

        display:
            grid;

        place-items:
            center;

        margin:
            0 auto 16px;

        color:
            var(--nx-primary-strong);

        background:
            var(--nx-primary-soft);

        border-radius:
            17px;

        font-weight:
            900;
    }

}


/* ==========================================================
   UTILITIES
   ========================================================== */

@layer utilities {

    .nx-hidden {
        display:
            none !important;
    }

    .nx-text-muted {
        color:
            var(--nx-text-muted);
    }

    .nx-mt-0 {
        margin-top:
            0;
    }

    .nx-mb-0 {
        margin-bottom:
            0;
    }

}


/* ==========================================================
   PAGES
   ========================================================== */

@layer pages {

    /*
     * Page-specific rules go here only when a reusable
     * component cannot reasonably solve the requirement.
     *
     * Do not redefine:
     *
     * .nx-sidebar
     * .nx-card
     * .nx-button
     * .nx-table
     * .nx-modal
     */


    /* ======================================================
       AUTH
       ====================================================== */

    .nx-auth-page {
        min-height:
            100vh;

        background:
            radial-gradient(
                circle at 50% 20%,
                #ffffff 0,
                #f3f8fe 52%,
                #edf4fc 100%
            );
    }


    .nx-auth-shell {
        min-height:
            100vh;

        display:
            grid;

        place-items:
            center;

        padding:
            58px 18px;
    }


    .nx-auth-card {
        width:
            min(100%, 430px);

        padding:
            38px;

        background:
            rgba(255, 255, 255, .97);

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-xl);

        box-shadow:
            0 26px 75px
            rgba(38, 76, 116, .13);
    }


    .nx-auth-brand {
        display:
            block;

        width:
            max-content;

        margin:
            0 auto 28px;

        text-align:
            center;

        text-decoration:
            none;
    }


    .nx-auth-brand .nx-brand__main {
        font-size:
            34px;
    }


    .nx-auth-brand .nx-brand__sub {
        margin-top:
            1px;

        text-align:
            right;
    }


    .nx-auth-heading {
        margin-bottom:
            22px;

        text-align:
            center;
    }


    .nx-auth-title {
        margin-bottom:
            7px;

        font-size:
            21px;
    }


    .nx-auth-copy {
        margin:
            0;

        color:
            var(--nx-text-muted);

        font-size:
            11px;
    }


    .nx-auth-form {
        margin-top:
            16px;
    }


    .nx-auth-submit {
        width:
            100%;
    }


    .nx-auth-meta {
        display:
            grid;

        gap:
            3px;

        margin-top:
            22px;

        padding:
            12px;

        border:
            1px solid
            var(--nx-border);

        border-radius:
            var(--nx-radius-md);

        background:
            var(--nx-surface-muted);

        text-align:
            center;
    }


    .nx-auth-meta strong {
        font-size:
            10px;
    }


    .nx-auth-meta span {
        color:
            var(--nx-text-muted);

        font-size:
            9px;

        line-height:
            1.45;
    }


}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 820px) {

    .nx-shell {
        grid-template-columns:
            1fr;
    }

    .nx-sidebar {
        position:
            relative;

        height:
            auto;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--nx-border);
    }

    .nx-content,
    .nx-page-header {
        padding-left:
            20px;

        padding-right:
            20px;
    }

}