/* Jadval konteyneri */
.tilda-table-wrap {
  width: 100%;
  overflow-x: auto; /* kichik ekranlarda gorizontal scroll */
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Asosiy jadval uslubi */
.tilda-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* kichik ekranlarda scroll paydo bo'lishi uchun */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  background: #fff;
}

/* Header */
.tilda-table thead th {
  position: sticky;
  top: 0;
  background: #0f172a; /* qalin header — istasangiz o'zgartiring */
  color: #fff;
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  z-index: 2;
}

/* Body: qator va hujayra */
.tilda-table tbody td,
.tilda-table thead th {
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.tilda-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  vertical-align: middle;
  color: #111827;
}

/* Zebrali qatorlar */
.tilda-table tbody tr:nth-child(odd) {
  background: #ffffff;
}
.tilda-table tbody tr:nth-child(even) {
  background: #fbfdff;
}

/* Hover effekti (faqat desktop) */
@media (hover: hover) {
  .tilda-table tbody tr:hover {
    background: rgba(15,23,42,0.03);
  }
}

/* Holat mahsus label (misol uchun) */
.tilda-table tbody td[data-label="Holat"] {
  font-weight: 600;
}

/* Kichik ekranlar uchun responsiv: "stacked" uslub */
@media (max-width: 640px) {
  .tilda-table {
    border: 0;
    min-width: 0;
  }

  .tilda-table thead {
    display: none; /* headerni yashirish */
  }

  .tilda-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(2,6,23,0.04);
    overflow: hidden;
  }

  .tilda-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(2,6,23,0.04);
  }

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

  /* Har bir hujayradagi label (chap tomonda) */
  .tilda-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 8px;
    color: #374151;
    flex: 0 0 auto;
  }

  .tilda-table tbody td span {
    flex: 1 1 auto;
    text-align: right;
    color: #111827;
  }
}