/* ══════════════════════════════════════════════════════════════
   kierunki.css — wspólny arkusz stylów pakietu "kierunki studiów"
   Używany przez wszystkie strony pod /kierunki-studiow/ (13 stron).
   Ładowany przez knowledge_base/templates/seo/kierunki_base.html
   ══════════════════════════════════════════════════════════════ */

/* ── nawigacja (zakładki górne) ── */
.kierunki-nav-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.nav-tab-link {
  padding: 7px 16px; border-radius: 20px; background: #f4f5f9; color: #374557;
  text-decoration: none; font-size: 0.88rem; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-tab-link:hover { background: #eef0f5; }
.nav-tab-link.active { background: #FF6A59; color: #fff; }
.nav-tab-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px;
  background: rgba(0,0,0,0.15); color: inherit; font-size: 0.72rem; font-weight: 700;
  text-align: center; line-height: 16px;
}
.nav-tab-link.active .nav-tab-badge { background: rgba(255,255,255,0.3); }

/* ── typografia wspólna ── */
.kierunki-h1 {
  font-size: 1.5rem; font-weight: 700; color: #374557; margin-bottom: 4px;
}
.kierunki-lead { color: #6c757d; margin-bottom: 8px; font-size: 0.9rem; }
.section-title {
  font-size: 1rem; font-weight: 600; color: #374557; margin: 20px 0 10px;
  padding-top: 16px; border-top: 1px solid #e9ecef;
}

/* ── filtry ── */
.filters-section { margin-bottom: 20px; }
.filters-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.filter-group label { font-size: 0.8rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.filter-group input, .filter-group select {
  padding: 7px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; background: #fff;
}
.filter-group input:focus, .filter-group select:focus { border-color: #FF6A59; outline: none; }
.filter-group.narrow { min-width: 110px; flex: 0 0 auto; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f4f5f9;
  border-radius: 20px; cursor: pointer; font-size: 0.85rem; font-weight: normal; text-transform: none;
  color: #374557; text-decoration: none;
}
.chip:hover { background: #eef0f5; }
a.chip:hover { text-decoration: none; color: #374557; }

/* ── custom select ── */
.cselect { position: relative; }
.cselect-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;
  background: #fff; color: #374557; cursor: pointer; user-select: none;
}
.cselect-trigger:hover { border-color: #c9ccd1; }
.cselect-trigger .cselect-value.is-placeholder { color: #98a0ab; }
.cselect-trigger .cselect-arrow {
  flex: none; width: 9px; height: 9px; border-right: 2px solid #98a0ab; border-bottom: 2px solid #98a0ab;
  transform: rotate(45deg); margin-top: -3px; transition: transform .15s ease;
}
.cselect.is-open .cselect-trigger {
  border-color: #FF6A59; box-shadow: 0 0 0 3px rgba(255,106,89,0.12);
}
.cselect.is-open .cselect-arrow { transform: rotate(-135deg); margin-top: 3px; }

.cselect-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid #e3e5e9; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23,28,38,0.14);
  display: none; overflow: hidden;
}
.cselect.is-open .cselect-panel { display: block; }
.cselect-search {
  width: 100%; border: none; border-bottom: 1px solid #eef0f3; padding: 9px 12px;
  font-size: 0.88rem; outline: none; color: #374557;
}
.cselect-search::placeholder { color: #b3b8c0; }
.cselect-options { max-height: 230px; overflow-y: auto; padding: 4px; }
.cselect-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 5px;
  font-size: 0.88rem; color: #374557; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cselect-option:hover, .cselect-option.is-active { background: #fdf1ef; }
.cselect-option.is-selected { color: #FF6A59; font-weight: 600; }
.cselect-option .cselect-check {
  flex: none; width: 14px; height: 14px; opacity: 0;
  border-right: 2px solid #FF6A59; border-bottom: 2px solid #FF6A59;
  transform: rotate(45deg) translateY(-2px); margin-right: 2px;
}
.cselect-option.is-selected .cselect-check { opacity: 1; }
.cselect-empty { padding: 14px 12px; font-size: 0.85rem; color: #98a0ab; text-align: center; }
.cselect-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.btn-search {
  padding: 8px 22px; background: #FF6A59; color: #fff; border: none;
  border-radius: 4px; cursor: pointer; font-size: 0.95rem; align-self: flex-end; white-space: nowrap;
}
.btn-search:hover { background: #e5574a; }
.btn-reset {
  padding: 8px 14px; border: 1px solid #ccc; border-radius: 4px;
  color: #555; text-decoration: none; font-size: 0.9rem; align-self: flex-end; white-space: nowrap;
}
.filter-divider { width: 100%; border-top: 1px dashed #e9ecef; margin: 4px 0; }
.btn-adv-toggle {
  padding: 8px 16px; background: #f4f5f9; color: #374557; border: 1px solid #ddd;
  border-radius: 20px; cursor: pointer; font-size: 0.85rem; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.btn-adv-toggle:hover { background: #eef0f5; }
.btn-adv-toggle .adv-toggle-arrow { display: inline-block; transition: transform .15s ease; }
.btn-adv-toggle[aria-expanded="true"] .adv-toggle-arrow { transform: rotate(180deg); }
.btn-adv-toggle[aria-expanded="true"] { background: #FF6A59; color: #fff; border-color: #FF6A59; }
.adv-filters-panel[hidden] { display: none; }

/* ── tabela ── */
.table-scroll { overflow-x: auto; }
.kierunki-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.kierunki-table thead th {
  background: #f4f5f9; padding: 9px 10px; text-align: left;
  font-weight: 600; color: #374557; border-bottom: 2px solid #e9ecef; white-space: nowrap;
}
.kierunki-table thead th.sortable { cursor: pointer; padding: 0; }
.kierunki-table thead th.sortable:hover { background: #eef0f5; }
.kierunki-table thead th.sortable a {
  display: block; padding: 9px 10px; color: inherit; text-decoration: none;
}
.kierunki-table thead th.sortable.sortable-active a { color: #FF6A59; }
.kierunki-table thead th.sortable .sortable-arrow { font-size: 0.7rem; }
.kierunki-table tbody tr:hover { background: #fafbfc; }
.kierunki-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }

.kierunek-link { font-weight: 500; color: #374557; text-decoration: none; }
.kierunek-link:hover { color: #FF6A59; }
.uczelnia-name { color: #6c757d; font-size: 0.82rem; text-decoration: none; }
.uczelnia-name:hover { color: #FF6A59; }

.badge-poziom {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 0.75rem; font-weight: 600; background: #e8f4fd; color: #2980b9;
}
.badge-poziom.mag { background: #fdf3e8; color: #e67e22; }
.badge-poziom.jm  { background: #eafbea; color: #27ae60; }
.badge-poziom + .badge-poziom { margin-left: 3px; }

.badge-warianty {
  display: block; margin-top: 2px; padding: 0; border: none; background: none;
  font-size: 0.75rem; color: #FF6A59; font-weight: 600; cursor: pointer;
}
.badge-warianty:hover { text-decoration: underline; }
.badge-warianty-arrow { display: inline-block; transition: transform .15s ease; font-weight: 400; }
.grupa-row.is-expanded .badge-warianty-arrow { transform: rotate(180deg); }
.wariant-row td { border-bottom: 1px solid #f0f0f0; }

/* metryki */
.metric { font-weight: 600; color: #374557; }
.metric.good { color: #27ae60; }
.metric.bad  { color: #e74c3c; }
.metric.none { color: #ccc; font-weight: 400; font-style: italic; font-size: 0.8rem; }
.wwb-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 0.75rem; font-weight: 600;
}
.wwb-good { background: #d5f5e3; color: #1e8449; }
.wwb-ok   { background: #fef9e7; color: #b7950b; }
.wwb-bad  { background: #fde8e8; color: #c0392b; }
.rok-tag { font-size: 0.72rem; color: #aaa; margin-left: 4px; }

/* paginacja */
.pagination-wrap {
  display: flex; justify-content: center; gap: 5px; margin-top: 18px; flex-wrap: wrap;
}
.pagination-wrap a, .pagination-wrap span {
  padding: 5px 11px; border: 1px solid #ddd; border-radius: 4px;
  color: #374557; text-decoration: none; font-size: 0.88rem;
}
.pagination-wrap .current { background: #FF6A59; color: #fff; border-color: #FF6A59; }
.pagination-wrap a:hover { background: #f8f9fa; }

.results-info { font-size: 0.85rem; color: #6c757d; margin-bottom: 10px; }
.has-data-note { font-size: 0.78rem; color: #aaa; margin-top: 6px; }

/* ── karty statystyk (detal kierunku) ── */
.stat-card {
  background: #f8f9fa; border-radius: 8px; padding: 16px 20px; text-align: center;
  border-left: 4px solid #FF6A59;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: #374557; line-height: 1.2; }
.stat-card .stat-label { font-size: 0.78rem; color: #6c757d; margin-top: 4px; }
.stat-card.blue { border-left-color: #2980b9; }
.stat-card.green { border-left-color: #27ae60; }
.stat-card.orange { border-left-color: #e67e22; }
.stat-card.link-card {
  display: block; text-align: left; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.stat-card.link-card:hover { border-color: #FF6A59; box-shadow: 0 2px 10px rgba(255,106,89,0.12); }

.kierunek-sub { color: #6c757d; font-size: 1rem; margin-bottom: 14px; }
.ulubiony-btn {
  border: none; background: none; font-size: 1.4rem; cursor: pointer;
  vertical-align: middle; margin-left: 8px;
}
.mala-proba-alert {
  background: #fef9e7; border-left: 4px solid #e67e22; color: #7a5b12;
  padding: 10px 14px; border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px;
}

/* ── wykresy SVG (trajektoria / trend) ── */
.wykres-card {
  background: #f8f9fa; border-radius: 10px; padding: 16px 18px 10px; margin-bottom: 16px;
}
.wykres-tytul { font-size: 0.85rem; font-weight: 600; color: #374557; }
.wykres-svg { display: block; width: 100%; max-width: 460px; height: auto; margin-top: 8px; }
.wykres-siatka { stroke: #dfe3e8; stroke-width: 1; stroke-dasharray: 3 3; }
.wykres-label-wartosc { font-size: 11px; font-weight: 600; text-anchor: middle; fill: #374557; }
.wykres-label-os { font-size: 10px; text-anchor: middle; fill: #94a0ab; }

/* ── kafelki stanowisk (praca po kierunku) ── */
.job-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.job-card {
  background: #fff; border: 1px solid #e9ecef; border-radius: 10px; padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 10px;
}
.job-card:hover { border-color: #FF6A59; box-shadow: 0 2px 10px rgba(255,106,89,0.12); }
.job-card-name { font-size: 0.92rem; font-weight: 600; color: #374557; line-height: 1.3; }
.job-card-links { display: flex; gap: 8px; margin-top: auto; }
.job-link {
  flex: 1; text-align: center; padding: 6px 8px; border-radius: 6px; font-size: 0.78rem;
  font-weight: 600; text-decoration: none; transition: opacity .15s;
}
.job-link:hover { opacity: 0.85; text-decoration: none; }
.job-link-linkedin { background: #E8F1FB; color: #0A66C2; }
.job-link-pracuj { background: #FFEDE9; color: #D8442B; }

.year-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.year-tab {
  padding: 5px 14px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;
  font-size: 0.88rem; color: #374557; background: #fff; transition: all .15s;
}
.year-tab.active, .year-tab:hover { background: #FF6A59; color: #fff; border-color: #FF6A59; }

.stats-panel { display: none; }
.stats-panel.active { display: block; }

.szczegolowe-statystyki { margin-top: 16px; }
.szczegolowe-statystyki-content { padding-top: 14px; }
.szczegolowe-statystyki-toggle {
  cursor: pointer; font-weight: 600; color: #374557; font-size: 0.9rem; padding: 8px 0;
  list-style: none;
}
.szczegolowe-statystyki-toggle::-webkit-details-marker { display: none; }
.szczegolowe-statystyki-toggle::before {
  content: '▸'; display: inline-block; margin-right: 6px; color: #FF6A59;
  transition: transform .15s ease;
}
details[open] > .szczegolowe-statystyki-toggle::before { transform: rotate(90deg); }

.full-data-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 16px;
}
.full-data-table th {
  background: #f4f5f9; padding: 7px 10px; text-align: left; font-weight: 600;
  color: #374557; border-bottom: 2px solid #e9ecef; white-space: nowrap;
}
.full-data-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.full-data-table tr:hover { background: #fafafa; }
.null-val { color: #ccc; font-style: italic; }

.meta-badge {
  display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 0.8rem;
  font-weight: 500; background: #e8f4fd; color: #2980b9; margin-right: 6px;
}
.back-link { color: #FF6A59; text-decoration: none; font-size: 0.9rem; }
.back-link:hover { text-decoration: underline; }
.no-stats {
  padding: 30px; text-align: center; color: #6c757d; background: #f8f9fa; border-radius: 6px;
}

/* ── porównywarka ── */
.porownaj-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #374557;
  color: #fff; padding: 12px 20px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}
.porownaj-bar-inner {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.porownaj-bar-link {
  margin-left: auto; padding: 7px 18px; background: #FF6A59; color: #fff;
  border-radius: 4px; text-decoration: none;
}
.porownaj-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.porownaj-card {
  border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; background: #fff;
}
.porownaj-card-header { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.porownaj-card-title { font-weight: 700; color: #374557; font-size: 1rem; }
.porownaj-card-sub { color: #6c757d; font-size: 0.85rem; }
.porownaj-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid #f7f7f7; font-size: 0.88rem;
}
.porownaj-row-label { color: #6c757d; }
.porownaj-row-value { font-weight: 600; color: #374557; text-align: right; }
.porownaj-remove {
  display: inline-block; margin-top: 10px; padding: 6px 14px; border: 1px solid #e74c3c;
  border-radius: 4px; color: #e74c3c; background: none; cursor: pointer; font-size: 0.82rem;
}
.porownaj-remove:hover { background: #fde8e8; }

/* listy linków (uczelnie/miasta) */
.link-columns { columns: 3; column-gap: 24px; }
.link-columns a { display: block; padding: 3px 0; break-inside: avoid; }

/* ══════════════════════════════════════════════════════════════
   MOBILE — jedna wspólna sekcja dla całego pakietu
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kierunki-table thead { display: none; }
  .kierunki-table td { display: block; padding: 3px 10px; }
  .kierunki-table td:first-child { padding-top: 10px; }
  .kierunki-table td:last-child { padding-bottom: 10px; border-bottom: 2px solid #e9ecef; }
  .kierunki-table td::before {
    content: attr(data-label) ': ';
    font-weight: 600; color: #6c757d; font-size: 0.75rem;
  }
  .kierunki-table td[data-label=""]::before { content: none; }
  .kierunki-table td:empty { display: none; }

  .filter-group { min-width: 140px; }
  .filters-row { flex-direction: column; align-items: stretch; }
  .filter-group.narrow { min-width: 0; }
  .btn-search, .btn-reset, .btn-adv-toggle { width: 100%; justify-content: center; }

  .kierunki-nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .kierunki-nav-tabs::-webkit-scrollbar { height: 0; }

  .porownaj-bar-inner { gap: 8px; }
  .porownaj-grid { grid-template-columns: 1fr; }

  .link-columns { columns: 1; }
}