/* ==========================================================================
   ERP PROFESSIONAL DATATABLE THEME
   ========================================================================== */

:root{

    /* ==========================================================================
       Brand
       ========================================================================== */

    --dt-primary: var(--app-primary);
    --dt-primary-dark: var(--app-primary-dark);
    --dt-primary-light: var(--app-primary-light);

    /* ==========================================================================
       Text
       ========================================================================== */

    --dt-text: var(--app-text);
    --dt-text-dark: var(--app-text-dark);
    --dt-text-light: var(--app-text-light);
    --dt-text-muted: var(--app-text-muted);

    /* ==========================================================================
       Background
       ========================================================================== */

    --dt-white: var(--app-card-bg);

    --dt-header-bg: var(--app-primary-100);
    --dt-header-text: var(--app-primary-700);

    --dt-row-hover: var(--app-primary-50);
    --dt-row-zebra: #fbfbfb;

    /* ==========================================================================
       Borders
       ========================================================================== */

    --dt-border: var(--app-border);
    --dt-border-light: var(--app-border-light);

    /* ==========================================================================
       Pagination
       ========================================================================== */

    --dt-page-active: var(--app-primary);
    --dt-page-hover: var(--app-primary-50);

    /* ==========================================================================
       Radius
       ========================================================================== */

    --dt-radius-sm: var(--app-radius-sm);
    --dt-radius-md: var(--app-radius-md);
    --dt-radius-lg: var(--app-radius-lg);
    --dt-radius-pill: var(--app-radius-pill);

    /* ==========================================================================
       Heights
       ========================================================================== */

    --dt-btn-height:25px;
    --dt-input-height:40px;
    --dt-select-height:30px;
    --dt-page-size:34px;

    /* ==========================================================================
       Font Sizes
       ========================================================================== */

    --dt-font-xs:10px;
    --dt-font-sm:11px;
    --dt-font-md:12px;
    --dt-font-lg:13px;

    /* ==========================================================================
       Shadows
       ========================================================================== */

    --dt-focus-shadow:0 0 0 .15rem var(--app-focus-ring);
    --dt-hover-shadow:var(--app-shadow);

    /* ==========================================================================
       Animation
       ========================================================================== */

    --dt-transition:var(--app-transition);

    --dt-control-height:30px;

    /* ==========================================
       Component Colors
    ========================================== */

    --dt-btn-text: #ffffff;

    --dt-btn-bg: var(--dt-primary);

    --dt-btn-hover: var(--dt-primary-dark);

    --dt-input-bg: var(--dt-white);

    --dt-input-text: var(--dt-text);

    --dt-input-placeholder: var(--dt-text-muted);

    --dt-table-bg: var(--dt-white);

    --dt-table-text: var(--dt-text);

    --dt-header-bg: var(--app-primary-100);

    --dt-header-text: var(--app-primary-700);

    --dt-link: var(--dt-primary);

    --dt-link-hover: var(--dt-primary-dark);

    --dt-disabled: #9ca3af;

    --dt-input-bg: var(--dt-white);

    --dt-input-text: var(--dt-text);

    --dt-input-border: var(--dt-border);

    --dt-input-focus: var(--dt-primary);

    --dt-input-placeholder: var(--dt-text-muted);


    /* ==========================================================================
   Toolbar
   ========================================================================== */

    --dt-toolbar-bg: var(--dt-white);

    --dt-toolbar-text: var(--dt-text-light);

    --dt-toolbar-border: var(--dt-border);

    --dt-toolbar-hover-bg: var(--dt-primary);

    --dt-toolbar-hover-text: var(--dt-btn-text);

    --dt-toolbar-hover-border: var(--dt-primary-dark);

    --dt-toolbar-shadow: var(--dt-hover-shadow);

    --dt-toolbar-font-size: var(--dt-font-xs);

    --dt-control-height-sm: 30px;

}



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

.dt-transition{

    transition:
        background-color var(--dt-transition),
        color var(--dt-transition),
        border-color var(--dt-transition),
        box-shadow var(--dt-transition),
        transform var(--dt-transition);

}

