/* =========================================================
   com_langukatalogas – SALAMANDER tema
   Failas: /media/com_langukatalogas/css/katalogas-table.css
   Brand: Salamander
   ========================================================= */

/* =========================================================
   CSS kintamieji (brand + UI spalvos)
   Keičiant brand'ą / temą – pakanka koreguoti šiuos kintamuosius
   ========================================================= */

:root {
  /* Pagrindinės Salamander brand spalvos */
  --lk-brand-main: #016C3A;                 /* Pagrindinė Salamander žalia – CTA, pagination aktyvi būsena */
  --lk-brand-hover: #014D2A;                /* Tamsesnė žalia – hover/focus būsenoms (naudojama mygtukuose ir CTA) */
  --lk-brand-pane-bg: #F2F8F5;              /* Filtrų ir panelių šviesus fonas (Salamander fonas) */
  --lk-brand-pane-border: rgba(1,108,58,.12);        /* Filtrų / blokų panelės rėmelis (neutralus Salamander rėmelis) */
  --lk-brand-pane-border-strong: rgba(1,108,58,.20); /* Stipresnis panelės rėmelis / quicksearch / akcentuotos kortos */

  /* Lentelės eilučių fonai (striped + hover) */
  --lk-table-row-bg: #F2F8F5;              /* Kas antros lentelės eilutės fonas (Salamander šviesus fonas) */
  --lk-table-row-hover-light: #F8FAFC;     /* Baltos eilutės hover – vos pilkesnis fonas (spalvos nekeisti skirtingiems brandams) */
  --lk-table-row-hover-dark: #E6F2EC;      /* Pilkos (Salamander) eilutės hover – šiek tiek tamsesnis fonas */

  /* Pagrindiniai tekstai */
  --lk-text-body: #333333;                 /* Pagrindinis tekstas (pilkas) */
  --lk-text-dark: #111111;                 /* Tamsus tekstas / hover */
  --lk-text-muted: #444444;                /* Prigesintas tekstas (ikonos, rodyklės ir pan.) */

  /* Antriniai (sekundariniai) mygtukai filtrų juostai */
  --lk-btn-secondary-bg: #f8f9fa;          /* Sekundarinio mygtuko fonas */
  --lk-btn-secondary-border: #ced4da;      /* Sekundarinio mygtuko rėmelis */
  --lk-btn-secondary-bg-hover: #e9ecef;    /* Sekundarinio mygtuko hover fonas */
  --lk-btn-secondary-border-hover: #adb5bd;/* Sekundarinio mygtuko hover rėmelis */

  /* Bendros / neutralios spalvos */
  --lk-white: #ffffff;                     /* Baltas fonas / tekstas ant brand */
  --lk-border-light: #dee2e6;              /* Šviesus rėmelis (pvz., populiariems dydžiams) */
  --lk-popular-text: #2a3132;              /* Tekstas populiarių dydžių mygtukuose */

  /* Spalvų ikonų (1/2/3 spalvos) atskyrimas */
  --lk-color-divider: #757575;             /* Tamsesnis pilkas laminacijos indikacijoms */

  /* Pagination ir focus žiedai – priderinti prie Salamander žalios */
  --lk-pagination-border: rgba(1,108,58,.35);  /* Pagination rėmelis */
  --lk-focus-ring: rgba(1,108,58,.25);         /* Švelnus fokusavimo žiedas */
  --lk-focus-ring-strong: rgba(1,108,58,.35);  /* Stipresnis fokusavimo žiedas (CTA) */

  /* Chip'ų ir smulkių elementų rėmeliai */
  --lk-chip-border: rgba(0,0,0,.15);       /* Chip'ų (aktyvių filtrų) rėmelis */
  --lk-chip-x-border: rgba(0,0,0,.25);     /* Chip'o „X“ mygtuko rėmelis */

  /* Eilučių ir paviršiaus efektai */
  --lk-shadow-soft: rgba(0,0,0,.04);       /* Lengvas panelių šešėlis */
  --lk-row-hover-bg: rgba(0,0,0,.02);      /* Lentelės eilutės hover fonas (naudojama clickable rodyklei) */
  --lk-row-active-bg: rgba(0,0,0,.08);     /* Lentelės eilutės active fonas (mobile tap) */
  --lk-tap-highlight: rgba(0,0,0,.12);     /* Mobile tap highlight */
}


