@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'rubik', sans-serif;
}

#jsonViewer {
    font-family: monospace;
    font-size: 13px;
}

.node {
    position: absolute;
    background: white;
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 260px;
    min-width: 180px;
    font-family: sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
}

.node-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.node-body {
    font-size: 12px;
    color: #555;
    white-space: pre-wrap;
    word-break: break-word;
}

.node-label {
    font-weight: 600;
    color: #374151;
}

#lines path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

#flowCanvas {
    transition: transform 0.15s ease;
}

/* =====================================================
   OPA! FLOW LIBRARY — GLOBAL STYLES
===================================================== */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}

.flow-card {
    transition: box-shadow 0.2s, transform 0.2s;
}

.flow-card:hover {
    box-shadow: 0 8px 24px -4px rgba(249, 115, 22, 0.10), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.flow-card:hover .card-overlay {
    opacity: 1;
}

/* Sidebar hierarchy helpers for folder tree. */
.folder-item .folder-tree-main {
    position: relative;
}

.folder-item .folder-tree-sublevel {
    padding-left: 2px;
}

.folder-item .folder-tree-elbow {
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    margin-right: 1px;
    flex-shrink: 0;
}

.folder-item .folder-tree-elbow::before {
    content: "";
    position: absolute;
    left: 1px;
    top: -2px;
    width: 11px;
    height: 13px;
    border-left: 1px solid #d6deea;
    border-bottom: 1px solid #d6deea;
    border-bottom-left-radius: 9px;
    opacity: 0.95;
}

.dark .folder-item .folder-tree-elbow::before {
    border-left-color: rgba(100, 116, 139, 0.58);
    border-bottom-color: rgba(100, 116, 139, 0.58);
}

/* Agrupamento de fluxos por pasta na visão "Todos". */
.flow-folder-section {
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.72) 100%);
    padding: 12px;
}

.flow-folder-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.flow-folder-section-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    border: 1px solid;
    border-radius: 999px;
    padding: 0 10px;
    flex-shrink: 0;
}

.flow-folder-section-name {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.flow-folder-section-count {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    padding: 2px 7px;
}

.flow-folder-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.55) 0%, rgba(148, 163, 184, 0.2) 100%);
}

.flow-folder-section-cards {
    min-width: 0;
}

.flow-trash-section {
    border-color: rgba(248, 113, 113, 0.4);
    background: transparent;
}

.flow-trash-section-chip {
    background: rgba(254, 226, 226, 0.9);
    border-color: rgba(248, 113, 113, 0.5);
    color: #dc2626;
}

#trashRetentionInfo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#trashRetentionInfo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.trash-retention-summary-badge,
.trash-retention-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.trash-retention-summary-badge {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.98) 0%, rgba(254, 226, 226, 0.95) 100%);
    color: #b91c1c;
    box-shadow: 0 10px 24px -18px rgba(220, 38, 38, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.trash-retention-card-badge {
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(248, 113, 113, 0.34);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 241, 242, 0.96) 100%);
    color: #c2410c;
    box-shadow: 0 8px 20px -18px rgba(244, 63, 94, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.trash-retention-summary-badge .trash-retention-countdown,
.trash-retention-card-badge .trash-retention-countdown {
    font-size: 11px;
    font-weight: 700;
}

.trash-retention-countdown--expired {
    opacity: 0.72;
}

.dark #trashRetentionInfo {
    border-color: rgba(248, 113, 113, 0.38);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.28) 0%, rgba(69, 10, 10, 0.24) 100%);
    color: #fecaca;
    box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.55);
}

.dark #trashRetentionInfo::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

.dark .trash-retention-summary-badge {
    border-color: rgba(248, 113, 113, 0.5);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.56) 0%, rgba(69, 10, 10, 0.48) 100%);
    color: #fecaca;
}

.dark .trash-retention-card-badge {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(91, 33, 33, 0.5);
    color: #fca5a5;
}

.flow-card.flow-card-deleted {
    opacity: 0.58;
    border-style: dashed;
    filter: saturate(0.82);
}

.flow-card.flow-card-deleted:hover {
    opacity: 0.74;
}

.flow-card.flow-card-deleted .btn-like,
.flow-card.flow-card-deleted .btn-dislike {
    opacity: 0.45;
    pointer-events: none;
}

.flow-card.flow-card-selection-blocked {
    opacity: 0.7;
    border-color: rgba(239, 68, 68, 0.6) !important;
    cursor: not-allowed;
}

.checkbox-blocked-icon {
    border-color: rgba(239, 68, 68, 0.8) !important;
    background: rgba(254, 226, 226, 0.7) !important;
    cursor: not-allowed !important;
}

.dark .flow-card.flow-card-selection-blocked {
    border-color: rgba(248, 113, 113, 0.5) !important;
}

.dark .checkbox-blocked-icon {
    border-color: rgba(248, 113, 113, 0.7) !important;
    background: rgba(127, 29, 29, 0.5) !important;
}

.dark .flow-folder-section {
    border-color: rgba(71, 85, 105, 0.8);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.46) 0%, rgba(15, 23, 42, 0.3) 100%);
}

.dark .flow-trash-section {
    border-color: rgba(248, 113, 113, 0.45);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.36) 0%, rgba(69, 10, 10, 0.3) 100%);
}

.dark .flow-trash-section-chip {
    background: rgba(127, 29, 29, 0.46);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.dark .flow-folder-section-name {
    color: #e2e8f0;
}

.dark .flow-folder-section-count {
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(71, 85, 105, 0.9);
}

.dark .flow-folder-section-line {
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.75) 0%, rgba(100, 116, 139, 0.2) 100%);
}

/* Modo escuro com fundo plano (sem degradê). */
.dark body {
    background: #1d212c !important;
}

.dark body > div[aria-hidden="true"] {
    display: none !important;
}

.dark header,
.dark aside,
.dark #mainActionBar,
.dark #flowListArea,
.dark #reportsPageArea,
.dark .flow-folder-section,
.dark .flow-card,
.dark .sticky,
.dark #selectionBar > div {
    background: #1d212c !important;
    background-image: none !important;
}

