/* Import Google Fonts - Roboto for modern typography */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');


/* For Webkit browsers (Chrome, Safari, Edge) */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px; /* Sets the width of the vertical scrollbar */
    height: 8px; /* Sets the height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* =================================================== */
/* ---      General Body and Container Styles      --- */
/* =================================================== */

.arabic-text-input {
    font-family: 'Cairo', 'Roboto';
    direction: rtl; /* Right-to-left direction for Arabic */
    text-align: right; /* Align text to the right */
    box-sizing: border-box; /* THIS IS KEY for consistent sizing */
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 8px;
    height: 35px;
}

.arabic-text-label {
    font-family: 'Cairo', 'Roboto';
    direction: rtl; /* Right-to-left direction for Arabic */
    text-align: right; /* Align text to the right */
    box-sizing: border-box; /* THIS IS KEY for consistent sizing */
    padding-top: 1px;
    padding-bottom: 0px;
    font-size: 8px;
    height: 22px;
}

:root {
    --primary-color: #1f324b; 
    --secondary-color: #f5f5ff;
    --tertiary-color: #fafaff;
    --text-color-primary: #1f324b;
    --text-color-secondary: #333;
    --text-grayedout:#727272;
    --border-color: #ececf7;
    --success-color: #28a745;
    --success-color-hover: #39c259;
    --error-color: #dc3545;
    --error-color-hover: #eb4e5e;
    --warning-color: #ffc107;
    --tab-color-hover: #ececf8;
    --tab-color-active: #e3e3f7;
    --table-border-color: rgb(211, 211, 211);
    --table-hover-color: rgb(211, 211, 211);
    --button-submit: #6a89cc;
    --button-submit-hover: #5172b8;
    --field-border: #dcdcdc;
    --border-focus: #8c9eff;
}

body {
    display: flex;
    flex-direction: column;
    align-content: center;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: #ffffff; /* Light gray background for the entire page */
    color: var(--primary-color); /* Default text color */
    padding-top: 80px; /* Space for the fixed header */
    line-height: 1.6; /* Improved line spacing for better readability */
    font-size: 16px; /* Base font size for body text */
    overflow-x: hidden; /* Prevent horizontal scrollbar from overflowing content */
    width: 100%;
}


.container {
    display: flex;
    flex-wrap: wrap; /* Allows children to wrap to the next line */
    justify-content: flex-start; /* Aligns children to the start of the container */
    align-items: center; /* Vertically centers children */
    gap: 10px; /* Provides space between elements */
    
    /* Retain your existing styles */
    margin: 0px;
    background-color: transparent;
    padding: 10px;
    border-radius: 5px;
}

.main-view {
    display: none;
    flex-direction: column;
    padding: 10px; 
    margin-left: 250px;
    border: none;
    background-color: #ffffff;
    text-align: center;
    transition: margin-left 0.3s ease, width 0.3s ease; /* Added transition for smooth movement */
    
}

#sheetForm.main-view {
    margin-top: 80px;
}

/* ---   Headers (titles) Styes  ---   */
.main-header {
    margin-top: 25px;
}

h2 {  
    text-align: center;
    color: var(--text-color-primary); /* Dark color for secondary headings */
    font-weight: 600; /* Medium bold for secondary headings */
    font-size: 20px; /* Appropriate size for H2 */
    margin: 0;
    margin-bottom: 10px;
    line-height: 1;
}

h3 {  
    text-align: left;
    color: var(--text-color-primary); /* Dark color for secondary headings */
    font-weight: 550; /* Medium bold for secondary headings */
    font-size: 18px; /* Appropriate size for H2 */
    margin: 2px;
    margin-bottom: 10px;
}

h4 {  
    color: var(--text-color-secondary); /* Dark color for secondary headings */
    font-weight: 550; /* Medium bold for secondary headings */
    font-size: 16px; /* Appropriate size for H2 */
    margin: 1px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
          
}

h5 {
    color: var(--button-submit-hover); /* Dark color for secondary headings */
    font-weight: bold; /* Medium bold for secondary headings */
    font-size: 1.1em; /* Appropriate size for H2 */
    margin: 1px;
    width: 100%;
    text-align: left;
}


.description {
    font-size: 0.9em;
    color: var(--text-grayedout);
    font-style: italic;
    font-weight: normal;
    text-align: center !important;
    line-height: 1;
}

.title-and-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dashboard-welcome-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    background-color: transparent; 
    padding-left: 20px;
    overflow: hidden;
    white-space: nowrap;
}

.welcome-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}

.welcome-text p {
    font-size: 14px;
    margin: 0px;

}

.welcome-text h3 {
    font-size: 22px;
    margin-bottom: 2px !important;
    
}

.date-card{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    margin-right: 10px;
    max-height: 70px;
    overflow: hidden;
    border-radius: 35px;
}

.dashboard-table-title {
    font-size: 1.3em;
    color: var(--text-color-primary);
    text-align: left;
    font-weight: bold;
}

.day-name-dashboard {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.date-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1;
}

.month-year {
    font-size: 1rem;
    color: #3498db;
    font-weight: 500;
    font-family: 'Cairo';
}

.day-number {
    font-size: 3rem;
    color: #3caee7;
    font-weight: 700;
    font-family: 'Cairo', 'Roboto';
}

.separator {
    width: 1px;
    height: 40px;
    background-color: #95a5a6;
    margin: 0 10px;
}

.dashboard_card_container {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(7, 1fr); 
    gap: 15px;
    padding: 10px;
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.dashboard_card_container_doctorDashboard {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(7, 1fr); 
    gap: 15px;
    padding: 10px;
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.dashboard_card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    line-height: 1;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    min-width: 160px;
}

.dashboard_card_title {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-color);
}

.dashboard_card_number {
    font-size: 28px;
    font-weight: bolder;
    color: var(--primary-color);
}

.dashboard_card_comment {
    font-size: 12px;
    color: var(--text-color-secondary);
    opacity: 0.7;
    text-align: left;
}

.dashboard_table_container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex: 1;
}



/* --- Fixed Navbar (Header) Styles --- */
.navbar {
    background-image: linear-gradient(to right, var(--primary-color), #0a6c96); 
    color: white;
    padding: 15px 40px;
    display: none;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    position: fixed; 
    top: 0;
    left: 0;
    height: 78px;
    width: 100vw;
    box-sizing: border-box;
    z-index: 1000; 
}

.menu-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    margin-right: -20px;
}


.header-logo-icon {
    height: clamp(26px, 3vw, 36px); /* Adjust this height as needed to fit your header */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Helps align it nicely with text and other icons */
    margin: 0 8px; /* Add some space between the logo and text/icon */
    
}

.back-button {
    padding: 10px 15px;
    border-radius: 25px;
    background-color: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    transition: background-color 0.3s ease-in-out;
}

.back-button:hover{
    background-color: var(--primary-color);
    box-shadow: 4px 4px 8px rgba(0, 123, 255, 0.2);
}

.dashboard-icons-container {
    flex: 2; 
    align-self: right; 
    display: flex; 
    flex-direction: row; 
    gap: 20px; 
    align-items: center; 
    justify-content: right;
}

.search-container {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--border-color);
    border-radius: 35px; 
    color: #333;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    width: 400px;
    transition: all 0.6s ease-in-out;
    position: relative;
}

.search-container.collapsed {
    width: 35px;
    background-color: transparent;
    color: white;
    border: none;
    box-shadow: none;
}

/* Style for the search results container */
.patient-list-container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10000;
    margin-top: 2px; /* Adds a small gap between the search bar and the list */
    background-color: white;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    min-width: 350px;
}

.searching-results {
    padding: 15px;
    text-align: center;
    color: #666;
    font-style: italic;
    border-radius: 4px;
    margin: 10px;
}

.no-results {
    padding: 15px;
    text-align: center;
    color: #999;
    font-style: italic;
}

.patient-list-container.visible {
    display: block;
}

.patient-row {
    padding: 10px;
    border-bottom: 1px solid var(--border-color); /* Separator between each patient entry */
    cursor: default; 
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    color: var(--text-color-secondary);
    font-size: 0.9em;
    line-height: 1.2;
}

/* Hover effect for patient rows */
.patient-row:hover,
.patient-row.selected {
    background-color: #f1f1f1; /* Slightly darker background on hover */
}

/* Container for the patient information */
.patient-row-details {
    display: flex;
    flex-direction: column;
}

/* Style for each line of patient info */
.patient-info-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
}

/* Style for each individual piece of data (the new spans) */
.patient-detail-item {
    padding: 0 5px;
}

.patient-detail-item strong {
    font-size: 1.1em;
    color: var(--text-color-primary);
}

/* Style for the "Matched in" text to make it stand out */
.matched-column {
    font-size: 0.9em;
    color: #888;
}

.patient-mobile,
.patient-age {
    direction: ltr;
    text-align: left;
    font-family: 'Roboto', monospace;
    unicode-bidi: embed;
}

.patient-mobile i,
.patient-name i {
    margin: 0 10px;
}

/* Remove the border from the last patient row to prevent double lines */
.patient-row:last-child {
    border-bottom: none;
}

/* Style for the "No patients found" message */
.no-results {
    text-align: center;
    color: var(--text-grayedout);
    font-style: italic;
    font-size: 0.9em;
    margin: none;
}


.patient-search-container,
.appointment-search-container,
.diagnosis-search-container,
.notifications-search-container,
.lists-search-container,
.file-search-container,
.expenses-search-container,
.booking-search-container {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--border-color);
    border-radius: 25px; 
    color: #333;
    background-color: white;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

/* New: Styles for the checkmark icon */
.checkmark-icon {
    margin: 0 10px;
    color: #4CAF50; /* Green color for the checkmark */
}

/* New: Style to apply when a search is active */
.patient-search-container.search-active,
.appointment-search-container.search-active {
    border-color: #4CAF50; /* Green border color */
}

.navbar .logo {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 700; /* Bold logo text */
    letter-spacing: 0.5px; /* Slightly spaced out for modern look */
    transition: color 0.3s ease;
    flex-shrink: 1; /* Allows logo to shrink if space is tight */
    min-width: 0; /* Prevents text overflow in very narrow scenarios */
    white-space: nowrap; /* Keep logo text on one line */
    overflow: hidden; /* Hide overflow if text is still too long */
    text-overflow: ellipsis; /* Add ellipsis if hidden */
    cursor: auto;
    font-size: clamp(0.9em, 2vw, 1.8em);
}



/* Frozen Patient Info Bar */
.frozen-info-bar {
    background-color: var(--secondary-color);
    color: var(--text-color-primary);
    padding: 20px 10px 10px 30px;
    flex-direction: row;
    gap: 25px;
    align-items: flex-start;
    gap: 5px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 70px;
    z-index: 999;
    width: 100vw;
    height: 100px;
    overflow-x: auto;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: none;
}

.frozen-info-bar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.frozen-info-bar .sector {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 1 auto;
    border-left: 2px solid var(--border-color);
    margin-right: 25px;
    padding-left: 15px;
    line-height: 1.1;
    font-size: 14px;
    align-items: stretch;
    cursor: default;
}

.frozen-info-bar .sector:first-child {
    border-left: none;
    margin-right: 15px;
}

.frozen-info-bar #patientGenderIcon {
    font-size: clamp(4em, 4vw, 5em);
    margin-left: -15px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.frozen-info-bar .sector:nth-child(3),
.frozen-info-bar .sector:nth-child(4),
.frozen-info-bar .sector:nth-child(5) {
    line-height: 1.5;
}

.frozen-info-bar .sector .sector-line {
    display: flex; 
    flex-direction: row; 
    align-items: center;
    justify-content: left;
    gap: 5px;
    white-space: nowrap;
}

.sector-line .history-summary-line::before {
  content: "";
  padding-left: 5px; /* Or use margin-right */
}

/* Styling for the Surgical Details Tooltip */
.surgical-details-tooltip {
    position: absolute;
    background-color: #fefefe;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1000;
    opacity: 0; /* Start with opacity 0 for fade-in effect */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in/out transition */
    pointer-events: none; /* Allows clicks to pass through to elements below */
}

.visit-info-bar {
    background-color: transparent; 
    color: var(--text-color-primary);
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px;
    gap: 5px; 
    position: relative; 
    z-index: 995; /* Below navbar but above content */
    box-sizing: border-box; /* Include padding in width */
    flex-wrap: wrap;
    padding: 10px;
}

.visit-info-bar :nth-child(3) {
    justify-content: center;
}

/* Base styles for the sector, with a transition for smooth changes */
.visit-info-bar .sector {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    padding: 10px 10px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    line-height: 1.2;
    font-size: 14px;
    justify-content: flex-start;
    align-items: flex-start;
    cursor: default;
    transition: border-color 2s ease-out, box-shadow 2s ease-out, background-color 2s ease-out;
    background-color: white;
    margin-bottom: 10px;
    min-width: 330px;
    box-sizing: border-box;
}

.visit-info-bar .sector:first-child {
    flex: 1.5;
}

.visit-info-bar .sector.updated {
    /* This defines the fast transition for appearance */
    transition: border-color 0.1s ease-in, box-shadow 0.1s ease-in, background-color 0.1s ease-in; 
    border-color: var(--button-submit-hover);
    background-color: var(--secondary-color);
    box-shadow: 0 0 6px rgba(var(--button-submit-hover-rgb), 0.2);
}

.buttons-sector {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    margin-bottom: 10px;
}


.visit-details-title{
    justify-content: flex-start;
    font-size: 1.2em;
    font-weight: bold;
    position: relative;
    margin-top: -20px;
    background-color: white;
    padding: 0 10px;
    border-radius: 40px;
}

.visit-details-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-left: 25px;
    justify-content: flex-start;
    align-items: flex-start;
    white-space: nowrap;
    min-width: fit-content;
}

.visits-services-display {
    text-align: left;
    margin-left: 10px;
}

.edit-services-Btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: var(--text-color-secondary);
}

.sector-patient-name {
    font-size: clamp(1.4em, 2vw, 1.8em);
    font-weight: bold;
    white-space: nowrap;
    font-family: 'Cairo', 'Roboto';
}

#patientProfession {
    font-family: 'Cairo', 'Roboto';
}


.sidebar {
    display: none;
    width: 250px;
    background-color: var(--secondary-color);
    padding: 15px;
    margin-left: 0;
    top: 75px;
    position: fixed;
    border-right: 2px solid var(--border-color);
    z-index: 998;
    box-sizing: border-box;
    transition: width 0.3s ease;
    height: calc(100vh - 70px);
    overflow-y: auto; /* Always show scrollbar */
}

.sidebar-tab {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    color: var(--text-color-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 450;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
}

.sidebar-tab i {
    width: 25px;
    text-align: center;
    font-size: 18px;
}

.sidebar-tab span {
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
}

body.sidebar-collapsed .sidebar .sidebar-tab span {
    opacity: 0;
    pointer-events: none;
}

.sidebar-tab:hover {
    background-color: var(--tab-color-hover);
    color: #262626;
}

.sidebar-tab.active {
    background-color: var(--tab-color-active);
    font-weight: bold;
    color: #262626;
}

.sidebar-tab.hidden {
    display: none;
}



/* =================================================== */
/* ---                  Table Styles               --- */
/* =================================================== */

.table-responsive,
.table-responsive-requests,
.table-responsive-dashboard,
.table-responsive-events {
    min-width: none;
    overflow: auto;
    border: 0;
    line-height: 1.4;
}

.table-responsive-patientsList {
    max-height: 350px; /* Or your desired height */
    overflow-y: auto;
    border: 0; 
}

.table-responsive-patients,
.table-responsive-appointments {
    overflow: hidden;
    border: 0;
    overflow-x: auto;
    line-height: 1.4;
}

.modern-table,
.accounts-table,
.schedule-table,
.appointments-table,
.diagnoses-table,
.events-table,
.performance-table,
.commission-table,
.finance-table,
.expenses-table,
.dashboard-appointments-table,
.backup-history-table,
.booking-requests-table {
    width: 100%;
    border-collapse: collapse; /* Removes default table borders */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Soft shadow for the table */
    min-width: 1000px;
    white-space: nowrap;
}

.commission-table th,
.commission-table td {
    min-width: 180px;
}

.modern-table th,
.modern-table td,
.schedule-table th,
.schedule-table td,
.accounts-table th,
.accounts-table td,
.appointments-table th,
.appointments-table td,
.diagnoses-table th,
.diagnoses-table td,
.events-table th,
.events-table td,
.performance-table th,
.performance-table td,
.commission-table th,
.commission-table td,
.finance-table th,
.finance-table td,
.expenses-table th,
.expenses-table td,
.dashboard-appointments-table td,
.dashboard-appointments-table th,
.backup-history-table td,
.backup-history-table th,
.booking-requests-table td,
.booking-requests-table th {
    padding: 10px 15px; 
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--table-border-color); /* Light gray horizontal dividers */
    font-size: 15px; /* Adjusted body font size for table cells */
    
}

 .modern-table thead,
 .accounts-table thead,
 .schedule-table thead,
 .appointments-table thead,
 .diagnoses-table thead,
 .events-table ,
 .performance-table thead,
 .commission-table thead,
 .finance-table thead,
 .expenses-table thead,
 .dashboard-appointments-table thead,
 .backup-history-table thead,
 .booking-requests-table thead {
    position: relative; /* Make the header sticky */
    top: 0; /* Stick to the top of its scrolling container */
    z-index: 1; /* Ensure the header stays above the scrolling content */
    background-color: white;
    white-space: nowrap;
}

.modern-table thead th,
.accounts-table thead th,
.schedule-table thead th,
.appointments-table thead th,
.diagnoses-table thead th,
.events-table thead th,
.performance-table thead th,
.commission-table thead th,
.finance-table thead th,
.expenses-table thead th,
.dashboard-appointments-table thead th,
.backup-history-table thead th,
.booking-requests-table thead th {
    background-color: white; /* Light blue-gray for header background */
    color: #808080; /* Dark charcoal for header text */
    font-weight: 550; /* Medium bold for table headers */
    text-transform: capitalize;
    font-size: 14px;
    text-align: left;
    letter-spacing: 1px;
}

.dashboard-appointments-table thead th {
    font-weight: normal !important;
    font-size: 13px !important;
}

.modern-table tbody tr:hover,
.accounts-table tbody tr:hover,
.schedule-table tbody tr:hover, 
.appointments-table tbody tr:hover,
.diagnoses-table tbody tr:hover,
.events-table tbody tr:hover,
.performance-table tbody tr:hover,
.finance-table tbody tr:hover,
.expenses-table tbody tr:hover,
.backup-history-table tbody tr:hover,
.booking-requests-table tbody tr:hover {
    background-color: var(--secondary-color); /* Light blue hover effect for rows */
    transition: all 0.3 ease;
    cursor: default;
}

.accounts-table td:nth-child(1),
.diagnoses-table td:nth-child(1),
.performance-table td:first-child,
.finance-table td:first-child,
.expenses-table td:first-child,
.backup-history-table td:first-child {
    font-weight: bold;
}

.backup-history-table td:first-child {
    text-transform: capitalize;
}

.patients-actions-container {
    min-width: 100px;
}

.table-responsive-patients td:nth-child(2),
.table-responsive-appointments td:nth-child(1),
.dashboard-appointments-table td:nth-child(1) {
    font-size: 0.95em;
    font-family: 'Cairo', 'Roboto';
}

.not-set-text {
    color: #aaa; /* A light gray color */
    font-size: 0.9em;
}

#patientsListsMainView,
#profileMainView,
#liveChatMainView {
    direction: ltr;
    text-align: left;
    font-family: 'Roboto', sans-serif !important;
}

/* /// ----------------------------- ///  */
/* /// ------  Schedule Styles ----- ///  */
/* /// ----------------------------- ///  */

.time-range-container { 
    display: flex;
    width: auto;
    gap: 8px;
    align-items: center;
    justify-content: start;
    margin-bottom: 5px;
}

.schedule-table td:first-child {
    font-weight: bold;
}

#scheduleTable input[type="time"] { 
    padding: 8px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    background-color: #fdfdff;
    box-sizing: border-box;
}

#scheduleTable select.slot-duration-select { 
    padding: 8px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    background-color: #fdfdff;
    box-sizing: border-box;
    min-width: 100px; 
}

#scheduleTable input[type="time"]:focus,
#scheduleTable select.slot-duration-select:focus { 
    border-color: #8c9eff;
    box-shadow: 0 0 0 3px rgba(140, 158, 255, 0.2);
    outline: none;
}


/* Styling for Add Range and Remove Time Range buttons */
.add-time-range-btn, 
.remove-time-range-btn { /* Corrected from .add-time-slot-btn, .remove-time-slot-btn */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-left: 5px; /* Add some spacing */
}

.add-time-range-btn {
    background-color: var(--success-color); /* Green plus icon */
}

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

.remove-time-range-btn {
    background-color: var(--error-color); /* Red minus icon */
    color: white;
}

.remove-time-range-btn:hover {
    background-color: var(--error-color-hover);
}

/* Additional styling for the 'x' button within time range */
.time-range-container .remove-time-range-btn {
    font-size: 1em; /* Smaller 'x' */
    padding: 2px 5px; /* Adjust padding for 'x' button */
    border-radius: 3px;
}


/* Ensure all action buttons within the td are styled well together */
.schedule-table td button {
    margin: 2px; /* Small margin between buttons */
}

/* Styling for the Remove Day button */
.remove-day-row-btn {
    background-color: var(--error-color); /* A standard red for danger/removal actions */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-left: 5px; /* Add some spacing */
}

.remove-day-row-btn:hover {
    background-color: var(--error-color-hover); /* Darker red on hover */
}

/* Styles for individual time slots in the generated list */
.time-slot-item {
    background-color: var(--secondary-color); /* Light cyan background */
    border-radius: 5px;
    padding: 4px;
    margin: 4px; /* Space between each slot */
    font-size: 12px;
    color: #004d40; /* Darker text for readability */
    text-align: center;
    height: min-content;
    flex: 0 0 40%
}


.schedule-radio-group {
    display: flex;
    gap: 1px;
    justify-content: center;
    align-items: center;
}
 

.schedule-radio-group input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.schedule-radio-group label {
    padding: 2px 12px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #f0f0f0;
    color: #333;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-weight: normal;
    border-radius: 3px;
}


.schedule-radio-group input[type="radio"]:checked + label {
    border-color: var(--border-color); /* Light blue focus border */
    color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(140, 158, 255, 0.2); /* Soft blue glow */
}

.schedule-radio-group label:hover {
    background-color: #e0e0e0; /* Slight hover effect */
}

/* Styling for the main time slots display container (Flexbox) */
#timeSlotsDisplay {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between cards */
    padding: 15px;
}

/* Styling for the main time slots display container (Flexbox) */
#timeSlotsDisplay {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between cards */
    padding: 15px;
}

/* Styling for the initial schedule message with icon */
.initial-schedule-container {
    grid-column: 1 / -1; /* Span across all columns */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    min-height: 120px;
}

.schedule-icon {
    font-size: 48px;
    color: #6c757d;
    opacity: 0.6;
}

.initial-schedule-message {
    color: #666;
    font-size: 0.95em;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
}

/* Remove the old initial-schedule-message styling since we're using the container now */
.initial-schedule-message:not(.initial-schedule-container .initial-schedule-message) {
    all: unset;
}

/* Style for invalid time inputs */
input.time-error {
    border: 2px solid red;
    background-color: #ffe6e6; /* Light red background */
}

/* Styling for each day's time slots card */
.day-slots-card {
    background-color: #ffffff; /* White background for the card */
    border: 1px solid #e0e0e0; /* Light gray border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    padding: 15px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.day-slots-card h4 {
    color: #294767; /* Blue color for day name */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    border-bottom: 1px solid #f0f0f0; /* Separator under day name */
    padding-bottom: 8px;
}

.day-slots-card .slots-list {
    max-height: 200px; /* Limit height for scrollable slot list */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 5px; /* Space for scrollbar */
}

.day-slots-card p {
    margin: 3px 0;
    font-size: 0.95em;
    color: #555;
    line-height: 1.4;
}

.day-slots-card p.no-slots-message {
    font-size: 0.9em;
    color: var(--text-grayedout);
    text-align: center;
    padding: 10px 0;
}

.slots-list {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive columns */
    padding-top: 5px;
}

.no-slots-message {
    color: #757575;
    font-style: italic;
    text-align: center;
}


/* ////   Schedule Check Boxes   ////  */
.schedule-table-check {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: 1;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 8px;
    padding: 5px;
    overflow-x: auto;
}


/* Hide the default checkbox */
.schedule-table-check input[type="checkbox"][name="day"] {
    /* Visually hide the checkbox but keep it accessible */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Prevents interaction with the hidden input directly */
}

/* Style the label to look like a custom checkbox */
.schedule-table-check input[type="checkbox"][name="day"] + label {
    padding: 10px;
    margin: 0;
    border: none;
    width: 100%;
    background-color: transparent;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

.schedule-table-check input[type="checkbox"][name="day"]:checked + label {
    border-radius: 5px;
    font-weight: bold;
    background-color: white;
    box-shadow: 1px 1px 2px 1px rgba(140, 158, 255, 0.2); /* Soft blue glow */

}

.schedule-table-check input[type="checkbox"][name="day"] + label:hover {
    background-color: var(--tertiary-color);
    opacity: 0.9;
    transform: all 0.3sec ease;
}

.time-from,
.time-to {
    width: auto;
    max-width: 100px;
}

.days-tab-frozen {
    opacity: 0.6;
    pointer-events: none;
}

.no-availability-row {
    height: 120px;
}

.no-availability-cell {
    text-align: center;
    vertical-align: middle;
    padding: 40px 20px;
}

.no-availability-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.schedule-icon {
    font-size: 48px;
    color: #6c757d;
    opacity: 0.7;
}

.no-availability-message {
    font-size: 1em;
    color: #6c757d;
    margin: 0;
    font-weight: 500;
}

.no-slots-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    gap: 15px;
}

.schedule-icon {
    font-size: 48px;
    color: #6c757d;
    opacity: 0.6;
}

.warning-icon {
    font-size: 36px;
    color: #dc3545;
    opacity: 0.7;
}

.no-slots-message {
    color: #dc3545;
}

/* =================================================== */
/* ---                 Labels Styles               --- */
/* =================================================== */

.input-group {
    display: block; /* Ensures labels stack above inputs */
    position: relative;
    font-weight: 550; /* Default font weight for labels */
    color: #335284; /* Default text color for labels */
    font-size: 15px; /* Consistent font size for labels */
    flex: 1;
    min-width: 150px;
    margin-bottom: 8px;
}

.form-group {
    margin-bottom: 8px;
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
}


.form-row input,
.form-row select {
    flex: 1; /* This will make inputs and selects within the row grow to fill space */
}

.eye-label-right {
  grid-column: 2 / 5;
  text-align: center;
}

.eye-label-left {
  grid-column: 6 / 9;
  text-align: center;
}

.history-form-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
    align-items: start;
}

.history-items-container {
    flex: 1 1 45%;
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out;
}

.ocular-surgical-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    gap: 5px;
    padding: 5px 0 0 0;
}

.ocular-surgical-item .input-group {
    min-width: none;
}

.ocular-surgical-item:last-child {
    border-bottom: 0;
}

#ocularSurgicalHistoryContainer {
    min-width: none;
}

/* Styling for the logout link and its icon */
.logout-link {
    color: #fff; /* This should make the link text and inherited icon white */
    font-size: 20px; /* Adjust size as needed */
    text-decoration: none;
    
}

