.FormOverView {
    padding: 12px;
    background-color: #ffffff;
    min-height: calc(100vh - 120px);
    font-family: 'Inter', 'Roboto', sans-serif;
}

gb-newpicklist, gb-textarea, gb-combobox, gb-checkbox {
    display: block;
    width: 100%;
}

/* Header Grid - Compact Layout */
.header-section {
    max-width: 1200px;
}

.header-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px; /* Removed large bottom margins */
    align-items: flex-start;
}

.header-row-1 {
    .grade-number { flex: 0 0 32%; }
    .description { flex: 0 0 45%; }
    .status { flex: 0 0 18%; }
}

.header-row-2 {
    .material-type { flex: 0 0 32%; }
    .item { flex: 0 0 32%; }
}

/* Base custom material overrides to remove padding and whitespace */
::ng-deep {
    .mat-mdc-text-field-wrapper {
        background-color: #fff !important;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 0 8px;
        height: 36px !important; /* Extremely tight fields */
        box-shadow: none !important;
    }
    .mdc-line-ripple { display: none !important; }
    
    .mat-mdc-form-field-flex {
        background-color: transparent !important;
        align-items: center !important;
        height: 100%;
        padding: 0 !important;
    }
    .mat-mdc-form-field-infix {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        min-height: auto !important;
    }
    .mat-mdc-form-field-subscript-wrapper {
        display: none !important; /* Hides extra hints padding */
    }
    .mat-mdc-form-field {
        margin-bottom: 0 !important;
    }
}

/* Tab Container and Button Positioning */
.standard-tabs-container {
    margin-top: 16px; /* Tight margin */
    position: relative;
    max-width: 1200px;
}

.add-standard-btn {
    position: absolute;
    right: 0;
    top: 4px;
    z-index: 10;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;

    &:hover { background: #f3f4f6; }
    i { font-size: 13px; }
}

/* Primary Tabs */
::ng-deep .primary-tabs {
    border-top: 1px solid transparent;

    .mat-mdc-tab-header {
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 16px; /* Reduced gap */
    }

    .mdc-tab {
        min-width: 120px;
        padding: 0 16px;
        height: 40px !important; /* Smaller tab height */
        
        .mdc-tab__content {
            flex-direction: row;
            gap: 8px;
        }

        .tab-text {
            color: #6b7280;
            font-weight: 500;
            font-size: 14px;
        }

        .tab-close {
            color: #9ca3af;
            font-size: 16px;
            font-weight: normal;
        }

        &.mdc-tab--active {
            .tab-text {
                color: #111827;
                font-weight: 600;
            }
            .tab-close {
                color: #6b7280;
            }
        }
    }

    .mdc-tab-indicator__inner--theme-secondary {
        border-color: #6366f1 !important;
        border-width: 2px !important;
    }
}

.tab-content-area {
    padding: 0;
}

/* Standard Details inside Tab */
.standard-details-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px; /* Tight line */

    .standard-dd { flex: 0 0 32%; }
    .remarks { flex: 0 0 45%; }
    .default-check { 
        flex: 0 0 20%; 
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 0; /* Remove top offset for alignment */
    }

    .subtitle {
        font-size: 11px;
        color: #6b7280;
        margin-top: 2px;
        margin-left: 2px;
    }

    .check-label {
        font-size: 13px;
        font-weight: 500;
        color: #111827;
    }
}

::ng-deep .default-check .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
    border-color: #6366f1 !important;
    background-color: #6366f1 !important;
}

::ng-deep .default-check .mdc-checkbox {
    padding: 8px !important;
    width: 36px !important;
    height: 36px !important;
}

/* Secondary Tabs */
::ng-deep .secondary-tabs {
    .mat-mdc-tab-header {
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: 12px; /* Very tight spacing before content */
    }

    .mdc-tab {
        padding: 0 16px;
        min-width: auto;
        height: 36px !important;

        .mdc-tab__text-label {
            color: #6b7280;
            font-weight: 500;
            font-size: 13px;
        }

        &.mdc-tab--active .mdc-tab__text-label {
            color: #111827;
            font-weight: 600;
        }
    }

    .mdc-tab-indicator__inner--theme-secondary {
        border-color: #6366f1 !important;
        border-width: 2px !important;
    }
}

.sub-tab-content {
    .template-select {
        width: 320px;
        margin-bottom: 12px; /* Keep tight */
    }
}

/* Grid Override Styles */
.json-grid-container {
    width: 100%;
    
    /* Since we're using gb-formgrid, we override its internal wrapper to ensure compactness */
    ::ng-deep gb-formgrid {
        display: block;
        width: 100%;
        
        table {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
        }
        
        th {
            background-color: #f9fafb !important;
            color: #374151 !important;
            font-weight: 600 !important;
            font-size: 12px !important;
            padding: 8px 12px !important;
            border-bottom: 1px solid #e5e7eb !important;
        }

        td {
            padding: 6px 12px !important; /* Compact rows */
            border-bottom: 1px solid #f3f4f6 !important;
            font-size: 13px !important;
        }
        
        .mat-mdc-text-field-wrapper {
            height: 32px !important; /* Extremely small inputs in grid */
            padding: 0 6px !important;
        }
    }
}

/* Data Type Pill Badge Style */
.data-type-grid {
    ::ng-deep gb-formgrid {
        table {
            td:nth-child(6) {
                .mat-mdc-text-field-wrapper {
                    background-color: #e3ecfc !important;
                    border: none !important;
                    border-radius: 12px !important;
                    height: 26px !important;
                    padding: 0 8px !important;
                    min-width: 70px;
                }
                input {
                    color: #3f51b5 !important;
                    font-weight: 600 !important;
                    text-align: center;
                    font-size: 11px !important;
                }
            }
        }
    }
}