/* Table Styles - Following table-group Design Pattern */

/* Reset and override existing table styles */
.table,
.dataTable,
table {
    width: 100% !important;
    background: var(--natural-white) !important;
    border: 1px solid var(--natural-200) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 16px 0 !important;
    box-sizing: border-box !important;
}

/* Table header */
.table thead,
.dataTable thead,
table thead {
    background: var(--green-300) !important;
}

.table thead th,
.dataTable thead th,
table thead th {
    background: var(--green-300) !important;
    border: none !important;
    border-bottom: 1px solid var(--natural-200) !important;
    padding: 16px !important;
    height: 52px !important;
    display: table-cell !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--green-950) !important;
    vertical-align: middle !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Table body */
.table tbody,
.dataTable tbody,
table tbody {
    background: var(--natural-white) !important;
}

.table tbody tr,
.dataTable tbody tr,
table tbody tr {
    height: 52px !important;
    display: table-row !important;
    align-items: center !important;
    border-bottom: 1px solid var(--natural-200) !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
}

.table tbody tr:hover,
.dataTable tbody tr:hover,
table tbody tr:hover {
    background: var(--natural-100) !important;
}

.table tbody tr:last-child,
.dataTable tbody tr:last-child,
table tbody tr:last-child {
    border-bottom: none !important;
}

/* Table cells */
.table tbody td,
.dataTable tbody td,
table tbody td {
    border: none !important;
    padding: 16px !important;
    height: 52px !important;
    display: table-cell !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--natural-black) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Table footer */
.table tfoot,
.dataTable tfoot,
table tfoot {
    background: var(--natural-white) !important;
    border-top: 1px solid var(--natural-200) !important;
}

.table tfoot td,
.dataTable tfoot td,
table tfoot td {
    padding: 14px 24px 16px !important;
    height: 62px !important;
    display: table-cell !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--natural-black) !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* DataTables specific overrides */
.dataTables_wrapper {
    padding: 0 !important;
}

.dataTables_wrapper .dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 16px 0 !important;
}

.dataTables_wrapper .dataTable th,
.dataTables_wrapper .dataTable td {
    vertical-align: middle !important;
    border: none !important;
    padding: 16px !important;
    height: 52px !important;
    display: table-cell !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--natural-black) !important;
    box-sizing: border-box !important;
}

.dataTables_wrapper .dataTable th {
    font-weight: 600 !important;
    border-bottom: 1px solid var(--natural-200) !important;
    text-align: center !important;
    background: var(--natural-100) !important;
    color: var(--natural-black) !important;
}

.dataTables_wrapper .dataTable tbody tr {
    height: 52px !important;
    display: table-row !important;
    align-items: center !important;
    border-bottom: 1px solid var(--natural-200) !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
}

.dataTables_wrapper .dataTable tbody tr:hover {
    background: var(--natural-100) !important;
}

.dataTables_wrapper .dataTable tbody tr:last-child {
    border-bottom: none !important;
}

/* Remove all existing table styling variations */
.table-bordered,
.table-borderless,
.table-striped,
.table-hover,
.table-sm,
.table-primary,
.table-secondary,
.table-success,
.table-info,
.table-warning,
.table-danger,
.table-light,
.table-dark {
    border: 1px solid var(--natural-200) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: var(--natural-white) !important;
}

/* Ensure consistent styling across all table variations */
.table-bordered th,
.table-bordered td,
.table-borderless th,
.table-borderless td,
.table-striped th,
.table-striped td,
.table-hover th,
.table-hover td,
.table-sm th,
.table-sm td,
.table-primary th,
.table-primary td,
.table-secondary th,
.table-secondary td,
.table-success th,
.table-success td,
.table-info th,
.table-info td,
.table-warning th,
.table-warning td,
.table-danger th,
.table-danger td,
.table-light th,
.table-light td,
.table-dark th,
.table-dark td {
    border: none !important;
    padding: 16px !important;
    height: 52px !important;
    display: table-cell !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--natural-black) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Remove striped and hover effects from variations */
.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
    background: var(--natural-100) !important;
}

/* Ensure table headers maintain proper styling */
.table-bordered thead th,
.table-borderless thead th,
.table-striped thead th,
.table-hover thead th,
.table-sm thead th,
.table-primary thead th,
.table-secondary thead th,
.table-success thead th,
.table-info thead th,
.table-warning thead th,
.table-danger thead th,
.table-light thead th,
.table-dark thead th {
    font-weight: 600 !important;
    border-bottom: 1px solid var(--natural-200) !important;
    text-align: center !important;
    background: var(--natural-100) !important;
    color: var(--natural-black) !important;
}

/* Table row styling for all variations */
.table-bordered tbody tr,
.table-borderless tbody tr,
.table-striped tbody tr,
.table-hover tbody tr,
.table-sm tbody tr,
.table-primary tbody tr,
.table-secondary tbody tr,
.table-success tbody tr,
.table-info tbody tr,
.table-warning tbody tr,
.table-danger tbody tr,
.table-light tbody tr,
.table-dark tbody tr {
    height: 52px !important;
    display: table-row !important;
    align-items: center !important;
    border-bottom: 1px solid var(--natural-200) !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
}

