/**
 * Portal Table Style Variations
 * Provides 4 different table styles: Modern, Classic, Compact, Cards
 */

/* Base table styles - common to all variations */
.replybridge-tickets-table {
    width: 100%;
    margin-bottom: 24px;
}

/* ========================================
   MODERN STYLE (Default)
   Clean design with hover effects
   ======================================== */
.replybridge-table-modern {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--portal-header-bg, #ffffff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.replybridge-table-modern thead {
    background: var(--portal-bg, #f5f6fa);
}

.replybridge-table-modern th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--portal-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--portal-border, #dee2e6);
}

.replybridge-table-modern td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--portal-border, #dee2e6);
    color: var(--portal-text, #212529);
}

.replybridge-table-modern tbody tr:last-child td {
    border-bottom: none;
}

.replybridge-table-modern tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

.replybridge-table-modern tbody tr:hover {
    background: var(--portal-bg, #f8f9fa);
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 var(--portal-primary, #2196f3);
}

/* ========================================
   CLASSIC STYLE
   Traditional table with borders
   ======================================== */
.replybridge-table-classic {
    border-collapse: collapse;
    border: 1px solid var(--portal-border, #dee2e6);
    background: var(--portal-header-bg, #ffffff);
}

.replybridge-table-classic th,
.replybridge-table-classic td {
    padding: 12px 16px;
    border: 1px solid var(--portal-border, #dee2e6);
}

.replybridge-table-classic thead {
    background: var(--portal-bg, #f8f9fa);
}

.replybridge-table-classic th {
    font-weight: 600;
    text-align: left;
    color: var(--portal-text, #212529);
}

.replybridge-table-classic tbody tr:nth-child(even) {
    background: var(--portal-bg, #f8f9fa);
}

.replybridge-table-classic tbody tr:hover {
    background: #e9ecef;
}

/* ========================================
   COMPACT STYLE
   Minimal spacing for data density
   ======================================== */
.replybridge-table-compact {
    border-collapse: collapse;
    background: var(--portal-header-bg, #ffffff);
    font-size: 14px;
}

.replybridge-table-compact th,
.replybridge-table-compact td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--portal-border, #dee2e6);
}

.replybridge-table-compact thead {
    border-bottom: 2px solid var(--portal-primary, #2196f3);
}

.replybridge-table-compact th {
    font-weight: 600;
    text-align: left;
    color: var(--portal-text, #212529);
    font-size: 13px;
}

.replybridge-table-compact tbody tr:hover {
    background: var(--portal-bg, #f8f9fa);
}

.replybridge-table-compact .replybridge-status-badge {
    padding: 2px 8px;
    font-size: 12px;
}

/* ========================================
   CARDS STYLE
   Mobile-friendly card layout
   ======================================== */
.replybridge-table-cards {
    display: block;
    background: transparent;
}

.replybridge-table-cards thead {
    display: none;
}

.replybridge-table-cards tbody {
    display: block;
}

.replybridge-table-cards tr {
    display: block;
    background: var(--portal-header-bg, #ffffff);
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
}

.replybridge-table-cards tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.replybridge-table-cards td {
    display: block;
    padding: 8px 0;
    border: none;
    position: relative;
}

.replybridge-table-cards td:first-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--portal-text, #212529);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--portal-border, #dee2e6);
}

.replybridge-table-cards td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--portal-text-muted, #6c757d);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.replybridge-table-cards td:first-child:before {
    display: none;
}

/* Status badge adjustments for cards */
.replybridge-table-cards .replybridge-status-badge {
    display: inline-block;
    margin-top: 4px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    /* Keep tables horizontal on mobile with horizontal scroll */
    .replybridge-tickets-table:not(.replybridge-table-cards) {
        display: table;
        width: 100%;
        min-width: 600px; /* Minimum width to prevent cramping */
    }
    
    /* Add horizontal scroll wrapper */
    .replybridge-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px; /* Negative margin to allow full-width scroll */
        padding: 0 15px;
    }
    
    /* Adjust font sizes for mobile */
    .replybridge-tickets-table th,
    .replybridge-tickets-table td {
        font-size: 14px;
        padding: 10px 8px;
    }
    
    /* Make status badges smaller on mobile */
    .replybridge-tickets-table .replybridge-status-badge {
        font-size: 12px;
        padding: 2px 8px;
    }
    
    /* Cards style stays as cards on mobile */
    .replybridge-table-cards tbody,
    .replybridge-table-cards tr,
    .replybridge-table-cards td {
        display: block;
    }
}

/* ========================================
   STATUS BADGE STYLES
   Common across all table styles
   ======================================== */
.replybridge-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}

.replybridge-status-badge.status-open {
    background: #4caf5015;
    color: #4caf50;
}

.replybridge-status-badge.status-pending {
    background: #ff980015;
    color: #ff9800;
}

.replybridge-status-badge.status-resolved {
    background: #2196f315;
    color: #2196f3;
}

.replybridge-status-badge.status-closed {
    background: #f4433615;
    color: #f44336;
}

/* Status icons */
.status-icon {
    font-size: 12px;
    line-height: 1;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.replybridge-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--portal-header-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.replybridge-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.replybridge-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--portal-text, #212529);
    margin-bottom: 8px;
}

.replybridge-empty-text {
    color: var(--portal-text-muted, #6c757d);
    margin-bottom: 24px;
}