/*========================================
  PIXEL CRAFTERS BRAND COLORS
========================================*/

:root{

    --pc-primary: #f06324;
    --pc-primary-hover: #d9531e;

    --pc-success: #22c55e;
    --pc-danger: #ef4444;
    --pc-warning: #f59e0b;
    --pc-info: #0ea5e9;

    --pc-dark: #1f2937;
    --pc-text: #4b5563;

    --pc-border: #e5e7eb;

    --pc-bg: #f8fafc;

    --pc-white: #ffffff;

}
/*==================================================
  CUSTOMERS PAGE
==================================================*/
    .customers-page{
        padding:30px;
    }
    .customers-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:20px;
        margin-bottom:30px;
    }
    .page-title{
        margin:0 0 5px;
        font-size:30px;
        font-weight:700;
        color:#1f2937;
        line-height:1.2;
    }
    .page-subtitle{
        margin:0;
        color:#6b7280;
        font-size:15px;
        line-height:1.6;
    }
    .add-customer-btn{
        display:inline-flex;
        align-items:center;
        gap:8px;
        white-space:nowrap;
        background:#f06324;
        border:1px solid #f06324;
        color:#fff;
        border-radius:10px;
        padding:11px 22px;
        font-size:14px;
        font-weight:600;
        transition:all .3s ease;
        box-shadow:0 8px 18px rgba(240,99,36,.18);
    }
    .add-customer-btn:hover{
        background:#d9531e;
        border-color:#d9531e;
        color:#fff;
        transform:translateY(-2px);
        box-shadow:0 12px 24px rgba(240,99,36,.25);
    }
    .add-customer-btn:focus{
        box-shadow:0 0 0 .2rem rgba(240,99,36,.25);
    }
    .customers-card{
        background:#fff;
        border:none;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
         padding: 30px;
    }
    .customers-table{
        margin-bottom:0;
    }
    .customers-table thead th{
        background:#f8fafc;
        color:#64748b;
        font-size:12px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.8px;
        border-bottom:1px solid #e5e7eb;
        padding:18px;
        white-space:nowrap;

    }
    .customers-table tbody td{
        padding:18px;
        vertical-align:middle;
        color:#334155;
        font-size:14px;
        border-bottom:1px solid #f1f5f9;
    }
    .customers-table tbody tr{
        transition:all .25s ease;
    }

    .customers-table tbody tr:hover{
        background:#fff8f4;
    }
    .action-btn{
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        border:1px solid #e5e7eb;
        background:#fff;
        color:#64748b;
        transition:all .3s ease;
    }
    .action-btn:hover{
        background:#f06324;
        border-color:#f06324;
        color:#fff;
    }
    .dropdown-menu{
        border:none;
        border-radius:12px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
        padding:8px;

    }

    .dropdown-item{
        border-radius:8px;
        padding:10px 14px;
        font-size:14px;
        transition:.2s;

    }

    .dropdown-item i{
        margin-right:8px;

    }
    .dropdown-item:hover{
        background:#fff8f4;
        color:#f06324;
    }

    @media (max-width:768px){
        .customers-page{
            padding:20px;
        }
        .customers-header{
            flex-direction:column;
            align-items:flex-start;
        }
        .page-title{
            font-size:26px;
        }
        .add-customer-btn{
            width:100%;
            justify-content:center;
        }

    }


    /*==================================================
    ADD CUSTOMER PAGE
    ==================================================*/
    .customer-form-page{
        padding:30px;
    }
    .customer-form-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:30px;
    }
    .customer-header-actions{
        display:flex;
        gap:12px;
    }
    .customer-card{
        border:none;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
        margin-bottom:30px;
    }
    .customer-card .card-header{
        background:#fff;
        border-bottom:1px solid #edf2f7;
        padding:20px 25px;
    }
    .customer-card .card-header h5{
        margin:0;
        font-size:18px;
        font-weight:700;
        color:#1f2937;
    }
    .customer-card .card-header i{
        color:#f06324;
        margin-right:8px;
    }
    .customer-card .card-body{
        padding:30px;
    }
    .form-label{
        font-weight:600;
        margin-bottom:8px;
        color:#374151;
    }
    .form-control,
    .form-select{
        border-radius:10px;
        padding:12px 15px;
        border:1px solid #dbe3ec;
    }
    .form-control:focus,
    .form-select:focus{
        border-color:#f06324;
        box-shadow:0 0 0 .2rem rgba(240,99,36,.15);
    }
    .cancel-btn{
        border-radius:10px;
        padding:10px 20px;
    }
    @media(max-width:768px){
        .customer-form-page{
            padding:20px;
        }
        .customer-form-header{
            flex-direction:column;
            align-items:flex-start;
            gap:15px;

        }

    }
    .communication-options{
        display:flex;
        flex-wrap:wrap;
        gap:20px;
        margin-top:10px;

    }
    .communication-options .form-check{

        margin-bottom:0;

    }
    .customer-card + .customer-card{
        margin-top:30px;
    }
    .customer-form-actions{
        display:flex;
        justify-content:flex-end;
        gap:15px;
        margin-top:35px;
        margin-bottom:40px;
    }
    .save-customer-btn{
        background:#f06324;
        color:#fff;
        border:1px solid #f06324;
        border-radius:10px;
        padding:12px 28px;
        font-weight:600;
        transition:.3s;
    }
    .save-customer-btn:hover{
        background:#d9531e;
        border-color:#d9531e;
        color:#fff;
    }

    .cancel-btn{
        border-radius:10px;
        padding:12px 24px;
    }

    textarea.form-control{
        resize:vertical;
        min-height:130px;
    }

    @media(max-width:768px){
        .customer-form-actions{
            flex-direction:column-reverse;
        }
        .customer-form-actions .btn{
            width:100%;
        }
    }


    /*==================================================
    LEADS PAGE
    ==================================================*/
    .leads-page{
        padding:30px;
    }
    .leads-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:30px;
    }
    .add-lead-btn{
        background:#f06324;
        border:1px solid #f06324;
        color:#fff;
        border-radius:10px;
        padding:11px 22px;
        font-weight:600;
        transition:.3s;
    }
    .add-lead-btn:hover{
        background:#d9531e;
        border-color:#d9531e;
        color:#fff;
    }

    .lead-stat-card{
        background:#fff;
        border-radius:16px;
        padding:22px;
        display:flex;
        align-items:center;
        gap:18px;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
        margin-bottom:25px;
    }

    .lead-stat-icon{
        width:58px;
        height:58px;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:24px;
    }
    .lead-stat-info h6{
        margin:0;
        color:#6b7280;
        font-size:14px;
    }
    .lead-stat-info h3{
        margin-top:5px;
        font-size:28px;
        font-weight:700;
    }
    .leads-toolbar{
        margin-top:10px;
        border:none;
        border-radius:16px;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
    }
    .leads-card{
        border:none;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
    }
    .leads-table{
        margin-bottom:0;
    }
    .leads-table thead th{
        background:#f8fafc;
        color:#64748b;
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.7px;
        padding:16px;
    }
    .leads-table tbody td{
        padding:18px 16px;
        vertical-align:middle;
    }
    .leads-table tbody tr{
        transition:.25s;
    }
    .leads-table tbody tr:hover{
        background:#fff8f4;
    }
    .lead-id{
        background:#f1f5f9;
        padding:6px 12px;
        border-radius:30px;
        font-size:12px;
        font-weight:600;
    }
    .status-new{
        background:#dbeafe;
        color:#2563eb;
    }
    .status-contacted{
        background:#fef3c7;
        color:#b45309;
    }
    .status-quotation{
        background:#ede9fe;
        color:#6d28d9;
    }
    .source-website{
        background:#e0f2fe;
        color:#0369a1;
    }
    .source-whatsapp{
        background:#dcfce7;
        color:#15803d;
    }
    .source-referral{
        background:#f3e8ff;
        color:#7e22ce;
    }
    .table-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-top:25px;
    }
    .table-results{
        color:#64748b;
        font-size:14px;
    }
    .pagination{
        gap:8px;
    }
    .pagination .page-link{
        border:none;
        border-radius:10px;
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#64748b;
        box-shadow:0 4px 10px rgba(0,0,0,.04);
    }
    .pagination .page-item.active .page-link{
        background:#f06324;
        color:#fff;
    }
    .pagination .page-link:hover{
        background:#f06324;
        color:#fff;
    }
    /*==================================================
    COMPANIES PAGE
    ==================================================*/
    .companies-page{
        padding:30px;
    }
    .companies-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:30px;
    }
    .add-company-btn{
        background:#f06324;
        border:1px solid #f06324;
        color:#fff;
        border-radius:10px;
        padding:11px 22px;
        font-weight:600;
        transition:.3s;
    }
    .add-company-btn:hover{
        background:#d9531e;
        border-color:#d9531e;
        color:#fff;
    }
    .company-stat-card{
        background:#fff;
        border-radius:16px;
        padding:22px;
        display:flex;
        align-items:center;
        gap:18px;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
        margin-bottom:25px;
    }
    .company-stat-icon{
        width:60px;
        height:60px;
        border-radius:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:24px;
    }
    .company-orange{
        background:#fff3eb;
        color:#f06324;
    }
    .company-blue{
        background:#e8f2ff;
        color:#2563eb;
    }
    .company-green{
        background:#eafaf1;
        color:#16a34a;
    }
    .company-purple{
        background:#f3e8ff;
        color:#9333ea;
    }
    .company-stat-info h6{
        margin:0;
        color:#6b7280;
        font-size:14px;
    }
    .company-stat-info h3{
        margin-top:6px;
        font-size:28px;
        font-weight:700;

    }
    .companies-toolbar{
        margin-top:8px;
        border:none;
        border-radius:16px;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
    }
    .companies-card{
        border:none;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
    }
    .companies-table{
        margin-bottom:0;
    }
    .companies-table thead th{
        background:#f8fafc;
        color:#64748b;
        text-transform:uppercase;
        font-size:12px;
        letter-spacing:.6px;
        padding:16px;
    }
    .companies-table tbody td{
        padding:18px 16px;
        vertical-align:middle;
    }
    .companies-table tbody tr{
        transition:.25s;
    }
    .companies-table tbody tr:hover{
        background:#fff8f4;
    }
    .company-info{
        display:flex;
        align-items:center;
        gap:15px;
    }
    .company-logo{
        width:48px;
        height:48px;
        border-radius:12px;
        background:#fff3eb;
        color:#f06324;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:22px;
    }
    .company-info strong{
        display:block;
        font-size:15px;
    }
    .company-info small{
        color:#6b7280;
    }
    .company-id{
        background:#f1f5f9;
        padding:6px 12px;
        border-radius:30px;
        font-size:12px;
        font-weight:600;
    }

    .count-badge{
        background:#eef2ff;
        color:#4338ca;
        padding:6px 12px;
        border-radius:30px;
        font-size:12px;
        font-weight:600;
    }
    .count-badge.customers{
        background:#ecfdf5;
        color:#15803d;
    }
    @media(max-width:992px){
        .companies-header{
            flex-direction:column;
            align-items:flex-start;
            gap:15px;
        }
        .companies-toolbar .row{
            row-gap:15px;
        }
    }
    @media(max-width:768px){
        .companies-page{
            padding:20px;
        }
        .company-stat-card{
          margin-bottom:15px;
        }
        .table-footer{
            flex-direction:column;
            gap:20px;
            align-items:flex-start;
        }
    }

    /*==================================================
    LEAD FORM
    ==================================================*/
    .customer-card .card-header h5 i{
        color:#f06324;
    }
    textarea.form-control{
        resize:vertical;
        min-height:120px;
    }
    .form-select option{
        padding:10px;
    }
    .text-danger{
        font-weight:600;
    }
    input[type="date"]{
        cursor:pointer;
    }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button{
        -webkit-appearance:none;
        margin:0;
    }

    input[type="number"]{
        -moz-appearance:textfield;
    }
    .customer-card{
        transition:.3s;
    }
    .customer-card:hover{
        transform:translateY(-2px);
        box-shadow:0 15px 40px rgba(15,23,42,.08);
    }
    .save-customer-btn{
        min-width:180px;
    }
    .cancel-btn{
        min-width:150px;
    }
    @media(max-width:768px){
        .customer-card .card-body{
            padding:20px;
        }
        .customer-card .card-header{
            padding:18px 20px;
        }
    }

    /*==================================================
    QUOTATIONS PAGE
    ==================================================*/
    .quotations-page{
        padding:30px;
    }
    .quotations-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:30px;
    }
    .add-quotation-btn{
        background:#f06324;
        color:#fff;
        border:1px solid #f06324;
        border-radius:10px;
        padding:11px 24px;
        font-weight:600;
        transition:.3s;
    }
    .add-quotation-btn:hover{
        background:#d9531e;
        border-color:#d9531e;
        color:#fff;
    }

    .sales-stat-card{
        background:#fff;
        border-radius:16px;
        padding:22px;
        display:flex;
        gap:18px;
        align-items:center;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
        margin-bottom:25px;
    }
    .sales-stat-icon{
        width:60px;
        height:60px;
        border-radius:15px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:24px;
    }
    .sales-orange{
        background:#fff3eb;
        color:#f06324;
    }
    .sales-blue{
        background:#e8f2ff;
        color:#2563eb;
    }
    .sales-green{
        background:#ecfdf5;
        color:#16a34a;
    }
    .sales-red{
        background:#fee2e2;
        color:#dc2626;
    }
    .sales-stat-info h6{
        margin:0;
        font-size:14px;
        color:#64748b;
    }
    .sales-stat-info h3{
        margin-top:5px;
        font-size:28px;
        font-weight:700;
    }
    .quotations-card{
        border:none;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(15,23,42,.06);
    }
    .quotations-table{
        margin-bottom:0;
    }
    .quotations-table thead th{
        background:#f8fafc;
        color:#64748b;
        text-transform:uppercase;
        font-size:12px;
        letter-spacing:.6px;
        padding:16px;
    }
    .quotations-table tbody td{
        padding:18px 16px;
        vertical-align:middle;
    }
    .quotations-table tbody tr{
        transition:.3s;
    }
    .quotations-table tbody tr:hover{
        background:#fff8f4;
    }
    .quote-number{
        background:#fff3eb;
        color:#f06324;
        padding:6px 14px;
        border-radius:30px;
        font-weight:600;
        font-size:12px;
    }
    @media(max-width:992px){
        .quotations-header{
            flex-direction:column;
            align-items:flex-start;
            gap:15px;
        }
    }
    @media(max-width:768px){
        .quotations-page{
            padding:20px;
        }
        .sales-stat-card{
            margin-bottom:15px;
        }
        .table-footer{
            flex-direction:column;
            align-items:flex-start;
            gap:18px;
        }
    }

    /*==================================================
    QUOTATION ITEMS TABLE
    ==================================================*/
    /*==================================================
        QUOTATION ITEMS
    ==================================================*/

    .quotation-items-section{

        padding:0 50px 30px;

    }

    .quotation-items{

        width:100%;

        border-collapse:collapse;

        background:#ffffff;

    }

    .quotation-items thead th{

        color:#ffffff;

        padding:14px 16px;

        font-size:13px;

        font-weight:700;

        text-transform:uppercase;

        letter-spacing:.6px;

    }

    .quotation-items thead th:first-child{

        text-align:center;

    }

    .quotation-items thead th:nth-child(2){

        text-align:left;

    }

    .quotation-items thead th:nth-child(n+3){

        text-align:right;

    }

    .quotation-items tbody td{

        padding:16px;

        border-bottom:1px solid #ececec;

        font-size:14px;

        color:#374151;

        vertical-align:top;

    }

    .quotation-items tbody td:first-child{

        text-align:center;

        width:60px;

    }

    .quotation-items tbody td:nth-child(3),

    .quotation-items tbody td:nth-child(5){

        text-align:right;

        white-space:nowrap;

    }

    .quotation-items tbody td:nth-child(4){

        text-align:center;

    }

    .item-name{

        font-size:15px;

        font-weight:700;

        color:#111827;

        margin-bottom:4px;

    }

    .item-description{

        font-size:12px;

        color:#6b7280;

        line-height:1.5;

    }
    .add-item-btn{
        background:#f06324;
        border:1px solid #f06324;
        color:#fff;
        border-radius:8px;
        padding:8px 18px;
    }
    .add-item-btn:hover{
        background:#d9531e;
        border-color:#d9531e;
        color:#fff;
    }
    .quotation-summary{
        position:sticky;
        top:90px;
    }
    .summary-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:12px 0;
        border-bottom:1px solid #f1f5f9;
        font-size:15px;
    }
    .summary-row:last-child{
        border-bottom:none;
    }

    .total-row{
        font-size:18px;
        font-weight:700;
        color:#f06324;
    }
    .total-row strong{
        color:#f06324;
    }
    .quotation-summary hr{
        margin:18px 0;
    }

    /*==================================================
    QUOTATION
    ==================================================*/
    .quotation-preview-page{
        background:#eef2f7;
        padding:45px;
        min-height:100vh;
    }
    .quotation-preview-layout{
        display:flex;
        gap:30px;
        align-items:flex-start;
    }
    .quotation-sidebar{
        width:320px;
        min-width:320px;
        background:#fff;
        border-radius:18px;
        box-shadow:0 10px 35px rgba(0,0,0,.06);
        overflow:hidden;
        position:sticky;
        top:20px;
    }
    .sidebar-header{
        padding:25px;
        border-bottom:1px solid #ececec;
    }
    .sidebar-header h4{
        margin:0;
        font-size:22px;
        font-weight:700;
    }
    .sidebar-header .btn{
        margin-top:20px;
        background:#f06324;
        border:none;
        border-radius:10px;
        padding:12px;
        font-weight:600;
    }
    .sidebar-header .btn:hover{
        background:#dc5319;
    }
    .quotation-list{
        padding:20px;
    }
    .quotation-card{
        display:block;
        text-decoration:none;
        color:#333;
        background:#fff;
        border:1px solid #ececec;
        border-radius:14px;
        padding:18px;
        margin-bottom:18px;
        transition:.3s;
        position:relative;
    }
    .quotation-card:hover{
        transform:translateY(-3px);
        box-shadow:0 10px 20px rgba(0,0,0,.06);
    }
    .quotation-card.active{
        border:2px solid #f06324;
    }
    .quotation-card h6{
        margin-bottom:8px;
        color:#f06324;
        font-size:18px;
        font-weight:700;
    }
    .quotation-card p{
        margin-bottom:5px;
        font-weight:600;
    }
    .quote-customer{
        margin-bottom:10px;
        font-weight:600;
    }

    .quote-total{
        font-size:18px;
        font-weight:700;
        color:#111827;
        margin-bottom:12px;
    }

    .quote-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .quote-footer small{
        color:#6b7280;
    }
    .quotation-card small{
        color:#888;
    }
    .status{
        position:absolute;
        right:15px;
        bottom:15px;
        padding:5px 12px;
        border-radius:30px;
        color:#fff;
        font-size:12px;
        font-weight:600;
    }
    .status.draft{
        background:#f6b74b;
        color:#000;
    }
    .status.accepted{
        background:#22c55e;
    }
    .status.expired{
        background:#ef4444;
    }
    .status.sent{
        background:#2563eb;
    }

    .quotation-content{
        flex:1;
    }
    .quotation-toolbar{
        background:#fff;
        border-radius:16px;
        padding:18px 25px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:20px;
        box-shadow:0 10px 30px rgba(0,0,0,.05);
    }
    .toolbar-buttons{
        display:flex;
        gap:12px;
        flex-wrap:wrap;
    }
    .toolbar-buttons .btn{
        border-radius:10px;
    }
    .toolbar-buttons .btn-primary{
        background:#f06324;
        border-color:#f06324;

    }
    .toolbar-buttons .btn-primary:hover{
        background:#dc5319;
        border-color:#dc5319;
    }
    .quotation-paper{
        width:210mm;
        border:1px solid #ececec;
        min-height:297mm;
        margin:0 auto;
        background:#fff;
        border-radius:0;
        overflow:hidden;
        box-shadow:0 15px 50px rgba(0,0,0,.12);
        position:relative;
    }
    .quotation-header{
        display:flex;
        justify-content:space-between;
    }
    
    .quotation-top-right{
        width:60%;
        padding:35px 45px;
        text-align:right;
        display:flex;
        flex-direction:column;
        align-items:flex-end;
    }
    .quotation-top-right h1{
        color:#000000;
        font-size:52px;
        font-weight:800;
        margin-bottom:25px;
        line-height:1;
    }
    .quotation-meta{
        margin-left:auto;
        border-collapse:collapse;
        margin-top:15px;
    }

    .quotation-meta th{
        width:160px;
        padding:8px 0;
        text-align:left;
        color:#6b7280;
        font-size:14px;
        font-weight:600;
    }

    .quotation-meta td{
        padding:8px 0;
        text-align:right;
        font-size:15px;
        font-weight:700;
        color:#111827;
    }    
    .quote-status{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:8px 18px;
        border-radius:30px;
        font-size:11px;
        font-weight:700;
        letter-spacing:1px;
        text-transform:uppercase;
        margin-top:15px;
    }
    .quotation-details{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:60px;
        padding:20px 40px 10px;
    }
    .quotation-block table td{
        padding:4px 0;
    }
    .info-table{
        width:100%;
        border-collapse:collapse;
    }
    .company-accent{
        height:8px;
        width:100%;
        background:var(--company-bg);
    }
    /*====================================
        PAYMENT STRIP
    ====================================*/
    .payment-strip{
        margin:20px 32px 25px;
        padding:12px 18px;
        border:1px solid #e8e8e8;
        border-left:5px solid var(--company-bg);
        border-radius:8px;
        background:#fcfcfc;
    }
    .payment-title{
        font-size:12px;
        text-align:center;
        font-weight:700;
        color:#f06324;
        letter-spacing:1px;
        margin-bottom:8px;
        text-transform:uppercase;
    }
    .payment-details{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        flex-wrap:nowrap;
        font-size:11px;
        color:#444;
    }
    .payment-details span{
        white-space:nowrap;
        flex:1;
    }
    .payment-details strong{
        color:#111827;
        font-weight:700;
    }
    .payment-details span strong{
        color:#111;
    }
    .info-table td{
        padding:3px 0;
        vertical-align:top;
        font-size:13px;
        line-height:1.35;
    }
    .info-table tr:last-child td{
        border-bottom:none;
    }
    .info-table td:first-child{
        width:90px;
        color:#6b7280;
        font-size:12px;
        font-weight:600;
    }

    .info-table td:last-child{
        color:#111827;
        font-size:13px;
    }
    .quotation-block p{
        line-height:1.8;
    }
    .quotation-block strong{
        font-size:16px;
    }
   
    .quotation-bottom{
        display:flex;
        justify-content:space-between;
        padding:45px 0 30px;
        gap:50px;
    }
    .quotation-terms{
        flex:1.6;
    }
    .quotation-terms h4{
        color:#f06324;
        font-size:20px;
        margin-bottom:18px;
        font-weight:700;
    }
    .quotation-terms p{
        color:#555;
        line-height:1.8;
        margin-bottom:10px;
    }
    .quotation-signature{
        margin-top:70px;
        text-align:center;
        font-weight:600;
    }
    .quotation-signature span{
        color:#777;
        font-size:14px;
    }
   .quotation-summary-box{
        width:340px;
        background:#fafafa;
        border:1px solid #ececec;
        border-radius:12px;
        overflow:hidden;
    }
    .quotation-summary-box table{
        width:100%;
        border-collapse:collapse;
        border-spacing:0;
    }
    .quotation-summary-box td{
        padding:16px 20px;
        border-bottom:1px solid #ececec;
        font-size:14px;
        background:transparent;
    }
    .quotation-summary-box td:last-child{
        text-align:right;
        font-weight:600;
    }
    /* Grand Total Row */
    .grand-total td{
        background:var(--company-bg);
        color:#fff !important;
        font-weight:700;
        font-size:22px;
        letter-spacing:.5px;
        border:none !important;
        padding:18px;
    }
    .grand-total td:first-child{
        border-radius:8px 0 0 8px;
    }
    .grand-total td:last-child{
        border-radius:0 8px 8px 0;
    }
    .grand-total{
        background: var(--company-bg) !important;
    }
    .grand-total td{
        background: inherit !important;
        color:#fff !important;
        border:none !important;
        padding:18px !important;
        font-size:18px;
        font-weight:700;
    }
    .grand-total td{
        border:none !important;
        padding:18px;
    }
    .quotation-footer{
        background:#000000;
        color:#fff;
        display:flex;
        justify-content:space-around;
        align-items:center;
        padding:18px 30px;
        font-weight:600;
        font-size:15px;
    }
    
    .document-header,
    .document-information,
    .quotation-items-section{
        position:relative;
        z-index:2;
    }
    .quotation-footer div{
        display:flex;
        align-items:center;
        gap:10px;
    }
    .page-number{
        text-align:right;
        font-size:12px;
        color:#9ca3af;
        padding:0 30px 15px;
    }
    .quotation-footer i{
        font-size:18px;
    }
    .quotation-powered{
        text-align:center;
        padding:15px 20px;
        font-size:13px;
        color:#6b7280;
        background:#fafafa;
        border-top:1px solid #e5e7eb;
    }
    .quotation-powered a{
        color:#f06324;
        font-weight:600;
        text-decoration:none;
        transition:.3s;
    }
    .quotation-powered a:hover{
        color:#dc5319;
        text-decoration:underline;
    }
    
    .quotation-logo-area{
        width:220px;
        overflow:hidden;
    }
    .quotation-logo-area{
        margin:0;
        padding:0;
    }
    .quotation-top-left{
        width:42%;
        padding:55px 0 0 40px;
        display:flex;
        align-items:flex-start;
        justify-content:flex-start;
    }
    .quotation-logo{
        object-fit:contain;
    }
    .quotation-logo{
        display:block;
        width:280px;
        height:auto;
        max-height:70px;
    }

    /*==================================================
        MAIL CENTER
    ==================================================*/
    .email-card{
        border: none;
        border-radius: 14px;
        box-shadow: 0 5px 20px rgba(0,0,0,.06);
        overflow: hidden;
        height: calc(100vh - 230px);
        display: flex;
        flex-direction: column;
    }
    .email-card .card-header{
        background:#fff;
        border-bottom:1px solid #edf2f7;
        padding:18px;
    }
    .email-card .card-footer{
        background:#fff;
        border-top:1px solid #edf2f7;
        padding:16px 20px;
    }
    .email-folder{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:14px 18px;
        cursor:pointer;
        transition:.25s;
    }
    .folder-info{
        display:flex;
        align-items:center;
        gap:10px;
    }
    .folder-info i{
        font-size:18px;
        width:18px;
    }
    .folder-info span{
        font-size:15px;
    }
    .email-folder i{
        width:20px;
        font-size:18px;
    }
    .email-folder:hover{
        background:#f8fafc;
        color:#f06324;
    }
    .email-folder.active{
        background:#fff3ed;
        border-left:4px solid #f06324;
        color:#f06324;
        font-weight:600;
    }
    .email-folder .badge{
        border-radius:20px;
        font-size:11px;
        margin-left:auto;
    }
    .email-folder:hover{
        background:#f8fafc;
        color:#f06324;
    }
    .email-card .form-control{
        border-radius:10px;
        height:45px;
        border:1px solid #dbe3eb;
    }
    .email-card .form-control:focus{
        box-shadow:none;
        border-color:#f06324;
    }

    .email-card .card-body{
        overflow-y:auto;
    }
    .email-item{
        display:flex;
        align-items:flex-start;
        gap:14px;
        padding:18px;
        border-bottom:1px solid #f1f4f8;
        cursor:pointer;
        transition:.25s;
    }
    .email-item:hover{
        background:#fafafa;
    }
    .email-item.active{
        background:#fff4ef;
        border-left:4px solid #f06324;
    }
    .email-avatar{
        width:46px;
        height:46px;
        border-radius:50%;
        background:#f06324;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:700;
        font-size:17px;
        flex-shrink:0;
    }
    .email-details{
        flex:1;
    }
    .email-details h6{
        margin:0;
        font-size:15px;
        font-weight:600;
        color:#1e293b;
    }
    .email-details p{
        margin:4px 0 0;
        color:#64748b;
        font-size:13px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .email-item small{
        color:#94a3b8;
        font-size:12px;
        white-space:nowrap;
    }
    .email-card h5{
        margin:0;
        font-size:22px;
        font-weight:600;
        color:#1e293b;
    }
    .email-card strong{
        font-size:16px;
    }
    .email-card p{
        font-size:14px;
        line-height:1.8;
        color:#475569;
    }
    .email-card hr{
        margin:30px 0;
    }
    .email-card h6{
        font-weight:600;
        margin-bottom:12px;
    }
    .email-card .btn-light{
        background:#f8fafc;
        border:1px solid #e2e8f0;
        margin-right:8px;
        margin-bottom:8px;
    }

    .email-card .btn-light:hover{
        background:#f06324;
        color:#fff;
    }
    .email-card .card-body::-webkit-scrollbar{
        width:7px;
    }
    .email-card .card-body::-webkit-scrollbar-thumb{
        background:#d0d7de;
        border-radius:20px;
    }
    .email-card .card-body::-webkit-scrollbar-track{
        background:#f8fafc;
    }

    .email-card .btn-primary{
        background:#f06324;
        border-color:#f06324;
    }
    .email-card .btn-primary:hover{
        background:#d85318;
        border-color:#d85318;
    }
    .email-card .btn-secondary{
        background:#475569;
        border:none;
    }
    .email-card .btn-danger{
        border:none;
    }

    @media(max-width:1200px){
        .email-card{
            height:auto;
            margin-bottom:20px;
        }
    }

    @media(max-width:768px){
        .email-folder{
            font-size:14px;
            padding:12px 15px;
        }
        .email-item{
            padding:15px;
        }
        .email-avatar{
            width:40px;
            height:40px;
            font-size:15px;
        }
        .email-card h5{
            font-size:18px;
        }
    }

    /*==================================================
        COMPOSE EMAIL
    ==================================================*/
    .compose-card{

        border:none;
        border-radius:14px;
        box-shadow:0 5px 20px rgba(0,0,0,.06);

    }
    .compose-card .card-header{
        background:#fff;
        padding:22px 25px;
        border-bottom:1px solid #edf2f7;
    }
    .compose-card .card-header h4{
        margin:0;
        font-size:22px;
        font-weight:600;
        color:#1e293b;
    }
    .compose-card .card-body{
        padding:30px;
    }
    .compose-card .card-footer{
        background:#fff;
        border-top:1px solid #edf2f7;
        padding:20px 30px;
    }
    .compose-card label{
        font-weight:600;
        color:#475569;
        margin-bottom:8px;
    }
    .compose-card .form-control{
        height:48px;
        border-radius:10px;
        border:1px solid #dbe3eb;
        transition:.3s;
    }
    .compose-card textarea.form-control{
        height:320px;
        resize:vertical;
        padding:15px;
        line-height:1.8;
    }
    .compose-card .form-control:focus{
        border-color:#f06324;
        box-shadow:0 0 0 .15rem rgba(240,99,36,.15);
    }
    .email-toolbar{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:8px;
        padding:12px 15px;
        background:#f8fafc;
        border:1px solid #dbe3eb;
        border-bottom:none;
        border-radius:10px 10px 0 0;
    }
    .email-toolbar button{
        width:38px;
        height:38px;
        border:none;
        border-radius:8px;
        background:#fff;
        transition:.25s;
    }
    .email-toolbar button:hover{
        background:#f06324;
        color:#fff;
    }
    .attachment-box{
        border:2px dashed #dbe3eb;
        border-radius:12px;
        padding:35px;
        text-align:center;
        transition:.3s;
        cursor:pointer;
    }
    .attachment-box:hover{
        border-color:#f06324;
        background:#fff8f4;
    }
    .attachment-box i{
        font-size:38px;
        color:#f06324;
        margin-bottom:12px;
    }
    .attachment-box p{
        margin:0;
        color:#64748b;
    }
    .compose-card .btn{
        min-width:130px;
    }
    .compose-card .btn-primary{
        background:#f06324;
        border-color:#f06324;
    }
    .compose-card .btn-primary:hover{
        background:#db571c;
        border-color:#db571c;
    }
    .recipient-chip{
        display:inline-flex;
        align-items:center;
        padding:6px 12px;
        border-radius:30px;
        background:#fff3ed;
        color:#f06324;
        margin:3px;

    }
    @media(max-width:768px){
        .compose-card .card-body{
            padding:20px;

        }
        .compose-card textarea.form-control{
            height:220px;
        }
    }
    .compose-row{
        display:flex;
        align-items:center;
        gap:20px;
        margin-bottom:18px;
    }
    .compose-row label{
        width:80px;
        font-weight:600;
        color:#475569;
        margin-bottom:0;
    }
    .compose-row .form-control{
        flex:1;
    }
    .compose-message{
        height:350px !important;
        border-top-left-radius:0 !important;
        border-top-right-radius:0 !important;
    }
    .email-toolbar{
        margin-top:20px;
    }
    .attachment-box h6{
        font-weight:600;
    }
    @media(max-width:768px){
        .compose-row{
            flex-direction:column;
            align-items:flex-start;
            gap:8px;
        }
        .compose-row label{
            width:100%;
        }
    }

    /*=================================================
            NOTIFICATION FILTERS
    ==================================================*/
    .notification-filters{
        display:flex;
        gap:10px;
        margin-bottom:22px;
        border-bottom:1px solid #eceff3;
        padding-bottom:12px;
    }
    .notification-filters button{
        background:none;
        border:none;
        color:#64748b;
        font-weight:500;
        padding:8px 16px;
        transition:.25s;
        border-bottom:3px solid transparent;
    }
    .notification-filters button:hover{
        color:#f06324;
    }
    .notification-filters button.active{
        color:#f06324;
        border-bottom-color:#f06324;
    }
    .notification-list{
        display:flex;
        flex-direction:column;
        gap:15px;
    }
    .notification-card{
        display:flex;
        gap:18px;
        background:#fff;
        border-radius:14px;
        padding:14px 18px;
        border:1px solid #edf2f7;
        box-shadow:0 3px 10px rgba(0,0,0,.04);
        transition:.25s;
    }
    .notification-card:hover{
        border-color:#f06324;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }
    .notification-card.unread{
        border-left:4px solid #f06324;
    }

    .notification-icon{
        width:40px;
        height:40px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:16x;
        flex-shrink:0;
    }
    .notification-body{
        flex:1;
    }
    .notification-body h6{
        margin-bottom:2px;
        font-weight:600;
        color:#1e293b;
    }
    .notification-body small{
        display:block;
        color:#94a3b8;
        margin-bottom:6px;
    }
    .notification-body p{
        margin-bottom:10px;
        color:#64748b;
        line-height:1.4;
    }
    .notification-footer{
        display:flex;
        gap:10px;
    }
    .notification-btn{
        background:#f8fafc;
        border:1px solid #e2e8f0;
        color:#475569;
        border-radius:8px;
        padding:4px 10px;
        font-size:12px;
        transition:.25s;
    }
    .notification-btn:hover{
        background:#f06324;
        color:#fff;
        border-color:#f06324;
    }
    @media(max-width:768px){
        .notification-card{
            flex-direction:column;
        }
        .notification-footer{
            flex-wrap:wrap;
        }
    }

    /*=====================================
        CAMPAIGNS
    ======================================*/
    .campaign-tabs{
        display:flex;
        gap:18px;
    }
    .campaign-tabs button{
        border:none;
        background:none;
        padding:8px 0;
        color:#64748b;
        font-weight:500;
        border-bottom:3px solid transparent;
    }
    .campaign-tabs button.active{
        color:#f06324;
        border-bottom-color:#f06324;
    }
    .campaign-list{
        display:flex;
        flex-direction:column;
        gap:18px;
    }
    .campaign-card{
        background:#fff;
        border-radius:14px;
        border:1px solid #edf2f7;
        display:flex;
        overflow:hidden;
        transition:.25s;
    }
    .campaign-card:hover{
        border-color:#f06324;
        transform:translateY(-2px);
    }
    .campaign-status{
        width:130px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:600;
        color:#fff;
        flex-shrink:0;
    }
    .sent{
        background:#16a34a;
    }
    .scheduled{
        background:#f59e0b;
    }
    .draft{
        background:#94a3b8;
    }
    .campaign-body{
        padding:22px;
        flex:1;
    }
    .campaign-body h5{
        margin-bottom:8px;
        font-weight:600;
    }
    .campaign-body p{
        color:#64748b;
        margin-bottom:16px;
    }
    .campaign-meta{
        display:flex;
        gap:25px;
        flex-wrap:wrap;
        color:#64748b;
        font-size:14px;
    }
    .campaign-meta span{
        display:flex;
        align-items:center;
        gap:6px;
    }
    #campaign-editor{
        height:420px;
        border:1px solid #e2e8f0;
        border-radius:10px;
        background:#fff;
    }
    .card-header{
        background:#fff;
        border-bottom:1px solid #edf2f7;
        padding:18px 22px;
    }
    .card-header h5{
        margin:0;
        font-weight:600;
    }
    .form-label,
    label{
        font-weight:500;
        margin-bottom:8px;
    }
    .campaign-container{
        padding:30px;

    }

    /*=========================================
            REPORT CARDS
    ==========================================*/
    .report-card{
        background:#fff;
        border-radius:14px;
        padding:22px;
        border:1px solid #edf2f7;
        display:flex;
        align-items:center;
        gap:18px;
        transition:.25s;
        margin-bottom:25px;
    }
    .report-card:hover{
        border-color:#f06324;
        transform:translateY(-3px);
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }
    .report-icon{
        width:58px;
        height:58px;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:26px;
        flex-shrink:0;
    }
    .report-details{
        flex:1;
    }
    .report-details span{
        display:block;
        color:#64748b;
        font-size:14px;
        margin-bottom:6px;
    }
    .report-details h3{
        margin:0;
        font-size:28px;
        font-weight:700;
        color:#1e293b;
    }
    .report-details small{
        color:#94a3b8;
    }
    .revenue{
        background:#16a34a;
    }
    .invoice{
        background:#2563eb;
    }
    .customers{
        background:#f59e0b;
    }
    .orders{
        background:#f06324;
    }

    /*=========================================
            REPORT FILTERS
    ==========================================*/
    .report-filter-card{
        margin-bottom:28px;
    }
    .report-filter-card label{
        display:block;
        margin-bottom:8px;
        font-weight:600;
        color:#475569;
    }
    .report-actions{
        display:flex;
        gap:10px;
        justify-content:flex-end;
        align-items:center;
        height:100%;
    }
    .report-actions .btn{
        min-width:110px;
    }

    @media(max-width:991px){
        .report-actions{
            justify-content:flex-start;
            flex-wrap:wrap;
        }
    }

    /*=========================================
            REPORT CHARTS
    ==========================================*/
    .report-chart-card{
        margin-bottom:28px;
    }
    .report-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:18px 24px;
    }
    .report-header h5{
        margin:0;
        font-weight:600;
    }
    .report-header p{
        margin:3px 0 0;
        color:#64748b;
        font-size:13px;
    }
    .chart-placeholder{
        height:350px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        border:2px dashed #e2e8f0;
        border-radius:12px;
        color:#94a3b8;
        text-align:center;
    }
    .chart-placeholder.small{
        height:350px;

    }
    .chart-placeholder i{
        font-size:70px;
        color:#f06324;
        margin-bottom:15px;
    }
    .chart-placeholder h4,
    .chart-placeholder h5{
        margin-bottom:8px;
        color:#334155;

    }
    /*=========================================
            BUSINESS INSIGHTS
    ==========================================*/
    .insight-item{
        display:flex;
        align-items:center;
        gap:16px;
        padding:18px 24px;
        border-bottom:1px solid #edf2f7;
        transition:.25s;
    }
    .insight-item:last-child{
        border-bottom:none;
    }
    .insight-item:hover{
        background:#fff8f4;
    }
    .insight-rank{
        width:38px;
        height:38px;
        border-radius:50%;
        background:#f06324;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:700;
        flex-shrink:0;
    }
    .customer-avatar{
        width:42px;
        height:42px;
        border-radius:50%;
        background:#f06324;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:600;
        flex-shrink:0;
    }
    .insight-details{
        flex:1;
    }
    .insight-details h6{
        margin-bottom:3px;
        font-weight:600;
    }
    .insight-details small{
        color:#94a3b8;
    }
    .insight-value{
        font-weight:700;
        color:#0f172a;

    }
    /*=========================================
            REPORT TABLE
    ==========================================*/
    .report-table thead{
        background:#f8fafc;
    }
    .report-table thead th{
        border:none;
        padding:16px 20px;
        color:#64748b;
        font-size:13px;
        text-transform:uppercase;
        letter-spacing:.4px;
    }
    .report-table tbody td{
        padding:18px 20px;
        vertical-align:middle;
    }
    .report-table tbody tr{
        transition:.2s;
    }
    .report-table tbody tr:hover{
        background:#fff8f4;
    }
    .report-table .badge{
        padding:8px 12px;
        border-radius:20px;
        font-weight:600;
    }
    .report-insights{
        margin:0;
        padding-left:18px;
    }
    .report-insights li{
        margin-bottom:14px;
        color:#475569;
        line-height:1.7;

    }
    .prepared-by{
        margin-top:30px;
        font-size:13px;
        color:#6b7280;
    }
    /*=========================================
            FINANCIAL SUMMARY
    ==========================================*/
    .financial-stat{
        margin-bottom:24px;
    }
    .financial-stat span{
        display:block;
        color:#64748b;
        margin-bottom:6px;
    }
    .financial-stat h4{
        font-size:28px;
        font-weight:700;
    }

    

    .preview-item small{
        color:#6c757d;
        display:block;
        margin-bottom:5px;
    }
    .preview-item h6{
        font-weight:600;
        margin-bottom:0;
    }
    .sticky-top{
        top:90px;
    }





    /*=========================================
            QUOTE
    ==========================================*/
    .status-draft{
        background:#f5f5f5;
        color:#666;
    }
    .status-sent{
        background:#dbeafe;
        color:#1d4ed8;
    }
    .status-accepted{
        background:#dcfce7;
        color:#15803d;
    }
    .status-rejected{
        background:#fee2e2;
        color:#dc2626;
    }
    .status-expired{
        background:#fef3c7;
        color:#b45309;
    }
    .status-converted{
        background:#000000;
        color:#fbfafa;
    }

    .table-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;

        margin-top:28px;
        padding-top:20px;
    }
    .table-results{
        color:#6b7280;
        font-size:14px;
    }
    .quote-number{
        color: var(--primary-color);
        font-weight: 700;
        transition: .2s ease;
    }
    .quote-number:hover{
        text-decoration: underline !important;
        color: var(--primary-hover);
    }
    td strong a{
        color: inherit;
        transition: .2s ease;
    }
    td strong a:hover{
        color: var(--primary-color);
        text-decoration: underline;

    }
    .action-btn{
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        margin:auto;
    }

    /*==================================================
    DOCUMENT HEADER
    ==================================================*/
    .document-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:28px 32px 18px;
    }
    .document-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:28px 32px 18px;
        border-bottom:2px solid #f1f5f9;
    }
    .document-brand{
        flex:1;
    }
    .document-logo{
        width:220px;
        max-height:70px;
        object-fit:contain;
        height:auto;
        display:block;
    }
    .document-title{
        text-align:right;
    }
    .document-title h1{
        margin:0;
        font-size:42px;
        font-weight:800;
        color:#111827;
        letter-spacing:1px;
    }
    .document-title .quote-status{
        margin-top:15px;
    }
    /*==================================================
    DOCUMENT INFORMATION
    ==================================================*/
    .document-information{
        display:grid;
        grid-template-columns:55% 45%;
        padding:15px 32px 20px;
    }
    .document-card h3{
        font-size:13px;
        text-transform:uppercase;
        letter-spacing:1px;
        color:#6b7280;
        margin-bottom:14px;
    }
    .document-card:last-child{
        justify-self:end;
        width:360px;
    }
    .document-card .info-table{
        width:100%;
        border-collapse:collapse;
    }
    .document-card .info-table td{
        padding:5px 0;
        vertical-align:top;
        font-size:14px;
        line-height:1.4;
    }
    .document-card .info-table td:first-child{
        width:120px;
        color:#6b7280;
        font-weight:400;
    }
    .document-card .info-table td:last-child{
        color:#111827;
    }
    .document-card strong{
        font-size:16px;
        color:#111827;
    }
    .document-card{
        position:relative;
    }
    .item-column{
        text-align:left;
    }
    .item-name{
        font-size:14px;
        font-weight:700;
        color:#111827;
        margin-bottom:6px;
    }

    .item-description{
        font-size:12px;
        color:#6b7280;
        line-height:1.6;
    }
        

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

    .qt-header-v2{
        width:100%;
        overflow:hidden;
        padding:35px 40px 28px;
        border-bottom:2px solid #ececec;
        box-sizing:border-box;
    }

    .qt-brand{
        float:left;
        width:38%;
    }

    .qt-brand img{
        width:150px;
        height:auto;
        display:block;
    }

    .qt-title{
        float:right;
        width:62%;
        text-align:right;
    }

    .qt-title h1{
        margin:0;
        padding:0;
        font-size:44px;
        font-weight:800;
        color:#111827;
        letter-spacing:1px;
        line-height:1;
    }

    .qt-status{
        display:inline-block;
        margin-top:18px;
        min-width:110px;
        text-align:center;
        padding:8px 18px;
        border-radius:30px;
        font-size:11px;
        font-weight:700;
        letter-spacing:1px;
        text-transform:uppercase;
    }

    /*==================================================
        STATUS COLOURS
    ==================================================*/

    .qt-status.draft{
        background:#f3f4f6;
        color:#6b7280;
    }

    .qt-status.sent{
        background:#dbeafe;
        color:#2563eb;
    }

    .qt-status.accepted{
        background:#dcfce7;
        color:#15803d;
    }

    .qt-status.rejected{
        background:#fee2e2;
        color:#dc2626;
    }

    .qt-status.expired{
        background:#fef3c7;
        color:#b45309;
    }

    .qt-status.converted{
        background:#111827;
        color:#ffffff;
    }

    /*==================================================
        DIVIDER
    ==================================================*/

    .qt-divider{
        border:0;
        border-top:1px solid #e5e7eb;
        margin:0;
    }

    /*==================================================
        INFORMATION SECTION
    ==================================================*/

    .qt-info-row{
        width:100%;
        overflow:hidden;
        padding:35px 40px;
        box-sizing:border-box;
    }

    .qt-card{
        float:left;
        width:47%;
    }

    .qt-card:last-child{
        float:right;
    }

    /*==================================================
        CARD TITLE
    ==================================================*/

    .qt-card-title{
        color:#111827;
        font-size:16px;
        font-weight:700;
        text-transform:uppercase;
        padding-bottom:12px;
        margin-bottom:18px;
        border-bottom:2px solid #f06324;
    }

    /*==================================================
        TABLE
    ==================================================*/
    .qt-table{
        width:100%;
        border-collapse:collapse;
    }
    .qt-table td{
        padding:8px 0;
        font-size:14px;
        vertical-align:top;
    }
    .qt-table td:first-child{
        width:120px;
        color:#6b7280;
        font-weight:500;
    }
    .qt-table td:last-child{
        color:#111827;
        font-weight:600;
    }
    .qt-table strong{
        font-size:20px;
        color:#f06324;
        font-weight:700;
        display:block;
        margin-bottom:10px;
    }
    .qt-paper{
        background:#ffffff;
        padding:0;
        border:1px solid #ececec;
        border-radius:8px;
        overflow:hidden;
    }





    /*==================================================
        QUOTATION HEADER V3
    ==================================================*/

    .qt-header{

        position:relative;

        padding:45px 50px;

        background:#ffffff;

        overflow:hidden;

        border-bottom:1px solid #e9ecef;

    }

    /*==================================================
        TOP RIGHT PATTERN
    ==================================================*/
    .qt-pattern{
        position:absolute;
        top:-20px;
        right:-20px;
        width:260px;
        opacity:.5;
        z-index:0;
    }
    .qt-pattern img{
        width:100%;
        display:block;
    }
    /*==================================================
        LEFT SIDE
    ==================================================*/

    .qt-company{

        position:relative;

        float:left;

        width:48%;

        z-index:2;

    }
    .qt-logo{
        width:180px;
        height:auto;
        display:block;
        margin-bottom:22px;
    }
    .qt-company-info p{
        margin:5px 0;
        font-size:14px;
        color:#6b7280;
        line-height:1.7;
    }
    /*==================================================
        RIGHT SIDE
    ==================================================*/
    .qt-document{
        position:relative;
        float:right;
        width:42%;
        text-align:right;
        z-index:2;
        padding-top:42px;
    }
    .qt-document h1{
        margin:0 0 16px;
        font-size:52px;
        font-weight:800;
        color:#111827;
        letter-spacing:2px;
    }
    /*==================================================
        META TABLE
    ==================================================*/
    .qt-meta{
        width:100%;
        border-collapse:collapse;
    }
    .qt-meta td{
        padding:4px 0;
        font-size:14px;
        line-height:1.4;
    }
    .qt-meta td:first-child{
        color:#6b7280;
        text-align:left;
        width:45%;
    }
    .qt-meta td:last-child{
        text-align:right;
        color:#111827;
        font-weight:600;
    }
    /*==================================================
        STATUS
    ==================================================*/

    .qt-status{

        display:inline-block;

        background:#f06324;

        color:#ffffff;

        padding:7px 18px;

        border-radius:25px;

        font-size:11px;

        font-weight:700;

        letter-spacing:1px;

    }

    /*==================================================
        DIVIDER
    ==================================================*/

    .qt-divider{

        border:none;

        border-top:2px solid #efefef;
        margin:0;
    }
    /*==================================================
        CLEAR
    ==================================================*/
    .qt-clear{
        clear:both;

    }

    /*==================================================
        BILL TO
    ==================================================*/

    .qt-bill{

        margin-top:30px;

    }

    .qt-bill-title{

        font-size:13px;

        font-weight:700;

        text-transform:uppercase;

        letter-spacing:2px;

        color:#6b7280;

        margin-bottom:8px;

    }

    .qt-bill-company{

        font-size:17px;

        font-weight:700;

        color:#111827;

        margin-bottom:6px;

    }

    .qt-bill-item{

        font-size:13px;

        color:#6b7280;

        line-height:1.6;

    }
    .qt-logo {
        width: 215px;
        height: auto;
        display: block;
    }
    .quotation-items-section {
        border-top: none !important;
    }
    .quotation-items {
        border-top: none !important;
    }
    .quotation-items thead {
        border-top: none !important;
    }
    .quotation-items thead tr {
        border-top: none !important;
    }
    /*==================================================
        KEEP SUMMARY TOGETHER
    ==================================================*/
    .keep-together{
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .quotation-bottom{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: auto;
    }
    /*==================================================
        TERMS & SUMMARY - V2
    ==================================================*/
    .qt-summary-section {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
        width: auto;
        margin: 35px 50px 25px;
        box-sizing: border-box;
    }
    /* -----------------------------------------------
    KEEP SECTION TOGETHER
    ------------------------------------------------ */
    .qt-keep-together {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* -----------------------------------------------
    TERMS
    ------------------------------------------------ */
    .qt-terms-block {
        flex: 1;
        min-width: 0;
    }
    .qt-section-heading {
        margin: 0 0 18px 0;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 700;
        color: var(--qt-primary);
    }
    .qt-terms-content {
        font-size: 14px;
        line-height: 1.65;
        color: #555f6d;
    }
    .qt-terms-content p {
        margin: 0 0 12px 0;
    }
    .qt-terms-content strong {
        color: #374151;
        font-weight: 700;
    }
    .qt-terms-link {
        display: inline-block;
        margin-top: 2px;
        color: var(--qt-primary);
        text-decoration: none;
        word-break: break-word;
    }
    /* -----------------------------------------------
    SUMMARY
    ------------------------------------------------ */
    .qt-total-block {
        width: 360px;
        flex-shrink: 0;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        background: #ffffff;
    }
    .qt-total-table {
        width: 100%;
        border-collapse: collapse;
    }
    .qt-total-table td {
        padding: 15px 20px;
        border-bottom: 1px solid #eeeeee;
        font-size: 15px;
        line-height: 1.3;
        color: #596579;
    }
    .qt-total-table td:last-child {
        text-align: right;
        font-weight: 600;
        color: #4b5563;
        white-space: nowrap;
    }
    /* -----------------------------------------------
    GRAND TOTAL
    ------------------------------------------------ */
    .qt-total-table tr.qt-grand-total td {
        border-bottom: none;
        background: var(--qt-primary);
        color: #ffffff;
        font-size: 17px;
        font-weight: 700;
        padding-top: 17px;
        padding-bottom: 17px;
    }
    .qt-total-table tr.qt-grand-total td:last-child {
        color: #ffffff;
        font-size: 18px;
    }
    /* -----------------------------------------------
    PDF SAFETY
    ------------------------------------------------ */
    .qt-total-block,
    .qt-total-table,
    .qt-total-table tr,
    .qt-terms-block {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /*==================================================
        TERMS & CONDITIONS - COMPACT
    ==================================================*/
    .qt-terms-content {
        font-size: 13px;
        line-height: 1.55;
        color: #5f6875;
    }
    .qt-terms-content p {
        margin: 0 0 10px 0;
    }
    .qt-terms-content strong {
        color: #303846;
        font-weight: 700;
    }

    /* Terms link button */
    .qt-terms-button {
        display: inline-block;
        margin-top: 4px;
        padding: 8px 14px;
        border: 1px solid var(--qt-primary);
        border-radius: 6px;
        color: var(--qt-primary);
        background: transparent;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        line-height: 1.2;
    }

    /* PDF-friendly version */
    .qt-terms-button:hover {
        color: #ffffff;
        background: var(--qt-primary);
    }

    /* =========================================================
   INVOICE SIDEBARCOMPACT DESIGN
   ========================================================= */
    .quotation-sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* =========================================================
    SIDEBAR HEADER
    ========================================================= */
    .sidebar-header {
        flex-shrink: 0;
    }
    .sidebar-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .sidebar-title-row h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }
    .sidebar-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 7px;
        border-radius: 20px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
    }

    /* =========================================================
    INVOICE LIST
    ========================================================= */
    .quotation-list {
        flex: 1;
        overflow-y: auto;
        padding-right: 2px;
    }
    /* =========================================================
    COMPACT INVOICE CARD
    ========================================================= */
    .quotation-card {
        display: block;
        width: 100%;
        padding: 11px 12px !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        position: relative;
        overflow: hidden;
    }
    /* =========================================================
    CARD TOP
    Invoice number + status
    ========================================================= */
    .quotation-card .invoice-card-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        min-width: 0;
        margin-bottom: 3px;
    }
    .quotation-card .invoice-card-top h6 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* =========================================================
    STATUS BADGE
    ======================================================== */
    .quotation-card .invoice-card-top .status {
        position: static !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-left: 6px;
        padding: 2px 6px !important;
        min-width: auto;
        border-radius: 10px !important;
        font-size: 7px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        white-space: nowrap;
        transform: none !important;
        z-index: 2;
    }
    /* =========================================================
    CUSTOMER NAME
    ========================================================= */
    .quotation-card .quote-customer {
        display: block;
        width: 100%;
        margin: 0 0 6px 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #475569;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* =========================================================
    CARD BOTTOM
    Date + Amount
    ========================================================= */
    .quotation-card .invoice-card-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }
    /* Date */
    .quotation-card .invoice-card-bottom small {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 9.5px !important;
        line-height: 1.3 !important;
        color: #94a3b8;
        white-space: nowrap;
    }
    /* Amount */
    .quotation-card .invoice-card-bottom strong {
        flex: 0 0 auto;
        margin-left: 8px;
        font-size: 10px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #1e293b;
        white-space: nowrap;
    }
    /* =========================================================
    ACTIVE INVOICE
    ========================================================= */
    .quotation-card.active {
        border-color: #f06324 !important;
    }
    /* =========================================================
    SIDEBAR PAGINATION
    ========================================================= */
    .invoice-sidebar-pagination {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 0 2px;
        border-top: 1px solid #e5e7eb;
    }
    /* Previous / Next buttons */
    .invoice-page-btn {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        background: #ffffff;
        color: #475569;
        text-decoration: none !important;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    .invoice-page-btn:hover {
        background: #f8fafc;
        color: #f06324;
        border-color: #f06324;
    }
    /* Disabled */
    .invoice-page-btn.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    /* Page number */
    .invoice-page-indicator {
        font-size: 11px;
        font-weight: 600;
        color: #475569;
    }
    .invoice-page-indicator span {
        margin: 0 3px;
        color: #94a3b8;
    }
    /* =========================================================
    STATUS COLORS
    ========================================================= */
    .quotation-card .status.draft {
        background: #fef3c7;
        color: #92400e;
    }
    .quotation-card .status.paid {
        background: #dcfce7;
        color: #166534;
    }
    .quotation-card .status.unpaid {
        background: #fee2e2;
        color: #991b1b;
    }
    .quotation-card .status.partial {
        background: #dbeafe;
        color: #1e40af;
    }
    .quotation-card .status.overdue {
        background: #fee2e2;
        color: #991b1b;
    }
    /* =========================================================
    SIDEBAR SCROLLBAR
    ========================================================= */
    .quotation-list::-webkit-scrollbar {
        width: 4px;
    }
    .quotation-list::-webkit-scrollbar-track {
        background: transparent;
    }
    .quotation-list::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 10px;
    }
    .quotation-list::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }

    /* ==========================================
    INVOICE PAPER - REMOVE HEADER BOX
    ========================================== */

    #invoice-paper {
        border: none !important;
        box-shadow: none !important;
    }
    /* Remove the box surrounding the invoice header */

