/* =================================================================== */
/*      ZUNIFIKOWANY MOTYW CIEMNY - FIOLET & SELEDYN v13.0 FINAL       */
/*      Ten kod zastępuje całą zawartość pliku style.css             */
/* =================================================================== */

:root {
    /* --- Główne kolory motywu --- */
    --main-purple: #7F5AF0;
    --celadon-green: #2CF6B3;
    --dark-background: #16161a;
    --component-background: #242629;
    --main-text: #fffffe;
    --secondary-text: #94a1b2;
    --border-color: #3b3b41;

    /* --- Zmienne Bootstrapa nadpisane przez nasz motyw --- */
    --bs-body-bg: var(--dark-background);
    --bs-body-color: var(--main-text);
    --bs-primary: var(--main-purple);
    --bs-primary-rgb: 127, 90, 240;
    --bs-info: var(--celadon-green);
    --bs-info-rgb: 44, 246, 179;
    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-tertiary-bg: var(--component-background);
}

/* --- Style globalne i reset --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    background-color: var(--dark-background) !important;
}
main { padding-top: 56px; }
h1, h2, h3, h4, h5, h6 { color: var(--main-text); }
a { color: var(--main-purple); }
a:hover { color: #9d83f3; }
.text-muted { color: var(--secondary-text) !important; }
.bi { vertical-align: middle; }

/* --- Niestandardowy pasek przewijania (wersja ciemna) --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--component-background); }
::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #777; }

/* --- Navbar --- */
.navbar {
    background-color: var(--component-background) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.navbar-toggler-icon { filter: invert(1); }

/* --- Sidebar (Menu) --- */
#sidebar, .sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
    background-color: var(--component-background) !important;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
    font-weight: 500;
    color: var(--secondary-text);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}