.logout-link i {
    color: #fff; /* Forces the icon to be white */
    transition: color 0.8s ease;
}

.logout-link i:hover {
    color: #ff7373; /* Lighter color on hover */
    
}


/* =================================================== */
/* ---                  Input Styles               --- */
/* =================================================== */


/* Mandatory field indicator */
.mandatory {
    color: #e74c3c;
    margin-left: 4px;
    font-size: 14px;
}

/* Unified Styles for Inputs and Selects */
.input-group input[type="text"],
.input-group input[type="password"],
.input-group input[type="date"],
.input-group input[type="tel"],
.input-group input[type="email"],
.input-group input[type="time"],
.input-group input[type="number"],
.input-group input[type="color"],
.duration-input-group input[type="number"],
.modal-content .input[type="datetime"],
.input-group select,
.eye-input {
    display: flex;
    width: 100%; /* Ensures fields span the full width of their container */
    padding: 8px 8px;
    border: 1px solid #dcdcdc; /* Lighter border */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Base font size for input text */
    color: #333;
    background-color: #fdfdff; /* Off-white background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    flex-grow: 1;
    height: 35px;
}

/* Focus State for all unified inputs/selects */
.input-group input:focus,
.input-group select:focus,
.eye-input:focus {
    border-color: #8c9eff; /* Light blue focus border */
    box-shadow: 0 0 0 3px rgba(140, 158, 255, 0.2); /* Soft blue glow */
    outline: none;
}

.counter-control {
  width: 100%;
  text-align: right;
}

.history-counter-control {
    width: 100%;
    text-align: left;
}

.iop-method-select {
  width: 100%;
}

.search-input,
.search-input-patient,
.search-input-general,
.search-input-lists,
.search-input-appointments {
    width: 100%;
    padding: 3px 3px 3px 10px;
    font-size: 14px;
    color: #333;
    border-radius: 20px;
    margin: 5px;
    border: 0;
    background-color: transparent;
    font-family: 'Roboto';
    height: 20px;
}

.search-input:focus,
.search-input-patient:focus,
.search-input-general:focus,
.search-input-lists:focus,
.search-input-appointments:focus {
    outline: none;
}


/* Basic styling for all textareas */
textarea {
    position: relative;
    width: 100%; /* Make it span the full width of its parent container */
    padding: 10px; /* Internal spacing */
    border: 1px solid var(--field-border); /* Light grey border */
    border-radius: 5px; /* Slightly rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-family: inherit; /* Inherit font from the body or parent element */
    font-size: 0.9rem; /* Base font size */
    line-height: 1.3; /* Spacing between lines of text */
    resize: vertical; /* Allow vertical resizing by the user, but not horizontal */
    min-height: 80px; /* Minimum height for the textarea */
    max-height: 150px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effects */
}

/* Styling for when the textarea is focused (clicked into) */
textarea:focus {
    border-color: #007bff; /* Blue border on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.05); /* Light blue shadow for focus effect */
    outline: none; /* Remove default outline (browser-specific) */
}

/* Placeholder text styling */
textarea::placeholder {
    color: #6c757d; /* Lighter color for placeholder text */
    opacity: 1; /* Firefox default opacity can be lower */
}

/* Styling for disabled textareas */
textarea:disabled {
    background-color: #e9ecef; /* Light grey background for disabled state */
    cursor: not-allowed; /* Indicate it's not interactive */
    opacity: 0.7; /* Slightly dim it */
}


/* Example of a larger textarea */
textarea.large {
    min-height: 150px;
}

.history-items-container .textarea {
    min-height: 40px;
    max-height: 100px;
}

#patientfullName,
#patientprofession {
    font-family: 'Cairo', 'Roboto';
    font-size: 1.05em;
}

/* =================================================== */
/* ---           Input Autocomplete Styles         --- */
/* =================================================== */

.autocomplete-suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-focus);
    border-radius: 5px;
    max-height: 120px;
    overflow-y: auto;
    position: absolute; /* Essential for overlaying */
    z-index: 99; /* Ensure it's above other elements */
    background-color: white;
    left: 0; /* Align to the left edge of the positioned parent */
    right: 0; /* Align to the right edge of the positioned parent */
    width: auto; /* Let left/right define the width */
    box-shadow: 0 0 0 3px rgba(140, 158, 255, 0.2); /* Soft blue glow */
    box-sizing: border-box; /* Include padding/border in width calculation */
    direction: ltr; /* Force left-to-right text direction for input content */
    text-align: left;
}

.autocomplete-suggestions:empty {
    display: none;
}

.autocomplete-suggestions li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}

.autocomplete-suggestions li:last-child {
    border-bottom: none;
}

.autocomplete-suggestions li:hover,
.autocomplete-suggestions li.autocomplete-active {
    background-color: var(--secondary-color);
}

.autocomplete-no-results {
    color: var(--text-grayedout);
    font-size: 0.9em;
    cursor: default !important;
}

.autocomplete-add-new-option {
    font-weight: bold;
    color: var(--success-color); /* A distinct color for "add new" */
}

.autocomplete-remove-button {
    background: none;
    border: none;
    color: var(--error-color);
    cursor: pointer;
}

.autocomplete-remove-button:hover {
    color: var(--error-color-hover);
}


/* =================================================== */
/* ---        Multi-Select Autocomplete Styles   --- */
/* =================================================== */

.autocomplete-multi-select-wrapper {
    position: relative; /* Crucial for positioning the suggestions dropdown */
    width: 100%; /* Or set a specific max-width if desired */
    
}

.autocomplete-chips-container {
    display: flex;
    flex-wrap: wrap; /* Allow chips to wrap to the next line */
    align-items: center;
    gap: 5px; /* Space between chips and input */
    border: 1px solid var(--field-border);
    border-radius: 5px;
    padding: 2px 6px; /* Padding inside the container */
    background-color: white;
    cursor: text; /* Indicate it's an editable area */
    box-sizing: border-box; /* Include padding in dimensions */
    min-height: 35px;
}


.autocomplete-chips-container:focus-within {
    border-color: #8c9eff; /* Light blue focus border */
    box-shadow: 0 0 0 3px rgba(140, 158, 255, 0.2); /* Soft blue glow */
    outline: none;
}

.autocomplete-input-field {
    flex-grow: 1; /* Allows the input to take available space */
    border: none;
    outline: none; /* Remove default focus outline */
    padding-left: 5px; /* Remove internal padding, padding is on container */
    margin: 0; /* Remove internal margin */
    min-width: 50px; /* Ensure input is always visible, even if empty */
    height: 26px; /* Adjust based on your text size, often 1em + some padding */
    font-size: 0.9em;
    color: var(--text-color-primary);
    background-color: transparent;
}

/* Style for individual chips */
.autocomplete-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--secondary-color); /* Primary color for chips */
    color: var(--primary-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85em;
    white-space: nowrap; /* Prevent text wrapping within a chip */
    line-height: 1; /* For vertical alignment */
}

.autocomplete-chip-delete,
.autocomplete-clear-button,
.delete-patient-btn {
    background: none;
    border: none;
    color: var(--error-color);
    font-weight: normal;
    margin-left: 5px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.2s ease;
}

.autocomplete-chip-delete:hover {
    color: var(--error-color); /* Red on hover to signify delete */
}


.autocomplete-single-selected-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9em;
    cursor: default; /* Not directly editable */
    box-sizing: border-box;
    flex: 1 1 0%; /* Allow it to take up available space in the container */
    white-space: nowrap;
    height: 30px;
    width: 100%;
    padding: 0 5px;
}


.autocomplete-loading-spinner {
    display: inline-block; /* Or block, depending on layout */
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top: 2px solid #555; /* Darker top border for the spinner effect */
    border-radius: 50%;
    animation: spin 0.8s linear infinite; /* Spin animation */
    margin-left: 8px; /* Space from input/chips */
    vertical-align: middle; /* Align with text */
    flex-shrink: 0; /* Prevent it from shrinking in flex container */
    position: absolute; /* Position it absolutely within its parent */
    margin-top: -10px;
    right: 8px; /* Adjust as needed */
    top: 50%;
}

#applyFiltersButton {
    position: relative; 
    padding-right: 30px;
}

.autocomplete-item-inactive {
    pointer-events: none;
    cursor: default;
}

.autocomplete-text-inactive {
    opacity: 0.5;
}

.autocomplete-selected-label {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
}

.autocomplete-selected-label-italic {
    font-size: 0.9em; 
    color: #888; 
}

.autocomplete-item-inactive:hover {
    background-color: transparent;
}

.autocomplete-multi-select-wrapper .autocomplete-chips-container {
    position: relative;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.autocomplete-chips-container input.autocomplete-input-field {
    padding-right: 30px; /* Make space for the spinner */
}

.autocomplete-chips-container input.autocomplete-input-field[style*="display: none"] + .autocomplete-loading-spinner {
    display: none !important;
}

.autocomplete-single-selected-display + input.autocomplete-input-field[style*="display: none"] + .autocomplete-loading-spinner {
    right: 8px; 
}

.autocomplete-multi-select-wrapper {
    position: relative;
}

/* =================================================== */
/* ---                  Button Styles              --- */
/* =================================================== */


.button {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: var(--text-color-secondary);
    white-space: nowrap;
    min-height: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), /* Subtle base shadow */
                inset 0 1px 0 rgba(255, 255, 255, 0.2), /* Top highlight for glassy look */
                inset 0 -1px 0 rgba(0, 0, 0, 0.05); /* Bottom shadow for glassy look */
}

.button[type="submit"] {
    background-color: var(--button-submit); /* A pleasant grayish blue */
    color: white;
    border: 1px solid var(--button-submit); /* Slightly darker border */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    font-weight: 550; /* Bolder for primary action */
}

.button[type="submit"]:hover {
    background-color: var(--button-submit-hover); /* Darken slightly on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button[type="submit"]:active {
    background-color: var(--button-submit-hover); /* Even darker on click */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.clear-button {
    background-color: #cccccc; /* Medium gray */
    color: #444;
    border: 1px solid #b3b3b3;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.clear-button:hover {
    background-color: #bdbdbd; /* Darken slightly */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.clear-button:active {
    background-color: #ababab;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.cancel-button {
    background-color: #e0e0e0; /* Lighter gray */
    color: #555;
    border: 1px solid #c7c7c7;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.cancel-button:hover,
.button:hover {
    background-color: #d4d4d4; /* Darken slightly */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cancel-button:active,
.button:active {
    background-color: #c4c4c4;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}



/* Styles for Search button in Search bar */
.search-icon,
.dashboard-search-icon{
    font-size: 14px;
    font-weight: 500; /* Default medium bold for buttons */
    margin-left: 20px;
    margin-right: 0;
    border: 0;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    user-select: none;
    color: var(--text-grayedout);
}

.patient-search-container.search-active .search-icon,
.appointment-search-container.search-active .search-icon {
    color: #4CAF50; /* Green color */
}

.dashboard-search-icon {
    cursor: pointer;
}

.search-container.collapsed .dashboard-search-icon {
    color: white;
}

.new-drug-btn,
.new-patient-btn,
.new-service-btn,
.new-appointment-btn,
.new-diagnosis-btn,
.new-event-btn,
.new-list-btn,
.new-file-btn,
.print-list-btn,
.new-expense-btn {
    font-size: 14px;
    font-weight: 500; /* Default medium bold for buttons */
    cursor: pointer;
    border-radius: 6px;
    padding: 8px 15px;
    border: 0;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    width: 100%;
    color: var(--text-color-secondary);
    min-width: max-content;
}

.new-drug-container,
.new-service-container,
.new-appointment-container,
.new-diagnosis-container,
.new-event-container,
.new-list-container,
.new-file-container,
.print-list-container,
.new-expense-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    border: 1px solid #dcdcdc;
    border-radius: 25px; 
    color: #333;
    background-color: white;
    box-sizing: border-box;

}

.new-diagnosis-container {
    width: 25%;
}

.new-drug-container:hover,
.new-service-container:hover,
.new-appointment-container:hover,
.new-diagnosis-container:hover,
.new-event-container:hover,
.new-list-container:hover,
.new-file-container:hover,
.print-list-container:hover {
    background-color: #ececf8;

}

#confirmLogoutBtn,
#confirmDeleteAccountBtn,
#confirmDeleteServiceBtn,
#confirmDeletePatientBtn,
#confirmDeleteFileBtn,
.modal-delete-visit-btn,
#confirmDeleteBranchBtn,
#confirmDeleteOrgBtn,
#confirmDeleteExpenseBtn,
#confirmDeleteBranchBtnForProfile,
#confirmDeclineBtn,
#declineConflictBtn {
    background-color: rgb(218, 26, 26);
    color: white;
}

#confirmLogoutBtn:hover,
#confirmDeleteAccountBtn:hover,
#confirmDeleteServiceBtn:hover,
#confirmDeletePatientBtn:hover,
#confirmDeleteFileBtn:hover,
.modal-delete-visit-btn:hover,
#confirmDeleteBranchBtn:hover,
#confirmDeleteOrgBtn:hover,
#confirmDeleteExpenseBtn:hover,
#confirmDeleteBranchBtnForProfile:hover,
#confirmDeclineBtn:hover,
#declineConflictBtn:hover {
    background-color: var(--error-color-hover); 
}

/* Styles for Edit/Delete Buttons in Tables */
.action-buttons button 
.action-buttons .cancel-edit-btn {
    margin: 5px; 
    padding: 8px 15px;
    border-radius: 25px;
    border: 0px;
    font-weight: 550;
    font-size: 10px;
    transition: all 0.3s ease;
}


.edit-btn {
    background-color: #ddfbd8;
    padding: 5px;
    border: 0px;
    border-radius: 10px; 
    color: #497e40;
    box-shadow: 2 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    
}
.edit-btn:hover {
    background-color: #c1fab7;
    transform: translateY(-1px); /* Slight lift on hover */
    transition: all 0.3 ease;
}

.delete-btn {
    background-color: #ffe5e8;
    padding: 5px;
    border: 0px;
    border-radius: 10px;  
    color: #e72f44;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.delete-btn:hover {
    background-color: #ffc7ce;
    transform: translateY(-1px);
    transition: all 0.3 ease;
}

.cancel-edit-btn {
    background-color: #6c757d; /* Gray for cancel */
    color: white;
}
.cancel-edit-btn:hover {
    background-color: #5a6268;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* -----------------------------------------*/
/* ----- Medicines Buttons And Styles ----- */ 
/* ---------------------------------------- */

.prescription-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.prescription-buttons button {
    padding: 10px;
    width: 230px;
    border-radius: 15px;
    background-color: var(--secondary-color);
    box-shadow: none;
    color: var(--primary-color);
    font-size: 0.8em;
    font-weight: normal;
    border: 0;
    cursor: pointer;
    text-align: center;
}

.prescription-buttons :hover {
    background-color: var(--tab-color-hover);
    transition: all 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.prescription-buttons :focus {
    background-color: var(--tab-color-active);
}

.prescription-buttons :active {
    background-color: var(--tab-color-active);
}

.prescription-buttons :last-child {
    color: #db210c;
}

.prescription-buttons :last-child:hover{
background-color: #db210c;
    color: white;
}

.prescription-buttons :last-child:focus{
    background-color: transparent;
    color:  #db210c;
}


.rotate {
    transition: transform 0.5s ease-in-out;
    transform: rotate(180deg);
}

#addglassesBtn { /* Or the specific selector for your button */
    transition: transform 0.5s ease-in-out; /* Add transition for smooth rotation */
}


.add-medicine-btn,
.remove-medicine-btn,
.remove-complaint-btn,
.add-ocularsurgicalhistory-btn,
.remove-ocular-surgical-btn,
.remove-diagnosis-btn,
.add-actions-button {
    border: 0;
    border-radius: 50%;
    color: var(--success-color);
    background-color: transparent;
    padding: 5px;
    font-size: 20px;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

.remove-medicine-btn,
.remove-complaint-btn,
.remove-ocular-surgical-btn,
.remove-diagnosis-btn {
    color: var(--error-color-hover);
}

.remove-medicine-btn:hover,
.remove-complaint-btn:hover,
.remove-ocular-surgical-btn:hover {
    color: var(--error-color-hover);
}

.add-medicine-btn:hover,
.add-ocularsurgicalhistory-btn:hover {
    color: var(--success-color-hover);
}

#medicine-inputs-container {
    display: flex;
    flex-direction: column;
    column-gap: 5px;
    width: 100%;
}

.medicine-entry {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
    padding: 0px 50px;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 80px);
}

.add-ocularsurgicalhistory-btn {
    font-size: 1em;
    margin-top: -3px;
}


.prescription-output-container {
    font-size: 0.9rem;
    max-width: calc(100% - 120px);
    background-color: var(--secondary-color); /* Light blue background */
    border: 1px solid var(--field-border); /* Blue border */
    border-radius: 8px;
    margin-top: 20px;
    margin-left: 50px;
    white-space: pre-wrap; /* Ensures line breaks from '\n' are honored */
    word-break: break-word; /* Prevents long lines from overflowing */
    color: #1f324b; /* Darker blue text */
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left; 
    transition: all 0.5s ease-in-out;
    opacity: 0.3;
    overflow-x: auto;
}

.prescription-other-details {
    white-space: nowrap;
}

.prescription-output-container:empty::before {
    content: 'Your Prescription will appear here...'; /* Pseudo-element for placeholder */
    color: #999;
    font-style: italic;
}

/* Optional: Style when the content is present */
.prescription-output-container:not(:empty) {
    justify-content: flex-start; /* Align text to start when content is present */
    text-align: left; /* Align text to left when content is present */
    padding: 10px 20px; /* Restore original padding */
}

.prescription-entry-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: calc(100% - 20px);
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.prescription-entry-container:last-child {
    border-bottom: 0;
}

.prescription-entry-container strong {
    font-size: 1.2em;
    font-weight: bold;
}

.arabic-prescription {
    font-family: 'Cairo';
    font-size: 1em;
    text-align: right;
    padding-right: 20px;
    white-space: nowrap;
}

.duration-input-group {
    display: flex;
    gap: 2px; 
    align-items: center;
    width: 100%; 
}

.duration-input-group input[type="number"] {
    flex: 1; /* Allow the number input to take available space */
}

.duration-input-group select {
    flex: 2; /* Allow the select to take more space than the number input */
}

.medicine-entry .input-group {
    display: flex;
    flex-direction: column; /* Label on top of the input/select */
    flex: 1;
    min-width: 150px; /* Ensure enough space for each field */
    max-width: 250px; /* Control max width for layout */
}

#prescriptionContainer {
    max-height: 0; /* Initially hidden vertically */
    opacity: 0; /* Initially hidden visually */
    overflow-x: auto; /* Hide content that exceeds max-height */
    transform: translateY(-20px); /* Start slightly above its final position */
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, transform 0.5s ease-out;
    margin-top: 0; /* Adjust as needed for spacing when hidden */

}

#prescriptionContainer.is-active {
    max-height: 1000px; /* A value large enough to contain all content when revealed */
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Slide to its final position */
    margin-top: 20px; /* Add margin when revealed, adjust as needed */
}






/* --- Radio Buttons --- */

.radio-group {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.radio-group input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.radio-group label {
    padding: 5px 22px;
    border: 1px solid #ccc;
    border-radius: 20px 0px 0px 20px;
    cursor: pointer;
    background-color: #f0f0f0;
    color: #333;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-weight: normal;
    flex: 1;
    justify-content: center;
    align-items: center;
    max-width: 70px;
}


.radio-group label:last-child {
    border-radius: 0px 25px 25px 0px;
}

.radio-group input[type="radio"]:checked + label {
    border-color: #8c9eff; /* Light blue focus border */
    color: #8c9eff;
    /* box-shadow: 0 0 0 3px rgba(140, 158, 255, 0.2); /* Soft blue glow */
    
}

.radio-group label:hover {
    background-color: #e0e0e0; /* Slight hover effect */
}


/* ========================================================================= */
/* ---        Styles for Dashboard and Sheet Horizontal Tab Bars         --- */
/* ========================================================================= */

.dashboard-tab-bar,
.appointments-tab-bar,
.horizontal-tabs,
.horizontal-tabs-finance,
.horizontal-tabs-performance,
.events-tab-bar {
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-color: var(--secondary-color);
    border-radius: 8px;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.dashboard-tab-bar::-webkit-scrollbar,
.horizontal-tabs::-webkit-scrollbar,
.appointments-tab-bar::-webkit-scrollbar,
.horizontal-tabs-finance::-webkit-scrollbar,
.horizontal-tabs-performance::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.tab-button,
.tab-button-finance,
.tab-button-performance,
.event-tab-button {
    padding: 10px !important;
    margin: 0;
    border: none;
    white-space: nowrap;
    background-color: transparent;
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    box-sizing: border-box;
    flex-grow: 1; 
    flex-basis: auto;
    min-width: max-content;
    white-space: nowrap;
}

.tab-button:hover,
.tab-button-finance:hover,
.tab-button-performance:hover,
.event-tab-button:hover {
    background-color: var(--tertiary-color);
    opacity: 0.9;
    transform: all 0.3sec ease;
}

.tab-button.active,
.tab-button-finance.active,
.tab-button-performance.active,
.event-tab-button.active {
    border-radius: 5px;
    font-weight: bold;
    background-color: white;
    box-shadow: 1px 1px 2px 1px rgba(140, 158, 255, 0.2); /* Soft blue glow */
    font-size: 0.8em;
}

/* Specific colors for each status tab */
.tab-button[data-status="all"],
#dashboardCardTotal,
.tab-button[data-status="previous"] {
    color: #6c757d; /* Gray for All */
}

.tab-button[data-status="booked"],
#dashboardCardBooked {
    color: #ffc107; /* Orange for Booked */
}

.tab-button[data-status="arrived"],
#dashboardCardArrived {
    color: #dc3ddf; 
}

.tab-button[data-status="checked-in"],
#dashboardCardChecked {
    color: #007bff; /* Green for Checked-in */
}

.tab-button[data-status="done-refraction"],
#dashboardCardRefraction {
    color: #17a2b8; /* Cyan for Done refraction */
}

.tab-button[data-status="got-examined"],
#dashboardCardAssistant,
.tab-button[data-status="today"] {
    color: #6f42c1; /* Purple for Seen by assistant doctor */
}

.tab-button[data-status="completed"],
.tab-button[data-status="completed-surgery"],
#dashboardCardCompleted,
.tab-button[data-status="upcoming"] {
    color:  #28a745; /* Blue for Completed */
}

/* NEW: Surgery-specific colors */
.tab-button[data-status="prepared-for-surgery"],
#dashboardCardPrepared,
.tab-button[data-status="no-show"] {
    color: #fd7e14; /* Orange for Prepared */
}

.tab-button[data-status="ongoing-surgery"],
#dashboardCardOngoing,
.tab-button[data-status="cancelled"] {
    color: #dc3545; /* Red for Ongoing Surgery */
}

/* Hide rows that are not selected */
.hidden-row {
    display: none;
}


.horizontal-tab-content,
.horizontal-tab-content-finance,
.horizontal-tab-content-performance {
    display: flex;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    display: none;
    padding: 30px;
    position: relative;
    overflow-x: auto;
}

.horizontal-tab-content.active,
.horizontal-tab-content-finance.active,
.horizontal-tab-content-performance.active {
    display: block;
}

 /* Ensure tab content is initially hidden unless active */
.tab-content {
    display: none;
    overflow-x: auto;
    padding: 5px;
}

.tab-content.active {
    display: block;
}

.surgery-container {
    position: relative;
    background-color: var(--secondary-color);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    margin: 20px 10px;
    box-shadow: 2px 2px 4px rgb(51, 51, 85, 0.05);
}

.surgery-container-title {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.1em;
    color: var(--primary-color);
    font-weight: bold;
    
}

.my-appointments-filter {
    padding: 0 10px;
}

.my-appointments-filter .form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    background-color: var(--secondary-color);
    border: 1px solid #e1e5ff;
    border-radius: 12px;
}

.my-appointments-filter .form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    appearance: none;
    background: white;
}

.my-appointments-filter .form-check-input:checked {
    background: var(--button-submit-hover);
    border-color: var(--button-submit);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.my-appointments-filter .form-check-input:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.my-appointments-filter .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    border-color: #6366f1;
}

.my-appointments-filter .form-check-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none;
    letter-spacing: -0.01em;
}

.my-appointments-filter .form-check-input:checked ~ .form-check-label {
    color: var(--button-submit-hover);
}

.my-appointments-filter .form-check-label::before {
    content: "📅";
    margin-right: 8px;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Active state animation */
.my-appointments-filter .form-check-input:active {
    transform: scale(0.95);
}

/* Loading state */
.my-appointments-filter.loading .form-check-input {
    opacity: 0.6;
    pointer-events: none;
}

.my-appointments-filter.loading .form-check-label::after {
    content: " (updating...)";
    font-size: 12px;
    color: #6b7280;
    font-weight: normal;
}



/* =================================================== */
/* ---           Patients Table Styles             --- */
/* =================================================== */

.icon-button,
.action-button-appointments,
.action-button-events,
.action-button {
    background-color: transparent; /* Make background transparent by default */
    border: none;
    padding: 3px; /* Adjust padding to make icons clickable */
    font-size: 16px; /* Size of the icon */
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 5px; /* Slightly rounded corners for hover effect */
    color: #506773; /* Default icon color */
}

/* Specific colors for view and edit buttons */
.actions-view-timeline {
    color: #28a745; /* Green for view */
}

.actions-view-timeline:hover,
.convert-button:hover {
    color: #1e7e34;
}

.actions-edit-patient {
    color: #007bff; /* Blue for edit */
}

.actions-edit-patient:hover {
    color: #0056b3;
}

.dropdown-toggle-patients {
    color: var(--primary-color);
    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
}

.dropdown-toggle-patients:hover {
    transform: translateY(0);
}


.gender-icon {
    color: #888;
    font-size: 1.1em;
    vertical-align: middle;
    font-weight: normal;
}

.gender-icon .fa-mars {
    color: var(--primary-color);
}

.gender-icon .fa-venus {
    color: var(--error-color-hover);
}



/* =================================================== */
/* ---                Modal styles                 --- */
/* =================================================== */


.modal-overlay {
    display: none; /* Keep display flex even when hidden so its children can be centered */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0; /* Start completely transparent */
    visibility: hidden; /* Hide it visually and remove from tab order/accessibility */
    pointer-events: none; /* Make it unclickable */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Add visibility to transition */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-overlay.active {
    opacity: 1; /* Make it fully visible */
    visibility: visible; /* Make it visible for screen readers and tab order */
    pointer-events: auto; /* Make it clickable */
}

.modal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #ffffff;
    padding: 35px 40px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: flex-start;
    width: 90vw;
    max-width: 850px;
    max-height: 90%;
    transform: translateY(-20px);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease;
    overflow: auto;
    position: relative;
    z-index: 99999;
}


#visitDetailsModal .modal-content {
    /* Set the modal content to use flexbox to correctly position header/footer and the scrollable content */
    display: flex;
    flex-direction: column;
}

.modal-scroll-content {
    max-height: 70vh; /* Adjust this value as needed */
    overflow-y: auto;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}
/* Overlay */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;

  /* Start hidden */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Show overlay smoothly */
.modal.active {
  opacity: 1;
  pointer-events: auto; /* clickable again */
  display: flex;
}

