/* dark-mode.css */
body.dark-mode {
  background-color: #363636;
  color: #f0f0f0;
}

body.dark-mode input {
  background-color: #333;
  color: #f0f0f0;
}

body.dark-mode .dropdown-menu {
  background-color: #2c2c2c;
}

body.dark-mode .def-btn:hover {
  background-color: #3a3a3a;
}

body.dark-mode .card-style {
  background-color: #2a2a2a;
  color: #f0f0f0;
}

body.dark-mode h2,
body.dark-mode h3 {
  color: #cba6f7;
}

header.dark-mode {
  background-color: #cba6f7;
  color: #f0f0f0;
}

/* ------- DARK MODE: HEADER ------- */
body.dark-mode header {
  background-color: #1f1f1f;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .search-bar input {
  background-color: #2a2a2a;
  color: #f0f0f0;
}

body.dark-mode .search-bar input::placeholder {
  color: #ffffff;
}

body.dark-mode #notification-button span,
body.dark-mode #profile-button span,
body.dark-mode #config-button span,
body.dark-mode #help-button span,
body.dark-mode #dark-mode-button span {
  color: #f0f0f0;
}

body.dark-mode .def-btn:hover {
  background-color: #3a3a3a;
}

body.dark-mode .new-project-button {
  background-color: #7127d8;
}

body.dark-mode .new-project-button:hover {
  background-color: #7127d8;
}

/* ------- DARK MODE: DROPDOWN MENU LOGIN ------- */
body.dark-mode .dropdown-menu {
  background-color: #2a2a2a;
  box-shadow: 2px 2px 7px -3px #000000;
}

body.dark-mode .dropdown-menu a,
body.dark-mode #profile-dropdown-menu ul li #user-name {
  color: #f0f0f0;
}

