hey GOAT!  this is my fxml and css :
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.shape.Circle?>

<AnchorPane prefHeight="755.0" prefWidth="1111.0" stylesheets="@PatientApp.css" xmlns="http://javafx.com/javafx/23" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.clinic.AddAttachment.AddAttachment">

    <!-- Main Content Container -->
    <VBox layoutY="10.0" prefHeight="781.0" prefWidth="1111.0" spacing="20.0" styleClass="main-container" AnchorPane.bottomAnchor="-35.59999999999991" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="10.0" />

    <!-- Search and Filter Section -->
    <HBox alignment="CENTER_LEFT" layoutX="114.0" prefHeight="54.0" prefWidth="790.0" spacing="20" styleClass="search-container">
        <children>
            <!-- Search Field with Icon -->
            <StackPane prefHeight="57.0" prefWidth="306.0" styleClass="search-field-container">
                <children>
                    <TextField prefHeight="34.0" prefWidth="283.0" promptText="Search" styleClass="search-field" />
                    <ImageView fitHeight="26.0" fitWidth="31.0" styleClass="search-icon" StackPane.alignment="CENTER_RIGHT">
                        <image>
                            <Image url="@../../Icons/search.png" />
                        </image>
                    </ImageView>
                </children>
            </StackPane>

            <!-- Radio Buttons -->
            <HBox alignment="CENTER_LEFT" spacing="15" styleClass="radio-group">
                <children>
                    <RadioButton selected="true" text="File Number" />
                    <RadioButton text="Mobile Number" />
                    <RadioButton text="Civil ID" />
                    <RadioButton text="All" />
                </children>
            </HBox>
        </children>
    </HBox>

    <!-- Patient Info Section -->
    <VBox layoutX="38.0" layoutY="136.0" prefHeight="180.0" prefWidth="998.0" spacing="0" styleClass="patient-info-section">
        <!-- Section Header -->
        <HBox alignment="CENTER_LEFT" prefHeight="0.0" prefWidth="932.0" styleClass="section-header">
            <children>
                <Label prefHeight="45.0" prefWidth="128.0" styleClass="section-title" text="Patient Info">
                    <graphic>
                        <ImageView fitHeight="24.0" fitWidth="24.0">
                            <image>
                                <Image url="@../../Icons/info.png" />
                            </image>
                        </ImageView>
                    </graphic>
                </Label>
            </children>
        </HBox>

        <!-- Patient Info Grid -->
        <VBox spacing="0" styleClass="patient-info-container">
            <!-- Headers Row -->
            <HBox alignment="CENTER_LEFT" prefHeight="50.0" styleClass="grid-header-row">
                <children>
                    <Label styleClass="grid-header" text="File" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="130.0" styleClass="grid-header" text="Arabic Name" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="197.0" styleClass="grid-header" text="English Name" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="138.0" styleClass="grid-header" text="Mobile Number" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="100.0" styleClass="grid-header" text="Birthdate" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="97.0" styleClass="grid-header" text="User Name" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="111.0" styleClass="grid-header" text="Notice" HBox.hgrow="ALWAYS" />
                </children>
            </HBox>

            <!-- Data Row -->
            <HBox alignment="CENTER_LEFT" prefHeight="51.0" styleClass="grid-data-row">
                <children>
                    <Label styleClass="grid-cell" text="42604" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label styleClass="grid-cell" text="مهند درويش محمد" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label styleClass="grid-cell" text="Mohanad Darwish Mohamed" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="141.0" styleClass="grid-cell" text="01117521556" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="100.0" styleClass="grid-cell" text="22-4-2001" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label prefWidth="97.0" styleClass="grid-cell" text="Honda" HBox.hgrow="ALWAYS" />
                    <Separator orientation="VERTICAL" styleClass="vertical-line" />
                    <Label styleClass="grid-cell" text="" HBox.hgrow="ALWAYS" />
                </children>
            </HBox>
        </VBox>
    </VBox>

    <!-- Close Icon (Anchored to Top Right) -->
    <ImageView fx:id="closeIcon" fitHeight="33.0" fitWidth="36.0" styleClass="close-icon">
        <image>
            <Image url="@../../Icons/no.png" />
        </image>
        <AnchorPane.topAnchor>10.0</AnchorPane.topAnchor>
        <AnchorPane.rightAnchor>10.0</AnchorPane.rightAnchor>
    </ImageView>
    <!-- Table -->
     <TableView layoutX="35.0" layoutY="475.0" prefHeight="275.0" prefWidth="998.0" styleClass="patient-app-table">
         <columns>
             <TableColumn text="File" />
             <TableColumn text="Time" />
             <TableColumn text="Date" />
             <TableColumn text="Delete" />
             <TableColumn text="App" />
             <TableColumn text="Status" />
             <TableColumn text="Group" />
             <TableColumn text="MEMO" />
             <TableColumn text="Code" />
             <TableColumn text="Dr Name" />
             <TableColumn text="User Change Status" />
             <TableColumn prefWidth="161.60003662109375" text="User Name Created" />
             <TableColumn minWidth="0.0" prefWidth="0.0" text="Created Date/Time" />
         </columns>
         <!-- Sample rows here if needed -->
     </TableView>

                              
                                  <VBox layoutX="31.0" layoutY="340.0" prefHeight="102.0" prefWidth="998.0" spacing="10" styleClass="patient-app-section">
         <Button styleClass="attachment-button" text="+ Add attachment" />
        <!-- Patient App Header -->
        <HBox alignment="CENTER_LEFT" prefHeight="35.0" prefWidth="784.0" styleClass="section-header">
            <ImageView fx:id="patientAppIcon" fitHeight="24" fitWidth="24" />
            <Label styleClass="header-label" text="Patient App" />
        </HBox>

                                      <!-- Legend -->
        <HBox alignment="CENTER" spacing="10" styleClass="legend-bar">
            <Circle fx:id="futureAppointment" radius="5" style="-fx-fill: #90e1f4;" />
            <Label text="موعد في المستقبل" />
            <Circle fx:id="arrived" radius="5" style="-fx-fill: #5be26d;" />
            <Label text="وصول" />
            <!-- Add remaining legend items with similar structure -->
        </HBox>

                                      <!-- Add Attachment Button -->
        <HBox alignment="CENTER" />
    </VBox>