.dt-control{

    height:var(--dt-input-height) !important;

    background:var(--dt-input-bg);

    color:var(--dt-input-text);

    border:1px solid var(--dt-input-border);

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

    font-size:var(--dt-font-xs);

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

}

.dt-control::placeholder{

    color:var(--dt-input-placeholder);

}

.dt-control:focus{

    border-color:var(--dt-input-focus);

    box-shadow:var(--dt-focus-shadow);

    outline:none;

}

/* ==========================================================================
   WRAPPER
   ========================================================================== */

.dataTables_wrapper{

    color:var(--dt-text);

    font-size:var(--dt-font-lg);

}

.dataTables_wrapper .row{

    margin-bottom:16px;

}

div.dataTables_wrapper div.dataTables_filter input{

    display:inline-block;

    width:auto;

    margin-left:.5em;

    line-height:28px;

    background:var(--dt-input-bg);

    color:var(--dt-input-text);

    border:1px solid var(--dt-input-border);

    transition:var(--dt-transition);

}


/* ==========================================================================
   SEARCH
   ========================================================================== */

.dataTables_filter{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.dataTables_filter label{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

}

.dataTables_filter input{

    width:220px !important;

    height:var(--dt-input-height);

    padding:5px 10px;

    background:var(--dt-input-bg);

    color:var(--dt-input-text);

    border:1px solid var(--dt-input-border);

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

    font-size:var(--dt-font-xs);

    transition:
        border-color var(--dt-transition),
        box-shadow var(--dt-transition),
        background-color var(--dt-transition);

}

.dataTables_filter input::placeholder{

    color:var(--dt-input-placeholder);

}

.dataTables_filter input:focus{

    border-color:var(--dt-input-focus);

    box-shadow:var(--dt-focus-shadow);

    outline:none;

}

/* ==========================================================================
   TOOLBAR
   ========================================================================== */

.dt-buttons{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:4px;

}

.dt-toolbar-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:var(--dt-control-height-sm);

    padding:5px 10px !important;

    background:var(--dt-toolbar-bg) !important;

    color:var(--dt-toolbar-text) !important;

    border:1px solid var(--dt-toolbar-border) !important;

    border-radius:var(--dt-radius-sm) !important;

    font-size:var(--dt-toolbar-font-size);

    transition:var(--dt-transition);

}

.dt-toolbar-btn:hover{

    background:var(--dt-toolbar-hover-bg) !important;

    color:var(--dt-toolbar-hover-text) !important;

    border-color:var(--dt-toolbar-hover-border) !important;

    transform:translateY(-2px);

    box-shadow:var(--dt-toolbar-shadow);

}

.dt-toolbar-btn:focus{

    outline:none;

    box-shadow:var(--dt-focus-shadow);

}

/* ==========================================================================
   SEARCH
   ========================================================================== */

.dataTables_filter{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.dataTables_filter label{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

}

.dataTables_filter input{

    width:220px !important;

    height:var(--dt-control-height-sm);

    padding:0 10px;

    background:var(--dt-input-bg);

    color:var(--dt-input-text);

    border:1px solid var(--dt-input-border);

    border-radius:var(--dt-radius-sm);

    font-size:var(--dt-font-xs);

    transition:var(--dt-transition);

}

.dataTables_filter input::placeholder{

    color:var(--dt-input-placeholder);

}

.dataTables_filter input:focus{

    border-color:var(--dt-input-focus);

    box-shadow:var(--dt-focus-shadow);

    outline:none;

}


/* ==========================================================================
   FILTERS
   ========================================================================== */

.status-filter,
.company-filter,
.date-filter{

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--dt-text);

}

.status-filter select,
.company-filter select,
.date-filter input,
.dataTables_length select{

    min-width:300px !important;

    max-width:100%;

    height:var(--dt-control-height);

    padding:0 10px;

    background:var(--dt-input-bg);

    color:var(--dt-input-text);

    border:1px solid var(--dt-input-border);

    border-radius:var(--dt-radius-sm);

    font-size:var(--dt-font-xs);

    transition:var(--dt-transition);

}