.dark .flow-folder-section {
    border-color: rgba(71, 85, 105, 0.75);
}

.brand-identity {
    position: relative;
    cursor: pointer;
    transition: transform 0.18s ease;
}

.brand-badge,
.import-accent-btn {
    background: rgba(249, 115, 22, 0.16) !important;
    border: 1.5px solid #fdba74 !important;
    color: #fb923c !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18) !important;
}

.brand-badge {
    /* No modo claro, aproxima o miolo da logo ao fundo do header */
    background: color-mix(in srgb, #ffffff 86%, #f86700 14%) !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}

.brand-badge img {
    /* Tinge o PNG para o mesmo laranja da borda + brilho LED */
    filter: brightness(0) saturate(100%) invert(57%) sepia(97%) saturate(1241%) hue-rotate(347deg) brightness(101%) contrast(96%) drop-shadow(0 0 5px rgba(249, 115, 22, 0.55)) !important;
    animation: logo-led-pulse 2.2s ease-in-out infinite;
}

.import-accent-fdba74 i {
    color: #fb923c;
}

.import-accent-btn:hover,
.brand-identity:hover .brand-badge {
    background: rgba(249, 115, 22, 0.24) !important;
    border-color: #ea6c0a !important;
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.26) !important;
}

.brand-identity:hover .brand-badge {
    background: color-mix(in srgb, #ffffff 78%, #f97316 22%) !important;
}

.import-accent-btn:active {
    transform: translateY(1px);
}

.dark .brand-badge,
.dark .import-accent-btn {
    background: rgba(249, 115, 22, 0.14) !important;
    border-color: #fb923c !important;
    color: #fb923c !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.2) !important;
}

.dark .brand-badge img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(57%) saturate(1258%) hue-rotate(328deg) brightness(102%) contrast(98%) drop-shadow(0 0 6px rgba(251, 146, 60, 0.6)) !important;
}

.dark .import-accent-btn i {
    color: #fdba74 !important;
}

.dark .import-accent-btn:hover,
.dark .brand-identity:hover .brand-badge {
    background: rgba(249, 115, 22, 0.22) !important;
    border-color: #f97316 !important;
}

/* Mantem o botao Importar na mesma paleta do icone de adicionar (brand-100/200/500). */
.import-accent-btn {
    background: #ffedd5 !important;
    border: 1px solid #fed7aa !important;
    color: #fb923c !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.16) !important;
}

.import-accent-btn i {
    color: #fb923c !important;
}

.import-accent-btn:hover {
    background: #fed7aa !important;
    border-color: #fdba74 !important;
    color: #fb923c !important;
}

.dark .import-accent-btn {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: #fdba74 !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.2) !important;
}

.dark .import-accent-btn i {
    color: #fdba74 !important;
}

.dark .import-accent-btn:hover {
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: #f97316 !important;
}

.dark .flow-filter-btn-active {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: #fdba74 !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18) !important;
}

.dark .flow-filter-btn-active:hover {
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: #f97316 !important;
}

/* Variante verde no mesmo padrao visual do botao Importar. */
.success-accent-btn {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #16a34a !important;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16) !important;
}

.success-accent-btn i {
    color: #16a34a !important;
}

.success-accent-btn:hover {
    background: #bbf7d0 !important;
    border-color: #4ade80 !important;
    color: #16a34a !important;
}

.dark .success-accent-btn {
    background: rgba(22, 163, 74, 0.14) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #86efac !important;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.2) !important;
}

.dark .success-accent-btn i {
    color: #86efac !important;
}

.dark .success-accent-btn:hover {
    background: rgba(22, 163, 74, 0.24) !important;
    border-color: #22c55e !important;
}

/* Variante azul no mesmo padrao visual do botao Importar. */
.info-accent-btn {
    background: #dbeafe !important;
    border: 1px solid #93c5fd !important;
    color: #2563eb !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16) !important;
}

.info-accent-btn i {
    color: #2563eb !important;
}

.info-accent-btn:hover {
    background: #bfdbfe !important;
    border-color: #60a5fa !important;
    color: #2563eb !important;
}

.dark .info-accent-btn {
    background: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    color: #93c5fd !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
}

.dark .info-accent-btn i {
    color: #93c5fd !important;
}

.dark .info-accent-btn:hover {
    background: rgba(37, 99, 235, 0.26) !important;
    border-color: #3b82f6 !important;
}

/* Variante roxa para acao de duplicar mantendo o mesmo brilho/led visual. */
.duplicate-accent-btn {
    background: #f3e8ff !important;
    border: 1px solid #d8b4fe !important;
    color: #7e22ce !important;
    box-shadow: 0 8px 18px rgba(126, 34, 206, 0.18) !important;
}

.duplicate-accent-btn i {
    color: #7e22ce !important;
}

.duplicate-accent-btn:hover {
    background: #e9d5ff !important;
    border-color: #c084fc !important;
    color: #6b21a8 !important;
}

.dark .duplicate-accent-btn {
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: rgba(196, 181, 253, 0.5) !important;
    color: #c4b5fd !important;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28) !important;
}

.dark .duplicate-accent-btn i {
    color: #c4b5fd !important;
}

.dark .duplicate-accent-btn:hover {
    background: rgba(124, 58, 237, 0.3) !important;
    border-color: #a78bfa !important;
}

/* Variante vermelha para acoes destrutivas no mesmo padrao visual. */
.danger-accent-btn {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.16) !important;
}

.danger-accent-btn i {
    color: #dc2626 !important;
}

.danger-accent-btn:hover {
    background: #fecaca !important;
    border-color: #f87171 !important;
    color: #dc2626 !important;
}

.dark .danger-accent-btn {
    background: rgba(220, 38, 38, 0.16) !important;
    border-color: rgba(248, 113, 113, 0.48) !important;
    color: #fca5a5 !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22) !important;
}

.dark .danger-accent-btn i {
    color: #fca5a5 !important;
}

.dark .danger-accent-btn:hover {
    background: rgba(220, 38, 38, 0.24) !important;
    border-color: #ef4444 !important;
}