</AnchorPane>


/* Main Container Styles */
.main-container {
    -fx-background-color: #e0ebff;
    -fx-padding: 20;
    -fx-spacing: 20;
    -fx-font-family: system;
}

/* Search Section Styles */
.search-container {
    -fx-padding: 0;
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 10; /* Adjusted spacing for better alignment */
}

.search-field-container {
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 5;
    -fx-padding: 0;
}

.search-field {
    -fx-pref-width: 300;
    -fx-background-color: white;
    -fx-background-radius: 20;
    -fx-padding: 8 30 8 8; /* Right padding to accommodate the icon */
}

.search-icon {
    -fx-opacity: 0.5;
    /* Positioned to the right via StackPane alignment in FXML */
}

/* Radio Buttons Group */
.radio-group {
    -fx-alignment: CENTER_LEFT;
}

.radio-group .radio-button {
    -fx-padding: 0 10;
    -fx-font-size: 13;
}

/* Close Icon Styles */
.close-icon {
    -fx-cursor: hand;
    -fx-background-color: transparent; /* Transparent background */
    -fx-padding: 5; /* Padding around the icon */
}

.close-icon:hover {
    -fx-opacity: 0.7; /* Slightly transparent on hover for feedback */
}

/* Patient Info Section Styles */
.patient-info-section {
    -fx-background-color: #e0ebff;
    -fx-background-radius: 10;
    -fx-padding: 0; /* Removed padding to stick label to table */
}

/* Section Header Styles */
.section-header {
    -fx-padding: 0; /* Removed padding */
    -fx-spacing: 10;
    -fx-alignment: CENTER_LEFT;
}

/* Section Title - Patient Info Label */
.patient-info-section .section-title {
    /* Set grey background and rounded top-right corner */
    -fx-background-color: #e7e4e4;
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-padding: 5 10;
    /* Rounded top-right corner: top-left, top-right, bottom-right, bottom-left */
    -fx-background-radius: 0 10 0 0;
    -fx-alignment: CENTER_LEFT; /* Align text to the left */
}

/* Add Attachment Section Styles */
.appointment-section {
    -fx-background-color: white;
    -fx-background-radius: 10;
    -fx-padding: 15;
    -fx-spacing: 15;
}

/* Appointment Content Layout */
.appointment-content {
    -fx-padding: 20;
    -fx-alignment: CENTER;
    -fx-spacing: 20;
}

/* Add Appointment Label */
.appointment-section .section-title {
    /* Removed background color */
    -fx-background-color: transparent;
    -fx-alignment: CENTER; /* Center the label */
    -fx-padding: 10 0 10 0; /* Adjust padding to position above the date picker */
    -fx-font-size: 16; /* Increase font size for prominence */
    -fx-font-weight: bold;
}

/* Add Appointment Button Styles */
.add-appointment-button {
    -fx-background-color: #00a65a;
    -fx-text-fill: white;
    -fx-padding: 8 16;
    -fx-background-radius: 15;
    -fx-cursor: hand;
    -fx-font-weight: bold;
    -fx-pref-width: 160px;
    -fx-pref-height: 40px;
    -fx-font-size: 14;
}

