/* static/css/base.css */

:root {
    --accent-color: #28a745; /* Green */
    --danger-background-color: #f8d7da; /* Bootstrap Background Danger Color */
    --danger-color: #721c24; /* Bootstrap Danger Color */
    --highlight-color: #ffc107; /* Light Yellow */
    --info-icon-color: #004085; /* Deep Blue */
    --info-icon-hover-color: #0056b3; /* Darken the color on hover for better visibility */
    --link_hover_color: #28a745; /* Neutral Darker gray accent */
    --neutral-color: #f8f9fa; /* Light Gray */
    --phone-hover-color: #004085; /* primary color */
    --placeholder-color: #6c757d; /* Soft Grayish Blue */
    --primary-color: #004085; /* Deep Blue */
    --secondary-color: #6c757d; /* Soft Grayish Blue */
    --success-color: #198754; /* Bootstrap 5 Success Green */
    --success-hover-color: #218838; /* Deeper green for contrast */
    --table-stripe-color: rgba(89, 106, 157, 0.34); /* Light version of secondary color */
    --text-color: #343a40; /* Dark Charcoal */
    --th-color: white; /* Light Gray */
    --warning-hover-color: #e0a800; /* Richer gold tone */

    /* Other Variables */
    --sidebar-width: 150px; /* Set the default sidebar width */

}


/* Set a smaller base font size for the entire document */
html {
    font-size: 0.875rem; /* 14px as the base font size */
}

body {
    font-family: 'Open Sans', Arial, sans-serif; /* Multiple fallback fonts */
    font-size: 0.875rem;
    min-height: 75rem;
    padding-top: 2rem;
    background-color: var(--neutral-color);
    color: var(--text-color);
}

/* puts the website at the top of the screen */
html, body {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 1rem !important; /* Reduce the top margin of the heading */
    text-align: center; /* Center-align the heading if that's desired */

}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5, h6 {
    font-size: 1.25rem;
    color: var(--secondary-color);
}

/* Base styles for alerts which are overriding bootstrap5 */
.alert {
    padding: 25px;
    border-radius: 4px; /* Rounded corners */
    margin-bottom: 20px; /* Space below each alert */
    font-size: 16px; /* Font size */
}

/* Success alert */
.alert.alert-success {
    background-color: rgba(185, 247, 185, 0.8); /* Light green background */
    color: #4CAF50; /* Dark green text */
    border-left: 4px solid #4CAF50; /* Left border */
}

/* Warning alert */
.alert-warning {
    background-color: rgba(242, 211, 161, 0.9); /* Light yellow background */
    color: #FFC107; /* Dark yellow text */
    border-left: 4px solid #FFC107; /* Left border */
}

/* Error alert */
.alert-error {
    background-color: rgba(243, 159, 153, 0.959); /* Light red background */
    color: #F44336; /* Dark red text */
    border-left: 4px solid #F44336; /* Left border */
}

/* Info alert */
.alert-info {
    background-color: rgba(133, 195, 246, 0.989); /* Light blue background */
    color: #2196F3; /* Dark blue text */
    border-left: 4px solid #2196F3; /* Left border */
}

/* Light theme adjustments */
.alert-light {
    background-color: rgba(255, 255, 255, 0.9); /* Light background */
    color: #333; /* Dark text */
}

/* Dark theme adjustments */
.alert-dark {
    background-color: rgba(0, 0, 0, 0.9); /* Dark background */
    color: #fff; /* Light text */
}


/* Additional styles for alert icons (if you use icons) */
.alert .icon {
    margin-right: 10px; /* Space between icon and text */
}

/* Optional: close button for alerts */
.alert .close {
    float: right; /* Align to the right */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Font weight */
    color: inherit; /* Inherit color from alert */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Optional utility class for centering and sizing alerts */
.alert-box {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.page-wrapper {
    padding: 20px; /* Adjust the padding as needed */
    margin: 0 auto;
    max-width: 1200px; /* Optional: limit the maximum width of the content */
}

.justify-left {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px; /* Optional: Space between the button and the text */
}

#inactiveJobsSection {
    margin-top: 1rem; /* Adjust the value as needed for more space */
}

/* Buttons */
.btn {
    border-radius: 4px; /* Consistent border radius for all buttons */
    line-height: 1.5; /* Consistent line height */
    margin-top: 10px; /* Maintain spacing */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    padding: 0.5rem 1rem; /* Standard padding */
    font-size: 1rem; /* Default font size */
    display: inline-block; /* Ensure buttons behave like inline blocks */
    transition: all 0.3s ease; /* Smooth transitions for changes */
}


.btn-group {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: flex-start; /* Align items to the start horizontally */
}

.btn-info-circle {
    width: 24px;
    height: 24px;
    padding: 0;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
}

/* Unified Button Styling */
.btn.btn-primary,
.btn.btn-secondary {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Primary button specifics */
.btn.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Secondary button specifics */
.btn.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    transition: background-color 0.3s; /* Smooth transition */
}

.btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;       /* Match .btn.btn-secondary */
    font-size: 1rem;
    font-weight: 500;              /* Optional, can remove if undesired */
    border: 1px solid #6c757d;
    color: #6c757d;
    background-color: transparent;
    border-radius: 8px;            /* Match .btn */
    line-height: 1.5;              /* Match .btn */
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background-color: #e9ecef;
    color: #343a40;
}


.btn-success {
    background-color: var(--success-color);
    color: #ffffff;
    border: none;
}

.btn-success:hover {
    background-color: var(--success-hover-color);
}


.btn-danger {
    background-color: var(--danger-color); /* Red */
    color: #ffffff;
    border: none;
}

.btn-warning:hover {
    background-color: var(--warning-hover-color);
    color: black;
}