/* ===== BENDRA STRUKTŪRA ===== */

/* kad lentelė nesulūžtų, nes ten plotis/aukštis trumpi skaičiai */
.lk-katalogas-table th,
.lk-katalogas-table td {
  white-space: nowrap;
}

/* stulpelis miniatiūrai */
.lk-col-img {
  width: 2.25rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

/* išorinis konteineris – paliekam apačioj vietos moduliams / paginacijai */
.lk-katalogas-wrap {
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .lk-katalogas-wrap {
    margin-bottom: 3rem;
  }
}

/* kad puslapis neatrodytų tuščias, kai mažai eilučių */
.lk-guard-min { min-height: 60vh; }
@media (min-width: 992px) {
  .lk-guard-min { min-height: 70vh; }
}

/* moduliai virš/po lentele – kad nebūtų papildomų tarpų */
.lk-modpos .moduletable,
.lk-modpos .custom {
  margin-bottom: 0;
}

/* ===== FILTRŲ JUOSTA ===== */

.lk-filters-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.lk-filters-actions .ms-auto {
  margin-left: auto;
}

/* antriniai mygtukai filtrų juostoje (pvz. „Rodyti filtrus“) */
.lk-filters-actions .btn {
  background: var(--lk-btn-secondary-bg);
  border: 1px solid var(--lk-btn-secondary-border);
  color: var(--lk-text-body);
}
.lk-filters-actions .btn:hover,
.lk-filters-actions .btn:focus {
  background: var(--lk-btn-secondary-bg-hover);
  border-color: var(--lk-btn-secondary-border-hover);
  color: var(--lk-text-dark);
}

/* filtrų panelė – WDS brand fonas */
.lk-filters-pane {
  background: var(--lk-brand-pane-bg);
  border: 1px solid var(--lk-brand-pane-border) !important;
  box-shadow: 0 1px 2px var(--lk-shadow-soft);
}
.lk-filters-pane .form-select,
.lk-filters-pane .form-control {
  background-color: var(--lk-white);
}

/* mobilis – mažiau kraštų */
@media (max-width: 991.98px) {
  .lk-filters-pane {
    padding: .75rem !important;
    border-radius: .5rem;
  }
}

/* ===== MINIATIŪROS (SVG) ===== */

.lk-thumb {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.lk-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lk-thumb rect,
.lk-thumb line,
.lk-thumb path {
  vector-effect: non-scaling-stroke;
}

/* ===== SPALVŲ IKONOS (1 / 2 / 3 spalvos) ===== */

.lk-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--lk-text-dark);
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px;
  box-sizing: content-box;
}
.lk-color--white { background: var(--lk-white); }
.lk-color--one {
  background: linear-gradient(90deg, var(--lk-white) 50%, var(--lk-color-divider) 50%);
}
.lk-color--both { background: var(--lk-color-divider); }

/* ===== PAGRINDINIS CTA (Pasirinkti) ===== */

.lk-katalogas-table a.btn.btn-primary {
  background: var(--lk-brand-main) !important;      /* WDS primary */
  border-color: var(--lk-brand-main) !important;
  color: var(--lk-white) !important;
  font-weight: 600;
  border-radius: 9999px;               /* pill */
  padding: .45rem 1rem;
  line-height: 1.2;
  text-decoration: none !important;
}
.lk-katalogas-table a.btn.btn-primary:hover,
.lk-katalogas-table a.btn.btn-primary:focus {
  background: var(--lk-brand-hover) !important;
  border-color: var(--lk-brand-hover) !important;
  color: var(--lk-white) !important;
  box-shadow: 0 0 0 .2rem var(--lk-focus-ring-strong);
}
/* jei šablonas perrašė <a>, mes vis tiek norim balto teksto */
.lk-katalogas-table td a.btn {
  color: var(--lk-white) !important;
}

/* mobile – truputį didesnis paspaudimo plotas */
@media (max-width: 767.98px) {
  .lk-katalogas-table a.btn.btn-primary {
    padding: .55rem 1.1rem;
  }
}

/* ===== PUSLAPIAVIMAS (pagination) ===== */