.add-appointment-button:hover {
    -fx-background-color: #008d4c;
}

/* Patient Info Grid Styles */
.patient-info-container {
    -fx-background-color: #e8f5e9;
    -fx-padding: 0;
    -fx-background-radius: 5;
}

.grid-header-row {
    -fx-background-color: #c8e6c9;
    -fx-padding: 8;
    -fx-spacing: 0;
    -fx-alignment: CENTER_LEFT;
}

.grid-data-row {
    -fx-background-color: white;
    -fx-padding: 8;
    -fx-spacing: 0;
    -fx-alignment: CENTER_LEFT;
}

.grid-header, .grid-cell {
    -fx-padding: 8 15;
    -fx-alignment: CENTER_LEFT; /* Align cells with headers */
    -fx-min-width: 100;
    -fx-font-size: 13;
}

.grid-header {
    -fx-font-weight: bold;
}

/* Vertical Separator Lines */
.vertical-line {
    -fx-stroke: #2e7d32; /* Dark green color for visibility */
    -fx-stroke-width: 2; /* Increased stroke width for prominence */
    -fx-stroke-line-cap: ROUND; /* Rounded ends for a polished look */
    -fx-fill: transparent;
}

/* Attachment Controls Styles */
.attachment-controls {
    -fx-alignment: CENTER;
    -fx-spacing: 15;
}

/* Each Attachment Row */
.attachment-row {
    -fx-alignment: CENTER;
    -fx-spacing: 20;
}

/* Attachment Label Styles */
.attachment-label {
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-text-fill: grey; /* Changed text color to grey */
    -fx-pref-width: 150px;
}

/* PC Button Styles */
.pc-button {
    -fx-background-color: #FBC12E; /* Yellow color */
    -fx-text-fill: white;
    -fx-padding: 5 10; /* Reduced padding for smaller height */
    -fx-background-radius: 10;
    -fx-cursor: hand;
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.3), 5, 0, 0, 1);
    -fx-pref-width: 100px; /* Increased width */
    -fx-pref-height: 30px; /* Reduced height */
    -fx-font-size: 12px; /* Adjusted font size */
    -fx-alignment: CENTER; /* Center text and graphic */
}

.pc-button:hover {
    -fx-background-color: #FFC107; /* Darker yellow on hover */
}

/* Scan Button Styles */
.scan-button {
    -fx-background-color: #4062A9; /* Blue color */
    -fx-text-fill: white;
    -fx-padding: 5 10; /* Reduced padding for smaller height */
    -fx-background-radius: 10;
    -fx-cursor: hand;
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.3), 5, 0, 0, 1);
    -fx-pref-width: 100px; /* Increased width */
    -fx-pref-height: 30px; /* Reduced height */
    -fx-font-size: 12px; /* Adjusted font size */
    -fx-alignment: CENTER; /* Center text and graphic */
}

.scan-button:hover {
    -fx-background-color: #1C86EE; /* Darker blue on hover */
}

/* Save Files Button Centering */
.appointment-section > HBox {
    /* Ensures that the HBox containing the Save Files button takes full width */
    -fx-fill-height: false;
}

.appointment-section .add-appointment-button {
    -fx-alignment: center;
}
.attachment-Line {
    -fx-stroke: #8d8d8d;
    -fx-stroke-width: 2px;
}

/* Style for Patient App Section */
.patient-app-section {
    -fx-background-color: #c6e9ff;
    -fx-padding: 10;
    -fx-background-radius: 10;
}

/* Header styling */


.header-label {
    -fx-text-fill: black;
    -fx-font-size: 16;
    -fx-font-weight: bold;
}

/* Legend Bar */
.legend-bar .circle {
    -fx-radius: 5;
}

.legend-bar Label {
    -fx-font-size: 12;
}

/* Add Attachment Button */
.attachment-button {
    -fx-background-color: #4a8dd1;
    -fx-text-fill: white;
    -fx-padding: 5 15;
    -fx-background-radius: 10;
}

/* Patient App Table */
.patient-app-table {
    -fx-background-color: #ffffff;
    -fx-padding: 10;
    -fx-border-color: #90c491;
    -fx-border-radius: 10;
    -fx-cell-border-color: #c6c6c6;
}

.patient-app-table .column-header {
    -fx-background-color: #90c491;
    -fx-text-fill: black;
    -fx-font-weight: bold;
}

.patient-app-table .table-row-cell {
    -fx-border-color: #c6c6c6;
}

I want the patient app to be same as the patient info label , and I want the circles background hbox to be white and make the add attachment button centered between the two sections