body{

  margin:0;

  background:#0f0f0f;

  color:white;

  font-family:Arial, sans-serif;

}



/* NAVBAR */

nav{

  background:#1a1a1a;

  padding:15px 30px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  position:sticky;

  top:0;

  z-index:1000;

}


.nav-left{

  display:flex;

  gap:25px;

  align-items:center;

  flex-wrap:wrap;

}


.nav-left a{

  color:white;

  text-decoration:none;

  font-size:18px;

  transition:0.2s;

}


.nav-left a:hover{

  color:#5865F2;

}



/* LOGIN */

.nav-right{

  display:flex;

  align-items:center;

  gap:15px;

  flex-wrap:wrap;

}


#roleSelect,

#codeInput{

  padding:10px;

  border:none;

  border-radius:10px;

  background:#1f1f1f;

  color:white;

  outline:none;

}


#loginBtn{

  padding:10px 20px;

  border:none;

  border-radius:10px;

  background:#5865F2;

  color:white;

  cursor:pointer;

  font-size:16px;

  transition:0.2s;

}


#loginBtn:hover{

  opacity:0.9;

}


#logoutBtn{

  padding:10px 15px;

  border:none;

  border-radius:10px;

  background:#ff4d4d;

  color:white;

  cursor:pointer;

}


#user{

  display:flex;

  align-items:center;

  gap:10px;

}


.user-info{

  display:flex;

  align-items:center;

  gap:12px;

}


.user-info img{

  width:45px;

  height:45px;

  border-radius:50%;

  object-fit:cover;

}


.user-name{

  font-size:16px;

  font-weight:bold;

}



/* HOME */

.container{

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:100px 20px;

}


h1{

  font-size:55px;

  margin-bottom:20px;

}


p{

  max-width:700px;

  font-size:22px;

  line-height:1.6;

}



/* CHAT */

.chat-container{

  padding:30px;

}


#messages{

  margin-top:20px;

  height:500px;

  overflow-y:auto;

  background:#1a1a1a;

  padding:20px;

  border-radius:15px;

}


.message{

  display:flex;

  gap:15px;

  margin-bottom:25px;

  align-items:flex-start;

}


.profile-pic{

  width:50px;

  height:50px;

  border-radius:50%;

  object-fit:cover;

  flex-shrink:0;

}


.message-content{

  max-width:80%;

}


.message-content strong{

  display:block;

  margin-bottom:5px;

  font-size:17px;

}


.message-content p{

  margin:0;

  font-size:16px;

  line-height:1.5;

  word-break:break-word;

}



/* IMAGENS */

.chat-image{

  margin-top:10px;

  display:block;

  width:auto;

  height:auto;

  max-width:500px;

  max-height:600px;

  border-radius:12px;

  object-fit:contain;

}



/* VÍDEOS */

.chat-video{

  margin-top:10px;

  display:block;

  width:auto;

  height:auto;

  max-width:500px;

  max-height:600px;

  border-radius:12px;

}



/* ÁUDIO */

audio{

  margin-top:10px;

  width:300px;

}



/* INPUT CHAT */

.chat-input{

  display:flex;

  gap:10px;

  margin-top:20px;

  flex-wrap:wrap;

}


.chat-input input[type="text"]{

  flex:1;

  padding:15px;

  border:none;

  border-radius:10px;

  font-size:16px;

  background:#1f1f1f;

  color:white;

  outline:none;

}


.chat-input input[type="file"]{

  color:white;

}


.chat-input button{

  padding:15px 25px;

  border:none;

  border-radius:10px;

  background:#5865F2;

  color:white;

  cursor:pointer;

  font-size:16px;

}


.chat-input button:hover{

  opacity:0.9;

}



/* CALENDÁRIO */

.calendar-page{

  padding:30px;

}


#calendar{

  background:white;

  border-radius:20px;

  padding:20px;

  min-height:800px;

  color:black;

  overflow:hidden;

}


.fc{

  background:white;

  color:black;

}


.fc-toolbar-title{

  color:black;

  font-weight:bold;

}


.fc-button{

  background:#5865F2 !important;

  border:none !important;

}


.fc-button:hover{

  opacity:0.9;

}


.fc-daygrid-day{

  cursor:pointer;

  transition:0.2s;

}


.fc-daygrid-day:hover{

  background:#f0f0f0;

}


.fc-daygrid-event{

  background:#5865F2 !important;

  border:none !important;

  padding:4px;

  border-radius:6px;

  font-size:13px;

}



/* MODAL */

.modal{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  height:100%;

  background:rgba(0,0,0,0.75);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:99999;

}


.modal-content{

  background:#1a1a1a;

  padding:22px;

  border-radius:20px;

  display:flex;

  flex-direction:column;

  gap:12px;

  width:400px;

  max-width:90%;

  max-height:85vh;

  overflow-y:auto;

  position:relative;

  z-index:100000;

  box-shadow:0 0 30px rgba(0,0,0,0.5);

}


.modal-content input,

.modal-content textarea{

  padding:15px;

  border:none;

  border-radius:10px;

  background:#2a2a2a;

  color:white;

  font-size:16px;

  outline:none;

}


.modal-content textarea{

  min-height:80px;

  resize:vertical;

}


.modal-content button{

  padding:15px;

  border:none;

  border-radius:10px;

  background:#5865F2;

  color:white;

  cursor:pointer;

  font-size:16px;

  transition:0.2s;

}


.modal-content button:hover{

  opacity:0.9;

}


#viewImage{

  width:100%;

  border-radius:15px;

  margin-top:15px;

  max-height:300px;

  object-fit:cover;

}


#adminButtons{

  display:flex;

  gap:10px;

  margin-top:20px;

}


#adminButtons button{

  flex:1;

}


#deleteEventBtn{

  background:#ff4d4d !important;

}


#closeModal,

#closeViewModal{

  position:absolute;

  top:10px;

  right:15px;

  font-size:28px;

  cursor:pointer;

}



/* RESPONSIVO */

@media(max-width:800px){

  nav{

    flex-direction:column;

    gap:15px;

  }



  .nav-left{

    justify-content:center;

  }



  .chat-input{

    flex-direction:column;

  }



  .chat-image,

  .chat-video{

    max-width:100%;

  }



  .modal-content{

    width:90%;

  }



  h1{

    font-size:38px;

  }



  p{

    font-size:18px;

  }

}

.fc-day-today{

  position:relative;

}


.fc-day-today::after{

  content:"HOJE";



  position:absolute;

  top:5px;

  right:5px;



  background:#5865F2;

  color:white;



  font-size:10px;

  font-weight:bold;



  padding:3px 6px;

  border-radius:20px;

}