/* Selects do builder de filtros. */
.flow-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4'/%3E%3Cpath d='M8 14l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 14px;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 0.9rem;
    min-height: 2.25rem;
    line-height: 1.2;
    padding-right: 2rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.flow-filter-select:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.flow-filter-date-trigger:hover,
.flow-filter-date-trigger:focus,
.flow-filter-date-trigger:focus-visible {
    border-color: #94a3b8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
}

.dark .flow-filter-select {
    background-color: rgba(15, 23, 42, 0.38);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4'/%3E%3Cpath d='M8 14l4 4 4-4'/%3E%3C/svg%3E");
    border-color: #6A6F7B;
    color: #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#folderParentDropdownTrigger {
    background-color: #f8fafc;
}

.dark #folderParentDropdownTrigger {
    background-color: #171a22 !important;
}

.dark .flow-filter-select:focus {
    border-color: #6A6F7B;
    box-shadow: 0 0 0 3px rgba(106, 111, 123, 0.28);
}

/* Dark mode para o seletor de ordenação */

/* Wrapper do sort button em dark mode */
.dark .flow-sort-wrapper > button {
    background-color: rgba(15, 23, 42, 0.38);
    border-color: #6A6F7B;
    color: #e2e8f0;
}

.dark .flow-sort-wrapper > button:hover {
    background-color: rgba(15, 23, 42, 0.5);
}

.dark .flow-sort-wrapper i {
    color: #94a3b8;
}

.flow-sort-option {
    background: transparent;
}

.flow-sort-option:hover {
    background: #f1f5f9;
}

.flow-sort-option.is-sort-selected {
    background: #e2e8f0;
}

.flow-sort-check {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.55rem;
    border: 1px solid #cbd5e1;
    display: none;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.flow-sort-check:not(.hidden) {
    display: inline-flex;
}

.dark #flowSortMenu {
    background: #1D212C !important;
    border-color: #6A6F7B !important;
}

.dark #flowSortMenu .flow-sort-option {
    background: #1D212C !important;
}

.dark #flowSortMenu .flow-sort-option:hover {
    background: #262C39 !important;
}

.dark #flowSortMenu .flow-sort-option.is-sort-selected,
.dark #flowSortMenu .flow-sort-option.is-sort-selected:hover {
    background: #181d2b !important;
}

.dark #flowSortMenu .flow-sort-check {
    border-color: #6A6F7B !important;
    color: #cbd5e1;
    background: transparent;
}

.dark .flow-filter-date-trigger:hover,
.dark .flow-filter-date-trigger:focus,
.dark .flow-filter-date-trigger:focus-visible {
    border-color: #6A6F7B !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(106, 111, 123, 0.28) !important;
}

/* Strokes dos campos do painel de filtros no dark mode. */
.dark #flowFilterPanel [data-date-picker-index],
.dark #flowFilterPanel input.border-slate-300,
.dark #flowFilterPanel input.border-slate-200,
.dark #flowFilterPanel button.border-slate-300,
.dark #flowFilterPanel button.border-slate-200 {
    border-color: #6A6F7B !important;
}

/* Strokes do modal de filtro de data no dark mode. */
.dark #flowDatePickerModal .border-slate-300,
.dark #flowDatePickerModal .border-slate-200,
.dark #flowDatePickerModal #flowDatePickerCalendarGrid button {
    border-color: #6A6F7B !important;
}

.dark #flowDatePickerModal {
    border-color: #6A6F7B !important;
}

/* Estados do calendario de data. */
#flowDatePickerModal .flow-date-day-between {
    border-color: #fed7aa !important;
    background: rgba(251, 146, 60, 0.12) !important;
    color: #c2410c !important;
}

#flowDatePickerModal .flow-date-day-selected {
    border-color: #fb923c !important;
    background: #ffedd5 !important;
    color: #c2410c !important;
}

.dark #flowDatePickerModal .flow-date-day-between {
    border-color: #6A6F7B !important;
    background: #181d2b !important;
    color: #fdba74 !important;
}

.dark #flowDatePickerModal .flow-date-day-selected {
    border-color: #fb923c !important;
    background: rgba(249, 115, 22, 0.24) !important;
    color: #fdba74 !important;
}

/* Fundo dos campos de valor do filtro: claro branco, escuro #181d2b. */
#flowFilterPanel .flow-filter-value-control [data-date-picker-index],
#flowFilterPanel .flow-filter-value-control input,
#flowFilterPanel .flow-filter-value-control .flow-filter-select,
#flowFilterPanel .flow-filter-text-advanced {
    background: #ffffff !important;
}

/* Campos de digitacao do painel de filtros com borda consistente (inclusive no foco). */
#flowFilterPanel .flow-filter-value-control input,
#flowFilterPanel .flow-filter-text-advanced input {
    border: 1px solid #cbd5e1 !important;
    outline: none !important;
    box-shadow: none !important;
}

#flowFilterPanel .flow-filter-value-control input:focus,
#flowFilterPanel .flow-filter-text-advanced input:focus {
    border-color: #cbd5e1 !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

.dark #flowFilterPanel .flow-filter-value-control input,
.dark #flowFilterPanel .flow-filter-text-advanced input {
    border-color: #6A6F7B !important;
}

.dark #flowFilterPanel .flow-filter-value-control input:focus,
.dark #flowFilterPanel .flow-filter-text-advanced input:focus {
    border-color: #6A6F7B !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

.dark #flowFilterPanel .flow-filter-value-control [data-date-picker-index],
.dark #flowFilterPanel .flow-filter-value-control input,
.dark #flowFilterPanel .flow-filter-value-control .flow-filter-select,
.dark #flowFilterPanel .flow-filter-text-advanced {
    background: #181d2b !important;
}

/* Dropdowns dos filtros no dark: base mais escura e apenas selecionado com destaque. */
.dark [data-dropdown-menu^="flow-filter-"] {
    background: #1a2233 !important;
    border-color: #5a6a86 !important;
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.46) !important;
}

.dark [data-dropdown-menu^="flow-filter-"] [data-dropdown-option] {
    background: transparent !important;
    color: #dbe3f1 !important;
}

.dark [data-dropdown-menu^="flow-filter-"] [data-dropdown-option]:hover {
    background: #253048 !important;
}