/* Modal content */
.modal-content-small {
  gap: 15px;
  margin-top: 20px;
  background-color: #ffffff;
  padding: 15px 25px;
  border-radius: 15px;
  box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 80vw;
  height: 50px;
  transform: translateY(-150%);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  opacity: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

/* Animate content in when modal is active */
.modal.active .modal-content-small {
  transform: translateY(0);
  opacity: 1;
}

.modal-content-small .modal-label-group {
    display: flex;
    flex-direction: column; 
    line-height: 1.2;
    align-items: left;
    text-align: left;
    justify-content: center;
    color: var(--text-color-primary);
}

.modal-label-group div:first-child span {
    font-size: 1em !important; 
    font-weight: bold; 
    color: var(--text-color-primary);
}

.modal-label-group div:last-child span {
    font-size: 1em !important;
    color: var(--text-color-primary); 
}

.modal-content .modal-label-group {
    display: flex;
    flex-direction: column; 
    line-height: 1;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.modal-content .modal-label-group p {
    font-size: 1em;
    color: var(--text-color-secondary);
    margin: 0;
}

.modal-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.modal-overlay.active .modal-content,
.modal-overlay.active .modal-content-small {
    transform: translateY(0); /* Slides into place */
}

.modal-content-small .modal-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;

}

.modal-content p {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.5;
    font-size: 1.1em;
}

.modal-content .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.modal-content .modal-buttons button {
    padding: 12px 20px; /* Larger buttons */
    border: none;
    border-radius: 45px; /* Sleek, pill-shaped buttons */
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.modal-content-small .modal-buttons button {
    padding: 15px 20px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    min-width: 120px;
}

.modal-content .modal-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-content .modal-buttons .confirm-btn { /* For OK/Confirm/Yes */
    background-color: #28a745; /* Success green */
    color: white;
}

.modal-content .modal-buttons .confirm-btn:hover {
    background-color: #218838;
}

.modal-content .modal-buttons .cancel-btn { /* For Cancel/No */
    background-color: #6c757d; /* Standard gray */
    color: white;
}

.modal-content .modal-buttons .cancel-btn:hover {
    background-color: #5a6268;
}

.modal-content .close-button,
.file-modal-content .close-button,
.remove-file-btn,
.close-modal-btn {
    color: #e02323;
    float: right;
    position: absolute;
    right: 20px;
    top: 10px;
    background-color: transparent;
    padding: 10px;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.remove-file-btn {
    right: 5px;
    top: 2px;
}

.close-button:hover,
.close-button:focus,
.remove-file-btn:hover,
.remove-file-btn:focus {
    cursor: pointer;
    transform: translateY(-2px);
    background-color: transparent;
}

.modal-content-messages {
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: fixed;
    left: 50%;
    top: 10px;
    background-color: #ffffff;
    padding: 15px 25px;
    border-radius: 15px; /* More rounded corners for a sleek look */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 50vw;
    height: 50px;
    transform: translateX(-50%) translateY(-150%);
    overflow: hidden; /* Ensures content doesn't spill out of rounded corners */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    z-index: 1001;
    font-size: 14px;
    font-weight: 500;
}

.modal-content-messages.active {
    opacity: 1; 
    transform: translateX(-50%) translateY(0); 
}

.modal-content-messages.success {
    border-color: #4CAF50; /* Green border */
    color: #336633; /* Darker green text */
}

/* Style for error messages */
.modal-content-messages.error {
    border-color: #f44336; /* Red border */
    color: #cc0000; /* Darker red text */
}



.modal-overlay p {
    color: var(--text-grayedout);
    font-size: 0.8em;
    font-weight: normal;
    text-align: center;
}

/* =================================================== */
/* ---     Sign In and Account Specific Styles     --- */
/* =================================================== */

/* Body for the sign-in page */
body.signin-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Full viewport height */
    background: linear-gradient(to bottom right, #e0f2f7, #ba8bd7);    
    background-size: cover;
    background-color: #e0f2f7; 
    position: relative; /* Needed for the pseudo-element overlay */
    z-index: 1; /* Ensure content is above the overlay */
    margin: 0;
    padding: 20px; /* Ensure some padding for very small screens */
    box-sizing: border-box; /* Include padding in dimensions */
}

/* Container for the sign-in form */
.signin-container {
    display: flex;
    flex-direction: column;
    line-height: 1;
    background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent white background for the container */
    backdrop-filter: blur(10px); /* Blurs the content behind the container */
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    padding: 50px 50px 100px 50px;
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1); /* Deeper, softer shadow */
    width: 350px;
    min-width: 250px;
    text-align: center;
    position: relative; /* For potential future animations/elements */
    overflow: hidden; /* Ensures inner content respects border-radius */
}

.signin-container h2 {
    color: #34495e; /* Darker, prominent color for heading */
    font-size: 28px; /* Larger font size for impact */
    margin-bottom: 30px; /* More space below heading */
    font-weight: 700; /* Bold heading */
    position: relative;
    padding-bottom: 10px;
}

.signin-container h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #6a89cc; /* Accent color underline */
    border-radius: 5px;
}

/* Login button styling (inherits from general .button, but can be further enhanced) */
.signin-container .button[type="submit"] {
    width: 100%;
    padding: 15px 25px; /* Larger padding for better click area */
    margin-top: 50px; /* Space above the button */
    font-size: 18px; /* Larger font for primary action */
    font-weight: 700; /* Bolder font */
    background-color: #6a89cc; /* Primary button color */
    color: white;
    border: none; /* Remove border if not desired */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft initial shadow */
}

.signin-container .button[type="submit"]:hover {
    background-color: #5b79bb; /* Darker on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.signin-container .button[type="submit"]:active {
    background-color: #4a67a0; /* Even darker on click */
    transform: translateY(0); /* Press down effect */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); /* Inset shadow on click */
}

.input-field-container {
    position: relative;
    width: 100%;
}

.input-group input {
    padding-right: 35px; /* Make space for the icon */
    box-sizing: border-box;
}

.input-group input.error {
    border-color: #e74c3c; /* Red border for errors */
}

.error-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #e74c3c;
    font-size: 1.2em;
    display: none; /* Hide by default */
}

.input-group input.error + .error-icon {
    display: block; /* Show the icon when the input has the 'error' class */
}

.error-message {
    color: #e74c3c;
    font-size: 0.85em;
    margin-top: 5px;
    display: none; /* Hide by default */
    text-align: left;
}

.error-message.active {
    display: block; /* Show the message when it has the 'active' class */
}

.error-input {
    border-color: #cc0000 !important;
}

/* Patient Register PAGE SPECIFIC STYLES */

.register-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 70px;
    max-width: calc(100vw - 30%);
    min-width: 600px;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly less translucent than signin-container */
    padding: 50px;
    border-radius: 50px; /* Standard rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left; /* Keep text aligned left within the container */
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.6);
    
    
}

/* ACCOUNT PAGE SPECIFIC STYLES */

.account-body {
    display: flex; /* Use flexbox */
    flex-direction: column;
    justify-content: space-between;
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Take full viewport height */
    margin: 0; /* Remove default body margin */
    padding: 20px; /* Add some padding around the container for small screens */
    box-sizing: border-box; /* Include padding in element's total width and height */
    background: linear-gradient(to bottom right, #e0f2f7, #ba8bd7);    
    background-size: cover;
    background-color: #e0f2f7; 
    position: relative;
    z-index: 1;
}


.account-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly less translucent than signin-container */
    padding: 15px;
    text-align: left; /* Keep text aligned left within the container */
    
}

.accountInfo-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    margin-top: 15px;
    flex: 1;
    background-color: var(--secondary-color);
}


.input-group label,
.complaint-label,
.diagnosis-label,
.treatment-plan-label,
.history-label,
.medicine-label,
.investigations-label,
.event-type-label,
.procedure-label,
.expense-label,
.medicine-group-label {
    display: flex; /* Make labels block-level for stacking */
    margin-bottom: 3px; /* Space between label and input */
    font-weight: 550; /* Slightly bolder labels */
    color: #555;
    font-size: 14px;
    white-space: nowrap;
}

.diagnosis-item {
    margin-top: 10px;
}

/* =================================================== */
/* ---                 Sheet Styles                --- */
/* =================================================== */


.grid-eight-columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 0.2fr 1fr 1fr 1fr; 
    gap: 2px;
    align-items: center; /* Vertically center items within grid cells */
    margin-bottom: 5px; /* Space between form rows */
    min-width: 700px;
}

.grid-eight-columns-modal {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 0.2fr 1fr 1fr 1fr; 
    gap: 2px;
    align-items: center; /* Vertically center items within grid cells */
    min-width: 600px;
}

/* Ocular Examination and Alignment fields */
.examination-section .form-row:not(.refraction-labels-header):not(.ipd-dominant-row) .eye-column,
.examination-section-visitCard .form-row:not(.refraction-labels-header):not(.ipd-dominant-row) .eye-column {
    grid-column: span 3; /* Make the input field span 3 columns */
}

.examination-section-visitCard {
    border-left: 1px solid var(--tab-color-active);
    margin-bottom: 8px;
    min-width: 600px;
    flex: 1.5;
    padding-left: 15px;
}

.separator-column {
    text-align: center; /* Keep existing text-align, but flexbox is more robust */
    font-weight: bold;
    color: #ccc;
    grid-column: 5;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;   /* Centers vertically */
}


.right-align .eye-input {
  text-align: right;
}

.left-align .eye-input {
  text-align: left;
}

.refraction-values {
    display: flex;
    gap: 4px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 35px;
}

/* Container for each label or input */
.refraction-input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 35px;
}

.refraction-input-group-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 15px;
    margin-left: 3px;
    margin-bottom: 3px;
}

.refraction-labels-header .right-align {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 2 / 5; /* Aligns with right eye fields */
}

.refraction-labels-header .left-align {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 6 / 9; /* Aligns with left eye fields */
}

.header-label {
    text-align: left;
    font-weight: 500;
    font-size: 0.9em;
}

.eye-column {
    position: relative;
}

.eye-column.iop-input-group {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1 column for counter, 2 for select */
    gap: 5px;
    align-items: center;
}

.eye-column.right-align {
    text-align: right;
}

.eye-column.left-align {
    text-align: left;
}
.form-item-title {
    font-size: 14px;
    font-weight: bold;
    color: #505050;
    padding-left: 15px;
    text-align: left;    
}

.form-item-title-modal {
    font-size: 0.9em;
    font-weight: normal;
    color: var(--text-grayedout);
    padding-left: 35px;
    text-align: left;
    white-space: nowrap;
    opacity: 0.7;
}


.horizontal-separator {
    display: flex;
    background-color: #eaeaf6;
    height: 1px;
    margin-top: 15px;
    margin-bottom: 25px;
    opacity: 0.5;
    flex: 1;
    width: 100%;
}

.sheet-input {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    font-weight: normal;
}

.modal-content .right-align {
    text-align: right;
    display: block; /* Make the span a block-level element to apply text-align */
}

.modal-content .left-align {
    text-align: left;
    display: block;
}

.summary-metrics {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    width: calc ( 100% - 280px);
    background: linear-gradient(to bottom right, #e0f2f7, #eddff5);    
    background-size: cover;
    background-color: #e0f2f7; 

}


.patient_edit_button {
    color: var(--success-color);
    border: 0;
    background-color: transparent;
    font-size: 0.9em;
    font-weight: normal;
    border: 0;
    margin-left: 5px;
    margin-bottom: 5px;
    align-self: end;
    cursor: pointer;
}


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

.patient_label_button,
.reception_request_button {
    background-color: transparent;
    color: var(--button-submit);
    font-weight: 0.9em;
    font-weight: normal;
    border: 0;
    margin-bottom: 5px;
    align-self: end;
    cursor: pointer;
}

.reception_request_button {
    color: var(--border-focus);
}

.patient_label_button:hover {
    color: var(--button-submit-hover);
}

.reception_request_button:hover {
    color: var(--button-submit);
}

/* ==================================================== */
/* =============== Dropdown Container ================= */
/* ==================================================== */

.custom-dropdown-dashboard,
.custom-dropdown-sheet,
.dropdown {
    position: relative; /* Crucial for positioning the dropdown menu */
    display: inline-block; /* Allows the button to take only its necessary width */
}

/* Dropdown Button */
.dropdown-toggle {
    background-color: transparent;
    color: white;
    font-size: 16px;
    padding: 3px;
    cursor: pointer;
    transform-origin: top center;
    border: 0;
}

/* Dropdown Menu (the list of actions) */
.dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 8px;
    padding: 10px 0;
    right: 0;
    left: auto;
    top: 100%;
    list-style: none;
    margin-top: 5px;
    text-align: left;
}

.dropdown-menu.show {
    visibility: visible;
    opacity: 1;
}


/* Dropdown Items (individual links) */
.dropdown-item {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    white-space: nowrap; /* Prevent text wrapping */
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: left;
}

.dropdown-item i {
    margin-right: 8px; /* Space between icon and text */
    margin-left: 0;
    width: 18px; /* Ensure consistent icon alignment */
    text-align: center;
}

.dropdown-item:hover {
    background-color: #e2eaf2; /* Light blue background on hover */
    color: #0056b3;
}



/* ========================================= */
/* --- Organizations Tab Specific Styles --- */
/* ========================================= */

.organization-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.organization-item-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
   
}

.organization-form {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    margin: 15px;
    box-sizing: border-box;
}

.branches-container {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 15px;
    margin-top: 10px;
}


.organization-branch-card {
    background-color: #f5f5ff; /* Assuming a CSS variable for card background */
    border: 1px solid #e9e9fa; /* Assuming a CSS variable for border color */
    border-radius: 8px;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative; /* For positioning the remove branch button */
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

.organization-branch-card-profile {
    background-color: #f5f5ff; /* Assuming a CSS variable for card background */
    border: 1px solid #e9e9fa; /* Assuming a CSS variable for border color */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative; /* For positioning the remove branch button */
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    margin: 25px;
}


/* Styling for the collapsable card */
.organization-branch-card .card-header-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.card-header-toggle h3 {
    margin-bottom: 0;
    font-size: 1rem;
    
}

/* Hide the content by default */
.organization-branch-card .card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 15px;
}

/* Show the content when the card is uncollapsed */
.organization-branch-card.uncollapsed-card .card-content {
    max-height: 1000px; /* A large value to allow the content to fully expand */
    transition: max-height 0.3s ease-in;
    margin-bottom: 25px;
    margin-top: 5px;
    overflow-y: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.card-content .modal-buttons {
    flex-wrap: wrap;
}

/* Optional: Add a visual indicator like a down arrow on the header */
.organization-branch-card .card-header-toggle::after {
    content: '\25BC'; /* Unicode for a down arrow */
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

/* Rotate the arrow when the card is uncollapsed */
.organization-branch-card.uncollapsed-card .card-header-toggle::after {
    transform: rotate(180deg);
}

.remove-branch-btn {
    background-color: var(--error-color);
    color: white;
}

.remove-branch-btn:hover {
    background-color: var(--error-color-hover);
}

.operating-hours-container {
    padding-left: 15px;
    margin-bottom: 8px;
    border-radius: 5px;
}

.operating-hour-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.operating-hour-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.operating-hour-row select,
.operating-hour-row input[type="time"] {
    flex: 1;
    min-width: 120px;
}

.operating-hour-row {
    background-color: transparent;
    color: var(--danger-color);
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 5px;
    align-self: center;
    line-height: 1;
}

.operating-hour-row {
    color: var(--danger-color-dark);
}

.operating-hour-entry {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9e9fa;
    padding-bottom: 5px;
    padding-right: 30px;
    padding-top: 10px;
    box-sizing: border-box;
    min-width: 250px;

}

.add-operating-hour-btn,
.remove-operating-hour-btn {
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    padding: 0px;
    color: #008000;
    font-size: 20px;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
 
}

.remove-operating-hour-btn {
    color: #dc3545;
    justify-content: end;
    margin-top: 18px;
}


/* =================================================== */
/* ---        Glasses and Medicines Styles         --- */
/* =================================================== */

.glasses-medicines-container,
.complaint-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px 20px;
}

.prescription-table {
    width: 100%;
    border-collapse: collapse; /* Ensures borders are smooth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Soft shadow for the whole table */
    border-radius: 20px; /* Smooth corners for the table */
    overflow: hidden; /* Ensures the border-radius is applied to content */
    border: none;
    color: var(--text-color-secondary);
    max-width: 650px;
    min-width: 500px;
}

.prescription-table th {
    padding: 15px 25px;
}

.prescription-table th, td {
    padding: 6px 15px; /* Comfortable padding */
    text-align: center;
    border: 1px solid #e0e0e0; /* Lighter border color */
    vertical-align: middle; /* Vertically align content */
    font-size: 0.8em;
}

.prescription-table th, td select {
    color: var(--text-color-secondary);
}

.prescription-table thead th {
    background-color: #1f324b; /* Primary color for header */
    color: white;
    font-weight: 600; /* Slightly bolder font for headers */
    letter-spacing: 0.5px;
    padding: 15px 25px;
}

.prescription-table tbody td:first-child {
    background-color: hsl(233, 23%, 85%); /* A slightly darker gray for row titles */
    text-align: center; /* Align row titles to the left for better readability */
    color: hsl(231, 28%, 29%);
    font-weight: 600;
    padding: 6px 25px;
    font-size: 0.9em;
    line-height: 1;
}
.prescription-table td select {
    width: 100%;
    min-width: 80px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px; /* Smooth corners for dropdowns */
    background-color: #ffffff;
    font-size: 14px;
    outline: none; /* Remove default focus outline */
    -webkit-appearance: none; /* Remove default dropdown arrow for custom styling */
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: center;
}

.prescription-table td select:focus {
    border-color: transparent; /* Makes the border transparent on focus */
    background-color: #f3f3f3;
}

#ClearFields {
    background-color: rgb(255, 241, 241);
}

#ClearFields:hover {
    background-color: rgb(255, 206, 206) !important;
}

#ClearFields:focus {
    background-color: var(--error-color);
    color: white;
}

/* ==================================================== */
/* -- Info Section Layout Styles and Subspecialities -- */
/* ==================================================== */

.info-section-grid {
    display: grid;
    /* This creates as many columns as will fit, each with a minimum width of 200px */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 10px;
    padding: 15px;
    background-color: transparent;
}

.items-container {
    flex-grow: 1;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.items-container:hover {
    border: 1px solid var(--button-submit-hover);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);

}

.items-container :last-child {
    font-weight: normal;
    color: var(--text-color-secondary);
    font-size: 0.9em;
}

.info-item.full-width {
    flex-basis: 100%;
    flex-direction: row;
    align-items: baseline;
}

.info-item.full-width strong {
    margin-right: 10px;
    white-space: nowrap;
}


/* --- Labels (Strong Tag) Styling --- */
.info-item strong {
    font-size: 1em;
    color: #555;
    display: block;
}

/* --- Values (Span Tag) Styling --- */
.info-item span {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    font-weight: 500;
    margin-left: 10px;
}

/* --- Edit Profile Button Styling --- */
.edit-profile-btn .button[type="submit"] {
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    margin: 25px auto 0 auto;
}

/* Styling for the checkbox group */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    color: #333;
}

.checkbox-group input[type="checkbox"] {
    margin: 0; /* Remove default margin */
    margin-right: 5px; /* Add specific right margin for spacing */
}



/* =================================================== */
/* ---           Visits Timeline Styles            --- */
/* =================================================== */

.timeline-container {
    padding: 20px;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%; 
    overflow-x: auto; 
    padding: 10px;
}

.timeline-visit-container,
.timeline-surgery-visit-container {
    background-color: var(--secondary-color);
    border-radius: 12px;
    overflow: hidden;
    min-width: 1100px; 
    transition: box-shadow 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.timeline-surgery-visit-container .timeline-visitHeader {
    background-image: linear-gradient(to right, rgb(221, 255, 226), rgb(240, 255, 240));
}

.timeline-visit-container:hover,
.timeline-surgery-visit-container:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Header styling */
.timeline-visitHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-image: linear-gradient(to left, var(--secondary-color), #d5e4ff);
    cursor: pointer;
}

.visitCard-Btns-container {
    display: flex;
    gap: 10px;
}

.visitCard-iconBtn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 1em;
    transition: color 0.3s ease;
}

.visitCard-iconBtn:hover {
    color: #007bff;
}

/* Body styling and collapse animation */
.timeline-visitBody {
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    transition: all 0.5s ease-in-out;
    background-color: white;
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 2000px;
}

.timeline-visitBody.collapsed {
    max-height: 0;
    padding: 0 20px;
}

.timeline-visitBody-surgery {
    overflow: hidden;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px;
    transition: all 0.5s ease-in-out;
    background-color: white;
    max-height: 2000px;
}

.timeline-visitBody-surgery.collapsed {
    max-height: 0;
    padding: 0 20px;
}

.visitCard-leftPart {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1;
}

/* Input group styling for titles and info */
.visitCard-input-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.timeline-visit-title {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-color-primary);
    margin-bottom: 5px;
    margin-right: 20px;
    margin-top: 25px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.visitCard-leftPart .visitCard-input-group:first-child .timeline-visit-title {
    margin-top: 0;
}

.examination-section-visitCard .timeline-visit-title:first-child {
    margin-top: 0;
}

.timeline-visit-title i {
    margin-right: 10px;
}

.timeline-visit-info {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    line-height: 1.5;
    margin-left: 40px;
    text-align: left;
}

/* Header Lines (container for the two lines) */
.header-lines {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Vertical space between the two header lines */
    white-space: nowrap;
}

/* Styling for each header line */
.header-lines > div {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: var(--text-grayedout);
    gap: 10px; /* Horizontal space between items and separators */
}

/* Vertical separator styling */
.header-lines .separator {
    display: inline-block;
    width: 1px;
    height: 1.2em;
    background-color: #a0a0a0;
    align-self: center;
    margin: 0;
}

.header-lines i {
    margin-right: 5px; /* Space between the icon and the text */
    color: var(--primary-color);
    width: 15px;
    text-align: center;
}

.status-booked {
    background-color: #fffcf1;
    color: #ffc107;
}

.status-completed {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-cancelled {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #c62828;
}

.status-no-show {
    background-color: #f7e9ff;
    color: #8c28c6;
    border: 1px solid #8c28c6;
}

.status-arrived {
    background-color: #ffeaff;
    color: #dc3ddf;
}
.status-checked-in {
    background-color: #e4e8ed;
    color: #007bff;
}

.status-done-refraction {
    background-color: #e4eff1;
    color: #17a2b8;
}

.status-got-examined {
    background-color: #ede4ff;
    color: #6f42c1;
}

.status-walk-in {
    background-color: var(--error-color-hover);
    color: white;
}

.status-walk-in .fa-walking {
    color: white;
}

.status-changer-button,
.status-changer-button-surgery {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 15px;
    border: none;
    border-radius: 25px;
    background-color: var(--secondary-color);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    color: var(--text-color-primary);
    font-family: 'Cairo', 'Roboto';
}

.status-changer-button-surgery {
    right: 10px !important;
    left: auto;
}

.status-changer-button:hover,
.status-changer-button-surgery:hover {
    background-color: var(--border-color);
}

#refractionStatusIcon,
#examinationStatusIcon,
#preparationStatusIcon {
    color: green; /* Color for the checkmark */
    margin-right: 8px; /* Space between the icon and text */
    font-size: 1.2em;
}

.status-changer-button:disabled,
.status-changer-button-surgery:disabled {
    cursor:default;
}

/* Base inactive style */
.inactive-visit {
    background-color: #f8f9fa !important;
    box-shadow: none;
}

.inactive-visit .timeline-visitHeader {
    cursor: default !important;
}

.inactive-visit:hover {
    box-shadow: none;
}

/* Cancelled and No-Show visits - Red theme */
.inactive-visit.inactive-cancelled {
    border-left: 4px solid #dc2626 !important;
}

.inactive-visit.inactive-cancelled .header-line-1,
.inactive-visit.inactive-cancelled .header-line-2,
.inactive-visit.inactive-cancelled i {
    color: #dc2626;
    opacity: 0.7;
}

.inactive-visit.inactive-cancelled .timeline-visitHeader {
    background-image: linear-gradient(to left, #fee2e2, #fecaca) !important;
}

.inactive-visit.inactive-cancelled.timeline-surgery-visit-container .timeline-visitHeader {
    background-image: linear-gradient(to right, #fee2e2, #fecaca) !important;
}

/* Booked and Arrived visits - Blue theme */
.inactive-visit.inactive-booked {
    border-left: 4px solid var(--text-color-primary) !important;
}



/* ============================================================== */
/* ---       Different Styles in New Appointment Modal        --- */
/* ============================================================== */
.time-slots-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    height: 85px;
}

.time-slot-button {
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--secondary-color);
    border: 0;
    font-size: 0.9em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 100px;
    text-align: center;
    padding: 7px 20px;
    color: var(--text-color-secondary);
}

.time-slot-button:hover {
    background-color: var(--tab-color-active);
}

.time-slot-button.active.btn-primary {
    background-color: #28a745 !important;
    color: white !important;
    border-color: #218838 !important;
}

.no-slots-message-modal {
    color: #666;
    text-align: center;
    width: 100%;
    font-size: 1em !important;
    margin: 20px 0 !important;
    font-weight: normal;
    opacity: 0.8;
}

.time-slot-button.past-slot {
    background-color: #e9ecef;
    color: #6c757d; /* Darker gray text */
    border-color: #ced4da; /* Gray border */
    cursor: not-allowed; /* Change cursor to indicate non-interactiveness */
    opacity: 0.7; /* Slightly faded appearance */
    pointer-events: none; /* Ensure no click events are triggered even if button.disabled fails */
}

/* Optional: Prevent hover/active effects on past slots */
.time-slot-button.past-slot:hover,
.time-slot-button.past-slot:active,
.time-slot-button.past-slot:focus {
    background-color: #e9ecef !important; /* Keep background gray on hover/active */
    color: #6c757d !important; /* Keep text gray on hover/active */
    border-color: #ced4da !important; /* Keep border gray on hover/active */
    box-shadow: none !important; /* Remove any shadow effects */
}

.search-results-dropdown {
    list-style: none;
    padding: 0;
    margin: 2px 0 0 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    position: absolute; /* or relative, depending on your layout */
    width: 100%;
    z-index: 10000; /* Ensure it appears above other elements */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: none; /* Hidden by default */
}

.search-result-item {
    padding: 10px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-weight: 500px;
    color: var(--primary-color);
}

.search-result-item.highlighted {
    background-color: #f0f0f0; 

}
.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f0f0f0;
}

.search-results-dropdown .search-result-item strong {
    font-weight: bold;
    color: var(--text-color-secondary); /* A slightly darker color for emphasis */
    margin-right: 5px; /* Add some space between name and details */
}

.search-results-dropdown .patient-details-subtext {
    font-weight: normal; /* Ensure it's not bold */
    color: var(--text-grayedout); /* Gray color */
    font-size: 1em; /* Slightly smaller font size */
    
}

.search-results-dropdown .patient-details-subtext i {
    margin: 3px;
}

.add-new-patient-from-appointment-btn {
    width: 100%; /* Make it span the full width of its parent */
    background-color: #28a745; /* A green color, like for 'add' */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    display: none; /* Hidden by default */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
    z-index: 1000;
}

.add-new-patient-from-appointment-btn:hover {
    background-color: #218838; /* Darker green on hover */
}

.add-new-patient-from-appointment-btn i {
    margin-right: 8px; /* Space between icon and text */
}

