/* General Styles for Both Sections */
html, body {
    height: auto;
    min-height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f7f6;
}

/* Styles Specific to Login Prompt (Insecure Section) */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.login-form {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
width: 100%;
max-width: 400px;
}

.login-form h2, .login-error {
margin-bottom: 20px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}

.login-error {
color: #D8000C;
background-color: #FFD2D2;
padding: 10px;
border-radius: 4px;
font-size: 14px;
}

.login-button {
background-color: #0056b3;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
text-decoration: none;
}

.login-button:hover {
background-color: #003d82;
}

.fa-icon {
margin-right: 8px;
vertical-align: middle;
}

.fa-icon i {
font-size: 20px;
color: #0056b3;
}

/* Styles Specific to Main Site (Secure Section) */

h2 {
color: #0056b3;
margin-bottom: 15px;
}

/* Main Content Styles */
.main-content {
width: 100%;
/* padding: 20px; */
}

.main-content > div {
margin-bottom: 30px;
}

/* Dynamic calendar */
.calendar {
width: auto; /* Adjusting width to be auto */
margin: 10px auto;
border-collapse: collapse;
font-size: 0.9em;
}

.calendar caption {
text-align: left;
padding: 10px;
background-color: #0056b3; /* Dark blue */
color: white;
font-size: 1.2em;
font-weight: bold;
}

.calendar td {
padding: 5px; /* Reducing padding */
border: 1px solid #ddd;
text-align: center;
vertical-align: middle;
background-color: #fafafa;
}

.calendar input[type='checkbox'] {
margin-top: 5px;
transform: scale(1.2);
cursor: pointer;
}

/* Calendar Styles */
.calendar .weekday {
    background-color: #d9eed8; /* Darker green for weekdays */
}

.calendar .weekend {
    background-color: #fddddd; /* Darker red for weekends */
}

.calendar td.current-day {
    background-color: #ffd700; /* Gold for the current day */
    font-weight: bold;
}

.calendar th, .calendar td {
    padding: 5px; /* Adjust the padding if necessary */
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    background-color: #fafafa;
}

.calendar .week-number {
    font-weight: bold;
    text-align: center;
    background-color: #e6e6e6; /* Light grey for week number */
}

/* Holiday specific styles */
.holiday {
    background-color: #ff9999 !important; /* Light red for holidays */
}

/* Ensure the combination of classes are handled appropriately */
.calendar .weekday:not(.holiday) {
    background-color: #d9eed8; /* Darker green for weekdays */
}

.calendar .weekend:not(.holiday) {
    background-color: #fddddd; /* Darker red for weekends */
}

.calendar td.current-day:not(.holiday) {
    background-color: #ffd700; /* Gold for the current day */
    font-weight: bold;
}



/* Responsive Design */
@media (max-width: 600px) {
.calendar {
    font-size: 0.8em;
}
}

@media (max-width: 400px) {
.calendar {
    font-size: 0.7em;
}
}

/* Calendar Section Styles */
.default-section, .calendar-section, .patients-section {
max-width: 800px;
margin: auto;
}

.calendar-container {
text-align: center;
}

.calendar-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

/* Patient Card Styles */
.patient-card {
display: flex;
flex-direction: row; /* Align items in a row */
align-items: stretch; /* Stretch items to fill the card */
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}

.patient-info {
flex: 2; /* Allocate more space to patient info */
padding-right: 20px; /* Space between this section and the next */
border-right: 1px solid #ddd; /* Visual separator */
}

.patient-info strong {
color: #0056b3; /* Blue color for labels */
}

.upcoming-visits {
flex: 3; /* Allocate the most space to upcoming visits */
padding: 0 20px; /* Space around the content */
border-right: 1px solid #ddd; /* Visual separator */
}

.upcoming-visits h3 {
margin:0px;
color: #0056b3; /* Blue color for labels */
}

.patient-buttons {
flex: 1; /* Allocate less space to buttons */
padding-left: 20px; /* Space between this section and the previous */
display: flex;
flex-direction: column;
align-items: flex-start;
}


/* Feedback Box Styles */
.feedback-section {
padding: 10px;
margin-bottom: 20px;
}