.status-filter select::placeholder,
.company-filter select::placeholder,
.date-filter input::placeholder{

    color:var(--dt-input-placeholder);

}

.status-filter select:focus,
.company-filter select:focus,
.date-filter input:focus,
.dataTables_length select:focus{

    border-color:var(--dt-input-focus);

    box-shadow:var(--dt-focus-shadow);

    outline:none;

}
/* ==========================================================================
   SELECT2
   ========================================================================== */

.status-filter .select2-container,
.company-filter .select2-container{

    width:100% !important;

    color:var(--dt-text);

}

.select2-container--default .select2-selection--single{

    height:var(--dt-control-height);

    background:var(--dt-input-bg);

    color:var(--dt-input-text);

    border:1px solid var(--dt-input-border) !important;

    border-radius:var(--dt-radius-sm) !important;

    transition:var(--dt-transition);

}

.select2-selection__rendered{

    line-height:28px !important;

    padding-left:10px !important;

    font-size:var(--dt-font-xs);

    color:var(--dt-input-text);

}

.select2-selection__arrow{

    height:28px !important;

    right:6px;

}

.select2-container--default.select2-container--focus
.select2-selection--single,

.select2-container--default.select2-container--open
.select2-selection--single{

    border-color:var(--dt-input-focus) !important;

    box-shadow:var(--dt-focus-shadow);

}

.select2-dropdown{

    background:var(--dt-white);

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

    border-radius:var(--dt-radius-sm);

    overflow:hidden;

}

.select2-results__option{

    padding:6px 10px;

    background:var(--dt-white);

    color:var(--dt-text);

    font-size:var(--dt-font-xs);

    transition:var(--dt-transition);

}

.select2-results__option--selected{

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

    color:var(--dt-primary);

    font-weight:600;

}

.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable{

    background:var(--dt-primary);

    color:var(--dt-btn-text);

}

.select2-results__option--disabled{

    color:var(--dt-disabled);

}

.select2-container *:focus{

    outline:none;

}


/* ==========================================================================
   TABLE
   ========================================================================== */

table.dataTable{

    width:100% !important;

    border-collapse:separate !important;

    border-spacing:0;

    background:var(--dt-table-bg);

    color:var(--dt-table-text);

    border:1px solid var(--dt-border-light);

    border-radius:var(--dt-radius-sm);

    overflow:hidden;

}

/* Rounded Corners */

table.dataTable thead th:first-child{

    border-top-left-radius:var(--dt-radius-sm);

}

table.dataTable thead th:last-child{

    border-top-right-radius:var(--dt-radius-sm);

}

table.dataTable thead th:first-child{

    border-bottom-left-radius:var(--dt-radius-sm);

}

table.dataTable thead th:last-child{

    border-bottom-right-radius:var(--dt-radius-sm);

}


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

table.dataTable thead th{

    background:var(--dt-primary) !important;

    color:var(--dt-btn-text);

    padding:8px 12px !important;

    font-size:var(--dt-font-sm);

    font-weight:700;

    white-space:nowrap;

    transition:var(--dt-transition);

}


/* ==========================================================================
   BODY
   ========================================================================== */

table.dataTable tbody td{

    color:var(--dt-table-text);

    transition:
        background-color var(--dt-transition),
        color var(--dt-transition),
        box-shadow var(--dt-transition);

}

table.dataTable tbody tr:hover td{

    background:var(--dt-row-hover);

    /* color:var(--dt-primary); */

}

table.dataTable tbody tr:hover{

    cursor:pointer;

}


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

.dataTables_paginate .pagination{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:6px;

    margin:0;

}

.dataTables_paginate .page-item{

    display:flex;

    align-items:center;

}

.dataTables_paginate .page-link{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:38px;

    height:28px;

    padding:0 7px;

    background:var(--dt-white);

    color:var(--dt-text);

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

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

    font-size:var(--dt-font-xs);

    transition:var(--dt-transition);

}

.dataTables_paginate .page-link:hover{

    background:var(--dt-page-hover);

    border-color:var(--dt-page-active);

    color:var(--dt-page-active);

}

