/* "Transkriptlər" bölməsi (kabinet, yalnız Admin) — bax js/transcripts.js, js/transcripts-admin.js.
   Rənglər nümunə transkriptlə eynidir: #16345f / #1f4f8f / #1e9bb8; qiymət rəngləri 5 yaşıl, 4 mavi, 3 narıncı, 2 qırmızı. */

.tr-app { --tr-navy: #16345f; --tr-navy2: #1f4f8f; --tr-teal: #1e9bb8; --tr-line: #e3eaf2; --tr-soft: #6b7c93; --tr-ink: #17283f; display: block; }

.tr-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.tr-tab {
  border: 1px solid var(--tr-line); background: #fff; color: var(--tr-ink); border-radius: 999px; padding: 0.5rem 1.05rem;
  font: 600 0.88rem var(--font-body); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tr-tab:hover { border-color: var(--tr-navy2); }
.tr-tab.is-active { background: var(--tr-navy); border-color: var(--tr-navy); color: #fff; }

.tr-status { min-height: 1.3rem; margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--tr-soft); }
.tr-status:empty { display: none; }
.tr-status.is-success { color: #12794a; }
.tr-status.is-error { color: #b3261e; }

.tr-muted { color: var(--tr-soft); font-size: 0.85em; }
.tr-grow { flex: 1 1 auto; }
.tr-sep { width: 1px; align-self: stretch; background: var(--tr-line); margin: 0 0.35rem; }
.tr-hint { margin: 0.2rem 0 0.9rem; color: var(--tr-soft); font-size: 0.86rem; line-height: 1.5; }

/* ---------- siyahı */
.tr-listbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.9rem; }
.tr-search {
  flex: 1 1 260px; max-width: 420px; padding: 0.65rem 0.9rem; border: 1px solid var(--tr-line); border-radius: 0.75rem;
  font: 400 0.95rem var(--font-body); background: #fff;
}
.tr-search:focus, .tr-field input:focus, .tr-field select:focus { outline: 2px solid var(--tr-teal); outline-offset: 1px; border-color: var(--tr-teal); }
.tr-listbar-actions { display: flex; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }

.tr-bulk {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem;
  background: #eef4fb; border: 1px solid var(--tr-line); border-radius: 0.75rem; font-size: 0.9rem;
}
.tr-bulk[hidden] { display: none; }
.tr-bulk-grad { display: inline-flex; align-items: center; gap: 0.4rem; }
.tr-bulk-grad input { padding: 0.3rem 0.5rem; border: 1px solid var(--tr-line); border-radius: 0.5rem; font: 400 0.85rem var(--font-body); }
.tr-check { display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }

.tr-table-wrap { overflow-x: auto; }
.tr-table th, .tr-table td { vertical-align: middle; }
.tr-col-check { width: 2.2rem; text-align: center; }
.tr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-empty { text-align: center; padding: 1.4rem 1rem; color: var(--tr-soft); }
.tr-empty.is-error { color: #b3261e; }
.tr-row-actions { white-space: nowrap; text-align: right; }
.tr-link { border: 0; background: none; padding: 0; font: 700 0.95rem var(--font-body); color: var(--tr-navy2); cursor: pointer; text-align: left; }
.tr-link:hover { text-decoration: underline; }
.tr-table tr.is-bad td { background: #fdf3f2; }

.tr-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: #eef1f6; color: var(--tr-soft); }
.tr-badge--ok { background: #e3f6ec; color: #12794a; }

.tr-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.8rem; font-size: 0.88rem; color: var(--tr-soft); }
.tr-pager-nav { display: inline-flex; align-items: center; gap: 0.6rem; }

.tr-btn-sm {
  border: 1px solid var(--tr-line); background: #fff; color: var(--tr-navy); border-radius: 0.55rem; padding: 0.32rem 0.7rem;
  font: 600 0.8rem var(--font-body); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.tr-btn-sm:hover:not(:disabled) { border-color: var(--tr-navy2); background: #f3f7fc; }
.tr-btn-sm:disabled { opacity: 0.5; cursor: default; }
.tr-danger { border: 1px solid #f0c9c4; background: #fff; color: #b3261e; border-radius: 999px; padding: 0.55rem 1.1rem; font: 700 0.88rem var(--font-body); cursor: pointer; }
.tr-danger:hover { background: #fdf3f2; }
.tr-x { border: 0; background: transparent; color: var(--tr-soft); font-size: 1rem; line-height: 1; padding: 0.25rem 0.28rem; border-radius: 0.4rem; cursor: pointer; }
.tr-x:hover { background: #eef4fb; color: var(--tr-navy); }
.tr-x--del:hover { background: #fdecea; color: #c03a2b; }

/* ---------- redaktor */
.tr-editor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.tr-editor-head h3 { margin: 0; font-size: 1.25rem; color: var(--tr-navy); }
.tr-dirty { font-size: 0.8rem; font-weight: 700; color: #b36b00; }

.tr-card { background: #fff; border: 1px solid var(--tr-line); border-radius: 1rem; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.tr-card h4 { margin: 0 0 0.8rem; font-size: 1rem; color: var(--tr-navy); }
.tr-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.tr-card-head h4 { margin-bottom: 0.4rem; }

.tr-info-grid { display: grid; gap: 0.7rem; }
.tr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.tr-pair--meta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tr-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--tr-ink); }
.tr-field em { font-style: normal; font-weight: 500; color: var(--tr-soft); }
.tr-field input, .tr-field select, .tr-subjects input[type="text"], .tr-import-form input {
  padding: 0.55rem 0.7rem; border: 1px solid var(--tr-line); border-radius: 0.65rem; font: 400 0.92rem var(--font-body); background: #fff; width: 100%;
}
.tr-auto { border: 0; background: none; padding: 0 0 0 0.35rem; color: var(--tr-navy2); font: 600 0.74rem var(--font-body); cursor: pointer; }
.tr-auto:hover { text-decoration: underline; }
.tr-field input.is-auto { background: #eefaf6; border-color: #bfe6cf; }
.tr-inline { display: flex; gap: 0.4rem; align-items: center; }
.tr-inline input { flex: 1 1 auto; }
.tr-field--wide { grid-column: 1 / -1; }

.tr-matrix-tools { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.tr-matrix-tools select { padding: 0.4rem 0.6rem; border: 1px solid var(--tr-line); border-radius: 0.55rem; font: 500 0.82rem var(--font-body); max-width: 280px; }
.tr-custom { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem; }
.tr-custom[hidden] { display: none; }
.tr-custom input { flex: 1 1 220px; padding: 0.5rem 0.7rem; border: 1px solid var(--tr-line); border-radius: 0.6rem; font: 400 0.9rem var(--font-body); }

.tr-matrix-wrap { overflow-x: auto; border: 1px solid var(--tr-line); border-radius: 0.8rem; }
.tr-matrix { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.86rem; }
.tr-matrix th { background: var(--tr-navy); color: #fff; padding: 0.5rem 0.45rem; font-weight: 700; text-align: center; vertical-align: top; border-left: 2px solid #fff; }
.tr-matrix th:first-child { border-left: 0; }
.tr-th-n { width: 2.2rem; }
.tr-th-az { text-align: left !important; min-width: 190px; }
.tr-th-en { text-align: left !important; min-width: 150px; }
.tr-th-act { width: 4.6rem; }
.tr-th-col { min-width: 92px; }
.tr-col-title { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-bottom: 0.25rem; font-family: var(--font-display); }
.tr-th-col .tr-x { color: #cfe0f5; padding: 0 0.3rem; }
.tr-th-col .tr-x:hover { background: rgba(255,255,255,0.15); color: #fff; }
.tr-col-year, .tr-col-period {
  width: 100%; margin-top: 0.2rem; padding: 0.22rem 0.3rem; border: 1px solid rgba(255,255,255,0.28); border-radius: 0.45rem;
  background: rgba(255,255,255,0.12); color: #fff; font: 500 0.74rem var(--font-body); text-align: center;
}
.tr-col-period option { color: #17283f; }
.tr-matrix tbody tr:nth-child(odd) td { background: #f6f9fd; }
.tr-matrix td { padding: 0.18rem 0.35rem; border-bottom: 1px solid var(--tr-line); text-align: center; }
.tr-n { color: var(--tr-soft); font-size: 0.78rem; width: 2.2rem; }
.tr-name { width: 100%; padding: 0.35rem 0.45rem; border: 1px solid transparent; border-radius: 0.45rem; background: transparent; font: 600 0.8rem var(--font-body); color: var(--tr-ink); text-transform: uppercase; }
.tr-name--en { font-weight: 400; color: var(--tr-soft); font-size: 0.74rem; }
.tr-name:hover, .tr-name:focus { border-color: var(--tr-line); background: #fff; }
.tr-cell {
  width: 3.2rem; padding: 0.4rem 0.2rem; text-align: center; font: 800 0.95rem var(--font-display); border: 1px solid var(--tr-line); border-radius: 0.55rem;
  background: #fff; color: var(--tr-ink); transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.tr-cell:focus { outline: 2px solid var(--tr-teal); outline-offset: 0; }
.tr-cell.is-g5 { background: #e3f6ec; color: #12794a; border-color: #bfe6cf; }
.tr-cell.is-g4 { background: #e4eefb; color: #1d5fb0; border-color: #c2d8f3; }
.tr-cell.is-g3 { background: #fdf0d9; color: #b36b00; border-color: #f1d9a8; }
.tr-cell.is-g2 { background: #fbe5e2; color: #c03a2b; border-color: #f0bdb7; }
.tr-cell.is-note { background: #eef1f6; color: var(--tr-soft); font-size: 0.78rem; font-weight: 700; }
.tr-cell.is-invalid { background: #fdecea; color: #c03a2b; border-color: #c03a2b; box-shadow: 0 0 0 2px rgba(192,58,43,0.18); }
.tr-row-btns { white-space: nowrap; }
.tr-matrix tfoot td { background: #eef4fb; font-weight: 700; color: var(--tr-navy); padding: 0.55rem 0.5rem; }
.tr-matrix tfoot td:first-child { text-align: left; }
.tr-avg td { border-top: 2px solid var(--tr-navy); }
.tr-avg-cell, .tr-final-cell { font-variant-numeric: tabular-nums; }
.tr-final td { background: var(--tr-navy2) !important; color: #fff !important; }

.tr-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; }

/* ---------- idxal / parametrlər */
.tr-import-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.tr-import-form input { max-width: 420px; }
.tr-issues summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; }
.tr-issues summary.is-error, li.is-error { color: #b3261e; }
.tr-issues summary.is-warn, li.is-warn { color: #b36b00; }
.tr-issues ul, .tr-file-issues { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; }
.tr-file-issues { margin-bottom: 0.9rem; }
.tr-issues code, .tr-file-issues code { background: #eef1f6; border-radius: 0.3rem; padding: 0 0.3rem; font-size: 0.78rem; }

.tr-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.tr-image-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; }
.tr-image-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.tr-image-preview { width: 72px; height: 72px; border: 1px dashed var(--tr-line); border-radius: 0.7rem; display: grid; place-items: center; background: #f6f9fd; overflow: hidden; }
.tr-image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tr-image-row input[type="file"] { flex: 1 1 160px; font-size: 0.8rem; }
.tr-subjects td { padding: 0.25rem 0.4rem; }

/* ---------- önbaxış pəncərəsi */
.tr-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(10, 22, 40, 0.62); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tr-modal[hidden] { display: none; }
.tr-modal-card { background: #eef1f6; border-radius: 1rem; width: min(860px, 100%); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); }
.tr-modal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; background: #fff; border-bottom: 1px solid var(--tr-line); }
/* sistemdən şagird seçimi */
.tr-info-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; }
.tr-btn-accent { background: var(--tr-navy); border-color: var(--tr-navy); color: #fff; }
.tr-btn-accent:hover:not(:disabled) { background: var(--tr-navy2); border-color: var(--tr-navy2); }
.tr-warn { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: #fdecea; color: #b3261e; font-size: 0.74rem; font-weight: 700; }
.tr-pick { width: min(780px, 100%); }
.tr-pick-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.7rem 1rem 0.2rem; background: #fff; }
.tr-pick-tools select { padding: 0.55rem 0.7rem; border: 1px solid var(--tr-line); border-radius: 0.65rem; font: 400 0.9rem var(--font-body); background: #fff; }
.tr-pick-tools .tr-search { flex: 1 1 220px; max-width: none; }
.tr-pick-order { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--tr-soft); }
.tr-pick-hint { margin: 0; padding: 0.4rem 1rem 0.7rem; background: #fff; border-bottom: 1px solid var(--tr-line); }
.tr-pick-list { list-style: none; margin: 0; padding: 0; overflow: auto; background: #fff; min-height: 8rem; }
.tr-pick-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem; border-bottom: 1px solid var(--tr-line); cursor: pointer; }
.tr-pick-row:hover { background: #f3f7fc; }
.tr-pick-row.is-added { opacity: 0.55; cursor: default; background: #f6f7f9; }
.tr-pick-name { flex: 1 1 auto; min-width: 0; }
.tr-pick-meta { flex: 0 0 auto; min-width: 3.2rem; font-size: 0.85rem; }
.tr-pick-list .tr-empty { padding: 1.5rem 1rem; text-align: center; color: var(--tr-soft); }
.tr-pick-foot { padding: 0.55rem 1rem; background: #fff; border-top: 1px solid var(--tr-line); }
.tr-modal-body { overflow: auto; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.tr-page { background: #fff; box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.45); max-width: 100%; }

@media (max-width: 720px) {
  .tr-pair { grid-template-columns: 1fr; }
  .tr-listbar-actions { margin-left: 0; width: 100%; }
}