/* Glimra – skicka och ta emot projekt (Glimra-paket) */
.tr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin: -4px 0 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.tr-bar-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tr-bar-t .icowrap { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-l); color: var(--accent-d); display: flex; align-items: center; justify-content: center; flex: none; }
.tr-size { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); margin: 10px 0; }
.tr-size .icowrap { color: var(--accent); }
.tr-steps { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: #3a3650; line-height: 1.55; }
.tr-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.tr-row.off { opacity: .55; }
.tr-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.tr-th { width: 52px; height: 52px; border-radius: 8px; background: #efe9ec; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.tr-th img { width: 100%; height: 100%; object-fit: cover; }
.tr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-n { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-mode { margin-top: 6px; width: 100%; height: 32px; font-size: 12.5px; }
.tr-badge { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.tr-badge.ok { background: #dcf5ec; color: #12634a; }
.tr-badge.warn { background: #fff1d6; color: #8a5300; }
.tr-badge.muted { background: #f1ecef; color: var(--muted); }
@media (max-width: 900px) {
  .tr-bar { margin-top: 0; }
  .tr-bar > .row { width: 100%; }
  .tr-bar > .row .btn { flex: 1; }
  .tr-row { align-items: flex-start; }
}

/* Aviseringar flyttas upp när en dialog är öppen, så att de inte täcker knapparna */
body:has(.modal-back) #toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }