/* ═══════════════════════════════════════════════
   gst.css — GST Reports Module
═══════════════════════════════════════════════ */

/* ── GST Tab bar (underline style) ──────────── */
.gst-tab-bar {
  display:flex; gap:0; margin-bottom:20px;
  border-bottom:1.5px solid var(--border);
}
.gst-tab {
  position:relative; padding:10px 20px;
  border:none; background:transparent;
  color:var(--text-light); cursor:pointer;
  font-size:0.83rem; font-weight:600;
  transition:color 0.2s;
}
.gst-tab::after {
  content:''; position:absolute;
  bottom:-1.5px; left:0; right:0;
  height:2.5px; background:var(--t0);
  border-radius:99px; transform:scaleX(0);
  transition:transform 0.22s cubic-bezier(.34,1.56,.64,1);
}
.gst-tab.active { color: var(--t0) !important; }
.gst-tab.active::after { transform:scaleX(1); }

/* ── Month badge ─────────────────────────────── */
.gst-month-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:999px;
  background:rgba(13,148,136,0.09);
  border:1px solid rgba(13,148,136,0.22);
  font-size:0.76rem; font-weight:700;
  color:var(--t0);
}

/* ── Month navigation (prev/next arrows around badge) ──────────── */
.gst-month-nav {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:16px;
}
.gst-month-arrow {
  width:32px; height:32px; border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--card-bg); color:var(--text-main);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.gst-month-arrow .material-icons-outlined { font-size:1.15rem !important; }
.gst-month-arrow:hover:not(:disabled) {
  border-color:var(--t0); color:var(--t0);
  background:rgba(13,148,136,0.06);
}
.gst-month-arrow:active:not(:disabled) { transform:scale(0.9); }
.gst-month-arrow:disabled { opacity:0.35; cursor:default; }

/* ── Stat cards ──────────────────────────────── */
.gst-stat-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; margin-bottom:20px;
}
@media(max-width:560px){.gst-stat-row{grid-template-columns:repeat(2,1fr)}}
.gst-stat-card {
  padding:13px 14px; border-radius:14px;
  background:var(--card-bg); border:1.5px solid var(--border);
  display:flex; flex-direction:column; gap:5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.gst-stat-card.teal {
  background:linear-gradient(145deg,var(--t0),var(--t2));
  border-color:transparent;
  box-shadow:0 6px 24px rgba(13,148,136,0.30);
}
.gst-stat-label {
  font-size:0.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-light);
}
.gst-stat-card.teal .gst-stat-label{color:rgba(255,255,255,0.65)}
.gst-stat-value {
  font-family:'JetBrains Mono',monospace;
  font-size:1.05rem; font-weight:800; color:var(--text-main);
}
.gst-stat-card.teal .gst-stat-value{color:white}

/* ── Section headers B2C ───────────────── */
.gst-section-header {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; padding:11px 14px;
  border-radius:12px; margin-bottom:10px;
  font-size:0.82rem; font-weight:600;
  color:var(--text-main);
  background:linear-gradient(90deg,rgba(13,148,136,0.07),transparent);
  border-left:3px solid var(--t0);
}
.gst-section-pill {
  padding:3px 11px; border-radius:999px;
  font-size:0.68rem; font-weight:800; letter-spacing:0.07em;
  background:linear-gradient(135deg,var(--t0),var(--t1)); color:white;
}
.gst-section-tip{margin-left:auto;font-size:0.7rem;color:var(--text-light);font-weight:400}

