
/* Container for the category table with glowing effect */
.category-table-container {
    background: linear-gradient(145deg, #2E3440, #353b48);
    padding: 20px;
    border-radius: 16px;
    
   width: 40%;
    position: relative;
}

.dataTables_paginate .paginate_button,
.dataTables_info,
.dataTables_length label,
.dataTables_filter label,
.dataTables_processing,
.dataTables_paginate span a,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_filter input {
    color: #ffffff !important;
    background-color: #444444 !important;
}

.containerCategoryManagement .dataTables_length select,
.containerRuleManagement .dataTables_length select {
    background-color: #444444 !important;
    color: #fff !important;
    border: 1px solid #555555 !important;
    border-radius: 4px;
    padding: 2px 5px;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_filter input:focus {
    background-color: #555555 !important;
}

/* --- Delete Button Styles --- */
#accountTypeTable td,
#categoryTable td,
#categoryRuleTable td {
    border: 1px solid rgba(95, 101, 102, 0.3); /* Add border to body cells */
}

#accountTypeTable .delete-btn,
#categoryTable .delete-btn,
#categoryRuleTable .delete-btn {
    background: none;
    border: none;
    color: #ff4444;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}

#accountTypeTable .delete-btn:hover,
#categoryTable .delete-btn:hover,
#categoryRuleTable .delete-btn:hover {
    color: #cc0000;
}

/* --- Delete Button Styles --- */
#accountTypeTable .delete-btn,
#categoryTable .delete-btn,
#categoryRuleTable .delete-btn {
    background: none;
    border: none;
    color: #ff4444;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}

#accountTypeTable .delete-btn:hover,
#categoryTable .delete-btn:hover,
#categoryRuleTable .delete-btn:hover {
    color: #cc0000;
}

/* --- Add and Add Rule Button Styles --- */
#addCategoryForm button,
#addSubCategoryRuleForm button {
    border: none;
    width: 10em;
    height: 3em;
    border-radius: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #3a404c;
    cursor: pointer;
    transition: all 450ms ease-in-out;
    /* Removed margin: 0 auto; */
    font-weight: 600;
    color: white;
    font-size: small;
}

#addCategoryForm button:hover,
#addSubCategoryRuleForm button:hover {
    background: linear-gradient(0deg,#A47CF3,#683FEA);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
    inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 4px rgba(255, 255, 255, 0.2),
    0px 0px 180px 0px #9917FF;
    transform: translateY(-2px);
    color: white;
}

/* --- Form Container Styles --- */
.AddSubCategoryContainer,
.AddSubCategoryRuleContainer {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust gap as needed */
    margin-bottom: 20px; /* Add some space below the forms */
    /* Styles for the rectangular box */
    padding: 15px;
    border: 1px solid #4a5263;
    background: linear-gradient(145deg, #2E3440, #353b48);
    border-radius: 8px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    width: 40%; /* Set width to 40% for desktop */
    margin-left: 20px; /* Align to the left with spacing */
}

.AddSubCategoryContainer form,
.AddSubCategoryRuleContainer form {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust gap as needed */
    width: 100%; /* Ensure form takes full width of container */
}

.AddSubCategoryContainer select,
.AddSubCategoryContainer input[type="text"],
.AddSubCategoryRuleContainer select,
.AddSubCategoryRuleContainer input[type="text"] {
    flex-grow: 1; /* Allow inputs and selects to take available space */
}

/* --- Container and Table Widths --- */
.containerAccountTypes,
.containerCategoryManagement,
.containerRuleManagement {
    width: 90%;
    box-sizing: border-box;
}

.containerAccountTypes .dataTables_wrapper,
.containerCategoryManagement .dataTables_wrapper,
.containerRuleManagement .dataTables_wrapper {
    width: 100% !important;
}

#accountTypeTable,
#categoryTable,
#categoryRuleTable {
    width: 100% !important;
    border-collapse: separate; /* Ensure border-spacing works */
    border-spacing: 0; /* Remove space between borders */
    border: 0.25px white !important; /* Add border around the table */
border-radius: 12px;
    overflow: hidden;
}

/* --- Media Queries --- */
@media (min-width: 768px) {
    .containerAccountTypes,
    .containerCategoryManagement,
    .containerRuleManagement{
       
        margin: 20px auto; /* Adjusted margin to match trend.css container */
    }
    .category-table-container {
        width: 60%;
    }

    }

@media (max-width: 767px) {
   
    .category-table-container {
        width: 85% !important; /* Full width on mobile */
        
    }

    #accountTypeTable,
    #categoryTable,
    #categoryRuleTable {
        width: 95% !important; /* Set table width to 95% on mobile */
    }

    .containerAccountTypes,
    .containerCategoryManagement,
    .containerRuleManagement {
        width: 95% !important; /* Set container width to 95% on mobile */
    }
}


/* Style Datatables Dropdown */
.dataTables_length select {
    background-color: #3c444f !important; /* Target background */
    color: #eee !important; /* Text color */
    border: 1px solid #555 !important;
    border-radius: 4px; /* Rounded */
    padding: 6px !important; /* Adjust padding */
    -moz-appearance: none; /* Optional: Normalize for Firefox */
    appearance: none; /* Optional: Normalize for other browsers */
}

/* Style the options inside the dropdown */
.dataTables_length select option {
    background-color: #3c444f !important; /* Match the select background */
    color: #eee !important; /* Match the select text color */
}

/* Optional: Hover effect for options (if supported) */
.dataTables_length select option:hover {
    
    background: rgba(0, 188, 212, 0.1) !important; /* Subtle blue background */
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5), 0 0 20px rgba(0, 188, 212, 0.3); /* Glowing effect */
}

/* Added: Focus style */
.dataTables_length select:focus {
    border-color: #3399cc !important; /* Border when dropdown is focused */
    outline: none !important; /* Remove default */
}

/* Ensure the parent container doesn’t interfere */
.dataTables_length {
    background-color: transparent !important; /* Prevent any white background */
}


@media (max-width: 768px) {
    .mobile-header-logo .nav-icon {
      display: none;
    }
  }



.light-theme .AddSubCategoryContainer,
.light-theme .AddSubCategoryRuleContainer {
    background: #f8fafc; /* Light background color */
    border-color: #cccccc; /* Lighter border color */
}