.dataTables_paginate .page-item.active .page-link{

    background:var(--dt-page-active);

    border-color:var(--dt-page-active);

    color:var(--dt-btn-text);

}

.dataTables_paginate .page-item.disabled .page-link{

    opacity:.6;

    cursor:not-allowed;

}


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

div.dataTables_wrapper div.dataTables_info{

    padding-top:0;

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

    font-size:var(--dt-font-sm);

}


/* ==========================================================================
   PROCESSING
   ========================================================================== */

.dataTables_processing{

    padding:16px;

    background:var(--dt-white);

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

    box-shadow:var(--dt-hover-shadow);

}


/* ==========================================================================
   EMPTY TABLE
   ========================================================================== */

.dataTables_empty{

    padding:50px !important;

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

    font-size:var(--dt-font-lg);

    text-align:center;

}





/* ==========================================================================
   BADGES
   ========================================================================== */

.badge{

    padding:5px 12px;

    border-radius:var(--dt-radius-pill);

    font-size:var(--dt-font-sm);

    font-weight:600;

}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

.table-responsive{

    overflow-x:auto;

}

.table-responsive::-webkit-scrollbar{

    height:8px;

}

.table-responsive::-webkit-scrollbar-track{

    background:var(--dt-white);

}

.table-responsive::-webkit-scrollbar-thumb{

    background:var(--dt-border);

    border-radius:var(--dt-radius-pill);

}

.table-responsive::-webkit-scrollbar-thumb:hover{

    background:var(--dt-primary);

}


/* ==========================================================================
   SWEETALERT DELETE DIALOG
   ========================================================================== */

/* .swal-delete-popup{

    background:var(--dt-white);

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

    box-shadow:var(--dt-hover-shadow);

    padding:1rem !important;

} */

/* Warning Icon */

/* .swal2-icon{

    transform:scale(.75);

    margin:.25rem auto .5rem !important;

} */

/* Title */
/* 
.swal-delete-title{

    font-size:1.1rem;

    font-weight:700;

    color:var(--dt-text-dark);

    margin-bottom:.25rem;

} */

/* Message */

/* .swal-delete-content p{

    margin:0;

    font-size:.9rem;

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

    line-height:1.5;

} */

/* Action Buttons */

/* .swal2-actions{

    margin-top:1rem !important;

    gap:8px;

} */

/* Common Button Style */

/* .swal-delete-btn,
.swal-cancel-btn{

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:105px;

    height:38px;

    border-radius:var(--dt-radius-md) !important;

    font-size:.9rem;

    font-weight:600;

    transition:var(--dt-transition);

} */

/* Hover */

/* .swal-delete-btn:hover,
.swal-cancel-btn:hover{

    transform:translateY(-2px);

} */


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

.swal2-popup{

    width:min(32rem,90vw) !important;

    max-width:90vw;

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

}

.swal2-title{

    font-size:1.6rem;

}

.swal2-html-container{

    font-size:.95rem;

}

.swal2-actions{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

}

.swal-delete-btn,
.swal-cancel-btn{

    min-width:120px;

}

@media (max-width:768px){

    .swal2-popup{

        width:90vw !important;

        padding:1.25rem;

    }

    .swal2-title{

        font-size:1.35rem;

    }

    .swal2-html-container{

        font-size:.9rem;

    }

}

@media (max-width:480px){

    .swal2-popup{

        width:95vw !important;

        padding:1rem;

    }

    .swal2-title{

        font-size:1.2rem;

    }

    .swal2-html-container{

        font-size:.85rem;

    }

    .swal2-actions{

        flex-direction:column;

    }

    .swal-delete-btn,
    .swal-cancel-btn{

        width:100%;

        margin:0 !important;

    }

}

@media (min-width:1400px){

    .swal2-popup{

        width:34rem;

    }

}


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

@media (max-width:768px){

    .dt-buttons{

        justify-content:center;

    }

    .dataTables_filter{

        justify-content:flex-start;

        margin-top:12px;

    }

    .dataTables_filter input{

        width:100% !important;

    }

    .dataTables_length,
    .status-filter,
    .company-filter{

        margin-top:10px;

    }

}