/* ========================================
   DATATABLES - TECNO DESIGN SYSTEM
   Custom styles for DataTables matching Tecno design system
   ======================================== */

/* Card Container */
.card {
    background: var(--card, #ffffff);
    box-shadow: var(--shadow-card, 0px 2px 8px rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-lg, 8px);
    border: none;
    overflow: hidden;
}

/* Card Header */
.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border, #E4E6EF);
    background-color: var(--card, #ffffff);
}

.card-header .card-title h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground, #181C32);
    margin: 0;
}

/* Card Body */
.card-body {
    padding: 0;
}

/* Table Container */
.table-responsive {
    overflow: hidden;
    border-radius: 8px;
}

/* DataTable Base */
.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0;
}

/* DataTable thead */
.dataTable thead {
    background-color: var(--table-header-bg, #F9FAFB);
}

.dataTable thead tr {
    background-color: var(--table-header-bg, #F9FAFB);
    border-bottom: 1px solid var(--table-border, #E4E6EF);
}

.dataTable thead th {
    padding: 0.75rem 1rem !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary, #7E8299) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--table-header-bg, #F9FAFB) !important;
    border-bottom: 1px solid var(--table-border, #E4E6EF) !important;
    border-top: none !important;
}

/* Rounded corners for first and last header cells */
.dataTable thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

.dataTable thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}


/* Remove sorting icons background */
.dataTable thead th.sorting,
.dataTable thead th.sorting_asc,
.dataTable thead th.sorting_desc {
    background-color: var(--table-header-bg, #F9FAFB) !important;
}

/* DataTable tbody */
.dataTable tbody tr {
    border-bottom: 1px solid var(--table-border, #E4E6EF);
    transition: background-color 0.2s ease;
}

.dataTable tbody tr:hover {
    background-color: var(--table-hover, #F9FAFB) !important;
}

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

.dataTable tbody td {
    padding: 1.25rem 1rem !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    color: var(--foreground, #181C32);
    vertical-align: middle;
}

/* Primary text (names) */
.dataTable tbody td .fw-bold,
.dataTable tbody td .text-gray-900 {
    font-weight: 600 !important;
    color: var(--foreground, #181C32) !important;
}

/* Secondary text (emails, descriptions) */
.dataTable tbody td .text-gray-600,
.dataTable tbody td .fw-semibold {
    font-weight: 400 !important;
    color: var(--text-tertiary, #7E8299) !important;
}

/* Badges - Role & Status */
.badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-md, 6px);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
}

/* Badge Primary (Admin) */
.badge-light-primary {
    background-color: rgba(0, 68, 142, 0.08) !important;
    color: var(--primary, #00448E) !important;
    border-color: rgba(0, 68, 142, 0.2) !important;
}

/* Badge Warning (Consulente) */
.badge-light-warning {
    background-color: rgba(255, 139, 96, 0.08) !important;
    color: #FF8B60 !important;
    border-color: rgba(255, 139, 96, 0.2) !important;
}

/* Badge Success (Cliente, Validato) - Bordered style */
.badge-light-success {
    background-color: #ffffff !important;
    color: #17C653 !important;
    border-color: #17C653 !important;
    border-width: 1.5px !important;
}

/* Badge Secondary */
.badge-light-secondary {
    background-color: rgba(126, 130, 153, 0.1) !important;
    color: var(--text-tertiary, #7E8299) !important;
}

/* Badge Danger */
.badge-light-danger {
    background-color: rgba(241, 65, 108, 0.1) !important;
    color: var(--danger, #F1416C) !important;
}

/* Action Buttons */
.dataTable tbody td .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 4px);
    background-color: transparent;
    border: none;
    transition: all 0.2s ease;
}

.dataTable tbody td .btn-icon:hover {
    background-color: rgba(0, 68, 142, 0.08);
}

.dataTable tbody td .btn-icon i,
.dataTable tbody td .btn-icon svg {
    color: var(--text-tertiary, #7E8299);
    transition: color 0.2s ease;
}

/* Edit/View icon hover - Tecno Blue */
.dataTable tbody td .btn-icon:hover i,
.dataTable tbody td .btn-icon:hover svg {
    color: var(--primary, #00448E) !important;
}

/* Delete icon hover - Danger */
.dataTable tbody td .btn-icon[data-kt-action="delete_row"]:hover {
    background-color: rgba(241, 65, 108, 0.08);
}

.dataTable tbody td .btn-icon[data-kt-action="delete_row"]:hover i,
.dataTable tbody td .btn-icon[data-kt-action="delete_row"]:hover svg {
    color: var(--danger, #F1416C) !important;
}

/* Actions column alignment */
.dataTable tbody td.text-end {
    text-align: center !important;
}

/* DataTable Info & Pagination */
.dataTables_info {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    color: var(--text-tertiary, #7E8299);
    padding: 1rem 1.5rem;
}

.dataTables_paginate {
    padding: 1rem 1.5rem;
}

.dataTables_paginate .pagination {
    gap: 0.25rem;
}

.dataTables_paginate .page-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #3F4254);
    border: 1px solid var(--table-border, #E4E6EF);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.dataTables_paginate .page-link:hover {
    background-color: var(--table-hover, #F9FAFB);
    color: #00448E !important;
    border-color: #00448E !important;
}

.dataTables_paginate .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: #00448E !important;
    border-color: #00448E !important;
    color: #ffffff !important;
}

/* Pagination hover states */
.pagination .page-link:hover {
    background-color: var(--table-hover, #F9FAFB) !important;
    color: #00448E !important;
    border-color: #00448E !important;
}


/* Search Input */
.form-control-solid {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    background-color: var(--input-background, #ffffff);
    border: 1px solid var(--input-border, #E4E6EF);
    border-radius: var(--radius-md, 6px);
    padding: 0.625rem 1rem;
    color: var(--foreground, #181C32);
    transition: all 0.2s ease;
}

.form-control-solid:focus {
    border-color: var(--input-focus-border, #00448E);
    box-shadow: 0 0 0 3px rgba(0, 68, 142, 0.1);
    outline: none;
}

/* Primary Button */
.btn-primary {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--primary, #00448E);
    border-color: var(--primary, #00448E);
    color: var(--primary-foreground, #ffffff);
    border-radius: var(--radius-md, 6px);
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-hover, #003670);
    border-color: var(--primary-hover, #003670);
    color: var(--primary-foreground, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 68, 142, 0.2);
}

/* Remove default DataTables borders */
.dataTable,
.dataTable th,
.dataTable td {
    border: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem;
    }

    .dataTable thead th {
        padding: 0.5rem !important;
        font-size: 0.7rem;
    }

    .dataTable tbody td {
        padding: 0.75rem !important;
        font-size: 0.8125rem;
    }

    .dataTables_info,
    .dataTables_paginate {
        padding: 0.75rem 1rem;
    }
}

/* Loading state */
.dataTable.dataTable-loading tbody tr {
    opacity: 0.5;
    pointer-events: none;
}