/* ============================================================
   GSDT – Google Sheet Dynamic Table  |  table.css  v1.1
   ============================================================ */

/* ── CSS variables (light theme) ── */
.gsdt-wrapper {
    --gsdt-accent:       #2563eb;
    --gsdt-accent-h:     #1d4ed8;
    --gsdt-bg:           #ffffff;
    --gsdt-bg-2:         #f8fafc;
    --gsdt-border:       #e2e8f0;
    --gsdt-text:         #1e293b;
    --gsdt-text-light:   #64748b;
    --gsdt-th-bg:        #f1f5f9;
    --gsdt-th-text:      #334155;
    --gsdt-row-hover:    #eff6ff;
    --gsdt-row-click:    #dbeafe;
    --gsdt-radius:       10px;
    --gsdt-shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --gsdt-modal-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
    --gsdt-font:         'Segoe UI', system-ui, -apple-system, sans-serif;
    font-family: var(--gsdt-font);
    color: var(--gsdt-text);
    box-sizing: border-box;
}

/* ── Dark theme ── */
.gsdt-wrapper.gsdt-dark {
    --gsdt-bg:           #0f172a;
    --gsdt-bg-2:         #1e293b;
    --gsdt-border:       #334155;
    --gsdt-text:         #e2e8f0;
    --gsdt-text-light:   #94a3b8;
    --gsdt-th-bg:        #1e293b;
    --gsdt-th-text:      #94a3b8;
    --gsdt-row-hover:    #1e3a5f;
    --gsdt-row-click:    #1e3a5f;
    --gsdt-accent:       #3b82f6;
    --gsdt-accent-h:     #60a5fa;
    --gsdt-shadow:       0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --gsdt-modal-shadow: 0 20px 60px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Wrapper card ── */
.gsdt-wrapper {
    background:    var(--gsdt-bg);
    border:        1px solid var(--gsdt-border);
    border-radius: var(--gsdt-radius);
    box-shadow:    var(--gsdt-shadow);
    overflow:      hidden;
    margin:        1.5rem 0;
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.gsdt-header {
    padding:       1rem 1.25rem;
    border-bottom: 1px solid var(--gsdt-border);
    background:    var(--gsdt-bg-2);
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           .75rem;
}

.gsdt-title {
    margin:      0;
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--gsdt-text);
    flex:        1;
    min-width:   140px;
}

.gsdt-controls {
    display:         flex;
    align-items:     center;
    gap:             .6rem;
    flex-wrap:       wrap;
    flex:            2;
    justify-content: flex-end;
}

/* Search box */
.gsdt-search-wrap {
    position:  relative;
    flex:      1;
    max-width: 280px;
    min-width: 160px;
}

.gsdt-search-icon {
    position:       absolute;
    left:           .65rem;
    top:            50%;
    transform:      translateY(-50%);
    color:          var(--gsdt-text-light);
    font-size:      1.1rem;
    pointer-events: none;
    user-select:    none;
}

.gsdt-search {
    width:         100%;
    padding:       .45rem .75rem .45rem 2rem;
    border:        1px solid var(--gsdt-border);
    border-radius: 6px;
    background:    var(--gsdt-bg);
    color:         var(--gsdt-text);
    font-size:     .875rem;
    transition:    border-color .15s, box-shadow .15s;
    outline:       none;
}
.gsdt-search:focus {
    border-color: var(--gsdt-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--gsdt-accent) 18%, transparent);
}

/* Buttons */
.gsdt-right-controls { display: flex; gap: .4rem; }

.gsdt-btn {
    padding:       .4rem .9rem;
    border:        1px solid var(--gsdt-border);
    border-radius: 6px;
    background:    var(--gsdt-bg);
    color:         var(--gsdt-text-light);
    font-size:     .825rem;
    cursor:        pointer;
    transition:    background .15s, color .15s, border-color .15s, transform .1s;
    white-space:   nowrap;
    font-family:   var(--gsdt-font);
}
.gsdt-btn:hover:not(:disabled) {
    background:   var(--gsdt-accent);
    color:        #fff;
    border-color: var(--gsdt-accent);
    transform:    translateY(-1px);
}
.gsdt-btn:disabled { opacity: .45; cursor: default; }

