/* ========================================
   DARK MODE MADRIGAL - LISTMONK
   ======================================== */

/* Variáveis */
:root {
  --bg-primary: #1e1e1e;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #2a2a2a;
  --border-color: #3a3a3a;
  --text-primary: #d4d4d4;
  --text-secondary: #8a8a8a;
  --accent-red: #ff6b7a;
  --accent-red-dark: #c41e3a;
}

/* Base */
html, body, #app, .app, .main, .section, .container {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Sidebar */
aside, .aside, nav.menu, .menu, [class*="sidebar"], [class*="side-"] {
  background: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-color) !important;
}

/* Menu */
.menu-list a {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.menu-list a:hover {
  background: rgba(255, 107, 122, 0.15) !important;
  color: var(--accent-red) !important;
}

.menu-list a.is-active {
  background: rgba(255, 107, 122, 0.25) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--accent-red) !important;
  font-weight: 600 !important;
}

.menu-label {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* Cards */
.box, .card, .panel, .message {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

/* Inputs - SEM decorações */
input, textarea, select, .input, .textarea, .select select {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent-red) !important;
  background: #323232 !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 122, 0.15) !important;
}

input::placeholder, textarea::placeholder {
  color: #6a6a6a !important;
}

/* Labels - SEM decorações */
label, .label, .field-label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Tabelas */
.table {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.table thead th {
  background: var(--bg-tertiary) !important;
  color: var(--accent-red) !important;
  border-bottom: 2px solid var(--border-color) !important;
  font-weight: 600 !important;
}

.table tbody tr {
  border-bottom: 1px solid #333 !important;
}

.table tbody tr:hover {
  background: rgba(255, 107, 122, 0.08) !important;
}

.table tbody td {
  border-color: #333 !important;
  color: var(--text-primary) !important;
}

/* Botões */
.button {
  background: #3a3a3a !important;
  color: var(--text-primary) !important;
  border: 1px solid #4a4a4a !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.button:hover {
  background: #454545 !important;
}

.button.is-primary {
  background: linear-gradient(135deg, var(--accent-red-dark) 0%, #8b1428 100%) !important;
  color: white !important;
  border: none !important;
}

/* Navbar */
.navbar, .navbar-menu {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.navbar-item, .navbar-link {
  color: var(--text-primary) !important;
}

.navbar-item:hover {
  background: rgba(255, 107, 122, 0.15) !important;
  color: var(--accent-red) !important;
}

/* Modals */
.modal-background {
  background: rgba(10, 10, 10, 0.85) !important;
}

.modal-card, .modal-content {
  background: var(--bg-secondary) !important;
  border-radius: 12px !important;
}

.modal-card-title {
  color: var(--accent-red) !important;
}

/* Notificações */
.notification {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-left: 4px solid var(--accent-red) !important;
}

/* Tabs */
.tabs li.is-active a {
  border-bottom-color: var(--accent-red) !important;
  color: var(--accent-red) !important;
}

.tabs a {
  color: var(--text-secondary) !important;
}

/* Tags */
.tag:not(body) {
  background: #3a3a3a !important;
  color: var(--text-primary) !important;
}

.tag.is-primary {
  background: var(--accent-red-dark) !important;
  color: white !important;
}

/* Dropdown */
.dropdown-menu, .dropdown-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background: rgba(255, 107, 122, 0.15) !important;
  color: var(--accent-red) !important;
}

/* Links */
a {
  color: var(--accent-red) !important;
}

a:hover {
  color: #ff8f9b !important;
}

/* Títulos */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
  color: #e8e8e8 !important;
}

/* Footer */
.footer {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary) !important;
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a !important;
  border-radius: 4px !important;
}

/* Remove TODAS as decorações problemáticas */
* {
  text-shadow: none !important;
}

/* FIX: Remove linha/tachado dos labels de campos */
label, .label, .field-label, .field > label, 
.control label, .field-body label, 
legend, .panel-block label {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  outline: none !important;
}

/* Remove pseudo-elementos que podem criar linhas */
label::before, label::after,
.label::before, .label::after,
.field-label::before, .field-label::after {
  display: none !important;
  content: "" !important;
  border: none !important;
  background: none !important;
}
/* FIX: Select multiple e options */
select option {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  padding: 8px !important;
}

select option:checked,
select option[selected] {
  background: var(--accent-red-dark) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

select option:hover {
  background: rgba(255, 107, 122, 0.25) !important;
  color: #ffffff !important;
}

/* Checkboxes e Radio buttons */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-red) !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
}

/* Switch/Toggle */
.switch input[type="checkbox"] + .check {
  background: #3a3a3a !important;
}

.switch input[type="checkbox"]:checked + .check {
  background: var(--accent-red) !important;
}

/* Datalist/Autocomplete */
datalist option,
.autocomplete option {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* File input */
input[type="file"]::file-selector-button {
  background: #3a3a3a !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
}

input[type="file"]::file-selector-button:hover {
  background: #454545 !important;
}

/* Range slider */
input[type="range"] {
  accent-color: var(--accent-red) !important;
}

/* Progress bar */
progress {
  accent-color: var(--accent-red) !important;
}
/* FIX: Items selecionados em dropdowns - FUNDO ESCURO */
.select select option:checked,
.select option[selected],
select option:checked,
option[selected],
option[aria-selected="true"] {
  background: var(--accent-red-dark) !important;
  background-color: var(--accent-red-dark) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* FIX: Dropdown aberto - itens não selecionados */
.select select option,
select option {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* FIX: Campo de Tags e inputs similares */
.tag-input, .tags-input, 
input[placeholder*="Tags"], 
input[placeholder*="tags"],
.taginput .taginput-container,
.autocomplete input {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.taginput .taginput-container.is-focusable {
  background: var(--bg-tertiary) !important;
}

/* FIX: Modals - fundo e texto */
.modal-card, .modal-content, 
.modal-card-body, .modal-card-head, .modal-card-foot {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.modal-card-title, .modal-card-head p {
  color: var(--accent-red) !important;
}

.modal-card-body p, .modal-card-body span,
.modal-card-body div, .modal-card-body label {
  color: var(--text-primary) !important;
}

/* FIX: Botões dentro do modal */
.modal-card-foot .button {
  background: #3a3a3a !important;
  color: var(--text-primary) !important;
}

.modal-card-foot .button.is-primary,
.modal-card-foot .button.is-danger,
.modal-card-foot .button.is-success {
  background: var(--accent-red-dark) !important;
  color: white !important;
}

/* FIX: Lista expandida (como "Listas para enviar para") */
.dropdown-content, .dropdown-item,
.menu-list, .panel-block {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dropdown-item.is-active,
.panel-block.is-active {
  background: var(--accent-red-dark) !important;
  color: white !important;
}