.btn-light {
    background-color: var(--neutral-color);
    color: var(--text-color);
}

.add-job-button {

    padding: 0.25rem 0.5rem; /* Adjust padding for consistency */
    font-size: 0.875rem; /* Font size for smaller buttons */
    align-self: center; /* Align with the text */

}

.d-flex.align-items-end.mb-2 {
    margin-bottom: 0.5rem;
}

/* Container for the header and add jobs button */
.d-flex.align-items-center.justify-content-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Optional: Space between the button and the text */
}
.d-flex.align-items-center {
    gap: 10px; /* Adds space between the button and the text */
}

.delete-email-form i {
    color: #dc3545;
    transition: transform 0.2s ease;
}

.delete-email-form i:hover {
    transform: scale(1.2);
}


.filter-card {
    border: 1px solid var(--secondary-color); /* Set border color */
    border-radius: 5px; /* Rounded corners */
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    background-color: var(--neutral-color); /* Optional: background color */
    width: 100%; /* Make sure the card takes the full width */
}

.filter-card legend {
    font-size: 1.25rem; /* Adjust size as needed */
    padding: 0 10px; /* Add padding to create space on sides */
    font-weight: bold;
    color: var(--primary-color); /* Set text color */
    border-radius: 5px; /* Match the card's border radius */
    background: var(--neutral-color); /* Match background to card */
    position: absolute;
    top: -12px; /* Pull the legend up */
    left: 10px; /* Align it with the border */
    width: auto; /* Adjust the width to auto */
    display: inline-block; /* This prevents it from taking the full width */
    margin-bottom: 10px; /* Add some space below the legend */;
}

/* Specific styles for filter buttons */
.clear-filter-button {
    padding: 0.25rem 0.5rem; /* Small padding to match the compact look */
    font-size: 0.875rem; /* Font size to match other small buttons */
    display: inline-block;
    vertical-align: middle;
    border-radius: 0.25rem; /* Slightly rounded corners */
}

/* Custom Labels */
.custom-label {
    font-size: 0.9rem; /* Adjust label font size */
    font-weight: bold; /* Make labels bold */
    color: var(--text-color); /* Use a defined text color */
    margin-bottom: 5px; /* Space below labels */
}

.dropdown-indicator {
    font-size: 0.8rem; /* Slightly smaller than the label text */
    margin-left: 5px; /* Space between the label and indicator */
    vertical-align: middle; /* Align with the label */
}

/* Container holding the filter form and its dropdowns */
.filter-container {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping initially */
    align-items: flex-start; /* Align items Vertically */
    justify-content: space-between; /* Center elements horizontally on large screens */
    gap: 10px;
}

.filter-form {
    align-items: center;
    background-color: var(--neutral-color); /* Light gray background */
    border-radius: 5px; /* Rounded corners */
    box-shadow: none; /* Subtle shadow */
    border: none; /* Border for separation */
    display: flex;
    flex-wrap: wrap; /* allow wrapping on small screens */
    font-size: 0.9rem; /* Make the filter form a bit smaller */
    gap: 10px; /* space between elements */
    margin-bottom: 0; /* Remove default bottom margin */
    padding: 0; /* Adjusted padding to fit the compact design */
    transition: transform 0.3s ease; /* Smooth transition for filter form */

}
.filter-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}
/* Ensure all labels and controls are aligned properly */
.filter-form .custom-label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block; /* Make sure labels appear above the inputs */
    font-size: 0.9rem;
}

.filter-form:hover {
    transform: scale(1.02); /* Slightly scale up on hover */
}

.filter-form h2 {
    font-size: 1.5rem; /* Increase heading size */
    margin-bottom: 20px; /* Space below heading */
}

.filter-form .form-control {
    border-radius: 4px; /* Rounded corners for inputs */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    margin-bottom: 10px; /* Space below each input */
    width: 100%;
}

/* Add focus styles */
.filter-form .form-control:focus {
    border-color: var(--accent-color); /* Change border color on focus */
    box-shadow: 0 0 5px var(--accent-color); /* Subtle shadow on focus */
    outline: none; /* Remove default outline for a cleaner look */
}


.filter-form button {
    margin-top: 10px; /* Space above the button */
    transition: background-color 0.3s; /* Smooth transition for hover */
}

.filter-form button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    color: #ffffff; /* Change text color on hover */
}


.filter-form .row {
    margin-bottom: 0; /* Remove bottom margin to keep them in a single line */
    flex-wrap: nowrap; /* Prevent the row from wrapping */
}

.filter-form .dropdown-indicator {
    margin-left: 5px; /* Space between label and indicator */
}

/* Space out checkboxes and labels properly */
.filter-form .form-check-label {
    font-size: 0.9rem;
    margin-left: 5px;
}
/* Checkboxes */
/* Scoped to only .filter-form or your checkbox sections */
.filter-form input[type="checkbox"],
#roles-container input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.filter-form input[type="checkbox"]:checked::after,
#roles-container input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Checkbox styles */
.filter-form, .form-select-sm,
.form-check-input, .filter-button {
    margin-right: 6px; /* Space between checkbox and label */
    vertical-align: middle; /* Align dropdowns and checkboxes with button */
}

/* General styling for the legend to handle layout */
.inline-legend {
    display: inline-flex;  /* Flex layout for the legend content */
    align-items: center;   /* Vertically align button and text */
    gap: 8px;              /* Add space between text and button */
    margin-bottom: 0;      /* Remove any bottom margin to keep things aligned */
}

