/* Hidden Field Styles */

.hidden-field-container {
    border: 2px dashed var(--border-color, #e0e6ed);
    border-radius: 6px;
    background: var(--bg-secondary, #f8f9fa);
    padding: 12px;
    margin: 8px 0;
}

.hidden-field-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary, #6c757d);
}

.hidden-icon {
    font-size: 16px;
    opacity: 0.7;
}

.hidden-label {
    font-weight: 600;
    color: var(--text-primary, #333);
}

.hidden-value {
    font-family: monospace;
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--primary-color, #8b5cf6);
    font-size: 13px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    min-width: 40px;
    text-align: center;
}

.hidden-value:empty::after {
    content: "(empty)";
    opacity: 0.5;
    font-style: italic;
}

/* Form builder mode - more prominent display */
.form-builder .hidden-field-container {
    border-style: solid;
    border-width: 1px;
    background: linear-gradient(135deg, var(--bg-secondary, #f8f9fa) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.form-builder .hidden-field-indicator::before {
    content: "🔒 Hidden Field:";
    font-size: 12px;
    font-weight: bold;
    color: var(--primary-color, #8b5cf6);
    margin-right: 4px;
}

/* Form viewer mode - completely hidden */
.form-viewer .hidden-field-container {
    display: none;
}

/* Dark mode support */
.dark-mode .hidden-field-container {
    background: var(--bg-secondary, #2a2a2a);
    border-color: var(--border-color, #444);
}

.dark-mode .hidden-value {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.2);
    color: var(--primary-color, #a78bfa);
}

.dark-mode .form-builder .hidden-field-container {
    background: linear-gradient(135deg, var(--bg-secondary, #2a2a2a) 0%, rgba(167, 139, 250, 0.05) 100%);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hidden-field-indicator {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .hidden-value {
        font-size: 12px;
    }
}