/*
Copyright (c) 2025 Lucas Vazzoller Marangoni (NullPad.app). All rights reserved.

This source code, design assets, logos, and visual elements are
proprietary and confidential. Unauthorized copying, modification,
or distribution of any file in this project, via any medium,
is strictly prohibited.
*/

/* Encoder/Decoder Styles */

.encoder-container {
    padding: 20px;
    background-color: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.encoder-section {
    margin-bottom: 0px;
}

.encoder-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.encoder-section-header label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.encoder-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    resize: vertical;
}

.encoder-textarea:focus {
    outline: none;
    border-color: var(--app-color);
}

.encoder-small-btn {
    background-color: #252830;
    color: #ffffff;
    border: none;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}

.encoder-small-btn:hover {
    background-color: #7a7e83;
}

.encoder-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-secondary);
}

.encoder-tab {
    background-color: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.encoder-tab:hover {
    color: var(--text-primary);
}

.encoder-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--app-color);
}

.encoder-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.encoder-type-btn {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.encoder-type-btn:hover {
    background-color: var(--bg-icons);
    color: var(--text-primary);
}


.encoder-swap-btn {
    padding: 2px;
    border-radius: 4px;
    border: 1px solid var(--border-secondary);
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.encoder-swap-btn:hover {
    background-color: var(--bg-icons);
    color: var(--text-white);
    border-color: var(--text-secondary);
}