/* Custom button styling for the info icon */
.btn-info-icon {
    background-color: transparent;              /* No background */
    border: 1px solid var(--info-icon-color);   /* Thin border using a custom color */
    color: var(--info-icon-color);              /* Icon color */
    font-size: 0.75em;                          /* Font size suitable for readability */
    padding: 0;                                 /* Remove padding for inline appearance */
    line-height: 1;                             /* Set line height to avoid inconsistencies */
    cursor: pointer;                            /* Pointer cursor to indicate it's clickable */
    border-radius: 50%;                         /* Create a perfect circle shape */
    width: 18px;                                /* Fixed width for consistent circular size */
    height: 18px;                               /* Fixed height for consistent circular size */
    display: inline-flex;                       /* Ensure it behaves like an inline element */
    align-items: center;                        /* Vertically center the icon */
    justify-content: center;                    /* Horizontally center the icon */
    box-sizing: border-box;                     /* Include border in width/height calculations */
    outline: none;                              /* Remove default focus outline */
}

/* Add a hover effect for better user interaction feedback */
.btn-info-icon:hover {
    color: var(--info-icon-hover-color); /* Darken the color on hover for better visibility */
}



#div_id_specialties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    width: 100%;
    align-items: start;
}

.specialties-checkboxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

/* Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Toggle Switch - Replaces checkbox with modern UI */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 1px var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.toggle-switch:hover .toggle-slider {
    background-color: #b3b3b3;
}

.toggle-switch input:checked:hover + .toggle-slider {
    background-color: var(--accent-color);
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Badges */
.badge-primary {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* Borders and Cards */
.bookcover {
    height: 300px;
    width: auto;
}

.border-field {
    text-align: center;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 1rem;
}

.card {
    background-color: var(--neutral-color);
    border: 1px solid var(--secondary-color);
    box-sizing: border-box;     /* Ensures padding and borders included in element’s total width.*/
    max-width: 100%;
    overflow-wrap: anywhere;  /* Ensure long words break to avoid overflow */
    word-wrap: break-word;      /* Legacy support */
    word-break: break-all;     /* Break words to fit */
    padding: 1.5rem;            /* Provide padding to keep text away from the edge */
    overflow: hidden;
    margin: 0 auto;             /* Center the card horizontally */
}
.card-text {
    overflow-wrap: anywhere;  /* Break long words or URLs */
    word-wrap: break-word;      /* Legacy support */
    word-break: break-all;     /* Break words */
    white-space: normal;        /* Allow normal wrapping of content */
}

hr.section-divider {
    border: none;
    height: 2px;               /* Thicker line */
    background-color: #888;    /* Slightly darker gray */
    opacity: 1;                /* Full opacity */
    margin: 1.5rem 0;          /* More vertical spacing */
}


/* Phone Inputs */
input[type="text"]#id_cell_phone,
input[type="text"]#id_office_phone {
    border: 2px solid var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
/* Style all placeholder text for relevant input types */
input::placeholder, 
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder {
    color: var(--placeholder-color); /* Light grey color */
    font-style: italic; /* Italic styling */
    opacity: 0.7; /* Ensure the placeholder is fully visible */
}

.phone-number a {
    color: inherit; /* Keeps the text color */
    text-decoration: underline; /* Underlines the link */
    display: inline; /* Ensure the link appears inline */
}

.phone-number a:hover {
    color: var(--phone-hover-color); /* Changes color on hover (optional) */
}

#roles-container .form-check input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}

#roles-container .form-check {
    display: flex;
    align-items: center;
}

#roles-container .form-check-label {
    margin-left: 0.5rem;
}

/* Style the container of the dropdown and input field */
.phone-number-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Adjust spacing between dropdown and input */
}

