/*
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.
*/


.env-vars-modal-content {
    width: 580px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.env-vars-modal-content .modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: bold;
}

.env-vars-hint {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.env-vars-hint code {
    background: var(--bg-code);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    color: var(--app-color);
    font-size: 0.95em;
}

.env-vars-header-row {
    display: flex;
    gap: 8px;
    padding: 0 0 6px 0;
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 13px;
}

.env-vars-col-label {
    flex: 1;
    font-size: 0.78em;
    font-weight: bold;
    color: var(--app-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.env-vars-col-label:last-child {
    margin-right: 30px;
}

.env-vars-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 320px;
    padding-right: 4px;
}

.env-var-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.env-var-input {
    flex: 1;
    padding: 8px 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-handle);
    color: var(--text-white);
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
    transition: border-color 0.2s;
    min-width: 0;
}

.env-var-input:focus {
    outline: none;
    border-color: var(--app-color);
}

.env-var-key {
    color: var(--app-color);
}

.env-var-delete-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-color);
    cursor: pointer;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.env-var-delete-btn:hover {
    filter: brightness(150%);
}

.env-vars-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-secondary);
    flex-shrink: 0;
}

.env-vars-footer button {
    padding: 6px 15px;
    border-radius: 5px;
    font-size: 0.88em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

#env-vars-save-btn,
#env-vars-import-btn,
#env-vars-export-btn {
    min-width: 80px;
}

#env-vars-add-btn {
    padding: 6px 12px;
}


/* ─── Inject Variables Button ──────────────────────────────── */

.inject-vars-btn {
    background: rgba(90, 117, 82, 0.18);
    border: 1px solid rgba(90, 117, 82, 0.45);
    border-radius: 4px;
    color: var(--app-color);
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
    z-index: 9999;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.inject-vars-btn:hover {
    background: rgba(90, 117, 82, 0.35);
    transform: scale(1.08);
}

.inject-vars-btn:active {
    transform: scale(0.95);
}

/* ─── Global Vars button ──────────────────────────────── */

#global-env-vars-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

#global-env-vars-btn svg {
    margin-bottom: -1px;
}