#invoice-paper .qt-header-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
#invoice-paper .qt-header-container,
#invoice-paper .qt-header-container table,
#invoice-paper .qt-header-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ==========================================================
   SALES ORDER FORM
========================================================== */

.sales-order-page {
    width: 100%;
}


/* ==========================================================
   Page Header
========================================================== */

.customer-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.customer-form-header .page-title {
    margin-bottom: 5px;
    font-weight: 700;
}

.customer-form-header .page-subtitle {
    margin-bottom: 0;
    color: #6c757d;
}


/* ==========================================================
   Cards
========================================================== */

.customer-card {
    border: 0;
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.customer-card .card-header {
    background: #fff;
    border-bottom: 1px solid #edf0f2;
    padding: 18px 22px;
}

.customer-card .card-header h5 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-card .card-header h5 i {
    font-size: 19px;
}

.customer-card .card-body {
    padding: 22px;
}


/* ==========================================================
   Form Controls
========================================================== */

.customer-card .form-label {
    font-weight: 600;
    margin-bottom: 7px;
    color: #344054;
}

.customer-card .form-control,
.customer-card .form-select {
    min-height: 42px;
    border-radius: 8px;
    border-color: #d9dee5;
}

.customer-card .form-control:focus,
.customer-card .form-select:focus {
    border-color: #f06324;
    box-shadow: 0 0 0 3px rgba(240, 99, 36, 0.10);
}


/* ==========================================================
   Items Table
========================================================== */

.quotation-items-table {
    min-width: 1050px;
}

.quotation-items-table thead th {
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 14px 12px;
}

.quotation-items-table tbody td {
    padding: 10px 8px;
    vertical-align: middle;
}

.quotation-items-table .form-control,
.quotation-items-table .form-select {
    min-height: 40px;
}


/* ==========================================================
   Add Item Button
========================================================== */

.add-item-btn {
    border-radius: 7px;
}


/* ==========================================================
   Summary
========================================================== */

.quotation-summary .card-body {
    padding: 22px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
}

.summary-row span {
    color: #667085;
}

.summary-row strong {
    color: #1d2939;
}

.summary-row.total-row {
    padding-top: 14px;
}

.summary-row.total-row span,
.summary-row.total-row strong {
    font-size: 17px;
    font-weight: 700;
}


/* ==========================================================
   Form Actions
========================================================== */

.customer-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.customer-form-actions .btn {
    min-height: 42px;
    padding: 9px 18px;
    border-radius: 8px;
}

.save-customer-btn {
    background: #f06324;
    border-color: #f06324;
    color: #fff;
}

.save-customer-btn:hover {
    background: #d95318;
    border-color: #d95318;
    color: #fff;
}

.cancel-btn {
    border: 1px solid #d9dee5;
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 767px) {

    .customer-form-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-header-actions {
        width: 100%;
    }

    .customer-header-actions .btn {
        width: 100%;
    }

    .customer-card .card-header {
        padding: 15px;
    }

    .customer-card .card-body {
        padding: 15px;
    }

    .customer-form-actions {
        flex-direction: column-reverse;
        width: 100%;
    }

    .customer-form-actions .btn {
        width: 100%;
    }

}

    /* =========================================================
    SALES ORDER MODAL
    ========================================================= */

    .so-modal {
        border: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 25px 80px rgba(15, 23, 42, 0.20);
    }


    /* ---------------------------------------------------------
    HEADER
    --------------------------------------------------------- */

    .so-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 26px;
        background: #ffffff;
        border-bottom: 1px solid #edf0f4;
    }

    .so-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .so-document-icon {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(240, 99, 36, 0.10);
        color: #f06324;
        font-size: 22px;
    }

    .so-document-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.3px;
        color: #8b95a5;
        margin-bottom: 2px;
    }

    .so-modal-header h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #182334;
    }

    .so-header-meta {
        margin-top: 4px;
        font-size: 12px;
        color: #7b8494;
    }

    .so-meta-dot {
        margin: 0 5px;
    }

    .so-header-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .so-status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 80px;
        padding: 7px 13px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 700;
    }

    .so-status-badge.pending {
        background: #fff0e8;
        color: #f06324;
    }

    .so-status-badge.paid {
        background: #e9f8f0;
        color: #15945a;
    }

    .so-status-badge.partial {
        background: #fff7df;
        color: #b37b00;
    }

    .so-status-badge.cancelled {
        background: #ffe9eb;
        color: #dc3545;
    }

    .so-status-badge.draft {
        background: #eef1f5;
        color: #687385;
    }

    .so-close-btn {
        width: 34px;
        height: 34px;
        border: 0;
        background: transparent;
        color: #7c8796;
        border-radius: 8px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
    }

    .so-close-btn:hover {
        background: #f3f5f7;
        color: #202936;
    }


    /* ---------------------------------------------------------
    BODY
    --------------------------------------------------------- */

    .so-modal-body {
        padding: 24px 26px;
        background: #ffffff;
    }


    /* ---------------------------------------------------------
    INFORMATION CARDS
    --------------------------------------------------------- */

    .so-info-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 26px;
    }

    .so-info-card {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px;
        background: #f8fafc;
        border: 1px solid #edf0f4;
        border-radius: 11px;
    }

    .so-info-icon {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #ffffff;
        color: #f06324;
        font-size: 16px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    }

    .so-info-label {
        display: block;
        margin-bottom: 3px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.7px;
        color: #8993a3;
    }

    .so-info-card strong {
        display: block;
        font-size: 12px;
        color: #273142;
    }


    /* ---------------------------------------------------------
    SECTIONS
    --------------------------------------------------------- */

    .so-section {
        margin-bottom: 24px;
    }

    .so-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .so-section-heading h5 {
        margin: 0 0 3px;
        font-size: 14px;
        font-weight: 700;
        color: #263142;
    }

    .so-section-heading span {
        font-size: 11px;
        color: #8b95a5;
    }

    .so-item-count {
        padding: 5px 9px;
        border-radius: 6px;
        background: #f3f5f8;
        color: #657083 !important;
        font-size: 10px !important;
        font-weight: 600;
    }


    /* ---------------------------------------------------------
    ITEMS TABLE
    --------------------------------------------------------- */

    .so-items-wrapper {
        overflow-x: auto;
        border: 1px solid #edf0f4;
        border-radius: 10px;
    }

    .so-items-table {
        width: 100%;
        margin: 0;
        border-collapse: collapse;
    }

    .so-items-table thead th {
        padding: 11px 12px;
        background: #f7f9fb;
        color: #6e7888;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.6px;
        white-space: nowrap;
        border-bottom: 1px solid #edf0f4;
    }

    .so-items-table tbody td {
        padding: 14px 12px;
        font-size: 12px;
        color: #313b4b;
        border-bottom: 1px solid #f0f2f5;
        vertical-align: middle;
    }

    .so-items-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .so-col-number {
        width: 45px;
    }

    .so-item-name {
        font-weight: 600;
        color: #263142;
    }

    .so-item-description {
        display: block;
        margin-top: 3px;
        color: #8b95a5;
        font-size: 10px;
    }

    .so-items-table .text-end {
        text-align: right;
    }

    .so-items-table .text-center {
        text-align: center;
    }


    /* ---------------------------------------------------------
    LOWER AREA
    --------------------------------------------------------- */

    .so-bottom-grid {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        margin-top: 4px;
    }

    .so-notes-card {
        padding-top: 5px;
    }

    .so-section-mini-title {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #394455;
    }

    .so-section-mini-title i {
        color: #f06324;
        font-size: 15px;
    }

    .so-notes-content {
        max-width: 620px;
        color: #687385;
        font-size: 11px;
        line-height: 1.7;
        white-space: pre-line;
    }


    /* ---------------------------------------------------------
    TOTALS
    --------------------------------------------------------- */

    .so-total-card {
        padding: 16px 18px;
        background: #f9fafb;
        border: 1px solid #edf0f4;
        border-radius: 12px;
    }

    .so-total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 5px 0;
        font-size: 11px;
        color: #677285;
    }

    .so-total-row strong {
        color: #344054;
        font-weight: 600;
    }

    .so-total-divider {
        height: 1px;
        background: #dfe3e8;
        margin: 9px 0;
    }

    .so-grand-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3px 0 9px;
    }

    .so-grand-total span {
        font-size: 12px;
        font-weight: 700;
        color: #263142;
    }

    .so-grand-total strong {
        font-size: 18px;
        font-weight: 800;
        color: #263142;
    }

    .so-paid-row {
        margin-top: 2px;
    }

    .so-paid-row i {
        color: #15945a;
        margin-right: 4px;
    }

    .so-paid-row strong {
        color: #15945a;
    }

    .so-balance-row {
        margin-top: 3px;
        padding-top: 9px;
        border-top: 1px dashed #d9dee5;
    }

    .so-balance-row strong {
        color: #dc3545;
    }


    /* ---------------------------------------------------------
    PAYMENT BANNER
    --------------------------------------------------------- */

    .so-payment-banner {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 22px;
        padding: 13px 15px;
        border: 1px solid #ffe1d2;
        background: #fffaf7;
        border-radius: 11px;
    }

    .so-payment-icon {
        width: 37px;
        height: 37px;
        flex: 0 0 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #fff0e8;
        color: #f06324;
        font-size: 17px;
    }

    .so-payment-text {
        flex: 1;
    }

    .so-payment-text strong {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        color: #303b4d;
    }

    .so-payment-text span {
        display: block;
        font-size: 10px;
        color: #7c8796;
    }

    .so-payment-amount {
        text-align: right;
    }

    .so-payment-amount small {
        display: block;
        font-size: 9px;
        color: #8993a3;
        margin-bottom: 2px;
    }

    .so-payment-amount strong {
        font-size: 14px;
        color: #dc3545;
    }


    /* ---------------------------------------------------------
    FOOTER
    --------------------------------------------------------- */

    .so-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 15px 26px;
        background: #ffffff;
        border-top: 1px solid #edf0f4;
    }

    .so-footer-left,
    .so-footer-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .so-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 36px;
        padding: 8px 13px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 600;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .so-btn i {
        font-size: 14px;
    }

    .so-btn-light {
        background: #f3f5f7;
        border-color: #f3f5f7;
        color: #586476;
    }

    .so-btn-light:hover {
        background: #e9edf1;
    }

    .so-btn-outline {
        background: #ffffff;
        border-color: #dce1e7;
        color: #4f5b6d;
    }

    .so-btn-outline:hover {
        border-color: #f06324;
        color: #f06324;
        background: #fffaf7;
    }

    .so-btn-payment {
        background: #ffffff;
        border-color: #42a88a;
        color: #21856b;
    }

    .so-btn-payment:hover {
        background: #eefaf6;
    }

    .so-btn-primary {
        background: #f06324;
        border-color: #f06324;
        color: #ffffff;
        box-shadow: 0 4px 10px rgba(240, 99, 36, 0.16);
    }

    .so-btn-primary:hover {
        background: #dc571d;
        border-color: #dc571d;
        color: #ffffff;
    }


    /* ---------------------------------------------------------
    RESPONSIVE
    --------------------------------------------------------- */

    @media (max-width: 991px) {

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

        .so-bottom-grid {
            grid-template-columns: 1fr;
        }

        .so-modal-footer {
            flex-direction: column;
            align-items: stretch;
        }

        .so-footer-left,
        .so-footer-right {
            justify-content: flex-end;
            flex-wrap: wrap;
        }
    }


    @media (max-width: 767px) {

        .so-modal-header {
            padding: 17px;
        }

        .so-modal-body {
            padding: 17px;
        }

        .so-modal-footer {
            padding: 13px 17px;
        }

        .so-info-grid {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .so-info-card {
            padding: 10px;
        }

        .so-info-icon {
            width: 30px;
            height: 30px;
            flex-basis: 30px;
            font-size: 14px;
        }

        .so-header-right {
            gap: 7px;
        }

        .so-status-badge {
            min-width: auto;
            padding: 6px 9px;
        }

        .so-bottom-grid {
            gap: 18px;
        }

        .so-payment-banner {
            align-items: flex-start;
        }

        .so-payment-amount {
            display: none;
        }

        .so-footer-right {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .so-footer-left {
            width: 100%;
        }

        .so-footer-left .so-btn {
            width: 100%;
        }

        .so-footer-right .so-btn {
            width: 100%;
        }
    }

    /* ==========================================================
    SALES ORDER MODAL POSITION
    ========================================================== */

    #salesOrderModal .modal-dialog {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    #salesOrderModal .modal-dialog.modal-dialog-centered {
        min-height: auto;
    }
/* =========================================================
   SALES ORDER MODAL POSITION & SIZE
   ========================================================= */

.so-dialog {
    max-width: 900px !important;
    margin: 90px auto 25px !important;
}
    /* =========================================================
   SALES ORDER PAYMENT BANNER
   ========================================================= */

    .so-payment-banner {
        transition:
            background-color .2s ease,
            border-color .2s ease,
            color .2s ease;
    }


    /* =========================================================
    PENDING
    ========================================================= */

    .so-payment-banner.payment-pending {

        background: #fff8f3;

        border: 1px solid #ffd8c2;

    }


    .so-payment-banner.payment-pending
    .so-payment-icon {

        background: #ffede3;

        color: #f26522;

    }


    .so-payment-banner.payment-pending
    .so-payment-text strong {

        color: #b84d17;

    }


    .so-payment-banner.payment-pending
    .so-payment-amount strong {

        color: #f26522;

    }


    /* =========================================================
    PARTIALLY PAID
    ========================================================= */

    .so-payment-banner.payment-partial {

        background: #fffaf0;

        border: 1px solid #f2dfae;

    }


    .so-payment-banner.payment-partial
    .so-payment-icon {

        background: #fff1c9;

        color: #a56a00;

    }


    .so-payment-banner.payment-partial
    .so-payment-text strong {

        color: #8a5b00;

    }


    .so-payment-banner.payment-partial
    .so-payment-amount strong {

        color: #a56a00;

    }


    /* =========================================================
    FULLY PAID
    ========================================================= */

    .so-payment-banner.payment-complete {

        background: #f1fbf5;

        border: 1px solid #ccebd9;

    }


    .so-payment-banner.payment-complete
    .so-payment-icon {

        background: #ddf5e7;

        color: #16834b;

    }


    .so-payment-banner.payment-complete
    .so-payment-text strong {

        color: #14733f;

    }


    .so-payment-banner.payment-complete
    .so-payment-amount strong {

        color: #16834b;

    }
    /* =========================================================
   SALES ORDER STATUS BADGES
   ========================================================= */
    .so-status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 105px;
        padding: 7px 12px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
    }
    .so-status-badge i {
        font-size: 14px;
    }
    /* Draft */
    .so-status-draft {
        background: #f1f3f5;
        color: #495057;
    }
    /* Pending */
    .so-status-pending {
        background: #fff0e8;
        color: #f26522;
    }
    /* Partially Paid */
    .so-status-partial {
        background: #fff7df;
        color: #a56a00;
    }
    /* Paid */
    .so-status-paid {
        background: #e8f8ef;
        color: #16834b;
    }
    /* Cancelled */
    .so-status-cancelled {
        background: #ffe9e9;
        color: #d93030;
    }

    /* =========================================================
    PAYMENT STATUS - COMPANY BRAND COLOR
    ========================================================= */

    .payment-status-brand {
        color: #ffffff !important;
        border: none !important;
    }

    /* Pixel Crafters */
    .company-pixel .payment-status-brand {
        background: #f06324 !important;
    }

    /* Qentora Technologies */
    .company-qentora .payment-status-brand {
        background: linear-gradient(
            135deg,
            #f89a21 0%,
            #ee2f2e 100%
        ) !important;
    }

    /* ==========================================================
    DASHBOARD SALES PERIOD SELECTOR
    ========================================================== */
    .sales-period-selector {
        position: relative;
    }
    /* ----------------------------------------------------------
    BUTTON
    ---------------------------------------------------------- */

    .sales-period-button {
        min-width: 145px;
        height: 38px;

        padding: 0 13px;

        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;

        border: 1px solid #e4e7ec;
        border-radius: 9px;

        background: #ffffff;

        color: #475467;

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

        cursor: pointer;

        transition:
            border-color .2s ease,
            box-shadow .2s ease,
            background .2s ease;
    }


    .sales-period-button:hover {
        border-color: var(--company-primary);
        background: #ffffff;
    }


    .sales-period-button:focus {
        outline: none;

        border-color: var(--company-primary);

        box-shadow:
            0 0 0 3px
            color-mix(
                in srgb,
                var(--company-primary) 12%,
                transparent
            );
    }


    .sales-period-button i {
        font-size: 15px;

        color: #667085;

        transition:
            transform .2s ease;
    }


    .sales-period-selector.open
    .sales-period-button i {
        transform: rotate(180deg);
    }


    /* ----------------------------------------------------------
    DROPDOWN MENU
    ---------------------------------------------------------- */

    .sales-period-menu {
        position: absolute;

        top: calc(100% + 6px);
        right: 0;

        width: 175px;

        padding: 5px;

        background: #ffffff;

        border: 1px solid #eaecf0;

        border-radius: 10px;

        box-shadow:
            0 12px 30px rgba(15, 23, 42, .10);

        z-index: 1000;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-5px);

        transition:
            opacity .15s ease,
            transform .15s ease,
            visibility .15s ease;
    }


    .sales-period-selector.open
    .sales-period-menu {
        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }


    /* ----------------------------------------------------------
    DROPDOWN OPTIONS
    ---------------------------------------------------------- */

    .sales-period-menu a {
        display: flex;

        align-items: center;

        width: 100%;

        padding: 9px 11px;

        border-radius: 7px;

        text-decoration: none;

        color: #475467;

        font-size: 11px;

        font-weight: 500;

        transition:
            background .15s ease,
            color .15s ease;
    }


    .sales-period-menu a:hover {
        background: color-mix(
            in srgb,
            var(--company-primary) 8%,
            white
        );

        color: var(--company-primary);
    }


    /* ----------------------------------------------------------
    ACTIVE OPTION
    ---------------------------------------------------------- */

    .sales-period-menu a.active {
        background: color-mix(
            in srgb,
            var(--company-primary) 10%,
            white
        );

        color: var(--company-primary);

        font-weight: 600;
    }


    /* ----------------------------------------------------------
    MOBILE
    ---------------------------------------------------------- */

    @media (max-width: 576px) {

        .sales-period-button {
            min-width: 135px;
            height: 36px;
            font-size: 10px;
        }

        .sales-period-menu {
            width: 165px;
        }

    }

    /* =========================================================
   DASHBOARD - BOTTOM CARDS
========================================================= */