.no-results-item,
.loading-item {
    padding: 10px;
    text-align: center; /* Center the text */
    color: #888; /* A subtle gray color */
    font-style: italic; /* Make it italic */
    background-color: #f9f9f9; /* A slightly different background */
    border-top: 1px solid #eee; /* Add a top border if desired */
    font-size: 0.85em; /* Slightly smaller or adjust as needed */
    font-weight: 400;
}

.search-results-dropdown .no-results-item:last-child {
    border-bottom: none; /* Ensure no bottom border if it's the last item in the list */
}

/* Container for the select and input fields */
.mobile-number-fields {
    display: flex;
    gap: 7px;
}

/* Wrapper for the input, message, and button */
.mobile-input-wrapper {
    position: relative;
    display: flex; /* Makes the input a flex item */
    flex-direction: column;
}

/* Base styles for the message container (hidden by default) */
#mobile-validation-container {
    display: none; /* Use 'display' to hide the container */
    position: absolute;
    flex-direction: column;
    left: 0;
    top: 38px;
    padding: 10px;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 1px 2px 2px rgba(154, 154, 154, 0.1);
    z-index: 10000;
}

#mobile-validation-message {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    font-weight: normal;
}

/* Positioning and style for the button */
#save-family-btn {
    font-size: 0.8em;
    padding: 5px 10px;
    border: none;
    background-color: var(--secondary-color) !important;
    color: var(--success-color);
    border-radius: 15px;
    width: 100%;
    cursor: pointer;
    text-align: center;
    margin-top: 8px;
}

#save-family-btn:hover {
    background-color: var(--tab-color-hover);
}

/* Style for the text inside the message container */
#mobile-validation-container .validation-message {
    color: var(--text-color-primary);
    font-size: 0.8em;
    margin-bottom: 5px;
    padding: 0;
    font-weight: normal;
}

.mobile-validation-container.exact-duplicate {
    background: #f8d7da;
    border-color: #f5c6cb;
}

.validation-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.warning-icon {
    color: #856404;
    margin: 0 10px;
    font-size: 2.5em;
}

.exact-duplicate .warning-icon {
    color: #721c24;

}

/* ============================================================== */
/* ---        Different Styles in Appointments Lists          --- */
/* ============================================================== */

.appointment-status,
.event-status {
    padding: 1px 10px; /* Padding inside the "tag" */
    border-radius: 15px; /* Makes it look like a rounded tag */
    font-weight: 400;
    text-align: center;
    display: inline-block; /* Ensures padding and border-radius apply well */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    text-transform: capitalize; /* Ensures the first letter of the status text is capitalized */
    font-size: 0.9em; /* Slightly smaller text */
    white-space: nowrap;
}

.status-sheet {
    position: absolute !important;
    right: 10px;
    top: 10px;
    padding: 3px 15px !important;
}

.status-secondary {
    position: absolute !important;
    right: 10px;
    top: 35px;
    padding: 3px 15px !important;
}

/* Example styling for other possible statuses */

.status-cancelled {
    background-color: #ffebee; /* Light red background */
    color: #c62828; /* Darker red text */
    border: 1px solid #c62828; /* Red border */
}

.status-walk-in {
    background-color: var(--error-color-hover);
    color: white;
}

.status-unseen {
    color: white;
    background-color: var(--button-submit);
}

.status-seen {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

.appointment-date-display {
    font-size: 0.9em;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
}

.appointment-time-display {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-grayedout);
    direction: ltr; /* Force left-to-right for time display */
    unicode-bidi: isolate; /* Isolate from surrounding text direction */
}

.patient-details-container {
    display: flex;
    flex-direction: column; /* Stacks name and age vertically */
    align-items: flex-start;
}

.patient-name-display {
    font-weight: bold;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.patient-age-display {
    font-size: 0.85em;
    color: var(--text-grayedout);
    margin-top: 2px; /* Small space between name and age */
    font-weight: 400;
    direction: ltr; /* Force left-to-right for age numbers */
    unicode-bidi: isolate; /* Isolate from surrounding text direction */
}
.service-details-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-name-display {
    font-weight: 500;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.service-type-display {
    font-size: 0.9em;
    color: var(--text-grayedout);
    margin-top: 2px;
}



.action-button-appointments.reschedule-button:hover,
.action-button-events.reschedule-button:hover {
    color: var(--success-color-hover);
}


.unseen-dot {
    display: inline-block;
    background-color: var(--button-submit);
    border: 0;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    margin: 5px;
    margin-bottom: 3px;
}

.appointments-filters-area {
    display: flex;
    flex-direction: column;
    gap: 0px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    margin: 10px;
}

.appointments-filters-area.applied-filters {
    border: 1px solid #28a745;
}

.appointments-filter-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    border-radius: 15px;
    border: 0;
    padding: 20px;
    max-height: 350px;
    overflow: auto; /* Important for hiding content that exceeds max-height */
    opacity: 1; /* Default state: fully visible */
    transition: max-height 0.5s ease-out,
                padding 0.5s ease-out,
                border 0.5s ease-out,
                opacity 0.3s ease-out; /* Opacity fades in/out slightly faster */
}

.appointments-filter-container.collapsed {
    max-height: 25px;
    padding-top: 0; /* Remove top padding */
    padding-bottom: 0; /* Remove bottom padding */
    border-top-width: 0; /* Hide top border */
    border-bottom-width: 0; /* Hide bottom border */
    opacity: 0; /* Make content fully transparent when collapsed */
}

.appointments-filters-title {
    color: var(--primary-color);
    background-color: white;
    border: 0;
    padding: 0 20px;
    margin-top: -15px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 16px;
    font-weight: bold;
    z-index: 200;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.appointments-filters-title:hover {
    color: var(--text-grayedout);
}

.appointments-filters-title i {
    transition: transform 0.5s ease-in-out; /* Smooth transition for icon rotation */
    transform: rotate(0deg); /* Default state: icon points down */
    transform-origin: center; /* Ensure rotation is around its center */
}

.appointments-filters-title i.rotated {
    transform: rotate(180deg); /* Rotated state: icon points up */
}

#filtersAppliedText {
    display: flex;
    background-color: var(--success-color);
    color: white;
    padding: 1px 10px;
    border: none;
    border-radius: 30px;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: normal;
    transition: all 0.3sec ease-in-out;
}

/* =================================================== */
/* ---   Styling for appointment count badges      --- */
/* =================================================== */

.appointment-count,
.events-count {
    display: inline-flex; /* Use flex for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding: 3px 8px; /* Horizontal padding */
    margin: 0 10px; /* Space from the tab name */
    border-radius: 8px; /* Pill shape (half of height) */
    color: white; /* White text for numbers */
    font-size: 11px; /* Slightly smaller font size */
    font-weight: bold;
    background-color: var(--text-grayedout); /* Default grey background */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

/* Optional: Specific colors for each tab's count */

.tab-button[data-status="today"] .appointment-count {
    background-color: #28a745; /* Green for today's appointments */
}

.tab-button[data-status="upcoming"] .appointment-count {
    background-color: #007bff; /* Blue for upcoming appointments */
}

.tab-button[data-status="no-show"] .appointment-count {
    background-color: #8c28c6; /* Blue for upcoming appointments */
}

.tab-button[data-status="cancelled"] .appointment-count {
    background-color: var(--error-color); /* Blue for upcoming appointments */
}

/* =================================================== */
/* ---            Notifications Styles             --- */
/* =================================================== */


@keyframes bell-swing {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(15deg); }   /* Swing right */
    30% { transform: rotate(-15deg); }  /* Swing left */
    45% { transform: rotate(10deg); }   /* Swing right, slightly less */
    60% { transform: rotate(-10deg); }  /* Swing left, slightly less */
    75% { transform: rotate(5deg); }    /* Swing right, even less */
    90% { transform: rotate(-5deg); }   /* Swing left, even less */
    100% { transform: rotate(0deg); }   /* Return to center */
}

/* Notifications Container */
.notifications-container {
    position: relative;
    display: inline-block;
    /* Adjust margin if needed, e.g., margin-left: 20px; */
}

/* Notifications Bell Button */
.notifications-toggle {
    background: none;
    border: 0;
    font-size: 1.5em; /* Adjust icon size */
    cursor: pointer;
    position: relative; /* Essential for badge positioning */
    padding: 5px;
    color: white;
    font-size: 20px;
    border: 0;
    cursor: pointer;
    transform-origin: top center; 
}

.notifications-toggle .fa-bell {
    display: inline-block; /* Essential for transform properties to work correctly on inline elements */
    transform-origin: top center; /* The pivot point for the swing */
    transition: transform 0.1s ease; /* Optional: smooth reset when hover ends */
}

.notifications-toggle:hover .fa-bell {
    animation: bell-swing 0.8s ease-in-out forwards;
}

/* Notification Badge (for unseen count) */
.notification-badge,
.bookingRequests-badge {
    position: absolute;
    top: -5px; /* Adjust vertical position */
    right: -5px; /* Adjust horizontal position */
    background-color: var(--notification-badge-color, #dc3545); /* Default red, override with CSS variable if defined */
    color: white;
    font-size: 0.6em;
    font-weight: normal;
    border-radius: 10px;
    padding: 3px 4px;
    min-width: 10px; /* Ensures it's a circle even with single digit */
    text-align: center;
    line-height: 1; /* Aligns text vertically */
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    display: flex; /* For perfect centering of text */
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif !important;
}

/* Hide badge if count is 0 (will be controlled by JS) */
.notification-badge.hidden {
    display: none !important;
}

/* Notifications Dropdown Menu */
.notifications-dropdown {
    position: absolute;
    display: none;
    background-color: #f9f9f9;
    min-width: 180px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    width: 420px; 
    max-height: 400px;
    overflow-y: auto;
    transition: transform 0.3s ease-out; 
    border-radius: 8px;
    right: 0;
    left: auto;
    top: 100%;
    list-style: none;
    margin-top: 1px;
}

.notifications-dropdown.show {
    display: block;
}

.dropdown-header {
    padding: 5px 8px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: var(--primary-color);
    font-size: 0.8em;
}

.notifications-list,
.bookingRequests-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notifications-list li {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Vertically align items */
    justify-content: space-between; /* Space out details and action button */
    gap: 10px; /* Space between flex items */
    background-color: white;
    color: var(--text-color-primary);
    transition: all 0.3s ease-in-out;
    border-radius: 0 15px 15px 0;
    border-left: 1px solid transparent;
    cursor: auto;
}

.notifications-list li:last-child {
    border-bottom: none; /* No border for the last item */
}

.notifications-list li:hover {
    background-color: var(--tab-color-hover); /* Hover effect for list items */
    border-left: 3px solid var(--text-color-primary);
}

.notification-details {
    flex-grow: 1; /* Allows details to take available space */
    font-size: 0.9em;
    display: flex;
    flex-direction: column; /* KEEP THIS: Stacks the main content lines (header, phone, event) */
    line-height: 1.1;
}

.notification-header-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.notification-header-name { /* NEW CSS CLASS for the dot + name wrapper */
    display: flex; /* Make this a flex container */
    flex-direction: row; /* Arrange its children (dot and name) in a row */
    align-items: center; /* Vertically center the dot and name */
    flex-wrap: nowrap; /* Prevent them from wrapping to a new line */
    font-size: 1em;
    margin-right: 10px;
    margin-left: 0;
}

.notification-content-lines {
    margin-left: 25px;
    font-size: 0.9em;
    color: var(--text-grayedout);
}

.notification-content-lines strong {
    font-weight: bold;
    color: var(--success-color);
}

.notification-details span {
    display: block; /* Ensure each detail (phone, event) appears on its own line *below* the header */
    color: var(--text-color-light);
    line-height: 1.4;
}

.notification-actions {
    flex-shrink: 0; /* Prevent action button from shrinking */
    align-items: flex-start;
}

.notification-header-title i,
.notification-content-lines i {
    color: #666;
    width: 16px;
    font-size: 14px;
}

.notification-content-lines .fa-stethoscope {
    color: var(--success-color);
    margin-right: 3px;
}

.mark-as-seen-btn {
    background: none;
    border: none;
    color: var(--success-color); /* Green check icon */
    cursor: pointer;
    font-size: 1.2em; /* Size of the check icon */
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease; /* Smooth hover transition */
}

.mark-as-seen-btn:hover {
    color: var(--success-color-hover);
}

/* Message when no notifications are found */
.no-notifications-message {
    padding: 15px;
    text-align: center;
    color: var(--text-grayedout);
    font-style: italic;
    font-size: 0.8em;
}

.dropdown-footer {
    padding: 5px 8px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 0.8em;
}

.dropdown-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.dropdown-footer a:hover {
    text-decoration: underline;
}




/* ==================================================== */
/* ---            Patients Lists Styles             --- */
/* ==================================================== */

.patients-list-containers-wrapper{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    overflow-x: auto;


}

.patients-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-height: 500px;
    box-sizing: border-box;
    min-width: 400px;
    overflow: hidden;
}

.list-collapsible-content {
    max-height: 1000px; /* A value larger than the expected max height of content */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out; /* Smooth transition */
    padding: 20px; /* Add some padding back */
}

.list-collapsible-content.collapsed {
    max-height: 0;
    padding: 0 20px 0 20px;
    margin-top: 0;
}

.patients-list-header {
    display: flex;
    flex-direction: row;
    gap: 5px;
    background-color: var(--secondary-color);
    padding: 10px;
    flex: 1;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; 
    user-select: none;
}

.header-icons-group,
.action-icons-group {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-right: 40px;
}

.patients-list-header .title {
    font-weight: bold;
    margin-left: 10px;
    white-space: nowrap;
}

.list-edit-button,
.list-delete-button,
.open-patient-timeline,
.remove-patient-from-list-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 0;
    padding: 0;
    font-size: 1em;
    cursor: pointer;
}

.list-edit-button:hover,
.list-delete-button:hover,
.open-patient-timeline:hover,
.remove-patient-from-list-btn:hover {
    color: var(--text-grayedout);
}

.color-options {
    display: flex;
    flex-wrap: wrap; /* Allows colors to wrap to the next line on smaller screens */
    gap: 10px; /* Space between color circles */
    margin-top: 5px;
    justify-content: flex-start; /* Align circles to the start */
    padding-left: 5px; /* Slight padding to align with other inputs */
}

.color-option {
    display: flex; /* Use flex to align the hidden radio and the circle */
    align-items: center;
    cursor: pointer;
    position: relative; /* For custom checkmark positioning */
}

.color-option input[type="radio"] {
    /* Hide the default radio button */
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none; /* Ensure it doesn't interfere with click on span */
}

.color-circle {
    width: 30px; /* Size of the color circle */
    height: 30px; /* Size of the color circle */
    border-radius: 50%; /* Makes it a circle */
    border: 1px solid transparent; /* Default border, will change on selection */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); /* Subtle outline */
    transition: border 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: block; /* Ensure it takes up space */
}

/* Style for the selected color circle */
.color-option input[type="radio"]:checked + .color-circle {
    border-color: var(--primary-color, #007bff); /* Highlight selected color with primary color */
    box-shadow: 0 0 0 1px var(--primary-color, #007bff), 0 0 0 5px rgba(0, 0, 0, 0.1); /* Stronger glow/border */
    transform: scale(1.1); /* Slightly enlarge on selection */
}

/* Optional: Hover effect */
.color-option:hover .color-circle {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Style for the patient count badge */
.patient-count-badge {
    background-color: var(--secondary-color); /* A distinct background color, e.g., a shade of blue */
    color: white;
    padding: 1px 8px;
    border: 0;
    border-radius: 12px; /* Makes it pill-shaped */
    font-size: 0.6em; /* Smaller font size */
    font-weight: bold;
    margin-left: 10px; /* Space from the list name */
    display: inline-block; /* Ensures padding and margin work correctly */
    text-align: center;
}

/* You might also want to adjust the list-header for alignment */
.patients-list-header > div {
    display: flex;
    align-items: center; /* Vertically align title and badge */
}

.add-to-list-search-btn {
    padding: 4px 10px;
    color: white;
    background-color: var(--success-color);
    border: 0;
    border-radius: 20px;
    font-size: 0.7em;
    letter-spacing: 1px;
    cursor: pointer;
}

.add-to-list-search-btn.added {
    color: var(--text-grayedout);
    background-color: var(--tab-color-hover);
    cursor:auto;
}

.patients-list-containers-wrapper .search-result-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* =================================================== */
/* ---           Patient Labels Styles             --- */
/* =================================================== */

.new-label-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    margin-top: 40px;
}

.new-label-title {
    font-size: 0.9em;
    font-weight: bold;
    padding: 10px;
    width: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: -45px;
    background-color: white;

}

/* For the container of the chips */
.label-chips-container {
    display: flex;
    flex-wrap: wrap; /* Allows chips to wrap to the next line */
    gap: 8px; /* Space between chips */
    border: none;
    min-height: 50px; /* Ensure it's visible even with no chips */
    align-items: flex-start; /* Align chips to the top */
    padding-top: 10px;
}

/* Individual Label Chip */
.label-chip {
    display: flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: 5px; /* Pill shape */
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    white-space: nowrap; /* Prevent text wrapping within a chip */
    color: white;
}

.label-chip.active {
    outline: 2px solid var(--border-focus); /* Highlight active chip */
    outline-offset: 0;
    box-shadow: 0 2px 7px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

/* Label name within the chip */
.label-chip span {
    margin-right: 8px; /* Space between name and icons */
}

/* Icons within the chip (edit/delete) */
.label-chip-icon {
    font-size: 0.9em;
    cursor: pointer;
    margin-left: 3px; /* Space between icons if both exist */
    margin-right: 3px;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    margin-top: 7px;
    text-align: center;
}

.label-chip-icon:hover {
    opacity: 1;
}

.label-chip-edit {
    color: inherit; /* Inherit color from the chip's text color */
}

.label-chip-delete {
    color: inherit; /* Inherit color from the chip's text color */
}

/* Ensure icons are clickable */
.label-chip-edit, .label-chip-delete {
    /* Using a specific size to ensure clickable area */
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Make them circular */
}

.patient-labels-display {
    display: flex;
    flex-direction: column; /* Keep as 'column' if you want vertical stacking */
    gap: 2px;
    align-items: flex-start; /* ADD THIS LINE to prevent horizontal stretching */
    margin-top: auto;
    margin-left: 5px;
    margin-bottom: 10px;
}

.patient-labels-display .patient-label-chip {
    display: inline-block; /* Keep this */
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 1px rgba(0,0,0,0.2);
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.patient-table-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.patient-table-label-chip,
.appointments-table-label-chip {
    padding: 1px 7px;
    border: 0;
    border-radius: 5px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
}

.patient-labels-container {
    display: flex;
    flex-wrap: wrap; /* Allows labels to wrap to the next line if too many */
    gap: 4px; /* Space between label chips */
    margin-top: 5px; /* Space above the labels, separating them from the name */
}

/* =================================================== */
/* ---         Transactions History Styles         --- */
/* =================================================== */

/* Transactions Modal Styles */
.transactions-summary {
    display: flex;
    justify-content: space-between;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

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

.summary-label {
    display: block;
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 5px;
}

.summary-value {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}

.summary-value.positive {
    color: #28a745;
}

.summary-value.negative {
    color: #dc3545;
}

.transactions-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.transaction-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    background: white;
    transition: all 0.3s ease;
}

.transaction-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.transaction-type {
    font-weight: bold;
    color: #495057;
}

.transaction-date {
    color: #6c757d;
    font-size: 0.9em;
}

.transaction-details div {
    font-size: 0.9em;
}

.transaction-amount {
    font-size: 1.3em;
    font-weight: bold;
    text-align: right;
    margin-bottom: 5px;
}

.transaction-amount.positive {
    color: #28a745;
}

.transaction-amount.negative {
    color: #dc3545;
}

.status-paid {
    background: #d4edda;
    color: #155724;
}

.status-refunded {
    background: #f8d7da;
    color: #721c24;
}

.status-other {
    background: #e2e3e5;
    color: #383d41;
}

.no-transactions-message {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.no-transactions-message i {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
}



/* =================================================== */
/* ---             Analytics Styles             --- */
/* =================================================== */

.analytics-dashboard {
    padding: 20px;
    background-color: #f4f7f6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: flex-start; /* Aligns charts to the top of the row */
}

.chart-container {
    background-color: var(--tertiary-color);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 35px;
    flex: 0 0 40%; 
    max-width: 650px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.chart-container-title {
    font-size: 1.1em;
    color: var(--text-color-primary);
    font-weight: bold;
    background-color: transparent;
    text-align: center;
    margin-bottom: 30px;
}

.chart-container.large {
    flex: 0 0 40%;
}

.chart-container h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2em;
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
}


/* =================================================== */
/* ---            Upload Modal Styles              --- */
/* =================================================== */

/* Modal Overlay (remains largely the same, but adding display: flex for centering) */
.file-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top of everything */
    left: 0;
    top: 0;
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black with opacity */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 20px; /* Padding around the modal */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Modal Content (main container for the modal's visible part) */
.file-modal-content {
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Slightly more rounded corners */
    width: 70%;
    max-width: 950px; /* Increased max-width for more content */
    max-height: 650px;
    box-shadow: var(--shadow-large); /* Assuming a larger shadow for modals */
    position: relative; /* For absolute positioning of close button */
    animation: fadeIn 0.3s ease-out; /* Simple fade-in animation */
    box-sizing: border-box;
    display: flex; /* Use flexbox for header and form layout */
    flex-direction: column;
    overflow: auto; /* Ensures rounded corners are respected */
    padding: 25px 30px; /* Padding inside the form content area */

}

/* Modal Form */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between form sections */
}

/* Form Sections */
.form-section {
    background-color: white; /* A slightly lighter background for sections */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px 20px;
}

#uploadProgressSection {
    background-color: white; /* A slightly lighter background for sections */
    border: 0;
    padding: 0;
}


/* File Input Label for custom styling (if you still have one) */
.file-input-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--secondary-text-color);
}

/* Wrapper for the custom file input area */
.file-upload-drop-area {
    position: relative;
    width: 100%;
    height: 120px; /* Adjust as needed */
    border: 1px dashed var(--input-border-color); /* Dashed border for drop zone feel */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    background-color: var(--input-background-color);
    transition: all 0.2s ease-in-out; /* Smooth transitions for hover */
    overflow: hidden; /* Hide anything overflowing */
}

/* Hover effect for the entire drop area */
.file-upload-drop-area:hover {
    background-color: var(--hover-background-color); /* Example: light grey or a slightly lighter version of input background */
    border-color: var(--primary-color); /* Example: highlight border with primary color */
}

/* Style for the upload icon */
.file-upload-drop-area .upload-icon {
    font-size: 4em; /* Large size */
    color: var(--secondary-text-color); /* Faded color */
    opacity: 0.3; /* Faded effect */
    margin-bottom: 5px; /* Space between icon and text */
    transition: opacity 0.2s ease-in-out;
}

/* Style for the "click or drag" text */
.file-upload-drop-area .upload-text {
    color: var(--secondary-text-color); /* Faded text color */
    opacity: 0.7; /* Slightly less faded than icon */
    font-size: 0.9em;
    margin: 0; /* Remove default paragraph margin */
    transition: opacity 0.2s ease-in-out;
}

/* On hover, make icon and text a bit more visible */
.file-upload-drop-area:hover .upload-icon,
.file-upload-drop-area:hover .upload-text {
    opacity: 0.5;
}

/* Hide the actual file input but keep it clickable */
.file-upload-drop-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Make it completely invisible */
    cursor: pointer;
    /* Ensure it's on top of other elements for click events */
    z-index: 10; 
}


.file-upload-drop-area p {
    pad: 10px 0;
}

/* Style for the selected files display */
.file-upload-drop-area .selected-files-display {
    position: relative;
    bottom: 5px; /* Position it at the bottom */
    left: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 0.8em;
    font-weight: normal;
    color: var(--primary-text-color); /* Adjust color as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background-color: transparent; /* Ensure no background interferes */
    z-index: 5; /* Below the invisible input but above icon/text */
}


/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 15px; /* Space between buttons */
    padding: 20px 30px;
    border-top: 1px solid var(--border-color);
    background-color: var(--secondary-background-color); /* Match header background */
    align-items: center; /* Vertically center items */
}

/* Submit Button in Modal (new class for specific styling) */
.submit-button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 12px 25px; /* More padding for a substantial button */
    font-size: 1.05em;
    font-weight: 600;
    border-radius: 8px; /* Slightly more rounded */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.submit-button:hover {
    background-color: var(--button-primary-hover-bg);
    transform: translateY(-1px); /* Slight lift effect */
}

.submit-button:active {
    transform: translateY(0);
}

/* Upload Status in Modal */
.upload-status {
    flex-grow: 1; /* Allow status to take remaining space */
    text-align: right; /* Align status text to the right */
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.9em;
    display: none; /* Hidden by default, shown by JS */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size-display {
    border: none;
    border-radius: 8px;
    font-size: 0.8em;
    color: var(--text-grayedout);
}

/* Adjustments for the open modal button outside the modal itself */
button.primary-button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

button.primary-button:hover {
    background-color: var(--button-primary-hover-bg);
}

.individual-file-progress {
    display: flex;
    position: relative;
    margin-bottom: 15px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 1px 1px 3px rgb(51, 51, 85, 0.05);
    min-height: 125px;
    flex-grow: 1;
}

.individual-file-progress .file-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

.individual-file-progress .file-name {
    font-weight: 600;
    color: var(--primary-text-color);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.individual-file-progress .file-status {
    font-size: 0.85em;
    color: var(--secondary-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.individual-file-progress .file-status .percent {
    font-weight: normal;
    color: var(--text-color-secondary);
    font-size: 1.05em;
}

.progress-bar-container {
    display: flex !important;
    width: 100%;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.progress-bar-line {
    display: block !important;
    height: 100%;
    background-color: #007bff;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0%; /* Start at 0 */
}

.individual-file-progress {
    display: flex !important;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    position: relative;
}

.file-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 12px;
}

.status-message {
    color: #666;
}

.percent {
    font-weight: bold;
    color: #007bff;
}

.individual-file-progress .file-icon {
    font-size: 2.5em;
    color: var(--button-submit-hover);
    margin-right: 25px;
    margin-left: 10px;
}

.individual-file-progress.completed .progress-bar-line {
    background-color: var(--success-color); /* Green when complete */
}

.individual-file-progress.error .progress-bar-line {
    background-color: var(--danger-color); /* Red on error */
}

.progress-area {
    overflow-x: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
    gap: 15px;
    padding: 10px 0;
}

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

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-30px); }
}

.patient-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
    min-height: 150px;
    align-items: stretch;
}

.file-card {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px 25px 25px 25px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    cursor: pointer;
    transition: all 0.2s, box-shadow 0.2s;
    text-align: center;
}

.file-card:hover {
    border: 1px solid var(--border-focus);
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.05);
}

.file-card-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.file-card-icon {
    font-size: 2em;
    color: var(--primary-color);
}

.file-card-type-text {
    font-weight: bold;
    font-size: 1em;
}

.file-card-divider {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
}

