/* =====================
   ROOT & RESET
===================== */
    :root {
        --bg-root: #f0f2f7;
        --bg-sidebar: #ffffff;
        --bg-card: #ffffff;
        --bg-card-hov: #fafbff;
        --bg-topnav: rgba(255, 255, 255, 0.88);
        --border: #e8eaf0;
        --border-md: #d8dce8;

        --indigo: #5b5ef4;
        --indigo-dim: #7577f6;
        --indigo-soft: rgba(91, 94, 244, 0.1);
        --indigo-glow: rgba(91, 94, 244, 0.18);

        --blue: #3b82f6;
        --blue-soft: rgba(59, 130, 246, 0.1);
        --violet: #8b5cf6;
        --violet-soft: rgba(139, 92, 246, 0.1);
        --emerald: #10b981;
        --emerald-soft: rgba(16, 185, 129, 0.1);
        --amber: #f59e0b;
        --amber-soft: rgba(245, 158, 11, 0.1);
        --rose: #f43f5e;
        --rose-soft: rgba(244, 63, 94, 0.1);

        --text: #1a1d2e;
        --text-muted: #8892a4;
        --text-dim: #64748b;

        --shadow-sm: 0 1px 4px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .04);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, .1);

        --sidebar-w: 258px;
        --header-h: 68px;
        --radius: 16px;
        --radius-sm: 10px;
    }

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

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background: var(--bg-root);
        color: var(--text);
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Soft mesh background */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background:
            radial-gradient(ellipse 70% 50% at 5% 10%, rgba(91, 94, 244, 0.05) 0%, transparent 55%),
            radial-gradient(ellipse 50% 60% at 95% 85%, rgba(139, 92, 246, 0.04) 0%, transparent 55%),
            radial-gradient(ellipse 40% 40% at 60% 40%, rgba(59, 130, 246, 0.03) 0%, transparent 60%);
        pointer-events: none;
        z-index: 0;
    }

    /* =====================
   SIDEBAR
===================== */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-w);
        height: 100vh;
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        z-index: 101;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), margin-left .3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--shadow-sm);
        will-change: transform;
    }

    .sidebar-brand {
        padding: 1.4rem 1.4rem .9rem;
        border-bottom: 1px solid var(--border);
    }

    .brand-logo {
        display: flex;
        align-items: center;
        gap: .75rem;
        text-decoration: none;
    }

    .brand-icon {
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, var(--indigo), var(--violet));
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        color: white;
        box-shadow: 0 4px 12px rgba(91, 94, 244, .35);
        flex-shrink: 0;
    }

    .brand-name {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -.4px;
    }

    .brand-tag {
        font-size: .58rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--indigo);
        letter-spacing: .1em;
        background: var(--indigo-soft);
        padding: .1rem .4rem;
        border-radius: 4px;
    }

    .sidebar-section-label {
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-muted);
        padding: 1.1rem 1.4rem .3rem;
    }

    .nav-list {
        list-style: none;
        padding: 0 .65rem;
        margin: 0;
    }

    .nav-list li+li {
        margin-top: 2px;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .8rem;
        border-radius: var(--radius-sm);
        color: var(--text-dim);
        text-decoration: none;
        font-size: .845rem;
        font-weight: 500;
        transition: all .18s;
        cursor: pointer;
        position: relative;
    }

    .nav-item:hover {
        background: var(--bg-root);
        color: var(--text);
    }

    .nav-item.active {
        background: var(--indigo-soft);
        color: var(--indigo);
        font-weight: 600;
    }

    .nav-item.active::before {
        content: '';
        position: absolute;
        left: -.65rem;
        top: 22%;
        bottom: 22%;
        width: 3px;
        background: var(--indigo);
        border-radius: 0 3px 3px 0;
        box-shadow: 0 0 6px rgba(91, 94, 244, .4);
    }

    .nav-item i {
        font-size: .95rem;
        width: 20px;
        flex-shrink: 0;
    }

    .nav-badge {
        margin-left: auto;
        font-size: .58rem;
        font-family: 'JetBrains Mono', monospace;
        background: var(--indigo-soft);
        color: var(--indigo);
        border: 1px solid rgba(91, 94, 244, .2);
        padding: .12rem .42rem;
        border-radius: 20px;
        font-weight: 600;
    }

    .sidebar-footer {
        margin-top: auto;
        padding: .85rem .65rem 1.1rem;
        border-top: 1px solid var(--border);
    }

    .user-card {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .65rem .8rem;
        border-radius: var(--radius-sm);
        transition: background .18s;
        cursor: pointer;
    }

    .user-card:hover {
        background: var(--bg-root);
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--violet), var(--blue));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .82rem;
        font-weight: 700;
        color: white;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(139, 92, 246, .3);
    }

    .user-name {
        font-size: .8rem;
        font-weight: 600;
        color: var(--text);
        line-height: 1.2;
    }

    .user-role {
        font-size: .65rem;
        color: var(--text-muted);
    }

    .user-chevron {
        margin-left: auto;
        color: var(--text-muted);
        font-size: .75rem;
    }

    /* =====================
   MAIN LAYOUT
===================== */
    .main-wrap {
        margin-left: var(--sidebar-w);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
        transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
        will-change: margin-left;
    }

    /* =====================
   TOP NAV
===================== */
    .topnav {
        height: var(--header-h);
        background: var(--bg-topnav);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        padding: 0 2rem;
        gap: 1rem;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .topnav-title {
        font-size: .95rem;
        font-weight: 700;
        color: var(--text);
    }

    .topnav-search {
        margin-left: 1.5rem;
        position: relative;
        flex: 0 1 300px;
    }

    .topnav-search i {
        position: absolute;
        left: .85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: .82rem;
    }

    .topnav-search input {
        width: 100%;
        background: var(--bg-root);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: .48rem .9rem .48rem 2.25rem;
        color: var(--text);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: .8rem;
        outline: none;
        transition: all .2s;
        font-weight: 400;
    }

    .topnav-search input::placeholder {
        color: var(--text-muted);
    }

    .topnav-search input:focus {
        border-color: var(--indigo);
        background: white;
        box-shadow: 0 0 0 3px var(--indigo-soft);
    }

    .topnav-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .icon-btn {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: white;
        border: 1px solid var(--border);
        color: var(--text-dim);
        font-size: .95rem;
        cursor: pointer;
        transition: all .18s;
        position: relative;
        box-shadow: var(--shadow-sm);
    }

    .icon-btn:hover {
        background: var(--bg-root);
        color: var(--indigo);
        border-color: var(--indigo);
        box-shadow: 0 0 0 3px var(--indigo-soft);
    }

    .icon-btn .notif-dot {
        position: absolute;
        top: 7px;
        right: 8px;
        width: 6px;
        height: 6px;
        background: var(--rose);
        border-radius: 50%;
        border: 1.5px solid white;
    }

    .topnav-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--indigo), var(--violet));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .78rem;
        font-weight: 700;
        color: white;
        cursor: pointer;
        border: 2.5px solid white;
        box-shadow: 0 2px 8px rgba(91, 94, 244, .3);
        transition: box-shadow .2s;
    }

    .topnav-avatar:hover {
        box-shadow: 0 4px 14px rgba(91, 94, 244, .4);
    }

    /* =====================
   PAGE CONTENT
===================== */
    .page-content {
        padding: 2rem;
        flex: 1;
    }

    .page-header {
        margin-bottom: 2rem;
        animation: fadeUp .45s ease both;
    }

    .page-greeting {
        font-size: .72rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--indigo);
        background: var(--indigo-soft);
        display: inline-block;
        padding: .2rem .7rem;
        border-radius: 20px;
        margin-bottom: .5rem;
        font-weight: 500;
    }

    .page-heading {
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -.4px;
    }

    .page-heading span {
        color: var(--indigo);
    }

    .date-badge {
        font-size: .7rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-muted);
        background: white;
        border: 1px solid var(--border);
        padding: .3rem .75rem;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: .5rem;
        box-shadow: var(--shadow-sm);
    }

    /* =====================
   STAT CARDS
===================== */
    .stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.4rem;
        position: relative;
        overflow: hidden;
        transition: all .22s;
        animation: fadeUp .45s ease both;
        box-shadow: var(--shadow-sm);
    }

    .stat-card::after {
        content: '';
        position: absolute;
        top: -30px;
        right: -20px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: var(--accent-bg, rgba(91, 94, 244, 0.06));
        pointer-events: none;
    }

    .stat-card:hover {
        border-color: var(--border-md);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .stat-card.indigo {
        --clr: var(--indigo);
        --accent-bg: rgba(91, 94, 244, 0.07);
    }

    .stat-card.blue {
        --clr: var(--blue);
        --accent-bg: rgba(59, 130, 246, 0.07);
    }

    .stat-card.violet {
        --clr: var(--violet);
        --accent-bg: rgba(139, 92, 246, 0.07);
    }

    .stat-card.amber {
        --clr: var(--amber);
        --accent-bg: rgba(245, 158, 11, 0.07);
    }

    .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .stat-label {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--accent-bg, var(--indigo-soft));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
        color: var(--clr);
    }

    .stat-value {
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -.4px;
        color: var(--text);
        line-height: 1;
        margin-bottom: .45rem;
        overflow-wrap: break-word;
    }

    .stat-change {
        font-size: .7rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: .3rem;
    }

    .stat-change.up {
        color: var(--emerald);
    }

    .stat-change.down {
        color: var(--rose);
    }

    .stat-bar {
        height: 3px;
        background: var(--border);
        border-radius: 2px;
        margin-top: 1rem;
        overflow: hidden;
    }

    .stat-bar-fill {
        height: 100%;
        background: var(--clr);
        border-radius: 2px;
        animation: barGrow 1s ease .3s both;
    }

    @keyframes barGrow {
        from {
            width: 0 !important;
        }
    }

    /* =====================
   CARDS
===================== */
    .glass-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.4rem;
        animation: fadeUp .45s ease both;
        box-shadow: var(--shadow-sm);
        transition: box-shadow .2s;
    }

    .glass-card:hover {
        box-shadow: var(--shadow-md);
    }

    .card-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .card-title {
        font-size: .875rem;
        font-weight: 700;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .card-title i {
        color: var(--indigo);
    }

    .card-action {
        font-size: .7rem;
        color: var(--indigo);
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: opacity .15s;
        background: var(--indigo-soft);
        padding: .25rem .65rem;
        border-radius: 6px;
    }

    .card-action:hover {
        opacity: .75;
    }

    /* =====================
   CHART BARS
===================== */
    .chart-bars {
        display: flex;
        align-items: flex-end;
        gap: .5rem;
        height: 130px;
    }

    .bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        height: 100%;
    }

    .bar-label {
        font-size: .6rem;
        color: var(--text-muted);
        font-family: 'JetBrains Mono', monospace;
        margin-top: auto;
        font-weight: 500;
    }

    .bar-track {
        flex: 1;
        width: 100%;
        background: var(--bg-root);
        border-radius: 6px;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        border: 1px solid var(--border);
    }

    .bar-fill {
        width: 100%;
        border-radius: 5px;
        background: linear-gradient(180deg, var(--indigo) 0%, var(--indigo-dim) 100%);
        animation: barRise .8s cubic-bezier(.4, 0, .2, 1) both;
    }

    .bar-col.peak .bar-fill {
        background: linear-gradient(180deg, var(--violet) 0%, var(--indigo) 100%);
    }

    @keyframes barRise {
        from {
            height: 0 !important;
        }
    }

    /* =====================
   DONUT
===================== */
    .donut-wrap {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .donut-legend {
        flex: 1;
    }

    .legend-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .6rem;
    }

    .legend-left {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: .775rem;
        color: var(--text-dim);
        font-weight: 500;
    }

    .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .legend-pct {
        font-size: .72rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text);
        font-weight: 600;
        background: var(--bg-root);
        padding: .1rem .35rem;
        border-radius: 4px;
    }

    /* =====================
   ACTIVITY
===================== */
    .activity-item {
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--border);
    }

    .activity-item:last-child {
        border-bottom: none;
    }

    .activity-dot {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .78rem;
        flex-shrink: 0;
    }

    .dot-indigo {
        background: var(--indigo-soft);
        color: var(--indigo);
    }

    .dot-blue {
        background: var(--blue-soft);
        color: var(--blue);
    }

    .dot-violet {
        background: var(--violet-soft);
        color: var(--violet);
    }

    .dot-amber {
        background: var(--amber-soft);
        color: var(--amber);
    }

    .dot-rose {
        background: var(--rose-soft);
        color: var(--rose);
    }

    .activity-text {
        flex: 1;
        font-size: .795rem;
        color: var(--text-dim);
        line-height: 1.5;
    }

    .activity-text strong {
        color: var(--text);
        font-weight: 600;
    }

    .activity-time {
        font-size: .62rem;
        color: var(--text-muted);
        font-family: 'JetBrains Mono', monospace;
        flex-shrink: 0;
        background: var(--bg-root);
        padding: .15rem .4rem;
        border-radius: 4px;
        font-weight: 500;
    }

    /* =====================
   TABLE
===================== */
    .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .data-table th {
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-muted);
        padding: .6rem 1rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
        white-space: nowrap;
        background: var(--bg-root);
    }

    .data-table th:first-child {
        border-radius: 8px 0 0 0;
    }

    .data-table th:last-child {
        border-radius: 0 8px 0 0;
    }

    .data-table td {
        font-size: .8rem;
        color: var(--text-dim);
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--border);
        transition: background .12s;
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr:hover td {
        background: #fafbff;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: .28rem;
        font-size: .64rem;
        font-weight: 700;
        padding: .24rem .6rem;
        border-radius: 20px;
        letter-spacing: .03em;
    }

    .status-badge::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .badge-success {
        background: var(--emerald-soft);
        color: var(--emerald);
    }

    .badge-warning {
        background: var(--amber-soft);
        color: var(--amber);
    }

    .badge-danger {
        background: var(--rose-soft);
        color: var(--rose);
    }

    .badge-info {
        background: var(--blue-soft);
        color: var(--blue);
    }

    .product-cell {
        display: flex;
        align-items: center;
        gap: .65rem;
    }

    .product-thumb {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
        flex-shrink: 0;
        border: 1px solid var(--border);
    }

    .product-name {
        font-weight: 600;
        color: var(--text);
        font-size: .8rem;
    }

    .product-cat {
        font-size: .63rem;
        color: var(--text-muted);
    }

    /* =====================
   RING CHARTS
===================== */
    .ring-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
    }

    .ring-label {
        font-size: .68rem;
        color: var(--text-muted);
        text-align: center;
        font-weight: 500;
    }

    .ring-val {
        font-size: .85rem;
        font-weight: 800;
        color: var(--text);
    }

    /* =====================
   QUICK ACTIONS
===================== */
    .quick-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .45rem;
        padding: .9rem .4rem;
        border-radius: var(--radius-sm);
        background: var(--bg-root);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: all .2s;
        text-align: center;
    }

    .quick-action:hover {
        background: white;
        border-color: var(--clr, var(--indigo));
        box-shadow: 0 4px 14px rgba(91, 94, 244, .12);
        transform: translateY(-2px);
    }

    .quick-action i {
        font-size: 1.2rem;
        color: var(--clr, var(--indigo));
    }

    .quick-action span {
        font-size: .67rem;
        color: var(--text-dim);
        font-weight: 600;
    }

    /* =====================
   SUMMARY PILLS (new)
===================== */
    .summary-pill {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .75rem 1rem;
        background: var(--bg-root);
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: .5rem;
        transition: background .15s;
    }

    .summary-pill:hover {
        background: white;
    }

    .summary-pill:last-child {
        margin-bottom: 0;
    }

    .pill-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        flex-shrink: 0;
    }

    .pill-label {
        font-size: .78rem;
        color: var(--text-dim);
        font-weight: 500;
        flex: 1;
    }

    .pill-val {
        font-size: .8rem;
        font-weight: 700;
        color: var(--text);
        font-family: 'JetBrains Mono', monospace;
    }

    /* =====================
   ANIMATION
===================== */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .delay-1 {
        animation-delay: .07s;
    }

    .delay-2 {
        animation-delay: .13s;
    }

    .delay-3 {
        animation-delay: .19s;
    }

    .delay-4 {
        animation-delay: .25s;
    }

    .delay-5 {
        animation-delay: .31s;
    }

    /* =====================
   SCROLLBAR
===================== */
    ::-webkit-scrollbar {
        width: 4px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-md);
        border-radius: 2px;
    }


    /* =====================
   SIDEBAR COLLAPSE — DESKTOP
   Fully hides sidebar by sliding it out to the left
===================== */
    body.sidebar-collapsed .sidebar {
        transform: translateX(-258px);
    }

    body.sidebar-collapsed .main-wrap {
        margin-left: 0 !important;
    }


    /* =====================
   HAMBURGER BUTTON
   Always visible — desktop triggers collapse, mobile triggers overlay
===================== */
    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        background: white;
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text-dim);
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
        transition: all .2s;
        position: relative;
        overflow: hidden;
    }

    .hamburger:hover {
        background: var(--bg-root);
        color: var(--indigo);
        border-color: var(--indigo);
        box-shadow: 0 0 0 3px var(--indigo-soft);
    }

    /* Animated 3-line burger icon using spans */
    .hamburger .bun {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 18px;
        transition: all .3s;
    }

    .hamburger .bun span {
        display: block;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        transform-origin: center;
    }

    /* Animate to X when active */
    .hamburger.active .bun span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .hamburger.active .bun span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger.active .bun span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* =====================
   OVERLAY (mobile only)