/* Style the dropdown (country code selector) */
.phone-number-container select {
    flex: 0 1 auto;
    width: 120px; /* Initial width */
    max-width: 250px; /* Maximum width when expanding */
    transition: width 0.3s ease; /* Smooth animation on focus */
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    background-color: var(--bs-white, #fff);
    box-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

/* Expand the dropdown on focus */
.phone-number-container select:focus {
    width: 200px; /* Expand width on focus */
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Style the text input for phone number */
.phone-number-container input {
    flex: 1 1 auto;
    width: 100%; /* Use remaining space */
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-white, #fff);
    box-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    placeholder-color: var(--placeholder-color, #6c757d);
}

/* Placeholder text styling */
.phone-number-container input::placeholder {
    color: var(--placeholder-color, #6c757d);
    font-style: italic;
}

/* On focus, style the text input */
.phone-number-container input:focus {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Textarea */
textarea {
    height: auto;
    min-height: 50px;
    max-height: 300px;
    overflow: auto;
    resize: vertical;
}

/* Job Description Field Styling */
textarea#id_description.job {
    width: 100%;
    max-width: 100%;  /* Ensure the textarea doesn’t grow beyond the card width */
    overflow-wrap: anywhere;
    word-wrap: break-word; /* legacy support */
    word-break: break-all; /* Will ensure words break to avoid overflow */
    box-sizing: border-box;  /* Include padding and border in the width calculations */
    padding: 1rem;  /* Padding for better readability */
    resize: vertical;  /* Allow users to resize vertically but not horizontally */
    min-height: 100px; /* Provide a minimum height for better UX */
}

textarea#id_description.job-description-field {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
    word-wrap: break-word; /* legacy support */
    word-break: break-all;
    padding: 8px;
    margin: 0;
    resize: vertical;
}

.apply-button-floating {
    position: fixed;          /* Make the button fixed in the viewport */
    right: 20px;              /* Distance from the right side of the viewport */
    bottom: 20px;             /* Distance from the bottom side of the viewport */
    z-index: 1000;            /* Ensure it appears above other elements */
    padding: 10px 20px;       /* Button padding */
    font-size: 1rem;          /* Button font size */
    background-color: var(--primary-color); /* Use your primary color */
    color: #ffffff;           /* Text color */
    border: none;             /* Remove border */
    border-radius: 5px;       /* Add border radius for rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition */
}

.apply-button-floating:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); /* Deepen shadow on hover */
}



/* Facility Description Section Adjustments */
.facility-description-section .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.facility-description-section .col-12,
.facility-description-section .col-sm-12 {
    flex: 1 1 100%; /* Default to full width for small screens */
}


.facility-description-section .col-md-6 {
    flex: 1 1 48%; /* Take about 48% width for medium and larger screens */
    max-width: 48%; /* Constrain maximum width */
    box-sizing: border-box; /* Ensure padding and borders are included in the width */
}

/* Ensure proper text handling for description field */
.job-description-field {
    width: 100%;           /* Ensure it takes up full width of its container */
    max-width: 100%;       /* Prevent it from exceeding container width */
    box-sizing: border-box; /* Include padding and borders in the width calculation */
    overflow-wrap: anywhere; /* Ensure long words break to avoid overflow */
    word-wrap: break-word;     /* Legacy support */
    word-break: break-all;    /* Break words if necessary to prevent overflow */
    padding: 1rem;             /* Provide padding to keep text away from the edge */
    resize: vertical;          /* Allow the user to resize vertically only */
}

.job-description-section {
    max-width: 100%;
    overflow-wrap: anywhere;  /* Ensure long words break to avoid overflow */
    word-wrap: break-word;      /* Legacy support */
    word-break: break-all;     /* Break words to fit */
    padding: 1rem;              /* Add padding to keep text away from the edges */
    box-sizing: border-box;
}

.job-description-text {
    overflow-wrap: anywhere;  /* Ensure long words break properly */
    word-wrap: break-word;      /* Legacy support */
    word-break: break-all;     /* Break words to fit */
    padding: 0.5rem;            /* Ensure proper spacing inside the textarea */
    white-space: normal;        /* Allow normal text wrapping */
}

/* Job Parameters Section */
.job-details, .compensation-benefits {
    text-align: left;
}

.job-parameter-small {
    width: auto;
    display: inline-block;
}

.job-parameter-wide {
    width: 100%;
    display: inline-block;
}


/* Floating Button Within Card - Sticky to Bottom Right */
.update-button-floating {
    position: fixed;          /* Make the button fixed in the viewport */
    right: 20px;              /* Distance from the right side of the viewport */
    bottom: 20px;             /* Distance from the bottom side of the viewport */
    z-index: 1000;            /* Ensure it appears above other elements */
    padding: 10px 20px;       /* Button padding */
    font-size: 1rem;          /* Button font size */
    background-color: var(--primary-color); /* Use your primary color */
    color: #ffffff;           /* Text color */
    border: none;             /* Remove border */
    border-radius: 5px;       /* Add border radius for rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition */
}



/* Ensure the card container is positioned relatively */
.job-post-card {
    position: relative;
    overflow: visible; /* Ensure the button doesn't escape the card */
}




/* Navbar & Footer */
.navbar, .footer {
    background-color: var(--primary-color);
    color: #ffffff;
}

.footer {
    padding: 20px;
    text-align: center;
}

/* NAVBAR SECTION */
.navbar {
    padding: 1rem; /* No extra navbar padding */
    height: auto;  /* Set a fixed height if necessary */
}


.navbar a, .footer a {
    color: #ffffff;
    text-decoration: none;
}

.navbar a:hover, .footer a:hover {
    color: var(--highlight-color);
}

.navbar-brand {
    font-size: 1.25rem;
    color: #fff;
    margin-right: 20px;
}

.navbar {
    padding: 0; /* No extra navbar padding */
}

.navbar-toggler {
    order: 3; /* Ensure it's on the right after the brand */
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    list-style-type: none; /* Removes bullets */
    padding-left: 0;
    margin-left: auto; /* Align navigation items to the right if needed */

}

.navbar .container-fluid {
    display: flex;
    justify-content: space-between; /* Ensure space between brand and other elements */
    align-items: center; /* Center everything vertically */
    flex-wrap: nowrap; /* Prevent wrapping */
}

.navbar .navbar-text {
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    max-width: 100%; /* Adjust this as needed */
}


.nav-item {
    margin-right: 20px; /* Adjusts spacing between items */
}

.nav-link {
    color: white;
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: underline;
}

/* Override alignment for specific sections */
.left-align {
    text-align: left;
}

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

/******** profile photo css *******/
.overlay-hidden {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    pointer-events: none; /* So it doesn't block other interactions */
    z-index: 10; /* Ensures it's layered above the image */
    text-align: center;
}

/* Profile Photo Container Styles */
.profile-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.profile-photo-container {
    display: inline-block;
    width: 150px;
    height: 150px;
    position: relative;
}

/* Placeholder for when no profile photo is available */
.default-profile-placeholder {
    width: 100% !important;
    height: 100% !important;
    background-color: #f0f0f0 !important; /* Light gray background */
    border: 2px solid #007bff !important; /* Blue border */
    border-radius: 10px !important; /* Rounded corners */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-size: 14px !important; /* Font size for the placeholder text */
    color: #999 !important; /* Placeholder text color */
}




/* Profile Image Styles */
.profile-img {
    max-width: 150px; /* Ensure the image doesn't exceed container width */
    max-height: 150px; /* Ensure the image doesn't exceed container height */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners if desired */
}

/* Icons for editing and hiding profile photo */
.profile-edit-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px; /* Space between the icons */
}

.profile-edit-icons a {
    color: #007bff; /* Blue color for the icon links */
}

.profile-info {
    margin-left: 20px;
}
/* Styles for the sort-header class */
.sort-header {
    color: var(--th-color) !important; /* Font color */
    text-decoration: none; /* Remove underline */
    display: inline-flex; /* Align icon and text */
    align-items: center; /* Center vertically */
    padding: 0.5rem; /* Space around the link */
}


.sort-header:hover {
    color: var(--highlight-color); /* Change color on hover */
    text-decoration: underline; /* Underline on hover for better UX */
}



.edit-link {
    color: var(--primary-color); /* Default blue link color */
    font-weight: bold; /* Make the link more prominent */
    text-decoration: underline; /* Ensure it remains underlined */
}

.edit-link:hover {
    color: var(--link_hover_color); /* Change to your preferred hover color */
    text-decoration: none; /* Optional: Remove underline on hover */
}

.scrolling-region {
    max-height: 200px; /* Adjust height as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border for better visual clarity */
    padding: 10px; /* Optional: Add some padding for spacing */
    background-color: #f9f9f9; /* Optional: Add a subtle background color */
    border-radius: 5px; /* Optional: Rounded corners */
}

/* Compact table row height */
table.compact-table tbody tr {
    height: 40px; /* Adjust this value as needed */
}

table.compact-table td {
    vertical-align: middle; /* Align content vertically to the center */
    padding: 8px; /* Reduce padding for compactness */
}

/* SIDEBAR / OFFCANVAS CSS SECTION */

.offcanvas-title {
    white-space: nowrap; /* Prevent text from wrapping */
    transform: rotate(0); /* Ensure no rotation happens */
}

/* Sidebar Toggler Button for offcanvas (visible on smaller screens) */
.sidebar-toggler {
    position: fixed;
    top: 56px; /* Just below the navbar */
    left: 10px; /* Adjust left/right as needed */
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 1rem; /* Increase size for better touch target */
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    z-index: 1100; /* Ensure it's above other content */
    transition: all 0.3s ease;
    display: none; /* Hidden by default, will be shown in media query for small screens */
}

/* Tooltip on hover - shows help text */
.sidebar-toggler:hover::after {
    content: "Show Nav Menu"; /* Tooltip text */
    position: absolute;
    top: -35px; /* Adjust as needed to position the tooltip above */
    left: 0;
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
    visibility: visible; /* Only visible when hovering over the icon */
}

/* Make sure the tooltip text is hidden initially */
.sidebar-toggler::after {
    visibility: hidden; /* Tooltip is hidden by default */
}

/* Offcanvas Sidebar for both large and small screens */
#sidebar-wrapper {
    position: fixed;
    top: 56px; /* Below the navbar */
    left: 0;
    z-index: 1000; /* Ensure it's above the content */
    width: var(--sidebar-width); /* Set width for large screens */
    height: 100%; /* Full height */
    background-color: var(--neutral-color); /* Maintain theme */
    transition: transform 0.3s ease; /* Smooth transition for sidebar sliding in/out */
    transform: translateX(0); /* Sidebar visible by default */
}