.file-card-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.file-card .file-name {
    font-weight: 500;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.file-card .file-date {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 5px;
}

.file-card-actions {
    position: absolute;
    top: 5px;
    left: 5px;
}

.file-card .delete-file-btn {
    background-color: transparent;
    color: var(--error-color);
    border: none;
    cursor: pointer;
    position: absolute;
    font-size: 1em;
}

.file-card .delete-file-btn:hover {
    color: var(--error-color-hover);
}

.empty-files-message,
.loading-files-message,
.error-files-message {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #888; 
}

.empty-files-message p,
.loading-files-message p,
.error-files-message p,
#noVisitsMessage p {
    margin-top: 10px;
    font-size: 1.1em;
    font-style: normal;
}
.loading-files-message .fa-spinner,
.error-files-message .fa-exclamation-triangle {
    color: #007bff; /* Primary color for loading/empty/error icons */
    font-size: 2.5em; /* Make icons larger */
}
.error-files-message .fa-exclamation-triangle {
    color: #dc3545; /* Red for error icon */
}



/*==============================================
/* File Viewer Modal Styles */

.file-viewer-modal-content {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1200px; /* Optional: cap the max size on very large screens */
    max-height: 900px; /* Optional: cap the max height */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-viewer-modal-content .modal-header {
    display: flex;
    justify-content: space-between; /* Pushes the two inner divs to opposite ends */
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    background-color: #f7f7f7;
    position: sticky;
    top: 0;
    z-index: 1;
}

#fileViewerModalTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.file-viewer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}


.file-viewer-filename {
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 20px; /* Add space to the right of the filename */
    flex-grow: 1; /* Allows it to take up available space */
}

.file-viewer-details {
    font-size: 0.9em;
    color: #666;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-wrap: wrap;
}

.file-viewer-details i {
    margin-right: 5px; /* Spacing between icon and text */
    margin-left: 15px;
}

/* Spacing between the file type and the date */
.file-viewer-details span:not(:last-child) {
    margin-right: 15px; /* Add space between the type and the date */
}

.file-viewer-modal-content .modal-body {
    flex-grow: 1;
    overflow: auto; /* This allows the content area to scroll independently */
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
}

.file-viewer-modal-content .modal-body img {
    width: 100%; /* CRITICAL: Forces image to fill the width */
    height: auto; /* CRITICAL: Allows image height to adjust automatically */
    display: block;
    object-fit: contain; /* Ensures the whole image is visible */
    transition: transform 0.2s ease-in-out;
}

.file-viewer-modal-content .modal-body iframe {
    width: 100vw;
    height: 100vh;
    border: none;
}


/* Ensure the overlay is active for the modal to show */
#fileViewerModalOverlay.active {
    display: flex; /* Show flex container */
    pointer-events: auto;
}

.file-viewer-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 20px;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #007bff;
    transition: color 0.2s, transform 0.2s;
    padding: 5px;
}

.control-btn:hover {
    color: #0056b3;
    transform: scale(1.1);
}

.control-btn:focus {
    outline: none;
}

/* =================================================== */
/* ---          Doctor Performance Cards          --- */
/* =================================================== */

.performance-cards-container,
.staff-performance-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(850px, 1fr));
    gap: 20px;
    padding: 20px;
}

.doctor-card-column {
    flex: 1 1 45%; /* Allows for two columns on larger screens */
    padding: 0;
}

.doctor-performance-card,
.staff-performance-card {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center; /* Vertically aligns items in the card */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.header-row {
    display: flex;
    justify-content: space-between;
}

.doctor-info-header,
.staff-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex: 5;
}

.doctor-info-header-text,
.staff-info-header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 5px;
}

.metric-description {
    font-size: 0.75em;
    font-weight: normal;
    color: var(--text-grayedout);
}

.card-subtitle {
    color: var(--text-grayedout);
    font-size: 0.8em;
    font-weight: normal;
    text-align: left;
}

.doctor-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(45deg, #007bff, #65a6ec);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    flex-shrink: 0;
}

.staff-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(45deg, #00a421, #80ec65);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    flex-shrink: 0;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.card-body {
    width: 100%;
    box-sizing: border-box;
}

.metrics-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: center;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.metric-item {
    flex: 0 0 15%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    white-space: nowrap;
}

.metric-item h6 {
    font-size: 0.9em;
    font-weight: 500;
    color: #7f8c8d;
    margin: 0;
}

.metric-item p {
    font-size: 1.2em;
    font-weight: bold;
    color: #34495e;
    margin: 0;
}

.metric-item i {
    color: #3498db;
    font-size: 1.5em;
}

.staff-performance-card .metric-item i {
    color: #3cdb34;
    font-size: 1.5em;
}

.view-logs-btn,
.view-visits-btn,
.view-activity-btn,
.view-logs-btn-owner,
.view-staff-logs-btn,
.view-staff-activity-btn,
.view-staff-activity-btn-forAdmin,
.view-staff-logs-btn-forAdmin,
.view-activity-btn-profile,
.view-logs-btn-profile,
.view-visits-btn-profile {
    font-size: 0.9em;
    white-space: nowrap;
    border: none;
    color: var(--text-color-primary);
    background-color: white;
    padding: 6px 12px;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(154, 154, 154, 0.1);
    transition: all 0.3s ease-in-out;
}

.view-logs-btn:hover,
.view-visits-btn:hover,
.view-logs-btn-owner:hover,
.view-staff-logs-btn:hover,
.view-staff-activity-btn:hover,
.view-staff-logs-btn-forAdmin:hover,
.view-logs-btn-profile:hover,
.view-visits-btn-profile:hover {
    background-color: var(--secondary-color);
}


/* Audit Logs List Styles */
.audit-logs-list,
#auditLogsList {
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.audit-log-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 5px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background-color 0.2s;
    font-size: 0.9em;
    line-height: 1.1;
}

.audit-log-header {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    align-items: center;
    width: 100%;

}

.audit-log-user {
    font-weight: bold;
    color: #2c3e50;
    font-size: 14px;
}

.audit-log-action {
    background: #3498db;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
    white-space: nowrap;
}

/* Payment Action Styles */
.audit-log-process-payment {
    background-color: #27ae60; /* Darker green */
}

.audit-log-refund {
    background-color: #f39c12; /* Darker yellow */
}

.audit-log-refund-failed {
    background-color: #e74c3c; /* Dark red */
}

/* Patient Action Styles */
.audit-log-create-patient {
    background-color: #27ae60; /* Darker green */
}

.audit-log-update-patient {
    background-color: #2980b9; /* Darker blue */
}

.audit-log-delete-patient {
    background-color: #c0392b; /* Darker red */
}

/* Appointment Action Styles */
.audit-log-book-appointment {
    background-color: #2980b9; /* Darker blue */
}

.audit-log-reschedule-appointment {
    background-color: #f39c12; /* Darker yellow */
}

.audit-log-cancel-appointment {
    background-color: #c0392b; /* Darker red */
}

.audit-log-walk-in {
    background-color: #8e44ad; /* Darker purple */
}

.audit-log-delete-visit {
    background-color: #c0392b; /* Darker red */
}

/* User Action Styles */
.audit-log-update-profile {
    background-color: #16a085; /* Darker teal */
}

.audit-log-save-visit {
    background-color: #27ae60; /* Darker green */
}

/* Default style for unknown actions */
.audit-log-default {
    background-color: #34495e; /* Dark gray */
}

.audit-log-timestamp {
    color: #7f8c8d;
    font-size: 0.9em;
    width: 100%;
}

.audit-log-timestamp::before {
    content: "🕒"; /* Clock emoji */
    font-size: 0.85em;
    opacity: 0.8;
    margin-right: 5px;
}

/* Alternative using Font Awesome if you have it */
.audit-log-timestamp.fa-icon::before {
    content: "\f017"; /* Font Awesome clock icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85em;
    margin-right: 5px;
    opacity: 0.8;
}

.audit-log-description {
    margin-top: 5px;
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.4;
    margin-left: 20px;
}

.audit-log-details {
    background: white;
    padding: 10px;
    border-radius: 6px;
    margin-top: 8px;
    border-left: 4px solid #3498db;
    font-size: 13px;
}

.audit-log-resource {
    color: #7f8c8d;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

.loading-logs {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.no-logs {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
    font-style: italic;
}

.audit-log-description-one-line {
    font-size: 0.8em;
    line-height: 1.4;
    white-space: nowrap;
}

.audit-log-user-bold {
    font-weight: bold;
    color: #2c3e50;
    white-space: nowrap;
}

.audit-log-patient-bold {
    font-weight: bold;
    color: var(--button-submit-hover);
    white-space: nowrap;
}

/* Audit Log Icon Styles */
.audit-log-icon {
    font-size: 0.85em;
    margin: 0 5px;
    opacity: 0.8;
    color: var(--text-color-secondary);
}

.patient-icon {
    color: var(--button-submit-hover); /* Red color for patients */
}


/* =================================================== */
/* ---          Doctors Logs Modal Styles          --- */
/* =================================================== */

#logsModal {
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

#logsModal .modal-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

#logsModal .modal-body {
    max-height: 400px; /* Limits the height of the log list */
    overflow-y: auto;  /* Adds a scrollbar if content exceeds height */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.log-list-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 450px;
    overflow-y: auto;
}

#logList {
    list-style: none; /* Removes default bullet points */
    padding-left: 0; /* Removes default indentation */
}

#logList.list-group,
#visitsLogList.list-group {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-left: none;
    padding-left: 0;
}

.log-row {
    margin-left: 15px;
    font-size: 0.9em;
    color: var(--text-color-secondary);
}
#logList .list-group-item {
    border-radius: 5px;
    padding: 3px 8px;
    background-color: white;
    font-size: 0.9em;
    margin-bottom: 5px;
    background-color: var(--secondary-color);
    border-bottom: 1px solid rgb(199, 199, 199);
    margin-bottom: 3px;
}

#logList .list-group-item strong {
    color: #495057;
}

.modal.fade { 
    display: none;
} 

.patient-log-text {
    text-align: left;
    font-size: 1em;
    color: var(--text-color-primary);

}

.log-icon {
    margin-right: 5px;
    font-size: 1.2em;
}

.day-name {
    font-size: 1.2em;
    font-weight: bold;
}

.log-details-container {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    gap: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.log-division-1 {
    position: relative; /* Container for absolutely positioned children */
    padding: 15px;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #efefef;
    display: flex; /* Makes the content flexible */
    flex-direction: column;
}

/* Position the status span */
.log-division-1 .appointment-status {
    position: absolute; /* Take the element out of the normal flow */
    top: 5px;        /* Position from the top */
    right: 5px;      /* Position from the right */
    font-size: 0.75em !important;

}

/* Style the new icons */
.log-division-1 h4 .fas,
.log-division-1 .log-date .fas {
    margin-right: 5px; /* Add space between the icon and the text */
    color: #35a1c8; /* A color for your icons */
}

.log-division-2 p strong .fas {
    margin-right: 5px; /* Adds space between the icon and the text */
    color: #35a1c8; /* Sets the icon color */
}

.log-division-1,
.log-division-3,
.log-division-4 {
    flex-basis: 100%; /* Default to full width on small screens */
    padding: 5px 15px;
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
}

.log-division-2,
.log-division-3 {
    flex-basis: 100%;
    display: grid; /* Use grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;    /* Space between the cards */
    flex-wrap: wrap; /* Allows items to wrap to a new line if the container is too narrow */
    justify-content: space-between; /* Spreads cards out evenly */
}

.log-division-2 p,
.log-division-3 p {
    margin: 0 !important; /* Remove default margins */
    padding: 10px 5px;
    border-radius: 6px;
    text-align: center; /* Center the text inside the cards */
    background-color: #ffffff;

}

/* Ensure the title is on its own line */
.log-division-2 p strong,
.log-division-3 p strong {
    display: block; /* Makes the strong tag a block element to push the text below it */
    font-size: 0.85em;
    margin-bottom: 5px; /* Add space between the title and the value */
}

/* Individual element styling */
.log-division-1 h4 {
    margin-top: 0;
    color: #333;
    text-align: left;
}

.log-division-2 p,
.log-division-3 p,
.log-division-4 p {
    margin: 5px 0;
    color: #555;
    font-size: 0.9em;
}

.log-division-4 ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
}

.log-division-4 ul li {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-division-4 .badge {
    background-color: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    text-transform: capitalize;
}

.services-list {
    display: flex; /* Arranges list items in a row */
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    list-style: none; /* Removes the default bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    gap: 10px; /* Provides spacing between the service items */
    margin-top: 10px;
}

.services-list li {
    display: flex; /* Allows for easy alignment of the service name and chip */
    align-items: center; /* Vertically aligns items within the list item */
    font-size: 0.9em;
}


/* Style for the payment chip */
.services-list li .badge {
    white-space: nowrap; /* Prevents the chip content from wrapping */
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 5px;
}

.visit-status-walk-in {
    background-color: var(--error-color);
    padding: 2px 10px;
    border-radius: 30px;
    color: white;
    font-size: 0.8em;
    font-weight: normal;
    margin-top: 10px;
    white-space: nowrap;
}

/* =================================================== */
/* ---        Accounts Cards Display Styles        --- */
/* =================================================== */
#account-cards-container,
#account-cards-container-profile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
}

.account-card {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 5px 40px 40px 40px;
    padding: 30px;
    display: flex;
    align-items: center; /* Vertically aligns items in the card */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.initials-circle {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(45deg, #007bff, #61a7f1);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
    flex-shrink: 0;
}

.online-dot {
    position: absolute;
    top: 37px;
    left: 180px;
    height: 8px;
    width: 8px;
    background-color: #4CAF50; /* Green */
    border-radius: 50%;
    display: inline-block;
}

#account-cards-container-profile .online-dot {
    top: 35px;
}

.active-chip,
.inactive-chip {
    background-color: transparent;
    margin-left: 10px;
    font-size: 0.7em;
    font-weight: normal !important;
    text-transform: capitalize;
}

.active-chip {
    color: var(--success-color);
}

.inactive-chip {
    color: var(--text-grayedout);
}

.image-upload-button {
    position: absolute;
    top: 57%;
    left: 130px;
    background-color: #28a745;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.image-upload-button-profile {
    position: absolute;
    top: 165px;
    left: 130px;
    background-color: #28a745;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.vertical-separator {
    width: 1px;
    background-color: #e0e0e0;
    margin: 0 20px;
    height: 150px; /* Adjusted height to match the initials circle */
}
.account-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left; /* Aligns all text to the left */
    gap: 1px;
    line-height: 1;
    align-self: flex-start;
}
.account-info h5 {
    margin: 0;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}
.account-info-lines {
    margin: 4px 0;
    font-size: 14px;
    color: #666;
    font-style: normal; /* Removes italic style */
    text-align: left;
    line-height: 1.2;

}
.card-actions {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
}
.account-icon-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.3s ease-in-out;
    font-size: 1em;
}
.edit-button:hover,
.edit-drug-button:hover {
    color: #007bff;
}
.delete-button:hover,
.delete-drug-button:hover,
.delete-template-btn:hover,
.end-subscription-button:hover,
.delete-expense-btn:hover {
    color: #dc3545;
}

.renew-subscription-button:hover {
    color: var(--success-color);
}

.reset-password-button:hover {
    color: var(--warning-color);
}

.favorite-button {
    margin-left: -3px;
}

.favorite-button:hover {
    color: var(--warning-color);
}

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

/* =================================================== */
/* ---        Drugs Favourite Groups Styles       --- */
/* =================================================== */


.drugFavouriteGroups-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 250px;
    justify-content: flex-start;
}

.drugFavouriteGroups-chip {
    padding: 2px 12px 2px 30px;
    background-color: var(--warning-color);
    color: white;
    font-size: 0.9em;
    font-weight: normal;
    border: none;
    border-radius: 15px;
}

/* Hide the close icon by default */
.drugFavouriteGroups-chip .delete-chip-icon {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Show the close icon on hover */
.drugFavouriteGroups-chip:hover .delete-chip-icon {
  visibility: visible;
  opacity: 1;
}

/* Container for all favorite groups */
.favorite-groups-section {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--field-border);
    gap: 10px;
    margin-left: 50px;
    margin-right: 30px;
    align-items: start;
    justify-content: center;
}

/* Container for an individual group */
.favorite-group-container {
    width: 300px;
    background-color: var(--secondary-color);
    padding: 8px;
    border-radius: 15px;
    max-height: 350px;
}

/* Style for the group title */
.favorite-group-container h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    border-radius: none;
    font-size: 0.9em;
}

.favourite-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    max-height: 500px; /* A large number to allow content to expand */
    opacity: 1;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.drug-chip {
    background-color: var(--button-submit-hover); /* Example color for drug chips */
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: normal;
    padding: 4px 15px;
    transform: translateY(0);
    box-shadow: 1px 1px 2px rgba(83, 83, 83, 0.2);
    transition: background-color 0.3s ease-in-out;
}

.drug-chip:hover {
    background-color: var(--border-focus); /* Example color for drug chips */

}

.drug-chip:active {
    transform: translateY(2);
}

.chip-disabled {
    opacity: 0.5;
    cursor: auto;
}

.drug-chip.chip-disabled:hover {
    background-color: var(--button-submit-hover); /* Revert to the default color */
    cursor: auto;
}

/* Also ensure the active state is disabled for the disabled chips */
.drug-chip.chip-disabled:active {
    transform: translateY(0); /* Prevent the active transformation */
}

.collapsible-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1em;
    font-weight: bold;
    color: var(--text-color-primary);
    margin-bottom: 5px;
    padding: 5px 0;
    transition: color 0.2s;
    border: none;
}

.collapsible-header:hover {
    color: var(--button-submit-hover);
}

.collapsible-header .toggle-icon {
    margin-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.favourite-chips-container.collapsed {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    opacity: 0;
}

.collapsible-header .toggle-icon.fa-caret-down {
    transform: rotate(-90deg);
}

.no-groups-message {
    column-span: 8;
    font-size: 0.8em;
    font-weight: normal;
    font-style: italic;
    color: var(--text-grayedout);
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}


/* ============================================================== */
/* ---         Save History and Visit Buttons Styles          --- */
/* ============================================================== */

.sector-button {
    padding: 10px 16px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    border: none;
    color: var(--text-color-secondary);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: normal;
    min-width: 50px;
    min-height: 45px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), /* Subtle base shadow */
                inset 0 1px 0 rgba(255, 255, 255, 0.2), /* Top highlight for glassy look */
                inset 0 -1px 0 rgba(0, 0, 0, 0.05); /* Bottom shadow for glassy look */
}

.end-visit-button {
    background-color: var(--error-color);
    color: white;
    display: none;
    font-size: 0.9em;
    font-weight: bold;
}

.end-visit-button:hover {
    background-color: var(--error-color-hover);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.end-visit-button:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.save-button {
    position: relative;
    transition: background-color 0.3s ease;
    min-width: 150px; /* Ensure button doesn't resize drastically */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.save-visit-button {
    transition: background-color 0.3s ease;
    position: relative;
    display: inline-flex; /* Use inline-flex to maintain button's natural width */
    align-items: center;
    justify-content: center;

}

/* Hide spinner and icon by default */
.save-button .button-spinner,
.save-button .button-icon,
.save-visit-button .button-spinner,
.save-visit-button .button-icon {
    display: none;
}

/* === LOADING STATE === */
.save-button.loading,
.save-visit-button.loading {
    background-color: var(--success-color-hover); /* Darker blue while loading */
    opacity: 0.7;
    cursor: wait;
}

.save-button.loading .button-text,
.save-visit-button.loading .button-text {
    visibility: hidden; /* Hide text but keep space */
}

.save-button.loading .button-spinner,
.save-visit-button.loading .button-spinner {
    display: block;
    width: 15px;
    height: 15px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* === SUCCESS STATE === */
.save-button.success,
.save-visit-button.success {
    background-color: #28a745; /* Green */
}

.save-button.success .button-text,
.save-visit-button.success .button-text {
    display: none; /* Hide text completely */
}

.save-button.success .button-icon,
.save-visit-button.success .button-icon {
    display: block;
    font-size: 1em; /* Make checkmark larger */
}

/* Use a checkmark for the icon */
.save-button.success .button-icon::before {
    content: '✓ Saved';
    color: white;
}

.save-visit-button.success .button-icon::before {
    content: '✓';
    color: white;
    font-size: 1em;
}

/* === ERROR STATE (Optional but good practice) === */
.save-button.error,
.save-visit-button.error {
    background-color: #dc3545; /* Red */
}

.save-button.error .button-text,
.save-visit-button.error .button-text {
    display: none;
}

.save-button.error .button-icon,
.save-visit-button.error .button-icon {
    display: block;
    font-size: 1em;
}

/* Use a cross for the error icon */
.save-button.error .button-icon::before {
    content: '✗ Error';
    color: white;
}

.save-visit-button.error .button-icon::before {
    content: '✗';
    color: white;
}

/* =================================================== */
/* ---         Reception Dashboard Styles          --- */
/* =================================================== */

.branch-display {
    font-size: 0.8em;
    color: var(--text-color-secondary);
    font-weight: normal;
    border-bottom: 1px solid var(--border-color);
    width: max-content;
}

.doctor-display {
    font-size: 0.95em;
    font-weight: bold;
    color: var(--text-color-primary);
    white-space: nowrap;
}

.btn-arrival,
.btn-pay,
.btn-pay-complete {
    cursor: pointer;
    padding: 1px 20px;
    border-radius: 20px;
    border: 1px solid var(--border-focus);
    color: var(--border-focus);
    background-color: white;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    font-family: 'Cairo', 'Roboto';
}

.btn-pay-complete {
    border: 1px solid var(--success-color);
    color: var(--success-color);
    cursor: default;
}

.btn-arrival:hover,
.btn-pay:hover {
    background-color: var(--secondary-color);
}

.btn-pay.status-refunded:hover {
    background-color: rgba(233, 58, 58, 0.15);
}

.btn-pay.status-fully-paid:hover {
    background-color: rgba(229, 174, 57, 0.15);
}

.btn-pay.status-partially-paid:hover {
    background-color: rgba(168, 119, 15, 0.15);
}

.btn-pay.status-unpaid:hover {
    background-color: rgba(146, 146, 146, 0.15);
}

.arrival-time-display {
    font-size: 0.9em;
    margin-top: 5px;
    white-space: nowrap;
}
.payment-modal-info {
    display: flex;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color-secondary);
    text-align: left;
    align-self: flex-start;
    margin-left: 25px;
}

.fees-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
   
}

.status-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
    align-items: center; 
}

.status-online {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
    font-weight: normal !important;
}

.finance_card_number {
    font-size: 1.15em;
    font-weight: bold;
    margin-right: 5px;
    color: var(--text-color-secondary);
}

.appointment-details-row.private-row {
    background-color: #f8f9fa; /* A light grey background */
    font-size: 0.85rem !important; /* Smaller font size */
    color: #6c757d; /* A muted text color */
    padding: 2px; /* Add some padding */
    padding: 3px 40px;
    border-top: none; /* Remove the top border to merge with the row above */
}

.private-row .time-details-container {
    padding: 0;
    margin: 0;
}

.btn-surgery-action {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
}

.btn-surgery-action:hover:not(:disabled) {
    background-color: #218838;
}