===================== */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(26, 29, 46, 0.45);
        backdrop-filter: blur(2px);
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
    }

    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* =====================
   RESPONSIVE — MOBILE (< 992px)
===================== */
    @media (max-width: 992px) {

        /* On mobile, sidebar-collapsed should NOT hide the sidebar (use mobile-open instead) */
        body.sidebar-collapsed .sidebar {
            transform: translateX(-258px);
            /* keep hidden until mobile-open */
        }

        body.sidebar-collapsed .main-wrap {
            margin-left: 0 !important;
        }

        /* Sidebar hidden off-screen by default on mobile */
        .sidebar {
            transform: translateX(-258px);
            z-index: 101;
            /* above overlay (100) */
        }

        /* Slide in when mobile-open toggled */
        .sidebar.mobile-open {
            transform: translateX(0) !important;
        }

        .main-wrap {
            margin-left: 0 !important;
        }

        .topnav-search {
            display: none;
        }
    }

    /* Form Input */
    /* ============================================================
   NEXDASH FORM CONTROLS  — nx-form.css
   Bootstrap-like naming, NexDash theme
   
   QUICK REFERENCE
   ──────────────────────────────────────────────────────────
   .nx-label                   → label
   .nx-label-sm / .nx-label-lg → size variants
   .nx-required                → red asterisk helper

   .nx-input                   → text input
   .nx-input-sm / .nx-input-lg → size variants
   .nx-input:disabled          → disabled state
   .nx-input.is-valid          → success state
   .nx-input.is-invalid        → error state

   .nx-textarea                → textarea
   .nx-textarea-sm / -lg       → size variants

   .nx-select                  → select dropdown
   .nx-select-sm / .nx-select-lg

   .nx-form-group              → wraps label + input + hint/feedback
   .nx-input-group             → addon (prefix/suffix) wrapper
   .nx-input-group-text        → addon text (Rp, @, .com…)
   .nx-input-icon-wrap         → icon inside input wrapper
   .nx-input-icon              → prefix icon
   .nx-input-icon-end          → suffix icon / action button

   .nx-valid-feedback          → success message (shown on .is-valid)
   .nx-invalid-feedback        → error message (shown on .is-invalid)
   .nx-form-hint               → neutral helper text

   .nx-form-check              → checkbox wrapper
   .nx-form-check-input        → checkbox element
   .nx-form-check-label        → checkbox label

   .nx-form-radio              → radio wrapper  
   .nx-form-radio-input        → radio element
   .nx-form-radio-label        → radio label

   .nx-form-section            → card section container
   .nx-form-section-header     → section title row
   .nx-form-divider            → horizontal rule between groups
   .nx-form-divider-label      → labeled horizontal rule
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   0. TOKENS
──────────────────────────────────────────────────────────── */
:root {
  /* brand */
  --nx-indigo:        #5b5ef4;
  --nx-indigo-dim:    #7577f6;
  --nx-indigo-soft:   rgba(91, 94, 244, 0.10);
  --nx-indigo-glow:   rgba(91, 94, 244, 0.18);
  --nx-violet:        #8b5cf6;
  --nx-emerald:       #10b981;
  --nx-emerald-soft:  rgba(16, 185, 129, 0.10);
  --nx-amber:         #f59e0b;
  --nx-amber-soft:    rgba(245, 158, 11, 0.10);
  --nx-rose:          #f43f5e;
  --nx-rose-soft:     rgba(244, 63, 94, 0.10);
  --nx-blue:          #3b82f6;
  --nx-blue-soft:     rgba(59, 130, 246, 0.10);

  /* surface */
  --nx-bg:            #f0f2f7;
  --nx-card:          #ffffff;
  --nx-border:        #e8eaf0;
  --nx-border-md:     #d8dce8;

  /* text */
  --nx-text:          #1a1d2e;
  --nx-text-dim:      #64748b;
  --nx-text-muted:    #8892a4;

  /* radius */
  --nx-radius:        16px;
  --nx-radius-sm:     10px;
  --nx-radius-xs:     6px;

  /* shadow */
  --nx-shadow-sm:     0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --nx-shadow-md:     0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);

  /* focus ring */
  --nx-focus-ring:    0 0 0 3.5px rgba(91, 94, 244, 0.18);
  --nx-focus-ring-valid:   0 0 0 3px rgba(16, 185, 129, 0.18);
  --nx-focus-ring-invalid: 0 0 0 3px rgba(244, 63, 94, 0.15);

  /* input sizing */
  --nx-input-height-sm: 34px;
  --nx-input-height:    42px;
  --nx-input-height-lg: 50px;

  --nx-font-size-sm:    0.75rem;
  --nx-font-size:       0.83rem;
  --nx-font-size-lg:    0.93rem;

  --nx-padding-sm:      0.4rem 0.75rem;
  --nx-padding:         0.62rem 0.9rem;
  --nx-padding-lg:      0.75rem 1.1rem;
}