/* ═══════════════════════════════════════
   LOADING SPINNER
═══════════════════════════════════════ */
.gsdt-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .75rem;
    padding:         3rem 1rem;
    color:           var(--gsdt-text-light);
    font-size:       .9rem;
}
.gsdt-spinner {
    width:            24px;
    height:           24px;
    border:           3px solid var(--gsdt-border);
    border-top-color: var(--gsdt-accent);
    border-radius:    50%;
    animation:        gsdt-spin .7s linear infinite;
    flex-shrink:      0;
}
@keyframes gsdt-spin { to { transform: rotate(360deg); } }

/* Empty / error */
.gsdt-empty {
    text-align:  center;
    padding:     2.5rem 1rem;
    color:       var(--gsdt-text-light);
    font-size:   .9rem;
}

/* ═══════════════════════════════════════
   TABLE SCROLL WRAPPER
═══════════════════════════════════════ */
.gsdt-table-wrap {
    overflow-x:              auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.gsdt-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
    min-width:       400px;
    table-layout:    fixed;    /* honours col widths */
}

/* ── Head ── */
.gsdt-table thead tr {
    background:    var(--gsdt-th-bg);
    border-bottom: 2px solid var(--gsdt-border);
}
.gsdt-table th {
    padding:        .65rem 1rem;
    text-align:     left;
    font-weight:    600;
    font-size:      .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          var(--gsdt-th-text);
    white-space:    nowrap;
    cursor:         pointer;
    user-select:    none;
    transition:     background .15s;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.gsdt-table th:hover { background: color-mix(in srgb, var(--gsdt-accent) 8%, var(--gsdt-th-bg)); }

.gsdt-sort-arrow {
    display:     inline-block;
    margin-left: .25rem;
    font-size:   .85em;
    color:       var(--gsdt-accent);
}
.gsdt-sort-idle { color: var(--gsdt-text-light); opacity: .4; }

/* ── Body rows ── */
.gsdt-table tbody tr {
    border-bottom: 1px solid var(--gsdt-border);
    transition:    background .12s;
}
.gsdt-table tbody tr:last-child { border-bottom: none; }
.gsdt-table tbody tr:hover      { background: var(--gsdt-row-hover); }

/* Clickable rows */
.gsdt-table tbody tr.gsdt-row-clickable {
    cursor: pointer;
}
.gsdt-table tbody tr.gsdt-row-clickable:hover {
    background: var(--gsdt-row-click);
}
.gsdt-table tbody tr.gsdt-row-clickable:hover td {
    color: var(--gsdt-accent);
}

/* Zebra stripe */
.gsdt-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--gsdt-bg-2) 60%, var(--gsdt-bg));
}
.gsdt-table tbody tr:nth-child(even):hover { background: var(--gsdt-row-hover); }
.gsdt-table tbody tr.gsdt-row-clickable:nth-child(even):hover { background: var(--gsdt-row-click); }

/* ── Cells ── */
.gsdt-table td {
    padding:        .6rem 1rem;
    vertical-align: middle;
    color:          var(--gsdt-text);
    overflow:       hidden;
}

/* ── Fixed row height — text clamp ── */
.gsdt-cell-clamp {
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
    text-overflow: ellipsis;
    word-break:    break-word;
}

/* Links inside cells */
.gsdt-table td a {
    color:           var(--gsdt-accent);
    text-decoration: none;
    word-break:      break-all;
}
.gsdt-table td a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.gsdt-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .5rem;
    padding:         .75rem 1.25rem;
    border-top:      1px solid var(--gsdt-border);
    background:      var(--gsdt-bg-2);
}

.gsdt-info {
    font-size: .8rem;
    color:     var(--gsdt-text-light);
}

