/* 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: 1;
-fx-alignment: center-left;
}

.search-field-container {
-fx-alignment: center-right;
}

.search-field {
-fx-pref-width: 300;
-fx-background-color: white;
-fx-background-radius: 20;
-fx-padding: 8 30 8 8;
}

.search-icon {
-fx-translate-x: -10;
-fx-opacity: 0.5;
}

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

/* Close Icon Styles /
.close-icon {
-fx-cursor: hand;
-fx-translate-x: 280; / Adjust this value to move the icon right /
-fx-translate-y: -5; / Adjust this value to move the icon up */
}

/* 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 {
-fx-padding: 0; /* Removed padding */
-fx-spacing: 10;
-fx-alignment: center-left;
}

.section-title {
-fx-font-size: 14;
-fx-font-weight: bold;
-fx-text-fill: #333333;
-fx-padding: 5 10;
}

/* 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;
}

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

.grid-header, .grid-cell {
-fx-padding: 8 15;
-fx-alignment: center;
-fx-min-width: 100;
-fx-font-size: 13;
}

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

.vertical-line {
-fx-stroke: #2e7d32;
-fx-stroke-width: 1;
}

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

.appointment-section .section-title {
-fx-alignment: center;
-fx-translate-x: 400; /* Center the Add Appointment label */
}

.appointment-content {
-fx-padding: 20;
-fx-alignment: center;
}

/* Vertical lines in appointment section /
.appointment-vertical-line {
-fx-stroke: #cccccc;
-fx-stroke-width: 1;
-fx-height: 200; / Adjust height as needed */
}

.appointment-column {
-fx-padding: 0 20;
-fx-alignment: top-center;
-fx-spacing: 15;
}

.combo-box {
-fx-background-color: #f8f9fa;
-fx-background-radius: 5;
-fx-pref-width: 250;
-fx-font-size: 13;
}

.notice-field {
-fx-background-color: #f8f9fa;
-fx-background-radius: 5;
-fx-pref-width: 250;
}

/* Date Picker Styles */
.appointment-date-picker {
-fx-pref-width: 200;
-fx-font-size: 13;
}

/* Time Selection Styles */
.time-selection {
-fx-spacing: 10;
-fx-alignment: center-left;
}

.time-selection Label {
-fx-font-size: 13;
}

.time-combo {
-fx-pref-width: 70;
-fx-background-color: #f8f9fa;
-fx-background-radius: 5;
-fx-font-size: 13;
}

.add-appointment-button {
-fx-background-color: #00a65a;
-fx-text-fill: white;
-fx-padding: 10 20;
-fx-background-radius: 5;
-fx-cursor: hand;
-fx-font-weight: bold;
-fx-pref-width: 200;
-fx-font-size: 13;
}

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

/* Focus Styles */
.combo-box:focused,
.notice-field:focused {
-fx-border-color: #80bdff;
-fx-border-width: 2;
-fx-border-radius: 5;
}

this is my css for the fxml , Adjust it so that the close icon be in the top right of screen without issues , also make the patient info label background color is grey and rounded top right edge , make the labels in the table alligned with its headers