/* ────────────────────────────────────────────────────────────
   1. LABEL
──────────────────────────────────────────────────────────── */
.nx-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: 0.38rem;
  line-height: 1.4;
  font-family: inherit;
}

.nx-label-sm { font-size: 0.66rem; margin-bottom: 0.3rem; }
.nx-label-lg { font-size: 0.82rem; margin-bottom: 0.45rem; }

/* required asterisk */
.nx-required {
  color: var(--nx-rose);
  font-size: 0.75rem;
  margin-left: 0.1rem;
  font-weight: 800;
  line-height: 1;
}

/* optional tag */
.nx-optional {
  font-size: 0.63rem;
  font-weight: 400;
  color: var(--nx-text-muted);
  margin-left: 0.2rem;
}

/* char counter inside label */
.nx-char-count {
  margin-left: auto;
  font-size: 0.63rem;
  font-weight: 400;
  font-family: 'JetBrains Mono', monospace;
  color: var(--nx-text-muted);
  transition: color 0.18s;
}
.nx-char-count.nx-warn { color: var(--nx-amber); }
.nx-char-count.nx-over { color: var(--nx-rose); }


/* ────────────────────────────────────────────────────────────
   2. BASE INPUT
──────────────────────────────────────────────────────────── */
.nx-input {
  display: block;
  width: 100%;
  min-height: var(--nx-input-height);
  padding: var(--nx-padding);
  font-family: inherit;
  font-size: var(--nx-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--nx-text);
  background: var(--nx-bg);
  border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nx-input::placeholder {
  color: var(--nx-text-muted);
  font-weight: 400;
}

.nx-input:hover:not(:disabled) {
  border-color: var(--nx-border-md);
  background: var(--nx-card);
}

.nx-input:focus {
  border-color: var(--nx-indigo);
  background: var(--nx-card);
  box-shadow: var(--nx-focus-ring);
}

/* size modifiers */
.nx-input-sm {
  min-height: var(--nx-input-height-sm);
  padding: var(--nx-padding-sm);
  font-size: var(--nx-font-size-sm);
  border-radius: var(--nx-radius-xs);
}

.nx-input-lg {
  min-height: var(--nx-input-height-lg);
  padding: var(--nx-padding-lg);
  font-size: var(--nx-font-size-lg);
  border-radius: var(--nx-radius);
}

/* disabled */
.nx-input:disabled,
.nx-input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--nx-bg);
  border-color: var(--nx-border);
  box-shadow: none !important;
}

/* valid state */
.nx-input.is-valid {
  border-color: var(--nx-emerald);
  background: var(--nx-card);
  box-shadow: var(--nx-focus-ring-valid);
}
.nx-input.is-valid:focus {
  border-color: var(--nx-emerald);
  box-shadow: var(--nx-focus-ring-valid);
}

/* invalid state */
.nx-input.is-invalid {
  border-color: var(--nx-rose);
  background: var(--nx-card);
  box-shadow: var(--nx-focus-ring-invalid);
}
.nx-input.is-invalid:focus {
  border-color: var(--nx-rose);
  box-shadow: var(--nx-focus-ring-invalid);
}


/* ────────────────────────────────────────────────────────────
   3. TEXTAREA
──────────────────────────────────────────────────────────── */
.nx-textarea {
  display: block;
  width: 100%;
  padding: var(--nx-padding);
  font-family: inherit;
  font-size: var(--nx-font-size);
  font-weight: 400;
  line-height: 1.65;
  color: var(--nx-text);
  background: var(--nx-bg);
  border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  outline: none;
  appearance: none;
  resize: vertical;
  min-height: 90px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

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

.nx-textarea:hover:not(:disabled) {
  border-color: var(--nx-border-md);
  background: var(--nx-card);
}

.nx-textarea:focus {
  border-color: var(--nx-indigo);
  background: var(--nx-card);
  box-shadow: var(--nx-focus-ring);
}

.nx-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  resize: none;
}

.nx-textarea.is-valid {
  border-color: var(--nx-emerald);
  box-shadow: var(--nx-focus-ring-valid);
}

.nx-textarea.is-invalid {
  border-color: var(--nx-rose);
  box-shadow: var(--nx-focus-ring-invalid);
}

/* size */
.nx-textarea-sm {
  padding: var(--nx-padding-sm);
  font-size: var(--nx-font-size-sm);
  min-height: 70px;
  border-radius: var(--nx-radius-xs);
}

.nx-textarea-lg {
  padding: var(--nx-padding-lg);
  font-size: var(--nx-font-size-lg);
  min-height: 120px;
  border-radius: var(--nx-radius);
}

/* no-resize helper */
.nx-textarea-fixed { resize: none; }


/* ────────────────────────────────────────────────────────────
   4. SELECT
──────────────────────────────────────────────────────────── */
.nx-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* custom arrow */
.nx-select-wrap::after {
  content: '\F282';
  font-family: 'bootstrap-icons';
  position: absolute;
  right: 0.88rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-text-muted);
  font-size: 0.72rem;
  pointer-events: none;
  transition: color 0.18s, transform 0.2s;
}
.nx-select-wrap:focus-within::after {
  color: var(--nx-indigo);
}

.nx-select {
  display: block;
  width: 100%;
  min-height: var(--nx-input-height);
  padding: var(--nx-padding);
  padding-right: 2.2rem;
  font-family: inherit;
  font-size: var(--nx-font-size);
  font-weight: 400;
  color: var(--nx-text);
  background: var(--nx-bg);
  border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nx-select:hover:not(:disabled) {
  border-color: var(--nx-border-md);
  background: var(--nx-card);
}

.nx-select:focus {
  border-color: var(--nx-indigo);
  background: var(--nx-card);
  box-shadow: var(--nx-focus-ring);
}

.nx-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nx-select.is-valid  {
  border-color: var(--nx-emerald);
  box-shadow: var(--nx-focus-ring-valid);
}
.nx-select.is-invalid {
  border-color: var(--nx-rose);
  box-shadow: var(--nx-focus-ring-invalid);
}

/* size modifiers for select */
.nx-select-sm {
  min-height: var(--nx-input-height-sm);
  padding: var(--nx-padding-sm);
  padding-right: 2rem;
  font-size: var(--nx-font-size-sm);
  border-radius: var(--nx-radius-xs);
}

.nx-select-lg {
  min-height: var(--nx-input-height-lg);
  padding: var(--nx-padding-lg);
  padding-right: 2.4rem;
  font-size: var(--nx-font-size-lg);
  border-radius: var(--nx-radius);
}


/* ────────────────────────────────────────────────────────────
   5. INPUT GROUP  (addon prefix / suffix)
──────────────────────────────────────────────────────────── */
.nx-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  overflow: hidden;
  background: var(--nx-bg);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nx-input-group:hover:not(:focus-within) {
  border-color: var(--nx-border-md);
  background: var(--nx-card);
}

.nx-input-group:focus-within {
  border-color: var(--nx-indigo);
  background: var(--nx-card);
  box-shadow: var(--nx-focus-ring);
}

/* addon text chip */
.nx-input-group-text {
  display: flex;
  align-items: center;
  padding: 0 0.88rem;
  font-size: 0.73rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--nx-indigo);
  background: var(--nx-indigo-soft);
  border-right: 1.5px solid rgba(91, 94, 244, 0.15);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: border-color 0.2s;
}

/* suffix addon — place after input */
.nx-input-group-text.nx-append {
  border-right: none;
  border-left: 1.5px solid rgba(91, 94, 244, 0.15);
}

/* strip border/bg from nested input */
.nx-input-group > .nx-input {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.nx-input-group > .nx-input:focus {
  box-shadow: none;
}

/* valid / invalid group */
.nx-input-group.is-valid {
  border-color: var(--nx-emerald);
  box-shadow: var(--nx-focus-ring-valid);
}
.nx-input-group.is-invalid {
  border-color: var(--nx-rose);
  box-shadow: var(--nx-focus-ring-invalid);
}

/* sm / lg group */
.nx-input-group-sm {
  border-radius: var(--nx-radius-xs);
}
.nx-input-group-sm .nx-input-group-text,
.nx-input-group-sm > .nx-input {
  padding: var(--nx-padding-sm);
  font-size: var(--nx-font-size-sm);
}

.nx-input-group-lg {
  border-radius: var(--nx-radius);
}
.nx-input-group-lg .nx-input-group-text,
.nx-input-group-lg > .nx-input {
  padding: var(--nx-padding-lg);
  font-size: var(--nx-font-size-lg);
}


/* ────────────────────────────────────────────────────────────
   6. INPUT WITH ICON  (icon inside input)
──────────────────────────────────────────────────────────── */
.nx-input-icon-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.nx-input-icon {
  position: absolute;
  left: 0.88rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-text-muted);
  font-size: 0.9rem;
  pointer-events: none;
  transition: color 0.18s;
  line-height: 1;
}

.nx-input-icon-end {
  position: absolute;
  right: 0.88rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.18s;
  line-height: 1;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
}

.nx-input-icon-wrap:focus-within .nx-input-icon { color: var(--nx-indigo); }
.nx-input-icon-end:hover { color: var(--nx-indigo); }

/* shift input text to make room for icons */
.nx-input-icon-wrap > .nx-input { padding-left: 2.35rem; }
.nx-input-icon-wrap.nx-has-end > .nx-input { padding-right: 2.5rem; }


/* ────────────────────────────────────────────────────────────
   7. FEEDBACK & HINT
──────────────────────────────────────────────────────────── */
.nx-valid-feedback,
.nx-invalid-feedback,
.nx-form-hint {
  display: none;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.67rem;
  margin-top: 0.32rem;
  line-height: 1.5;
}

.nx-form-hint {
  display: flex;
  color: var(--nx-text-muted);
}

.nx-valid-feedback   { color: var(--nx-emerald); }
.nx-invalid-feedback { color: var(--nx-rose); }

/* show feedback when sibling control has state class */
.nx-input.is-valid    ~ .nx-valid-feedback,
.nx-textarea.is-valid ~ .nx-valid-feedback,
.nx-select.is-valid   ~ .nx-valid-feedback,
.nx-input-group.is-valid   ~ .nx-valid-feedback,
.nx-input-icon-wrap .nx-input.is-valid ~ .nx-valid-feedback { display: flex; }

.nx-input.is-valid    ~ .nx-form-hint,
.nx-textarea.is-valid ~ .nx-form-hint { display: none; }

