#tables-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start; /* אפשר גם center */
  align-items: flex-start;
}

.table-wrapper {
  flex: 1 1 400px;
  min-width: 300px;
  max-width: 600px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  text-align: center;
    font-size: 12px;
}

thead tr {
  background-color: #f0f0f0; /* אפור בהיר – שנה לפי הצורך */
}

th:first-child,
td:first-child {
  white-space: nowrap;        /* לא לשבור שורה */
  width: 1%;                  /* הכי צר שאפשר, הדפדפן ירחיב לפי צורך */
  text-align: right;          /* יישור מתאים לעברית */
  font-weight: bold;
  color: purple;
}

.cell-highlight {
  font-weight: bold;
  background-color: #39ef20;
  color: white;
}

.summary-row {
  background-color: #e8f4ff;
  font-weight: bold;
}
.summary-row td {
  border-top: 2px solid #444;
}

th {
  position: relative;
}

th:hover {
  color: #333;
  cursor: pointer;
}

.sort-icon {
  font-size: 1em;
  color: #888;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.table-scroll table {
  min-width: 50px; /* או ערך שיתאים לרוחב הנתונים */
  border-collapse: collapse;
}

@media (max-width: 700px) {

  table {
    font-size: 13px;
  }

  th, td {
    padding: 0.1rem;
  }

  h2, .top-header {
    font-size: 1rem;
  }
  th:first-child,
  td:first-child {
    white-space: normal; /* אפשר שורות חדשות */
  }
}