.error-message, .success-message {
color: #D8000C; /* For error, you can use the same red color */
background-color: #FFD2D2; /* For error, you can use the same background color */
padding: 10px;
border-radius: 4px;
font-size: 14px;
margin-bottom: 10px;
}

.success-message {
color: #4F8A10; /* For success, you can use a green color */
background-color: #DFF2BF; /* For success, you can use a light green background color */
}

/* Navigation styles */
.nav-button {
background-color: #0056b3;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin: 15px;
transition: background-color 0.3s;
font-size: 16px;
}

.nav-button:before {
padding: 5px;
}

.nav-button:first-child:before {
content: '\f0d9'; /* Left arrow for prev */
}

.nav-button:last-child:before {
content: '\f0da'; /* Right arrow for next */
}

.nav-button:hover {
background-color: #003d82;
}

.day-card {
background-color: #f4f7f6;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
}

.date {
font-weight: bold;
margin-bottom: 5px;
}

.add-button, .logout-button {
background-color: #0056b3;
margin:5px;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
text-decoration: none;
}

.visit-details {
margin:10px;
}

.individual-visit {
margin:5px;
}

.add-button, .logout-button {
display: inline-block;
}

.add-button:hover, .logout-button:hover {
background-color: #003d82;
}

.edit-button, .delete-button {
background-color: #f0ad4e; /* Yellow for Edit */
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
text-decoration: none;
margin-bottom: 10px; /* Adds space between buttons */
}

.edit-button:before {
font-family: 'Font Awesome 5 Free';
content: '\f044'; /* Pencil icon for Edit */
padding-right: 5px;
}

.delete-button {
background-color: #d9534f; /* Red for Delete */
}

.delete-button:before {
font-family: 'Font Awesome 5 Free';
content: '\f2ed'; /* Trash can icon for Delete */
padding-right: 5px;
}

.edit-button:hover {
background-color: #ec971f; /* Darker Yellow on hover */
}

.delete-button:hover {
background-color: #c9302c; /* Darker Red on hover */
}

.back-button {
background-color: #0056b3;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
text-decoration: none;
display: inline-flex;
align-items: center;
margin-top: 20px; /* Adjust as needed */
font-family: 'Font Awesome 5 Free', 'Arial', sans-serif;
font-weight: 900; /* Font Awesome requires this weight for solid icons */
}

.back-button:before {
content: '\f060'; /* Unicode for 'fa-arrow-left' */
margin-right: 5px;
}

.back-button:hover {
background-color: #003d82;
}

/* Form Styles for Visit Suggestion */
.suggest-visit-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}

.suggest-visit-form label {
font-size: 14px;
color: #333;
margin-bottom: 5px;
display: block;
}

.suggest-visit-form input, 
.suggest-visit-form select {
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 14px;
}

.suggest-visit-button {
background-color: #0056b3;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
text-decoration: none;
display: inline-flex;
align-items: center;
font-family: 'Font Awesome 5 Free', 'Arial', sans-serif;
font-weight: 900; /* Font Awesome requires this weight for solid icons */
}

.suggest-visit-button:before {
content: '\f0eb'; /* Unicode for 'fa-lightbulb' */
margin-right: 5px;
}

.suggest-visit-button:hover {
background-color: #003d82;
}

/* Form Section Styles */
.form-section {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: 20px auto;
text-align: left;
}

.form-group {
margin-bottom: 15px;
text-align: center; /* Center the content */
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #0056b3;
}

.form-control {
width: 100%;
text-align: center;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width */
}

.form-control select {
text-align-last: center;
-moz-text-align-last: center; /* For Firefox */
}

.save-patient-button {
background-color: #0056b3;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
text-decoration: none;
display: block; /* Full width */
}

.save-patient-button:hover {
background-color: #003d82;
}



/* Route WARNINGS */

.warning {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.hard-fail {
    background-color: #f8d7da;
    color: #721c24;
}

.soft-fail {
    background-color: #fff3cd;
    color: #856404;
}

.warning i {
    margin-right: 10px;
    font-size: 24px;
}