/**
 * Nexum WHMCS Theme — Master Design System Tokens & Global Base
 * Strict 2-3 Color Architecture: Primary Blue (#2563EB), Neutral (Slate/White/Gray), Danger Red (#DC2626)
 */

:root {
    /* 1. Primary Brand Accent */
    --nx-primary: #2563eb;
    --nx-primary-hover: #1d4ed8;
    --nx-primary-active: #1e40af;
    --nx-primary-surface: rgba(37, 99, 235, 0.08);
    --nx-primary-rgb: 37, 99, 235;

    /* 2. Neutrals & Surfaces */
    --nx-body-bg: #f8fafc;
    --nx-card-bg: #ffffff;
    --nx-card-bg-subtle: #f1f5f9;
    --nx-border: #e2e8f0;
    --nx-card-border: #e2e8f0;
    --nx-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --nx-card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.06);
    --nx-popover-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);

    /* 3. Text & Typography */
    --nx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --nx-font-size-base: 13.5px;
    --nx-font-size-sm: 12.5px;
    --nx-font-size-xs: 11.5px;
    --nx-font-size-h1: 24px;
    --nx-font-size-h2: 20px;
    --nx-font-size-h3: 16px;
    --nx-font-size-h4: 14px;
    --nx-line-height-base: 1.5;

    --nx-text: #0f172a;
    --nx-primary-text: #0f172a;
    --nx-secondary-text: #64748b;
    --nx-tertiary-text: #94a3b8;
    --nx-link: #2563eb;
    --nx-link-hover: #1d4ed8;

    /* 4. Status Accent (Restrained Red for Errors / Unpaid / Destructive) */
    --nx-danger: #dc2626;
    --nx-danger-surface: rgba(220, 38, 38, 0.08);
    --nx-success: #16a34a;
    --nx-success-surface: rgba(22, 163, 74, 0.08);
    --nx-warning: #d97706;
    --nx-warning-surface: rgba(217, 119, 6, 0.08);

    /* 5. Geometry & Radii */
    --nx-border-radius-xs: 4px;
    --nx-border-radius-sm: 6px;
    --nx-border-radius: 8px;
    --nx-border-radius-lg: 12px;
    --nx-border-radius-xl: 16px;
    --nx-border-radius-pill: 9999px;
    --nx-radius-button: 8px;
    --nx-radius-card: 12px;
    --nx-radius-md: 10px;
    --nx-radius-sm: 6px;

    /* 6. Layout Dimensions */
    --nx-container-width: 1240px;
    --nx-header-height: 68px;
    --nx-sidebar-width: 256px;
    --nx-content-padding: 28px 20px;

    /* 7. Form Controls */
    --nx-input-bg: #ffffff;
    --nx-input-border: #cbd5e1;
    --nx-input-border-focus: #2563eb;
    --nx-input-text: #0f172a;
    --nx-input-placeholder: #94a3b8;
    --nx-input-height: 42px;

    /* Transitions */
    --nx-transition-fast: 120ms ease;
    --nx-transition-base: 200ms ease;
}

/* Dark Mode Surfaces */
html.nx-dark {
    --nx-body-bg: #0b0f17;
    --nx-card-bg: #131926;
    --nx-card-bg-subtle: #1a2233;
    --nx-border: #1e293b;
    --nx-card-border: #1e293b;
    --nx-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --nx-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --nx-popover-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);

    --nx-text: #f1f5f9;
    --nx-primary-text: #f1f5f9;
    --nx-secondary-text: #94a3b8;
    --nx-tertiary-text: #64748b;
    --nx-link: #60a5fa;
    --nx-link-hover: #93c5fd;

    --nx-input-bg: #131926;
    --nx-input-border: #334155;
    --nx-input-border-focus: #60a5fa;
    --nx-input-text: #f1f5f9;
    --nx-input-placeholder: #64748b;
}

/* Global Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body.nx-theme {
    margin: 0;
    padding: 0;
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size-base);
    line-height: var(--nx-line-height-base);
    color: var(--nx-text);
    background-color: var(--nx-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.nx-theme h1,
body.nx-theme .h1 {
    font-size: var(--nx-font-size-h1);
    font-weight: 700;
    color: var(--nx-text);
}

body.nx-theme h2,
body.nx-theme .h2 {
    font-size: var(--nx-font-size-h2);
    font-weight: 700;
    color: var(--nx-text);
}

body.nx-theme h3,
body.nx-theme .h3 {
    font-size: var(--nx-font-size-h3);
    font-weight: 700;
    color: var(--nx-text);
    text-align: left;
}

body.nx-theme h4,
body.nx-theme .h4 {
    font-size: var(--nx-font-size-h4);
    font-weight: 700;
    color: var(--nx-text);
}

body.nx-theme a {
    color: var(--nx-link);
    text-decoration: none;
}

body.nx-theme a:hover {
    color: var(--nx-primary-hover);
    text-decoration: none;
}

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

.nx-main-container,
#main-body {
    width: 100%;
    max-width: var(--nx-container-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--nx-content-padding);
    flex: 1 0 auto;
}

/* Print Stylesheet for Invoices & Receipts */
@media print {

    .nx-topbar,
    .nx-footer,
    .nx-mobile-drawer,
    .nx-mobile-backdrop,
    .nx-payment-box,
    .nx-btn,
    button,
    .nx-action-btn,
    .d-print-none {
        display: none !important;
    }

    body.nx-theme {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .nx-main-container,
    #main-body,
    .nx-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
}