:root {
    --color-border: #777;
    
    --color-primary: #1a3c99;
    --color-primary-hover: #2950bd;
    --color-secondary: #6c757d;
    --color-secondary-hover: #868c91;

    --color-bg-primary: #f9f9f9;
    --color-bg-secondary: #f0f0f0;

    --color-bg-modal: white;

    --color-navbar-bg: #333;
    --color-navbar-bg-hover: #444;
    
    --color-toolbar-item: black;
    --color-toolbar-item-bg: white;
    --color-toolbar-item-bg-active: #fafafa;
    
    --color-text-primary: black;
    --color-text-secondary: white;
    --color-text-navbar: white;

    --color-bg-input: #dddddd;
    --color-bg-input-focus: #c8c8c8;
    --color-input-border: #888;
    --color-input-border-focus: #888;

    --color-textarea-bg: #f8f8f8;
    --color-textarea-text: black;
}

input {
    box-sizing: border-box;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-input-border);
    font-size: 14px;
    color: var(--color-text-primary);
    padding: 5px;
    outline: 0;
}

input:focus {
    background-color: var(--color-bg-input-focus);
    border-color: #999;
}

select {
    box-sizing: border-box;
    background-color: var(--color-bg-input);
    border: 1px solid #888;
    font-size: 14px;
    color: var(--color-text-primary);
    padding: 5px;
    outline: 0;
}

select:focus {
    background-color: var(--color-bg-input-focus);
}

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

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

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

textarea {
    background-color: var(--color-textarea-bg);
    color: var(--color-textarea-text);
    resize: none;
    min-width: min(80vw, 50rem);
    min-height: 60vh;
}

.btn {
    border: 0px solid var(--color-secondary);
    font-size: 11pt;
    padding: 6px 12px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    color: white;
}

.btn-primary {
    background-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

#error-modal .modal-body {
    padding: 1rem 3rem;
}

#error-select-element {
    cursor: pointer;
    text-decoration: underline;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

/* Step-by-Step Mode Animations */
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.webapn-notification {
    animation: slideIn 0.3s ease-out;
}

/* Step-by-Step Mode Button Active State */
.sim-active {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.sim-active svg {
    --color: white !important;
}

/* Estilos para seleção de nós da árvore inline */
.selected-node {
    cursor: grab !important;
}

.selected-node:active {
    cursor: grabbing !important;
}

/* Animação para nós selecionados */
@keyframes pulse-selection {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(0, 102, 255, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0, 102, 255, 1));
    }
}

.selected-node circle {
    animation: pulse-selection 2s ease-in-out infinite;
}

/* Botões de controle de seleção da árvore */
.tree-selection-controls {
    position: fixed;
    top: 120px;
    right: 20px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.tree-selection-controls button {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s;
}

.tree-selection-controls button:hover {
    background: var(--color-primary-hover);
}

.tree-selection-controls button:disabled {
    background: var(--color-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.tree-selection-controls .selection-info {
    font-size: 11px;
    color: var(--color-text-primary);
    text-align: center;
    padding: 4px 0;
    border-top: 1px solid #eee;
    margin-top: 4px;
}

/* Modal de critérios minimizado */
#criteria-info-modal.minimized {
    transition: all 0.3s ease;
}

#criteria-info-modal.minimized:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}