/* Initially, hide the sidebar offscreen for small screens */
#sidebar-wrapper {
    transform: translateX(0); /* Sidebar hidden by default (offscreen) */
}

/* Offcanvas Active State (when sidebar is open) */
#sidebar-wrapper.show {
    transform: translateX(0); /* Sidebar slides in */
}

/* Main Content Adjustment when Sidebar is offcanvas */
#main-content {
    transition: margin-left 0.3s ease;
    padding: 1rem; /* Add padding to ensure content is not cut off */
}

/* When the sidebar is shown, shift the main content */
#main-content.shifted {
    margin-left: var(--sidebar-width); /* Push content to the right to make space for the sidebar */
}

/* Dashboard-specific button adjustments */
.dashboard .btn {
    font-size: 0.9rem; /* Slightly smaller buttons for the dashboard */
    background-color: var(--secondary-color); /* Dashboard-specific button color */
}


/* Main Content Adjustment - esp in Dashboards*/
#main-content {
    display: block;
    visibility: visible;
    margin-left: 10%; /* Align with sidebar width */
    transition: all 0.3s ease;
    
}

#main-content.full-width {
    margin-left: 0; /* Adjust when sidebar is hidden */
    z-index: 100; /* keep it lower than the hamburger (.sidebar-toggler) */
}



.container-fluid .row > .col-10 {
    width: 85%; /* Ensure the main content takes up the remaining space */
    margin-left: auto; /* Push it to the right of the sidebar */
    padding: 1rem; /* Add padding to main content for better spacing */
}


/* Pagination */
.paginator-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0;
    background-color: #fff;
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid #ddd;
}

.pagination {
    margin: 0;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    display: flex;
    gap: 0.5rem;
}

#rowsPerPage {
    max-width: 75px;
    font-size: 0.85rem;
    line-height: 1.2;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    margin-right: 1rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    appearance: none;
    position: relative;
}

#rowsPerPage::after {
    content: "▼";
    font-size: 0.8rem;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* TABLE SECTION */
/* === Tables === */
.table {
    background-color: transparent; /* Ensure no background override */
    border-collapse: collapse; /* Collapse table borders */
    color: #212529; /* Ensure text is readable */
    margin-bottom: 1rem;
    width: 100%;
}

.table .btn, .table-button {
    font-size: 0.85rem; /* Match font size with table text */
    margin-right: 2px; /* Space between buttons */
    padding: 0.25rem 0.5rem; /* Compact button padding */
    white-space: nowrap; /* Prevent button text wrapping */
    width: auto; /* Allow button width to adjust based on content */
}

.table-body td {
    font-size: 0.85rem; /* Adjust font size for smaller text */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for truncated text */
    white-space: nowrap; /* Prevent wrapping */
}

