/* ====================================================================
   Responsive Tables - Global Styles for TwitterBotSettings
   ==================================================================== */

/* Force responsive container for all tables */
.table-responsive,
.table-container,
.table-wrapper {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Prevent table overflow */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    table-layout: auto;
}

/* Enhanced scrollbar for all table containers */
.table-responsive::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar {
    height: 10px;
}

.table-responsive::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track {
    background-color: #f1f3f4;
    border-radius: 5px;
}

.table-responsive::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb {
    background-color: #007bff;
    border-radius: 5px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
}

/* Table cell improvements for better text display */
.table th,
.table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
    font-size: 0.9rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-height: 40px;
}

/* Table header styling */
.table thead th {
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Ensure table cells have adequate spacing */
.table td {
    min-width: 100px;
    max-width: 300px;
}

/* Specific column sizing for common columns */
.table .col-id {
    min-width: 80px;
    max-width: 120px;
}

.table .col-name,
.table .col-title {
    min-width: 150px;
    max-width: 250px;
}

.table .col-description,
.table .col-content {
    min-width: 200px;
    max-width: 400px;
}

.table .col-date,
.table .col-datetime {
    min-width: 120px;
    max-width: 180px;
}

.table .col-status {
    min-width: 100px;
    max-width: 120px;
}

.table .col-actions {
    min-width: 120px;
    max-width: 180px;
    white-space: nowrap;
}

/* Text truncation with ellipsis for long content */
.table .text-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expandable text cells - show full content on hover */
.table td.expandable {
    cursor: help;
    position: relative;
}

.table td.expandable:hover {
    white-space: normal;
    word-wrap: break-word;
    z-index: 100;
}

/* Responsive design for smaller screens */
@media (max-width: 1400px) {
    .table th,
    .table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 1200px) {
    .table th,
    .table td {
        padding: 0.4rem;
        font-size: 0.8rem;
        min-width: 80px;
    }
}

@media (max-width: 992px) {
    .table th,
    .table td {
        padding: 0.3rem;
        font-size: 0.75rem;
        min-width: 70px;
    }
    
    /* Stack action buttons vertically on smaller screens */
    .table .col-actions .btn-group {
        flex-direction: column;
    }
    
    .table .col-actions .btn {
        margin-bottom: 0.25rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .table {
        font-size: 0.7rem;
    }
    
    .table th,
    .table td {
        padding: 0.25rem;
        min-width: 60px;
    }
}

/* Card body padding adjustments for tables */
.card-body.p-0 .table {
    margin-bottom: 0;
}

.card-body.p-0 .table thead th:first-child {
    border-top-left-radius: 0;
}

.card-body.p-0 .table thead th:last-child {
    border-top-right-radius: 0;
}

/* Hover effects for table rows */
.table-hover tbody tr {
    transition: background-color 0.15s ease-in-out;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
    cursor: pointer;
}

/* Selected/Active row styling */
.table tr.table-active,
.table tr.selected {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

/* Better button spacing in table cells */
.table .btn {
    margin: 0.1rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.table .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}

/* Badge improvements in tables */
.table .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    white-space: nowrap;
}

/* Checkbox column */
.table .checkbox-column {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 0.5rem;
}

/* Action column improvements */
.table .action-column {
    white-space: nowrap;
    text-align: center;
}

/* ====================================================================
   Dark Mode Support
   ==================================================================== */

body.theme-dark .table-responsive::-webkit-scrollbar-track,
.theme-dark .table-responsive::-webkit-scrollbar-track,
[data-theme="black"] .table-responsive::-webkit-scrollbar-track,
[data-theme-class="theme-dark"] .table-responsive::-webkit-scrollbar-track {
    background-color: #4b5563 !important;
}

body.theme-dark .table-responsive::-webkit-scrollbar-thumb,
.theme-dark .table-responsive::-webkit-scrollbar-thumb,
[data-theme="black"] .table-responsive::-webkit-scrollbar-thumb,
[data-theme-class="theme-dark"] .table-responsive::-webkit-scrollbar-thumb {
    background-color: #60a5fa !important;
}

body.theme-dark .table-responsive::-webkit-scrollbar-thumb:hover,
.theme-dark .table-responsive::-webkit-scrollbar-thumb:hover,
[data-theme="black"] .table-responsive::-webkit-scrollbar-thumb:hover,
[data-theme-class="theme-dark"] .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #3b82f6 !important;
}

body.theme-dark .table thead th,
.theme-dark .table thead th,
[data-theme="black"] .table thead th,
[data-theme-class="theme-dark"] .table thead th {
    background-color: #374151 !important;
    color: #f1f5f9 !important;
    border-color: #6b7280 !important;
}

body.theme-dark .table td,
.theme-dark .table td,
[data-theme="black"] .table td,
[data-theme-class="theme-dark"] .table td {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #6b7280 !important;
}

body.theme-dark .table-hover tbody tr:hover,
.theme-dark .table-hover tbody tr:hover,
[data-theme="black"] .table-hover tbody tr:hover,
[data-theme-class="theme-dark"] .table-hover tbody tr:hover {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

body.theme-dark .table tr.table-active,
body.theme-dark .table tr.selected,
.theme-dark .table tr.table-active,
.theme-dark .table tr.selected,
[data-theme="black"] .table tr.table-active,
[data-theme="black"] .table tr.selected,
[data-theme-class="theme-dark"] .table tr.table-active,
[data-theme-class="theme-dark"] .table tr.selected {
    background-color: rgba(96, 165, 250, 0.2) !important;
}

/* ====================================================================
   Print-friendly styles
   ==================================================================== */

@media print {
    .table {
        border-collapse: collapse;
    }
    
    .table th,
    .table td {
        border: 1px solid #000;
        padding: 0.5rem;
        font-size: 10pt;
    }
    
    .table .col-actions {
        display: none;
    }
    
    .table .checkbox-column {
        display: none;
    }
}

/* ====================================================================
   Utility classes for table content
   ==================================================================== */

/* Prevent text wrapping in specific cells */
.table .nowrap {
    white-space: nowrap;
}

/* Allow text wrapping in specific cells */
.table .wrap {
    white-space: normal;
    word-wrap: break-word;
}

/* Center align content */
.table .text-center {
    text-align: center;
}

/* Right align content */
.table .text-right {
    text-align: right;
}

/* Bold text */
.table .font-weight-bold {
    font-weight: 600;
}

/* Muted text */
.table .text-muted {
    color: #6c757d !important;
}

/* Loading state for tables */
.table-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Empty state */
.table-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
    font-style: italic;
}

/* ====================================================================
   Specific table enhancements for common use cases
   ==================================================================== */

/* Sortable column headers */
.table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

.table thead th.sortable:hover {
    background-color: #e9ecef;
}

body.theme-dark .table thead th.sortable:hover,
.theme-dark .table thead th.sortable:hover,
[data-theme="black"] .table thead th.sortable:hover,
[data-theme-class="theme-dark"] .table thead th.sortable:hover {
    background-color: #4b5563 !important;
}

/* Sort indicators */
.table thead th.sortable::after {
    content: '↕';
    margin-left: 0.5rem;
    opacity: 0.3;
}

.table thead th.sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
}

.table thead th.sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
}