.dark [data-dropdown-menu^="flow-filter-"] [data-dropdown-option].bg-slate-200 {
    background: rgba(15, 23, 42, 0.55) !important;
    color: #e2e8f0 !important;
}

.dark [data-dropdown-menu^="flow-filter-"] [data-dropdown-option] .bg-slate-300,
.dark [data-dropdown-menu^="flow-filter-"] [data-dropdown-option] .dark\:bg-slate-600 {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid #6A6F7B !important;
}

.dark [data-dropdown-menu^="flow-filter-"] [data-dropdown-option] .dark\:text-slate-200 {
    color: #e8eefb !important;
}

/* Padrao visual dos modais (mesma paleta dos botoes ajustados). */
.modal-accent-btn {
    background: #ffedd5 !important;
    border: 1px solid #fed7aa !important;
    color: #fb923c !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.16) !important;
}

.modal-accent-btn i {
    color: #fb923c !important;
}

.modal-accent-btn:hover {
    background: #fed7aa !important;
    border-color: #fdba74 !important;
    color: #fb923c !important;
}

.modal-accent-icon {
    background: #ffedd5 !important;
    border: 1px solid #fed7aa !important;
    color: #fb923c !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.14) !important;
}

.modal-accent-icon i {
    color: #fb923c !important;
}

.dark .modal-accent-btn {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: #fdba74 !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.2) !important;
}

.dark .modal-accent-btn i {
    color: #fdba74 !important;
}

.dark .modal-accent-btn:hover {
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: #f97316 !important;
}

.dark .modal-accent-icon {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: #fdba74 !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.2) !important;
}

.dark .modal-accent-icon i {
    color: #fdba74 !important;
}

.brand-identity::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0), rgba(249, 115, 22, 0.7), rgba(249, 115, 22, 0));
    opacity: 0;
    transform: scaleX(0.6);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.brand-badge,
.brand-title {
    transform-origin: center;
    will-change: transform;
}

.brand-identity:hover {
    transform: translateY(-1px);
}

.brand-identity:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.brand-identity:hover .brand-badge {
    animation: brand-badge-bounce 620ms cubic-bezier(0.24, 0.9, 0.2, 1);
}

.brand-identity:hover .brand-title {
    animation: brand-title-wiggle 560ms ease;
    color: #ea6c0a;
}

@keyframes brand-badge-bounce {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    35% {
        transform: translateY(-3px) rotate(-6deg) scale(1.06);
    }

    68% {
        transform: translateY(0) rotate(4deg) scale(0.98);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes brand-title-wiggle {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(1px);
    }

    45% {
        transform: translateX(-1px);
    }

    75% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

.dark .brand-identity:hover .brand-title {
    color: #fb923c;
}

.brand-badge-mini {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #ffffff 84%, #f97316 16%);
    border: 1px solid #fdba74;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
    flex-shrink: 0;
}

.brand-badge-mini-img {
    width: 10px;
    height: 10px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(57%) sepia(97%) saturate(1241%) hue-rotate(347deg) brightness(101%) contrast(96%);
}

.dark .brand-badge-mini {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(251, 146, 60, 0.78);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.22);
}

.dark .brand-badge-mini-img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(57%) saturate(1258%) hue-rotate(328deg) brightness(102%) contrast(98%);
}

.card-overlay {
    opacity: 0;
    transition: opacity 0.2s;
}

.nav-active {
    background: #fff7ed;
    color: #ea6c0a;
    font-weight: 600;
}

.nav-active i {
    color: #f97316;
}

.notif-tab-active {
    background: #fff7ed;
    color: #ea6c0a;
}

.notif-tab-inactive {
    color: #94a3b8;
}

.notif-tab-inactive:hover {
    background: #f8fafc;
    color: #64748b;
}


/* ══════════════════════════════════════════════════
   DARK MODE — Zinc palette + brand orange accent
══════════════════════════════════════════════════ */

.dark {
    color-scheme: dark;
    --dk-bg: #171a22;
    --dk-surface: #1d212c;
    --dk-raised: #262c39;
    --dk-border: #353d4d;
    --dk-border2: #434d61;
    --dk-text1: #f6f8fc;
    --dk-text2: #dce2ef;
    --dk-text3: #a7b0c4;
    --dk-text4: #7d879d;
    --dk-accent: #f97316;
    --dk-accent2: #fb923c;
}

.dark,
.dark body {
    background: var(--dk-bg) !important;
    color: var(--dk-text2) !important;
}

.dark .bg-surface {
    background: var(--dk-bg) !important;
}

.dark .card-overlay {
    background: rgba(249, 115, 22, 0.032) !important;
}

.dark .flow-card:hover .card-overlay {
    opacity: 1;
}