.table td {
    padding: 0.5rem; /* Consistent cell padding */
    text-align: left; /* Default left alignment */
    vertical-align: middle; /* Vertically center content */
}

.table td.specialties {
    max-width: 200px; /* Control column width */
    text-align: left;
    white-space: normal; /* Allow text wrapping */
    word-wrap: break-word; /* Break long words */
}

.table thead th {
    background-color: var(--primary-color); /* Deep blue background */
    border-bottom: 2px solid #ddd; /* Visible boundary for headers */
    color: var(--th-color) !important; /* Light gray text */
    padding: 10px; /* Spacing inside headers */
    position: sticky; /* Sticky headers during scrolling */
    text-align: center; /* Center align header text */
    text-transform: uppercase; /* Optional: make text uppercase */
    top: 32px; /* Adjust to sit below the navbar */
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 10; /* Keep headers above content */
}

.table thead th a {
    align-items: center; /* Vertically center items */
    color: #ffffff !important; /* White link color */
    display: inline-flex; /* Align text and sorting icon */
    justify-content: space-between; /* Space between text and icon */
    text-decoration: none; /* Remove underline */
}

.table thead th a:hover {
    color: var(--highlight-color); /* Light yellow on hover */
    text-decoration: underline; /* Optional: add underline */
}

.table thead th i {
    font-size: 0.75rem; /* Adjust icon size */
    margin-left: 5px; /* Space between text and icon */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe-color); /* Light stripe color */
}

.table-striped tr.bg-danger {
    background-color: var(--danger-background-color) !important; /* Red background */
    color: var(--danger-color) !important; /* Red text */
}

.center-last-five td:nth-last-child(-n+5) {
    text-align: center;
}

.table-responsive {
    height: 400px; /* Max height for scrolling */
    margin: 0; /* Remove extra margins */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 0; /* Remove extra padding */
    position: relative;
}

.table-heading {
    margin-bottom: 0.5rem; /* Reduce margin below heading */
    padding-bottom: 0; /* Remove padding below heading */
}

/* TOOLTIP SPECIFIC */

/* Proper Bootstrap tooltip styling */
.tooltip-inner {
    background-color: #333 !important;  /* Dark tooltip background */
    color: #fff !important;  /* White text */
    font-size: 0.95rem !important;  /* Adjust size */
    padding: 6px 10px !important;
    border-radius: 5px !important;
}

/* Ensure the tooltip arrow matches the background */
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #333 !important;  /* Match tooltip background */
}

/* Improve positioning of the tooltip */
.tooltip.show {
    opacity: 1 !important;
}

/* MEDIA SPECIFIC */

/* Media Queries */
@media (max-width: 1024px) {
    #div_id_specialties,
    .specialties-checkboxes {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    /* Large screen sidebar layout - set at 992px */

    .facility-description-section .col-lg-6 {
        flex: 1 1 48%;
        max-width: 48%;
    }

    #sidebar-wrapper {
        width: var(--sidebar-width);  /* Sidebar width for larger screens */
        position: fixed;
        top: 56px; /* Below navbar */
        left: 0;
        z-index: 1000;
        height: 100%; /* Full height */
        background-color: var(--neutral-color);
    }

    /* Ensure the sidebar stays in view */
    #sidebar-wrapper.show {
        transform: translateX(0); /* Keep it visible */
    }

    /* Make sure the sidebar toggler is hidden on larger screens */
    .sidebar-toggler {
        display: none; /* Hide the hamburger icon */
    }

    /* Main content should not shift on larger screens */
    #main-content {
        margin-left: 10%; /* Space for the sidebar */
    }
}


@media (max-width: 991px) and (min-width: 768px) {
    .facility-description-section .col-lg-6 {
        flex: 1 1 100%;
        max-width: 100%;
    }

     /* Show the sidebar */
    #sidebar-wrapper {
        transform: translateX(0); /* Keep it visible */
        width: var(--sidebar-width); /* Use variable for width */
        position: fixed;
        top: 56px; /* Below navbar */
        left: 0;
        z-index: 1000; /* Ensure it stays on top */
        height: 100%;
        background-color: var(--neutral-color);
        transition: transform 0.3s ease; /* Smooth transition */
    }

    /* Show the sidebar toggler (hamburger menu) */
    .sidebar-toggler {
        display: block; /* Make the toggler visible */
    }

    /* Adjust main content for sidebar presence */
    #main-content {
        margin-left: 10%; /* Shift main content when sidebar is visible */
    }

}


@media (min-width: 769px) {
    h1 {
        font-size: 2.5rem;
    }
    table {
        font-size: 1.2rem;
    }

    .navbar-collapse {
        display: flex !important; /* Display expanded menu */
    }
    .navbar-toggler {
        display: none !important; /* Hide the hamburger icon */
    }
    
}

