.dataTable {
    @apply min-w-full border-b-0;
    /*
        Styles for DataTables:
        - Full width.
    */
}

.dataTable thead {
    @apply bg-color text-color text-left;
}

.dataTable thead th {
    @apply text-xs font-semibold uppercase;
}

.dataTable tbody tr {
    @apply text-sm text-gray-800;
}

.dataTable .tr-clickable {
    @apply hover:bg-gray-200/80;
}

div.dt-container div.dt-layout-row {
    @apply flex flex-row-reverse justify-between flex-wrap;
    /*
        Styles for layout row in DataTables:
        - Flex container with center alignment.
    */
}

/*----------------------------------
    Columns
----------------------------------*/
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    @apply text-left;
}


/*----------------------------------
    Input Length
----------------------------------*/
div.dt-container .dt-length {
    @apply flex items-center text-sm;
}

div.dt-container .dt-length label {
    @apply hidden;
}

div.dt-container .dt-length select {
    @apply text-sm border-solid border-[#ddd] rounded-[5px] p-2 bg-transparent;
}

div.dt-container .dt-length select option {
    @apply text-xs font-semibold
}

div.dt-container .dt-length select:focus {
    @apply border-[#0003] outline-none;
}

/*----------------------------------
    Search
----------------------------------*/
div.dt-container .dt-search {
    @apply relative;
}

div.dt-container .dt-search label {
    @apply absolute top-3 left-2 text-xs transition-opacity duration-200;
}

div.dt-container .dt-search input {
    @apply pl-16 text-sm border-solid border-[#ddd] rounded-[5px] p-2 bg-transparent w-[300px];
}
div.dt-container .dt-search input:focus {
    @apply border-[#0003] outline-none;
}

div.dt-container .dt-search:focus-within input {
    @apply pl-16;
}

/*----------------------------------
    Pagination Info
----------------------------------*/
div.dt-container .dt-info {
    @apply text-sm text-gray-500;
}

/*----------------------------------
    Pagination
----------------------------------*/
div.dt-container .dt-paging {
    @apply flex items-center text-xs text-color font-semibold gap-[2px];
}

div.dt-container .dt-paging .ellipsis {
    @apply w-8 h-8 border border-solid rounded-full cursor-pointer bg-white flex items-center justify-center;
    border-color: var(--bg-color) !important;
    color: var(--bg-color) !important;
}

div.dt-container .dt-paging .dt-paging-button,
div.dt-container .dt-paging .dt-paging-button.disabled {
    @apply w-8 h-8 border border-solid rounded-full cursor-pointer bg-white flex items-center justify-center;
    border-color: var(--bg-color) !important;
    color: var(--bg-color) !important;
}
div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    background: var(--bg-color-hover) !important;
    color: var(--text-color) !important;
    cursor: pointer !important;
}

div.dt-container .dt-paging .dt-paging-button.current {
    @apply bg-color text-color;
}
div.dt-container .dt-paging .dt-paging-button.current:hover {
    @apply bg-[--bg-color-hover]
}

/*----------------------------------
    Processing
----------------------------------*/

/*----------------------------------
    Actions
----------------------------------*/
.actions {
    @apply text-xl;
}

.dropdownMenu {
    @apply
    absolute right-0 mt-2 bg-white border border-gray-300
    rounded-lg shadow-md w-48 z-[50] text-left
    transition-all duration-200 ease-in-out
    overflow-hidden;
}

.dropdown-item {
    @apply
    block w-full px-4 py-2 text-sm text-gray-800
    rounded-md transition-colors duration-150
    hover:bg-gray-100 hover:font-semibold hover:text-gray-900
    focus:bg-gray-200 focus:outline-none;
}

/*----------------------------------
    Information
----------------------------------*/
.user-color {
    @apply
    w-full h-5 rounded-md p-2;
    /*
        Styles for user color section:
        - Full width with fixed height and rounded corners.
        - Padding for spacing.
    */
}

/*----------------------------------
    Messages
----------------------------------*/
.badge-info {
    @apply
    bg-blue-200 text-blue-800 text-xs font-medium
    px-2.5 py-0.5 rounded inline-block min-w-[70px] self-center;
    /*
        Styles for info badge:
        - Blue background with dark blue text.
        - Small size and medium font weight.
        - Padding and rounded corners.
        - Inline-block display with margin.
    */
}

.badge-delete {
    @apply
    bg-red-200 text-red-800 text-xs font-medium
    px-2.5 py-0.5 rounded inline-block;
    /*
        Styles for delete badge:
        - Red background with dark red text.
        - Small size and medium font weight.
        - Padding and rounded corners.
        - Inline-block display with margin.
    */
}

.badge-active {
    @apply
    bg-green-200 text-green-800 text-xs font-medium
    px-2.5 py-0.5 rounded inline-block;
    /*
        Styles for active badge:
        - Green background with dark green text.
        - Small size and medium font weight.
        - Padding and rounded corners.
        - Inline-block display with margin.
    */
}

.badge-with-bg {
    @apply
    bg-color text-color text-xs font-medium
    px-2.5 py-0.5 rounded inline-block;
    /*
        Styles for product badge:
        - Yellow background with dark yellow text.
        - Small size and medium font weight.
        - Padding and rounded corners.
        - Inline-block display with margin.
    */
}

.badge-without-bg {
    @apply
    bg-white text-[--bg-color] text-xs font-medium
    px-2.5 py-0.5 rounded inline-block border border-[--bg-color];
    /*
        Styles for service badge:
        - Purple background with dark purple text.
        - Small size and medium font weight.
        - Padding and rounded corners.
        - Inline-block display with margin.
    */
}