.dark .card-overlay > div {
    background: rgba(28, 33, 44, 0.95) !important;
    border: 1px solid rgba(251, 146, 60, 0.18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}

.dark .card-overlay > div .text-brand-500,
.dark .card-overlay > div .text-brand-600 {
    color: #fdba74 !important;
}

/* ── Superfícies ── */
.dark .bg-white,
.dark [class*="bg-white"] {
    background: var(--dk-surface) !important;
}

.dark .bg-slate-50,
.dark [class*="bg-slate-50"] {
    background: var(--dk-surface) !important;
}

.dark .bg-slate-100,
.dark [class*="bg-slate-100"] {
    background: var(--dk-raised) !important;
}


.dark .bg-slate-200 {
    background: var(--dk-border) !important;
}

/* ── Bordas ── */
.dark .border-slate-50,
.dark [class*="border-slate-50"] {
    border-color: var(--dk-raised) !important;
}

.dark .border-slate-100,
.dark [class*="border-slate-100"] {
    border-color: var(--dk-border) !important;
}

.dark .border-slate-200,
.dark [class*="border-slate-200"] {
    border-color: var(--dk-border2) !important;
}

/* ── Textos ── */
.dark .text-slate-800 {
    color: var(--dk-text1) !important;
}

.dark .text-slate-700,
.dark [class*="text-slate-700"] {
    color: var(--dk-text2) !important;
}

.dark .text-slate-600,
.dark [class*="text-slate-600"] {
    color: var(--dk-text3) !important;
}

.dark .text-slate-500,
.dark [class*="text-slate-500"] {
    color: var(--dk-text4) !important;
}

.dark .text-slate-400,
.dark [class*="text-slate-400"] {
    color: var(--dk-text4) !important;
}

.dark .text-slate-300,
.dark [class*="text-slate-300"] {
    color: #626c84 !important;
}

.dark [class*="text-white"] {
    color: #ffffff !important;
}

/* ── Header & Sidebar ── */
.dark header {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark aside {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark main>div:first-child {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark .w-px {
    background: var(--dk-border) !important;
}

/* ── Inputs ── */
.dark input:not([type=file]),
.dark textarea {
    background: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text2) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--dk-text4) !important;
}

.dark input:focus,
.dark textarea:focus {
    border-color: var(--dk-accent) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

/* ── Description tooltip (cards) ── */
.has-custom-tooltip {
    cursor: pointer;
}

.flow-description-tooltip {
    position: fixed;
    z-index: 120;
    min-width: 220px;
    max-width: min(420px, 78vw);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.flow-description-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dark .flow-description-tooltip {
    background: color-mix(in srgb, var(--dk-surface) 92%, #000 8%);
    border-color: var(--dk-border2);
    color: var(--dk-text2);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
}

/* ── Flow cards ── */
.dark .flow-card {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark .flow-card:hover {
    border-color: rgba(249, 115, 22, 0.18) !important;
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.10), 0 4px 14px -8px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}

/* Thumbnail gradient no dark */
.dark [class*="from-slate-50"],
.dark [class*="to-slate-100"] {
    background: var(--dk-bg) !important;
}

/* ── Hovers ── */
.dark .hover\:bg-slate-100:hover,
.dark [class*="hover:bg-slate-100"]:hover {
    background: var(--dk-raised) !important;
}

.dark .hover\:bg-slate-50:hover,
.dark [class*="hover:bg-slate-50"]:hover {
    background: var(--dk-surface) !important;
}

.dark .hover\:bg-slate-200:hover {
    background: var(--dk-border) !important;
}

/* ── Reações (like/dislike) no dark ── */
.dark .btn-like:hover {
    color: #34d399 !important;
}

.dark .btn-like:hover span:first-child {
    background: rgba(16, 185, 129, 0.16) !important;
}

.dark .btn-dislike:hover {
    color: #f87171 !important;
}

.dark .btn-dislike:hover span:first-child {
    background: rgba(239, 68, 68, 0.16) !important;
}

/* ── Badges coloridos ── */
.dark .bg-brand-50 {
    background: rgba(249, 115, 22, 0.10) !important;
}

.dark .bg-brand-100 {
    background: rgba(249, 115, 22, 0.18) !important;
}

.dark .border-brand-100 {
    border-color: rgba(249, 115, 22, 0.25) !important;
}

.dark .text-brand-600 {
    color: var(--dk-accent2) !important;
}

.dark .text-brand-500 {
    color: var(--dk-accent) !important;
}

.dark .hover\:bg-brand-100:hover {
    background: rgba(249, 115, 22, 0.22) !important;
}

.dark .bg-emerald-50 {
    background: rgba(16, 185, 129, 0.10) !important;
}

.dark .bg-emerald-100 {
    background: rgba(16, 185, 129, 0.18) !important;
}

.dark .hover\:bg-emerald-100:hover {
    background: rgba(16, 185, 129, 0.22) !important;
}

.dark .border-emerald-100 {
    border-color: rgba(16, 185, 129, 0.25) !important;
}

.dark .bg-red-50 {
    background: rgba(239, 68, 68, 0.10) !important;
}

.dark .bg-red-100 {
    background: rgba(239, 68, 68, 0.18) !important;
}

.dark .border-red-100 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.dark .hover\:bg-red-100:hover {
    background: rgba(239, 68, 68, 0.22) !important;
}

/* Brilho do icone principal no estado vazio. */
.empty-state-icon-stack {
    isolation: isolate;
}

.empty-state-icon-stack::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px;
    height: 106px;
    transform: translate(-50%, -50%);
    border-radius: 28px;
    background: radial-gradient(circle at 50% 56%, rgba(249, 115, 22, 0.22) 0%, rgba(249, 115, 22, 0.09) 52%, rgba(249, 115, 22, 0) 82%);
    filter: blur(10px);
    opacity: 0.85;
    z-index: -1;
    pointer-events: none;
    animation: empty-icon-glow 2.8s ease-in-out infinite;
}

.empty-state-main-icon {
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.32));
}

.empty-state-main-badge,
.empty-state-plus-badge {
    background: #ffedd5 !important;
    border-color: #fed7aa !important;
}

.empty-state-plus-badge {
    z-index: 2;
}

.empty-state-plus-icon {
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.4));
}

.dark .empty-state-main-icon {
    filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.52));
}

.dark .empty-state-icon-stack::before {
    background: radial-gradient(circle at 50% 56%, rgba(251, 146, 60, 0.3) 0%, rgba(251, 146, 60, 0.13) 56%, rgba(251, 146, 60, 0) 84%);
    filter: blur(11px);
    opacity: 0.95;
}

.dark .empty-state-plus-icon {
    filter: drop-shadow(0 0 9px rgba(251, 146, 60, 0.62));
}