.sidebar .nav-link:hover {
    color: var(--main-purple);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.sidebar .nav-link.active {
    color: var(--main-purple);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-left: 3px solid var(--main-purple);
}
.sidebar .nav-link i { margin-right: 0.5rem; }

/* --- Karty (Cards) --- */
.card {
    border: 1px solid var(--border-color);
    background-color: var(--component-background) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.5s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

/* --- Efekt "matowego szkła" dla kart --- */
.glass-panel {
    background: rgba(36, 38, 41, 0.75) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 59, 65, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* --- Tabele --- */
.table { font-size: 0.9rem; }
.table thead th {
    border-bottom: 2px solid var(--bs-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* --- Przyciski --- */
.btn { border-radius: 0.375rem; font-weight: 500; transition: all 0.3s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }

.btn-primary {
    background-color: var(--main-purple) !important;
    border-color: var(--main-purple) !important;
    color: var(--main-text) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #6a48d7 !important;
    border-color: #6a48d7 !important;
}

.btn-outline-primary {
    color: var(--main-purple) !important;
    border-color: var(--main-purple) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--main-purple) !important;
    border-color: var(--main-purple) !important;
    color: var(--main-text) !important;
}

/* --- Sekcja dla formularzy --- */
.form-control, .form-select {
    background-color: #2d2d30;
    color: var(--main-text);
    border-color: var(--border-color);
}
.form-control:focus, .form-select:focus {
    background-color: #2d2d30;
    color: var(--main-text);
    border-color: var(--main-purple);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-control[readonly], .form-control:disabled {
    background-color: #242629 !important;
    color: var(--secondary-text);
    opacity: 0.7;
}
.form-control::file-selector-button {
    background-color: var(--main-purple);
    color: var(--main-text);
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: background-color .15s ease-in-out;
}
.form-control::file-selector-button:hover {
    background-color: #6a48d7;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a1b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option {
    background: var(--component-background);
    color: var(--main-text);
}
.form-control::placeholder { color: var(--secondary-text); }
.input-group-text {
    background-color: #343a40;
    border-color: var(--border-color);
    color: var(--secondary-text);
}
.input-group .form-control[readonly] {
    background-color: #242629 !important;
}

/* ======================================================= */
/*      NOWA POPRAWKA DLA PÓL <pre> W WIDGETACH            */
/* ======================================================= */
pre.bg-light {
    background-color: var(--component-background) !important;
    color: var(--secondary-text);
    border: 1px solid var(--border-color);
    border-radius: .25rem;
}

/* --- Alerty --- */
.alert { border: none; border-radius: 0.5rem; }
.alert-success { background-color: #1a3c2a; border-color: #2a6a4a; color: #a3e6c3; }
.alert-danger { background-color: #4d1c20; border-color: #8c2f38; color: #f8b4ba; }
.alert-info { background-color: rgba(var(--bs-info-rgb), 0.1); border-color: rgba(var(--bs-info-rgb), 0.3); color: var(--celadon-green); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* --- Okienka modalne --- */
.modal-content {
    background-color: var(--component-background);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }

/* --- Listy --- */
.list-group-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--main-text);
}
.list-group-item:last-child { border-bottom: none; }

/* --- Strona logowania --- */
.min-vh-100 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.min-vh-100 .card { border-radius: 1rem; }

/* --- Animacje --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Media Queries (Responsywność) --- */
@media (max-width: 768px) {
    .sidebar { position: relative; top: 0; }
    main { padding-top: 1rem; }
}


/* ======================================================= */
/*      NOWE, ULEPSZONE STYLE DLA LISTY POZDROWIEŃ         */
/* ======================================================= */

.regard-card {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden; /* Ważne dla zaokrąglonych rogów */
    transition: all 0.3s ease;
}

.regard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(0,0,0,0.1); /* Subtelne tło dla nagłówka */
    border-bottom: 1px solid var(--border-color);
}

.regard-author {
    display: flex;
    align-items: center;
}

.regard-author h6 {
    font-weight: 600;
    color: var(--main-text);
}

.regard-author .display-6 {
    font-size: 2.5rem; /* Dopasowanie rozmiaru ikony */
    color: var(--secondary-text);
}

.regard-author img {
    object-fit: cover;
}

.regard-body {
    padding: 1.25rem 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--secondary-text);
}

.regard-body p {
    color: #e0e0e0; /* Jaśniejszy tekst dla samej wiadomości */
}

.delete-regard-btn {
    border-radius: 50%; /* Okrągły przycisk */
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ======================================================= */
/*      ANIMACJA ZNIKANIA DLA KARTY POZDROWIEŃ             */
/* ======================================================= */

.regard-card {
    /* Ustawiamy maksymalną wysokość, aby animacja zwijania działała */
    max-height: 500px; 
    transition: all 0.5s ease-in-out;
}

.regard-card.collapsing {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    border-width: 0;
}

/* ======================================================= */
/*      ANIMACJA POJAWIANIA SIĘ DLA NOWYCH POZDROWIEŃ      */
/* ======================================================= */

@keyframes slideInDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.regard-card.newly-added {
    animation: slideInDown 0.5s ease-out forwards;
}

/* ======================================================= */
/*      STYLE DLA INTELIGENTNEJ RAMÓWKI NA DASHBOARDZIE    */
/* ======================================================= */

.table > tbody > tr.broadcast-current {
    background-color: rgba(220, 53, 69, 0.1); /* Delikatne czerwone tło */
    font-weight: bold;
}

.table > tbody > tr.broadcast-current td {
    color: #6a2129;
}

.table > tbody > tr.broadcast-next {
    background-color: rgba(13, 110, 253, 0.07); /* Delikatne niebieskie tło */
}

/* ======================================================= */
/*      STYLE DLA AWATARÓW NA LIŚCIE POZDROWIEŃ          */
/* ======================================================= */

.avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ===== CZAT - DARK MODE ===== */
#chat-box {
    height: 500px;
    overflow-y: auto;
    border: 1px solid #404040;
    border-radius: 8px;
    padding: 15px;
    background-color: #1a1a1a;
}

.chat-message {
    margin-bottom: 15px;
    padding: 10px;
    background: #2d2d2d;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border-left: 3px solid #404040;
}

.chat-message-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.chat-message-header strong {
    font-weight: 600;
}

.chat-message-header i {
    color: #6c757d;
}

.chat-message-time {
    font-size: 0.75rem;
    color: #888;
    margin-left: auto;
}

.chat-message-content {
    margin-left: 40px;
    color: #e0e0e0;
}

.online-user {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 5px;
    background: #2d2d2d;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.online-indicator {
    width: 10px;
    height: 10px;
    background-color: #28a745;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px #28a745;
}
/* ===== AVATARY W CZACIE ===== */
.chat-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #404040;
}

.chat-avatar-icon {
    font-size: 35px;
}

.online-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #2ecc71;
}

.online-user-avatar-icon {
    font-size: 32px;
}

.chat-message-header {
    display: flex;
    align-items: center;
}
/* ===== EMOJI PICKER ===== */
.emoji-picker {
    position: absolute;
    bottom: 60px;
    left: 10px;
    background: #2d2d2d;
    border: 1px solid #404040;
    border-radius: 10px;
    padding: 10px;
    max-width: 300px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.emoji-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
}

.emoji-btn:hover {
    transform: scale(1.3);
}

/* ===== MESSAGE ACTIONS ===== */
.chat-message {
    position: relative;
}

.chat-message:hover .message-actions {
    opacity: 1;
}

.message-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.message-actions button {
    background: #404040;
    border: none;
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 3px;
}

.message-actions button:hover {
    background: #e74c3c;
}

/* ===== PRIVATE MESSAGES BADGE ===== */
.pm-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}

/* Prywatne wiadomości — kontenery */
#pm-messages .pm-message { margin-bottom: .5rem; }

/* Wiadomości od innych: jasne tło, ciemny tekst */
#pm-messages .pm-message.other {
  background: #f1f3f5 !important;
  color: #111 !important;
  padding: .5rem .75rem;
  border-radius: .5rem;
  display: inline-block;
}