.dashboard-bottom-card {
    border: 1px solid rgba(15, 23, 42, 0.055);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045);
    overflow: hidden;
    height: 100%;
}


/* HEADER */

.dashboard-bottom-header {
    padding: 20px 22px 17px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f5 !important;
}

.dashboard-bottom-header h5 {
    font-size: 16px;
    font-weight: 700;
    color: #172033;
}

.dashboard-bottom-header small {
    font-size: 11px;
    color: #98a2b3;
}


/* VIEW ALL */

.dashboard-view-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color, #f06324);
    text-decoration: none;
}

.dashboard-view-link:hover {
    opacity: .75;
}

.dashboard-view-link i {
    font-size: 14px;
}


/* LIST */

.dashboard-list {
    width: 100%;
}


/* LIST ITEM */

.dashboard-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f3f5;
    transition: background .2s ease;
}

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

.dashboard-list-item:hover {
    background: #fafbfc;
}


/* ICON */

.dashboard-list-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-list-icon i {
    font-size: 17px;
}


/* PAYMENT ICON */

.payment-icon {
    background: rgba(34, 197, 94, .09);
    color: #16a34a;
}


/* CONTENT */

.dashboard-list-content {
    min-width: 0;
    flex: 1;
}

.dashboard-list-content strong {
    display: block;
    font-size: 12px;
    font-weight: 650;
    color: #172033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-list-content small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #98a2b3;
}