.dark .empty-state-main-badge,
.dark .empty-state-plus-badge,
.dark .empty-state-plus-badge.bg-brand-100 {
    background: color-mix(in srgb, #171a22 78%, #f97316 22%) !important;
    border-color: rgba(251, 146, 60, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(23, 26, 34, 0.86), 0 8px 16px rgba(0, 0, 0, 0.22) !important;
}

/* Estado vazio da lixeira: LED vermelho (substitui o laranja padrao). */
.trash-empty-state-icon-stack::before {
    background: radial-gradient(circle at 50% 56%, rgba(239, 68, 68, 0.24) 0%, rgba(239, 68, 68, 0.1) 52%, rgba(239, 68, 68, 0) 82%);
    filter: blur(10px);
    opacity: 0.9;
}

.trash-empty-state-main-badge {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.22), 0 10px 20px rgba(239, 68, 68, 0.16) !important;
}

.trash-empty-state-main-icon {
    color: #ef4444 !important;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}

.dark .trash-empty-state-icon-stack::before {
    background: radial-gradient(circle at 50% 56%, rgba(248, 113, 113, 0.34) 0%, rgba(248, 113, 113, 0.14) 56%, rgba(248, 113, 113, 0) 84%);
    filter: blur(11px);
    opacity: 0.96;
}

.dark .trash-empty-state-main-badge {
    background: color-mix(in srgb, #171a22 80%, #ef4444 20%) !important;
    border-color: rgba(248, 113, 113, 0.78) !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: 0 0 0 1px rgba(23, 26, 34, 0.86), 0 8px 16px rgba(0, 0, 0, 0.24), 0 0 18px rgba(239, 68, 68, 0.22) !important;
}

.dark .trash-empty-state-main-icon {
    color: #f87171 !important;
    filter: drop-shadow(0 0 12px rgba(248, 113, 113, 0.6));
}

@keyframes empty-icon-glow {
    0% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.97);
    }

    50% {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1.03);
    }

    100% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.97);
    }
}

.dark .bg-amber-50 {
    background: rgba(245, 158, 11, 0.10) !important;
}

.dark .border-amber-100 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}

/* Cores sólidas funcionais — nunca sobrescrever */
.dark [class~="bg-brand-500"] {
    background: #f97316 !important;
}

.dark [class~="bg-brand-600"] {
    background: #ea6c0a !important;
}

.dark [class~="bg-emerald-500"] {
    background: #10b981 !important;
}

.dark [class~="bg-emerald-600"] {
    background: #059669 !important;
}

.dark [class~="bg-red-500"] {
    background: #ef4444 !important;
}

/* ═══════════════════════════════════════════════════
   MODAL: IDENTIFICAÇÃO DO USUÁRIO — DARK MODE
═══════════════════════════════════════════════════ */

.dark #userNameModalContent {
    background: var(--dk-surface) !important;
}

.dark #userNameModalContent > div:first-child {
    background: linear-gradient(to bottom right,
        rgba(249, 115, 22, 0.08),
        rgba(249, 115, 22, 0.06)) !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}

.dark #userNameModalContent > div:first-child h2 {
    color: var(--dk-text1) !important;
}

.dark #userNameModalContent > div:first-child p {
    color: var(--dk-text3) !important;
}

.dark #userNameModalContent .px-6.py-6 {
    background: var(--dk-surface) !important;
}

.dark #userNameInput {
    background: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text2) !important;
}

.dark #userNameInput::placeholder {
    color: var(--dk-text4) !important;
}

.dark #userNameInput:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

.dark #userNameModalContent label {
    color: var(--dk-text2) !important;
}

.dark #userNameModalContent .text-xs.text-slate-400 {
    color: var(--dk-text4) !important;
}

.dark #userNameModalContent > div:nth-child(3) {
    background: rgba(249, 115, 22, 0.08) !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}

.dark #userNameModalContent .text-brand-700 {
    color: #fdba74 !important;
}

.dark #userNameModalContent .text-brand-600 {
    color: #fb923c !important;
}

.dark #userNameModalContent > div:last-child {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border) !important;
}

.dark [class~="bg-red-400"] {
    background: #f87171 !important;
}

.dark [class~="bg-slate-800"] {
    background: #09090b !important;
}

.dark [class~="bg-slate-700"] {
    background: #18181b !important;
}

.dark [class*="border-slate-700"] {
    border-color: #1d212c !important;
}

.dark [class*="border-slate-600"] {
    border-color: #3f3f46 !important;
}

/* ── Nav ── */
.dark .nav-active {
    background: rgba(249, 115, 22, 0.10) !important;
    color: var(--dk-accent2) !important;
    border-left: 2px solid var(--dk-accent);
    border-radius: 0.75rem;
}

.dark .nav-active i {
    color: var(--dk-accent) !important;
}

.dark nav button:not(.nav-active):hover {
    background: var(--dk-raised) !important;
}

/* ── Notif tabs ── */
.dark .notif-tab-active {
    background: rgba(249, 115, 22, 0.10) !important;
    color: var(--dk-accent2) !important;
}

.dark .notif-tab-inactive {
    color: #52525b !important;
}

.dark .notif-tab-inactive:hover {
    background: var(--dk-raised) !important;
    color: var(--dk-text3) !important;
}

/* ── Modais ── */
.dark #jsonModal .bg-white,
.dark #flowRenderModal .bg-white,
.dark #deleteModal .bg-white,
.dark #editFlowModal .bg-white,
.dark #shareModal .bg-white,
.dark #clearHistoryModal .bg-white {
    background: var(--dk-surface) !important;
}

/* Modal compartilhar — hover do botão "Copiar link" no dark */
.dark #shareModal #shareCopyLink:hover {
    background: rgba(249, 115, 22, 0.10) !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
}

.dark #shareModal #shareCopyLink > div:first-child {
    background: rgba(249, 115, 22, 0.10) !important;
    border-color: rgba(249, 115, 22, 0.25) !important;
}

.dark #shareModal #shareCopyLink:hover > div:first-child {
    background: rgba(249, 115, 22, 0.18) !important;
}

.dark #shareModal #shareCopyLink:hover .ph-arrow-right {
    color: #fb923c !important;
}

.dark #shareModal #shareDownloadFlow:hover {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

.dark #shareModal #shareDownloadFlow > div:first-child {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

.dark #shareModal #shareDownloadFlow:hover > div:first-child {
    background: rgba(148, 163, 184, 0.16) !important;
}

.dark #flowRenderModal .bg-slate-50\/60 {
    background: rgba(14, 14, 20, 0.84) !important;
    backdrop-filter: blur(6px);
}

/* ── Canvas ── */
.dark #flowCanvas {
    background-color: #171a22 !important;
    background-image: radial-gradient(circle, #2f2f38 1px, transparent 1px) !important;
    background-size: 22px 22px;
}

/* ── Nodes do canvas (inline styles do JS) ── */
.dark #flowViewport [style*="background: #ffffff"],
.dark #flowViewport [style*="background:#ffffff"],
.dark #flowViewport [style*="background: white"] {
    background: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
}