/* ── GST Table ───────────────────────────────── */
.gst-table-wrapper {
  border-radius:14px; overflow-x:auto; overflow-y:hidden;
  border:1.5px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  margin-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.gst-table{width:100%;min-width:560px;border-collapse:collapse;font-size:0.8rem}
.gst-table thead tr{
  background:linear-gradient(90deg,var(--t0),var(--t1));
}
.gst-table th{
  color:white; padding:10px 11px; text-align:left;
  white-space:nowrap; font-size:0.71rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.07em;
}
.gst-table th:not(:first-child):not(:nth-child(2)){text-align:right}
.gst-table td{padding:9px 11px;border-bottom:1px solid var(--border);color:var(--text-light)}
.gst-table td:not(:first-child):not(:nth-child(2)){
  text-align:right; font-family:'JetBrains Mono',monospace; font-size:0.78rem;
}
.gst-table tbody tr:nth-child(even){background:rgba(13,148,136,0.025)}
.gst-table tbody tr:hover{background:rgba(13,148,136,0.06)}
.gst-table tbody tr:last-child td{border-bottom:none}
.gst-table tfoot tr td{
  background:rgba(13,148,136,0.07);
  border-top:2px solid rgba(13,148,136,0.20);
  font-weight:800; color:var(--text-main);
  padding:10px 11px; font-family:'JetBrains Mono',monospace;
}
.gst-table tfoot tr td:not(:first-child):not(:nth-child(2)){text-align:right}

/* ── Sticky leading column(s) — stay visible while scrolling horizontally ──
   Without this, scrolling right on a narrow phone loses all context for
   which row you're looking at (which HSN / which GST slab). */
.gst-table-slab th:first-child,
.gst-table-slab td:first-child {
  position:sticky; left:0; z-index:1;
  background:var(--card-bg);
  box-shadow:2px 0 4px rgba(0,0,0,0.04);
}
.gst-table-slab thead th:first-child { background:var(--t0); z-index:3; }
.gst-table-slab tbody tr:nth-child(even) td:first-child { background:#f0fdfa; }
.gst-table-slab tbody tr:hover td:first-child { background:rgba(13,148,136,0.10); }
.gst-table-slab tfoot td:first-child { background:rgba(13,148,136,0.10); z-index:2; }

.gst-table-hsn th:first-child, .gst-table-hsn th:nth-child(2),
.gst-table-hsn td:first-child, .gst-table-hsn td:nth-child(2) {
  position:sticky; z-index:1;
  background:var(--card-bg);
}
.gst-table-hsn th:first-child, .gst-table-hsn td:first-child {
  left:0; width:100px; min-width:100px; max-width:100px;
}
.gst-table-hsn th:nth-child(2), .gst-table-hsn td:nth-child(2) {
  left:100px; /* = width of the first (HSN) column, kept in sync above */
  box-shadow:2px 0 4px rgba(0,0,0,0.04);
}
.gst-table-hsn thead th:first-child, .gst-table-hsn thead th:nth-child(2) { background:var(--t0); z-index:3; }
.gst-table-hsn tbody tr:nth-child(even) td:first-child,
.gst-table-hsn tbody tr:nth-child(even) td:nth-child(2) { background:#f0fdfa; }
.gst-table-hsn tbody tr:hover td:first-child,
.gst-table-hsn tbody tr:hover td:nth-child(2) { background:rgba(13,148,136,0.10); }
.gst-table-hsn tfoot .gst-sticky-total-label {
  position:sticky; left:0; z-index:2;
  background:rgba(13,148,136,0.10);
  text-align:left;
}

.dark-mode .gst-table-slab tbody tr:nth-child(even) td:first-child,
.dark-mode .gst-table-hsn tbody tr:nth-child(even) td:first-child,
.dark-mode .gst-table-hsn tbody tr:nth-child(even) td:nth-child(2) { background:#16232f; }
.dark-mode .gst-table-slab td:first-child,
.dark-mode .gst-table-hsn td:first-child,
.dark-mode .gst-table-hsn td:nth-child(2) { background:#1e293b; }

/* Dark mode */
.dark-mode .gst-stat-card{background:#1e293b;border-color:#334155}
.dark-mode .gst-table td{border-color:#1e293b}
.dark-mode .gst-table tbody tr:nth-child(even){background:rgba(13,148,136,0.05)}
.dark-mode .gst-table tfoot tr td{background:rgba(13,148,136,0.12)}
.dark-mode .gst-month-arrow{background:#1e293b;border-color:#334155}
.dark-mode .gst-month-arrow:hover:not(:disabled){border-color:#2dd4bf;color:#2dd4bf;background:rgba(45,212,191,0.08)}

/* ── Chips ───────────────────────────────────── */
.hsn-chip {
  display:inline-block; padding:2px 8px; border-radius:8px;
  background:rgba(13,148,136,0.09); border:1px solid rgba(13,148,136,0.22);
  color:var(--t0); font-size:0.71rem; font-weight:700;
  font-family:'JetBrains Mono',monospace;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gst-rate-chip {
  display:inline-block; padding:2px 9px; border-radius:999px;
  background:var(--card-bg); border:1px solid var(--border);
  font-size:0.72rem; font-weight:700; color:var(--text-main);
}

/* ── Export buttons ──────────────────────────── */
.gst-export-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:10px;
  border:1.5px solid rgba(13,148,136,0.3);
  background:rgba(13,148,136,0.07); color:var(--t0);
  cursor:pointer; font-size:0.78rem; font-weight:700;
  transition:all 0.18s;
}
.gst-export-btn:hover{
  background:linear-gradient(135deg,var(--t0),var(--t1));
  color:white; border-color:transparent;
  box-shadow:0 4px 14px rgba(13,148,136,0.35);
}
.gst-export-btn .material-icons-outlined{font-size:0.95rem}

/* ── Loading state ────────────────────────────── */
.gst-loading-state {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:48px 16px; text-align:center;
  color:var(--text-light);
}
.gst-loading-state p { margin:0; font-size:0.85rem; font-weight:600; }
.gst-spinner {
  width:32px; height:32px; border-radius:50%;
  border:3px solid rgba(13,148,136,0.15);
  border-top-color:var(--t0);
  animation:gstSpin 0.7s linear infinite;
}
@keyframes gstSpin { to { transform:rotate(360deg); } }

/* ── Empty state ─────────────────────────────── */
.gst-empty-state {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:32px 16px; text-align:center;
  color:var(--text-light); border-radius:14px;
  background:var(--card-bg); border:1.5px dashed var(--border);
  margin-bottom:10px;
}
.gst-empty-state .material-icons-outlined{font-size:2rem;opacity:0.4}
.gst-empty-state p{margin:0;font-size:0.88rem;font-weight:700;color:var(--text-main)}
.gst-empty-state small{font-size:0.74rem;max-width:240px;line-height:1.5}

/* tab text always readable */
.gst-tab { color: var(--text-light); font-family:'Outfit',sans-serif; }
.gst-tab.active { color: var(--t0) !important; font-weight: 700; }