/* Media Queries to Handle Smaller Viewports */
@media (max-width: 768px) {
    /* Specialties Grid */
    #div_id_specialties, .specialties-checkboxes {
        grid-template-columns: repeat(2, 1fr);
        justify-items: start;
        text-align: left;
        font-size: 0.9rem;
        box-sizing: border-box;
    }

    button[type="submit"] {
        font-size: 0.9rem;
        padding: 10px;
    }

    form {
        padding: 15px;
    }

    form h2 {
        font-size: 1.75rem;
    }

    form label {
        font-size: 1rem;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.25rem;
    }

    /* Tables */
    table {
        font-size: 1rem;
    }

    /* Buttons */
    .btn-primary {
        width: 100%; /* Make the button full-width for smaller screens */
    }

    .btn {
        font-size: 0.85rem; /* Slightly smaller font size */
        padding: 0.4rem 0.8rem; /* Reduce padding */
        white-space: nowrap; /* Prevent text from wrapping mid-button */
        overflow: hidden; /* Prevent overflow */
        text-overflow: ellipsis; /* Add ellipsis for long text */
    }



    /* Button Responsive Adjustments */
    .btn-responsive {
        font-size: 1rem; /* Adjust font size to fit better */
        padding: 0.5rem 1rem; /* Reduce padding to make text fit */
    }

    .card {
        margin-bottom: 1rem; /* Add spacing between cards */
    }

    /* Filter Container */
    .filter-container {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        flex-direction: column; /* Stack items vertically */
        justify-content: flex-start; /* Align items to the start */
        align-items: stretch; /* Allow items to take full width */
    }

    .filter-form {
        flex-direction: column; /* Stack all elements vertically */
        align-items: stretch; /* Make them take the full width */
    }

    /* Filter Form Buttons */
    .filter-form .btn {
        flex-shrink: 0; /* Prevent buttons from shrinking */
    }

    /* Row inside Filter Form */
    .filter-form .row {
        flex-direction: column; /* Stack vertically on small screens */
        align-items: center; /* Center all elements within the row */
    }

    /* Columns inside Filter Form */
    .filter-form .col, 
    .filter-form .col-auto {
        flex: 0 0 auto; /* Prevent columns from expanding to full width */
        max-width: fit-content; /* Only take as much space as needed */
    }

    /* Form Controls */
    .filter-form .form-control,
    .filter-form .form-select {
        flex: 1; /* Allow dropdowns to take equal space */
        min-width: 100%; /* Make sure they are full width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .filter-form .form-select-sm {
        min-width: 180px; /* Ensures dropdowns are wide enough */
    }

    /* Vertical alignment for filter elements */
    .filter-form .form-select-sm, 
    .form-check-input, 
    .filter-button {
        vertical-align: middle; /* Align dropdowns and buttons vertically */
    }

    .form-buttons .btn {
        max-width: 100%;        /* Full width on mobile */
    }

    .form-row {
        flex-direction: column; /* Stack the inputs vertically on small screens */
    }

    .form-row .form-control {
        width: 100%; /* Make the inputs full width on smaller screens */
    }

    /* Job Description Section */
    .job-description-section {
        padding: 0.75rem;
    }

    /* Floating Button Adjustments */
    .update-button-floating {
        bottom: 15px;
        right: 15px;
        padding: 8px 15px;
    }

    .container-fluid .row > .col-10 {
        width: 100%; /* Main content takes full width */
        margin-left: 0; /* Align properly with the sidebar */
        padding: 0.5rem; /* Reduce padding for smaller screens */
    }

    /* Sidebar toggler is visible only on small screens */
    .sidebar-toggler {
        display: block; /* Make the button visible on small screens */
    }

    /* Sidebar layout for small screens */
    #sidebar-wrapper {
        width: var(--sidebar-width); /* Set width for small screens */
        position: fixed;
        top: 56px; /* Below the navbar */
        left: 0;
        z-index: 1000;
        height: calc(100vh - 56px); /* Full height minus navbar */
        background-color: var(--neutral-color); /* Maintain theme */
        transition: transform 0.3s ease; /* Sidebar sliding effect */
        transform: translateX(-100%); /* Initially hidden offcanvas effect */
    }

    /* Offcanvas Active State - make it visible when toggled */
    #sidebar-wrapper.show {
        transform: translateX(0); /* Sidebar slides in */
    }

    /* Main content adjustment when sidebar is offcanvas */
    #main-content {
        margin-left: 10px; /* No need to shift content for small screens */
        width: 100%;
    }

    /* When sidebar is open on small screens, shift the main content */
    #main-content.shifted {
        margin-left: 10px; /* No shift needed for small screens */
    }
}

@media (max-width: 576px) {
    .facility-description-section .col-md-6 {
        flex: 1 1 100%; /* Full width to avoid overlapping at very small screen sizes */
        max-width: 100%;
    }
    textarea#id_description.job-description-field {
        padding: 4px;  /* Reduce padding for smaller screens */
        margin: 0;     /* Ensure no extra margin */
    }
    textarea#id_description {
        margin-left: 0;         /* Align the field to the left */
        max-width: 100%;        /* Prevent exceeding the container width */
        padding: 0.5rem;        /* Reduce padding for small screens */
        box-sizing: border-box; /* Include padding and border in width calculations */
        width: calc(100% - 2rem); /* Leave some space on the right side to prevent overflow */
    }
    .job-description-section {
        max-width: 100%;
        box-sizing: border-box; /* Include padding/border in total width calculation */
        padding: 8px; /* Reduce padding to ensure it fits within the card */
    }
    .card {
        padding: 0.5rem;  /* Reduce padding to prevent any field overflow */
        margin-left: 0;   /* Align the card to the left for smaller screens */
        margin-right: 0;
    }
    /* Center align buttons within cards */
    .card .btn {
        display: block; /* Ensure buttons take the full width if needed */
        margin: 0 auto; /* Center horizontally */
        text-align: center;
    }

    .container-fluid .row > .col-10 {
        padding: 0.5rem; /* Reduce padding for small screens */
    }

    /* Optional: Adjust font sizes for smaller screens */
    body {
        font-size: 0.85rem;
    }
    .btn {
        font-size: 0.8rem; /* Smaller font size for smaller devices */
        padding: 0.3rem 0.6rem; /* Compact padding */
    }
}
/* Media query for dark mode */
@media (prefers-color-scheme: dark) {
    .alert {
        background-color: rgba(0, 0, 0, 0.9); /* Adjust for dark mode */
        color: #fff; /* Light text */
    }
}

/* Add to bottom of base.css */

