/* ============================================================
   BERANDA KECIL — PAITO V1
   ============================================================ */

.paito-page {
  display:grid;
  gap:16px;
}

.paito-hero {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.paito-hero > div:first-child {
  max-width:760px;
}

.paito-live-indicator {
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:var(--panel);
  font-size:8px;
  font-weight:800;
}

.paito-live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9cad82;
  box-shadow:0 0 0 4px rgba(156,173,130,.12);
}

.paito-control-card {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:12px;
}

.paito-market-tabs {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}

.paito-market-tabs::-webkit-scrollbar {
  display:none;
}

.paito-market-tab {
  min-height:40px;
  flex:0 0 auto;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--muted);
  font:inherit;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}

.paito-market-tab:hover {
  color:var(--text);
}

.paito-market-tab.active {
  border-color:rgba(192,168,136,.52);
  background:var(--accent);
  color:#11150f;
}

.paito-period-control {
  display:grid;
  gap:5px;
  flex:0 0 190px;
}

.paito-period-control label {
  font-size:8px;
  font-weight:800;
  color:var(--muted);
}

.paito-period-control select {
  min-height:40px;
}

.paito-summary-grid {
  display:grid;
  grid-template-columns:1.1fr 1.2fr 1.4fr .8fr;
  gap:8px;
}

.paito-summary-card {
  min-width:0;
  display:grid;
  gap:6px;
  padding:14px;
}

.paito-summary-card span {
  color:var(--muted);
  font-size:8px;
  font-weight:780;
}

.paito-summary-card strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.paito-summary-result {
  letter-spacing:.12em;
}

.paito-table-card {
  min-width:0;
  padding:0;
  overflow:hidden;
}

.paito-section-head {
  padding:16px 16px 12px;
  margin:0;
}

.paito-table-scroll {
  width:100%;
  overflow-x:auto;
  border-top:1px solid var(--border);
}

.paito-table {
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}

.paito-table th,
.paito-table td {
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}

.paito-table th {
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel);
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.paito-table td {
  font-size:9px;
}

.paito-table tbody tr:last-child td {
  border-bottom:0;
}

.paito-table tbody tr:hover {
  background:rgba(255,255,255,.018);
}

.paito-row-no {
  color:var(--muted);
  width:44px;
}

.paito-date {
  font-weight:850;
  white-space:nowrap;
}

.paito-day {
  color:var(--muted);
  white-space:nowrap;
}

.paito-digits {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:max-content;
}

.paito-digit {
  width:28px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--panel-2);
  font-size:13px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.paito-digit.is-reference {
  border-color:rgba(192,168,136,.48);
  background:rgba(192,168,136,.09);
  color:var(--accent);
}

.paito-reference {
  font-weight:900;
  letter-spacing:.12em;
  white-space:nowrap;
}

.paito-empty-cell {
  padding:28px 16px !important;
}

.paito-empty-state {
  display:grid;
  justify-items:center;
  gap:6px;
  text-align:center;
  color:var(--muted);
}

.paito-empty-state strong {
  color:var(--text);
  font-size:11px;
}

.paito-mobile-hint {
  display:none;
  padding:9px 12px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:8px;
}

.paito-notice {
  margin-top:0;
}

/* light mode */
html[data-theme="light"] .paito-table tbody tr:hover {
  background:rgba(67,89,58,.035);
}

/* responsive */
@media(max-width:900px) {
  .paito-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px) {
  .paito-hero {
    align-items:flex-start;
    flex-direction:column;
  }

  .paito-control-card {
    align-items:stretch;
    flex-direction:column;
  }

  .paito-period-control {
    flex:auto;
  }

  .paito-mobile-hint {
    display:block;
  }

  .paito-table th:first-child,
  .paito-table td:first-child {
    position:sticky;
    left:0;
    z-index:1;
    background:var(--panel);
  }

  .paito-table th:first-child {
    z-index:3;
  }
}

@media(max-width:460px) {
  .paito-summary-grid {
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .paito-summary-card {
    padding:11px;
  }

  .paito-market-tab {
    min-height:38px;
    padding-inline:11px;
  }
}

/* ============================================================
   POLISHING 5.5 — PAITO MOBILE TABLE + PERIOD CHIP
   ============================================================ */

/* Keep title/meta on the left and period chip fixed on the right. */
.paito-section-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}

.paito-section-head > div {
  min-width:0;
}

#paitoPeriodChip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  align-self:start;
  flex:0 0 auto;
  min-width:max-content;
  width:max-content;
  white-space:nowrap !important;
  line-height:1.2 !important;
  padding:8px 11px;
}

/*
 * border-collapse:collapse + sticky first column can expose tiny fragments
 * of horizontally-scrolled cells on mobile. Separate borders make the
 * sticky NO. column paint as one opaque layer.
 */
.paito-table {
  border-collapse:separate;
  border-spacing:0;
}

.paito-table-scroll {
  position:relative;
  isolation:isolate;
}

@media(max-width:700px) {
  .paito-section-head {
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
  }

  #paitoPeriodChip {
    margin:0;
    white-space:nowrap !important;
  }

  .paito-table th:first-child,
  .paito-table td:first-child {
    position:sticky;
    left:0;
    width:54px;
    min-width:54px;
    max-width:54px;
    box-sizing:border-box;
    overflow:hidden;
    background:var(--panel) !important;
    background-clip:padding-box;
    box-shadow:
      1px 0 0 var(--border),
      10px 0 14px -16px rgba(0,0,0,.9);
    isolation:isolate;
  }

  .paito-table th:first-child {
    z-index:5;
  }

  .paito-table td:first-child {
    z-index:4;
  }

  /*
   * Opaque edge mask prevents text/border fragments from the scrolling
   * columns being visible on the left edge of the sticky NO. cell.
   */
  .paito-table th:first-child::before,
  .paito-table td:first-child::before {
    content:"";
    position:absolute;
    top:-1px;
    bottom:-1px;
    left:-4px;
    width:5px;
    background:var(--panel);
    pointer-events:none;
  }

  .paito-row-no {
    width:auto;
  }
}

@media(max-width:420px) {
  .paito-section-head {
    gap:9px;
  }

  #paitoPeriodChip {
    padding:7px 9px;
  }
}