.nx-input.is-invalid    ~ .nx-invalid-feedback,
.nx-textarea.is-invalid ~ .nx-invalid-feedback,
.nx-select.is-invalid   ~ .nx-invalid-feedback,
.nx-input-group.is-invalid   ~ .nx-invalid-feedback,
.nx-input-icon-wrap .nx-input.is-invalid ~ .nx-invalid-feedback { display: flex; }

.nx-input.is-invalid    ~ .nx-form-hint,
.nx-textarea.is-invalid ~ .nx-form-hint { display: none; }


/* ────────────────────────────────────────────────────────────
   8. FORM GROUP  (full field block)
──────────────────────────────────────────────────────────── */
.nx-form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1rem;
}
.nx-form-group:last-child { margin-bottom: 0; }

/* label row that spans full width (label + char counter) */
.nx-form-group > .nx-label {
  display: flex;
  width: 100%;
}


/* ────────────────────────────────────────────────────────────
   9. CHECKBOX
──────────────────────────────────────────────────────────── */
.nx-form-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  padding: 0;
}

.nx-form-check-input {
  /* hide native */
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--nx-border-md);
  background: var(--nx-card);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  flex-shrink: 0;
}

.nx-form-check:hover .nx-form-check-input {
  border-color: var(--nx-indigo);
}

.nx-form-check-input:checked {
  background: var(--nx-indigo);
  border-color: var(--nx-indigo);
  box-shadow: 0 2px 6px rgba(91, 94, 244, 0.3);
}

.nx-form-check-input:checked::after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  border: 1.5px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.nx-form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nx-form-check-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nx-text-dim);
  transition: color 0.15s;
  cursor: pointer;
}

.nx-form-check-input:checked ~ .nx-form-check-label {
  color: var(--nx-text);
  font-weight: 600;
}


/* ────────────────────────────────────────────────────────────
   10. RADIO
──────────────────────────────────────────────────────────── */
.nx-form-radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
}

.nx-form-radio-input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--nx-border-md);
  background: var(--nx-card);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.nx-form-radio:hover .nx-form-radio-input {
  border-color: var(--nx-indigo);
}

.nx-form-radio-input:checked {
  border-color: var(--nx-indigo);
  border-width: 2px;
  box-shadow: inset 0 0 0 3px var(--nx-indigo);
}

.nx-form-radio-input:disabled { opacity: 0.5; cursor: not-allowed; }

.nx-form-radio-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nx-text-dim);
  transition: color 0.15s;
  cursor: pointer;
}

.nx-form-radio-input:checked ~ .nx-form-radio-label {
  color: var(--nx-text);
  font-weight: 600;
}


/* ────────────────────────────────────────────────────────────
   11. FORM SECTION CARD
──────────────────────────────────────────────────────────── */
.nx-form-section {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-sm);
  overflow: hidden;
  margin-bottom: 1.1rem;
  transition: box-shadow 0.2s;
}
.nx-form-section:hover { box-shadow: var(--nx-shadow-md); }

.nx-form-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--nx-border);
  background: #fafbff;
}

.nx-form-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}
/* color helpers for section icons */
.nx-form-section-icon.indigo  { background: var(--nx-indigo-soft);   color: var(--nx-indigo); }
.nx-form-section-icon.emerald { background: var(--nx-emerald-soft);  color: var(--nx-emerald); }
.nx-form-section-icon.amber   { background: var(--nx-amber-soft);    color: var(--nx-amber); }
.nx-form-section-icon.rose    { background: var(--nx-rose-soft);     color: var(--nx-rose); }
.nx-form-section-icon.blue    { background: var(--nx-blue-soft);     color: var(--nx-blue); }

.nx-form-section-title { font-size: 0.85rem; font-weight: 700; color: var(--nx-text); }
.nx-form-section-desc  { font-size: 0.66rem; color: var(--nx-text-muted); margin-top: 0.05rem; }

.nx-form-section-body  { padding: 1.4rem 1.5rem; }


/* ────────────────────────────────────────────────────────────
   12. DIVIDERS
──────────────────────────────────────────────────────────── */
.nx-form-divider {
  height: 1px;
  background: var(--nx-border);
  margin: 0.5rem 0 1rem;
  border: none;
}

.nx-form-divider-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  margin: 0.25rem 0 1rem;
}
.nx-form-divider-label::before,
.nx-form-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nx-border);
}

/* Nex Components */
/* ============================================================
   NEXDASH UI  —  nx-ui.css   v1.0.0
   Bootstrap-like naming · NexDash theme
   
   COMPONENTS
   ──────────────────────────────────────────────────────────
   01. BUTTON          .nx-btn  -primary -secondary -ghost
                       -success -warning -danger -info
                       -outline-* variants
                       -sm  -lg  -icon  -pill  -block
                       :disabled / .nx-btn-loading

   02. BADGE           .nx-badge  -primary -success -warning
                       -danger -info -secondary
                       -soft-* variants  -pill  -dot

   03. ALERT           .nx-alert  -primary -success -warning
                       -danger -info  .nx-alert-dismissible

   04. BREADCRUMB      .nx-breadcrumb  .nx-breadcrumb-item
                       .nx-breadcrumb-sep  .active

   05. CARD            .nx-card  .nx-card-header  .nx-card-body
                       .nx-card-footer  .nx-card-img-top
                       .nx-card-title  .nx-card-text
                       -hoverable  -bordered  -flat

   06. AVATAR          .nx-avatar  -sm  -lg  -xl
                       -rounded  -square
                       .nx-avatar-group

   07. SPINNER         .nx-spinner  -sm  -lg
                       .nx-spinner-dots  .nx-spinner-pulse

   08. PROGRESS        .nx-progress  .nx-progress-bar
                       -success -warning -danger
                       -striped  -animated  -sm  -lg

   09. TABS            .nx-tabs  .nx-tab-item  .active
                       .nx-tab-content  .nx-tab-pane

   10. PAGINATION      .nx-pagination  .nx-page-item
                       .nx-page-link  .active  :disabled

   11. TOOLTIP         .nx-tooltip  data-nx-tip
                       -top  -bottom  -left  -right

   12. DROPDOWN        .nx-dropdown  .nx-dropdown-menu
                       .nx-dropdown-item  .nx-dropdown-divider
                       .nx-dropdown-header

   13. CHIP / TAG      .nx-chip  -primary -success -warning
                       -danger -info  -removable

   14. STAT CARD       .nx-stat  .nx-stat-icon  .nx-stat-val
                       .nx-stat-label  .nx-stat-change
                       .nx-up  .nx-down

   15. DIVIDER         .nx-divider  .nx-divider-label

   16. EMPTY STATE     .nx-empty  .nx-empty-icon
                       .nx-empty-title  .nx-empty-sub
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   0.  TOKENS  (shared with nx-form.css)
───────────────────────────────────────────────────────────── */
:root {
  --nx-indigo:       #5b5ef4;
  --nx-indigo-dim:   #7577f6;
  --nx-indigo-soft:  rgba(91,94,244,.10);
  --nx-indigo-glow:  rgba(91,94,244,.22);
  --nx-violet:       #8b5cf6;
  --nx-violet-soft:  rgba(139,92,246,.10);
  --nx-emerald:      #10b981;
  --nx-emerald-soft: rgba(16,185,129,.10);
  --nx-emerald-dim:  #059669;
  --nx-amber:        #f59e0b;
  --nx-amber-soft:   rgba(245,158,11,.10);
  --nx-amber-dim:    #d97706;
  --nx-rose:         #f43f5e;
  --nx-rose-soft:    rgba(244,63,94,.10);
  --nx-rose-dim:     #e11d48;
  --nx-blue:         #3b82f6;
  --nx-blue-soft:    rgba(59,130,246,.10);
  --nx-blue-dim:     #2563eb;
  --nx-slate:        #64748b;
  --nx-slate-soft:   rgba(100,116,139,.10);

  --nx-bg:           #f0f2f7;
  --nx-card:         #ffffff;
  --nx-border:       #e8eaf0;
  --nx-border-md:    #d8dce8;

  --nx-text:         #1a1d2e;
  --nx-text-dim:     #64748b;
  --nx-text-muted:   #8892a4;

  --nx-radius:       16px;
  --nx-radius-sm:    10px;
  --nx-radius-xs:    6px;
  --nx-radius-pill:  999px;

  --nx-shadow-sm:    0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --nx-shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --nx-shadow-lg:    0 8px 32px rgba(0,0,0,.12);

  --nx-transition:   all .2s cubic-bezier(.4,0,.2,1);
}


/* ─────────────────────────────────────────────────────────────
   01.  BUTTON
───────────────────────────────────────────────────────────── */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .55rem 1.15rem;
  border-radius: var(--nx-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--nx-transition);
  position: relative;
  overflow: hidden;
  outline: none;
  letter-spacing: .01em;
}
.nx-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--nx-indigo-soft);
}

/* ── color variants ── */
.nx-btn-primary {
  background: linear-gradient(135deg, var(--nx-indigo), var(--nx-violet));
  color: white;
  box-shadow: 0 4px 14px var(--nx-indigo-glow);
}
.nx-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(91,94,244,.38);
  color: white;
}
.nx-btn-primary:active { transform: none; box-shadow: none; }

.nx-btn-secondary {
  background: var(--nx-card);
  color: var(--nx-text-dim);
  border-color: var(--nx-border-md);
  box-shadow: var(--nx-shadow-sm);
}
.nx-btn-secondary:hover {
  background: var(--nx-bg);
  color: var(--nx-text);
  border-color: var(--nx-border-md);
}

.nx-btn-ghost {
  background: transparent;
  color: var(--nx-text-dim);
  border-color: transparent;
  box-shadow: none;
}
.nx-btn-ghost:hover { background: var(--nx-bg); color: var(--nx-text); }

.nx-btn-success {
  background: linear-gradient(135deg, var(--nx-emerald), var(--nx-emerald-dim));
  color: white;
  box-shadow: 0 4px 14px rgba(16,185,129,.28);
}
.nx-btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,.38); color: white; }

.nx-btn-warning {
  background: linear-gradient(135deg, var(--nx-amber), var(--nx-amber-dim));
  color: white;
  box-shadow: 0 4px 14px rgba(245,158,11,.28);
}
.nx-btn-warning:hover { transform: translateY(-1px); color: white; }

.nx-btn-danger {
  background: linear-gradient(135deg, var(--nx-rose), var(--nx-rose-dim));
  color: white;
  box-shadow: 0 4px 14px rgba(244,63,94,.28);
}
.nx-btn-danger:hover { transform: translateY(-1px); color: white; }

.nx-btn-info {
  background: linear-gradient(135deg, var(--nx-blue), var(--nx-blue-dim));
  color: white;
  box-shadow: 0 4px 14px rgba(59,130,246,.28);
}
.nx-btn-info:hover { transform: translateY(-1px); color: white; }