/* VALUE */

.dashboard-list-value {
    text-align: right;
    flex-shrink: 0;
}

.dashboard-list-value strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #172033;
}

.dashboard-list-value small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    color: #98a2b3;
}


/* RANKING */

.dashboard-ranking {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f6f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #667085;
}


/* DOCUMENT ITEM */

.dashboard-document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f3f5;
    text-decoration: none;
    transition: background .2s ease;
}

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

.dashboard-document-item:hover {
    background: #fafbfc;
}


/* DOCUMENT ICON */

.dashboard-document-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-document-icon i {
    font-size: 17px;
}


/* INVOICE */

.invoice-document {
    background: rgba(240, 99, 36, .09);
    color: #f06324;
}


/* SALES ORDER */

.order-document {
    background: rgba(59, 130, 246, .09);
    color: #3b82f6;
}


/* QUOTATION */

.quote-document {
    background: rgba(139, 92, 246, .09);
    color: #8b5cf6;
}


/* DOCUMENT ARROW */

.dashboard-document-arrow {
    font-size: 15px;
    color: #98a2b3;
    transition: transform .2s ease;
}

.dashboard-document-item:hover .dashboard-document-arrow {
    transform: translateX(3px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .dashboard-bottom-card {
        margin-bottom: 0;
    }

}


@media (max-width: 575.98px) {

    .dashboard-bottom-header {
        padding: 17px 16px 14px !important;
    }

    .dashboard-list-item,
    .dashboard-document-item {
        padding: 13px 16px;
    }

    .dashboard-list-value strong {
        font-size: 10px;
    }

}

/* =========================================================
   NOTIFICATIONS
========================================================= */

.notification-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-filters a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

.notification-filters a:hover {
    border-color: var(--primary-color, #f06324);
    color: var(--primary-color, #f06324);
}

.notification-filters a.active {
    background: var(--primary-color, #f06324);
    border-color: var(--primary-color, #f06324);
    color: #ffffff;
}

.notification-filter-count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
}


/* SUMMARY */

.notification-count-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
}

.notification-count-summary i {
    font-size: 16px;
}


/* LIST */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* CARD */

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.055);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(15,23,42,.035);
    transition: all .2s ease;
}

.notification-card:hover {
    box-shadow: 0 8px 25px rgba(15,23,42,.06);
    transform: translateY(-1px);
}

.notification-card.unread {
    border-left: 3px solid var(--primary-color, #f06324);
    background: #fffdfb;
}


/* ICON */

.notification-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon i {
    font-size: 19px;
}


/* TYPES */

.notification-type-primary {
    background: rgba(59,130,246,.10);
    color: #3b82f6;
}

.notification-type-success {
    background: rgba(34,197,94,.10);
    color: #16a34a;
}

.notification-type-danger {
    background: rgba(239,68,68,.10);
    color: #dc2626;
}

.notification-type-warning {
    background: rgba(245,158,11,.10);
    color: #d97706;
}

.notification-type-info {
    background: rgba(14,165,233,.10);
    color: #0284c7;
}

.notification-type-purple {
    background: rgba(139,92,246,.10);
    color: #7c3aed;
}

.notification-type-orange {
    background: rgba(240,99,36,.10);
    color: #f06324;
}

.notification-type-blue {
    background: rgba(59,130,246,.10);
    color: #2563eb;
}

.notification-type-default {
    background: #f3f4f6;
    color: #667085;
}


/* BODY */

.notification-body {
    flex: 1;
    min-width: 0;
}

.notification-body h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #172033;
}

.notification-body small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #98a2b3;
}

