/* ============================================================================
   CONFIG EDITOR STYLES
   Generic styles for JSON configuration editors with nested objects/arrays
   ============================================================================ */

/* ========== Grid/Card Layouts ========== */

/* Generic grid for displaying list of items (dashboards, configs, etc) */
.config-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Generic item card for grid display */
.config-item-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all var(--transition-slow);
}

.config-item-card:hover {
    transform: translateY(-2px);
    background: var(--bg-card-hover);
    border-color: var(--color-secondary);
}

/* Selectable card variant */
.config-item-card.selectable-card {
    cursor: pointer;
}

.config-item-card.selectable-card.selected {
    border: 2px solid var(--color-primary);
    background: rgba(79, 195, 247, 0.05);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1);
}

.config-item-card.selectable-card.selected:hover {
    border-color: var(--color-primary-dark);
    background: rgba(79, 195, 247, 0.08);
}

/* Card with draft indicator */
.config-item-card.has-draft {
    border-left: 4px solid var(--color-warning);
    background: rgba(255, 152, 0, 0.03);
}

.config-item-card.has-draft:hover {
    border-left-color: var(--color-warning);
    background: rgba(255, 152, 0, 0.05);
}

/* Draft-only card styling with dashed orange border */
.config-item-card.draft-only {
    border: 2px dashed #ff9800;
    background: rgba(255, 152, 0, 0.03);
}

.config-item-card.draft-only:hover {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.05);
}

/* Card title container with selected indicator */
.card-title-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.selected-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    animation: scaleIn 0.2s ease-out;
}

.config-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.config-item-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.config-item-content {
    margin-bottom: var(--space-5);
}

.config-item-row {
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.config-item-label {
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.config-item-value {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.config-badge {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-secondary-light);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========== Config Editor Sections ========== */

/* Main container for configuration editor */
.config-editor {
    padding: 0;
}

/* Section with grouped fields */
.config-section {
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--border-accent);
    padding-left: var(--space-4);
}

/* Compact section for nested configs */
.config-section.compact {
    padding: var(--space-2);
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-accent);
    margin-bottom: var(--space-3);
}

.config-section-header-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Collapsible section toggle button */
.config-section-toggle {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--font-size-base);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

.config-section-toggle:hover {
    background: rgba(79, 195, 247, 0.1);
}

/* Section title/heading */
.config-section-title {
    color: var(--color-accent);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    padding: var(--space-1) 0;
}

/* Compact section title for nested items */
.config-section-title.compact {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========== Config Fields ========== */

/* Container for all fields in a section */
.config-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Individual field row (label + input) */
.config-field-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary);
    transition: border-color var(--transition-base);
    min-height: 38px;
}

.config-field-row:hover {
    border-color: var(--border-accent);
}

/* Compact field layout for nested forms */
.config-field.compact { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

/* Field label container */
.config-field-label-container {
    flex: 0 0 200px;
    min-width: 200px;
}

/* Field label */
.config-field-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    margin: 0;
    cursor: help;
    user-select: none;
}

/* Compact label for nested forms */
.config-field-label.compact { 
    font-size: var(--font-size-xs); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    opacity: 0.8;
}

/* Required field indicator */
.config-field-label.required::after {
    content: " *";
    color: var(--color-danger-light);
}

/* Field input container */
.config-field-input-container {
    flex: 1;
    min-width: 0;
}

/* ========== Custom Form Controls for Config Editor ========== */

/* Text inputs and selects in config editor */
.config-field-input-container .form-control,
.config-field-input-container .form-select {
    background: var(--bg-input-dark);
    border: 1px solid var(--border-accent);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    width: 100%;
    height: 32px;
}

/* Compact form controls for nested sections */
.config-section.compact .form-control,
.config-section.compact .form-select,
.config-field.compact .form-control,
.config-field.compact .form-select {
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
    height: 28px;
}

/* Focus state for config editor inputs */
.config-field-input-container .form-control:focus,
.config-field-input-container .form-select:focus {
    background: var(--bg-input);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.25);
    color: var(--text-secondary);
    outline: none;
}

/* Checkboxes in config editor */
.config-field-input-container .form-check {
    margin: 0;
    display: flex;
    align-items: center;
    height: 32px;
}

.config-field-input-container .form-check-input {
    background-color: var(--bg-input-dark);
    border-color: var(--border-accent);
    margin: 0;
}

.config-field-input-container .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ========== Validation States ========== */

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger-light) !important;
    background: rgba(244, 67, 54, 0.05);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--color-danger-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--color-success) !important;
    background: rgba(76, 175, 80, 0.05);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}

.text-danger {
    color: var(--color-danger-light);
    font-size: var(--font-size-xs);
}

/* ========== Tooltip for Field Labels ========== */

.config-field-label[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    max-width: 300px;
    white-space: normal;
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-accent);
    top: 100%;
    left: 0;
    margin-top: var(--space-1);
}

/* ========== Array/List Sections ========== */

/* Container for array/list items */
.config-array {
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--color-accent-purple);
    padding-left: var(--space-4);
}

/* First array in a container doesn't need extra top margin */
.config-editor > .config-array:first-child {
    margin-top: 0;
}

.config-array-header-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.config-array-title {
    color: var(--color-accent-purple);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3) 0;
    padding: var(--space-1) 0;
}

.config-array-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ========== List Cards Container ========== */

/* Grid container for list items */
.list-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

/* Individual list item card */
.list-item-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    padding-right: var(--space-3);
    position: relative;
    transition: all var(--transition-base);
}

