/*
 * Transport-Shaman: wygląd przycisków wstawianych na giełdy (i podglądu w ustawieniach).
 * Wszystko pod prefiksem .tp-, z pełnym zestawem własnych wartości, żeby style giełdy
 * nie zmieniały naszych przycisków, a nasze style niczego na giełdzie.
 */

.tp-bar {
  --tp-accent: #17448c;
  --tp-accent-dark: #113670;
  --tp-border: #c3cfde;
  --tp-surface: #ffffff;
  --tp-hover: #e9f0fa;
  --tp-press: #d6e2f5;
  --tp-muted: #6b7a90;

  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 500 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.tp-bar .tp-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  font: inherit;
  color: var(--tp-accent-dark);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: 0; /* wszystko kanciaste: żadnych zaokrągleń, także gdy giełda ma je w swoich stylach */
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.tp-bar .tp-btn:hover {
  position: relative;
  z-index: 1;
  background: var(--tp-hover);
  border-color: var(--tp-accent);
}

.tp-bar .tp-btn:active {
  background: var(--tp-press);
}

.tp-bar .tp-btn:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--tp-accent);
  outline-offset: 1px;
}

.tp-bar .tp-btn--primary {
  color: #ffffff;
  background: var(--tp-accent);
  border-color: var(--tp-accent);
}

.tp-bar .tp-btn--primary:hover {
  background: var(--tp-accent-dark);
  border-color: var(--tp-accent-dark);
}

.tp-bar .tp-btn--ghost {
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--tp-muted);
  background: transparent;
  border-color: transparent;
}

.tp-bar .tp-btn--ghost:hover {
  color: var(--tp-accent-dark);
  background: var(--tp-hover);
  border-color: transparent;
}

.tp-bar .tp-ico {
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Trasy: [ikona Nazwa | + podjazd] */

.tp-bar.tp-route-bar {
  padding: 2px 0 6px;
}

.tp-bar.tp-route-bar.tp-site-transeu {
  padding: 10px 0 2px;
}

.tp-bar .tp-seg {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
}

.tp-bar .tp-seg .tp-btn:first-child {
  font-weight: 600;
}

.tp-bar .tp-seg .tp-btn:last-child {
  margin-left: -1px;
  padding: 0 8px;
}

/* Czat: małe przyciski nad polem wiadomości */

.tp-bar.tp-chat-bar {
  gap: 4px;
  padding: 6px 8px 4px;
}

.tp-bar .tp-chip {
  height: 22px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
}

.tp-bar.tp-chat-bar .tp-btn--ghost {
  margin-left: auto;
}

/* TIMOCOM: pasek wsunięty do ramki czatu, tuż nad pole tekstu. Odstępy ustawia adapter giełdy. */
.tp-bar.tp-chat-bar.tp-tucked {
  align-self: stretch;
  padding: 0;
}

.tp-bar.tp-chat-bar.tp-tucked .tp-chip {
  height: 20px;
  padding: 0 8px;
}

.tp-bar.tp-chat-bar.tp-tucked .tp-btn--ghost {
  width: 20px;
  height: 20px;
}

/* Profil firmy */

.tp-bar.tp-company-bar {
  padding: 6px 0;
}

/* Trans.eu: osobny wiersz w nagłówku firmy, pod logo i nazwą */
.tp-bar.tp-company-bar.tp-site-transeu {
  padding: 10px 0 2px;
}

/* TIMOCOM, obok plakietek firmy: wolno się zwężać i zawijać, żeby nie nachodzić na nazwę firmy */
.tp-bar.tp-company-bar.tp-inline {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-left: 10px;
  padding: 0;
}

/* Krótkie komunikaty */

.tp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 2147483647;
  box-sizing: border-box;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px;
  font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #ffffff;
  text-align: center;
  background: #1b2a3f;
  box-shadow: 0 6px 24px rgba(15, 30, 55, 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}