/* Base Styles */
    :root {
        --primary-color: #4e73df;
        --primary-dark: #2e59d9;
        --secondary-color: #858796;
        --success-color: #1cc88a;
        --info-color: #36b9cc;
        --warning-color: #f6c23e;
        --danger-color: #e74a3b;
        --light-color: #f8f9fc;
        --dark-color: #5a5c69;
        --black-color: #000;

        --main-color: #b5a898;
        --main-color-dark: #898074;
    }

    /* Force color variables to take precedence */
    body .main-color,
    .main-color {
        color: var(--main-color);
    }

    body .main-color-dark,
    .main-color-dark {
        color: var(--main-color-dark);
    }

    body .main-bg,
    .main-bg {
        background-color: var(--main-color);
    }

    body {
        background-color: #f5f7fb;
    }

    /* Header Segment Buttons */
    .btn-segment {
        background-color: black;
        color: var(--main-color);
        font-weight: 600;
        padding: 0.5rem 1.5rem;
        transition: all 0.3s ease;
        margin: 0 0.25rem;
    }

    .btn-segment.actived {
        background-color: var(--main-color) !important;
        color: black;
    }

    .btn-segment:hover:not(.actived) {
        background-color: var(--main-color) !important;
    }

    /* Icon Wrapper - High specificity to override Keenthemes */
    body .icon-wrapper,
    .card .icon-wrapper,
    .icon-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: var(--black-color);

        /* Add 3D transform properties */
        transform: translateZ(20px);
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
    }

    .bg-gradient-primary {
        background-color: #000;
    }

    /* Icon wrapper with enhanced 3D effect */
    .icon-wrapper.bg-gradient-primary {
        transform: translateZ(30px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    .icon-wrapper.bg-gradient-primary:hover {
        transform: translateZ(40px) scale(1.05) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    }

    /* Icons inside dark backgrounds should be white for visibility */
    .bg-gradient-primary i,
    .bg-gradient-primary .fas,
    .bg-gradient-primary .far,
    .bg-gradient-primary .fab,
    .bg-gradient-primary .ki-duotone,
    .bg-gradient-primary .ki-outline,
    .bg-gradient-primary .ki-solid {
        color: var(--main-color) !important;
        font-size: 1.5rem !important;
        display: inline-block !important;
    }

    /* Duotone icons inside dark backgrounds - target pseudo-elements */
    .bg-gradient-primary .ki-duotone .path1:before,
    .bg-gradient-primary .ki-duotone .path2:before,
    .bg-gradient-primary .ki-duotone .path3:before,
    .bg-gradient-primary .ki-duotone .path4:before,
    .bg-gradient-primary .ki-duotone .path5:before {
        color: var(--main-color) !important;
    }


    /* Specific override for dark background icon wrappers */
    .icon-wrapper.bg-gradient-primary i,
    .icon-wrapper.bg-gradient-primary .fas,
    .icon-wrapper.bg-gradient-primary .far,
    .icon-wrapper.bg-gradient-primary .fab,
    .icon-wrapper.bg-gradient-primary .ki-duotone,
    .icon-wrapper.bg-gradient-primary .ki-outline,
    .icon-wrapper.bg-gradient-primary .ki-solid {
        color: var(--main-color) !important;
        font-size: 1.5rem !important;
        transform-style: preserve-3d;
    }

    /* Override common Keenthemes icon classes */
    .kt-icon,
    .ki-icon,
    .svg-icon,
    .symbol .symbol-label i,
    .menu-icon i,
    .app-sidebar .menu-icon,
    .btn i {
        color: var(--main-color) !important;
    }

    /* Keenthemes Duotone Icons - Target pseudo-elements */
    .ki-duotone .path1:before,
    .ki-duotone .path2:before,
    .ki-duotone .path3:before,
    .ki-duotone .path4:before,
    .ki-duotone .path5:before {
        color: var(--main-color) !important;
    }

    /* Modal Close Button Icon - Specific targeting for empModal */
    #empModal .modal-header .btn-close i,
    #empModal .modal-header .btn-close .ki-outline,
    #empModal .modal-header .btn-close .ki-cross,
    #empModal .modal-header .btn i.ki-outline,
    #empModal .modal-header .btn i.main-color,
    #empModal .modal-header .ki-outline.ki-cross.main-color,
    .modal-header .btn-close i.main-color,
    .modal-header .ki-outline.main-color {
        color: var(--main-color) !important;
    }

    /* Keenthemes Outline Icons - Add support for ki-outline */
    .ki-outline {
        color: var(--main-color) !important;
    }

    /* Ensure main-color class takes precedence in modals */
    .modal .main-color,
    #empModal .main-color {
        color: var(--main-color) !important;
    }

    /* Modal Close Button Hover States */
    #empModal .modal-header .btn-close:hover i,
    #empModal .modal-header .btn-close:hover .ki-outline,
    #empModal .modal-header .btn-close:hover .ki-cross,
    #empModal .modal-header .btn:hover i.ki-outline,
    #empModal .modal-header .btn:hover i.main-color,
    .modal-header .btn-close:hover i.main-color,
    .modal-header .btn:hover .ki-outline.main-color {
        color: var(--main-color-dark) !important;
        transition: color 0.3s ease !important;
    }

    /* Modal Close Button Active/Focus States */
    #empModal .modal-header .btn-close:active i,
    #empModal .modal-header .btn-close:focus i,
    #empModal .modal-header .btn-close:active .ki-outline,
    #empModal .modal-header .btn-close:focus .ki-outline {
        color: var(--main-color-dark) !important;
    }

    /* Override Bootstrap modal header background styles for empModal */
    #empModal .modal-header.bg-dark .main-color,
    #empModal .modal-header.text-white .main-color,
    #empModal .bg-dark .main-color,
    #empModal .text-white .main-color {
        color: var(--main-color) !important;
    }

    /* Force icon color even in dark background contexts */
    .bg-dark .ki-outline.main-color,
    .text-white .ki-outline.main-color,
    .modal-header.bg-dark i.main-color,
    .modal-header.text-white i.main-color {
        color: var(--main-color) !important;
    }

    /* Header card icons should be black */
    .header-card .ki-duotone .path1:before,
    .header-card .ki-duotone .path2:before,
    .header-card .ki-duotone .path3:before,
    .header-card .ki-duotone .path4:before,
    .header-card .ki-duotone .path5:before {
        color: var(--main-color) !important;
    }

    /* Button icons - duotone support */
    .btn .ki-duotone .path1:before,
    .btn .ki-duotone .path2:before,
    .btn .ki-duotone .path3:before,
    .btn .ki-duotone .path4:before,
    .btn .ki-duotone .path5:before {
        color: inherit !important;
        transition: color 0.3s ease !important;
    }

    /* Ensure FontAwesome icons follow color scheme */
    .fa, .fas, .far, .fab, .fal, .fad {
        color: inherit !important;
    }

    /* Button icon states and transitions */
    .btn i,
    .btn .fas,
    .btn .far,
    .btn .fab,
    .btn .ki,
    .btn .svg-icon {
        transition: color 0.3s ease !important;
        color: inherit !important;
    }

    /* Segment button icon states */
    .btn-segment i,
    .btn-segment .fas,
    .btn-segment .far,
    .btn-segment .fab {
        color: var(--main-color) !important;
        transition: color 0.3s ease !important;
    }

    .btn-segment:hover:not(.actived) i,
    .btn-segment:hover:not(.actived) .fas,
    .btn-segment:hover:not(.actived) .far,
    .btn-segment:hover:not(.actived) .fab {
        color: black !important;
    }

    .btn-segment.actived i,
    .btn-segment.actived .fas,
    .btn-segment.actived .far,
    .btn-segment.actived .fab {
        color: black !important;
    }

    /* Add button icon states */
    .btn-add i,
    .btn-add .fas,
    .btn-add .far,
    .btn-add .fab,
    .btn-add .ki-duotone,
    .btn-add .ki-outline,
    .btn-add .ki-solid,
    .card-toolbar .btn-add i,
    button.btn-add i {
        color: var(--main-color) !important;
        transition: color 0.3s ease !important;
    }

    .btn-add:hover i,
    .btn-add:hover .fas,
    .btn-add:hover .far,
    .btn-add:hover .fab,
    .btn-add:hover .ki-duotone,
    .btn-add:hover .ki-outline,
    .btn-add:hover .ki-solid,
    .card-toolbar .btn-add:hover i,
    button.btn-add:hover i {
        color: #000 !important;
    }

    .btn-add:focus i,
    .btn-add:active i,
    .btn-add:focus .ki-duotone,
    .btn-add:active .ki-duotone,
    .btn-add:focus .ki-outline,
    .btn-add:active .ki-outline,
    .btn-add:focus .ki-solid,
    .btn-add:active .ki-solid,
    .card-toolbar .btn-add:focus i,
    .card-toolbar .btn-add:active i {
        color: #000 !important;
    }

    /* Cancel button icon states */
    .btn-cancel i,
    .btn-cancel .fas,
    .btn-cancel .far,
    .btn-cancel .fab,
    .btn-cancel .ki-duotone,
    .btn-cancel .ki-outline,
    .btn-cancel .ki-solid,
    .card-toolbar .btn-cancel i,
    button.btn-cancel i {
        color: #fff !important;
        transition: color 0.3s ease !important;
    }

    .btn-cancel:hover i,
    .btn-cancel:hover .fas,
    .btn-cancel:hover .far,
    .btn-cancel:hover .fab,
    .btn-cancel:hover .ki-duotone,
    .btn-cancel:hover .ki-outline,
    .btn-cancel:hover .ki-solid,
    .card-toolbar .btn-cancel:hover i,
    button.btn-cancel:hover i {
        color: #fff !important;
    }

    .btn-cancel:focus i,
    .btn-cancel:active i,
    .btn-cancel:focus .ki-duotone,
    .btn-cancel:active .ki-duotone,
    .btn-cancel:focus .ki-outline,
    .btn-cancel:active .ki-outline,
    .btn-cancel:focus .ki-solid,
    .btn-cancel:active .ki-solid,
    .card-toolbar .btn-cancel:focus i,
    .card-toolbar .btn-cancel:active i {
        color: #fff !important;
    }

    /* Detail button icon states */
    .btn-detail i,
    .btn-detail .fas,
    .btn-detail .far,
    .btn-detail .fab {
        color: #000 !important;
        transition: color 0.3s ease !important;
    }

    .btn-detail:hover i,
    .btn-detail:hover .fas,
    .btn-detail:hover .far,
    .btn-detail:hover .fab {
        color: #000 !important;
    }

    /* General button states for any other buttons */
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) i,
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) .fas,
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) .far,
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) .fab,
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) .ki-duotone,
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) .ki-outline,
    .btn:not(.btn-add):not(.btn-cancel):not(.btn-segment):not(.btn-detail) .ki-solid {
        transition: color 0.3s ease !important;
    }

    /* Primary/Secondary button icon colors */
    .btn-primary i,
    .btn-secondary i,
    .btn-success i,
    .btn-warning i,
    .btn-danger i,
    .btn-info i,
    .btn-dark i {
        color: white !important;
        transition: color 0.3s ease !important;
    }

    .btn-light i,
    .btn-outline-primary i,
    .btn-outline-secondary i,
    .btn-outline-success i,
    .btn-outline-warning i,
    .btn-outline-danger i,
    .btn-outline-info i,
    .btn-outline-dark i {
        color: var(--main-color) !important;
        transition: color 0.3s ease !important;
    }

    .btn-outline-primary:hover i,
    .btn-outline-secondary:hover i,
    .btn-outline-success:hover i,
    .btn-outline-warning:hover i,
    .btn-outline-danger:hover i,
    .btn-outline-info:hover i,
    .btn-outline-dark:hover i {
        color: white !important;
    }

    /* Add Button - Enhanced specificity for DataTables compatibility */
    .btn-add,
    .card-toolbar .btn-add,
    button.btn-add {
        background-color: #000 !important;
        border: none !important;
        padding: 0.5rem 1.5rem !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        color: var(--main-color) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .btn-add:hover,
    .card-toolbar .btn-add:hover,
    button.btn-add:hover {
        background-color: var(--main-color) !important;
        color: #000 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    .btn-add:focus,
    .btn-add:active,
    .card-toolbar .btn-add:focus,
    .card-toolbar .btn-add:active {
        background-color: var(--main-color) !important;
        color: #000 !important;
        border: none !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* Cancel Button - Similar traits to btn-add but with cancel styling */
    .btn-cancel,
    .card-toolbar .btn-cancel,
    button.btn-cancel {
        background-color: var(--secondary-color) !important;
        border: none !important;
        padding: 0.5rem 1.5rem !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        color: #fff !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .btn-cancel:hover,
    .card-toolbar .btn-cancel:hover,
    button.btn-cancel:hover {
        background-color: var(--dark-color) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    .btn-cancel:focus,
    .btn-cancel:active,
    .card-toolbar .btn-cancel:focus,
    .card-toolbar .btn-cancel:active {
        background-color: var(--dark-color) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* Search Container */
    .search-input:focus {
        box-shadow: none;
        border-color: #ced4da;
    }

    /* Company Cards */
    .header-card {
        background-color: #000;
        color: var(--main-color);
    }

    .company-card {
        padding: 1.5rem;
        border-bottom: 1px solid #eee;
        transition: all 0.3s ease;
        background-color: white;
    }

    .company-card:last-child {
        border-bottom: none;
    }

    .company-card:hover {
        background-color: #f9fafd;
    }

    .hover-scale:hover {
        transform: scale(1.01);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .logo-wrapper {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background-color: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid #eee;
    }

    .company-logo {
        max-width: 100%;
        max-height: 100%;
    }

    .btn-detail {
        border: 1px solid var(--main-color) !important;
        border-radius: 50px !important;
        padding: 0.5rem 1.5rem !important;
        font-weight: 600 !important;
        color: #000;
    }

    .btn-detail:hover {
        background-color: var(--main-color);
        box-shadow: #000;
        transition: 0.2s ease-in-out;
    }

    .btn-danger {
        border-radius: 50px !important;
        padding: 0.5rem 1.5rem !important;
        font-weight: 600 !important;
    }

    /* Empty State */
    .empty-state {
        padding: 4rem 1rem;
        text-align: center;
        background-color: white;
    }

    .empty-state-content i {
        font-size: 4rem;
        color: #ddd;
        margin-bottom: 1.5rem;
    }

    .empty-state-content h4 {
        color: var(--dark-color);
        margin-bottom: 0.5rem;
    }

    .empty-state-content p {
        color: var(--secondary-color);
        margin-bottom: 1.5rem;
    }

    /* DataTables Pagination Styling */
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .page-link,
    .pagination .page-link {
        color: var(--main-color-dark) !important;
        border-color: var(--main-color-dark) !important;
        transition: all 0.3s ease !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .page-link:hover,
    .pagination .page-link:hover {
        background-color: var(--main-color-dark) !important;
        color: #fff !important;
        border-color: var(--main-color-dark) !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .page-item.active .page-link,
    .pagination .page-item.active .page-link {
        background-color: var(--main-color-dark) !important;
        border-color: var(--main-color-dark) !important;
        color: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .page-item.disabled .page-link,
    .pagination .page-item.disabled .page-link {
        color: #6c757d !important;
        background-color: #fff !important;
        border-color: #dee2e6 !important;
        cursor: not-allowed !important;
    }

         /* DataTables Info and Length Styling */
     .dataTables_wrapper .dataTables_info,
     .dataTables_wrapper .dataTables_length label,
     .dataTables_wrapper .dataTables_filter label {
         color: var(--main-color-dark) !important;
     }

     .dataTables_wrapper .dataTables_length select,
     .dataTables_wrapper .dataTables_filter input {
         border-color: var(--main-color-dark) !important;
         color: var(--main-color-dark) !important;
     }

     .dataTables_wrapper .dataTables_length select:focus,
     .dataTables_wrapper .dataTables_filter input:focus {
         border-color: var(--main-color-dark) !important;
         box-shadow: 0 0 0 0.2rem rgba(137, 128, 116, 0.25) !important;
     }

     /* Custom Tooltip Styling */
     .tooltip-inner {
         background-color: var(--main-color-dark) !important;
         color: white !important;
         border-radius: 6px !important;
         font-size: 0.875rem !important;
         max-width: 300px !important;
         text-align: left !important;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
     }

     .tooltip.bs-tooltip-top .tooltip-arrow::before,
     .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
         border-top-color: var(--main-color-dark) !important;
     }

     .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
     .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
         border-bottom-color: var(--main-color-dark) !important;
     }

     .tooltip.bs-tooltip-start .tooltip-arrow::before,
     .tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
         border-left-color: var(--main-color-dark) !important;
     }

     .tooltip.bs-tooltip-end .tooltip-arrow::before,
     .tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
         border-right-color: var(--main-color-dark) !important;
     }

    /* Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    .fade-in {
        animation: fadeIn 0.4s ease-in-out;
    }

    /* Custom Dropzone Styles */
    #excel-dropzone.dropzone {
        min-height: 200px;
        border: 2px dashed var(--main-color);
        background-color: #fff;
        border-radius: 0.75rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #excel-dropzone.dropzone:hover {
        border-color: var(--main-color-dark);
        background-color: rgba(181, 168, 152, 0.05);
    }

    #excel-dropzone.dropzone.dz-drag-hover {
        border-color: var(--main-color-dark);
        background-color: rgba(181, 168, 152, 0.1);
    }

    #excel-dropzone.dropzone .dz-message {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #excel-dropzone.dropzone .dz-preview {
        margin: 0.5rem;
        border-radius: 0.5rem;
    }

    #excel-dropzone.dropzone .dz-preview .dz-image {
        border-radius: 0.5rem;
        background: var(--light-color);
    }

    #excel-dropzone.dropzone .dz-preview .dz-details {
        padding: 1rem;
        text-align: center;
    }

    #excel-dropzone.dropzone .dz-preview .dz-remove {
        background-color: var(--danger-color);
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        top: -15px;
        right: -15px;
    }

    #excel-dropzone.dropzone .dz-preview .dz-remove:hover {
        background-color: #c82333;
    }

    #excel-dropzone.dropzone .dz-preview .dz-success-mark,
    #excel-dropzone.dropzone .dz-preview .dz-error-mark {
        margin-left: -20px;
        margin-top: -20px;
    }

    #excel-dropzone.dropzone .dz-preview .dz-success-mark svg,
    #excel-dropzone.dropzone .dz-preview .dz-error-mark svg {
        width: 40px;
        height: 40px;
    }

    /* Responsive */
    @media (max-width: 768px) {

        html,
        body {
            font-size: 14px;
        }

        .company-card .row>div {
            margin-bottom: 1rem;
        }

        .company-card .d-flex.justify-content-end {
            justify-content: start !important;
        }

        .logo-wrapper {
            margin: 0 auto;
        }

        .btn-add {
            width: 100px;
            padding: auto;
            font-size: 12px;
        }
    }