/* ------- DARK MODE: DROPDOWN MENU NOTIFICATIONS ------- */
body.dark-mode .dropdown-notifications {
  background: #222;
  color: #f1f1f1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* -----------DARK MODE: FOOTER---------- */
body.dark-mode footer {
  background-color: #1f1f1f;
  color: #f0f0f0;
}

body.about-page.dark-mode {
  background: url("../img/Plain-Purple-Background.jpg");
}

/* -----------DARK MODE: HELP PAGE----------- */
body.help-page.dark-mode {
  background: url("../img/Plain-Purple-Background.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: #f0f0f0;
}

body.help-page.dark-mode .card-ajuda {
  background-color: #2a2a2a;
  color: #f0f0f0;
}

body.help-page.dark-mode .card-ajuda p,
body.help-page.dark-mode .card-ajuda li,
body.help-page.dark-mode .card-ajuda ul {
  color: #f0f0f0;
}

body.help-page.dark-mode h2,
body.help-page.dark-mode .faq h3 {
  color: #cba6f7;
}

body.help-page.dark-mode .faq p {
  color: #f0f0f0;
}

/* ---------- DARK MODE: PROJECT PAGE ---------- */
body.dark-mode {
  background-color: #1f1f1f;
  color: #f0f0f0;
}

/* Main Header */
body.dark-mode .main-header {
  background-color: #2a2a2a;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .main-header-content {
  color: #f0f0f0;
}

body.dark-mode .main-header-content span.main-header-text {
  color: #cba6f7;
}

body.dark-mode .main-header-content button {
  color: #f0f0f0;
}

body.dark-mode .main-header-content button:hover {
  color: #cba6f7;
}

/* Etapas/Steps */
body.dark-mode .step {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .step:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .step a {
  color: #cba6f7;
}

body.dark-mode .step a:hover {
  color: #b794f6;
}

body.dark-mode .step-header {
  background-color: #333;
  border-bottom-color: #444;
}

body.dark-mode .drag-handle {
  color: #888;
}

body.dark-mode .drag-handle:hover {
  color: #cba6f7;
}

body.dark-mode .drag-handle:active {
  color: #b794f6;
}

body.dark-mode .step-name {
  color: #cba6f7;
}

body.dark-mode .step-date {
  background-color: #3a3a3a;
  color: #bbb;
}

body.dark-mode .step-header-people {
  color: #bbb;
}

body.dark-mode .step-main-content {
  color: #ddd;
}

body.dark-mode .step-main-content::-webkit-scrollbar-thumb {
  background-color: #555;
}

body.dark-mode .step-main-content::-webkit-scrollbar-thumb:hover {
  background-color: #cba6f7;
}

body.dark-mode .step-footer {
  background-color: #333;
  border-top-color: #444;
}

body.dark-mode .step-docs {
  background-color: #3a3a3a;
  color: #f0f0f0;
  border-color: #444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .step-docs:hover {
  background-color: #7127d8;
  color: white;
  border-color: #7127d8;
  box-shadow: 0 4px 8px rgba(113, 39, 216, 0.5);
}

/* Side Menu (Menu Direito) */
body.dark-mode .side-menu {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .side-menu a {
  color: #cba6f7;
}

body.dark-mode .side-menu a:hover {
  color: #b794f6;
}

body.dark-mode .side-menu-header h3 {
  color: #888;
}

body.dark-mode .menu-header-people {
  background-color: #333;
  border-color: #444;
}

body.dark-mode .menu-header-people span {
  color: #ddd;
}

body.dark-mode .menu-header-people::-webkit-scrollbar-thumb {
  background-color: #cba6f7;
}

body.dark-mode .menu-header-date {
  background-color: #333;
  border-color: #444;
  color: #bbb;
}

body.dark-mode .menu-desc {
  background-color: #333;
  border-color: #444;
  color: #ddd;
}

body.dark-mode .menu-desc h2 {
  color: #cba6f7;
}

body.dark-mode .menu-desc::-webkit-scrollbar-thumb {
  background-color: #cba6f7;
}

body.dark-mode .menu-media {
  border-color: #555;
}

body.dark-mode .menu-media:hover {
  border-color: #cba6f7;
}

body.dark-mode .menu-media-right {
  background-color: #333;
  border-color: #444;
  color: #888;
}

body.dark-mode .menu-media-right:hover {
  background-color: #3a3a3a;
  color: #cba6f7;
  border-color: #cba6f7;
}

/* Botão de Editar */
body.dark-mode #edit-project-btn {
  background-color: #7127d8;
  color: white;
}

body.dark-mode #edit-project-btn:hover {
  background-color: #5a1faf;
  box-shadow: 0 4px 8px rgba(113, 39, 216, 0.6);
}

/* Dropdown */
body.dark-mode .dropbtn {
  color: #f0f0f0;
}

body.dark-mode .dropbtn:hover {
  background-color: #3a3a3a;
  color: #cba6f7;
}

body.dark-mode .dropdown-content {
  background-color: #2a2a2a;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-content a {
  color: #f0f0f0;
}

body.dark-mode .dropdown-content a:hover {
  background-color: #3a3a3a;
  color: #cba6f7;
}

/* Popups */
body.dark-mode .popup {
  background: rgba(0, 0, 0, 0.8);
}

body.dark-mode .popup-content {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode .popup-content h4 {
  color: #cba6f7;
}

body.dark-mode .popup-content p {
  color: #bbb;
}

body.dark-mode .popup-content input[type="text"],
body.dark-mode .popup-content textarea,
body.dark-mode .popup-content input[type="file"] {
  background-color: #3a3a3a;
  color: #f0f0f0;
  border-color: #555;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .popup-content input[type="text"]::placeholder,
body.dark-mode .popup-content textarea::placeholder {
  color: #bbb;
}

body.dark-mode .popup-content input[type="text"]:focus,
body.dark-mode .popup-content textarea:focus {
  border-color: #cba6f7;
  background-color: #444;
  box-shadow: 0 0 6px rgba(203, 166, 247, 0.4);
}

body.dark-mode .popup-content label {
  color: #ddd;
}

body.dark-mode .popup-content button {
  background-color: #7127d8;
  color: white;
}

body.dark-mode .popup-content button:hover {
  background-color: #5a1faf;
}

body.dark-mode .popup-content .close-popup {
  color: #888;
}

body.dark-mode .popup-content .close-popup:hover {
  color: #cba6f7;
}

/* Member items no popup de editar */
body.dark-mode .member-item {
  background-color: #3a3a3a;
  color: #f0f0f0;
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.dark-mode .remove-member-btn {
  background-color: #555;
  color: #f0f0f0;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

body.dark-mode .remove-member-btn:hover {
  background-color: #d32f2f;
}

/* Checkboxes */
body.dark-mode input[type="checkbox"] {
  accent-color: #7127d8;
}

/* Image preview no popup */
body.dark-mode #image-preview {
  border: 2px solid #555;
  border-radius: 8px;
}

/* Botões de ação nas etapas */
body.dark-mode .edit-step-btn,
body.dark-mode .delete-step-btn {
  background-color: #3a3a3a;
  color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s;
}

body.dark-mode .edit-step-btn:hover {
  background-color: #7127d8;
  border-color: #7127d8;
}

body.dark-mode .delete-step-btn:hover {
  background-color: #d32f2f;
  border-color: #d32f2f;
}

/* ---------- DARK MODE: PROFILE PAGE ---------- */
body.dark-mode {
  background-color: #1f1f1f;
  color: #f0f0f0;
}

body.dark-mode main {
  background-color: #1f1f1f;
}

/* Header roxo */
body.dark-mode .profile-header {
  background: linear-gradient(135deg, #7127d8 0%, #5a1faf 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Bio Box */
body.dark-mode .bio-box {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .bio-title {
  color: #cba6f7;
}

body.dark-mode .bio-text {
  color: #ddd;
}

body.dark-mode .bio-links a {
  color: #cba6f7;
}

body.dark-mode .bio-links a:hover {
  color: #b794f6;
}

/* Projects Section */
body.dark-mode .projects-section-title {
  color: #cba6f7;
}

/* Project Blocks */
body.dark-mode .project-block {
  background-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .project-block:hover {
  box-shadow: 0 12px 24px rgba(113, 39, 216, 0.25);
}

body.dark-mode .project-img {
  background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
}

body.dark-mode .project-footer {
  background-color: #2a2a2a;
  color: #f0f0f0;
  border-top-color: #444;
}

body.dark-mode .project-block:hover .project-footer {
  background-color: #333;
}

/* Popup */
body.dark-mode .popup {
  background-color: rgba(0, 0, 0, 0.8);
}

body.dark-mode .popup-content {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .popup-title {
  color: #cba6f7;
}

body.dark-mode .close-btn {
  color: #888;
}

body.dark-mode .close-btn:hover {
  color: #cba6f7;
}

/* Form inputs */
body.dark-mode .edit-profile-form label {
  color: #ddd;
}

body.dark-mode .edit-profile-form input,
body.dark-mode .edit-profile-form textarea {
  background-color: #333;
  color: #f0f0f0;
  border-color: #555;
}

body.dark-mode .edit-profile-form input::placeholder,
body.dark-mode .edit-profile-form textarea::placeholder {
  color: #888;
}

body.dark-mode .edit-profile-form input:focus,
body.dark-mode .edit-profile-form textarea:focus {
  border-color: #cba6f7;
  background-color: #3a3a3a;
  box-shadow: 0 0 6px rgba(203, 166, 247, 0.3);
}

body.dark-mode .submit-button {
  background-color: #7127d8;
  color: white;
}

body.dark-mode .submit-button:hover {
  background-color: #5a1faf;
  box-shadow: 0 4px 12px rgba(113, 39, 216, 0.5);
}

/* Previews */
body.dark-mode #popup-avatar,
body.dark-mode #popup-banner {
  background-color: #333;
  border-color: #555;
}

/* ---------- DARK MODE: NEW PROJECT PAGE ---------- */
body.dark-mode {
  background-color: #1f1f1f;
  color: #f0f0f0;
}

body.dark-mode .main-header {
  background-color: #2a2a2a;
  color: #cba6f7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .project-form-box {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .form-item .text {
  background-color: #3a3a3a;
  color: #f0f0f0;
  border-color: #555;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .form-item .text::placeholder {
  color: #bbb;
}

body.dark-mode .form-item .text:focus {
  border-color: #cba6f7;
  background-color: #444;
  box-shadow: 0 0 6px rgba(203, 166, 247, 0.4);
}

body.dark-mode input.submit {
  background-color: #7127d8;
  color: #f0f0f0;
}

body.dark-mode input.submit:hover {
  background-color: #5a1faf;
}

/* Para o select dropdown se houver */
body.dark-mode select.text {
  background-color: #3a3a3a;
  color: #f0f0f0;
  border-color: #555;
}

body.dark-mode select.text option {
  background-color: #3a3a3a;
  color: #f0f0f0;
}

/* Para textarea se houver */
body.dark-mode textarea.text {
  background-color: #3a3a3a;
  color: #f0f0f0;
  border-color: #555;
}

body.dark-mode textarea.text:focus {
  border-color: #cba6f7;
  background-color: #444;
  box-shadow: 0 0 6px rgba(203, 166, 247, 0.4);
}

/* Image Upload Container */
body.dark-mode .image-upload-container {
  margin-top: 8px;
}

body.dark-mode .image-preview {
  background-color: #333;
  border: 2px dashed #555;
}

body.dark-mode .image-preview:hover {
  border-color: #cba6f7;
  background-color: #3a3a3a;
}

body.dark-mode .image-preview i {
  color: #cba6f7;
}

body.dark-mode .image-preview span {
  color: #ddd;
}

body.dark-mode .image-preview small {
  color: #888;
}

/* Quando a imagem for carregada */
body.dark-mode .image-preview.has-image {
  border: 2px solid #cba6f7;
  background-color: #2a2a2a;
}

body.dark-mode .image-preview.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- DARK MODE: NOTIFICATION BUTTON ---------- */
body.dark-mode #notification-button {
  color: #f0f0f0;
}

body.dark-mode #notification-badge {
  background-color: #ff4444;
  color: #fff;
}

body.dark-mode .notification-menu {
  background-color: #2a2a2a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  color: #f0f0f0;
}

body.dark-mode .notification-menu div {
  color: #f0f0f0 !important;
  border-bottom-color: #444 !important;
  background-color: #333 !important;
}

body.dark-mode .notification-menu div[style*="background: #f0f8ff"] {
  background-color: #3a3a3a !important;
}

body.dark-mode .notification-menu button {
  color: #fff;
}

body.dark-mode .notification-menu button:hover {
  opacity: 0.9;
}

/* Dark mode para comentários */
body.dark-mode .comments-container {
  background-color: #2c2c2c;
}

body.dark-mode .comments-title {
  color: #f0f0f0;
  border-bottom-color: #444;
}

body.dark-mode #disqus_thread {
  color-scheme: dark;
}

/* ===== BACKGROUND DINÂMICO - DARK MODE FIXES ===== */

/* Remove TODOS os backgrounds sólidos quando o background dinâmico está ativo */
body.dark-mode.project-background-active,
body.dark-mode.project-background-active main,
body.dark-mode.project-background-active .main-content {
  background-color: transparent !important;
}

/* Garante que o background apareça no dark mode */
body.dark-mode.project-background-active::before {
  opacity: 1 !important;
  z-index: -2;
  filter: blur(20px) brightness(0.8);
}

body.dark-mode.project-background-active::after {
  opacity: 1 !important;
  z-index: -1;
  background: linear-gradient(to bottom,
      rgba(18, 18, 18, 0.70) 0%,
      rgba(18, 18, 18, 0.65) 50%,
      rgba(18, 18, 18, 0.70) 100%) !important;
}

/* Cards com glass effect no dark mode */
body.dark-mode.project-background-active .main-header,
body.dark-mode.project-background-active .step,
body.dark-mode.project-background-active .side-menu,
body.dark-mode.project-background-active .comments-container {
  background-color: rgba(42, 42, 42, 0.80) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Headers e footers das etapas */
body.dark-mode.project-background-active .step-footer,
body.dark-mode.project-background-active .step-header {
  background-color: rgba(30, 30, 30, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Menu lateral mais transparente */
body.dark-mode.project-background-active .menu-header-people,
body.dark-mode.project-background-active .menu-header-date,
body.dark-mode.project-background-active .menu-desc {
  background-color: rgba(51, 51, 51, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Melhora o contraste dos textos */
body.dark-mode.project-background-active .step-name,
body.dark-mode.project-background-active .main-header-text,
body.dark-mode.project-background-active .comments-title {
  color: #e0d0ff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

body.dark-mode.project-background-active .step-main-content,
body.dark-mode.project-background-active .menu-desc p {
  color: #e8e8e8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Popups no dark mode com background */
body.dark-mode.project-background-active .popup {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(5px);
}

body.dark-mode.project-background-active .popup-content {
  background: rgba(42, 42, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* Inputs nos popups */
body.dark-mode.project-background-active .popup-content input[type="text"],
body.dark-mode.project-background-active .popup-content textarea {
  background-color: rgba(58, 58, 58, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Footer no dark mode com background */
body.dark-mode.project-background-active footer {
  background-color: rgba(31, 31, 31, 0.90) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Header no dark mode com background */
body.dark-mode.project-background-active header {
  background-color: rgba(31, 31, 31, 0.90) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Seção de comentários Disqus */
body.dark-mode.project-background-active #disqus_thread {
  background-color: transparent !important;
}

/* Melhora a legibilidade dos links */
body.dark-mode.project-background-active a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Drag handle */
body.dark-mode.project-background-active .drag-handle {
  color: #aaa !important;
}

body.dark-mode.project-background-active .drag-handle:hover {
  color: #e0d0ff !important;
}

/* Remove todas as bordas cinza dos blocos no dark mode */
body.dark-mode.project-background-active .main-header,
body.dark-mode.project-background-active .step,
body.dark-mode.project-background-active .side-menu,
body.dark-mode.project-background-active .comments-container,
body.dark-mode.project-background-active .step-footer,
body.dark-mode.project-background-active .step-header,
body.dark-mode.project-background-active .menu-header-people,
body.dark-mode.project-background-active .menu-header-date,
body.dark-mode.project-background-active .menu-desc {
  border: none !important;
}

/* ---------- DARK MODE: VIDEO PITCH AREA ---------- */
body.dark-mode .video-pitch-area {
  background-color: #333;
  border: none !important;
  color: #ddd;
}

body.dark-mode .video-pitch-area h2 {
  color: #cba6f7;
}

body.dark-mode .video-pitch-area::-webkit-scrollbar-thumb {
  background-color: #cba6f7;
}

body.dark-mode .video-link-box a {
  color: #cba6f7;
}

body.dark-mode .video-link-box a:hover {
  color: #b794f6;
}

body.dark-mode .video-preview {
  border-color: #555;
}

/* Dark mode com background dinâmico */
body.dark-mode.project-background-active .video-pitch-area {
  background-color: rgba(51, 51, 51, 0.6) !important;
  border: none !important;
}

/* Dark Mode - Likes Container */
body.dark-mode #likes-container {
  background-color: #333 !important;
  border: none !important;
}

body.dark-mode .like-btn {
  background-color: #4caf50;
  color: #fff;
}

body.dark-mode .like-count {
  color: #e0e0e0;
}

/* Dark Mode com Background Ativo - Likes Container */
body.dark-mode.project-background-active #likes-container {
  background-color: rgba(51, 51, 51, 0.6) !important;
  border: none !important;
  backdrop-filter: blur(15px);
}