/* ================================
   Base Table Styling
================================ */
.gsheet-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    font-size: 14px;
}

/* Cells */
.gsheet-table th,
.gsheet-table td,
.gsheet-table-disclosures th,
.gsheet-table-disclosures td {
    border: 1px solid #808080;
    padding: 6px;
    white-space: normal;
}

/* Header */
.gsheet-table th,
.gsheet-table-disclosures th {
    background-color: #f9f9f9;
    text-align: center;
    font-weight: 600;
}

/* ================================
   Alignment Helpers (from PHP)
================================ */
.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

/* ================================
   Scroll Wrapper
================================ */
.gsheet-scroll-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
}

/* Optional: smooth scrolling feel */
.gsheet-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.gsheet-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* ================================
   Sortable Table Styling
================================ */
.gsheet-table.sortable th {
    cursor: pointer;
}

/* Optional hover effect */
.gsheet-table.sortable th:hover {
    background-color: #eef6ff;
}

/* ================================
   Disclosures Table (Special Layout)
================================ */
.gsheet-table-disclosures tr th:first-child,
.gsheet-table-disclosures td:first-child {
    width: 17em;
    min-width: 17em;
    max-width: 17em;

    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}

/* Other columns */
.gsheet-table-disclosures td {
    width: 15em;
    min-width: 15em;
    max-width: 15em;
}

/* ================================
   Responsive Improvements
================================ */
@media (max-width: 768px) {

    .gsheet-table {
        font-size: 12px;
    }

    .gsheet-table th,
    .gsheet-table td {
        padding: 4px;
    }
}

/* ================================
   Loader
================================ */

.gs-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    font-size: 14px;
    color: #555;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #ccc;
    border-top: 3px solid #1765a5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

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