.table-bordered tbody tr:hover,
.table-borderless tbody tr:hover,
.table-striped tbody tr:hover,
.table-hover tbody tr:hover,
.table-sm tbody tr:hover,
.table-primary tbody tr:hover,
.table-secondary tbody tr:hover,
.table-success tbody tr:hover,
.table-info tbody tr:hover,
.table-warning tbody tr:hover,
.table-danger tbody tr:hover,
.table-light tbody tr:hover,
.table-dark tbody tr:hover {
    background: var(--natural-100) !important;
}

/* Remove bottom border from last row */
.table-bordered tbody tr:last-child,
.table-borderless tbody tr:last-child,
.table-striped tbody tr:last-child,
.table-hover tbody tr:last-child,
.table-sm tbody tr:last-child,
.table-primary tbody tr:last-child,
.table-secondary tbody tr:last-child,
.table-success tbody tr:last-child,
.table-info tbody tr:last-child,
.table-warning tbody tr:last-child,
.table-danger tbody tr:last-child,
.table-light tbody tr:last-child,
.table-dark tbody tr:last-child {
    border-bottom: none !important;
}

/* CRM Table specific styling - Left align specific columns */
.table tbody td:nth-child(1),  /* Company name */
.table tbody td:nth-child(2),  /* Pic name */
.table tbody td:nth-child(3),  /* Primary contact */
.table tbody td:nth-child(5),  /* Secondary contact */
.dataTable tbody td:nth-child(1),
.dataTable tbody td:nth-child(2),
.dataTable tbody td:nth-child(3),
.dataTable tbody td:nth-child(5),
table tbody td:nth-child(1),
table tbody td:nth-child(2),
table tbody td:nth-child(3),
table tbody td:nth-child(5) {
    text-align: left !important;
}

/* Ensure DataTables wrapper also applies the left alignment */
.dataTables_wrapper .dataTable tbody td:nth-child(1),
.dataTables_wrapper .dataTable tbody td:nth-child(2),
.dataTables_wrapper .dataTable tbody td:nth-child(3),
.dataTables_wrapper .dataTable tbody td:nth-child(5) {
    text-align: left !important;
}

/* Actions column styling - btn-group gap and button padding */
.table tbody td:last-child .btn-group,
.dataTable tbody td:last-child .btn-group,
table tbody td:last-child .btn-group {
    gap: 16px !important;
}

/* Remove padding from buttons in Actions column */
.table tbody td:last-child .btn,
.dataTable tbody td:last-child .btn,
table tbody td:last-child .btn {
    padding: 0 !important;
}

/* Remove padding from Font Awesome icons in Actions column */
.table tbody td:last-child .btn .fas,
.table tbody td:last-child .btn .fa,
.dataTable tbody td:last-child .btn .fas,
.dataTable tbody td:last-child .btn .fa,
table tbody td:last-child .btn .fas,
table tbody td:last-child .btn .fa {
    padding: 0 !important;
}

/* Pagination Styling - Replace all existing pagination styles */
.page-link {
    height: 32px !important;
    width: fit-content !important;
    border-radius: 10px !important;
    padding: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 1px solid var(--natural-200) !important;
    color: var(--natural-black) !important;
    background: var(--natural-white) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.page-link:hover {
    background: var(--green-50) !important;
    color: var(--natural-black) !important;
    border-color: var(--natural-200) !important;
    text-decoration: none !important;
}

.page-link.active,
.page-item.active .page-link,
.current {
    background: var(--green-500-main) !important;
    color: var(--natural-white) !important;
    border: none !important;
}

.page-link:focus {
    box-shadow: none !important;
    outline: none !important;
}

.paginate_button {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}

.pagination {
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
}

.dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override any existing DataTables pagination styles */
.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item {
    padding: 0 !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    height: 32px !important;
    width: fit-content !important;
    border-radius: 10px !important;
    padding: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 1px solid var(--natural-200) !important;
    color: var(--natural-black) !important;
    background: var(--natural-white) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
    background: var(--green-50) !important;
    color: var(--natural-black) !important;
    border-color: var(--natural-200) !important;
    text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link.active,
.dataTables_wrapper
    .dataTables_paginate
    .pagination
    .page-item.active
    .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .current {
    background: var(--green-500-main) !important;
    color: var(--natural-white) !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Replace Previous/Next text with icons */
.dataTables_wrapper
    .dataTables_paginate
    .pagination
    .previous
    .page-link::before {
    content: "\f0d9" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .next .page-link::before {
    content: "\f0da" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .previous .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .next .page-link {
    font-size: 0 !important;
}

.dataTables_wrapper
    .dataTables_paginate
    .pagination
    .previous
    .page-link::before,
.dataTables_wrapper .dataTables_paginate .pagination .next .page-link::before {
    font-size: 14px !important;
}

/* Clickable table rows for CRM */
.table.table-checkable tbody tr {
    cursor: pointer !important;
}

/* Ensure action buttons don't trigger row click */
.table.table-checkable tbody tr .btn-group {
    position: relative !important;
    z-index: 10 !important;
}

.table.table-checkable tbody tr .btn-group .btn {
    cursor: pointer !important;
}