/* ==========================================================================
   MU ONLINE DASHBOARD - DARK RED (ULTIMATE TYPOGRAPHY)
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "friz";
    src: url('../fonts/friz.ttf');
}

@font-face {
    font-family: 'Visitor One';
    font-style: normal;
    font-weight: normal;
    src: local('Visitor Two'), url('../fonts/visitor1.ttf') format('truetype');
}

body {
    padding: 0;
    margin: 0;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden;
    user-select: none;
    font-family: 'Rajdhani', sans-serif;
    color: #f1cfd2;
}

/* ---------------------------------------------------------------------
 * Scrollbar Customizada (Dark Red)
 * --------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 4px;
    -webkit-app-region: no-drag;
}
::-webkit-scrollbar-track {
    background: rgba(14, 2, 4, 0.6);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #800f15 0%, #c41c2a 100%);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff384c;
    box-shadow: 0 0 6px #ff384c;
}
::-webkit-scrollbar-button {
    display: none;
}

/* Tooltips */
.tooltip.in { opacity: 1; filter: alpha(opacity=100); }
.tooltip-inner {
    background: #180305 !important;
    border: 1px solid #851c24;
    color: #ffcdd2 !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
    padding: 3px 8px;
}
.tooltip.top .tooltip-arrow { border-top-color: #851c24; }
.tooltip.right .tooltip-arrow { border-right-color: #851c24; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #851c24; }
.tooltip.left .tooltip-arrow { border-left-color: #851c24; }

/* ---------------------------------------------------------------------
 * Frame Principal
 * --------------------------------------------------------------------- */
.dash {
    width: 320px;
    height: 473px;
    background: linear-gradient(180deg, #160406 0%, #0d0204 60%, #050102 100%);
    border: 1px solid #5a1017;
    border-radius: 6px;
    position: relative;
    -webkit-app-region: drag;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 90, 100, 0.3),
        0 0 25px rgba(220, 20, 40, 0.2);
    overflow: hidden;
}

/* Header */
.dash .header {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: linear-gradient(180deg, rgba(74, 13, 19, 0.4) 0%, transparent 100%);
    border-bottom: 1px solid rgba(90, 16, 23, 0.4);
}

.dash .header .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ruby-gem {
    width: 6px;
    height: 6px;
    background: #ff3344;
    transform: rotate(45deg);
    box-shadow: 0 0 6px #ff3344;
}

.dash .header .header-title p {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    color: #ff4d5a;
    letter-spacing: 1.5px;
    margin: 0;
    text-shadow: 0 0 8px rgba(255, 40, 60, 0.6);
}

.dash .buttons {
    display: flex;
    -webkit-app-region: no-drag;
    align-items: center;
    gap: 6px;
}

.dash .buttons .notify-icon,
.dash .buttons .minimize,
.dash .buttons .closed {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a0305;
    border: 1px solid #4a1017;
    transition: all 0.2s ease;
}

.dash .buttons .svg-ico {
    width: 11px;
    height: 11px;
    fill: #e5b3b7;
    transition: fill 0.2s;
}

.dash .buttons .notify-icon.on .svg-ico {
    fill: #ff384c;
    filter: drop-shadow(0 0 4px #ff384c);
}
.dash .buttons .notify-icon.off .svg-ico { fill: #4a1017; }

.dash .buttons .minimize:hover,
.dash .buttons .closed:hover,
.dash .buttons .notify-icon:hover {
    background: #4a0d13;
    border-color: #b91c2b;
    box-shadow: 0 0 8px rgba(185, 28, 43, 0.6);
}

.dash .buttons .minimize:hover .svg-ico,
.dash .buttons .closed:hover .svg-ico {
    fill: #ffffff;
}

/* ---------------------------------------------------------------------
 * Navegação Principal (Tabs)
 * --------------------------------------------------------------------- */
.dash .container-dash { width: 300px; margin: 8px auto 0; -webkit-app-region: no-drag; }
.dash .container-dash .navbar-dash { width: 100%; margin-bottom: 8px; }
.dash .container-dash .navbar-dash ul { list-style: none; display: flex; gap: 5px; width: 100%; padding: 0; margin: 0; }

.dash .container-dash .navbar-dash ul li {
    flex: 1; height: 32px;
    background: linear-gradient(180deg, #240508 0%, #100204 100%);
    border: 1px solid #5a1017; border-radius: 3px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-svg { width: 18px; height: 18px; fill: #a8797e; transition: all 0.2s ease; }
.dash .container-dash .navbar-dash ul li:hover {
    background: linear-gradient(180deg, #420a10 0%, #1f0407 100%);
    border-color: #991b28;
}
.dash .container-dash .navbar-dash ul li:hover .tab-svg { fill: #ffffff; }

@keyframes iconPulse {
    0% { filter: drop-shadow(0 0 2px #ff384c); transform: scale(1); }
    50% { filter: drop-shadow(0 0 10px #ff384c) brightness(1.2); transform: scale(1.1); }
    100% { filter: drop-shadow(0 0 2px #ff384c); transform: scale(1); }
}

.dash .container-dash .navbar-dash ul li.active {
    background: linear-gradient(180deg, #6b0c13 0%, #3d060b 100%);
    border-color: #ff384c;
    box-shadow: 0 0 12px rgba(224, 36, 56, 0.5), inset 0 1px 0 rgba(255, 140, 140, 0.3);
}
.dash .container-dash .navbar-dash ul li.active .tab-svg {
    fill: #ffffff;
    animation: iconPulse 2s infinite ease-in-out;
}

/* ---------------------------------------------------------------------
 * Sub-Menu (Eventos, Bosses, Invasões)
 * --------------------------------------------------------------------- */
.dash .container-dash .events-names { display: flex; gap: 4px; margin-bottom: 6px; }
.dash .container-dash .events-names li {
    list-style: none; flex: 1; height: 26px;
    background: rgba(26, 4, 7, 0.7);
    border: 1px solid #4a1017;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px; font-weight: 700; color: #c99da1;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    text-transform: uppercase; transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
.sub-svg { width: 11px; height: 11px; fill: #c99da1; transition: fill 0.2s; }
.dash .container-dash .events-names li:hover { border-color: #851c24; color: #ffffff; }

.dash .container-dash .events-names li.active {
    background: rgba(82, 12, 19, 0.6);
    border-color: #851c24;
    border-bottom: 2px solid #ff384c;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 56, 76, 0.8);
    box-shadow: inset 0 -5px 10px rgba(255, 56, 76, 0.2);
}
.dash .container-dash .events-names li.active .sub-svg { fill: #ff384c; filter: drop-shadow(0 0 3px #ff384c); }

@keyframes swipeLight {
    0% { left: -100%; }
    100% { left: 200%; }
}
.dash .container-dash .events-names li.active::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: swipeLight 2.5s infinite; pointer-events: none;
}

/* ---------------------------------------------------------------------
 * O QUADRADO ÚNICO MESTRE (Para as Listas)
 * --------------------------------------------------------------------- */
.dash .container-dash .list-c,
.dash .container-dash .list-e { display: none; }
.dash .container-dash .list-c.active,
.dash .container-dash .list-e.active { display: block; width: 100%; }

.list-container-master {
    width: 100%;
    height: 335px;
    background: rgba(14, 2, 4, 0.75);
    border: 1px solid #4a1017;
    border-radius: 4px;
    padding: 6px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------
 * AS LINHAS DO EVENTO (Tr/Td)
 * --------------------------------------------------------------------- */
.dash .container-dash .list-p {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0; padding: 0;
}

.dash .container-dash .list-p tr,
.dash .container-dash .list-p td {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    
    background: transparent !important; 
    border: none !important;
    border-bottom: 1px solid rgba(75, 12, 18, 0.4) !important;
    border-radius: 0 !important;
    
    padding: 10px 6px !important; /* Mais respiro para destacar a fonte */
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.dash .container-dash .list-p tr:hover,
.dash .container-dash .list-p td:hover {
    background: rgba(255, 56, 76, 0.04) !important;
    border-bottom-color: #c41c2a !important;
}

.dash .container-dash .list-p td:last-child {
    border-bottom: none !important;
}

/* Ícone Lateral da Linha */
.dash .container-dash .list-p td i {
    color: #5a1017; font-size: 10px; margin: 0 8px 0 2px !important;
    background: transparent !important; border: none !important; flex-shrink: 0;
}
.dash .container-dash .list-p td i.on { color: #ff384c; text-shadow: 0 0 5px #ff384c; }

/* ---------------------------------------------------------------------
 * NOME DO EVENTO - TIPOGRAFIA EXTRAORDINÁRIA (AAA GRADE)
 * --------------------------------------------------------------------- */
.dash .container-dash .list-p td p,
.dash .container-dash .list-p td p.respawn {
    font-family: 'Cinzel', serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Efeito de Gradiente Metálico (Prata > Rosa Escuro) no Texto */
    background: linear-gradient(90deg, #f8fafc 0%, #fca5a5 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* Filtro para projetar sombra mantendo o background-clip perfeito */
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.9));
    
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Transição suave para o efeito de Hover (Deslizamento) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* EFEITO AO PASSAR O MOUSE: Desliza e fica incandescente */
.dash .container-dash .list-p td:hover p {
    background: linear-gradient(90deg, #ffffff 0%, #ff384c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0px 0px 5px rgba(255, 56, 76, 0.6));
    transform: translateX(4px) !important; /* Deslocamento cinematográfico */
}

/* Evento Ativo (.await): Texto Pulsa e fica Vermelho Escarlate */
.dash .container-dash .list-p td:has(.info.await) p {
    background: linear-gradient(90deg, #ff384c 0%, #ff949d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0px 0px 6px rgba(255, 56, 76, 0.8));
}

/* Evento Quase Iniciando (.respawn-c): Texto Carmesim Intenso */
.dash .container-dash .list-p td:has(.respawn-c) p {
    background: linear-gradient(90deg, #fca5a5 0%, #c41c2a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Limpeza de Spans inúteis renderizados pelo script JS */
.dash .container-dash .list-p td span:not(.respawn-c):not(.info),
.dash .container-dash .list-p td div:not(.respawn-c):not(.info) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ---------------------------------------------------------------------
 * BADGE LATERAL DO HORÁRIO (TIMER / CONTADOR)
 * --------------------------------------------------------------------- */
.dash .container-dash .list-p td .respawn-c,
.dash .container-dash .list-p td .info {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important; font-weight: 700 !important;
    background: #120204 !important;
    border: 1px solid #4a1017 !important;
    color: #e5b3b7 !important;
    border-radius: 3px !important;
    padding: 3px 8px !important;
    min-width: 55px !important;
    text-align: center !important;
    margin: 0 0 0 8px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* Badge: Acontecendo Agora */
.dash .container-dash .list-p td .info.await,
.dash .container-dash .list-p td.active .info {
    background: #4a0d13 !important;
    border: 1px solid #ff384c !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 56, 76, 0.6) !important;
    animation: badgePulse 1.4s infinite alternate ease-in-out;
}
@keyframes badgePulse {
    0% { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

/* Badge: Iminente (< 5 min) */
.dash .container-dash .list-p td .respawn-c,
.dash .container-dash .list-p td .info.imminent {
    background: #36070b !important;
    border: 1px solid #c41c2a !important;
    color: #ff949d !important;
}


/* ---------------------------------------------------------------------
 * Discord Panel
 * --------------------------------------------------------------------- */
.discord-scroll-area {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; align-content: start;
}
.dash .container-dash .discord-list .user {
    background: rgba(26, 4, 7, 0.6);
    border: 1px solid #4a1017; border-radius: 4px; padding: 6px;
    display: flex; flex-direction: column; align-items: center; transition: all 0.2s ease;
}
.dash .container-dash .discord-list .user:hover { border-color: #ff384c; transform: scale(1.03); }
.dash .container-dash .discord-list .user .photo {
    width: 44px; height: 44px; border-radius: 4px; position: relative;
    background: #080102; border: 1px solid #4a1017;
}
.dash .container-dash .discord-list .user .photo img { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; }
.dash .container-dash .discord-list .user .photo .online,
.dash .container-dash .discord-list .user .photo .dnd,
.dash .container-dash .discord-list .user .photo .idle {
    width: 10px; height: 10px; border-radius: 50%; position: absolute;
    bottom: -3px; right: -3px; border: 2px solid #140204;
}
.dash .container-dash .discord-list .user .photo .online { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.dash .container-dash .discord-list .user .photo .dnd    { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
.dash .container-dash .discord-list .user .photo .idle   { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }

/* ---------------------------------------------------------------------
 * Streamers / Lives Panel
 * --------------------------------------------------------------------- */
.dash .container-dash .streamers {
    width: 100%; background: rgba(26, 4, 7, 0.6);
    border: 1px solid #4a1017; border-radius: 4px;
    margin-bottom: 8px; padding: 6px; transition: all 0.2s ease;
}
.dash .container-dash .streamers:hover { border-color: #ff384c; }
.dash .container-dash .streamers-m .capa {
    width: 100%; height: 75px; border-radius: 3px;
    background: #080102; border: 1px solid #3d090d; overflow: hidden;
}
.dash .container-dash .streamers-m .capa img { width: 100%; height: 100%; object-fit: cover; }
.dash .container-dash .streamers-m .info { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.dash .container-dash .streamers-m .info .name a {
    font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: #ff6b77; text-decoration: none;
}
.dash .container-dash .streamers-m .info .count {
    background: #360509; border: 1px solid #6e0f17; border-radius: 3px; padding: 2px 6px;
}
.dash .container-dash .streamers-m .info .count span {
    color: #ff858e; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
}
.dash .container-dash .loading { margin: 60px auto; text-align: center; }
.dash .container-dash .loading img { display: block; margin: 0 auto 12px; filter: drop-shadow(0 0 8px #ff384c); }
.dash .container-dash .loading p { color: #9e7377; font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; }