.dark #flowViewport [style*="background: #f8fafc"] {
    background: var(--dk-bg) !important;
    border-color: var(--dk-raised) !important;
}

.dark #flowViewport [style*="box-shadow"] {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Texto do body dos nodes */
.dark #flowViewport [style*="color: #64748b"],
.dark #flowViewport [style*="color:#64748b"] {
    color: var(--dk-text3) !important;
}

.dark #flowViewport [style*="color: #334155"],
.dark #flowViewport [style*="color:#334155"] {
    color: var(--dk-text2) !important;
}

.dark #flowViewport [style*="color: #94a3b8"],
.dark #flowViewport [style*="color:#94a3b8"] {
    color: var(--dk-text4) !important;
}

/* SVG linhas — mais visíveis no dark */
.dark #lines path[fill="none"] {
    stroke: #52525b !important;
}

.dark #lines circle {
    fill: var(--dk-surface) !important;
    stroke: #71717a !important;
}

.dark #lines path[fill="#94a3b8"] {
    fill: #71717a !important;
}

/* ── Notif panel ── */
.dark #notifPanel {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark #notifPanel > div:first-child {
    background: linear-gradient(135deg, #1f2433 0%, #232a3b 55%, #1f2433 100%) !important;
    border-color: var(--dk-border) !important;
}

.dark #notifPanel > div:first-child > div[style*="radial-gradient"] {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 72%) !important;
}

.dark #notifPanel > div:first-child .w-9.h-9.rounded-xl.border.border-brand-100 {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
}

.dark #notifPanel > div:first-child .w-9.h-9.rounded-xl.border.border-brand-100 i {
    color: var(--dk-accent2) !important;
}

.dark #notifPanel > div:nth-child(2) {
    background: color-mix(in srgb, var(--dk-surface) 92%, #000 8%) !important;
    border-color: var(--dk-border) !important;
}

.dark #notifPanel > div:nth-child(2) > div {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
}

.dark #historyList>div {
    border-color: var(--dk-raised) !important;
}

.dark #historyList>div:hover {
    background: rgba(63, 63, 70, 0.3) !important;
}

.dark #panelChangelog .border-b {
    border-color: var(--dk-border) !important;
}

.dark #panelChangelog .px-5.py-4 {
    background: transparent;
}

/* ── Preview skeleton ── */
.dark .flow-preview-skeleton>* {
    background: var(--dk-raised) !important;
}

.dark .flow-preview-skeleton .animate-pulse {
    background: var(--dk-raised) !important;
}

/* ── Selection bar ── */
.dark #selectionBar>div {
    background: var(--dk-bg) !important;
    border-color: var(--dk-raised) !important;
}

/* ── Highlight.js ── */
.dark .hljs,
.dark pre {
    background: var(--dk-bg) !important;
}

.dark code {
    color: #a1a1aa !important;
}

.dark .bg-slate-50 code {
    background: var(--dk-bg) !important;
}

/* ── Scrollbar dark ── */
.dark ::-webkit-scrollbar-thumb {
    background: var(--dk-raised);
    border-radius: 99px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dk-border);
}

/* ══════════════════════════════════════════════════
   DARK MODE — Modal JSON: novos elementos
   Adicionar ao final do style.css existente
══════════════════════════════════════════════════ */


/* ── Header do modal JSON (gradiente claro → escuro) ── */
.dark #jsonModalPanel>div:first-child {
    background: linear-gradient(135deg, #1f2433 0%, #232a3b 52%, #1f2433 100%) !important;
    border-color: var(--dk-border) !important;
}

/* Efeito decorativo radial do header — mantém mas escurece */
.dark #jsonModalPanel>div:first-child>div[style*="radial-gradient"] {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, transparent 72%) !important;
}

/* Header do modal FlowRender (mesmo tratamento) */
.dark #flowRenderPanel>div:first-child {
    background: linear-gradient(135deg, #1f2433 0%, #242c3f 62%, #1f2433 100%) !important;
    border-color: var(--dk-border) !important;
}


/* ── Botões Copiar / Download no header ── */
.dark #copyJsonBtn,
.dark #downloadJsonBtn {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
    color: var(--dk-text3) !important;
}

.dark #copyJsonBtn:hover,
.dark #downloadJsonBtn:hover {
    background: var(--dk-border) !important;
}

.dark #copyJsonBtn i,
.dark #downloadJsonBtn i {
    color: var(--dk-text4) !important;
}

/* Estado "Copiado!" — mantém verde no dark */
.dark #copyJsonBtn[style*="color: rgb(5, 150, 105)"],
.dark #copyJsonBtn[style*="color:#059669"] {
    color: #34d399 !important;
    border-color: #34d39950 !important;
    background: rgba(52, 211, 153, 0.08) !important;
}


/* ── Barra de tabs ── */
.dark #jsonModalPanel .flex.items-center.gap-1.px-5 {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

/* Tab inativa */
.dark ._jsonTab:not(.active-tab) {
    color: var(--dk-text4) !important;
}

.dark ._jsonTab:not(.active-tab):hover {
    background: var(--dk-raised) !important;
    color: var(--dk-text3) !important;
}

/* Tab ativa — mantém cor índigo mas adapta fundo */
.dark ._jsonTab.active-tab {
    background: rgba(249, 115, 22, 0.16) !important;
    color: #fdba74 !important;
    border-bottom-color: #f97316 !important;
}


/* ── Área de conteúdo das tabs (fundo geral) ── */
.dark #jsonModalPanel .flex-1.overflow-auto {
    background: var(--dk-bg) !important;
}


/* ── Tab RAW: barra superior (bolinhas + busca + contador) ── */
/* sem fundo próprio, herda o bg da tab */

/* Label "flow.json" */
.dark #_tabRaw span.font-mono.text-slate-400 {
    color: var(--dk-text4) !important;
}

/* Input de busca no JSON */
.dark #jsonSearchInput {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
    color: var(--dk-text2) !important;
}

.dark #jsonSearchInput::placeholder {
    color: var(--dk-text4) !important;
}

.dark #jsonSearchInput:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18) !important;
}