/* GLOBAL CHECKBOX STYLING (Modern + Mobile-friendly) */
input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 6px;
}

input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

input[type="checkbox"]:hover {
    box-shadow: 0 0 4px rgba(0, 64, 133, 0.4);
}

/* SCALING FOR SMALLER DEVICES */
@media (max-width: 576px) {
    input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}

/* Improve alignment of checkbox with labels */
label > input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}

/* General form styles */
form {
    background-color: #ffffff;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* Form Section Headers (Increase font size & contrast) */
form h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
    text-transform: uppercase; /* All caps for modern look */
}

/* Labels for inputs */
form label {
    font-size: 1.125rem; /* Larger label font */
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block; /* Makes sure label is above input */
}

/* Textarea styling */
.custom-textarea {
    border-radius: 8px; /* Rounded corners */
    border: 2px solid var(--secondary-color);
    padding: 12px;
    transition: border-color 0.3s ease;
    resize: vertical; /* Allow vertical resizing */
}

/* Focus state for textareas */
.custom-textarea:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
}

/* Input fields styling */
.custom-input {
    border-radius: 8px; /* Rounded corners */
    border: 2px solid var(--secondary-color);
    padding: 12px;
    width: 100%;
    transition: border-color 0.3s ease;
}

/* Focus state for inputs */
.custom-input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
}

/* Combine patients per day and RVUs per year into one row */
.form-row {
    display: flex;
    gap: 20px; /* Space between inputs */
    flex-wrap: wrap;
}

.form-row .form-control {
    width: 48%; /* Take up 48% of the row for each input */
}


button[type="submit"]:hover {
    background-color: var(--accent-color);
    cursor: pointer;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); /* Deepen shadow on hover */
}


/* Spacing between sections */
form .form-group {
    margin-bottom: 20px;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;  /* Allows mobile friendliness */
}

.form-buttons .btn {
    margin: 0;
    line-height: 1.2;
    padding: 0.5rem 1.5rem;
    white-space: normal;  /* Let text wrap naturally */
    border-radius: 8px;         /* Match your input fields */
    padding: 0.5rem 1.5rem;     /* Consistent padding */
    min-width: 120px;
    max-width: 200px;           /* Looks good on desktop */

}

textarea.form-control::placeholder {
    color: var(--placeholder-color) !important;
    font-style: italic !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    opacity: 0.7 !important;
}

/* === Sidebar Final Polish (2025-10 Update) === */
.offcanvas-body {
  overflow-y: auto;
  max-height: 100vh;
}

body.offcanvas-open {
  overflow: hidden;
}

.sidebar-heading {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  color: var(--primary-color);
}

/* --- Sidebar visibility fix for Bootstrap offcanvas --- */
/* Keep sidebars visible on desktop, offcanvas on mobile */
@media (min-width: 768px) {
  .offcanvas.offcanvas-start {
    visibility: visible !important;
    transform: none !important;
    position: static !important;
    border-right: 1px solid #dee2e6; /* subtle separator */
  }
}

/* -------------------------------------------------------------------------- */
/* Unread Message Highlight Styles (Comms Threads) */
/* -------------------------------------------------------------------------- */

.bg-light-subtle {
  background-color: #fff8e1 !important; /* Warm gold background for unread messages */
}

.border-warning {
  border-color: #ffc107 !important; /* Bootstrap warning tone for visual consistency */
}

/* Form spacing consistency */
.form-check {
  margin-bottom: 0.25rem !important;
}

/* Message bubble transitions */
.thread-message {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Thread filter form tweaks */
#thread-filter-form .form-check-label {
  font-size: 0.85rem;
  color: var(--secondary-color);
}

#thread-filter-form .form-check-input {
  cursor: pointer;
}

/* Sidebar thread list hover polish */
.hover-bg-light:hover {
  background-color: #f9fafc !important;
  transition: background-color 0.25s ease;
}

/* Active thread highlight bar */
.bg-white.fw-semibold {
  box-shadow: inset 3px 0 0 var(--primary-color);
}

/* -------------------------------------------------------------------------- */
/* Animated pulse for unread badges (sidebar only) */
/* -------------------------------------------------------------------------- */
@keyframes unreadPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Restrict animation to comms sidebar badges only */
#thread-list .badge.bg-danger {
  animation: unreadPulse 2s infinite ease-in-out;
}

/* -------------------------------------------------------------------------- */
/* Smooth fade when viewing a new thread (Phase-2 polish) */
/* -------------------------------------------------------------------------- */
.thread-messages {
  animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------- */
/* Thread sidebar scrollbar styling (cross-browser) */
/* -------------------------------------------------------------------------- */

.col-md-4 {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

.col-md-4::-webkit-scrollbar {
  width: 6px;
}

.col-md-4::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.col-md-4::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.4);
}

/* WhatsApp-style read checkmarks */
.bi-check2,
.bi-check2-all {
  font-size: 0.9rem;
  vertical-align: middle;
  transition: transform 0.25s ease, color 0.25s ease;
}

.bi-check2-all.text-success {
  transform: scale(1.05);
}

.bi-check2-all.text-primary {
  transform: scale(1.1);
  filter: drop-shadow(0 0 1px rgba(0, 123, 255, 0.5));
}

/* Static unread dot for sidebar thread list */
.thread-list .unread-dot {
  width: 6px;
  height: 6px;
  background-color: #ffc107;
  border-radius: 50%;
  animation: none;
  box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/* Dark mode adjustments */
/* -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .bg-light-subtle {
    background-color: #3a2f00 !important; /* darker unread message background */
  }

  .hover-bg-light:hover {
    background-color: #2d2d2d !important; /* darker hover for dark mode */
  }
}

/* END OF FILE */