/* ── outline variants ── */
.nx-btn-outline-primary { background: transparent; color: var(--nx-indigo); border-color: var(--nx-indigo); }
.nx-btn-outline-primary:hover { background: var(--nx-indigo-soft); }
.nx-btn-outline-success { background: transparent; color: var(--nx-emerald); border-color: var(--nx-emerald); }
.nx-btn-outline-success:hover { background: var(--nx-emerald-soft); }
.nx-btn-outline-warning { background: transparent; color: var(--nx-amber); border-color: var(--nx-amber); }
.nx-btn-outline-warning:hover { background: var(--nx-amber-soft); }
.nx-btn-outline-danger  { background: transparent; color: var(--nx-rose); border-color: var(--nx-rose); }
.nx-btn-outline-danger:hover  { background: var(--nx-rose-soft); }
.nx-btn-outline-info    { background: transparent; color: var(--nx-blue); border-color: var(--nx-blue); }
.nx-btn-outline-info:hover    { background: var(--nx-blue-soft); }

/* ── soft variants ── */
.nx-btn-soft-primary { background: var(--nx-indigo-soft); color: var(--nx-indigo); border-color: rgba(91,94,244,.2); }
.nx-btn-soft-primary:hover { background: rgba(91,94,244,.16); }
.nx-btn-soft-success { background: var(--nx-emerald-soft); color: var(--nx-emerald); border-color: rgba(16,185,129,.2); }
.nx-btn-soft-success:hover { background: rgba(16,185,129,.16); }
.nx-btn-soft-warning { background: var(--nx-amber-soft); color: var(--nx-amber); border-color: rgba(245,158,11,.2); }
.nx-btn-soft-warning:hover { background: rgba(245,158,11,.16); }
.nx-btn-soft-danger  { background: var(--nx-rose-soft); color: var(--nx-rose); border-color: rgba(244,63,94,.2); }
.nx-btn-soft-danger:hover  { background: rgba(244,63,94,.16); }

/* ── sizes ── */
.nx-btn-sm { font-size: .72rem; padding: .38rem .82rem; border-radius: var(--nx-radius-xs); }
.nx-btn-lg { font-size: .92rem; padding: .72rem 1.5rem; border-radius: var(--nx-radius); }
.nx-btn-xl { font-size: 1rem;   padding: .88rem 2rem;   border-radius: var(--nx-radius); }

/* ── shape ── */
.nx-btn-pill   { border-radius: var(--nx-radius-pill); }
.nx-btn-block  { width: 100%; }
.nx-btn-icon   { padding: .55rem; aspect-ratio: 1; border-radius: var(--nx-radius-sm); }
.nx-btn-icon.nx-btn-sm { padding: .38rem; }
.nx-btn-icon.nx-btn-lg { padding: .72rem; }

/* ── states ── */
.nx-btn:disabled,
.nx-btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.nx-btn-loading {
  color: transparent !important;
  pointer-events: none;
}
.nx-btn-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: nx-spin .65s linear infinite;
}
.nx-btn-soft-primary.nx-btn-loading::after,
.nx-btn-outline-primary.nx-btn-loading::after { border-color: rgba(91,94,244,.3); border-top-color: var(--nx-indigo); }


/* ─────────────────────────────────────────────────────────────
   02.  BADGE
───────────────────────────────────────────────────────────── */
.nx-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .25rem .65rem;
  border-radius: var(--nx-radius-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.nx-badge-primary   { background: var(--nx-indigo);  color: white; }
.nx-badge-success   { background: var(--nx-emerald); color: white; }
.nx-badge-warning   { background: var(--nx-amber);   color: white; }
.nx-badge-danger    { background: var(--nx-rose);    color: white; }
.nx-badge-info      { background: var(--nx-blue);    color: white; }
.nx-badge-secondary { background: var(--nx-slate);   color: white; }

/* soft */
.nx-badge-soft-primary   { background: var(--nx-indigo-soft);  color: var(--nx-indigo);  border: 1px solid rgba(91,94,244,.2); }
.nx-badge-soft-success   { background: var(--nx-emerald-soft); color: var(--nx-emerald); border: 1px solid rgba(16,185,129,.2); }
.nx-badge-soft-warning   { background: var(--nx-amber-soft);   color: var(--nx-amber);   border: 1px solid rgba(245,158,11,.2); }
.nx-badge-soft-danger    { background: var(--nx-rose-soft);    color: var(--nx-rose);    border: 1px solid rgba(244,63,94,.2); }
.nx-badge-soft-info      { background: var(--nx-blue-soft);    color: var(--nx-blue);    border: 1px solid rgba(59,130,246,.2); }
.nx-badge-soft-secondary { background: var(--nx-slate-soft);   color: var(--nx-slate);   border: 1px solid rgba(100,116,139,.2); }

/* pill */
.nx-badge-pill { border-radius: var(--nx-radius-pill); }

/* dot indicator */
.nx-badge-dot::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  display: inline-block;
}

/* lg */
.nx-badge-lg { font-size: .72rem; padding: .32rem .82rem; }


/* ─────────────────────────────────────────────────────────────
   03.  ALERT
───────────────────────────────────────────────────────────── */
.nx-alert {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--nx-radius-sm);
  border: 1px solid transparent;
  font-size: .82rem;
  line-height: 1.6;
  position: relative;
}

.nx-alert-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .05rem;
  line-height: 1;
}
.nx-alert-body { flex: 1; }
.nx-alert-title {
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: .2rem;
  line-height: 1.3;
}
.nx-alert-text { font-size: .78rem; opacity: .85; }

.nx-alert-primary {
  background: var(--nx-indigo-soft);
  border-color: rgba(91,94,244,.25);
  color: var(--nx-indigo);
}
.nx-alert-success {
  background: var(--nx-emerald-soft);
  border-color: rgba(16,185,129,.25);
  color: var(--nx-emerald-dim);
}
.nx-alert-warning {
  background: var(--nx-amber-soft);
  border-color: rgba(245,158,11,.25);
  color: var(--nx-amber-dim);
}
.nx-alert-danger {
  background: var(--nx-rose-soft);
  border-color: rgba(244,63,94,.25);
  color: var(--nx-rose-dim);
}
.nx-alert-info {
  background: var(--nx-blue-soft);
  border-color: rgba(59,130,246,.25);
  color: var(--nx-blue-dim);
}

/* dismiss btn */
.nx-alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  color: currentColor;
  opacity: .5;
  padding: 0 0 0 .5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity .15s;
}
.nx-alert-dismiss:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────────
   04.  BREADCRUMB
───────────────────────────────────────────────────────────── */
.nx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0; margin: 0;
  font-size: .76rem;
}

.nx-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: .32rem;
}

.nx-breadcrumb-item a {
  color: var(--nx-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.nx-breadcrumb-item a:hover { color: var(--nx-indigo); }

.nx-breadcrumb-item.active {
  color: var(--nx-indigo);
  font-weight: 700;
}

.nx-breadcrumb-sep {
  color: var(--nx-border-md);
  font-size: .6rem;
  margin: 0 .15rem;
  line-height: 1;
}

/* with background pill style */
.nx-breadcrumb-pill {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-pill);
  padding: .35rem .9rem;
  box-shadow: var(--nx-shadow-sm);
  display: inline-flex;
}


/* ─────────────────────────────────────────────────────────────
   05.  CARD
───────────────────────────────────────────────────────────── */
.nx-card {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.nx-card-hoverable:hover {
  box-shadow: var(--nx-shadow-md);
  transform: translateY(-2px);
}

.nx-card-bordered {
  border-color: var(--nx-border-md);
}

.nx-card-flat {
  box-shadow: none;
  border-color: var(--nx-border);
}

.nx-card-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--nx-border);
  background: #fafbff;
}
.nx-card-header-title { font-size: .88rem; font-weight: 700; color: var(--nx-text); }
.nx-card-header-sub   { font-size: .67rem; color: var(--nx-text-muted); margin-top: .04rem; }
.nx-card-header-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.nx-card-body   { padding: 1.4rem; flex: 1; }
.nx-card-body-sm { padding: 1rem; }
.nx-card-body-lg { padding: 2rem; }

.nx-card-footer {
  padding: .9rem 1.4rem;
  border-top: 1px solid var(--nx-border);
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fafbff;
}

.nx-card-img-top { width: 100%; display: block; object-fit: cover; }

.nx-card-title { font-size: .95rem; font-weight: 700; color: var(--nx-text); margin-bottom: .4rem; }
.nx-card-text  { font-size: .8rem;  color: var(--nx-text-dim);  line-height: 1.65; }


/* ─────────────────────────────────────────────────────────────
   06.  AVATAR
───────────────────────────────────────────────────────────── */
.nx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--nx-indigo), var(--nx-violet));
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(91,94,244,.25);
}
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* sizes */
.nx-avatar-xs { width: 24px; height: 24px; font-size: .6rem; }
.nx-avatar-sm { width: 32px; height: 32px; font-size: .72rem; }
.nx-avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; }
.nx-avatar-xl { width: 72px; height: 72px; font-size: 1.5rem; }

/* shape */
.nx-avatar-rounded { border-radius: var(--nx-radius-sm); }
.nx-avatar-square  { border-radius: var(--nx-radius-xs); }

/* color variants */
.nx-avatar-emerald { background: linear-gradient(135deg, var(--nx-emerald), var(--nx-emerald-dim)); box-shadow: 0 2px 8px rgba(16,185,129,.25); }
.nx-avatar-amber   { background: linear-gradient(135deg, var(--nx-amber), var(--nx-amber-dim));     box-shadow: 0 2px 8px rgba(245,158,11,.25); }
.nx-avatar-rose    { background: linear-gradient(135deg, var(--nx-rose), var(--nx-rose-dim));       box-shadow: 0 2px 8px rgba(244,63,94,.25); }
.nx-avatar-blue    { background: linear-gradient(135deg, var(--nx-blue), var(--nx-blue-dim));       box-shadow: 0 2px 8px rgba(59,130,246,.25); }
.nx-avatar-slate   { background: linear-gradient(135deg, var(--nx-slate), #475569);                 box-shadow: none; }

/* status dot */
.nx-avatar-wrap {
  position: relative;
  display: inline-block;
}
.nx-avatar-status {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid white;
}
.nx-avatar-status.online  { background: var(--nx-emerald); }
.nx-avatar-status.away    { background: var(--nx-amber); }
.nx-avatar-status.busy    { background: var(--nx-rose); }
.nx-avatar-status.offline { background: var(--nx-text-muted); }

/* group */
.nx-avatar-group {
  display: flex;
}
.nx-avatar-group .nx-avatar {
  border: 2px solid white;
  margin-left: -8px;
  transition: transform .2s;
}
.nx-avatar-group .nx-avatar:first-child { margin-left: 0; }
.nx-avatar-group .nx-avatar:hover { transform: translateY(-2px); z-index: 1; }


/* ─────────────────────────────────────────────────────────────
   07.  SPINNER
───────────────────────────────────────────────────────────── */
.nx-spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 2.5px solid var(--nx-indigo-soft);
  border-top-color: var(--nx-indigo);
  border-radius: 50%;
  animation: nx-spin .65s linear infinite;
  flex-shrink: 0;
}
.nx-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.nx-spinner-lg { width: 34px; height: 34px; border-width: 3px; }
.nx-spinner-xl { width: 48px; height: 48px; border-width: 4px; }

.nx-spinner-success { border-color: var(--nx-emerald-soft); border-top-color: var(--nx-emerald); }
.nx-spinner-warning { border-color: var(--nx-amber-soft);   border-top-color: var(--nx-amber); }
.nx-spinner-danger  { border-color: var(--nx-rose-soft);    border-top-color: var(--nx-rose); }
.nx-spinner-white   { border-color: rgba(255,255,255,.25);  border-top-color: white; }

/* dots */
.nx-spinner-dots {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
}
.nx-spinner-dots span {
  width: 7px; height: 7px;
  background: var(--nx-indigo);
  border-radius: 50%;
  display: inline-block;
  animation: nx-bounce .8s ease-in-out infinite;
}
.nx-spinner-dots span:nth-child(2) { animation-delay: .16s; }
.nx-spinner-dots span:nth-child(3) { animation-delay: .32s; }

/* pulse */
.nx-spinner-pulse {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--nx-indigo);
  animation: nx-pulse-ring 1.2s ease-in-out infinite;
}

