/* Custom Attributes Compact Styling */

/* Container and section spacing */
.compact-form-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 16px;
}

/* Remove extra padding when inside a dialog */
.mud-dialog-content .compact-form-container {
    padding: 0;
    max-width: none;
}

.compact-section {
    margin-bottom: 20px;
}

.compact-section-header {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--mud-palette-text-primary);
}

/* Dense form controls */
.dense-form-field .mud-input-control {
    margin-bottom: 12px;
}

.dense-form-field .mud-input-control-input-container {
    min-height: 40px;
    padding: 8px 12px;
}

/* Compact selection cards */
.compact-selection-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.compact-selection-card {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.compact-selection-card:hover {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.compact-selection-card.selected {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-lighten);
}

.compact-selection-card .mud-icon {
    margin-bottom: 4px;
    font-size: 1.5rem;
}

.compact-selection-card .mud-typography {
    font-size: 0.875rem;
    line-height: 1.2;
    margin: 0;
}

/* Properties grid layouts */
.properties-inline-grid {
    display: grid;
    gap: 16px;
    align-items: end;
    margin-bottom: 16px;
}

.validation-controls-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 12px;
}

.test-validation-grid {
    display: grid;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
}

.validation-result {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

/* List values styling */
.add-value-grid {
    display: grid;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.list-value-row {
    display: grid;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Responsive breakpoints */
@media (min-width: 960px) {
    .compact-form-container {
        padding: 24px 32px;
    }
    
    /* Override for dialog mode */
    .mud-dialog-content .compact-form-container {
        padding: 0;
    }
    
    .compact-selection-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .properties-inline-grid {
        grid-template-columns: auto auto 1fr;
    }
    
    .validation-controls-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .test-validation-grid {
        grid-template-columns: 1fr auto auto;
    }
    
    .add-value-grid {
        grid-template-columns: 1fr auto;
    }
    
    .list-value-row {
        grid-template-columns: 1fr auto;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .compact-form-container {
        padding: 20px;
    }
    
    /* Override for dialog mode */
    .mud-dialog-content .compact-form-container {
        padding: 0;
    }
    
    .compact-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .properties-inline-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .properties-inline-grid > :last-child {
        grid-column: 1 / -1;
    }
    
    .validation-controls-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .test-validation-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "input input"
            "button result";
    }
    
    .add-value-grid {
        grid-template-columns: 1fr auto;
    }
    
    .list-value-row {
        grid-template-columns: 1fr auto;
    }
}

@media (max-width: 599px) {
    .compact-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .properties-inline-grid,
    .validation-controls-grid,
    .test-validation-grid,
    .add-value-grid {
        grid-template-columns: 1fr;
    }
    
    .list-value-row {
        grid-template-columns: 1fr auto;
    }
}

/* Mobile touch optimizations */
@media (hover: none) and (pointer: coarse) {
    .compact-selection-card {
        min-height: 48px;
        padding: 14px;
    }
    
    .compact-selection-card:active {
        transform: scale(0.98);
    }
    
    .mud-button {
        min-height: 44px;
    }
}