/* ============================================================
   МЕТА МИКС — tables.css
   Версия: 1.0
   Описание: Стилове за всички технически таблици в сайта.
   Включва: DIN таблици, responsive wrapper, hover ефекти,
            print стилове, специални варианти.
   ============================================================ */


/* ── 1. RESPONSIVE WRAPPER ── */
/* Задължителен wrapper около всяка таблица */

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;

  /* Индикатор за scroll на мобилно */
  background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Scrollbar стил */
.tbl-wrap::-webkit-scrollbar {
  height: 4px;
}

.tbl-wrap::-webkit-scrollbar-track {
  background: var(--gray-50);
}

.tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 2px;
}

.tbl-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--orange);
}


/* ── 2. ОСНОВНА DIN ТАБЛИЦА ── */

.din-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
  min-width: 480px; /* Минимална ширина преди scroll */
  table-layout: auto;
}


/* ── 3. HEADER (THEAD) ── */

.din-tbl thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.din-tbl thead th {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 13px;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid var(--gray-900);
}

.din-tbl thead th:last-child {
  border-right: none;
}

/* Първата колона header — оранжева */
.din-tbl thead th:first-child {
  background: var(--orange);
  color: var(--white);
  border-right-color: var(--orange-dark);
}

/* Сортируема колона */
.din-tbl thead th.sortable {
  cursor: pointer;
  user-select: none;
}

.din-tbl thead th.sortable:hover {
  background: var(--gray-900);
}

.din-tbl thead th.sortable:first-child:hover {
  background: var(--orange-dark);
}

.din-tbl thead th.sort-asc::after  { content: ' ↑'; opacity: 0.7; }
.din-tbl thead th.sort-desc::after { content: ' ↓'; opacity: 0.7; }


/* ── 4. BODY (TBODY) ── */

.din-tbl tbody tr {
  transition: background 0.15s;
}

.din-tbl tbody tr:hover td {
  background: var(--orange-light);
}

.din-tbl tbody td {
  padding: 8px 13px;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
  vertical-align: middle;
}

.din-tbl tbody td:last-child {
  border-right: none;
}

/* Първа колона — по-тъмна, monospace */
.din-tbl tbody td:first-child {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  background: var(--gray-50);
  border-right: 1px solid var(--gray-100);
}

.din-tbl tbody tr:hover td:first-child {
  background: var(--orange-light);
}

/* Последен ред без border */
.din-tbl tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra striping (опционален клас) */
.din-tbl.zebra tbody tr:nth-child(even) td {
  background: var(--gray-50);
}

.din-tbl.zebra tbody tr:nth-child(even):hover td {
  background: var(--orange-light);
}


/* ── 5. FOOTER (TFOOT) ── */

.din-tbl tfoot td {
  padding: 8px 13px;
  font-size: 11px;
  color: var(--gray-500);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  white-space: normal; /* Footer може да wrap-ва */
  line-height: 1.6;
  font-style: italic;
}


/* ── 6. СПЕЦИАЛНИ ВАРИАНТИ ТАБЛИЦИ ── */

/* Компактна таблица — по-малък padding */
.din-tbl.compact thead th { padding: 7px 10px; font-size: 10px; }
.din-tbl.compact tbody td { padding: 5px 10px; font-size: 12px; }
.din-tbl.compact tfoot td { padding: 5px 10px; }

/* Широка таблица — повече padding */
.din-tbl.wide thead th { padding: 12px 16px; }
.din-tbl.wide tbody td { padding: 10px 16px; }

/* Центрирани данни (за размерни таблици) */
.din-tbl.centered tbody td { text-align: center; }
.din-tbl.centered tbody td:first-child { text-align: left; }
.din-tbl.centered thead th { text-align: center; }
.din-tbl.centered thead th:first-child { text-align: left; }

/* Таблица без първа оранжева колона */
.din-tbl.no-highlight thead th:first-child {
  background: var(--black);
  border-right-color: var(--gray-900);
}

/* Малка таблица с рамка */
.din-tbl.bordered {
  border: 1px solid var(--gray-100);
}

/* Таблица за сравнение — маркирани стойности */
.din-tbl td.highlight {
  color: var(--orange);
  font-weight: 600;
  background: var(--orange-light) !important;
}

.din-tbl td.good {
  color: var(--green);
  font-weight: 600;
}

.din-tbl td.warn {
  color: var(--warn);
  font-weight: 600;
}


/* ── 7. ТАБЛИЦА ЗА ЯКОСТНИ КЛАСОВЕ ── */

.yakost-tbl { min-width: 600px; }

.yakost-tbl thead th { font-size: 10px; }

.yakost-tbl .yakost-class {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--orange);
  white-space: nowrap;
}

.yakost-tbl .kl-low  td { border-left: 3px solid var(--gray-300); }
.yakost-tbl .kl-mid  td { border-left: 3px solid var(--orange); }
.yakost-tbl .kl-high td { border-left: 3px solid var(--black); }


/* ── 8. NOTE / ЗАБЕЛЕЖКА ── */

/* Бележка под таблица (извън wrapper) */
.tbl-note {
  font-size: 11px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  font-style: italic;
}

.tbl-note strong { color: var(--gray-700); font-style: normal; }


/* ── 9. ТАБЛИЦА ЗАГЛАВИЕ ── */

.tbl-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tbl-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 18px;
  background: var(--orange);
  border-radius: 1px;
  flex-shrink: 0;
}

.tbl-subtitle {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-3);
  display: block;
}


/* ── 10. RESPONSIVE ПОМОЩНИ ЕЛЕМЕНТИ ── */

/* Индикатор "Скролирай →" за мобилно */
.tbl-scroll-hint {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-bottom: var(--space-2);
}

.tbl-scroll-hint::after {
  content: '→';
  animation: scrollHint 1.5s ease infinite;
}

@keyframes scrollHint {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%       { transform: translateX(4px); opacity: 1; }
}

@media (max-width: 768px) {
  .tbl-scroll-hint { display: flex; }
  .din-tbl { font-size: 12px; }
  .din-tbl thead th { padding: 8px 10px; }
  .din-tbl tbody td { padding: 7px 10px; }
}

@media (max-width: 480px) {
  .din-tbl { font-size: 11px; min-width: 420px; }
  .din-tbl thead th { padding: 7px 8px; font-size: 10px; }
  .din-tbl tbody td { padding: 6px 8px; }
}


/* ── 11. PRINT ── */

@media print {
  .tbl-wrap {
    overflow: visible;
    border: none;
    background: none;
  }

  .din-tbl {
    min-width: auto;
    width: 100%;
    font-size: 9pt;
    border: 1px solid #ccc;
  }

  .din-tbl thead th {
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 8pt;
    padding: 4px 6px;
  }

  .din-tbl thead th:first-child {
    background: #ff6600 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .din-tbl tbody td {
    padding: 3px 6px;
    border-color: #ddd;
    font-size: 9pt;
  }

  .din-tbl tbody tr:hover td { background: none !important; }

  .din-tbl tfoot td {
    font-size: 8pt;
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .tbl-note { font-size: 8pt; }
  .tbl-scroll-hint { display: none; }
}