.btn-surgery-start:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.btn-surgery-complete {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-surgery-complete:hover:not(:disabled) {
    background-color: #c82333;
}

.btn-surgery-complete:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Status colors for surgery */
.status-ongoing-surgery {
    background-color: #ffc107;
    color: #212529;
}

.status-completed-surgery {
    background-color: #28a745;
    color: white;
}

.status-prepared-for-surgery {
    background-color: #17a2b8; /* Info Blue/Teal - distinct from primary blue (#007bff) */
    color: white;
}

.status-header-row {
    background: linear-gradient(to right, #e9f3ff, #f8f9fa);
    font-size: 1.4em;
    color: var(--text-color-primary);
    padding: 10px !important;
    align-items: left;
    border-top: 2px solid var(--table-border-color);
    border-bottom: 2px solid var(--table-border-color);
    margin-top: 10px;
    font-weight: bold;
    user-select: none;
}

.status-header-row i {
    margin-right: 8px; /* Adds space after the Font Awesome icon */
}

.status-arrived-header,
.status-active-visits-header,
.status-completed-header,
.status-booked-header,
.status-completed-surgery-header,
.status-ongoing-surgery-header,
.status-prepared-for-surgery-header,
.status-checked-in-header, 
.status-done-refraction-header, 
.status-got-examined-header { 
    text-align: left;
    color: var(--text-color-primary);
    font-size: 1.2rem !important;
    align-items: center;
    display: flex;
}


.status-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #6c757d;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0 8px;
    min-width: 10px;
    height: 20px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* Status colors matching your tab and card colors */
.status-booked-header .status-count-chip { background-color: #ffc107; color: #212529; } /* Orange for Booked */
.status-arrived-header .status-count-chip { background-color: #dc3ddf; } /* Purple-pink for Arrived */
.status-checked-in-header .status-count-chip { background-color: #007bff; } /* Blue for Checked-in */
.status-done-refraction-header .status-count-chip { background-color: #17a2b8; } /* Cyan for Done refraction */
.status-got-examined-header .status-count-chip { background-color: #6f42c1; } /* Purple for Got examined */
.status-completed-header .status-count-chip { background-color: #28a745; } /* Green for Completed */

/* Surgery status colors */
.status-prepared-for-surgery-header .status-count-chip { background-color: #fd7e14; } /* Orange for Prepared */
.status-ongoing-surgery-header .status-count-chip { background-color: #dc3545; } /* Red for Ongoing Surgery */
.status-completed-surgery-header .status-count-chip { background-color: #28a745; } /* Green for Completed Surgery (same as regular completed) */

/* Additional status colors */
.status-all-header .status-count-chip { background-color: #6c757d; } /* Gray for All */
.status-today-header .status-count-chip { background-color: #6f42c1; } /* Purple for Today */
.status-upcoming-header .status-count-chip { background-color: #28a745; } /* Green for Upcoming */
.status-previous-header .status-count-chip { background-color: #6c757d; } /* Gray for Previous */
.status-cancelled-header .status-count-chip { background-color: #dc3545; } /* Red for Cancelled */
.status-no-show-header .status-count-chip { background-color: #fd7e14; } /* Orange for No Show */
.status-unknown-header .status-count-chip { background-color: #6c757d; } /* Gray for Unknown */

.appointment-content-wrapper {
    max-height: 1000px; /* A large value to ensure content is fully visible */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden; /* Hide content that exceeds max-height */
    opacity: 1;
}

/* State when the content wrapper is collapsed */
.appointment-content-wrapper.collapsed {
    max-height: 0; /* Collapse to 0 height */
    opacity: 0;
}


/* =================================================== */
/* ---         Doctors Commissions Styles          --- */
/* =================================================== */

.commission-input {
    border: none;
    border-radius: 15px;
    font-size: 1em;
    color: var(--text-color-secondary);
    text-align: center;
    width: 50px;
}

.commission-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.commission-type-selector {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.commission-table td {
    position: relative;
    text-align: center;

}

.commission-table thead th {
    text-align: center;
    color: black;
}

.commission-unit {
    color: #555;
    font-size: 0.9em;
    
}

.commission-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.commission-radio-group {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

.commission-radio-group input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.commission-radio-group label {
    padding: 8px 25px;
    border: 1px solid var(--button-submit-hover);
    cursor: pointer;
    background-color: var(--secondary-color);
    color: var(--button-submit-hover);
    transition: border-color 0.3s ease;
    font-weight: normal;
    border-radius: 30px;
    box-sizing: border-box;
}

.commission-radio-group input[type="radio"]:checked + label {
    border: none; /* Light blue focus border */
    background-color: var(--button-submit-hover);
    color: white;
    font-weight: bold;
}

.commission-radio-group label:hover {
    background-color: var(--tertiary-color); /* Slight hover effect */
}

.commission-buttons-container .modal-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 20px;
}

.commission-input-group {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Adjust spacing as needed */
}

/* =================================================== */
/* ---               Calander Styles               --- */
/* =================================================== */

.calendar-buttons-container {
    justify-content: center;
    align-items: center;
}

.calendar-radio-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.calendar-radio-group input[type="radio"] {
    display: none;
}

.calendar-radio-group label {
    display: flex;
    gap: 10px;
    padding: 5px 25px;
    border: 1px solid var(--button-submit-hover);
    cursor: pointer;
    background-color: var(--secondary-color);
    color: var(--button-submit-hover);
    transition: border-color 0.3s ease;
    font-weight: normal;
    border-radius: 30px 0 0 30px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    min-width: 250px;
    margin: 10px 0;
}

.calendar-radio-group label:last-child {
    border-radius: 0 30px 30px 0;
}

.calendar-radio-group input[type="radio"]:checked + label {
    border: 1px solid var(--button-submit-hover);
    background-color: var(--button-submit-hover);
    color: white;
    font-weight: bold;
}

.calendar-radio-group label:hover {
    background-color: var(--tertiary-color); /* Slight hover effect */
}

.calendar-radio-group input[type="radio"]:checked + label:hover {
    background-color: var(--button-submit);
}

.calendar-buttons-container .modal-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 20px;
}

.calendar-input-group {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Adjust spacing as needed */
}

.appointments-calendar-container {
    width: calc(100vw - 280px); /* Slightly more padding to account for scrollbars */
    overflow-x: auto;
    padding: 5px;
    margin: 5px;
    box-sizing: border-box; /* Include padding in width calculation */
}

#appointmentsCalendarDisplay {
    display: none;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-width: 1000px;
    border: 1px solid #e9ecef;
}

/* Calendar Header */
.calendar-header {
    display: flex;
    gap: 10px;
    justify-content: space-around;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap;
    position: relative;
}

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendar-nav-btn {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #495057;
    font-weight: 500;
    height: 35px;
}

.calendar-nav-btn:hover {
    background: #007bff;
    border-color: #007bff;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.calendar-date-display h3 {
    margin: 0;
    color: #2c3e50;
    font-weight: 700;
    font-size: 1.4rem;
    text-align: center;
    min-width: 330px;
}

/* Calendar View Controls */
.calendar-view-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.calendar-view-btn {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: #495057;
    height: 35px;
}

.calendar-view-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
}

.calendar-view-btn:hover:not(.active) {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}

/* Calendar Filters */
.calendar-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: 20px;
}

.calendar-filter-select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    min-width: 200px;
    transition: all 0.2s ease;
    height: 35px;
}

.calendar-filter-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Calendar Grid Layout */
.calendar-week-days {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 50;
}

.week-days-header {
    display: grid;
    grid-template-columns: 100px repeat(7, 1fr);
    height: 70px;
    background: white;
}

.time-slot-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #6c757d;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 8px;
    border-right: 1px solid #dee2e6;
    background: white;
    transition: background-color 0.2s ease;
    line-height: 1.4;
}

.week-day-header.today {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 3px solid #007bff;
    border-right: 3px solid #007bff;
}

.week-day-header:hover {
    background: #f8f9fa;
}

.week-day-name {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.week-day-date {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
}

.week-day-header.today .week-day-date {
    color: #007bff;
}

/* Calendar Days Grid */
.calendar-days-grid {
    flex: 1;
    background: white;
    position: relative;
}

/* Day View */
.day-view {
    display: grid;
    grid-template-columns: 100px 1fr;
    min-height: 600px;
}

/* Week View */
.week-view {
    display: grid;
    grid-template-columns: 100px 1fr;
    height: 100%;
    min-height: 600px;
}

/* Time Slots Column */
.time-slots-column {
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    position: sticky;
    left: 0;
    z-index: 40;
}

.time-slot-label {
    height: 150px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px 12px;
    font-size: 12px;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
    background: white;
    font-weight: 500;
    box-sizing: border-box;
}

/* Events Columns */
.day-events-column {
    position: relative;
    background: 
        repeating-linear-gradient(
            transparent,
            transparent 59px,
            #f8f9fa 59px,
            #f8f9fa 60px
        );
}

.week-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    overflow: visible !important;
    z-index: auto !important;
    background: 
        repeating-linear-gradient(
            transparent,
            transparent 59px,
            #f8f9fa 59px,
            #f8f9fa 60px
        );
}

.week-day-column {
    border-right: 1px solid #e9ecef;
    position: relative;
    overflow: visible !important;
    z-index: auto !important;
    transform: none !important;
    opacity: 1 !important;
    isolation: auto !important;
}

.week-day-column.today {
    background: linear-gradient(135deg, rgba(227, 242, 253, 0.3) 0%, rgba(187, 222, 251, 0.3) 100%);
}

.week-day-column .time-slot {
    position: relative;
    z-index: 1 !important; /* Low z-index for time slot backgrounds */
    pointer-events: none; /* Allow clicks to pass through to tooltips */
}

.week-day-column:hover {
    z-index: 100 !important; /* Bring entire column forward on hover */
}

/* Time Slots */
.time-slot {
    height: 150px;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    box-sizing: border-box;
}

/* Calendar Events */
.calendar-event {
    position: absolute;
    left: 4px;
    right: 4px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-left: 4px solid #2196f3;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
    z-index: 10 !important; /* Higher than time slots */
    overflow: visible !important;
    box-sizing: border-box;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2px 0;
}

.calendar-event:hover {
    background: #bbdefb;
    z-index: 1000 !important;
}

.event-time-range {
    font-weight: 700;
    color: #2c3e50;
    font-size: 13px;
    line-height: 1.2;
}

.event-minimal-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.event-status-display i {
    margin-right: 5px;
}

.event-patient {
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.event-service, .event-doctor {
    color: #6c757d;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Available Slot Events */
.available-slot-event {
    background: linear-gradient(135deg, rgba(240, 240, 240, 0.9) 0%, rgba(248, 248, 248, 0.9) 100%) !important;
    border: 1px solid rgba(200, 200, 200, 0.7) !important;
    border-left: 4px solid #4caf50 !important;
    cursor: pointer;
}

.event-available-label {
    font-weight: normal;
    color: #2e7d32;
    margin: 2px 0;
    font-size: 12px;
}

.book-slot-btn {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 10px;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.2s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

.book-slot-btn:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}

/* Loading Overlay */
.calendar-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Status Badge inside event */
.event-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    font-size: 0.75rem;
}

.event-status-badge {
    background: rgba(255,255,255,0.6);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.event-patient-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unavailable / Past Slot */
.unavailable-slot-event {
    background-color: #f8f9fa !important;
    border: 1px dashed #dee2e6 !important;
    color: #adb5bd !important;
    pointer-events: none; /* Double safety to prevent clicks */
    z-index: 1; /* Sit behind booked events */
}

.unavailable-slot-event .event-time-range {
    opacity: 0.3;
}

.available-slot-event {
    background-color: #ffffff;
    border: 1px solid #28a745;
    color: #28a745;
    z-index: 2;
}
.available-slot-event:hover {
    background-color: #28a745;
    color: white;
    z-index: 15; /* Pop to front on hover */
}

/* Context Menu */
.context-menu {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 200px;
    max-width: 300px;
    font-family: inherit;
}

.context-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
}

.context-menu-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.context-menu-close:hover {
    color: #333;
    background: #e9ecef;
    border-radius: 4px;
}

.context-menu-items {
    padding: 8px 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    gap: 8px;
    transition: background-color 0.2s;
}

.context-menu-item:hover {
    background-color: #f8f9fa;
}

.context-menu-item i {
    width: 16px;
    text-align: center;
    color: #666;
}

.context-menu-no-actions {
    padding: 16px;
    text-align: center;
    color: #666;
    font-size: 14px;
    font-style: italic;
}


/* Timeline Modal */
.timeline-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(4px);
}

.timeline-modal-content {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid #dee2e6;
}

.timeline-header {
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.timeline-header h3 {
    margin: 0;
    color: #2c3e50;
    font-weight: 700;
    font-size: 1.3rem;
}

.timeline-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.timeline-close:hover {
    color: #2c3e50;
    background: #f8f9fa;
}

.timeline-body {
    padding: 24px;
    max-height: 400px;
    overflow-y: auto;
}

.timeline-item {
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
    padding: 12px;
    border-radius: 6px;
}

.timeline-item:hover {
    background: #f8f9fa;
}

.timeline-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.timeline-time {
    min-width: 160px;
    font-weight: 600;
    color: #495057;
    font-size: 13px;
}

.timeline-event {
    flex: 1;
    color: #2c3e50;
    font-weight: 500;
}

.timeline-footer {
    padding: 20px 24px;
    border-top: 1px solid #dee2e6;
    text-align: right;
    background: #f8f9fa;
}

.timeline-close-btn {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}

.timeline-close-btn:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.calendar-selection-overlay {
    position: relative; 
    background: rgba(255, 255, 255, 0.95); /* Semi-transparent white to mimic a lightbox effect */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 50; /* Ensure it is above the grid but below other modals/tooltips */
    pointer-events: auto; /* IMPORTANT: Ensures clicks are captured by the overlay */
}

.overlay-message-content {
    padding: 30px 40px;
    color: #495057;
    font-size: 1.1rem;
    margin: 20px;
}

.overlay-message-content p {
    margin: 0;
    font-weight: 500;
}

/* Visual indicator for actionable appointments */
.actionable-appointment {
    border-left: 4px solid #28a745 !important;
}

.event-action-indicator {
    margin-left: auto;
    color: #6c757d;
    font-size: 0.8em;
    opacity: 0.7;
}

/* Context menu styles */
.context-menu-item[style*="display: none"] {
    display: none !important;
}

.context-menu-no-actions {
    padding: 8px 12px;
    color: #6c757d;
    text-align: center;
    border-top: 1px solid #dee2e6;
    margin-top: 8px;
    font-size: 10px;
    font-style: normal;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.context-menu-item:hover {
    background-color: #f8f9fa;
}

.context-menu-item[data-action="cancel"] {
    color: #dc3545;
}

.context-menu-item[data-action="cancel"]:hover {
    background-color: #f8d7da;
}

.appointment-details-display {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 25px;
    margin: 8px 15px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #e9ecef;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item strong {
    color: #495057;
    min-width: 80px;
}

.detail-item span {
    color: #212529;
    font-weight: 500;
}

.detail-item i {
    margin-right: 5px;
}

.calendar-days-grid {
    position: relative;
    overflow: visible !important; /* Allow tooltips to extend beyond grid */
}

.day-events-column,
.week-day-column {
    position: relative;
    overflow: visible !important; /* Allow tooltips to extend beyond columns */
}

.time-slot {
    position: relative;
    overflow: visible !important; /* Allow tooltips to extend beyond time slots */
}

.calendar-event {
    position: absolute;
    overflow: visible !important; /* Ensure events don't clip tooltips */
    z-index: 10;
}

/* Fix tooltip positioning */
.event-hover-tooltip {
    position: fixed !important; /* Use fixed positioning to escape all containers */
    z-index: 2147483647 !important;
    display: none;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 280px;
    max-width: 320px;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none; /* Allow clicks to pass through when not hovering */
}

.event-hover-tooltip {
    isolation: isolate !important; /* Create new stacking context */
    will-change: transform, opacity; /* Hint to browser for better rendering */
}

.event-hover-tooltip::before {
    display: none; /* Remove the arrow for fixed positioning */
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.tooltip-time {
    font-weight: 600;
    color: #333;
}

.tooltip-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.tooltip-content {
    margin-bottom: 8px;
}

.tooltip-content > div {
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
}

.tooltip-content i {
    width: 16px;
    margin-right: 6px;
    color: #666;
    text-align: center;
}

.tooltip-patient strong {
    color: #2c3e50;
}

.tooltip-service {
    color: #7d3c98;
}

.tooltip-doctor {
    color: #2980b9;
}

.tooltip-branch {
    color: #16a085;
}

.tooltip-age {
    color: #e67e22;
}

.tooltip-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tooltip-label {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
}

.tooltip-walkin {
    color: #e74c3c;
    font-weight: 500;
}

.tooltip-footer {
    text-align: center;
    color: #95a5a6;
    font-style: italic;
    border-top: 1px solid #eee;
    padding-top: 6px;
}

/* Enhanced hover behavior */
.calendar-event:hover .event-hover-tooltip {
    display: block;
    animation: tooltipFadeIn 0.3s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ensure tooltips don't interfere with event clicks */
.calendar-event {
    cursor: pointer;
}

.calendar-event * {
    position: relative;
    z-index: auto !important;
}

.loading-calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666;
    flex-wrap: wrap;
    gap: 10px;
}

.loading-calendar i {
    font-size: 2em;
    margin-bottom: 10px;
    color: #999;
}

.loading-calendar span {
    font-size: 1em;
}

/* Status-specific tooltip styling */
.tooltip-status.status-booked { background: #e3f2fd; color: #0d47a1; }
.tooltip-status.status-confirmed { background: #e8f5e9; color: #1b5e20; }
.tooltip-status.status-checked-in { background: #fff3e0; color: #e65100; }
.tooltip-status.status-completed { background: #f1f8e9; color: #33691e; }
.tooltip-status.status-cancelled { background: #ffebee; color: #b71c1c; }
.tooltip-status.status-no-show { background: #eceff1; color: #37474f; }
.tooltip-status.status-arrived { background: #fff3e0; color: #e65100; }
.tooltip-status.status-pending { background: #fff3e0; color: #e65100; }


/* =================================================== */
/* ---                 Finance Styles              --- */
/* =================================================== */

.finance_section_container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin: 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.finance-section-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    padding: 10px;
    gap: 10px;
}

.finance_card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    line-height: 1;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.finance-section-title {
    font-size: 1.5em;
    text-align: left;
    font-weight: bold;
    color: var(--text-color-secondary);
    margin-bottom: 10px;
}

.charts-container {
    display: flex;
    flex-wrap: wrap; /* Allows charts to wrap on smaller screens */
    gap: 20px;
    justify-content: center;
}

/* Styles for the charts */
.finance-chart {
    width: 100%;
    max-width: 500px; /* Adjust max width as needed */
    margin: 20px auto;
}

.finance-unit {
    font-size: 0.8em;
    color: var(--text-color-secondary);
    text-align: left;
}

.loyal-patients-card {
    display: flex;
    line-height: 1;
    box-sizing: border-box;
    width: auto;
    flex: 1;
}

#financeCardLoyalPatients {
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

.loyal-list-group-item {
    padding: 10px 0;
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    font-size: 0.9em;
    text-align: left;
    width: 80%;
    color: var(--text-color-secondary);
    line-height: 1.4;
}

.loyal-list-group-item:last-child {
    border-bottom: none;
}

.loyal-patients-list li::marker {
    font-size: 1.2em;
    font-weight: bold; 
}

/* =================================================== */
/* ---        Booking Services List Styles         --- */
/* =================================================== */

.custom-dropdown,
.custom-dropdown-editVisit {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: Arial, sans-serif;
    background-color: #fdfdff;
}

.custom-dropdown-toggle,
.custom-dropdown-toggle-editVisit {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dcdcdc;
    background-color: #fdfdff;
    cursor: pointer;
    text-align: left;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-size: 1em;
    color: var(--text-color-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
}

.dropdown-text {
    white-space: nowrap;
}

/* Style for the chevron icon */
.dropdown-arrow {
    font-size: 0.7em;
    color: #888;
}

.custom-dropdown-toggle:hover,
.custom-dropdown-toggle-editVisit:hover {
    background-color: #f4f4f4;
}

/* Container for the list of service items */
.custom-dropdown-list,
.custom-dropdown-list-editVisit {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    border: 1px solid #ccc;
    background-color: #fff;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 0; /* Initially collapsed */
    overflow: hidden; /* Hide content overflow while collapsed */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

/* State when the dropdown is open */
.custom-dropdown-list.active,
.custom-dropdown-list-editVisit.active {
    max-height: 250px; /* Expands to a fixed height */
    opacity: 1;
    overflow-y: auto; /* Adds a scrollbar for long lists */
}

/* Style for each service item in the list */
.service-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    font-weight: normal;
}

/* Style for the service details text */
.service-list-item span {
    display: flex;
    align-items: left;
    flex-grow: 1;
    font-size: 0.95em;
    color: var(--text-color-secondary);
}

.service-price {
    font-weight: bold;
    color: #28a745; /* A color for the price */
    margin-left: 10px;
}

/* Styles for the "Add" button */
.add-service-btn {
    padding: 4px 10px;
    color: white;
    background-color: var(--success-color);
    border: 0;
    border-radius: 20px;
    font-size: 0.7em;
    letter-spacing: 1px;
    cursor: pointer;
}

.add-service-btn:hover:not(:disabled) {
    background-color: var(--success-color-hover);
}

.add-service-btn:disabled {
    background-color: var(--text-grayedout);
    cursor: default;
    opacity: 0.5;
}

/* Style for the 'Added' checkmark */
.add-service-btn i.fa-check {
    margin-right: 5px;
}

/* Styles for the loading and error messages */
.loading-message,
.no-services-message {
    padding: 15px;
    text-align: center;
    color: #666;
    font-style: italic;
    font-size: 14px;
}

/* Container for the list of services added by the user */
.selected-services-container {
    border-radius: 5px;
    padding: 5px;
    min-height: 30px; /* Ensures the container is visible even when empty */
    max-height: 125px;
    overflow-y: auto;
}

.selected-services-container .add-services-message {
    font-size: 0.9em;
    text-align: center;
    font-weight: normal;
    color: var(--text-grayedout);
}

/* Individual service item within the container */
.selected-service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 10px;
    border-bottom: 1px solid #dee2e6;
    font-size: 1em;
    color: var(--text-color-secondary);
    font-weight: normal;
    background-color: var(--secondary-color);
    border-radius: 15px;
    padding: 3px 20px;
    margin-bottom: 3px;
}

.selected-service-item:last-child {
    border-bottom: none;
}

/* Style for the remove button */
.remove-service-btn {
    background-color: transparent;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s ease;
    padding: 0;
}

.remove-service-btn:hover {
    color: var(--error-color-hover);
}

/* Container for the total price display */
.total-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    border-top: 1px solid var(--border-color); /* A bold line to separate it from the list */
    font-size: 1em;
    font-weight: bold;
    color: var(--text-color-secondary);
}

.total-fee-line {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    text-align: end;
}

/* The actual price value */
#totalPriceDisplay,
#walkInTotalPriceDisplay,
#totalPriceDisplayEditService,
#totalFeesDisplay {
    color:var(--text-color-primary); /* A distinct color for the total price */
    font-weight: normal;
}

.payment-modal-title {
    font-weight: bold;
    color: var(--text-color-secondary);
}

.service-payment-group {
    display: flex;
    gap: 10px;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

#servicesPaymentContainer {
    overflow-x: auto;
}

.service-name-label {
    font-weight: bold;
    font-size: 1em;
    line-height: 1;
    flex: 1;
    min-width: 150px;
}

.service-amount-input,
.service-payment-method {
    display: flex;
    width: 100%; /* Ensures fields span the full width of their container */
    padding: 8px 8px;
    border: 1px solid #dcdcdc; /* Lighter border */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Base font size for input text */
    color: #333;
    background-color: #fdfdff; /* Off-white background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    flex-grow: 1;
    height: 35px;
    min-width: 120px;
}

.btn-pay-service {
    padding: 8px 10px;
    border: 1px solid var(--success-color);
    border-radius: 5px;
    color: var(--success-color);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    min-width: 120px !important;
}

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

.btn-pay-service:active {
    background-color: var(--success-color);
    color: white;
}

.btn-paid {
    cursor: default;
    background-color: var(--success-color);
    color: white;
}

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

.btn-paid i {
    margin: 0 5px; /* Adjust this value as needed */
}

.btn-refund-toggle {
    background-color: var(--error-color-hover);
    color: white;
    cursor: pointer;
    font-size: 1em;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 20px;
}

.btn-refund-toggle:hover {
    background-color: var(--error-color);
}

.btn-refund {
    color: var(--error-color-hover);
    background-color: white;
    cursor: pointer;
    font-size: 1em !important;
    padding: 7px 12px;
    border: 1px solid var(--error-color-hover);
    border-radius: 5px;
    margin-left: 10px;
    align-self: flex-end;
    margin-bottom: 8px;
}

.btn-refund:hover {
    color: white;
    background-color: var(--error-color);
}

.refund-title {
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--error-color);
}

.refund-section {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-color);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.totalRefundDisplay {
    color: var(--error-color) !important;
    font-weight: bold;
    font-size: 1em;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .error-icon {
    color: var(--danger-color);
    position: absolute;
    right: 10px;
    display: none;
}

.payment-container {
    padding: 20px 30px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--field-border);
    border-radius: 25px;
    box-sizing: border-box;
}

#refundContainer {
    padding: 20px 30px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--field-border);
    border-radius: 25px;
    box-sizing: border-box;
}

.refund-amount-input.error-border,
.refund-cause-input.error-border {
    border: 2px solid var(--error-color) !important; 
}
.error-icon {
    display: none; 
    color: var(--error-color) !important;
}

.paid-amount {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--success-color);
}

.refund-amount-display {
    color: var(--error-color);
}

.status-chip {
    padding: 1px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0 5px;
    white-space: nowrap;
}

.status-chip-fully-paid,
.status-fully-paid {
    border: 1px solid rgb(229, 174, 57);
    color: rgb(229, 174, 57);
}

.status-chip-partially-paid,
.status-partially-paid {
    border: 1px solid rgb(168, 119, 15);
    color: rgb(168, 119, 15);
}

.status-chip-overpaid {
    border: 1px solid rgb(212, 90, 18);
    color: rgb(212, 90, 18);
}

.status-unpaid,
.status-chip-unpaid {
    border: 1px solid rgb(146, 146, 146);
    color: rgb(146, 146, 146);
}

.status-refunded {
    border: 1px solid rgb(233, 58, 58);
    color: rgb(233, 58, 58);
}

.fees-summary {
    font-size: 0.9em;
    white-space: nowrap;
}


/* Base chip style for all statuses */
.payment-chip {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 500;
    margin-left: 8px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Style for paid status chip */
.paid-chip {
    background-color: white; /* Light green */
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

/* Style for pending status chip */
.pending-chip {
    background-color: white; /* Light red */
    border: 1px solid var(--error-color);
    color: var(--error-color);
}

/* =================================================== */
/* ---      Select Branch After Login Styles       --- */
/* =================================================== */

#branchesListContainer {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    min-width: 315px;
}

.branch-type-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    width: 315px;
    justify-content: center;
    align-items: center;
}

.branch-button {
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 10px 20px;
    border: none;
    background-color: #0a6c96;
    border-radius: 20px;
    font-size: 1em;
    font-weight: normal;
    color: white;
    cursor: pointer;
    width: fit-content;
    text-align: center;
    box-sizing: border-box;
    transition: background-color 0.3s ease-in-out;
}

.branch-button:hover {
    background-color: #0c80aa; 
}

.branch-button .button-text {
    white-space: nowrap;
}

.branch-icon {
    margin-right: 20px;
    margin-left: 0;
}

.branch-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    font-family: Cairo;
}

.branch-item:hover {
    background-color: #f0f0f0;
    border-color: #c0c0c0;
}

.branch-item input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.branch-item label {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    flex-grow: 1;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
}

.branch-item label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
}

/* Style for when the radio button is checked */
.branch-item input[type="radio"]:checked + label::before {
    background-color: #007bff;
    border-color: #007bff;
}

.branch-item input[type="radio"]:checked + label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    width: 8px;
    background-color: #fff;
    border-radius: 50%;
}

#CancelSelectBranchButton,
#backToDashboardBtn {
    background-color: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    padding: 10px;
    color: var(--text-color-secondary);
}

#CancelSelectBranchButton:hover,
#backToDashboardBtn:hover {
    text-decoration: underline;
}

/* Radio Option Styling */
.radio-option {
    cursor: pointer;
    margin: 0;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    min-width: 100px;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    border-color: #e0e0e0;
    background-color: var(--border-color);
    box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2);
}

/* Radio Icon Styling */
.radio-icon {
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

.radio-option input[type="radio"]:checked + .radio-custom .radio-icon {
    transform: scale(1.1);
}

/* Radio Label Styling */
.radio-label {
    font-weight: 500;
    color: #495057;
    transition: color 0.3s ease;
}

.radio-option input[type="radio"]:checked + .radio-custom .radio-label {
    color: #1971c2;
    font-weight: 600;
}

/* Hover Effects */
.radio-option:hover .radio-custom {
    border-color: #adb5bd;
    background-color: #f8f9fa;
}

.radio-option input[type="radio"]:checked:hover + .radio-custom {
    border-color: #339af0;
    background-color: #d0ebff;
}

/* Focus Accessibility */
.radio-option input[type="radio"]:focus + .radio-custom {
    outline: 2px solid #4dabf7;
    outline-offset: 2px;
}


/* =================================================== */
/* ---          Live Chat Specific Styles          --- */
/* =================================================== */

/* 1. Main Wrapper for Chat Layout */
.chat-wrapper {
    /* 🛑 RESTORED: Flex layout for side-by-side panels */
    display: flex;
    flex-direction: row; 
    height: calc(100vh - 180px); 
    width: calc(100vw - 280px);
    margin: 10px; 
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden; 
    background-color: var(--color-background-secondary);
    position: relative; /* Keep relative for general positioning */
}

/* 2. Left Panel: Contact List Sidebar (Fixed Width) */
.chat-sidebar {
    /* 🛑 RESTORED: Fixed width panel */
    width: 350px;
    min-width: 250px;
    background-color: var(--secondary-color);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-sizing: border-box;
}

.chat-search {
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
    margin-bottom: 10px;
}

#contactSearch {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.contact-list {
    flex-grow: 1; 
    overflow-y: auto; 
}

/* Style for individual contact rows */
.contact-row {
    position: relative;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Allows stacking of .contact-info and .contact-description */
    align-items: flex-start; /* Aligns content to the left */
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
}

.contact-row:hover {
    background-color: var(--color-background-hover);
}

.contact-row.active {
    background-color: var(--color-primary-light, #e9f0ff);
    border-left: 4px solid var(--color-primary, #007bff);
    padding-left: 11px; 
}

.contact-row:not(:has(.contact-description)) {
    flex-direction: row;
    align-items: left;
    text-align: left;
}

/* Contact Row Details (for status/account type) */
.contact-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    width: 100%;
}

.contact-name {
    font-weight: bold;
    font-size: 15px;
    flex-grow: 1; 
    margin-right: 5px; 
    color: var(--color-text-dark);
    text-align: left;
    width: 100%;
}

.contact-account-type {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    font-size: 12px;
    text-align: right;
    font-weight: normal;
    white-space: nowrap;
}

.contact-last-active {
    font-size: 12px;
}

.contact-description {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted, #6c757d);
    width: 100%; /* Ensures it wraps if long */
    text-align: left;
}

.status-online {
    color: var(--color-success, #28a745); 
    font-weight: bold;
}

.status-offline {
    color: var(--color-text-muted, #6c757d); 
}


/* 3. Right Panel: Main Chat Window */
.chat-main-window {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin-left: 10px;
    overflow: hidden;
}

.chat-header {
    padding: 15px 20px;
    background-color: var(--secondary-color);
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-top: -20px;
    margin-bottom: 10px;
}

#recipientName {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-dark);
    font-weight: bold;
}

/* Message History Container */
.chat-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto; 
    display: flex;
    flex-direction: column; 
    gap: 10px; 
    min-height: 0; /* Important to prevent collapse */
    margin-bottom: 15px;
}

.system-message {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    padding: 10px;
    margin: 10px auto;
}

/* 4. Chat Input Area */
.chat-input-area {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

#messageInput {
    flex-grow: 1;
    padding: 10px;
    border: none;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 14px;
    font-family: Cairo, Roboto;
}

#messageInput:focus,
#messageInput:active {
    border: none;
    outline: none; /* 🛑 NEW: Removes the default browser focus ring/outline */
    box-shadow: none; /* 🛑 NEW: Removes any potential focus glow/shadow */
}

#sendMessageBtn {
    padding: 10px 15px;
    background-color: var(--success-color);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#sendMessageBtn:hover:not(:disabled) {
    background-color: var(--success-color-hover);
}

#sendMessageBtn:disabled {
    background-color: lightgrey;
    cursor: auto;
    color: var(--text-grayedout);
}

/* --- Message Bubble Styling (Kept the Sender/Time Header Structure) --- */

/* 1. Main Message Bubble Container */
.message-bubble {
    max-width: 60%;
    display: flex; 
    flex-direction: column;
    padding: 8px 12px; 
    border-radius: 18px;
    line-height: 1.4;
    word-wrap: break-word;
    font-size: 14px;
    position: relative; 
    padding-bottom: 25px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Highlight message being edited */
.message-bubble.editing {
    background-color: var(--color-background-hover); 
    box-shadow: 0 0 5px var(--color-primary-light);
}

/* 2. Message Info Header (Contains Sender Name and Time) */
.message-info {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 10px;
}

.message-actions {
    position: absolute;
    bottom: 0;
    left: -45px; 
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
    background: var(--secondary-color);
    border: none;
    border-radius: 5px 5px 0 5px;
    padding: 2px 5px;
    white-space: nowrap;
}

.message-text {
    white-space: pre-wrap; /* Preserve line breaks but collapse other whitespace */
    word-wrap: break-word;
}

.message-text:empty {
    display: none;
}

/* Ensure input field doesn't add extra spacing */
#messageInput {
    white-space: pre-wrap;
    line-height: 1.4;
}

.message-actions .msg-delete-btn:hover {
    color: var(--error-color);
    background-color: transparent;
}

.message-actions .msg-edit-btn:hover {
    color: var(--success-color);
    background-color: transparent;
}

/* 3. Sender Name */
.sender-name {
    font-weight: bold;
    font-size: 12px;
    color: inherit; 
    opacity: 0.9;
    margin-right: 15px;
}

.message-timestamp-footer {
    /* 🛑 REQUIRED: Absolute positioning inside the message bubble */
    position: relative;
    font-size: 10px;
    opacity: 0.7;
    color: inherit; /* Inherits text color from .message-user or .message-contact */
    white-space: nowrap;
    margin-top: 10px;
    text-align: right;
}

/* 5. Message Text Container */
.message-contact .message-text {
    font-size: 14px;
    text-align: left;
    font-family: Cairo;
}

.message-user .message-text {
    font-size: 14px;
    text-align: right;
    font-family: Cairo;
}


/* Show actions on hover */
.message-user:hover .message-actions,
.message-bubble.editing .message-actions {
    opacity: 1; 
}

.message-actions button {
    background: none;
    border: none;
    color: inherit; /* Inherit color from the bubble */
    cursor: pointer;
    font-size: 10px;
    padding: 2px;
    opacity: 0.8;
}

.message-actions button:hover {
    opacity: 1;
}

/* --- Deleted/Edited Message Status --- */

.message-bubble.deleted {
    opacity: 0.5;
    padding: 10px 12px 10px; /* Reduce bottom padding for deleted message */
}

.message-bubble.deleted .message-timestamp-footer {
    display: none; /* Hide timestamp for cleaner deleted state */
}

.deleted-text {
    color: var(--color-text-muted);
}

.edited-tag {
    font-size: 9px;
    margin-left: 5px;
    opacity: 0.9;
}

/* --- Editing Banner --- */

.edit-banner {
    background-color: var(--color-primary-light);
    color: var(--color-text-dark);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    border: 1px solid var(--color-primary);
}

.edit-banner span {
    font-weight: bold;
    margin-left: 5px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cancel-edit-msg-btn {
    background: none;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    font-weight: normal;
    font-size: 0.9em;
    padding: 0;
    margin-left: 10px;
}
.message-user {
    align-self: flex-end; 
    color: var(--color-text-dark);
    border: 1px solid lightyellow;
    border-bottom-right-radius: 2px;
    padding: 10px;
    background-color: lightgoldenrodyellow;

}
.message-user .message-info {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.message-contact {
    align-self: flex-start; 
    color: var(--color-text-dark);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 2px;
    padding: 10px;
    background-color: var(--secondary-color);

}
.message-contact .message-info {
    border-bottom: 1px solid var(--color-border-light);
}

.contact-text-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.contact-name-wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: baseline;
}

.contact-primary-line {
    display: flex; 
    align-items: baseline;
    font-size: 1rem;
    font-weight: 500;
    align-items: space-between;
    width: 100%;
}

.contact-secondary-line {
    font-size: 0.8rem;
    color: #888;
}

.contact-tertiary-line {
    line-height: 1;
}

.contact-activity-status {
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 10px;
}

.unseen-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; 
    background-color: var(--success-color);
    color: white;
    font-size: 0.75rem;
    font-weight: normal;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    text-align: center;
}

.unseen-badge:empty,
.unseen-badge[data-count="0"] {
    display: none;
}

.unseen-messages-separator {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #666;
    font-size: 0.8em;
    font-weight: 500;
}

.separator-line {
    flex: 1;
    height: 1px;
    background-color: #e0e0e0;
}

.separator-text {
    padding: 0 12px;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* Optional: Add animation when separator appears */
.unseen-messages-separator {
    animation: fadeInUp 0.3s ease-out;
}

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


.message-bubble.message-highlight {
    animation: messagePulse 2s ease-in-out;
    background-color: rgba(255, 235, 59, 0.1);
    border-left: 3px solid #ffeb3b;
}

@keyframes messagePulse {
    0% {
        background-color: rgba(255, 235, 59, 0.1);
        border-left-color: #ffeb3b;
    }
    50% {
        background-color: rgba(255, 235, 59, 0.3);
        border-left-color: #ffc107;
    }
    100% {
        background-color: rgba(255, 235, 59, 0.1);
        border-left-color: #ffeb3b;
    }
}

/* Ensure smooth scrolling */
.chat-messages {
    scroll-behavior: smooth;
}

.load-more-messages {
    text-align: center;
    padding: 10px;
}

.load-more-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 8px 16px;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.load-more-btn i {
    margin-right: 5px;
}

.message-bubble.new-message-highlight {
    animation: messageHighlight 2s ease-in-out;
    border-left: 3px solid #4a90e2;
}

@keyframes messageHighlight {
    0% {
        border-left-color: #4a90e2;
        background-color: rgba(74, 144, 226, 0.05);
    }
    50% {
        border-left-color: #2c5aa0;
        background-color: rgba(74, 144, 226, 0.1);
    }
    100% {
        border-left-color: #4a90e2;
        background-color: rgba(74, 144, 226, 0.05);
    }
}

.chat-messages {
    scroll-behavior: smooth;
}

.loading-contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #666;
}

.loading-contacts .fa-spinner {
    font-size: 16px;
    color: #007bff;
}

/* ================================================== */
/* =============== Data Backup Styles =============== */
/* ================================================== */

.backup-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.backup-header {
    text-align: center;
    margin-bottom: 30px;
}

.backup-header h1 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.backup-header p {
    color: #7f8c8d;
    font-size: 16px;
}

.backup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow-x: auto;
    padding: 10px;
}

.backup-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e8ed;
    transition: all 0.3s ease;
}

.backup-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.backup-card.drugs {
    border-top: 4px solid #e74c3c;
}

.backup-card.patients {
    border-top: 4px solid #3498db;
}

.backup-card.visits {
    border-top: 4px solid #2ecc71;
}

.backup-card.financial {
    border-top: 4px solid #f39c12;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: white;
}

.drugs .card-icon { background: #e74c3c; }
.patients .card-icon { background: #3498db; }
.visits .card-icon { background: #2ecc71; }
.financial .card-icon { background: #f39c12; }

.card-title h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 18px;
}

.card-title p {
    margin: 0;
    color: #7f8c8d;
    font-size: 13px;
}

.database-stats {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.stat-item:last-child {
    margin-bottom: 0;
}

.stat-label {
    color: #6c757d;
}

.database-stats .stat-item .stat-value {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.2em;
}

.backup-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-success {
    background: #27ae60;
    color: white;
}

.btn-success:hover {
    background: #219a52;
}

.btn-warning {
    background: #f39c12;
    color: white;
}

.btn-warning:hover {
    background: #e67e22;
}

.btn-outline {
    background: transparent;
    border: 2px solid #bdc3c7;
    color: #7f8c8d;
}

.btn-outline:hover {
    border-color: #95a5a6;
    color: #2c3e50;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bulk Operations Section */
.bulk-operations {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.bulk-header {
    display: flex;
    flex-direction: column;
    justify-content: between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.bulk-header h2 {
    color: #2c3e50;
    margin: 0;
}

.bulk-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-lg {
    padding: 8px 24px;
    font-size: 1em;
}

/* Backup History Section */
.backup-history {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.history-header h2 {
    color: #2c3e50;
    margin: 0;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-completed {
    background: #d4edda;
    color: #155724;
}

.status-failed {
    background: #f8d7da;
    color: #721c24;
}

.status-running {
    background: #cce7ff;
    color: #004085;
}

/* Progress Bar */
.progress-container {
    margin: 20px 0;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #3498db;
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}

/* Loading Animation */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


        /* Restore Modal Specific Styles */
#restoreModal .modal-content {
    max-width: 600px;
    width: 90%;
}

#restoreModal .input-group {
    margin-bottom: 20px;
}

#restoreModal label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #2c3e50;
}

#restoreModal .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

#restoreModal .form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#restoreModal .text-muted {
    color: #7f8c8d;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Checkbox Styles */
#restoreModal .checkbox-group {
    margin-top: 8px;
}

#restoreModal .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
}

#restoreModal .checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Progress Bar Styles */
#restoreProgress {
    margin: 20px 0;
}

#restoreModal .progress-bar {
    width: 100%;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

#restoreModal .progress-fill {
    height: 100%;
    background: #3498db;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 10px;
}

#restoreModal .progress-text {
    text-align: center;
    margin-top: 8px;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 500;
}

/* Results Styles */
#restoreResults {
    margin-top: 20px;
}

#restoreResults p {
    text-align: left;
    line-height: 1;
}

#restoreModal .alert {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

#restoreModal .alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#restoreModal .alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#restoreModal .alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

#restoreModal .alert h4 {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

#restoreModal .alert h5 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

#restoreModal .alert ul {
    margin: 0;
    padding-left: 20px;
    max-height: 200px;
    overflow-y: auto;
}

#restoreModal .alert li {
    margin: 4px 0;
    font-size: 13px;
}

/* Modal Buttons */
#restoreModal .modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

#restoreModal .button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

#restoreModal .button:not(.cancel-button) {
    background: #3498db;
    color: white;
}

#restoreModal .button:not(.cancel-button):hover {
    background: #2980b9;
}

#restoreModal .cancel-button {
    background: #95a5a6;
    color: white;
}

#restoreModal .cancel-button:hover {
    background: #7f8c8d;
}

