/* Advanced GSheet Table Sync – Frontend styles (v2.2.0) */
.agts-wrapper{margin:30px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.agts-meta{font-size:13px;color:#666;margin-bottom:10px;font-style:italic;text-align:right}
.agts-table-title{ text-align:center; padding:8px 0 15px; font-weight:700; font-size:20px; color:#151577; background:linear-gradient(135deg,#151577,#32b561); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.agts-scroll-hint{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:1px solid #ffc107;border-radius:8px;padding:12px 16px;margin-bottom:15px;font-size:14px;color:#856404;display:flex;align-items:center;gap:8px}
.agts-scroll-hint kbd{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px;color:#495057}
.agts-toolbar{display:flex;gap:10px;align-items:center;margin:8px 0 12px}
.agts-search{flex:1;min-width:220px;padding:10px 12px;border:1px solid #dfe3ea;border-radius:8px}
.agts-search-count{font-size:13px;color:#666}

.agts-table-container{position:relative; overflow-x:auto; border-radius:12px; box-shadow:0 10px 25px rgba(21,21,119,.08); background:#fff; scrollbar-width:thin; scrollbar-color:rgba(21,21,119,.3) rgba(21,21,119,.1); -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain}
.agts-table-container[data-wide="true"]::-webkit-scrollbar{height:8px}
.agts-table-container[data-wide="true"]::-webkit-scrollbar-track{background:rgba(21,21,119,.1);border-radius:4px}
.agts-table-container[data-wide="true"]::-webkit-scrollbar-thumb{background:rgba(21,21,119,.3);border-radius:4px}
.agts-table-container[data-wide="true"]::-webkit-scrollbar-thumb:hover{background:rgba(21,21,119,.5)}

.agts-table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid rgba(21,21,119,.1); border-radius:12px; overflow:hidden; margin:0; min-width:100%}
.agts-table-container[data-wide="true"] .agts-table{min-width:800px}
.agts-table td,.agts-table th{padding:16px 20px; border-right:1px solid rgba(21,21,119,.05); border-bottom:1px solid rgba(21,21,119,.05); text-align:left; vertical-align:middle; font-size:15px; color:#2c3e50; line-height:1.5; white-space:nowrap; min-width:120px}
.agts-table td:last-child,.agts-table th:last-child{border-right:none}
.agts-table tr:last-child td{border-bottom:none}

.agts-table thead tr{background:linear-gradient(135deg,#151577,#1a1a8a)}
.agts-table thead th{color:#fff;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:1px;padding:18px 20px;border-bottom:2px solid rgba(50,181,97,.5);border-right:1px solid rgba(255,255,255,.1);position:relative}
.agts-table[data-sticky="true"] thead.agts-sticky-header{position:sticky; top:0; z-index:10; background:linear-gradient(135deg,#151577,#1a1a8a)}
.agts-table[data-sticky="true"] thead.agts-sticky-header::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(50,181,97,.5),transparent)}

.agts-table tbody tr{background:transparent!important; transition:all .3s ease}
.agts-table tbody tr:hover{background:rgba(50,181,97,.05)!important; transform:scale(1.002)}
.agts-table tbody tr:hover td{color:#151577; font-weight:600}

.agts-load-more-container{text-align:center;padding:20px;background:linear-gradient(135deg,#f8f9fa,#e9ecef); border-top:1px solid rgba(21,21,119,.1); border-radius:0 0 12px 12px}
.agts-load-more-btn,.agts-show-all-btn{background:linear-gradient(135deg,#151577,#1a1a8a); color:#fff; border:none; padding:12px 24px; border-radius:25px; font-weight:600; cursor:pointer; margin:0 8px; transition:all .3s ease; font-size:14px; box-shadow:0 2px 10px rgba(21,21,119,.2)}
.agts-load-more-btn:hover,.agts-show-all-btn:hover{background:linear-gradient(135deg,#1a1a8a,#151577); transform:translateY(-2px); box-shadow:0 5px 15px rgba(21,21,119,.3)}
.agts-remaining{opacity:.8; font-size:13px}

/* Tablet */
@media (max-width:1024px) and (min-width:769px){
  .agts-table{font-size:14px}
  .agts-table td,.agts-table th{padding:14px 16px; font-size:14px; min-width:100px}
  .agts-table thead th{font-size:13px; padding:16px}
}

/* Mobile default = card layout */
@media (max-width:768px){
  .agts-table{font-size:13px;border-radius:8px}
  .agts-table td,.agts-table th{padding:12px 10px; font-size:13px; min-width:80px}
  .agts-table thead th{font-size:12px; padding:14px 10px; letter-spacing:.5px}
  .agts-table-title{font-size:18px; padding:6px 0 12px}
  .agts-load-more-btn,.agts-show-all-btn{padding:10px 16px; font-size:13px; margin:5px 4px}
  .agts-meta{font-size:12px; text-align:center}
}

/* Small mobile ≤480px: CARD MODE (default) */
@media (max-width:480px){
  .agts-wrapper[data-mobile-mode="card"] .agts-table,
  .agts-wrapper[data-mobile-mode="card"] .agts-table thead,
  .agts-wrapper[data-mobile-mode="card"] .agts-table tbody,
  .agts-wrapper[data-mobile-mode="card"] .agts-table th,
  .agts-wrapper[data-mobile-mode="card"] .agts-table td,
  .agts-wrapper[data-mobile-mode="card"] .agts-table tr { display:block !important; }
  .agts-wrapper[data-mobile-mode="card"] .agts-table{border:none!important;background:transparent!important;width:100%!important;min-width:auto!important}
  .agts-wrapper[data-mobile-mode="card"] .agts-table thead tr{position:absolute!important;top:-9999px!important;left:-9999px!important}
  .agts-wrapper[data-mobile-mode="card"] .agts-table tbody tr{border:1px solid rgba(21,21,119,.15)!important;margin-bottom:15px!important;border-radius:8px!important;background:#fff!important;box-shadow:0 2px 8px rgba(21,21,119,.08)!important;display:block!important}
  .agts-wrapper[data-mobile-mode="card"] .agts-table td{border:none!important;position:relative!important;padding:12px 15px 12px 45%!important;font-size:13px!important;white-space:normal!important;word-wrap:break-word!important;display:block!important;text-align:left!important;line-height:1.4!important}
  .agts-wrapper[data-mobile-mode="card"] .agts-table td:before{content:attr(data-label)!important;position:absolute!important;left:15px!important;width:40%!important;padding-right:10px!important;white-space:nowrap!important;font-weight:700!important;color:#151577!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.5px!important;overflow:hidden!important;text-overflow:ellipsis!important;top:12px!important}
  .agts-wrapper[data-mobile-mode="card"] .agts-load-more-container{border-radius:0 0 6px 6px!important;padding:15px!important}
  .agts-wrapper[data-mobile-mode="card"] .agts-load-more-btn,
  .agts-wrapper[data-mobile-mode="card"] .agts-show-all-btn{display:block!important;width:100%!important;margin:5px 0!important;padding:12px!important;box-sizing:border-box!important}
}

/* Small mobile ≤480px: SCROLL MODE */
@media (max-width:480px){
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table,
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table thead,
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table tbody,
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table tr,
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table th,
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table td { display:table !important; }
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table { min-width:720px; border:1px solid rgba(21,21,119,.1) }
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table th,
  .agts-wrapper[data-mobile-mode="scroll"] .agts-table td { white-space:nowrap }
}

/* Very small mobile ≤320px tweaks */
@media (max-width:320px){
  .agts-wrapper[data-mobile-mode="card"] .agts-table td{padding:6px 0 6px 35%;font-size:12px}
  .agts-wrapper[data-mobile-mode="card"] .agts-table td:before{width:30%;font-size:11px;top:6px}
  .agts-scroll-hint{font-size:11px;padding:6px 8px}
}