@keyframes nx-spin   { to { transform: rotate(360deg); } }
@keyframes nx-bounce {
  0%,80%,100% { transform: scale(0.6); opacity:.5; }
  40%         { transform: scale(1.0); opacity: 1; }
}
@keyframes nx-pulse-ring {
  0%   { transform: scale(0.7); opacity: .8; }
  50%  { transform: scale(1.0); opacity: .3; }
  100% { transform: scale(0.7); opacity: .8; }
}


/* ─────────────────────────────────────────────────────────────
   08.  PROGRESS
───────────────────────────────────────────────────────────── */
.nx-progress {
  width: 100%;
  height: 8px;
  background: var(--nx-border);
  border-radius: var(--nx-radius-pill);
  overflow: hidden;
}
.nx-progress-sm { height: 4px; }
.nx-progress-lg { height: 12px; }

.nx-progress-bar {
  height: 100%;
  border-radius: var(--nx-radius-pill);
  background: linear-gradient(90deg, var(--nx-indigo), var(--nx-violet));
  transition: width .6s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.nx-progress-bar-success { background: linear-gradient(90deg, var(--nx-emerald), var(--nx-emerald-dim)); }
.nx-progress-bar-warning { background: linear-gradient(90deg, var(--nx-amber), var(--nx-amber-dim)); }
.nx-progress-bar-danger  { background: linear-gradient(90deg, var(--nx-rose), var(--nx-rose-dim)); }
.nx-progress-bar-info    { background: linear-gradient(90deg, var(--nx-blue), var(--nx-blue-dim)); }

/* striped */
.nx-progress-bar-striped {
  background-size: 16px 16px;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%, transparent 75%
  );
}
.nx-progress-bar-animated {
  animation: nx-progress-stripes 1s linear infinite;
}
@keyframes nx-progress-stripes {
  from { background-position: 16px 0; }
  to   { background-position: 0 0; }
}


/* ─────────────────────────────────────────────────────────────
   09.  TABS
───────────────────────────────────────────────────────────── */
.nx-tabs {
  display: flex;
  align-items: flex-end;
  gap: .15rem;
  border-bottom: 2px solid var(--nx-border);
  padding: 0;
  margin: 0;
  list-style: none;
}

.nx-tab-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--nx-text-muted);
  cursor: pointer;
  user-select: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition: color .18s, border-color .18s;
  text-decoration: none;
  border-radius: var(--nx-radius-xs) var(--nx-radius-xs) 0 0;
  white-space: nowrap;
}
.nx-tab-item:hover { color: var(--nx-text-dim); background: var(--nx-bg); }
.nx-tab-item.active {
  color: var(--nx-indigo);
  border-bottom-color: var(--nx-indigo);
  background: transparent;
}

/* pill style tabs */
.nx-tabs-pill {
  border-bottom: none;
  background: var(--nx-bg);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  padding: .3rem;
  gap: .2rem;
  display: inline-flex;
}
.nx-tabs-pill .nx-tab-item {
  border-bottom: none;
  border-radius: var(--nx-radius-xs);
  margin-bottom: 0;
  padding: .42rem .88rem;
}
.nx-tabs-pill .nx-tab-item.active {
  background: var(--nx-card);
  color: var(--nx-indigo);
  box-shadow: var(--nx-shadow-sm);
}

.nx-tab-content {}
.nx-tab-pane { display: none; }
.nx-tab-pane.active { display: block; }


/* ─────────────────────────────────────────────────────────────
   10.  PAGINATION
───────────────────────────────────────────────────────────── */
.nx-pagination {
  display: flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  padding: 0; margin: 0;
}

.nx-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--nx-radius-xs);
  border: 1.5px solid var(--nx-border);
  background: var(--nx-card);
  color: var(--nx-text-dim);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--nx-transition);
  text-decoration: none;
  user-select: none;
  box-shadow: var(--nx-shadow-sm);
  font-family: inherit;
}

.nx-page-link:hover {
  border-color: var(--nx-indigo);
  color: var(--nx-indigo);
  background: var(--nx-indigo-soft);
}

.nx-page-item.active .nx-page-link {
  background: var(--nx-indigo);
  color: white;
  border-color: var(--nx-indigo);
  box-shadow: 0 2px 8px var(--nx-indigo-glow);
}

.nx-page-item.disabled .nx-page-link {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* larger pagination */
.nx-pagination-lg .nx-page-link { width: 42px; height: 42px; font-size: .88rem; border-radius: var(--nx-radius-sm); }


/* ─────────────────────────────────────────────────────────────
   11.  TOOLTIP
───────────────────────────────────────────────────────────── */
[data-nx-tip] {
  position: relative;
  cursor: default;
}
[data-nx-tip]::before {
  content: attr(data-nx-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: var(--nx-text);
  color: white;
  font-size: .67rem;
  font-weight: 500;
  padding: .35rem .65rem;
  border-radius: var(--nx-radius-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 999;
  box-shadow: var(--nx-shadow-md);
  letter-spacing: .01em;
}
[data-nx-tip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--nx-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 999;
}
[data-nx-tip]:hover::before,
[data-nx-tip]:hover::after { opacity: 1; }
[data-nx-tip]:hover::before { transform: translateX(-50%) scale(1); }

/* direction modifiers */
[data-nx-tip-bottom]::before {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) scale(.9);
}
[data-nx-tip-bottom]::after {
  bottom: auto; top: calc(100% + 2px);
  border-top-color: transparent; border-bottom-color: var(--nx-text);
}
[data-nx-tip-bottom]:hover::before { transform: translateX(-50%) scale(1); }


/* ─────────────────────────────────────────────────────────────
   12.  DROPDOWN
───────────────────────────────────────────────────────────── */
.nx-dropdown { position: relative; display: inline-block; }

.nx-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  box-shadow: var(--nx-shadow-lg);
  padding: .4rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transition: opacity .2s, transform .2s cubic-bezier(.4,0,.2,1);
}
.nx-dropdown-menu.nx-right { left: auto; right: 0; }

.nx-dropdown.open .nx-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.nx-dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .52rem .82rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--nx-text-dim);
  cursor: pointer;
  border-radius: var(--nx-radius-xs);
  transition: background .14s, color .14s;
  text-decoration: none;
  user-select: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.nx-dropdown-item:hover { background: var(--nx-bg); color: var(--nx-text); }
.nx-dropdown-item.danger { color: var(--nx-rose); }
.nx-dropdown-item.danger:hover { background: var(--nx-rose-soft); }

.nx-dropdown-divider { height: 1px; background: var(--nx-border); margin: .3rem .4rem; }

.nx-dropdown-header {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nx-text-muted);
  padding: .45rem .82rem .2rem;
}


/* ─────────────────────────────────────────────────────────────
   13.  CHIP / TAG
───────────────────────────────────────────────────────────── */
.nx-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .22rem .65rem;
  border-radius: var(--nx-radius-xs);
  border: 1px solid var(--nx-border);
  background: var(--nx-bg);
  color: var(--nx-text-dim);
  cursor: default;
  user-select: none;
  transition: var(--nx-transition);
  line-height: 1.4;
}

.nx-chip-primary   { background: var(--nx-indigo-soft);  color: var(--nx-indigo);  border-color: rgba(91,94,244,.2); }
.nx-chip-success   { background: var(--nx-emerald-soft); color: var(--nx-emerald); border-color: rgba(16,185,129,.2); }
.nx-chip-warning   { background: var(--nx-amber-soft);   color: var(--nx-amber);   border-color: rgba(245,158,11,.2); }
.nx-chip-danger    { background: var(--nx-rose-soft);    color: var(--nx-rose);    border-color: rgba(244,63,94,.2); }
.nx-chip-info      { background: var(--nx-blue-soft);    color: var(--nx-blue);    border-color: rgba(59,130,246,.2); }

.nx-chip-remove {
  cursor: pointer; opacity: .55; font-size: .65rem;
  line-height: 1; transition: opacity .15s;
  background: none; border: none; color: inherit; padding: 0;
  display: flex; align-items: center;
}
.nx-chip-remove:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────────
   14.  STAT CARD
───────────────────────────────────────────────────────────── */
.nx-stat {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--nx-shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--nx-transition);
}
.nx-stat:hover { box-shadow: var(--nx-shadow-md); transform: translateY(-2px); }

.nx-stat-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.nx-stat-icon.primary   { background: var(--nx-indigo-soft);  color: var(--nx-indigo); }
.nx-stat-icon.success   { background: var(--nx-emerald-soft); color: var(--nx-emerald); }
.nx-stat-icon.warning   { background: var(--nx-amber-soft);   color: var(--nx-amber); }
.nx-stat-icon.danger    { background: var(--nx-rose-soft);    color: var(--nx-rose); }
.nx-stat-icon.info      { background: var(--nx-blue-soft);    color: var(--nx-blue); }

.nx-stat-val   { font-size: 1.55rem; font-weight: 800; color: var(--nx-text); letter-spacing: -.4px; line-height: 1.1; }
.nx-stat-label { font-size: .68rem; font-weight: 600; color: var(--nx-text-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .2rem; }
.nx-stat-change {
  font-size: .7rem; font-weight: 600;
  display: flex; align-items: center; gap: .22rem; margin-top: .28rem;
}
.nx-up   { color: var(--nx-emerald); }
.nx-down { color: var(--nx-rose); }


/* ─────────────────────────────────────────────────────────────
   15.  DIVIDER
───────────────────────────────────────────────────────────── */
.nx-divider {
  height: 1px;
  background: var(--nx-border);
  border: none;
  margin: .75rem 0;
}

.nx-divider-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  margin: .75rem 0;
}
.nx-divider-label::before,
.nx-divider-label::after { content: ''; flex: 1; height: 1px; background: var(--nx-border); }


/* ─────────────────────────────────────────────────────────────
   16.  EMPTY STATE
───────────────────────────────────────────────────────────── */
.nx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
}