/* Wiadomości od siebie: kontrastowe (ciemne) tło, biały tekst */
#pm-messages .pm-message.me {
  background: #0d6efd !important;
  color: #fff !important;
  padding: .5rem .75rem;
  border-radius: .5rem;
  display: inline-block;
}

/* Jeśli używasz klas bootstrapowych .bg-light / .bg-primary */
#pm-messages .bg-light { background-color: #f1f3f5 !important; color: #111 !important; }
#pm-messages .bg-primary { background-color: #0d6efd !important; color: #fff !important; }

/* Zapewnia czytelność w linii daty/nazw */
#pm-messages small, #pm-messages .meta { color: #6c757d !important; }

/* Nadpisz niebieskie .bg-primary wewnątrz PM */
#pm-messages .bg-primary,
#pm-messages .bg-primary * {
  background: linear-gradient(135deg,#7b4de8,#a86ef7) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Dodatkowe zabezpieczenie gdy element ma inline style */
#pm-messages [style] {
  color: inherit !important;
  background: none !important;
}
#pm-messages .pm-message.me { box-shadow: 0 1px 6px rgba(123,77,232,0.25); }

/* Globalne nadpisanie aktywnego .list-group-item */
button.list-group-item.list-group-item-action.active,
button.list-group-item.list-group-item-action.active:hover,
button.list-group-item.list-group-item-action.active:focus {
  background: linear-gradient(135deg,#7b4de8,#a86ef7) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(123,77,232,0.25) !important;
}
button.list-group-item.list-group-item-action.active * {
  background: transparent !important;
  color: inherit !important;
}

.chat-message {    opacity: 1;    transition: opacity 0.5s;}.chat-message.fade-in {    opacity: 1;}

/* efekt wysuwania wiadomości prywatnych */
.pm-message {
  opacity: 1;
  transform: translateY(0);
  transition: transform 300ms ease, opacity 300ms ease;
}
.pm-new {
  opacity: 0;
  transform: translateY(12px);
}

/* Kontener listy */
#online-users-list {
  background: transparent;
  padding: 0.5rem;
}

/* Pojedynczy wiersz — zaokrąglony pasek z lekkim tłem */
#online-users-list .online-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.02); /* ciemne, subtelne tło */
  box-shadow: 0 1px 0 rgba(0,0,0,0.25) inset;
  border: 1px solid rgba(255,255,255,0.02);
}

/* Usuń standardowe granice/linie */
#online-users-list .online-user + .online-user { margin-top: 0; }

/* Lewa część: avatar + nazwa */
#online-users-list .online-user > div.d-flex {
  align-items: center;
  gap: 0.6rem;
}

/* Avatar */
.online-user .online-user-avatar,
.online-user .online-user-avatar-icon {
  width:36px;
  height:36px;
  border-radius:50%;
  flex: 0 0 36px;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25) inset;
}

/* Zielona kropka (online) — umieść nieco na lewo od avatara */
.online-indicator {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2ecc71;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25) inset;
  margin-right: 6px;
  flex: 0 0 auto;
}

/* Nazwa użytkownika */
#online-users-list .online-user strong {
  color: #2ecc71; /* zielony jak na przykładzie dla pierwszego użytkownika; nadpisz inline jeśli różne*/
  font-weight:600;
}

/* Przyciski "Napisz" — delikatny, obramowany i zaokrąglony */
.online-user .btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #bfc8d2;
  padding: .28rem .6rem;
  border-radius: 8px;
  box-shadow: none;
  min-width: 74px;
}

/* Zaznaczony/hover wiersz — delikatne podświetlenie */
#online-users-list .online-user:hover,
#online-users-list .online-user.selected {
  background: rgba(255,255,255,0.02);
  transform: none;
}

/* Karty / kontener */
.card .card-body {
  background: transparent;
}

/* PM sidebar — delikatne tło pasujące do pasków */
.pm-sidebar {
  border-right: none;
  padding-right: 0;
}

/* Dostosowanie ogólne kolorów tekstu w liście */
#online-users-list .online-user strong,
#online-users-list .online-user .small {
  color: #d8dfe6;
}

/* Jeśli chcesz różne kolory nicków (np. czerwony dla drugiego), dodaj klasę na elemencie i nadpisz color */
.online-user.nick-red strong { color: #e74c3c; }

/* Wrapper + ogólne */
.online-user .online-user-avatar-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Awatar ze zdjęciem — zachowaj istniejące style */
.online-user .online-user-avatar {
  width: 36px;
  height: 36px;

  display: block;
  object-fit: cover;

}

/* Ikona awatara (brak zdjęcia) — wygląd dokładnie taki sam jak zdjęciowy awatar */
.online-user .online-user-avatar-icon {
  width: 36px;
  height: 36px;
 
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: #fff;         /* ikona w środku */

}

/* ciemny edytor/podgląd */
.team-notes textarea#tn-content {
  background: #0d1117;
  color: #c9d1d9;
  border-color: #30363d;
}
.team-notes textarea#tn-content::placeholder { color: #6b7280; }

.team-notes iframe#tn-preview {
  background: #0d1117;
  color: #c9d1d9;
}