.list-item-card:hover {
    border-color: rgba(79, 195, 247, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

/* Compact variant for nested lists */
.list-item-card.compact {
    padding: var(--space-2);
    padding-right: var(--space-2);
    font-size: var(--font-size-sm);
}

/* Item info container */
.list-item-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    overflow: hidden;
}

.list-item-info strong {
    color: var(--color-primary);
    font-size: var(--font-size-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item-card.compact .list-item-info strong {
    font-size: var(--font-size-sm);
}

.list-item-info .text-muted {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action buttons container for list items */
.list-item-actions {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    opacity: 0;
    transition: all var(--transition-base);
    pointer-events: none;
}

.list-item-card.compact .list-item-actions {
    right: var(--space-2);
}

/* Show buttons on card hover */
.list-item-card:hover .list-item-actions,
.config-item-card:hover .list-item-actions {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* Edit button for list items */
.btn-edit-item {
    background: rgba(79, 195, 247, 0.75);
    border: 1px solid rgba(79, 195, 247, 0.85);
    color: rgba(0, 0, 0, 0.9);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.btn-edit-item:hover {
    background: rgba(79, 195, 247, 0.80);
    border-color: rgba(79, 195, 247, 0.95);
    transform: scale(1.05);
    color: rgba(0, 0, 0, 1);
}

/* Delete button for list items */
.btn-delete-item {
    background: rgba(244, 67, 54, 0.85);
    border: 1px solid rgba(244, 67, 54, 0.9);
    color: rgba(255, 255, 255, 0.95);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.btn-delete-item:hover {
    background: rgba(244, 67, 54, 0.95);
    border-color: rgba(244, 67, 54, 1);
    transform: scale(1.05);
    color: rgba(255, 255, 255, 1);
}

/* Special "Add Item" card with dashed border */
.add-item-card {
    background: rgba(79, 195, 247, 0.05);
    border: 2px dashed rgba(79, 195, 247, 0.3);
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.add-item-card:hover {
    background: rgba(79, 195, 247, 0.1);
    border-color: rgba(79, 195, 247, 0.5);
    transform: scale(1.02);
}

.add-item-card .add-icon {
    font-size: var(--font-size-xl);
    font-weight: bold;
}

.add-item-card .add-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Full-size add card variant for config-item-card */
.config-item-card.add-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    transition: all var(--transition-base);
}

.config-item-card.add-item-card .add-icon {
    font-size: 48px;
    margin-bottom: var(--space-2);
}

.config-item-card.add-item-card .add-text {
    font-size: var(--font-size-lg);
}

/* ========== Config Tree Visualization ========== */

/* Tree view for nested JSON structures */
.config-tree {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.config-tree-node {
    margin: 2px 0;
    padding: 2px 0;
}

/* Clickable key in tree view */
.config-tree-key {
    cursor: pointer;
    user-select: none;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.config-tree-key:hover {
    background: rgba(79, 195, 247, 0.1);
    border-radius: var(--radius-sm);
}

/* Different key types */
.config-tree-key.object {
    color: var(--color-accent);
}

.config-tree-key.array {
    color: var(--color-accent-purple);
}

/* Tree values with type-specific colors */
.config-tree-value {
    font-weight: normal;
}

.config-tree-value.string {
    color: var(--color-success-light);
}

.config-tree-value.number {
    color: #42a5f5;
}

.config-tree-value.boolean {
    color: #ff7043;
}

.config-tree-value.null {
    color: var(--text-disabled);
    font-style: italic;
}

/* Children container in tree */
.config-tree-children {
    margin-left: var(--space-5);
    border-left: 1px solid var(--border-primary);
    padding-left: var(--space-3);
}

/* ========== Config Loading/Error States ========== */

.config-loading {
    text-align: center;
    padding: var(--space-10);
    color: var(--color-primary);
}

.config-error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    color: var(--color-danger-light);
    margin: var(--space-3) 0;
}

/* ========== Responsive Design ========== */

@media (max-width: 768px) {
    .config-items-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .config-field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .config-field-label-container {
        flex: 1;
        min-width: 100%;
    }
    
    .config-field-input-container {
        width: 100%;
    }
}

/* ========== Sub-Modal Override ========== */

/* Ensures sub-modals (modals opened from modals) appear above parent */
.modal.sub-modal {
    z-index: var(--z-modal-nested) !important;
    background: rgba(0, 0, 0, 0.25) !important; /* Transparente para efeito de sobreposição */
    backdrop-filter: blur(2px) !important;
}

.modal.sub-modal .modal-content {
    z-index: calc(var(--z-modal-nested) + 1) !important;
}

/* Small modal variant for simple forms */
.modal-content.small {
    max-width: 600px !important;
}

/* ========== Dashboard Action Buttons ========== */
/* Action buttons positioned at bottom-right of dashboard cards */
.dashboard-actions {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: flex;
    gap: var(--space-2);
    opacity: 0;
    transform: translateX(10px);
    transition: all var(--transition-base);
    pointer-events: none;
}

/* Show action buttons on card hover */
.config-item-card:hover .dashboard-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Silence button styling */
.btn-action-item.btn-silence {
    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
}

.btn-action-item.btn-silence:hover {
    background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);
    transform: translateY(-2px);
}

/* History button styling for dataloader cards */
.module-card-history-btn {
    background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-card-history-btn:hover {
    background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
}

.module-card-history-btn .material-symbols-outlined {
    font-size: 20px;
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}