/* Contador de linhas */
.dark #jsonLineCount {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text4) !important;
}

/* Code viewer — já tem fundo dark (#1e1e2e), só ajusta a borda */
.dark #_tabRaw .rounded-xl.overflow-hidden.border {
    border-color: var(--dk-border2) !important;
}

/* Highlight de busca dentro do code viewer — amarelo mais suave */
.dark #jsonViewer mark {
    background: rgba(251, 191, 36, 0.35) !important;
    color: #fde68a !important;
}


/* ── Tab ESTATÍSTICAS ── */

/* Cards de resumo rápido (gerados pelo JS via innerHTML) */
.dark #statsCards>div {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

/* Valor numérico grande */
.dark #statsCards [style*="color:#1e293b"],
.dark #statsCards [style*="color: #1e293b"] {
    color: var(--dk-text1) !important;
}

/* Label pequeno */
.dark #statsCards [style*="color:#94a3b8"],
.dark #statsCards [style*="color: #94a3b8"] {
    color: var(--dk-text4) !important;
}

/* Container do gráfico de barras */
.dark #_tabStats .bg-white {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark #_tabStats .border-b {
    border-color: var(--dk-border) !important;
}

/* Título "Distribuição por tipo" */
.dark #_tabStats h3 {
    color: var(--dk-text2) !important;
}

/* Labels e valores do gráfico de barras (gerados pelo JS) */
.dark #statsChart [style*="color:#475569"],
.dark #statsChart [style*="color: #475569"] {
    color: var(--dk-text3) !important;
}

.dark #statsChart [style*="color:#334155"],
.dark #statsChart [style*="color: #334155"] {
    color: var(--dk-text2) !important;
}

.dark #statsChart [style*="color:#94a3b8"],
.dark #statsChart [style*="color: #94a3b8"] {
    color: var(--dk-text4) !important;
}

/* Trilha de fundo das barras */
.dark #statsChart [style*="background:#f1f5f9"],
.dark #statsChart [style*="background: #f1f5f9"] {
    background: var(--dk-raised) !important;
}


/* ── Tab RESUMO ── */

/* Cards de cada node */
.dark #summaryContent>div {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.dark #summaryContent>div:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Títulos dos nodes */
.dark #summaryContent [style*="color:#1e293b"],
.dark #summaryContent [style*="color: #1e293b"] {
    color: var(--dk-text1) !important;
}

/* Textos secundários (labels cinza) */
.dark #summaryContent [style*="color:#64748b"],
.dark #summaryContent [style*="color: #64748b"] {
    color: var(--dk-text3) !important;
}

/* Setas de conexão */
.dark #summaryContent [style*="color:#94a3b8"],
.dark #summaryContent [style*="color: #94a3b8"] {
    color: var(--dk-text4) !important;
}

/* Badge de tipo (monospace, canto direito) */
.dark #summaryContent [style*="background:#f8fafc"],
.dark #summaryContent [style*="background: #f8fafc"] {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text3) !important;
}


/* ── Toolbar do FlowRender (barra #fafafa) ── */
.dark #flowRenderPanel .flex.items-center.gap-2.px-4.py-2.border-b {
    background: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
}

/* Botões da toolbar */
.dark #backToJson,
.dark #legendToggle,
.dark #_editModeBtn,
.dark #_savePositionsBtn,
.dark #resetView {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
    color: var(--dk-text3) !important;
}

.dark #backToJson:hover,
.dark #legendToggle:hover,
.dark #_editModeBtn:hover,
.dark #_savePositionsBtn:hover,
.dark #resetView:hover {
    background: var(--dk-border) !important;
}

/* Grupo de zoom (wrapper) */
.dark #flowRenderPanel .flex.items-center.bg-white.border.border-slate-200.rounded-xl {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
}

.dark #zoomOut,
.dark #zoomIn {
    background: transparent !important;
    border-color: var(--dk-border2) !important;
    color: var(--dk-text3) !important;
}

.dark #zoomOut:hover,
.dark #zoomIn:hover {
    background: var(--dk-border) !important;
}

/* Editar layout — estado ativo */
.dark #_editModeBtn.bg-indigo-50 {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
}

/* Salvar — estado ativo (pendências) */
.dark #_savePositionsBtn.bg-indigo-500 {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Badge de pendências */
.dark #_unsavedBadge {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.25) !important;
    color: #fb923c !important;
}

/* Contador de cards */
.dark #nodeCountBadge {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
    color: var(--dk-text3) !important;
}

.dark #nodeCountBadge i {
    color: var(--dk-text4) !important;
}

/* Input busca de nodes */
.dark #nodeSearch {
    background: var(--dk-raised) !important;
    border-color: var(--dk-border2) !important;
    color: var(--dk-text2) !important;
}

.dark #nodeSearch::placeholder {
    color: var(--dk-text4) !important;
}

.dark #nodeSearch:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18) !important;
}

/* Botão limpar busca */
.dark #clearSearch {
    color: var(--dk-text4) !important;
}

.dark #clearSearch:hover {
    color: var(--dk-text2) !important;
}


/* ── Legenda (overlay) ── */
.dark #legendPanel {
    background: rgba(31, 31, 43, 0.97) !important;
    border-color: var(--dk-border2) !important;
}

.dark #legendPanel p {
    color: var(--dk-text4) !important;
}

.dark #legendPanel span {
    color: var(--dk-text3) !important;
}

.dark #legendPanel .border-t {
    border-color: var(--dk-border) !important;
}


/* ── Minimap (overlay) ── */
.dark #minimapPanel {
    background: rgba(31, 31, 43, 0.97) !important;
    border-color: var(--dk-border2) !important;
}

.dark #minimapPanel p {
    color: var(--dk-text4) !important;
}


/* ── Toast "Nenhum card encontrado" ── */
.dark #searchNoResult {
    background: #09090b !important;
    color: var(--dk-text2) !important;
}

@keyframes logo-led-pulse {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: 0.9;
        transform: scale(1);
    }
}

.dark .flow-filter-btn-active,
.dark .flow-filter-btn-active i,
.dark .flow-filter-btn-active span {
    color: #fdba74 !important;
}