/* bazinė spalva visoms nuorodoms katalogo bloke */
.lk-katalogas-wrap .pagination .page-link,
.lk-katalogas-wrap .pagination ul>li>a,
.lk-katalogas-wrap .pagination ul>li>span {
  color: var(--lk-brand-main);
  border-color: var(--lk-pagination-border);
}

/* Bootstrap 4/5 aktyvi nuoroda */
.lk-katalogas-wrap .pagination .page-item.active .page-link {
  background-color: var(--lk-brand-main) !important;
  border-color: var(--lk-brand-main) !important;
  color: var(--lk-white) !important;
}

/* Bootstrap 3 aktyvi nuoroda */
.lk-katalogas-wrap .pagination ul>li.active>a,
.lk-katalogas-wrap .pagination ul>li.active>span,
.lk-katalogas-wrap .pagination>.active>a,
.lk-katalogas-wrap .pagination>.active>span {
  background-color: var(--lk-brand-main) !important;
  border-color: var(--lk-brand-main) !important;
  color: var(--lk-white) !important;
}

/* hover/focus visiems, įskaitant .pagination>.active>a/.pagination>.active>span */
.lk-katalogas-wrap .pagination .page-link:hover,
.lk-katalogas-wrap .pagination .page-link:focus,
.lk-katalogas-wrap .pagination ul>li>a:hover,
.lk-katalogas-wrap .pagination ul>li>a:focus,
.lk-katalogas-wrap .pagination ul>li>span:hover,
.lk-katalogas-wrap .pagination ul>li>span:focus,
.lk-katalogas-wrap .pagination>.active>a:hover,
.lk-katalogas-wrap .pagination>.active>span:hover {
  background-color: var(--lk-brand-hover) !important;
  border-color: var(--lk-brand-hover) !important;
  color: var(--lk-white) !important;
  box-shadow: 0 0 0 .15rem var(--lk-focus-ring);
}

/* ===== LENTELĖS EILUČIŲ FONAS (striped + hover) ===== */

/* Kas antros eilutės fonas – WDS šviesus fonas */
.lk-katalogas-table.table.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--lk-table-row-bg) !important;
}

/* Neutralizuojame Bootstrap .table-striped kintamąjį, kad <td> nenaudotų tamsesnio BS fono */
.lk-katalogas-table.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--lk-table-row-bg);
  background-color: var(--lk-table-row-bg) !important;
}

/* Papildomai: kai odd eilutė yra HOVER, perrašome ir <td> foną,
   kad tamsesnė hover spalva tikrai matytųsi (Bootstrap neperdažytų atgal) */
@media (hover: hover) {
  .lk-katalogas-table.table.table-striped > tbody > tr:nth-of-type(odd):hover > * {
    --bs-table-accent-bg: var(--lk-table-row-hover-dark);
    background-color: var(--lk-table-row-hover-dark) !important;
  }
}

/* Hover – skirtingas baltai ir pilkai eilutei */
@media (hover: hover) {
  /* Baltos eilutės (even) – vos pilkesnis fonas (spalvos nekeisti skirtingiems brandams) */
  .lk-katalogas-table.table.table-striped tbody tr:nth-of-type(even):hover {
    background-color: var(--lk-table-row-hover-light) !important;
  }
  /* Pilkos (WDS) eilutės (odd) – šiek tiek tamsesnis fonas */
  .lk-katalogas-table.table.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: var(--lk-table-row-hover-dark) !important;
  }
}

/* Active (mobile tap) – naudokime tamsesnį variantą, kad būtų aiškus paspaudimas */
.lk-katalogas-table.table.table-striped tbody tr:active {
  background-color: var(--lk-table-row-hover-dark) !important;
}

/* ===== FILTRŲ VEIKSMŲ MYGTUKAI ===== */

/* „Filtruoti“ – mėlynas pilnai */
.lk-filters-actions .btn.btn-filter {
  background: var(--lk-brand-main);
  border-color: var(--lk-brand-main);
  color: var(--lk-white) !important;
  font-weight: 600;
}
.lk-filters-actions .btn.btn-filter:hover,
.lk-filters-actions .btn.btn-filter:focus {
  background: var(--lk-brand-hover);
  border-color: var(--lk-brand-hover);
  color: var(--lk-white) !important;
  box-shadow: 0 0 0 .15rem var(--lk-focus-ring);
}