.notification-body p {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #667085;
}

.notification-body p strong {
    color: #344054;
}


/* UNREAD DOT */

.notification-unread-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    margin-top: 5px;
}


/* FOOTER */

.notification-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
}

.notification-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    background: #ffffff;
    color: #667085;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.notification-btn:hover {
    color: var(--primary-color, #f06324);
    border-color: var(--primary-color, #f06324);
}


/* EMPTY */

.notification-empty {
    text-align: center;
    padding: 60px 20px;
}

.notification-empty-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    border-radius: 15px;
    background: #f5f6f8;
    color: #98a2b3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-empty-icon i {
    font-size: 24px;
}

.notification-empty h5 {
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
}

.notification-empty p {
    margin: 0;
    color: #98a2b3;
    font-size: 12px;
}


/* MOBILE */

@media (max-width: 575px) {

    .notification-card {
        padding: 15px;
        gap: 11px;
    }

    .notification-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .notification-icon i {
        font-size: 16px;
    }

    .notification-filters {
        overflow-x: auto;
        padding-bottom: 3px;
    }

}

    /* =========================================================
    CUSTOMER COMPANY IDENTITY
    ========================================================= */

    .customer-company-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border: 1px solid;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .customer-company-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex: 0 0 7px;
    }
    .customer-code-badge {
        display: inline-flex;
        align-items: center;
        padding: 5px 9px;
        border: 1px solid;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2px;
    }

    /* Mobile */
    @media (max-width: 575.98px) {
        .customer-company-badge {
            display: none;
        }
    }
    /* ==========================================================
    CUSTOMER FORM - COMPANY BRAND COLOR
    ========================================================== */
    .customer-form-page .form-control:focus,
    .customer-form-page .form-select:focus {
        border-color: var(--company-primary) !important;
        box-shadow:
            0 0 0 3px var(--company-primary-soft) !important;

        outline: none !important;
    }
    /* =========================================================
    COMPANY-BRANDED FORM CONTROLS
    ========================================================= */
    .customer-form-page .form-control,
    .customer-form-page .form-select {
        transition:
            border-color .2s ease,
            box-shadow .2s ease;
    }
    /* Focus */
    .customer-form-page .form-control:focus,
    .customer-form-page .form-select:focus {
        border-color:
            var(--company-primary) !important;
        box-shadow:
            0 0 0 3px
            var(--company-primary-soft) !important;
    }
    /* Form check */
    .customer-form-page .form-check-input {
        accent-color:
            var(--company-primary);
    }
    .customer-form-page .form-check-input:checked {
        background-color:
            var(--company-primary) !important;
        border-color:
            var(--company-primary) !important;
    }
    /* Save button */
    .customer-form-page .save-customer-btn {
        background-color:
            var(--company-primary) !important;
        border-color:
            var(--company-primary) !important;
        color: #ffffff !important;
    }
    .customer-form-page .save-customer-btn:hover {
        filter: brightness(.95);
    }

    /* ==========================================================
    CUSTOMER FORM - CUSTOM COMPANY DROPDOWNS
    ========================================================== */
    .customer-form-page .custom-select-wrapper {
        position: relative;
        width: 100%;
    }
    .customer-form-page .custom-select-trigger {
        width: 100%;
        min-height: 42px;
        padding: 10px 40px 10px 13px;
        border: 1px solid #d0d5dd;
        border-radius: 7px;
        background: #ffffff;
        color: #344054;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
        position: relative;
        transition: all .2s ease;
    }
    .customer-form-page .custom-select-trigger:hover {
        border-color: var(--company-primary);
    }
    .customer-form-page .custom-select-trigger.is-open {
        border-color: var(--company-primary);
        box-shadow: 0 0 0 3px var(--company-primary-soft);
    }
    .customer-form-page .custom-select-arrow {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        transition: transform .2s ease;
    }
    .customer-form-page .custom-select-trigger.is-open .custom-select-arrow {
        transform: translateY(-50%) rotate(180deg);
    }
    .customer-form-page .custom-select-options {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 5px);
        z-index: 1050;
        display: none;
        padding: 5px;
        background: #ffffff;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(15,23,42,.12);
        max-height: 240px;
        overflow-y: auto;
    }
    .customer-form-page .custom-select-wrapper.is-open .custom-select-options {
        display: block;
    }
    .customer-form-page .custom-select-option {
        padding: 9px 11px;
        border-radius: 6px;
        font-size: 13px;
        color: #344054;
        cursor: pointer;
        transition: all .15s ease;
    }
    .customer-form-page .custom-select-option:hover {
        background: var(--company-primary-soft);
        color: var(--company-primary);
    }
    .customer-form-page .custom-select-option.is-selected {
        background: var(--company-primary) !important;
        color: #ffffff !important;
        font-weight: 600;
    }
    .customer-form-page select.customer-native-select {
        display: none !important;
    }

    /* ==========================================================
    CUSTOMER FORM - DROPDOWN ABOVE ALL SECTIONS
    ========================================================== */

    .customer-form-page .customer-card {
        overflow: visible !important;
    }

    .customer-form-page .customer-card:has(
        .custom-select-wrapper.is-open
    ) {
        position: relative;
        z-index: 9998 !important;
    }

    .customer-form-page .custom-select-wrapper {
        position: relative;
        z-index: 9999 !important;
    }

    .customer-form-page .custom-select-wrapper.is-open {
        z-index: 99999 !important;
    }

    .customer-form-page .custom-select-options {
        z-index: 100000 !important;
    }
    /* ==========================================================
    MAIL CENTER — COMPANY BRANDING
    ========================================================== */
    .mail-center-app .email-folder {
        transition: all 0.2s ease;
    }
    /* Active folder */
    .mail-center-app .email-folder.active {
        color: var(--mail-primary) !important;
        background: color-mix(
            in srgb,
            var(--mail-primary) 9%,
            #ffffff
        ) !important;
        border-left: 3px solid var(--mail-primary);
    }
    /* Active folder icon */
    .mail-center-app .email-folder.active i {
        color: var(--mail-primary) !important;
    }
    /* Active folder text */
    .mail-center-app .email-folder.active span:not(.badge) {
        color: var(--mail-primary) !important;
        font-weight: 600;
    }
    /* ==========================================================
    MAIL FOLDER BADGES
    ========================================================== */
    .mail-center-app .email-folder .badge {
        background: var(--mail-secondary) !important;
        color: #000000 !important;
        border: none;
        font-weight: 700;
    }
    /* ==========================================================
    EMAIL AVATARS
    ========================================================== */
    .mail-center-app .email-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        background: var(--mail-primary) !important;
        color: #ffffff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
    }
    /* Profile image */
    .mail-center-app .email-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    /* ==========================================================
    UNREAD EMAIL
    ========================================================== */
    .mail-center-app .email-item.email-unread {
        position: relative;
        background: color-mix(
            in srgb,
            var(--mail-primary) 6%,
            #ffffff
        ) !important;
        border-left: 3px solid var(--mail-primary);
        font-weight: 600;
    }
    /* Unread sender */
    .mail-center-app .email-item.email-unread h6 {
        color: #111827;
        font-weight: 700;
    }
    /* Unread subject */
    .mail-center-app .email-item.email-unread p {
        color: #344054;
        font-weight: 600;
    }
    /* Unread indicator */
    .mail-center-app .email-item.email-unread::after {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--mail-primary);
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
    }
    /* Selected unread/read email */
    .mail-center-app .email-item.active {
        border-left-color: var(--mail-primary);
    }
    /* ==========================================================
    EMAIL LIST HOVER
    ========================================================== */
    .mail-center-app .email-item:hover {
        background: color-mix(
            in srgb,
            var(--mail-primary) 5%,
            #ffffff
        );
    }
    /* ==========================================================
    EMAIL SUBJECT / SENDER
    ========================================================== */
    .mail-center-app .email-item h6 {
        margin-bottom: 3px;
    }
    .mail-center-app .email-item p {
        margin-bottom: 0;
    }
    /* ==========================================================
    UNREAD DATE
    ========================================================== */
    .mail-center-app .email-item.email-unread small {
        color: var(--mail-primary);
        font-weight: 700;
    }
    /* ==========================================================
    MAIL CENTER — AVATAR
    ========================================================== */
    .mail-center-app .email-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        background: var(--mail-primary) !important;
        color: #ffffff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
        position: relative;
    }
    /* Avatar letter */
    .mail-center-app .email-avatar .avatar-letter {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff !important;
        font-weight: 700 !important;
    }
    /* Avatar image */
    .mail-center-app .email-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        z-index: 2;
    }
    /* ==========================================================
    MAIL CENTER — FOLDER BADGES
    ========================================================== */
    .mail-center-app .email-folder .badge {
        background: var(--mail-secondary) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border: none !important;
    }

    .expense-status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 82px;
        padding: 6px 10px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 600;
        color: #ffffff !important;
    }
    /* =========================================================
    CUSTOMER TRANSACTIONS
    ========================================================= */
    .transaction-type {
        display: inline-flex;
        align-items: center;
        padding: 5px 9px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }
    /* QUOTATION */
    .transaction-type-quotation {
        background:
            var(--customer-primary-light);
        color:
            var(--customer-secondary);
        border:
            1px solid
            var(--customer-primary-border);
    }
    /* SALES ORDER */
    .transaction-type-sales {
        background:
            color-mix(
                in srgb,
                var(--customer-secondary) 9%,
                white
            );
        color:
            var(--customer-secondary);
        border:
            1px solid
            color-mix(
                in srgb,
                var(--customer-secondary) 25%,
                white
            );
    }

    /* INVOICE */
    .transaction-type-invoice {
        background:
            var(--customer-primary-light);
        color:
            var(--customer-primary);
        border:
            1px solid
            var(--customer-primary-border);
    }


    /* PAYMENT */
    .transaction-type-payment {
        background:
            color-mix(
                in srgb,
                var(--customer-primary) 12%,
                white
            );
        color:
            var(--customer-secondary);
        border:
            1px solid
            var(--customer-primary-border);
    }
    /* DEFAULT */
    .transaction-type-default {
        background: #f4f5f6;
        color: #667085;
    }
    .transaction-reference {
        color:
            var(--customer-secondary);
        font-size: 13px;
    }
    .transaction-amount {
        color:
            var(--customer-secondary);
        font-weight: 600;
        white-space: nowrap;
    }
    .transaction-status {
        font-size: 12px;
        font-weight: 600;
        color: #667085;
    }
    #transactions .table thead th {
        background:
            var(--customer-secondary);
        color: #ffffff;
        border: 0;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    #transactions .table tbody td {
        padding:
            13px 12px;
        vertical-align:
            middle;
        border-color:
            #edf0f2;
    }
    #transactions .table tbody tr {
        transition:
            background .2s ease;
    }
    #transactions .table tbody tr:hover {
        background:
            var(--customer-primary-light);
    }
    #transactions .btn-light {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border:
            1px solid #e5e7eb;
        color:
            var(--customer-secondary);
        background:
            #ffffff;
    }
    #transactions .btn-light:hover {
        border-color:
            var(--customer-primary);
        color:
            var(--customer-primary);
        background:
            var(--customer-primary-light);
    }

    /* =========================================================
    CUSTOMER TRANSACTION PAGINATION
    ========================================================= */
    .customer-transactions-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 16px 0 4px;
        border-top: 1px solid #edf0f2;
        margin-top: 4px;
    }
    .transaction-results {
        font-size: 12px;
        color: #667085;
    }
    .transaction-results strong {
        color:
            var(--customer-secondary);
        font-weight: 600;
    }
    .transaction-pagination {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .transaction-page-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e6ea;
        border-radius: 6px;
        background: #ffffff;
        color:
            var(--customer-secondary);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition:
            all .2s ease;
    }
    .transaction-page-btn:hover {
        border-color:
            var(--customer-primary);
        color:
            var(--customer-primary);
        background:
            var(--customer-primary-light);
    }
    .transaction-page-btn.active {
        background:
            var(--customer-primary);
        border-color:
            var(--customer-primary);
        color: #ffffff;
    }
    .transaction-page-btn.disabled {
        opacity: .45;
        cursor: not-allowed;
        pointer-events: none;
    }
    @media (max-width: 767.98px) {
        .customer-transactions-footer {
            flex-direction: column;
            align-items: flex-start;
        }
        .transaction-pagination {
            width: 100%;
            justify-content: flex-start;
            overflow-x: auto;
            padding-bottom: 3px;
        }
    }
    /* =========================================================
    CUSTOMER TRANSACTIONS
    ========================================================= */

    .customer-transactions-table {

        margin-bottom: 0;

    }


    /* ---------------------------------------------------------
    TABLE HEADER
    --------------------------------------------------------- */

    .customer-transactions-table thead th {

        background:
            var(--customer-secondary) !important;

        color:
            #ffffff !important;

        font-size: 12px;

        font-weight: 600;

        border: none !important;

        white-space: nowrap;

        padding:
            12px 12px;

    }


    /* ---------------------------------------------------------
    TABLE BODY
    --------------------------------------------------------- */

    .customer-transactions-table tbody td {

        padding:
            13px 12px;

        vertical-align:
            middle;

        border-color:
            #edf0f2;

    }


    .customer-transactions-table tbody tr {

        transition:
            background .2s ease;

    }


    .customer-transactions-table tbody tr:hover {

        background:
            var(--customer-primary-light);

    }


    /* ---------------------------------------------------------
    TRANSACTION TYPE
    --------------------------------------------------------- */

    .transaction-type,
    .transaction-type-link {

        display:
            inline-flex;

        align-items:
            center;

        padding:
            5px 10px;

        border-radius:
            6px;

        font-size:
            11px;

        font-weight:
            700;

        line-height:
            1;

        white-space:
            nowrap;

        text-decoration:
            none;

        transition:
            all .2s ease;

    }


    /* QUOTATION */

    .transaction-type-quotation {

        background:
            var(--customer-primary-light);

        color:
            var(--customer-secondary);

        border:
            1px solid
            var(--customer-primary-border);

    }


    /* SALES ORDER */

    .transaction-type-sales {

        background:
            color-mix(
                in srgb,
                var(--customer-secondary) 8%,
                white
            );

        color:
            var(--customer-secondary);

        border:
            1px solid
            color-mix(
                in srgb,
                var(--customer-secondary) 20%,
                white
            );

    }


    /* INVOICE */

    .transaction-type-invoice {

        background:
            var(--customer-primary-light);

        color:
            var(--customer-primary);

        border:
            1px solid
            var(--customer-primary-border);

    }


    /* PAYMENT */

    .transaction-type-payment {

        background:
            color-mix(
                in srgb,
                var(--customer-primary) 10%,
                white
            );

        color:
            var(--customer-secondary);

        border:
            1px solid
            var(--customer-primary-border);

    }


    /* DEFAULT */

    .transaction-type-default {

        background:
            #f4f5f6;

        color:
            #667085;

        border:
            1px solid
            #e5e7eb;

    }


    /* ---------------------------------------------------------
    CLICKABLE TYPE HOVER
    --------------------------------------------------------- */

    .transaction-type-link:hover {

        transform:
            translateY(-1px);

        box-shadow:
            0 3px 8px rgba(0,0,0,.08);

        text-decoration:
            none;

    }


    .transaction-type-quotation:hover,
    .transaction-type-invoice:hover {

        color:
            var(--customer-primary);

        border-color:
            var(--customer-primary);

    }


    .transaction-type-sales:hover,
    .transaction-type-payment:hover {

        color:
            var(--customer-secondary);

        border-color:
            var(--customer-secondary);

    }


    /* ---------------------------------------------------------
    REFERENCE
    --------------------------------------------------------- */

    .transaction-reference {

        color:
            var(--customer-secondary);

        font-size:
            13px;

    }


    /* ---------------------------------------------------------
    AMOUNT
    --------------------------------------------------------- */

    .transaction-amount {

        color:
            var(--customer-secondary);

        font-weight:
            600;

        white-space:
            nowrap;

    }


    /* ---------------------------------------------------------
    STATUS
    --------------------------------------------------------- */

    .transaction-status {

        font-size:
            12px;

        font-weight:
            600;

        color:
            #667085;

    }


    /* =========================================================
    TRANSACTION PAGINATION
    ========================================================= */

    .customer-transactions-footer {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            20px;

        padding:
            16px 0 4px;

        border-top:
            1px solid #edf0f2;

        margin-top:
            4px;

    }


    .transaction-results {

        font-size:
            12px;

        color:
            #667085;

    }


    .transaction-results strong {

        color:
            var(--customer-secondary);

        font-weight:
            600;

    }


    .transaction-pagination {

        display:
            flex;

        align-items:
            center;

        gap:
            5px;

    }


    .transaction-page-btn {

        min-width:
            32px;

        height:
            32px;

        padding:
            0 9px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid #e2e6ea;

        border-radius:
            6px;

        background:
            #ffffff;

        color:
            var(--customer-secondary);

        font-size:
            12px;

        font-weight:
            600;

        text-decoration:
            none;

        transition:
            all .2s ease;

    }


    .transaction-page-btn:hover {

        border-color:
            var(--customer-primary);

        color:
            var(--customer-primary);

        background:
            var(--customer-primary-light);

        text-decoration:
            none;

    }


    .transaction-page-btn.active {

        background:
            var(--customer-primary);

        border-color:
            var(--customer-primary);

        color:
            #ffffff;

    }


    .transaction-page-btn.disabled {

        opacity:
            .45;

        cursor:
            not-allowed;

        pointer-events:
            none;

    }


    /* =========================================================
    MOBILE
    ========================================================= */

    @media (max-width: 767.98px) {

        .customer-transactions-footer {

            flex-direction:
                column;

            align-items:
                flex-start;

        }


        .transaction-pagination {

            width:
                100%;

            justify-content:
                flex-start;

            overflow-x:
                auto;

            padding-bottom:
                3px;

        }

    }
    .quotation-paper{
    position:relative;
    width:100%;
    background:#ffffff;
    padding:0;
    margin:0;
}

