/* ============================================================
   Pelnomocnik.tv - wspólne dodatki portalu

   Główny styl pochodzi BEZPOŚREDNIO z:
   /template/template.css

   Ten plik zawiera tylko rzeczy wspólne dla portalu,
   których oficjalny template nie posiada.
   ============================================================ */


/* ============================================================
   PRAWDZIWE OBRAZY LOGO I KONTA
   ============================================================ */

.brand-logo,
.account-avatar {
    overflow:hidden;
}

.brand-logo img,
.account-avatar img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.brand-logo img {
    border-radius:50%;
}


/* ============================================================
   POWIADOMIENIA O TRANSMISJI - GÓRNY PASEK
   ============================================================ */

.topbar-live-push-toggle {
    cursor:pointer;
}

.topbar-live-push-toggle.is-loading svg {
    animation:spin .8s linear infinite;
}

.topbar-live-push-toggle.is-enabled {
    border-color:rgba(37,239,120,.24);
    background:rgba(37,239,120,.07);
    color:#95f6b4;
}

.topbar-live-push-toggle.is-blocked {
    opacity:.42;
    cursor:not-allowed;
}


/* ============================================================
   POCZTA
   ============================================================ */

.topbar-message-indicator:not(.has-counter) .topbar-message-count {
    display:none;
}


/* ============================================================
   MENU KONTA
   ============================================================ */

.account-menu-separator {
    height:1px;
    margin:5px 4px;
    background:rgba(148,163,184,.12);
}

.account-panel .account-menu-logout {
    color:#ff91a7;
}


/* ============================================================
   WSPÓLNY NAGŁÓWEK STRONY
   ============================================================ */

.page-header-title-line {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}


/* ============================================================
   AUTOMATYCZNE ODŚWIEŻANIE
   ============================================================ */

.refresh-indicator.is-refreshing {
    border-color:rgba(161,92,255,.28);
    background:rgba(161,92,255,.06);
    color:#c696ff;
}

.refresh-indicator.is-error {
    border-color:rgba(255,86,119,.24);
    background:rgba(255,86,119,.05);
    color:#ff91a7;
}

.refresh-indicator.is-paused {
    border-color:rgba(148,163,184,.16);
    background:#0a111d;
    color:#8fa0b8;
}


/* ============================================================
   POPUPY ZDARZEŃ

   Sam popup korzysta BEZPOŚREDNIO z:
   .toast
   .toast-close
   .toast-progress

   z /template/template.css.
   Tutaj są tylko dodatkowe pola treści zdarzenia.
   ============================================================ */

.admin-event-toast {
    animation:portal-event-toast-in .24s ease-out both;
}

.admin-event-toast.is-closing {
    animation:portal-event-toast-out .22s ease-in both;
}

.admin-event-toast-top {
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    padding-right:26px;
}

.admin-event-toast-source {
    min-height:22px;
    display:inline-flex;
    align-items:center;
    padding:0 7px;

    border:1px solid rgba(148,163,184,.16);
    border-radius:7px;

    background:#111925;
    color:#aeb8c7;

    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;

    white-space:nowrap;
}

.admin-event-toast-source-audit,
.admin-event-toast-source-twitch {
    border-color:rgba(161,92,255,.24);
    background:rgba(161,92,255,.07);
    color:#c69aff;
}

.admin-event-toast-source-bot,
.admin-event-toast-source-live {
    border-color:rgba(37,239,120,.20);
    background:rgba(37,239,120,.05);
    color:#77f3a0;
}

.admin-event-toast-source-moderation {
    border-color:rgba(255,86,119,.22);
    background:rgba(255,86,119,.05);
    color:#ff879f;
}

.admin-event-toast-time {
    min-width:0;
    margin-left:auto;

    color:#8fa0b8;

    font-size:10px;
    line-height:1.3;

    white-space:nowrap;
}

.admin-event-toast-title {
    margin-top:9px;

    color:#ffffff;

    font-size:12px;
    font-weight:700;
    line-height:1.35;
}

.admin-event-toast-message {
    margin-top:5px;

    color:#d7dee8;

    font-size:11px;
    font-weight:400;
    line-height:1.45;

    overflow-wrap:anywhere;
}

.admin-event-toast-meta {
    margin-top:6px;

    color:#8fa0b8;

    font-size:10px;
    font-weight:400;
    line-height:1.4;

    overflow-wrap:anywhere;
}

@keyframes portal-event-toast-in {
    from {
        opacity:0;
        transform:translate3d(18px,0,0);
    }

    to {
        opacity:1;
        transform:translate3d(0,0,0);
    }
}

@keyframes portal-event-toast-out {
    from {
        opacity:1;
        transform:translate3d(0,0,0);
    }

    to {
        opacity:0;
        transform:translate3d(18px,0,0);
    }
}

@media(max-width:640px) {

    .admin-event-toast-top {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .admin-event-toast-time {
        margin-left:0;
    }
}


/* ============================================================
   SIDEBAR PORTALU

   Portal ma więcej pozycji menu niż strona demonstracyjna
   /template/. Przewijanie pozostaje dostępne, ale sam natywny
   scrollbar nie zabiera szerokości sidebara.
   ============================================================ */

.sidebar {
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.sidebar::-webkit-scrollbar {
    width:0;
    height:0;
}