/* Pagination */
.gsdt-pagination { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

.gsdt-page-btn {
    min-width:     32px;
    height:        32px;
    padding:       0 .5rem;
    border:        1px solid var(--gsdt-border);
    border-radius: 6px;
    background:    var(--gsdt-bg);
    color:         var(--gsdt-text);
    font-size:     .825rem;
    cursor:        pointer;
    transition:    background .15s, color .15s, border-color .15s;
    font-family:   var(--gsdt-font);
}
.gsdt-page-btn:hover:not(:disabled):not(.gsdt-page-active) {
    background:   var(--gsdt-row-hover);
    border-color: var(--gsdt-accent);
    color:        var(--gsdt-accent);
}
.gsdt-page-btn.gsdt-page-active {
    background:   var(--gsdt-accent);
    border-color: var(--gsdt-accent);
    color:        #fff;
    font-weight:  700;
    cursor:       default;
}
.gsdt-page-btn:disabled { opacity: .35; cursor: default; }

.gsdt-ellipsis {
    padding:     0 .25rem;
    color:       var(--gsdt-text-light);
    font-size:   .875rem;
    user-select: none;
}

/* ═══════════════════════════════════════
   DETAIL MODAL
═══════════════════════════════════════ */
.gsdt-modal-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, .45);
    z-index:          99999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          1rem;
    backdrop-filter:  blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.gsdt-modal {
    background:    var(--gsdt-bg);
    border:        1px solid var(--gsdt-border);
    border-radius: 12px;
    box-shadow:    var(--gsdt-modal-shadow);
    width:         100%;
    max-width:     560px;
    max-height:    85vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    animation:     gsdt-modal-in .18s ease;
}
@keyframes gsdt-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.gsdt-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid var(--gsdt-border);
    background:      var(--gsdt-bg-2);
    flex-shrink:     0;
}

.gsdt-modal-title {
    font-weight: 600;
    font-size:   1rem;
    color:       var(--gsdt-text);
}

.gsdt-modal-close {
    width:         30px;
    height:        30px;
    border:        none;
    border-radius: 6px;
    background:    transparent;
    color:         var(--gsdt-text-light);
    font-size:     1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .15s, color .15s;
    line-height:   1;
}
.gsdt-modal-close:hover { background: #fee2e2; color: #b91c1c; }
.gsdt-dark .gsdt-modal-close:hover { background: rgba(185,28,28,.25); color: #f87171; }

.gsdt-modal-body {
    overflow-y: auto;
    flex:       1;
    padding:    .5rem 0;
    background: var(--gsdt-bg);
    
}

/* Detail table */
.gsdt-detail-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
    background: var(--gsdt-bg);
}
.gsdt-detail-table tr {
    border-bottom: 1px solid var(--gsdt-border);
    transition:    background .1s;
}
.gsdt-detail-table tr:last-child { border-bottom: none; }
.gsdt-detail-table tr:hover { background: var(--gsdt-row-hover); }

.gsdt-detail-table th {
    width:          35%;
    padding:        .65rem 1.25rem;
    text-align:     left;
    font-size:      .78rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          var(--gsdt-th-text);
    background:     var(--gsdt-th-bg);
    vertical-align: top;
    word-break:     break-word;
}
.gsdt-detail-table td {
    padding:     .65rem 1.25rem;
    color:       var(--gsdt-text);
    word-break:  break-word;
    line-height: 1.55;
}
.gsdt-detail-table td a {
    color:           var(--gsdt-accent);
    text-decoration: none;
    word-break:      break-all;
}
.gsdt-detail-table td a:hover { text-decoration: underline; }

.gsdt-detail-empty { color: var(--gsdt-text-light); font-style: italic; }

/* Prevent body scroll when modal is open */
body.gsdt-no-scroll { overflow: hidden; }

/* ═══════════════════════════════════════
   SHORTCODE ERROR
═══════════════════════════════════════ */
.gsdt-error {
    border:        1px solid #fca5a5;
    background:    #fff1f2;
    color:         #b91c1c;
    border-radius: 6px;
    padding:       .75rem 1rem;
    font-size:     .875rem;
    margin:        1rem 0;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 600px) {
    .gsdt-header          { flex-direction: column; align-items: stretch; }
    .gsdt-controls        { justify-content: stretch; }
    .gsdt-search-wrap     { max-width: 100%; }
    .gsdt-footer          { flex-direction: column; align-items: flex-start; }
    .gsdt-table th,
    .gsdt-table td        { padding: .5rem .7rem; font-size: .8rem; }
    .gsdt-modal           { max-height: 92vh; border-radius: 10px; }
    .gsdt-detail-table th { width: 40%; padding: .55rem .85rem; }
    .gsdt-detail-table td { padding: .55rem .85rem; }
}