.invoice-pdf-pattern-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 55mm;
    height: 55mm;
    overflow: hidden;
}

.invoice-pdf-pattern-corner img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   Invoice Preview - Company Color Outline Buttons
   Download PDF / Email / Print
   ========================================================= */

.invoice-action-outline {
    background: #fff !important;
    border: 1px solid var(--invoice-company-primary) !important;
    color: var(--invoice-company-primary) !important;
    transition: all 0.2s ease !important;
}

/* Icon in normal state */
.invoice-action-outline i {
    color: var(--invoice-company-primary) !important;
    transition: color 0.2s ease !important;
}

/* Hover - fill with company primary color */
.invoice-action-outline:hover {
    background: var(--invoice-company-primary) !important;
    border-color: var(--invoice-company-primary) !important;
    color: #fff !important;
}

/* Hover - icon becomes white */
.invoice-action-outline:hover i {
    color: #fff !important;
}

/* Prevent Bootstrap focus/active states from changing the appearance */
.invoice-action-outline:focus,
.invoice-action-outline:active {
    background: #fff !important;
    border-color: var(--invoice-company-primary) !important;
    color: var(--invoice-company-primary) !important;
}

/* Keep icon primary on focus/active */
.invoice-action-outline:focus i,
.invoice-action-outline:active i {
    color: var(--invoice-company-primary) !important;
}