/* „Išvalyti“ – outline → hover blue */
.lk-filters-actions .btn.btn-clear,
#lk-quick-clear,
.lk-clear-all {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--lk-white);
  border: 1px solid var(--lk-brand-main);
  color: var(--lk-brand-main) !important;
  font-weight: 600;
  padding: .375rem .75rem;
  line-height: 1.25;
  border-radius: 9999px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lk-filters-actions .btn.btn-clear:hover,
.lk-filters-actions .btn.btn-clear:focus,
#lk-quick-clear:hover,
#lk-quick-clear:focus,
.lk-clear-all:hover,
.lk-clear-all:focus {
  background: var(--lk-brand-main);
  border-color: var(--lk-brand-main);
  color: var(--lk-white) !important;
  box-shadow: 0 0 0 .15rem var(--lk-focus-ring);
  outline: 0;
}
.lk-filters-actions .btn.btn-clear:disabled,
#lk-quick-clear:disabled,
.lk-clear-all.disabled,
.lk-clear-all[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}
.lk-clear-all svg,
#lk-quick-clear svg,
.lk-filters-actions .btn.btn-clear svg {
  width: 1em;
  height: 1em;
  vertical-align: -2px;
}

/* ===== GREITA PAIEŠKA ===== */

.lk-quicksearch {
  margin-bottom: 1rem;
}
.lk-quicksearch--panel {
  background: var(--lk-brand-pane-bg);
  border: 1px solid var(--lk-brand-pane-border-strong);
}

/* ===== AKTYVŪS FILTRAI (chips) ===== */

.lk-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: -4px 0 12px;
}
.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--lk-chip-border);
  border-radius: 999px;
  background: var(--lk-btn-secondary-bg);
  font-size: .9375rem;
  line-height: 1;
}
.lk-chip strong { font-weight: 600; }
.lk-chip .lk-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-decoration: none;
  border: 1px solid var(--lk-chip-x-border);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1;
}
.lk-chip .lk-chip-x:hover,
.lk-chip .lk-chip-x:focus {
  background: var(--lk-brand-main);
  color: var(--lk-white);
  border-color: var(--lk-brand-main);
  outline: 0;
}
.lk-chip .lk-chip-x:focus {
  box-shadow: 0 0 0 .2rem var(--lk-focus-ring);
}

/* ===== POPULIARŪS DYDŽIAI (mygtukai) ===== */

.popular-sizes .btn {
  border-radius: 20px;
  font-size: .9rem;
  padding: .35rem .8rem;
  line-height: 1.1;
  min-width: 95px;
  color: var(--lk-popular-text);
  background: var(--lk-white);
  border-color: var(--lk-border-light);
}
.popular-sizes .btn:hover {
  background: var(--lk-brand-main);
  color: var(--lk-white) !important;
  border-color: var(--lk-brand-main);
}

/* ===== EILUTĖS SPAUDŽIAMOS ===== */

.lk-katalogas-table tbody tr.lk-row-clickable {
  cursor: pointer;
  position: relative;
}
.lk-katalogas-table tbody tr.lk-row-clickable::after {
  content: '➔';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--lk-text-muted);
  opacity: .65;
  line-height: 1;
}
@media (hover: hover) {
  .lk-katalogas-table tbody tr.lk-row-clickable:hover::after {
    color: var(--lk-brand-main);
    opacity: .95;
  }
}
/* mobile – nerodyti rodyklės */
@media (max-width: 767.98px) {
  .lk-katalogas-table tbody tr.lk-row-clickable::after {
    content: none !important;
  }
  .lk-katalogas-table tbody tr td {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .lk-katalogas-table tbody tr.lk-row-clickable:active {
    background-color: var(--lk-row-active-bg);
  }
  .lk-katalogas-table tbody tr.lk-row-clickable {
    -webkit-tap-highlight-color: var(--lk-tap-highlight);
    transition: background-color .2s ease;
  }
}

/* ===== Kraunasi būsena ===== */
.lk-katalogas-wrap[aria-busy="true"] {
  transition: opacity .2s ease;
  opacity: .6;
  pointer-events: none;
}

/* ===== smulkmena badge'ams (kad ranka būtų) ===== */
.lk-badge {
  cursor: pointer;
  user-select: none;
}