/* createplan.component.scss */
.FormOverView {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    
    &.scrollbar {
        /* Custom scrollbar styling */
        &::-webkit-scrollbar {
            width: 8px;
        }
        
        &::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        &::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
            
            &:hover {
                background: #a8a8a8;
            }
        }
    }
}

.create-plan-container {
    .section-container {
        margin-bottom: 30px;
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            
            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
            
            .form-group {
                display: flex;
                flex-direction: column;
                
                &.full-width {
                    grid-column: 1 / -1;
                }
                
                label {
                    font-size: 14px;
                    font-weight: 500;
                    color: #495057;
                    margin-bottom: 8px;
                    
                    &::after {
                        content: " *";
                        color: #dc3545;
                    }
                }
                
                .form-control {
                    padding: 10px 12px;
                    border: 1px solid #ced4da;
                    border-radius: 4px;
                    font-size: 14px;
                    transition: border-color 0.3s, box-shadow 0.3s;
                    
                    &:focus {
                        outline: none;
                        border-color: #4361ee;
                        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
                    }
                    
                    &:invalid {
                        border-color: #dc3545;
                    }
                    
                    &::placeholder {
                        color: #adb5bd;
                    }
                }
                
                select.form-control {
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
                    background-position: right 8px center;
                    background-repeat: no-repeat;
                    background-size: 16px;
                    padding-right: 32px;
                    appearance: none;
                }
                
                textarea.form-control {
                    resize: vertical;
                    min-height: 80px;
                }
            }
        }
        
        .summary-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
            
            .summary-item {
                flex: 1;
                min-width: 200px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 15px;
                background-color: white;
                border-radius: 4px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                
                .summary-label {
                    font-size: 14px;
                    color: #6c757d;
                }
                
                .summary-value {
                    font-weight: 600;
                    color: #2c3e50;
                    
                    &.status-draft {
                        color: #6c757d;
                    }
                    
                    &.status-planned {
                        color: #ffc107;
                    }
                    
                    &.status-approved {
                        color: #28a745;
                    }
                }
            }
        }
        
        .line-items-container {
            .empty-state {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 40px 20px;
                border: 2px dashed #dee2e6;
                border-radius: 6px;
                background-color: #f8f9fa;
                
                p {
                    font-size: 16px;
                    color: #6c757d;
                    margin-bottom: 20px;
                }
                
                .add-items-btn {
                    display: flex;
                    align-items: center;
                    background-color: #4361ee;
                    color: white;
                    border: none;
                    border-radius: 6px;
                    padding: 10px 16px;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: background-color 0.2s;
                    
                    &:hover {
                        background-color: #3651de;
                    }
                    
                    .plus-icon {
                        margin-right: 6px;
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }
        }
        
        .action-buttons-container {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 30px;
            
            .action-btn {
                padding: 10px 20px;
                border-radius: 6px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s;
                
                &.draft-btn {
                    background-color: white;
                    color: #495057;
                    border: 1px solid #ced4da;
                    
                    &:hover {
                        background-color: #f8f9fa;
                        border-color: #adb5bd;
                    }
                }
                
                &.submit-btn {
                    background-color: #4361ee;
                    color: white;
                    border: none;
                    
                    &:hover {
                        background-color: #3651de;
                    }
                }
                
                &.cancel-btn {
                    background-color: white;
                    color: #6c757d;
                    border: 1px solid #ced4da;
                    
                    &:hover {
                        background-color: #f8f9fa;
                        border-color: #adb5bd;
                    }
                }
            }
        }
    }
}

// Form validation styles
.form-group {
    .form-control {
        &.ng-invalid.ng-touched {
            border-color: #dc3545;
            
            &:focus {
                border-color: #dc3545;
                box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
            }
        }
        
        &.ng-valid.ng-touched {
            border-color: #28a745;
        }
    }
}

// Responsive design
@media (max-width: 768px) {
    .action-buttons-container {
        flex-direction: column;
        
        .action-btn {
            width: 100%;
        }
    }
}