/* Bootstrap 5 enhancements for PDS (Particularly Dangerous Situation) page */

/* Tabulator container styling */
#tabulator-container {
    margin-top: 1rem;
}

/* Table controls styling */
#table-controls {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--bs-light);
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
}

#table-controls .btn-group {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

#table-controls .btn {
    margin-right: 0.25rem;
}

/* Enhance the "Make Interactive" button */
#makefancy {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#makefancy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#makefancy:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Original table wrapper */
#original-table {
    margin-top: 1rem;
}

/* Tabulator table customizations */
.tabulator {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

.tabulator .tabulator-header {
    background: var(--bs-primary);
    color: white;
    border-bottom: 2px solid var(--bs-primary);
}

.tabulator .tabulator-header .tabulator-col {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--bs-primary);
}

.tabulator .tabulator-header .tabulator-col-title {
    font-weight: 600;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tabulator .tabulator-header .tabulator-col-sorter {
    color: white !important;
}

.tabulator .tabulator-header .tabulator-header-filter input {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
    color: var(--bs-dark);
}

.tabulator .tabulator-header .tabulator-header-filter input:focus {
    background-color: white;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Row styling */
.tabulator .tabulator-row:nth-child(even) {
    background-color: var(--bs-light);
}

.tabulator .tabulator-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.tabulator .tabulator-row .tabulator-cell {
    border-right: 1px solid var(--bs-border-color);
    padding: 0.75rem 0.5rem;
}

/* Link styling in table */
.tabulator .tabulator-row .tabulator-cell a {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}

.tabulator .tabulator-row .tabulator-cell a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* Pagination styling */
.tabulator .tabulator-footer {
    background-color: var(--bs-light);
    border-top: 1px solid var(--bs-border-color);
}

.tabulator .tabulator-footer .tabulator-page {
    background-color: white;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-primary);
}

.tabulator .tabulator-footer .tabulator-page:hover {
    background-color: var(--bs-primary);
    color: white;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #table-controls {
        padding: 0.75rem;
    }
    
    #table-controls .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    #table-controls .btn {
        margin-right: 0;
        margin-bottom: 0.25rem;
    }
    
    .tabulator .tabulator-header .tabulator-col {
        min-width: 120px;
    }
}

/* Loading spinner */
.tabulator-loader {
    border: 3px solid var(--bs-light);
    border-top: 3px solid var(--bs-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert styling for status messages */
.alert-info {
    background: linear-gradient(135deg, rgba(var(--bs-info-rgb), 0.1), rgba(var(--bs-primary-rgb), 0.1));
    border-color: var(--bs-info);
    color: var(--bs-info-text);
}

/* Breadcrumb enhancement */
.breadcrumb {
    background: linear-gradient(135deg, var(--bs-light), rgba(var(--bs-primary-rgb), 0.05));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

/* Page header styling */
h3 {
    color: var(--bs-primary);
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-primary);
}

/* Card-like styling for content sections */
.content-card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--bs-border-color);
}

/* Button group improvements */
.btn-group .btn {
    border-radius: 0.375rem;
    margin-right: 0.25rem;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

/* Code block styling */
code {
    background-color: var(--bs-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    color: var(--bs-dark);
    border: 1px solid var(--bs-border-color);
}