.nx-empty-icon {
  width: 68px; height: 68px;
  border-radius: 18px;
  background: var(--nx-bg);
  border: 2px dashed var(--nx-border-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--nx-text-muted);
  margin-bottom: 1.25rem;
}

.nx-empty-title { font-size: .95rem; font-weight: 700; color: var(--nx-text); margin-bottom: .4rem; }
.nx-empty-sub   { font-size: .78rem; color: var(--nx-text-muted); line-height: 1.65; max-width: 280px; margin-bottom: 1.25rem; }

/* Table */
/* ============================================================
   NEXDASH TABLE  —  nx-table.css   v1.0.0
   Bootstrap-like naming · NexDash theme

   QUICK REFERENCE
   ──────────────────────────────────────────────────────────
   WRAPPER
   .nx-table-wrap          → scroll container + card shell
   .nx-table-wrap-flat     → tanpa border & shadow

   TABLE
   .nx-table               → base table
   .nx-table-striped       → baris belang
   .nx-table-hover         → highlight baris saat hover
   .nx-table-bordered      → border semua sisi cell
   .nx-table-borderless    → hapus semua border
   .nx-table-sm            → padding lebih kecil
   .nx-table-lg            → padding lebih besar
   .nx-table-fixed         → table-layout: fixed

   THEAD
   .nx-thead               → default head (bg abu terang)
   .nx-thead-dark          → head gelap (indigo)
   .nx-thead-light         → head putih bersih

   TH SORT
   .nx-th-sort             → kolom sortable (kursor pointer)
   .nx-th-sort.asc         → panah ↑ aktif
   .nx-th-sort.desc        → panah ↓ aktif

   ROW STATE
   .nx-tr-selected         → baris dipilih (indigo tint)
   .nx-tr-success          → baris hijau
   .nx-tr-warning          → baris kuning
   .nx-tr-danger           → baris merah
   .nx-tr-info             → baris biru
   .nx-tr-muted            → baris abu

   CELL HELPERS
   .nx-td-fit              → lebar mengikuti konten (nowrap)
   .nx-td-center           → teks tengah
   .nx-td-right            → teks kanan
   .nx-td-mono             → font monospace (angka / kode)
   .nx-td-bold             → font tebal
   .nx-td-muted            → warna muted

   TOOLBAR
   .nx-table-toolbar       → bar di atas tabel (search, filter, actions)
   .nx-table-search        → wrapper input search
   .nx-table-search-input  → input di dalam search wrapper
   .nx-table-filter-select → select filter

   CHECKBOX
   .nx-th-check / .nx-td-check  → kolom checkbox (lebar tetap)
   .nx-check-all / .nx-check-row → checkbox khusus tabel

   BULK ACTION BAR
   .nx-bulk-bar            → bar muncul saat ada row terpilih
   .nx-bulk-count          → teks "X dipilih"
   .nx-bulk-btn            → tombol aksi bulk

   PAGINATION
   .nx-table-footer        → footer tabel (info + pagination)
   .nx-page-info           → "Menampilkan 1–10 dari 50"
   .nx-per-page            → select baris per halaman
   .nx-pager               → wrapper tombol halaman
   .nx-pager-btn           → tombol nomor halaman
   .nx-pager-btn.active    → halaman aktif
   .nx-pager-btn:disabled  → disabled

   LOADING OVERLAY
   .nx-table-loading       → overlay spinner saat fetch data

   EMPTY STATE
   .nx-table-empty         → baris kosong saat tidak ada data
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   0.  TOKENS
───────────────────────────────────────────────────────────── */
:root {
  --nx-indigo:       #5b5ef4;
  --nx-indigo-dim:   #4547d0;
  --nx-indigo-soft:  rgba(91,94,244,.10);
  --nx-indigo-glow:  rgba(91,94,244,.18);
  --nx-violet:       #8b5cf6;
  --nx-emerald:      #10b981;
  --nx-emerald-soft: rgba(16,185,129,.08);
  --nx-amber:        #f59e0b;
  --nx-amber-soft:   rgba(245,158,11,.08);
  --nx-rose:         #f43f5e;
  --nx-rose-soft:    rgba(244,63,94,.08);
  --nx-blue:         #3b82f6;
  --nx-blue-soft:    rgba(59,130,246,.08);

  --nx-bg:           #f0f2f7;
  --nx-card:         #ffffff;
  --nx-head-bg:      #f8f9ff;
  --nx-border:       #e8eaf0;
  --nx-border-md:    #d8dce8;

  --nx-text:         #1a1d2e;
  --nx-text-dim:     #64748b;
  --nx-text-muted:   #8892a4;

  --nx-radius:       16px;
  --nx-radius-sm:    10px;
  --nx-radius-xs:    6px;
  --nx-radius-pill:  999px;

  --nx-shadow-sm:    0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --nx-shadow-md:    0 4px 16px rgba(0,0,0,.08);
  --nx-focus:        0 0 0 3.5px rgba(91,94,244,.18);

  --nx-cell-px:      1.1rem;
  --nx-cell-py:      .9rem;
  --nx-cell-px-sm:   .85rem;
  --nx-cell-py-sm:   .6rem;
  --nx-cell-px-lg:   1.4rem;
  --nx-cell-py-lg:   1.15rem;
}


/* ─────────────────────────────────────────────────────────────
   1.  TABLE WRAPPER
───────────────────────────────────────────────────────────── */
.nx-table-wrap {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-sm);
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s;
}
.nx-table-wrap:hover { box-shadow: var(--nx-shadow-md); }

.nx-table-wrap-flat {
  border: none;
  box-shadow: none;
  background: transparent;
}
.nx-table-wrap-flat:hover { box-shadow: none; }

/* inner scroll for responsive */
.nx-table-scroll { overflow-x: auto; }
.nx-table-scroll::-webkit-scrollbar { height: 4px; }
.nx-table-scroll::-webkit-scrollbar-thumb { background: var(--nx-border-md); border-radius: 2px; }


/* ─────────────────────────────────────────────────────────────
   2.  BASE TABLE
───────────────────────────────────────────────────────────── */
.nx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: inherit;
  font-size: .8rem;
  color: var(--nx-text-dim);
}

/* TH */
.nx-table th {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  padding: var(--nx-cell-py) var(--nx-cell-px);
  background: var(--nx-head-bg);
  border-bottom: 1px solid var(--nx-border);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

/* TD */
.nx-table td {
  padding: var(--nx-cell-py) var(--nx-cell-px);
  border-bottom: 1px solid var(--nx-border);
  vertical-align: middle;
  transition: background .12s;
}

/* remove last row border */
.nx-table tbody tr:last-child td { border-bottom: none; }

/* first/last column padding */
.nx-table th:first-child,
.nx-table td:first-child { padding-left: 1.25rem; }
.nx-table th:last-child,
.nx-table td:last-child  { padding-right: 1.25rem; }


/* ─────────────────────────────────────────────────────────────
   3.  THEAD VARIANTS
───────────────────────────────────────────────────────────── */
/* default is nx-head-bg — defined above */

.nx-thead-dark th {
  background: linear-gradient(135deg, var(--nx-indigo), var(--nx-violet));
  color: rgba(255,255,255,.85);
  border-bottom-color: rgba(255,255,255,.12);
}

.nx-thead-light th {
  background: var(--nx-card);
  color: var(--nx-text-muted);
  border-bottom: 2px solid var(--nx-border);
}


/* ─────────────────────────────────────────────────────────────
   4.  TABLE MODIFIERS
───────────────────────────────────────────────────────────── */
/* striped */
.nx-table-striped tbody tr:nth-child(even) td { background: #fafbff; }

/* hover */
.nx-table-hover tbody tr:hover td { background: #f5f6ff; }
.nx-table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--nx-indigo-soft); }

/* bordered */
.nx-table-bordered td,
.nx-table-bordered th {
  border: 1px solid var(--nx-border);
}
.nx-table-bordered tbody tr:last-child td { border-bottom: 1px solid var(--nx-border); }

/* borderless */
.nx-table-borderless td,
.nx-table-borderless th { border: none; }
.nx-table-borderless tbody tr:last-child td { border: none; }

/* small */
.nx-table-sm th { padding: var(--nx-cell-py-sm) var(--nx-cell-px-sm); font-size: .58rem; }
.nx-table-sm td { padding: var(--nx-cell-py-sm) var(--nx-cell-px-sm); font-size: .75rem; }
.nx-table-sm th:first-child, .nx-table-sm td:first-child { padding-left: 1rem; }
.nx-table-sm th:last-child,  .nx-table-sm td:last-child  { padding-right: 1rem; }

/* large */
.nx-table-lg th { padding: var(--nx-cell-py-lg) var(--nx-cell-px-lg); }
.nx-table-lg td { padding: var(--nx-cell-py-lg) var(--nx-cell-px-lg); font-size: .85rem; }

/* fixed layout */
.nx-table-fixed { table-layout: fixed; }


/* ─────────────────────────────────────────────────────────────
   5.  SORTABLE COLUMN
───────────────────────────────────────────────────────────── */
.nx-th-sort {
  cursor: pointer;
  user-select: none;
  transition: color .15s, background .15s;
}
.nx-th-sort:hover { color: var(--nx-text); background: #f0f1fa; }

/* sort icons via pseudo */
.nx-th-sort::after {
  content: '↕';
  margin-left: .35rem;
  font-size: .6rem;
  opacity: .4;
  display: inline-block;
  transition: opacity .15s, transform .2s;
}
.nx-th-sort.asc::after  { content: '↑'; opacity: 1; color: var(--nx-indigo); }
.nx-th-sort.desc::after { content: '↓'; opacity: 1; color: var(--nx-indigo); }
.nx-th-sort.asc,
.nx-th-sort.desc { color: var(--nx-indigo); }


/* ─────────────────────────────────────────────────────────────
   6.  ROW STATE COLORS
───────────────────────────────────────────────────────────── */
/* selected */
.nx-tr-selected td { background: var(--nx-indigo-soft) !important; }
.nx-tr-selected td:first-child { box-shadow: inset 3px 0 0 var(--nx-indigo); }

/* contextual */
.nx-tr-success td { background: var(--nx-emerald-soft); }
.nx-tr-warning td { background: var(--nx-amber-soft); }
.nx-tr-danger  td { background: var(--nx-rose-soft); }
.nx-tr-info    td { background: var(--nx-blue-soft); }
.nx-tr-muted   td { background: var(--nx-bg); opacity: .65; }


/* ─────────────────────────────────────────────────────────────
   7.  CELL HELPERS
───────────────────────────────────────────────────────────── */
.nx-td-fit     { width: 1%; white-space: nowrap; }
.nx-td-center  { text-align: center !important; }
.nx-td-right   { text-align: right !important; }
.nx-td-mono    { font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.nx-td-bold    { font-weight: 700; color: var(--nx-text); }
.nx-td-muted   { color: var(--nx-text-muted); font-size: .75rem; }
.nx-td-nowrap  { white-space: nowrap; }
.nx-td-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* action cell */
.nx-td-actions { white-space: nowrap; }
.nx-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--nx-border); background: var(--nx-card);
  color: var(--nx-text-muted); font-size: .8rem;
  cursor: pointer; transition: all .15s;
  font-family: inherit;
}
.nx-action-btn:hover { transform: translateY(-1px); box-shadow: var(--nx-shadow-sm); }
.nx-action-btn.view   :hover,
.nx-action-btn.view   { }
.nx-action-btn:hover.view   { background: var(--nx-indigo-soft); color: var(--nx-indigo); border-color: rgba(91,94,244,.25); }
.nx-action-btn-view:hover   { background: var(--nx-indigo-soft); color: var(--nx-indigo); border-color: rgba(91,94,244,.25); }
.nx-action-btn-edit:hover   { background: var(--nx-blue-soft);   color: var(--nx-blue);   border-color: rgba(59,130,246,.25); }
.nx-action-btn-delete:hover { background: var(--nx-rose-soft);   color: var(--nx-rose);   border-color: rgba(244,63,94,.25); }
.nx-action-btn-toggle:hover { background: var(--nx-amber-soft);  color: var(--nx-amber);  border-color: rgba(245,158,11,.25); }


/* ─────────────────────────────────────────────────────────────
   8.  CHECKBOX COLUMN
───────────────────────────────────────────────────────────── */
.nx-th-check,
.nx-td-check {
  width: 46px;
  padding-right: .5rem !important;
}
.nx-td-check { padding-top: 0; padding-bottom: 0; }

.nx-check-all,
.nx-check-row {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; min-width: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--nx-border-md);
  background: var(--nx-card);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  flex-shrink: 0;
  vertical-align: middle;
}
.nx-check-all:hover,
.nx-check-row:hover { border-color: var(--nx-indigo); }