#restoreModal .button:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Mandatory field indicator */
#restoreModal .mandatory {
    color: #e74c3c;
    margin-left: 2px;
}

/* File input specific styles */
#restoreFile {
    padding: 8px 12px;
}

/* Animation for progress bar */
@keyframes progressPulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

#restoreModal .progress-fill.animate {
    animation: progressPulse 1.5s ease-in-out infinite;
}

/* Success state for progress bar */
#restoreModal .progress-fill.success {
    background: #27ae60;
}

/* Error state for progress bar */
#restoreModal .progress-fill.error {
    background: #e74c3c;
}

/* Scrollable results for long error lists */
#restoreModal .scrollable-results {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    background: #fafafa;
}

/* Loading spinner for buttons */
#restoreModal .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form validation styles */
#restoreModal .form-control.invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

#restoreModal .validation-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

#restoreModal .form-control.invalid + .validation-message {
    display: block;
}

.checkbox-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}


/* ==================================================================================== */
/* =========================== Pagination Styles ====================================== */
/* ==================================================================================== */

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 0.9em;
    color: #666;
    font-weight: normal;
    margin-left: 10px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-btn {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8em;
    transition: all 0.2s ease;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(.disabled) {
    background: #f8f9fa;
    border-color: #5172b8;
}

.pagination-btn.active {
    background: #5172b8;
    color: white;
    border-color: #5172b8;
    cursor: auto;
}

.pagination-btn.active:hover {
    background: #5172b8;
    color: white;
    border-color: #5172b8;
    cursor: auto;
}

.pagination-btn.disabled {
    background: #f8f9fa;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-btn.disabled:hover {
    background: #f8f9fa;
    border-color: #ddd;
    color: #999;
}

.pagination-ellipsis {
    padding: 8px 5px;
    color: #666;
    font-weight: bold;
}

/* Icon buttons styling */
.pagination-btn.first-btn,
.pagination-btn.prev-btn,
.pagination-btn.next-btn,
.pagination-btn.last-btn {
    font-size: 0.8em;
}

/* =================================================== */
/* ---                   AI Styles                 --- */
/* =================================================== */

/* AI Enhance Button Styles */
.AI-enhance-btn {
    border: none;
    padding: 2px 10px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 50px;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 6px rgba(106, 13, 173, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    z-index: 10;
    min-height: 30px;
    transform: scale(1);
}

.AI-enhance-btn .button-text {
    white-space: nowrap;
    font-size: 0.85em;
    font-family: 'Cairo', Roboto;
}

/* Glass effect hover for normal state */
.AI-enhance-btn:hover:not(.loading):not(.success):not(.error):not(:disabled) {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.03);
}

/* Luster shine effect on hover */
.AI-enhance-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.7s ease;
    pointer-events: none;
}

.AI-enhance-btn:hover:not(.loading):not(.success):not(.error):not(:disabled)::before {
    left: 100%;
}

/* Active state for normal button */
.AI-enhance-btn:active:not(.loading):not(.success):not(.error):not(:disabled) {
    transform: translateY(0);
    box-shadow: 
        0 4px 10px rgba(106, 13, 173, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

/* Loading state - only spinner centered */
.AI-enhance-btn.loading {
    cursor: wait;
    gap: 0; /* Remove gap when only spinner is visible */
}

.AI-enhance-btn.loading .button-text,
.AI-enhance-btn.loading .button-icon {
    display: none;
}

/* CSS Spinner - same as your save button */
.AI-enhance-btn.loading::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success state - greenish violet gradient with checkmark */
.AI-enhance-btn.success {
    animation: successGradient 2s ease;
    cursor: not-allowed;
}

.AI-enhance-btn.success-glow {
    animation: successGlow 2s ease-in-out;
}

.AI-enhance-btn.success .button-text {
    display: none;
}

.AI-enhance-btn.success .button-icon {
    font-weight: bold;
    animation: checkmarkPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Error state */
.AI-enhance-btn.error {
    background: linear-gradient(
        135deg,
        rgba(255, 82, 82, 0.9) 0%,
        rgba(211, 47, 47, 0.9) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: not-allowed;
}

/* Hidden utility class */
.hidden {
    display: none !important;
}

/* Button icon and text */
.button-icon {
    transition: transform 0.2s ease;
}

/* Success animations */
@keyframes successGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Inactive states - no hover effects and different cursor */
.AI-enhance-btn:disabled,
.AI-enhance-btn.loading,
.AI-enhance-btn.success,
.AI-enhance-btn.error {
    cursor: not-allowed;
    transform: none !important;
}

.AI-enhance-btn:disabled:hover::before,
.AI-enhance-btn.loading:hover::before,
.AI-enhance-btn.success:hover::before,
.AI-enhance-btn.error:hover::before {
    left: -100% !important;
}

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Textarea Loading Overlay */
.textarea-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 5;
    border-radius: 4px;
    border: 1px solid rgba(106, 13, 173, 0.2);
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(106, 13, 173, 0.2);
    border-top-color: #6a0dad;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 14px;
    font-weight: 600;
    color: #6a0dad;
    text-align: center;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ensure textarea has proper positioning context */
.form-group.textarea {
    position: relative;
}

/* Make sure the textarea container has relative positioning */
.textarea-container {
    position: relative;
    width: 100%;
}

/* Adjust textarea padding to account for the AI button */
#recommendationsNotes {
    padding-right: 180px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Medication Safety Container */
.medication-safety-container {
    margin-left: 50px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #f8f9fa;
    max-width: calc(100% - 80px);
    padding: 15px;
    margin-right: 30px;
}

.safety-info-loading, .safety-info-error {
    padding: 1.5rem;
    text-align: center;
    color: #6c757d;
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 10px;
}

.safety-info-content {
    padding: 1rem;
}

.safety-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.safety-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
}

.toggle-safety-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.safety-sections {
    margin-bottom: 1rem;
}

.safety-section {
    margin-bottom: 1.5rem;
}

.safety-section h5 {
    margin: 0 0 0.5rem 0;
    color: #495057;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.safety-content {
    background: white;
    padding: 5px 15px;
    border-radius: 6px;
    border-left: 4px solid #007bff;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.safety-content p {
    margin: 0 !important;
}

.safety-disclaimer {
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 0.8rem;
}

.retry-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 1rem;
}

.retry-btn:hover {
    background: #0056b3;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.safety-analysis-controls {
    text-align: right;
    margin-left: 50px;
    margin-right: 30px;
}

.safety-analysis-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 4px 15px;
    border-radius: 35px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cairo', 'Roboto';
}

.safety-analysis-btn:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
}

.safety-analysis-btn:active:not(.disabled) {
    transform: translateY(0);
}

.safety-analysis-btn.disabled {
    cursor: not-allowed;
    box-shadow: none;
}

.safety-analysis-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}



/* =================================================== */
/* ---         Service Notification Styles         --- */
/* =================================================== */

/* Service Notification Styles */
.service-notification {
    position: fixed;
    top: 82px;
    right: 8px;
    background: #fff3cd;
    color: #856404;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
    z-index: 999;
    font-family: 'Cairo', sans-serif;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 400px;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notification-message {
    flex: 1;
    font-weight: 500;
}

.notification-ok-btn {
    background: #856404;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    min-width: 50px;
    transition: all 0.2s ease;
}

.notification-ok-btn:hover {
    background: #a68216ff;
}

.notification-ok-btn:active {
    transform: scale(0.95);
}

/* Notification Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification-slide-in {
    animation: slideInRight 0.3s ease-out forwards;
}

.notification-slide-out {
    animation: slideOutRight 0.3s ease-out forwards;
}

/* =================================================== */
/* ---         Waiting Room Display Styles         --- */
/* =================================================== */

/* Icon Circle Styles */
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #64b3f4 0%, #64f4b3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 3px solid white;
}

.icon-circle i {
    font-size: 1.5em;
    color: white;
}

.icon-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.waiting-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    margin: 20px;
    border-radius: 35px;
    
    /* UPDATED: Even Lighter Gradient */
    background-image: linear-gradient(to right, #E8F8EE, #E6F3FB); /* Very pale green to very pale blue */
    background-color: #E6F3FB; /* Fallback light color */
    
    /* Ensure text is dark for readability */
    color: var(--color-text-dark); 
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-branch-patients {
    display: flex;
    flex-direction: column;
}

.branch-name {
    font-size: 2.2em;
    font-weight: bold;
    flex-grow: 1;
    font-family: 'Cairo', 'Roboto';
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.time {
    font-size: 2.8em;
    font-weight: 500;
    line-height: 1.1;
}

.date {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.1;
}

/* --- Total Active Patients Bar --- */
.total-patients-bar {
    color: var(--color-primary);
    padding: 0 20px;
    font-size: 1.3em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 2px solid var(--color-primary);
}

.patient-count {
    font-weight: bold;
    font-size: 1.2em;
    color: #64b3f4;
}

/* --- Main Display Area --- */
.display-container {
    display: flex;
    flex: 1;
    padding: 20px 40px;
    gap: 40px;
    overflow: hidden;
    max-height: 650px;
    box-sizing: border-box;
}

.section-title {
    font-size: 1.5em;
    font-weight: 600;
    padding: 5px 0 15px 0;
    margin-bottom: 25px;
    color: var(--text-color-secondary);
    text-transform: capitalize;
    border-bottom: 1px solid var(--border-color);
    font-family: 'Changa', 'Roboto';
}

/* --- Now Serving Panel (Prominent) --- */
.now-serving-panel {
    flex: 1; /* Takes up two-thirds of the main space */
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 50px;
    background-color: #f0fff0;
}

/* Now Serving Patient Items */
.serving-patient-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border-bottom: 1px solid var(--border-color);
    padding: 20px;
}

.patient-number {
    font-size: 2em;
    font-weight: 700;
    color: var(--color-accent);
    min-width: fit-content;
    line-height: 1.2;
    margin-right: 10px;
}

.patient-info {
    flex: 1;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9em;
}

.rating-info {
    flex: 1;
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
}

.patient-name {
    font-weight: 600;
    color: var(--color-text-light);
    font-family: 'Cairo', 'Roboto';
    text-align: left;
    color:#495057;
    font-size: 1.2em;
}

.patient-status {
    font-size: 1em;
    font-family: 'Cairo', 'Roboto';
    color: #0056b3;
}

.display-status-refraction,
.display-status-examined {
    color: #008000;
}

.serving-container {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.serving-container::-webkit-scrollbar {
    display: none;
}

.patient-doctor {
    font-size: 1em;
    font-weight: 400;
    color: var(--text-grayedout);
    font-family: 'Cairo', 'Roboto';
    text-align: right;
}
/* --- Queue List Panel --- */
.queue-list-panel {
    flex: 1; /* Takes up one-third of the main space */
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    padding: 50px;
}

.queue-list {
    flex-grow: 1;
    overflow-y: auto; /* Scrollable if queue is very long */
    padding-right: 15px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.queue-list::-webkit-scrollbar {
    display: none;
}

.queue-item:last-child {
    border-bottom: none;
}

.queue-item-number {
    font-weight: bold;
    color: var(--color-primary);
    background-color: #f0fff0;
    padding: 5px 15px;
    border-radius: 8px;
    min-width: 50px;
    text-align: center;
    margin-right: 15px;
    font-size: 1.3em;
}

/* Update the layout for the two-line queue item */
.queue-item {
    display: flex;
    justify-content: flex-start; /* Align left */
    align-items: center;
    border-bottom: 1px solid #eee;
    font-size: 2em;
    font-weight: 500;
    color: var(--color-text-dark);
    transition: all 0.5s ease-in-out;
    padding: 10px 0; 
}

.queue-item-name-group {
    display: flex;
    flex-direction: column; /* Stacks name and doctor */
    line-height: 1.4;
}

.queue-item-name {
    font-weight: 600;
    font-size: 1em;
    color: var(--color-primary);
    font-family: 'Cairo', 'Roboto';
}

.queue-item-doctor {
    font-weight: 300;
    font-size: 0.6em; /* Smaller font for doctor name */
    color: #666;
}

/* New styles for split serving sections */
.serving-subsection {
    margin-bottom: 40px;
}


.serving-subsection:last-child {
    margin-bottom: 0;
}

.subsection-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    text-align: center;
    font-family: 'Cairo', 'Roboto', sans-serif;
}

/* Adjust existing serving container styles if needed */
.serving-container {
    min-height: 80px; /* Adjust height as needed */
    max-height: 170px; /* Adjust height as needed */
}


/* --- Smooth Transitions (Animations) --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.queue-item.new {
    animation: slideInUp 0.5s ease-out; /* Applies smooth slide/fade effect */
}

/* No Data Message Styles */
.no-data-message,
.no-appointments-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666;
    margin-top: 20px;
}

.no-data-message i,
.no-appointments-message i {
    font-size: 2em;
    margin-bottom: 10px;
    color: #999;
}

.no-data-message span,
.no-appointments-message span {
    font-size: 1em;
}

/* Ensure proper spacing in containers */
#serving-ticket .no-data-message,
#queue-list .no-data-message {
    min-height: 150px;
}

.screen-button {
    background-color: transparent;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: white;
    padding: none;
    font-size: 1.2em;
}

/* TTS Notification Styles */
.tts-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 20px;
    font-weight: 600;
    text-align: center;
    z-index: 10000;
    border: 3px solid #8B5CF6;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-family: 'Segoe UI', system-ui, sans-serif;
    min-width: 400px;
    max-width: 500px;
    backdrop-filter: blur(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tts-notification.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.tts-notification.error {
    background: linear-gradient(135deg, #FF4757 0%, #FF3742 100%);
    border-color: #FFA502;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notification-text {
    flex: 1;
    text-align: center;
}

.notification-text .patient-name {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 20px 50px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    color: white;
}

.instruction {
    font-size: 1.5em;
    opacity: 0.95;
    line-height: 1.4;
    font-family: 'Cairo', 'Roboto';
    padding: 15px;
}

/* Pulse animation for calling state */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 0 10px rgba(139, 92, 246, 0);
    }
}

.tts-notification.calling {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Dashboard Call Button Styles */
.dashboard-call-buttons {
    display: flex;
    gap: 4px;
}

.dashboard-call-buttons .call-btn {
    height: 20px;
    width: 20px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.dashboard-call-buttons .arabic-call {
    background: transparent;
    color: var(--text-grayedout);
}

.dashboard-call-buttons .arabic-call:hover {
    color: #218838;
}

.dashboard-call-buttons .english-call {
    background: #007bff;
    color: white;
    display: none;
}

.dashboard-call-buttons .english-call:hover {
    background: #0056b3;
}

/* Ensure patient name row has proper spacing */
.patient-details-container .patient-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}


/* Reception Notifications Styles */
.reception-notification {
    background: white;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease-out;
    max-width: 400px;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.notification-header i {
    color: #4CAF50;
    margin-right: 8px;
}

.notification-header span {
    font-weight: bold;
    color: #333;
    flex-grow: 1;
}

.close-notification {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}

.close-notification:hover {
    color: #333;
}

.notification-body p {
    margin: 5px 0;
    font-size: 14px;
}

.notification-actions {
    margin-top: 10px;
    text-align: right;
}

.mark-completed-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.mark-completed-btn:hover {
    background: #45a049;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==================================================================== */
/*                Fullscreen Activation Overlay Styling                 */
/* ==================================================================== */

.activation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Ensure it covers everything */
    text-align: center;
    font-family: 'Arial', sans-serif;
}

.activation-title {
    margin-bottom: 20px;
    font-size: 3em;
    font-weight: bold;
}

.activation-message {
    margin-bottom: 40px;
    font-size: 1.5em;
}

.activate-button {
    padding: 20px 40px;
    font-size: 1.8em;
    cursor: pointer;
    background-color: #28a745; /* Success Green */
    color: white;
    border: none;
    border-radius: 12px;
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.activate-button:hover {
    background-color: #218838; /* Darker Green on hover */
}

.activate-button:active {
    transform: translateY(1px);
}

.activation-note {
    margin-top: 30px;
    color: #999;
    font-size: 0.9em;
}

/* =================================================== */
/* ---          Dictation Buttons Styles           --- */
/* =================================================== */

/* Dictation Button Styles */
.dictation-button {
    background: #4CAF50;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.dictation-button:hover {
    background: #45a049;
    transform: scale(1.1);
}

.dictation-button.listening {
    background: #f44336;
    animation: pulse 2s infinite;
}

/* Dictation Indicator */
.dictation-indicator {
    position: absolute;
    top: -10px;
    right: 0;
    background-color: var(--text-grayedout);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    font-weight: normal;
}

.textarea-container .dictation-indicator {
    top: -35px;
}

.dictation-listening {
    background: var(--text-grayedout);
}

.dictation-error {
    background: var(--error-color);
}

.dictation-pulse {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.7; }
    100% { transform: scale(0.95); opacity: 1; }
}

.textarea-with-dictation {
    position: relative;
}


/* =================================================== */
/* ---           Booking Request Styles            --- */
/* =================================================== */

/* Booking Requests Specific Styles */
.booking-search-container {
    position: relative;
    width: 100%;
}

.filter-container {
    min-width: 200px;
}

.filter-select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
}

.date-filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color-secondary);
}

