/* =====================================================
           SALES & INVENTORY PAGE
        ===================================================== */

        html {
            scroll-behavior: smooth;
        }

        .sales-inventory-page {
            margin: 0;
            padding: 0;
            background: #f8fafc;
            color: #1e293b;
            font-family: Arial, sans-serif;
        }

        section[id],
        .si-section,
        .si-sales-section,
        .si-module-section,
        .si-cta {
            scroll-margin-top: 90px;
        }


        /* =====================================================
           HEADER
        ===================================================== */

        .si-header {
            width: 100%;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            position: fixed;
			 z-index: 1000;
			  top: 0;
					}

        .si-header-inner {
            max-width: 1250px;
            min-height: 76px;

            margin: auto;
            padding: 0 25px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 25px;
        }

        .si-logo {
            text-decoration: none;

            font-size: 25px;
            font-weight: 800;

            color: #172033;
            white-space: nowrap;
        }

        .si-logo i {
            margin-right: 7px;
            color: #2563eb;
            font-size: 0.82em;
        }

        .si-logo span {
            color: #2563eb;
        }

        .si-nav {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .si-nav-link {
            padding: 10px 15px;

            color: #64748b;

            text-decoration: none;

            font-size: 14px;
            font-weight: 600;

            border-radius: 6px;

            transition: 0.2s ease;
        }

        .si-nav-link i,
        .si-header-btn i,
        .si-primary-btn i,
        .si-secondary-btn i,
        .si-cta-button i,
        .ecommerce-submit-btn i {
            margin-right: 7px;
        }

        .si-nav-link:hover {
            background: #eff6ff;
            color: #2563eb;
        }

        .si-header-btn {
            padding: 11px 20px;

            background: #2563eb;
            color: #ffffff;

            border-radius: 6px;

            text-decoration: none;

            font-size: 13px;
            font-weight: 700;

            white-space: nowrap;
        }

        .si-header-btn:hover {
            background: #1d4ed8;
            color: #ffffff;
        }


        /* =====================================================
           HERO
        ===================================================== */

        .si-hero {
            padding: 85px 6% 90px;

            background: #eff6ff;
        }

        .si-hero-inner {
            max-width: 1200px;

            margin: auto;

            display: grid;

            grid-template-columns: 1fr 1fr;

            align-items: center;

            gap: 70px;
        }

        .si-badge {
            display: inline-block;

            padding: 7px 14px;

            margin-bottom: 18px;

            background: #dbeafe;

            color: #1d4ed8;

            border-radius: 30px;

            font-size: 12px;
            font-weight: 700;
        }

        .si-badge i {
            margin-right: 6px;
        }

        .si-hero h1 {
            margin: 0 0 20px;

            font-size: 51px;

            line-height: 1.1;

            color: #172033;
        }

        .si-hero h1 span {
            color: #2563eb;
        }

        .si-hero-text {
            max-width: 560px;

            margin: 0 0 30px;

            color: #64748b;

            font-size: 17px;

            line-height: 1.7;
        }

        .si-buttons {
            display: flex;

            gap: 12px;

            flex-wrap: wrap;
        }

        .si-primary-btn {
            display: inline-block;

            padding: 13px 24px;

            background: #2563eb;
            color: #ffffff;

            border-radius: 6px;

            text-decoration: none;

            font-size: 14px;
            font-weight: 700;
        }

        .si-primary-btn:hover {
            background: #1d4ed8;
            color: #ffffff;
        }

        .si-secondary-btn {
            display: inline-block;

            padding: 13px 24px;

            background: #ffffff;
            color: #2563eb;

            border: 1px solid #bfdbfe;

            border-radius: 6px;

            text-decoration: none;

            font-size: 14px;
            font-weight: 700;
        }

        .si-secondary-btn:hover {
            background: #f8fbff;
            color: #1d4ed8;
        }


        /* =====================================================
           DASHBOARD PREVIEW
        ===================================================== */

        .si-dashboard {
            background: #ffffff;

            border: 1px solid #dbe3ee;

            border-radius: 13px;

            overflow: hidden;

            box-shadow: 0 20px 50px rgba(30, 60, 100, 0.10);
        }

        .si-dashboard-top {
            padding: 15px 18px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            border-bottom: 1px solid #e8edf4;
        }

        .si-dashboard-brand {
            font-size: 16px;

            font-weight: 800;

            color: #172033;
        }

        .si-dashboard-brand span {
            color: #2563eb;
        }

        .si-dashboard-top-icon {
            color: #64748b;
        }

        .si-dashboard-content {
            padding: 20px;
        }


        /* Stats */

        .si-stats {
            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 12px;

            margin-bottom: 20px;
        }

        .si-stat {
            padding: 15px;

            border: 1px solid #e5eaf1;

            border-radius: 8px;

            background: #ffffff;
        }

        .si-stat-label {
            display: block;

            margin-bottom: 6px;

            color: #94a3b8;

            font-size: 10px;
        }

        .si-stat-label i {
            margin-right: 4px;
            color: #64748b;
        }

        .si-stat-value {
            font-size: 20px;

            font-weight: 800;

            color: #1e293b;
        }

        .si-stat-blue {
            color: #2563eb;
        }

        .si-stat-green {
            color: #16a34a;
        }


        /* Stock */

        .si-stock-title {
            display: flex;

            justify-content: space-between;

            margin-bottom: 10px;
        }

        .si-stock-title strong {
            font-size: 13px;

            color: #334155;
        }

        .si-stock-title strong i {
            margin-right: 5px;
            color: #2563eb;
        }

        .si-stock-title span {
            font-size: 10px;

            color: #94a3b8;
        }

        .si-stock-row {
            display: flex;

            align-items: center;

            gap: 10px;

            padding: 11px 0;

            border-bottom: 1px solid #eef2f7;
        }

        .si-stock-row:last-child {
            border-bottom: none;
        }

        .si-stock-icon {
            width: 33px;
            height: 33px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: #eff6ff;

            color: #2563eb;

            border-radius: 6px;
        }

        .si-stock-info {
            flex: 1;
        }

        .si-stock-info strong {
            display: block;

            font-size: 11px;

            color: #334155;
        }

        .si-stock-info span {
            font-size: 9px;

            color: #94a3b8;
        }

        .si-stock-status {
            padding: 4px 7px;

            border-radius: 15px;

            font-size: 9px;

            font-weight: 700;
        }

        .si-stock-good {
            background: #dcfce7;

            color: #15803d;
        }

        .si-stock-low {
            background: #fef3c7;

            color: #a16207;
        }


        /* =====================================================
           FEATURES
        ===================================================== */

        .si-section {
            padding: 80px 6%;
        }

        .si-section-heading {
            max-width: 700px;

            margin: 0 auto 45px;

            text-align: center;
        }

        .si-section-heading h2 {
            margin: 0 0 13px;

            font-size: 36px;

            color: #172033;
        }

        .si-section-heading h2 i,
        .si-sales-inner h2 i,
        .si-cta-box h2 i {
            margin-right: 9px;
            color: #2563eb;
            font-size: 0.78em;
        }

        .si-section-heading p {
            margin: 0;

            color: #64748b;

            font-size: 15px;

            line-height: 1.7;
        }

        .si-feature-grid {
            max-width: 1200px;

            margin: auto;

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;
        }

        .si-feature {
            padding: 27px;

            background: #ffffff;

            border: 1px solid #e2e8f0;

            border-radius: 10px;

            transition: 0.2s ease;
        }

        .si-feature:hover {
            transform: translateY(-4px);

            border-color: #bfdbfe;

            box-shadow: 0 12px 30px rgba(30, 70, 120, 0.08);
        }

        .si-feature-icon {
            width: 50px;
            height: 50px;

            display: flex;

            align-items: center;
            justify-content: center;

            margin-bottom: 17px;

            background: #eff6ff;

            color: #2563eb;

            border-radius: 9px;

            font-size: 20px;
        }

        .si-feature h3 {
            margin: 0 0 9px;

            font-size: 18px;

            color: #1e293b;
        }

        .si-feature p {
            margin: 0;

            color: #64748b;

            font-size: 13px;

            line-height: 1.6;
        }


        /* =====================================================
           SALES SECTION
        ===================================================== */

        .si-sales-section {
            padding: 80px 6%;

            background: #f8fafc;
        }

        .si-sales-inner {
            max-width: 1200px;

            margin: auto;

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 65px;

            align-items: center;
        }

        .si-sales-inner h2 {
            margin: 0 0 18px;

            font-size: 36px;

            color: #172033;
        }

        .si-sales-text {
            margin: 0 0 23px;

            color: #64748b;

            font-size: 15px;

            line-height: 1.7;
        }

        .si-check-list {
            list-style: none;

            padding: 0;

            margin: 0;
        }

        .si-check-list li {
            display: flex;

            gap: 11px;

            margin-bottom: 13px;

            color: #475569;

            font-size: 14px;
        }

        .si-check-list i {
            color: #2563eb;

            margin-top: 3px;
        }


        /* =====================================================
           SALES REPORT
        ===================================================== */

        .si-sales-report {
            background: #ffffff;

            border: 1px solid #e2e8f0;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 15px 35px rgba(30, 60, 100, 0.07);
        }

        .si-report-header {
            padding: 18px 20px;

            display: flex;

            justify-content: space-between;

            border-bottom: 1px solid #e8edf4;
        }

        .si-report-header strong {
            font-size: 15px;

            color: #334155;
        }

        .si-report-header strong i {
            margin-right: 6px;
            color: #2563eb;
        }

        .si-report-header span {
            font-size: 11px;

            color: #94a3b8;
        }

        .si-report-body {
            padding: 20px;
        }

        .si-report-total {
            margin-bottom: 20px;
        }

        .si-report-total span {
            display: block;

            margin-bottom: 5px;

            color: #94a3b8;

            font-size: 11px;
        }

        .si-report-total strong {
            font-size: 28px;

            color: #172033;
        }

        .si-report-total small {
            color: #16a34a;

            font-size: 11px;

            margin-left: 7px;
        }

        .si-bars {
            height: 150px;

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            gap: 10px;
        }

        .si-bar-item {
            flex: 1;

            height: 100%;

            display: flex;

            align-items: flex-end;

            justify-content: center;
        }

        .si-bar {
            width: 65%;

            background: #3b82f6;

            border-radius: 4px 4px 0 0;

            min-height: 20px;
        }

        .si-bar-label {
            display: none;
        }


        /* =====================================================
           MODULES
        ===================================================== */

        .si-module-section {
            padding: 80px 6%;
        }

        .si-modules {
            max-width: 1200px;

            margin: auto;

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 16px;
        }

        .si-module {
            padding: 23px;

            background: #ffffff;

            border: 1px solid #e2e8f0;

            border-radius: 9px;
        }

        .si-module i {
            display: block;

            margin-bottom: 14px;

            color: #2563eb;

            font-size: 22px;
        }

        .si-module h3 {
            margin: 0 0 8px;

            font-size: 16px;

            color: #334155;
        }

        .si-module p {
            margin: 0;

            color: #64748b;

            font-size: 12px;

            line-height: 1.6;
        }


        /* =====================================================
           CTA
        ===================================================== */

        .si-cta {
            padding: 70px 6%;
        }

        .si-cta-box {
            max-width: 1200px;

            margin: auto;

            padding: 55px;

            background: #172033;

            border-radius: 14px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 30px;
        }

        .si-cta-box h2 {
            margin: 0 0 10px;

            color: #ffffff;

            font-size: 32px;
        }

        .si-cta-box p {
            margin: 0;

            color: #b8c2d1;

            font-size: 14px;

            line-height: 1.6;
        }

        .si-cta-button {
            flex-shrink: 0;

            padding: 13px 25px;

            background: #2563eb;

            color: #ffffff;

            border-radius: 6px;

            text-decoration: none;

            font-size: 14px;

            font-weight: 700;
        }

        .si-cta-button:hover {
            background: #3b82f6;

            color: #ffffff;
        }


        /* =====================================================
           FOOTER
        ===================================================== */

        .si-footer {
            background: #0f172a;
            color: #e2e8f0;
        }

        .si-footer-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 50px 4% 25px;
            display: grid;
            grid-template-columns: 1.2fr 0.8fr 0.8fr;
            gap: 115px;
            align-items: start;
        }

        .si-footer-brand {
            max-width: 420px;
        }

        .si-footer-brand .si-logo {
            display: inline-block;
            margin-bottom: 18px;
            color: #ffffff;
            font-size: 31px;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .si-footer-brand .si-logo span {
            color: #3b82f6;
        }

        .si-footer-brand p {
            margin: 0;
            color: #dfeafc;
            font-size: 15px;
            line-height: 1.7;
        }

        .si-footer-column {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
        }

        .si-footer-column h4 {
            margin: 0 0 10px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
        }

        .si-footer-column h4 i {
            margin-right: 6px;
            color: #60a5fa;
        }

        .si-footer-column a {
            color: #dfeafc;
            text-decoration: none;
            font-size: 15px;
            transition: 0.2s ease;
        }

        .si-footer-column a:hover {
            color: #ffffff;
        }

        .si-footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding: 22px 4% 35px;
            border-top: 1px solid rgba(148, 163, 184, 0.28);
            color: #dfeafc;
            font-size: 12px;
            text-align: center;
        }


        /* =====================================================
           REQUEST CALL MODAL
        ===================================================== */

        body.modal-open {
            overflow: hidden;
        }

        .ecommerce-call-modal {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: grid;
            place-items: center;
            padding: 20px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        .ecommerce-call-modal.is-open {
            visibility: visible;
            opacity: 1;
        }

        .ecommerce-call-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.62);
        }

        .ecommerce-call-modal-box {
            position: relative;
            width: min(100%, 440px);
            max-height: 90vh;
            overflow-y: auto;
            padding: 32px;
            background: #ffffff;
            border: 1px solid #dbe3ee;
            border-radius: 12px;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
            transform: translateY(12px);
            transition: transform 0.2s ease;
        }

        .ecommerce-call-modal.is-open .ecommerce-call-modal-box {
            transform: translateY(0);
        }

        .ecommerce-call-close {
            position: absolute;
            top: 14px;
            right: 16px;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: #f1f5f9;
            color: #475569;
            cursor: pointer;
            font-size: 25px;
            line-height: 1;
        }

        .ecommerce-call-close:hover {
            background: #e2e8f0;
            color: #172033;
        }

        .ecommerce-call-modal-head {
            padding-right: 40px;
        }

        .ecommerce-call-tag {
            color: #2563eb;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .ecommerce-call-tag i,
        .ecommerce-form-field label i {
            margin-right: 5px;
            color: #2563eb;
        }

        .ecommerce-form-field label i {
            width: 14px;
            text-align: center;
        }

        .ecommerce-call-modal-head h3 {
            margin: 8px 0 0;
            color: #172033;
            font-size: 30px;
        }

        .ecommerce-call-text {
            margin: 12px 0 24px;
            color: #64748b;
            font-size: 14px;
            line-height: 1.6;
        }

        .ecommerce-call-form {
            display: grid;
            gap: 16px;
        }

        .ecommerce-form-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .ecommerce-form-field {
            display: grid;
            gap: 7px;
        }

        .ecommerce-form-field label {
            color: #334155;
            font-size: 13px;
            font-weight: 700;
        }

        .ecommerce-form-field input,
        .ecommerce-form-field textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 13px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            color: #1e293b;
            font: inherit;
            outline: 0;
            resize: vertical;
        }

        .ecommerce-form-field input:focus,
        .ecommerce-form-field textarea:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
        }

        .ecommerce-submit-btn {
            padding: 13px 20px;
            border: 0;
            border-radius: 6px;
            background: #2563eb;
            color: #ffffff;
            cursor: pointer;
            font-size: 14px;
            font-weight: 700;
        }

        .ecommerce-submit-btn:hover {
            background: #1d4ed8;
        }


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

        @media (max-width: 1000px) {

            .si-hero-inner {
                grid-template-columns: 1fr;
            }

            .si-sales-inner {
                grid-template-columns: 1fr;
            }

            .si-feature-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .si-modules {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 800px) {

            .si-header-inner {
                flex-wrap: wrap;

                padding: 15px 20px;
            }

            .si-nav {
                width: 100%;

                order: 3;

                justify-content: center;

                flex-wrap: wrap;
            }

            .si-header-btn {
                margin-left: auto;
            }

            .si-hero {
                padding: 55px 20px;
            }

            .si-hero h1 {
                font-size: 40px;
            }

            .si-section,
            .si-sales-section,
            .si-module-section {
                padding: 55px 20px;
            }

            .si-cta {
                padding: 45px 20px;
            }

            .si-cta-box {
                flex-direction: column;

                align-items: flex-start;

                padding: 38px 25px;
            }
        }

        @media (max-width: 600px) {

            .ecommerce-call-modal-box {
                padding: 26px 20px;
            }

            .ecommerce-form-row {
                grid-template-columns: 1fr;
            }

            .si-feature-grid {
                grid-template-columns: 1fr;
            }

            .si-modules {
                grid-template-columns: 1fr;
            }

            .si-stats {
                grid-template-columns: 1fr 1fr;
            }

            .si-section-heading h2 {
                font-size: 29px;
            }

            .si-sales-inner h2 {
                font-size: 30px;
            }
        }