/**
 * Responsive Tables and Action Columns
 * 
 * @package app\assets\css
 */

/* Action Column Improvements */
.action-column {
    white-space: nowrap;
    min-width: 120px;
}

.action-column .btn {
    margin: 2px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Horizontal action buttons for mobile */
@media (max-width: 768px) {
    .action-column {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: flex-start;
        min-width: auto;
    }
    
    .action-column .btn {
        flex: 0 0 auto;
        margin: 0;
    }
    
    /* Icon-only buttons on mobile */
    .action-column .btn-sm {
        padding: 0.375rem 0.5rem;
        min-width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide button text on very small screens, show icon only */
    .action-column .btn-text {
        display: none;
    }
}

/* Table Responsive Improvements */
@media (max-width: 991.98px) {
    .table-responsive {
        border: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem;
        vertical-align: middle;
    }
    
    /* Sticky first column on mobile */
    .table-responsive .table thead th:first-child,
    .table-responsive .table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: inherit;
    }
    
    .table-responsive .table thead th:first-child {
        z-index: 11;
    }
}

/* GridView Action Column */
.grid-view .action-column a {
    display: inline-block;
    margin: 0 2px;
}

@media (max-width: 768px) {
    .grid-view .action-column {
        text-align: left;
    }
    
    .grid-view .action-column a {
        margin: 2px;
    }
}

/* Button Group for Actions */
.btn-group-vertical.action-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.btn-group-vertical.action-buttons .btn {
    border-radius: 0.25rem !important;
    margin: 0;
}

/* Tooltip for icon-only buttons */
[data-toggle="tooltip"] {
    cursor: pointer;
}

/* Action buttons with icons */
.action-column .btn i {
    margin-right: 0;
}

@media (min-width: 769px) {
    .action-column .btn i {
        margin-right: 5px;
    }
    
    .action-column .btn-text {
        display: inline;
    }
}

/* Compact table for mobile */
@media (max-width: 576px) {
    .table-compact {
        font-size: 0.8rem;
    }
    
    .table-compact th,
    .table-compact td {
        padding: 0.4rem;
    }
    
    /* Stack table cells on very small screens */
    .table-stacked thead {
        display: none;
    }
    
    .table-stacked tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }
    
    .table-stacked tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
        border: none;
        border-bottom: 1px solid #dee2e6;
    }
    
    .table-stacked tbody td:last-child {
        border-bottom: none;
    }
    
    .table-stacked tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 1rem;
    }
}

/* Horizontal scroll indicator */
.table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.table-responsive.has-scroll::after {
    opacity: 1;
}

/* Action dropdown for many actions */
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    min-width: 150px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 0.25rem;
    z-index: 1000;
    margin-top: 5px;
}

.action-dropdown.show .action-dropdown-menu {
    display: block;
}

.action-dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: background-color 0.2s;
}

.action-dropdown-menu a:hover {
    background-color: #f8f9fa;
}

.action-dropdown-menu a i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}