.date-input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    height: 35px;
}

.icon-button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}

.icon-button:hover {
    color: #333;
}

/* Stats Cards */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon i {
    color: white;
}

.stat-icon.pending { background: #ff9800; }
.stat-icon.today { background: #2196f3; }
.stat-icon.confirmed { background: #4caf50; }
.stat-icon.total { background: #9c27b0; }

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.stat-label {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* Service type cell styling */
.service-type-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-type {
    font-weight: 500;
    color: #333;
}

.assigned-to {
    font-size: 14px;
    color: #28a745;
    display: flex;
    align-items: center;
    gap: 4px;
}

.assigned-to.unassigned {
    color: #6c757d;
}

.assigned-to i {
    font-size: 0.9em;
}

.patient-name-cell .patient-phone {
    font-size: 0.85em;
}

.patient-name-cell .patient-name {
    font-size: 1em;
}

.booking-request-details {
    flex: 1;
    line-height: 1.4;
}

.booking-request-item {
    display: flex;
    align-items: space-between;
    justify-content: center;
    gap: 10px;
    cursor: auto;
}

.booking-request-patient {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.booking-request-service {
    font-size: 0.9em;
    color: var(--error-color-hover);
    margin-left: 15px;
}

.booking-request-phone,
.booking-request-patient-name {
    font-size: 0.9em;
}

.text-small,
.booking-request-date,
.booking-request-doctor {
    font-size: 0.85em;
}

.booking-request-date,
.booking-request-doctor {
    margin-left: 15px;
}

/* Booking Requests Container */
.bookingRequests-container {
    position: relative;
    display: inline-block;
}

/* Booking Requests Toggle Button */
.bookingRequests-toggle {
    background: none;
    border: 0;
    font-size: 1.5em;
    cursor: pointer;
    position: relative;
    padding: 5px;
    color: white;
    font-size: 20px;
    border: 0;
    cursor: pointer;
}

/* Hide badge if count is 0 */
.bookingRequests-badge.hidden {
    display: none !important;
}

/* Booking Requests Dropdown */
.bookingRequests-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    width: 420px;
    max-height: 400px;
    overflow-y: auto;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
    border-radius: 8px;
    right: 0;
    left: auto;
    top: 100%;
    list-style: none;
    margin-top: 1px;
}

.bookingRequests-dropdown.show {
    display: block;
}

/* Booking Requests List Items */
.bookingRequests-list li {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background-color: white;
    color: var(--text-color-primary);
    transition: all 0.3s ease-in-out;
    border-radius: 0 25px 25px 0;
    border-left: 1px solid transparent;
}

.bookingRequests-list li:hover {
    background-color: var(--tab-color-hover);
    border-left: 3px solid var(--text-color-primary);
}

/* Booking Request Details Container */
.bookingRequest-details {
    flex-grow: 1;
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    width: 100%;
}

/* Booking Request Header - Patient Info */
.bookingRequest-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.bookingRequest-patient-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bookingRequest-patient-name {
    font-size: 1em;
    font-weight: bold;
    color: var(--text-color-primary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Urgency indicator dot */
.urgency-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.urgency-dot.high {
    background-color: #dc3545;
}

.urgency-dot.medium {
    background-color: #ffc107;
}

.urgency-dot.normal {
    background-color: #28a745;
}

.bookingRequest-patient-phone {
    font-size: 0.85em;
    color: var(--text-grayedout);
    display: flex;
    align-items: center;
    gap: 4px;
}

.bookingRequest-urgency-indicator {
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.bookingRequest-urgency-indicator.high {
    background-color: #dc3545;
    color: white;
}

.bookingRequest-urgency-indicator.medium {
    background-color: #ffc107;
    color: #212529;
}

.bookingRequest-urgency-indicator.normal {
    background-color: #e9ecef;
    color: #6c757d;
}

/* Booking Request Content */
.bookingRequest-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bookingRequest-service {
    font-size: 0.9em;
    color: var(--text-color-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bookingRequest-service i {
    color: var(--success-color);
    font-size: 14px;
}

.bookingRequest-date-time {
    font-size: 0.85em;
    color: var(--text-grayedout);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bookingRequest-date-time i {
    color: #666;
    font-size: 13px;
}

/* Overdue indicator */
.bookingRequest-overdue {
    font-size: 0.8em;
    color: #dc3545;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Assigned To Info */
.bookingRequest-assigned {
    font-size: 0.8em;
    color: #6c757d;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.bookingRequest-assigned i {
    font-size: 12px;
}

/* Booking Request Actions */
.bookingRequest-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.quick-booking-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.quick-view-btn,
.quick-convert-btn {
    color: var(--success-color);
    background-color: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
}

.quick-view-btn:hover,
.quick-convert-btn:hover {
    color: white;
    border: 0;
    color: var(--success-color-hover);
}

/* Message when no booking requests are found */
.no-bookingRequests-message {
    padding: 15px;
    text-align: center;
    color: var(--text-grayedout);
    font-style: italic;
    font-size: 0.8em;
}

/* Staggered animation for list items */
.bookingRequests-list li:nth-child(1) { animation-delay: 0.05s; }
.bookingRequests-list li:nth-child(2) { animation-delay: 0.1s; }
.bookingRequests-list li:nth-child(3) { animation-delay: 0.15s; }
.bookingRequests-list li:nth-child(4) { animation-delay: 0.2s; }
.bookingRequests-list li:nth-child(5) { animation-delay: 0.25s; }


.bookingRequests-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text-grayedout);
}

.bookingRequests-loading .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #28a745;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bookingRequests-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    color: var(--text-grayedout);
}

.bookingRequests-empty-state i {
    font-size: 2.5em;
    color: #e9ecef;
    margin-bottom: 15px;
}

.bookingRequests-empty-state h4 {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #6c757d;
}

.bookingRequests-empty-state p {
    font-size: 0.9em;
    line-height: 1.4;
}

.doctor-info,
.branch-info,
.detail-value {
    font-size: 0.9em;
    color: var(--text-color-secondary);
}

.detail-label {
    font-weight: bold;
    font-size: 1em;
}

.conflict-message,
.conflict-info {
    text-align: center;
}

.conflict-info {
    margin-bottom: 15px;
}

.summary-row .summary-label {
    margin: 0;
}

.summary-row {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 1.2;
}

.summary-value {
    margin-left: 10px;
}

/* =================================================== */
/* ---      Loading Animation Overlay Styles       --- */
/* =================================================== */
.loading-overlay {
    position: fixed; /* Fixed to the viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center; /* Center spinner horizontally */
    align-items: center; /* Center spinner vertically */
    z-index: 9999; /* Ensure it's on top of all other content */
    
    /* Font and direction properties */
    font-family: 'Roboto', sans-serif;
    direction: ltr;
    
    /* Initially hidden */
    opacity: 0;
    visibility: hidden;
    /* Smooth fade in/out transition */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Class to make the overlay visible when active */
.loading-overlay.active {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make visible */
}

/* Class to force the overlay visible immediately upon page load/parsing */
.loading-overlay.loading-overlay-initial {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make visible */
    transition: none; 
}

/* =================================================== */
/* ---   New Bouncing Dots Animation Styles        --- */
/* =================================================== */
.loader-dots {
    display: flex; /* Arrange dots in a row */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between dots */
    
    /* Ensure LTR direction for dots arrangement */
    direction: ltr;
}

.dot {
    width: 12px;  /* Size of each dot */
    height: 12px;
    background-color: #1f324b; /* Color of the dots (matches your theme) */
    border-radius: 50%; /* Make them perfectly round */
    animation: bounce 1.4s infinite ease-in-out both; /* Apply the bouncing animation */
}

/* Apply animation delays to each dot for a staggered effect */
.loader-dots .dot:nth-child(1) {
    animation-delay: -0.32s; /* Starts earlier in the animation cycle */
}

.loader-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.loader-dots .dot:nth-child(3) {
    animation-delay: 0s; /* Starts at the beginning of the animation cycle */
}

/* Keyframes for the bouncing animation */
@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0); /* Start and end small */
        opacity: 0;
    }
    40% {
        transform: scale(1); /* Grow to full size in the middle */
        opacity: 1;
    }
}

.loading-text {
    color: #1f324b;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
    
    /* Ensure LTR direction and Roboto font */
    font-family: 'Roboto', sans-serif;
    direction: ltr;
    text-align: center;
}

/* Force LTR direction for all loading overlay children */
.loading-overlay * {
    direction: ltr !important;
    font-family: 'Roboto', sans-serif !important;
}

/* Specific protection for text elements */
.loading-overlay .loading-text,
.loading-overlay .loader-dots,
.loading-overlay .dot {
    direction: ltr !important;
    font-family: 'Roboto', sans-serif !important;
}

/* ================================================== */
/* =============== Arabic Translation =============== */
/* ================================================== */


/* RTL support for Arabic */
html[dir="rtl"] body,
.info-section-grid,
.main-header {
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html[dir="rtl"] button {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 0;
    padding-bottom: 0;
}

html[dir="rtl"] .button {
    padding-top: 8px;
    padding-bottom: 8px;
}


html[dir="rtl"] .branch-icon {
    margin-left: 20px;
    margin-right: 0;
}

html[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
}

html[dir="rtl"] .main-view {
    margin-right: 250px;
    margin-left: 0;
}

html[dir="rtl"] .input-group label {
    text-align: right;
}

html[dir="rtl"] .dashboard_card_container {
    justify-content: flex-end;
    text-align: right;
}

html[dir="rtl"] .dashboard_card_comment {
    text-align: right;
    line-height: 1.2;
}

html[dir="rtl"] .dashboard_table_container h2 {
    text-align: right;
}

html[dir="rtl"] .dashboard-table-title {
    text-align: right;
}

html[dir="rtl"] .search-icon {
    margin-left: 0;
    margin: 0 20px;
}

html[dir="rtl"] .search-input,
html[dir="rtl"] .search-input-appointments,
html[dir="rtl"] .search-input-patient {
    padding-right: 20px;
    padding-left: 10px;
    text-align: right !important;
    height: 20px;
}

html[dir="rtl"] .radio-group {
    flex-direction: row-reverse;
}

html[dir="rtl"] .calendar-radio-group {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal-buttons {
    flex-direction: row-reverse;
}

html[dir="rtl"] .table-responsive th,
html[dir="rtl"] .table-responsive td,
html[dir="rtl"] .table-responsive-appointments th,
html[dir="rtl"] .table-responsive-appointments td,
html[dir="rtl"] .table-responsive-patients th,
html[dir="rtl"] .table-responsive-patients td,
html[dir="rtl"] .table-responsive-requests th,
html[dir="rtl"] .table-responsive-requests td,
html[dir="rtl"] .table-responsive-dashboard th,
html[dir="rtl"] .table-responsive-dashboard td,
html[dir="rtl"] .table-responsive-events th,
html[dir="rtl"] .table-responsive-events td {
    text-align: right;
}

html[dir="rtl"] .dashboard-icons-container {
    align-self: left; 
    justify-content: left;
}

html[dir="rtl"] .notifications-dropdown,
html[dir="rtl"] .bookingRequests-dropdown {
    right: auto;
    left: 0;
    top: 100%;
}

html[dir="rtl"] .notification-header-name { /* NEW CSS CLASS for the dot + name wrapper */
    margin-right: 0;
    margin-left: 10px;
}

/* Dropdown Menu (the list of actions) */
html[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
}

html[dir="rtl"] .dropdown-item i {
    margin-right: 0; /* Space between icon and text */
    margin-left: 8px;

}

html[dir="rtl"] .appointment-details-row.private-row {
    font-size: 0.85rem !important; /* Smaller font size */
}

/* Flag icons */
.flag-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

/* English flag (UK/England) */
.flag-icon-gb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%2300247d'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23cf142b' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23cf142b' stroke-width='6'/%3E%3C/svg%3E");
}

.flag-icon-eg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'%3E%3Cdefs%3E%3C/defs%3E%3Crect id='red_stripe' width='20' height='5' fill='%23CE1126'/%3E%3Crect id='white_stripe' y='5' width='20' height='5' fill='%23FFF'/%3E%3Crect id='black_stripe' y='10' width='20' height='5' fill='%23000'/%3E%3Cpath id='eagle' d='M10,7.5 C10,7.5 9.5,7 9.5,7 C9.5,7 10,6.5 10,6.5 C10,6.5 10.5,7 10.5,7 C10.5,7 10,7.5 10,7.5 Z' fill='%23C09300'/%3E%3C/svg%3E");
}

/* RTL adjustments for flags */
html[dir="rtl"] .flag-icon {
    margin-right: 0;
    margin-left: 8px;
}

/* Language switcher styles */
.language-switcher {
    position: relative;
    display: inline-block;
}

.language-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    transition: all 0.3s ease;
    font-family: 'Cairo', 'Roboto';
    height: 30px;
}

.language-toggle:hover {
    background-color: #f5f5f5;
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
    min-width: 85px;
}

html[dir="rtl"] .language-dropdown {
    right: auto;
    left: 0;
}

.language-dropdown.show {
    display: block;
}

.language-option {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}

.language-option:hover {
    background-color: #f0f0f0;
}

.language-flag {
    width: 20px;
    height: 15px;
    margin-right: 5px;
}

/* RTL specific adjustments */
html[dir="rtl"] .fa-chevron-right::before {
    content: "\f053"; /* fa-chevron-left */
}

html[dir="rtl"] .fa-chevron-left::before {
    content: "\f054"; /* fa-chevron-right */
}

/* If you need specific RTL adjustments for the layout but want to keep inputs LTR */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="color"],
html[dir="rtl"] .duration-input-group input[type="number"],
html[dir="rtl"] .modal-content .input[type="datetime"],
html[dir="rtl"] select {
    direction: rtl;
    text-align: right;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* For number inputs specifically, you might want to ensure the spinner stays on the right */
html[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: left;
}

/* If you want to maintain RTL for placeholder text but LTR for actual input */
.input-group input::placeholder {
    direction: inherit; /* This will follow the parent's direction */
    text-align: inherit;
}

/* For RTL layout, you might want placeholders to be RTL while input values remain LTR */
html[dir="rtl"] .input-group input::placeholder {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .radio-group {
    justify-content: flex-end;
    align-items: flex-end;
}

html[dir="rtl"] .events-count {
    font-family: 'Roboto';
}

html[dir="rtl"] .tab-button {
    padding-top: 3px;
    padding-bottom: 3px;
}

html[dir="rtl"] h3 {
    text-align: right !important;
}

html[dir="rtl"] .btn-surgery-action {
    font-size: 1.05em
}

html[dir="rtl"] .branch-button {
    padding: 5px 20px !important;
}

html[dir="rtl"] .btn-pay-service {
    padding: 4px 10px;
}

html[dir="rtl"] .refund-title {
    text-align: right;
}

html[dir="rtl"] .modal-content-small .modal-label-group,
html[dir="rtl"] .modals.logout.title {
    align-items: right;
    text-align: right !important;
}

html[dir="rtl"] .dashboard-appointments-table td,
html[dir="rtl"] .dashboard-appointments-table th {
    font-size: 16px; /* Adjusted body font size for table cells */
}

html[dir="rtl"] .new-drug-btn,
html[dir="rtl"] .new-patient-btn,
html[dir="rtl"] .new-service-btn,
html[dir="rtl"] .new-appointment-btn,
html[dir="rtl"] .new-diagnosis-btn,
html[dir="rtl"] .new-event-btn,
html[dir="rtl"] .new-list-btn,
html[dir="rtl"] .new-file-btn,
html[dir="rtl"] .print-list-btn,
html[dir="rtl"] .new-expense-btn {
    padding: 4px 15px;
}

html[dir="rtl"] #sendMessageBtn {
    padding: 4px 15px;
}

html[dir="rtl"] .calendar-date-display,
html[dir="rtl"] #calendarCurrentDateDisplay {
    text-align: center !important;
}

html[dir="rtl"] #patientfullName,
html[dir="rtl"] #patientSelect,
html[dir="rtl"] #walkInPatientSelect,
html[dir="rtl"] #patientNameForUploadModal,
html[fir="rtl"] #newLabelName,
html[fir="rtl"] #patientSelectSchedule {
    direction: rtl !important;
    text-align: right !important;
}

@media (max-width: 820px) {
    html[dir="rtl"] .sidebar {
        right: -250px; /* Hide off-screen to the right */
        left: auto;    /* Ensure left is not interfering */
        transition: right 0.3s ease-in-out; /* Add a transition for a smooth slide */

    }

    html[dir="rtl"] .sidebar.active {
        right: 0; /* Slide the sidebar into the screen from the right */
        left: auto;
    }

    html[dir="rtl"] .main-view {
        margin-right: 0;
        margin-left: 0;
    }
}

/* ================================================== */
/* ============== Ratings Page Styles ============== */
/* ================================================== */
.ratings-filter-container {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding: 15px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.filter-group label {
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--input-bg);
    color: var(--text-color);
    min-width: 150px;
}

.ratings-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: auto;
}

.rating-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-left: 4px solid var(--text-color-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 500px;
    flex: 1;
}

.rating-card.pending {
    border-left-color: #ffa500;
}

.rating-card.public {
    border-left-color: #28a745;
}

.rating-card.hidden {
    border-left-color: #6c757d;
    display: block !important;
}

.rating-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.patient-id {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.rating-status {
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 15px;
}

.status-pending {
    background: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow/brown for contrast */
    border: 1px solid #ffeaa7;
}

.status-confirmed {
    background: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    border: 1px solid #c3e6cb;
}

.status-rescheduled {
    background: #d1ecf1; /* Light blue */
    color: #0c5460; /* Dark blue */
    border: 1px solid #bee5eb;
}

.status-declined {
    background: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
    border: 1px solid #f5c6cb;
}

.status-public {
    background: #d1edff;
    color: #004085;
}

.status-hidden {
    background: #e2e3e5;
    color: #383d41;
}

.star {
    color: #ddd;
    font-size: 22px;
}

.star.filled {
    color: #ffc107;
}

.rating-comment {
    padding: 5px;
    margin-top: 10px;
}

.comment-text {
    color: var(--text-color-secondary);
    line-height: 1.3;
    margin: 0;
    text-align: center;
}

.rating-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.rating-date {
    font-size: 12px;
    color: var(--text-muted);
}

.rating-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-btn:hover {
    transform: translateY(-1px);
}

.make-public-btn {
    background: #28a745;
    color: white;
}

.make-public-btn:hover {
    background: #218838;
}

.hide-btn {
    background: #6c757d;
    color: white;
}

.hide-btn:hover {
    background: #5a6268;
}

.delete-btn {
    background: #dc3545;
    color: white;
}

.delete-btn:hover {
    background: #c82333;
}

/* Loading and Empty States */
#ratingsLoading {
    text-align: center;
    padding: 40px;
}

#noRatingsMessage {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

#noRatingsMessage i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.mt-1 {
    margin-top: 10px;
}


/* ================================================== */
/* =============== Responsive Styles ================ */
/* ================================================== */


/* Media Query for  tablets */
@media (max-width: 820px) {
    .navbar .logo,
    .navbar .logo span {
        display: none; /* Even smaller font size for small screens */
    }

    .navbar {
        padding: 36px;
    }

    .sidebar {
        width: 250px;
        background-color: rgba(245, 245, 255, 0.5);
        padding: 15px;
        margin-left: 0;
        top: 70px;
        position: fixed;
        border-right: 2px solid var(--border-color);
        z-index: 998;
        box-sizing: border-box;
        transition: width 0.3s ease;
        height: 100vh;
        left: -250px; /* Hide the sidebar off-screen to the left */
        transition: left 0.3s ease-in-out; /* Add a transition for a smooth slide */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(10px);
    }
    

    /* Sidebar visible on small screens when the 'active' class is present */
    .sidebar.active {
        left: 0; /* Slide the sidebar into the screen */
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    }
   

    .main-view {
        margin-left: 0;
    }

    /* Shrink the button */
    .branch-button {
        width: 50px;
        height: 40px;
        padding: 0;
        background-color: transparent;
        color: white;
        border: none;
        font-size: 1.2em;
    }

    /* Hide the text */
    .branch-button .button-text {
        display: none;
    }

    /* Show the icon and style it */
    .branch-button .branch-icon {
        display: block; /* Make the icon visible */
        font-size: 1em; /* Make the icon larger */
        margin: 0; /* Remove any default margin */
    }

    /* Show the new button on small screens */
    .menu-toggle-btn {
        display: block; /* Makes the button visible */
    }

    .modal-label-group div:first-child span {
        font-size: 1em; 
        font-weight: bold; 
        color: #333;
    }

    .modal-label-group div:last-child span {
        font-size: 0.7em;
        color: #555; 
    }


    .cancel-button {
        display: none;
    }

    .notifications-dropdown {
        width: calc(100vw - 30px); /* Or any other fixed width */
        max-height: 400px; /* Use max-height to control its size on small screens */
        overflow-y: auto;
        position: absolute; /* Position relative to the parent container */
        right: -145px;
        top: 100%; /* Position it right below its parent element */
        z-index: 1000;
    }

    .bookingRequests-dropdown {
        width: calc(100vw - 30px);
        max-height: 400px;
        overflow-y: auto;
        right: -100px;
        top: 100%;
    }

    .signin-container {
        width: 280px;
        min-width: 250px;
    }

    .dashboard-welcome-container {
        padding-left: 5px;
        margin-bottom: 10px;
    }

    .dashboard-welcome-container h3 {
        font-size: 1.1em;
        margin-bottom: 2px;
    }

    .dashboard_table_container h2 {
        font-size: 1.1em;
        margin-bottom: 5px;
        padding-left: 10px;
    }

    .dashboard-welcome-container p {
        font-size: 0.7em;
    }

    .search-container {
        display: flex;
        flex-direction: row;
        border-radius: 0;
        color: #333;
        background-color: var(--secondary-color);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
        box-sizing: border-box; /* Ensures padding and border are included in the width */
        align-items: center;
        justify-content: center;
        margin-left: -6px;
        width: calc(100vw + 4px);
        transition: all 0.6s ease-in-out;
        position: absolute;
        right: -2px;
        top: 78px;
    }

    .search-container.collapsed {
        width: 35px;
        color: #0a6c96;
        background-color: var(--secondary-color);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
        color: #333;
        border-radius: 0 0 0 8px;
    }

    .search-container.collapsed .dashboard-search-icon {
        color: #0a6c96;
    }

    .dashboard_card_container_doctorDashboard {
        margin-top: 20px;
    }

    .patient-list-container {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        min-width: 350px;
    }

    .dashboard_table_container {
        padding: 0;
    }

    .status-sheet {
        right: 10px;
        bottom: 10px;
        top: auto;
    }

    .status-secondary {
        right: 10px;
        bottom: 35px;
        top: auto;
    }

    .input-group {
        min-width: 220px;
    }

    .horizontal-tab-content,
    .horizontal-tab-content-finance {
        padding: 10px;
    }

    .timeline-container {
        padding: 10px;
    }

    .timeline-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow-x: auto;
    }

    #save-commissions-btn {
        position:absolute;
        bottom: 10px;
    }

    .frozen-info-bar .sector:first-child {
        margin-right: 0;
    }

    .frozen-info-bar #patientGenderIcon {
        font-size: clamp(4em, 4vw, 5em);
        margin-left: -30px;
    }

    .favorite-groups-section {
        margin-top: 10px;
        padding: 7px;
        gap: 10px;
        margin-left: 10px;
        margin-right: 0;
    }

    .medication-safety-container {
        margin-right: 0;
    }

    .safety-analysis-controls {
        margin-right: 0;
    }

    .prescription-output-container {
        margin-top: 10px;
        margin-left: 10px;
        max-width: none;
        white-space: pre-wrap; /* Ensures line breaks from '\n' are honored */
        word-break: break-word; /* Prevents long lines from overflowing */
        color: #1f324b; /* Darker blue text */
        height: auto; 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left; 
        transition: all 0.5s ease-in-out;
        opacity: 0.3;
        overflow-x: auto;
    }

    .medicine-entry {
        padding: 0;
        margin-bottom: 10px;
        padding-bottom: 10px;
        width: auto;
        border-bottom: 1px solid var(--border-color);
    }

    .modal-content {
        max-height: 70%;
        padding: 20px;
        padding-top: 30px;
    }
    
    #revenueByDoctor,
    #revenueByService,
    #revenueByBranch {
        overflow-x: auto;
    }

    .file-modal-content {
        width: 100vw;
        max-height: 650px;
        padding: 10px 15px; /* Padding inside the form content area */

    }
    
    .file-details .input-group {
        width: 20px;
    }

    .individual-file-progress .file-icon {
        display: none;
    }

    h2 {  
        margin: 10px 0 20px 0;
    }

    .chat-wrapper {
        /* 🛑 RESTORED: Flex layout for side-by-side panels */
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%; 
        width: calc(100% - 25px);
    }

    .chat-sidebar {
        width: 100%;
        min-width: 25px;
        max-height: 250px;
    }

    .chat-main-window {
        margin-left: 0;
    }

    #sendMessageBtn {
        width: 40px;
        overflow: hidden;
        padding: 10px 12px;
    }

    #sendMessageBtn .fa-solid, 
    #sendMessageBtn .fas {
        margin-right: 20px;
    }

    .chat-messages {
        min-height: 0; /* Important to prevent collapse */
        height: 400px;
    }

    .operating-hour-entry {
        max-width: none;
        padding-top: 5px;

    }

    .pagination-container {
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .organization-form {
        padding: 10px;
    }

    .organization-container {
        padding: 5px;
    }

    #medicationSafetyContainer {
        margin-left: 10px;
        max-width: 100%;
    }

    .service-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        z-index: 100000;
    }

    .progress-area {
        overflow-x: auto;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 15px;
        padding: 10px 0;
    }

    .screen-button-container {
        display: none;
    }

    .time-date-display{
        display: none;
    }

    .calendar-radio-group label {
        padding: 5px 15px;
        min-width: 160px;
    }

    .calendar-header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .appointments-calendar-container {
        width: calc(100vw - 30px); /* Slightly more padding to account for scrollbars */
        overflow-x: auto;
        padding: 5px;
        margin: 5px;
        box-sizing: border-box; /* Include padding in width calculation */
    }

   
}

@media (max-width: 480px) {
   
    .header-logo-icon {
        display: none;
    }

}