/* When actually hovering while focused/active, hover wins */
.invoice-action-outline:hover:focus,
.invoice-action-outline:hover:active {
    background: var(--invoice-company-primary) !important;
    border-color: var(--invoice-company-primary) !important;
    color: #fff !important;
}

.invoice-action-outline:hover:focus i,
.invoice-action-outline:hover:active i {
    color: #fff !important;
}

/* =========================================================
   EDIT BUTTON
   Solid Company Primary Color
   ========================================================= */

.invoice-action-primary {
    background: var(--invoice-company-primary) !important;
    border: 1px solid var(--invoice-company-primary) !important;
    color: #fff !important;
}

.invoice-action-primary i {
    color: #fff !important;
}

.invoice-action-primary:hover,
.invoice-action-primary:focus,
.invoice-action-primary:active {
    background: var(--invoice-company-primary) !important;
    border-color: var(--invoice-company-primary) !important;
    color: #fff !important;
}

.invoice-action-primary:hover i,
.invoice-action-primary:focus i,
.invoice-action-primary:active i {
    color: #fff !important;
}


/* =========================================================
   RECORD PAYMENT
   White Button With Company Color
   ========================================================= */

.invoice-action-payment {
    background: #fff !important;
    border: 1px solid var(--invoice-company-primary) !important;
    color: var(--invoice-company-primary) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06) !important;
    transition: all .2s ease !important;
}

.invoice-action-payment i {
    color: var(--invoice-company-primary) !important;
}

.invoice-action-payment:hover {
    background: var(--invoice-company-primary) !important;
    border-color: var(--invoice-company-primary) !important;
    color: #fff !important;
}

.invoice-action-payment:hover i {
    color: #fff !important;
}

/* =========================================================
   SALES ORDER - RECORD PAYMENT
   Company Primary Color
   ========================================================= */

.so-btn-payment {
    background: #ffffff !important;
    border: 1px solid var(--company-primary) !important;
    color: var(--company-primary) !important;
}

.so-btn-payment i {
    color: var(--company-primary) !important;
}

/* Hover */
.so-btn-payment:hover {
    background: var(--company-primary) !important;
    border-color: var(--company-primary) !important;
    color: #ffffff !important;
}

.so-btn-payment:hover i {
    color: #ffffff !important;
}