/* ==========================================
   Coffee Vending System - Tables Styles
   ========================================== */

/* Table Container */
.table-container {
    background: #fff;
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--box-shadow-sm);
    margin-bottom: 2rem;
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-color);
    margin: 0;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Base Table Styles */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--dark-color);
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--border-color);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--gray-700);
    background-color: var(--gray-100);
}

.table tbody + tbody {
    border-top: 2px solid var(--border-color);
}

/* Table Variants */
.table-sm th,
.table-sm td {
    padding: 0.25rem 0.5rem;
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color);
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0;
}

/* Table Striped */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Table Hover */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* Table Row Colors */
.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: var(--primary-light);
}

.table-hover .table-primary:hover {
    background-color: #bad6eb;
}

.table-success,
.table-success > th,
.table-success > td {
    background-color: var(--success-light);
}

.table-hover .table-success:hover {
    background-color: #c3e6cb;
}

.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: var(--warning-light);
}

.table-hover .table-warning:hover {
    background-color: #ffe8a1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: var(--danger-light);
}

.table-hover .table-danger:hover {
    background-color: #f1b0b7;
}

.table-info,
.table-info > th,
.table-info > td {
    background-color: var(--info-light);
}

.table-hover .table-info:hover {
    background-color: #afe9fa;
}

/* Table Active */
.table-active,
.table-active > th,
.table-active > td {
    background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* Responsive Table */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.table-responsive > .table-bordered {
    border: 0;
}

/* Table with Actions */
.table-actions-cell {
    white-space: nowrap;
    width: 1%;
}

.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition-base);
    margin-right: 0.25rem;
}

.table-action-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.table-action-btn.danger:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.table-action-btn.success:hover {
    background: var(--success-color);
    border-color: var(--success-color);
}

/* Table Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.status-badge-success {
    color: #fff;
    background-color: var(--success-color);
}

.status-badge-warning {
    color: #000;
    background-color: var(--warning-color);
}

.status-badge-danger {
    color: #fff;
    background-color: var(--danger-color);
}

.status-badge-info {
    color: #000;
    background-color: var(--info-color);
}

.status-badge-secondary {
    color: #fff;
    background-color: var(--secondary-color);
}

/* DataTables Styles Override */
.dataTables_wrapper {
    position: relative;
    clear: both;
}

.dataTables_wrapper .dataTables_length {
    float: left;
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.755em;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--dark-color) !important;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: var(--gray-500) !important;
    border: 1px solid transparent;
    background: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    outline: none;
    background-color: var(--primary-hover);
    background: var(--primary-hover);
}

/* Table Sort Styles */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    position: relative;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    right: 0.5rem;
    display: block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    opacity: 0.3;
}

table.dataTable thead .sorting:after {
    content: "\f0dc";
    opacity: 0.3;
}

table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    opacity: 1;
}

table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    opacity: 1;
}

table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    color: var(--gray-400);
}

/* Table Loading State */
.table-loading {
    position: relative;
    min-height: 200px;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border: 4px solid var(--primary-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Table Empty State */
.table-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-600);
}

.table-empty-icon {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.table-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.table-empty-text {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Table Search */
.table-search {
    position: relative;
    margin-bottom: 1rem;
}

.table-search input {
    padding-left: 2.5rem;
}

.table-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
}

/* Table Pagination */
.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.table-pagination-info {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.table-pagination-nav {
    display: flex;
    gap: 0.25rem;
}

/* Responsive Table Styles */
@media (max-width: 768px) {
    .table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-actions {
        width: 100%;
    }

    .table-actions .btn {
        flex: 1;
    }

    .table-pagination {
        flex-direction: column;
        gap: 1rem;
    }

    .table-pagination-nav {
        width: 100%;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
    }
}

/* Table Cell Utilities */
.text-wrap {
    white-space: normal !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.w-auto {
    width: auto !important;
}

.w-1 {
    width: 1% !important;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}