.nx-check-all:checked,
.nx-check-row:checked {
  background: var(--nx-indigo);
  border-color: var(--nx-indigo);
  box-shadow: 0 2px 6px rgba(91,94,244,.3);
}
.nx-check-all:checked::after,
.nx-check-row:checked::after {
  content: '';
  display: block;
  width: 4px; height: 7px;
  border: 1.5px solid white;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}
/* indeterminate */
.nx-check-all:indeterminate {
  background: var(--nx-indigo);
  border-color: var(--nx-indigo);
}
.nx-check-all:indeterminate::after {
  content: '';
  display: block;
  width: 8px; height: 2px;
  background: white;
  border: none;
  transform: none;
  border-radius: 1px;
}


/* ─────────────────────────────────────────────────────────────
   9.  TOOLBAR
───────────────────────────────────────────────────────────── */
.nx-table-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--nx-border);
  background: var(--nx-card);
}

/* search */
.nx-table-search {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.nx-table-search-icon {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--nx-text-muted); font-size: .85rem; pointer-events: none;
  transition: color .18s;
}
.nx-table-search:focus-within .nx-table-search-icon { color: var(--nx-indigo); }

.nx-table-search-input {
  width: 100%;
  font-family: inherit; font-size: .8rem; color: var(--nx-text);
  background: var(--nx-bg); border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  padding: .52rem .85rem .52rem 2.25rem;
  outline: none; transition: all .2s;
}
.nx-table-search-input::placeholder { color: var(--nx-text-muted); }
.nx-table-search-input:hover { border-color: var(--nx-border-md); background: var(--nx-card); }
.nx-table-search-input:focus { border-color: var(--nx-indigo); background: var(--nx-card); box-shadow: var(--nx-focus); }

/* filter select */
.nx-table-filter-select {
  font-family: inherit; font-size: .78rem; font-weight: 500; color: var(--nx-text-dim);
  background: var(--nx-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%238892a4' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center;
  border: 1.5px solid var(--nx-border); border-radius: var(--nx-radius-sm);
  padding: .52rem 2rem .52rem .8rem;
  outline: none; cursor: pointer; appearance: none;
  transition: border-color .2s, background-color .2s;
}
.nx-table-filter-select:focus { border-color: var(--nx-indigo); background-color: var(--nx-card); box-shadow: var(--nx-focus); }

/* toolbar divider */
.nx-toolbar-divider { width: 1px; height: 26px; background: var(--nx-border); flex-shrink: 0; }

/* toolbar btn (icon button) */
.nx-toolbar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .38rem;
  font-family: inherit; font-size: .77rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: var(--nx-radius-sm);
  border: 1.5px solid var(--nx-border-md); background: var(--nx-card);
  color: var(--nx-text-dim); cursor: pointer; white-space: nowrap;
  box-shadow: var(--nx-shadow-sm); transition: all .18s;
}
.nx-toolbar-btn:hover { background: var(--nx-bg); color: var(--nx-text); }
.nx-toolbar-btn-primary {
  background: linear-gradient(135deg, var(--nx-indigo), var(--nx-violet));
  color: white; border-color: transparent;
  box-shadow: 0 4px 14px rgba(91,94,244,.28);
}
.nx-toolbar-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(91,94,244,.38); color: white; }


/* ─────────────────────────────────────────────────────────────
   10.  BULK ACTION BAR
───────────────────────────────────────────────────────────── */
.nx-bulk-bar {
  display: none;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1.25rem;
  background: var(--nx-indigo);
  border-bottom: 1px solid rgba(255,255,255,.1);
  animation: nx-slideDown .2s ease both;
}
.nx-bulk-bar.show { display: flex; }

@keyframes nx-slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nx-bulk-count {
  font-size: .75rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,.9);
}

.nx-bulk-btn {
  display: inline-flex; align-items: center; gap: .32rem;
  font-family: inherit; font-size: .72rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: white; cursor: pointer; transition: background .15s;
}
.nx-bulk-btn:hover { background: rgba(255,255,255,.26); }
.nx-bulk-btn-danger { border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.22); }
.nx-bulk-btn-danger:hover { background: rgba(244,63,94,.38); }
.nx-bulk-btn-close {
  margin-left: auto; border: none; background: none;
  color: rgba(255,255,255,.65); font-size: .9rem; cursor: pointer;
  transition: color .15s; padding: 0;
  display: flex; align-items: center;
}
.nx-bulk-btn-close:hover { color: white; }


/* ─────────────────────────────────────────────────────────────
   11.  FOOTER — INFO + PAGINATION
───────────────────────────────────────────────────────────── */
.nx-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--nx-border);
  background: var(--nx-card);
}

/* info text */
.nx-page-info {
  font-size: .72rem; color: var(--nx-text-muted);
  font-family: inherit;
}
.nx-page-info strong { color: var(--nx-text); font-weight: 700; }

/* per page select */
.nx-per-page-wrap { display: flex; align-items: center; gap: .45rem; font-size: .7rem; color: var(--nx-text-muted); }
.nx-per-page {
  font-family: inherit; font-size: .72rem; font-weight: 600; color: var(--nx-text-dim);
  background: var(--nx-bg); border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius-xs); padding: .3rem .55rem;
  outline: none; cursor: pointer; transition: border-color .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath fill='%238892a4' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .45rem center;
  padding-right: 1.5rem;
}
.nx-per-page:focus { border-color: var(--nx-indigo); }

/* pager */
.nx-pager {
  display: flex; align-items: center; gap: .3rem;
}

.nx-pager-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  border-radius: var(--nx-radius-xs);
  border: 1.5px solid var(--nx-border); background: var(--nx-card);
  color: var(--nx-text-dim); cursor: pointer;
  transition: all .15s;
  box-shadow: var(--nx-shadow-sm);
}
.nx-pager-btn:hover {
  border-color: var(--nx-indigo);
  color: var(--nx-indigo);
  background: var(--nx-indigo-soft);
}
.nx-pager-btn.active {
  background: var(--nx-indigo);
  color: white; border-color: var(--nx-indigo);
  box-shadow: 0 2px 8px rgba(91,94,244,.3);
}
.nx-pager-btn:disabled {
  opacity: .38; cursor: not-allowed; pointer-events: none;
}
.nx-pager-btn-ellipsis {
  border: none; background: none; box-shadow: none;
  width: auto; padding: 0 .25rem; cursor: default;
  font-size: .9rem; color: var(--nx-text-muted);
}
.nx-pager-btn-ellipsis:hover { background: none; color: var(--nx-text-muted); }

/* larger pager */
.nx-pager-lg .nx-pager-btn {
  width: 38px; height: 38px; font-size: .82rem;
  border-radius: var(--nx-radius-sm);
}


/* ─────────────────────────────────────────────────────────────
   12.  LOADING OVERLAY
───────────────────────────────────────────────────────────── */
.nx-table-loading-wrap { position: relative; }

.nx-table-loading {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; border-radius: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.nx-table-loading.show { opacity: 1; pointer-events: auto; }

.nx-table-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--nx-indigo-soft);
  border-top-color: var(--nx-indigo);
  border-radius: 50%;
  animation: nx-spin .65s linear infinite;
}

@keyframes nx-spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────────────────────
   13.  EMPTY STATE ROW
───────────────────────────────────────────────────────────── */
.nx-table-empty td {
  text-align: center;
  padding: 3.5rem 1rem !important;
  border-bottom: none !important;
  background: transparent !important;
}
.nx-empty-icon-wrap {
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--nx-bg); border: 2px dashed var(--nx-border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--nx-text-muted);
  margin: 0 auto .85rem;
}
.nx-empty-title { font-size: .88rem; font-weight: 700; color: var(--nx-text); margin-bottom: .3rem; }
.nx-empty-sub   { font-size: .75rem; color: var(--nx-text-muted); }


/* ─────────────────────────────────────────────────────────────
   14.  MISC CELL COMPONENTS
        (avatar cell, product cell, status badge inside table)
───────────────────────────────────────────────────────────── */

/* product/user cell */
.nx-cell-media {
  display: flex; align-items: center; gap: .75rem; min-width: 0;
}
.nx-cell-thumb {
  width: 40px; height: 40px; border-radius: var(--nx-radius-xs);
  background: var(--nx-bg); border: 1px solid var(--nx-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; overflow: hidden;
  transition: transform .2s;
}
.nx-table-hover tbody tr:hover .nx-cell-thumb { transform: scale(1.06); }
.nx-cell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-cell-title { font-weight: 700; color: var(--nx-text); font-size: .8rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-cell-sub   { font-size: .65rem; font-family: 'JetBrains Mono', monospace; color: var(--nx-text-muted); margin-top: .08rem; }

/* mini progress in cell */
.nx-cell-progress {
  min-width: 80px;
}
.nx-cell-progress-bar {
  height: 4px; background: var(--nx-border); border-radius: 2px; overflow: hidden; margin-top: .3rem;
}
.nx-cell-progress-fill { height: 100%; border-radius: 2px; }
.nx-cell-progress-fill.primary { background: linear-gradient(90deg, var(--nx-indigo), var(--nx-violet)); }
.nx-cell-progress-fill.success { background: var(--nx-emerald); }
.nx-cell-progress-fill.warning { background: var(--nx-amber); }
.nx-cell-progress-fill.danger  { background: var(--nx-rose); }

/* SELECT2 */