/* wwwroot/css/site.css */

/* --- General Layout --- */
html, body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f0f2f5;
    overflow: hidden; /* Keep this to prevent scrollbars on the html/body */
    padding: 0;
}

.scrollable-form-container {
    max-height: calc(100vh - 200px); /* Example: Adjust this height as needed */
    overflow-y: auto; /* Add scrollbar to this specific container */
    padding-right: 15px; /* Add some padding to prevent content from touching scrollbar */
}

.header {
    background-color: #f8f9fa; /* Light grey background for the top header */
    padding: 5px 5px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between; /* If you have left/right elements in header */
    height: 60px; /* Fixed height for the header */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 1000; /* Ensure it stays on top */
    position: relative; /* For z-index to work against app-container */
}

.app-container {
    display: flex;
    height: calc(100vh - 60px); /* Full viewport height minus header height */
    overflow: hidden; /* Prevents scrollbars on the container itself */
    flex-grow: 1;
}

/* Sidebar Styling */
.sidebar {
    width: 60px; /* Narrow width for icons only by default */
    background-color: #1a2036; /* Dark background from Fresha example */
    color: #fff;
    padding-top: 0px; /* Space from the top */
    flex-shrink: 0; /* Prevents sidebar from shrinking */
    transition: width 0.3s ease; /* Smooth transition for hover/expand */
    overflow-y: auto; /* Enable scroll if content overflows vertically */
    height: 100%; /* Fill available height */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center icons horizontally when collapsed */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

    .sidebar .nav {
        width: 100%; /* Occupy full width of sidebar */
        padding: 0; /* Remove default ul padding */
        margin: 0; /* Remove default ul margin */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content when collapsed */
    }

    .sidebar .nav-item {
        width: 100%; /* Ensure nav items take full width */
        margin-bottom: 5px; /* Spacing between items */
    }

    .sidebar .nav-link {
        display: flex;
        flex-direction: column; /* Stack icon and text vertically initially */
        align-items: center; /* Center icon and text */
        padding: 15px 0; /* Top/bottom padding */
        color: #a0a6b7; /* Default text color */
        font-size: 0.8em; /* Smaller text */
        text-align: center;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        border-radius: 0; /* No rounded corners for fresh look */
        position: relative; /* For the active state dot */
    }

        .sidebar .nav-link i {
            font-size: 1.5em; /* Larger icon size */
            margin-bottom: 5px; /* Space between icon and text */
            color: #a0a6b7; /* Default icon color */
            transition: color 0.2s ease;
        }

        .sidebar .nav-link .nav-text {
            display: block; /* Always show text, adjust for narrow sidebar */
            font-size: 0.7em; /* Even smaller font for text */
            line-height: 1; /* Tight line height */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; /* Add ellipsis for long text */
            transition: opacity 0.2s ease;
        }

    /* Active Nav Item Styling (as seen in Fresha example) */
    .sidebar .nav-item.active .nav-link {
        background-color: #6a40e8; /* Fresha purple background */
        color: #fff; /* White text for active */
        border-radius: 5px; /* Slightly rounded corners for the active item */
        margin: 0 10px; /* Space from sidebar edges */
        width: calc(100% - 20px); /* Adjust width for margin */
        display: flex; /* Keep flex for content alignment */
        flex-direction: column; /* Stack icon and text */
        align-items: center;
        justify-content: center;
    }

        .sidebar .nav-item.active .nav-link i {
            color: #fff; /* White icon for active */
        }

    /* Hover effects for inactive items */
    .sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Light hover background */
        color: #fff; /* White text on hover */
    }

        .sidebar .nav-link:hover i {
            color: #fff; /* White icon on hover */
        }

    /* Optional: Make the sidebar expand on hover */
    .sidebar:hover {
        width: 200px; /* Wider width on hover */
    }

        .sidebar:hover .nav-link {
            flex-direction: row; /* Icon and text side-by-side on hover */
            justify-content: flex-start; /* Align content to the left */
            padding: 15px 10px; /* More padding when expanded */
        }

            .sidebar:hover .nav-link i {
                margin-right: 10px; /* Space between icon and text */
                margin-bottom: 0; /* Remove vertical margin */
            }

            .sidebar:hover .nav-link .nav-text {
                font-size: 1em; /* Larger font size when expanded */
            }

    /* Example for bottom-aligned items (like settings) */
    .sidebar .nav-item.settings-item {
        margin-top: auto; /* Pushes this item to the bottom of the flex container */
        padding-top: 20px; /* Add some space from items above */
    }

/* Main Content Area */
.main-content {
    flex-grow: 1; /* Takes all available horizontal space from app-container */
    padding: 0;
    overflow-y: hidden; /* *** CRITICAL: No scrollbar here *** */
    overflow-x: hidden; /* No horizontal scrollbar here */
    display: flex; /* *** CRITICAL: Make it a flex container *** */
    flex-direction: column;
    overflow: hidden; /* *** Light background for main content area */
}

/* --- .main Container Styling (from _Layout.cshtml) --- */
.main {
    height: 100%; /* Fill parent height */
    padding: 0;
    margin: 0;
}

.fresha-layout {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* --- Top Bar Styling (for calendar view) --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fdfdfd;
    height: 60px;
    flex-shrink: 0;
}

.top-bar-left, .top-bar-center, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-bar .btn {
    font-size: 0.95rem;
    padding: 8px 15px;
    border-radius: 6px;
}

.top-bar .selected-date {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
}

.top-bar .form-select {
    padding: 8px 15px;
    border-radius: 6px;
    border-color: #ddd;
}

.top-bar-right .btn {
    margin-left: 0;
}

.top-bar-right form.d-inline .btn {
    color: white;
}


/* --- DayPilot Specific Styling --- */

/* Global reset for DayPilot elements to start clean */
.calendar_default_main *,
.calendar_default_main ::before,
.calendar_default_main ::after {
    box-sizing: border-box !important;
    border: none !important; /* Start by removing all borders */
}

/* Ensure ALL main DayPilot elements have a white background */
.calendar_default_main,
.calendar_default_cell,
.calendar_default_colheader,
.calendar_default_corner,
.headers-R6kKzj, /* The container for avatars */
.intervalsWrapper-Xd1tsP,
.self-lRcMVA {
    background-color: #fff !important;
}

/* --- TOP HEADER ROW (AVATARS) --- */
/* The main container for the avatar row */
.headers-R6kKzj {
    display: flex;
    flex-shrink: 0;
    height: 100px; /* Reduced height of the entire avatar row */
    background-color: #fff !important;
    border-top: 1px solid #eee !important;
    border-left: 1px solid #eee !important;
    border-bottom: 1px solid #1abc9c !important;
    /* No right border here, the very last avatar will get one */
}

.calendar_default_event_inner {
    box-sizing: border-box !important; /* <--- ENSURE THIS IS PRESENT AND UNCOMMENTED */
    /* You might want to remove the default DayPilot padding here for more control */
    padding: 0; /* Remove default padding here if you want minimal height */
}
/* Individual staff headers (e.g., CINDY, Loan) - Specific class from your HTML */
.fWG1-2._7sQjz2.orj8E2.O_txr2._-gl4h2.Hc2iQ2.llVPd2._0buTX2.QZTvP2.fWG1-2.self-Gwsmxp {
    border: none !important; /* KEY: Absolutely no borders between avatars */
    background-color: #fff !important; /* Ensure white */
    display: flex;
    flex-direction: column; /* Ensure vertical stacking */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically - this will work better now */
    padding: 4px;
    /* Keep width/flex properties as they control distribution */
    min-width: 102.833px;
    max-width: 102.833px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

    /* Add a right border to the very last avatar block to close the header row */
    .fWG1-2._7sQjz2.orj8E2.O_txr2._-gl4h2.Hc2iQ2.llVPd2._0buTX2.QZTvP2.fWG1-2.self-Gwsmxp:last-child {
        border-right: 1px solid #eee !important;
    }


/* --- CALENDAR COLUMN HEADERS (DayPilot's internal column headers, usually below avatars) --- */
/* These are the general DayPilot column headers that span the whole height of the day/column */
.calendar_default_colheader {
    background-color: #fff !important;
    border-bottom: 1px solid #1abc9c !important;
    border-right: 1px solid #eee !important;
    padding: 0;
    position: relative; /* Keep this for absolute positioning of children */
    height: 100px !important; /* Match the height of headers-R6kKzj */
}

    .calendar_default_colheader::after,
    .calendar_default_colheader::before {
        content: none !important;
        display: none !important;
    }
     /*Targeting the Avatar within calendar_default_colheader*/ 
    .calendar_default_colheader > div[unselectable="on"][style*="box-sizing: border-box"] {
     /*Ensure it's big enough to contain the inner avatar and its rings*/ 
    width: 64px !important;  
    height: 64px !important;
    top: 3px !important; 
    left: calc(50% - 32px) !important; 
    border: 2px solid rgba(173, 216, 230, 0.7) !important; 
    border-radius: 50% !important;  
    background-color: transparent !important;  
    }

    /* Targeting the Name within calendar_default_colheader */
    .calendar_default_colheader div[unselectable="on"][style*="height: 30px"] {
        top: 65px !important; /* Position name right below the avatar */
        font-size: 1.1em !important; /* Keep font size consistent with your initial .nav-text */
        height: auto !important; /* Let height adjust to content */
    }

/* --- CALENDAR GRID CELLS (MAIN GRID AREA) --- */
.calendar_default_cell {
    border-top: none !important;
    border-left: none !important;
    border-bottom: 0.5px solid #d5d8dc !important; /* Horizontal line below each cell (time intervals) */
    border-right: 1px solid #1abc9c !important; /* KEY: Vertical line between CALENDAR COLUMNS */
    padding: 0;
    /*min-width: 200px !important;*/
    position: relative;
    background-color: #fff !important;
}

    /* Remove pseudo-elements from cells as we are using direct borders */
    .calendar_default_cell::before,
    .calendar_default_cell::after {
        content: none !important;
        display: none !important;
    }

/* In wwwroot/css/site.css */

/* Style for the hoverable time display within cells */
.cell-hover-time-area {
    /* Initially hidden */
    opacity: 0;
    transition: opacity 0.1s ease-in-out; /* Smooth fade in/out */
    cursor: pointer; /* Indicate it's interactive */
    background-color: rgba(39, 245, 187, 0.38); /* Slightly transparent white background */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    font-size: 1.2em; /* Readable font size */
    color: #333; /* Dark text */
    padding: 2px 5px; /* Padding inside the pop-up */
    white-space: nowrap; /* Prevent time from wrapping */
    pointer-events: none; /* Allows clicks to pass through to the underlying cell for other events (like timeRangeSelected) */
    position: absolute; /* Position it where you want */
    z-index: 100; /* Ensure it's above other elements */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
}

.calendar_default_cell .cell-hover-time-area-container {
    position: absolute; /* Areas are positioned absolutely by DayPilot */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Cover the entire cell */
    z-index: 10; /* Ensure it's above grid lines but below events */
    pointer-events: all; /* Allow mouse events on this container */
    cursor: pointer; /* Indicate it's interactive */
    /* Make this container itself transparent, it's just the trigger */
    background-color: transparent;
}

.calendar_default_cell:hover {
    background-color: rgba(0, 0, 0, 0.02) !important; /* Very light gray overlay */
}

    .calendar_default_cell:hover .cell-hover-time-area-container .cell-time-popup {
        visibility: visible; /* Make visible on hover */
        opacity: 1; /* Fade in */
    }
    /* Make the hover area visible when its parent cell is hovered */
    /* This requires targeting the parent .calendar_default_cell on hover */
    .calendar_default_cell:hover .cell-hover-time-area {
        opacity: 1; /* Make visible on hover */
    }

/* If the element is directly inside calendar_default_event_inner, adjust selector */
/* This is more for a true tooltip that appears over the whole cell. */
/* The image suggests a time label in the left gray area for each cell */
/* Let's refine the approach to match the image more closely */
/* --- TIME HEADERS (LEFT SIDE: 9 AM, 10 AM, etc.) --- */
.calendar_default_timeheader {
    color: #888;
    font-size: 0.85em; /* You might want to increase this for readability */
    text-align: right;
    padding-right: 10px;
    background-color: #f8f8f8 !important; /* Slightly off-white for distinction */
    border: none !important; /* Remove any default borders */
    border-bottom: 1px solid var(--calendar-grid-line-thin-horizontal) !important; /* Faint horizontal line */
    position: relative;
    /* Ensure height matches cellHeight and text is vertically centered */
    height: auto !important; /* This allows it to stretch, but check content */
    display: flex !important; /* Use flexbox to center content */
    align-items: center !important; /* Vertically center content */
    justify-content: flex-end !important; /* Align to the right (end) for text */
    box-sizing: border-box !important; /* Crucial for padding to be included */
    padding-left: 5px !important; /* Add some left padding to prevent text from touching edge */
}
    /* Re-introduce vertical line on the right side of the time header to separate it from the main grid */
    .calendar_default_timeheader::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1px;
        background-color: #CCCCCC; /* Light grey for subtle vertical line */
        display: block !important;
    }
    /* Remove horizontal pseudo-elements from time headers */
    .calendar_default_timeheader::before {
        content: none !important;
        display: none !important;
    }

.calendar_default_timeheader_hour { /* This class is generated for hour markers */
    border-bottom: 1px solid #BBBBBB !important; /* Stronger line for the full hour mark on the left */
    background-color: #f8f8f8 !important;
    font-weight: bold !important; /* Make them bold */
    color: #555 !important; /* Darker color for hours */
}

.calendar_default_timeheader div,
.calendar_default_timeheader span {
    white-space: nowrap; /* Prevent time text from wrapping */
}
/* --- CORNER ELEMENT (TOP-LEFT OF CALENDAR) --- */
.calendar_default_corner {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #fff !important;
    border: none !important; /* Remove all its default borders */
    border-bottom: 1px solid #1abc9c !important; /* Bottom border for the corner */
    border-right: 1px solid #CCCCCC !important; /* Right border for the corner */
}
    /* Ensure no pseudo-element borders from the corner */
    .calendar_default_corner::before,
    .calendar_default_corner::after {
        content: none !important;
        display: none !important;
    }

.hourly-top-border {
    border-top: 1px solid #1abc9c !important; /* Red line at the top of the hour 77ock */
    /* You might want to remove its default faint border-top if it exists due to other rules */
}

/* The red bottom border for each hour */
.hourly-bottom-border {
    border-bottom: 0px solid #1abc9c !important; /* Red line at the bottom of the hour block */
}

.hourly-red-border-cell {
    border-top: 0.5px solid #1abc9c !important; /* Red border at the top of the hour */
}
/* --- Current Time Line Styling --- */
.calendar_default_current_time_line_arrow {
    display: none !important;
}

.calendar-container {
    display: flex; /* Makes it a flex container */
    flex-direction: column; /* Stacks #calendar vertically */
    flex-grow: 1; /* *** CRITICAL: Make it grow to fill the remaining vertical space in fresha-layout (after top-bar) *** */
    overflow-x: auto; /* This is crucial for horizontal scrolling */
    overflow-y: auto;
    background-color: #fff;
}

.hourly-red-border-cell-bottom { /* You'd need to add this class in onBeforeCellRender as well */
    border-bottom: 0.5px solid #1abc9c !important; /* Red border at the bottom of the hour */
}

.calendar_default_current_time_line::before,
.calendar_default_current_time_line::after {
    content: none !important;
    display: none !important;
}

.calendar_default_current_time_line {
    border-top: 1px solid red !important;
    background-color: transparent !important;
    height: 1px !important;
    padding: 0 !important;
    /*width: 100% !important;*/
}

.currentTime-n0H6wj {
    position: absolute;
    background-color: #6a40e8;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    z-index: 100;
    transform: translate(-50%, -50%);
    left: 50%;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* MAIN CALENDAR CONTAINER (DayPilot's primary wrapper) */
#calendar {
    width: 100% !important;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    flex-grow: 1;
    background-color: #fff !important;
}

.hourly-line-cell {
    border-top: 1px solid #c0392b !important; /* Stronger horizontal line at the start of the hour */
    /* You might need to adjust or remove border-bottom on these cells if it causes double lines */
}

.calendar_default_main {
    border: none !important; /* Remove outer border */
    padding: 0 !important;
    overflow-y: auto; /* Enable vertical scroll for the scheduler content */
    overflow-x: auto; /* Hide horizontal scroll if not needed */
    height: 100%;
    width: 100% !important;
    background-color: #fff !important;
    overflow: auto;
}


p[data-qa^="timeline-"] {
    font-weight: 600;
    font-size: 0.95em;
    color: #333;
    text-align: center;
    line-height: 1.2;
    margin-top: 5px; /* Remove or reduce this margin if it's adding space */
    /* ... other existing styles ... */
}

/* Staff initial circle/avatar placeholder */
.WiWftm.pFkGym.vETMmm.ndgl8m.hHFepm {
    width: 70px;
    Match the desired avatar size height: 70px;
    border-radius: 50%;
    background-color: #6a40e8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    flex-shrink: 0;
    margin-bottom: 5px;
    Add small space below the avatar
}

/* Fresha-like event tile styling */
.tile-A2U39r {
    background-color: #DAE8FC;
    border-radius: 4px;
    padding: 5px 8px;
    margin: 1px;
    box-sizing: border-box;
    font-size: 0.85em;
    color: #333;
    line-height: 1.2;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    border: none;
    position: absolute;
    z-index: 10;
    padding: 0px 8px !important; /* Reduce vertical padding to absolute minimum */
    font-size: 0.7em !important; /* Make font smaller to reduce natural height */
    line-height: 1 !important; /* Tight line height */
}

/* Specific color for 'no_show' appointments if they are colored differently */
.no_show-rc7ua3 {
    background-color: #FFDADA !important;
    border: 1px dashed #FF6B6B !important;
    color: #993333 !important;
}

    .no_show-rc7ua3 strong, .no_show-rc7ua3 .self-VJNwl9 {
        color: #993333 !important;
    }

/* Highlighted working slots (light gray background from image) */
.highlight-gTqxpq {
    background-color: #fff !important; /* Change to white */
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

/* Ensure the main scrolling div for the intervals has its own scrollbar */
.intervalsWrapper-Xd1tsP {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    height: 100%;
    background-color: #fff !important;
}

/* The inner div that actually contains the time markings */
.self-lRcMVA {
    position: relative;
    padding-top: 0 !important;
    height: auto !important;
    min-height: 100%;
    background-color: #fff !important;
}

/* The vertical "trust me I'm a border" line between time and calendar grid */
.trustMeImABorder-MAZpUS {
    background-color: #eee; /* Light grey separator */
    width: 1px;
    flex-shrink: 0;
    height: 100%;
    margin: 0;
}

/* Arrows for navigating timelines */
.arrow-LRPTFl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 100;
}

.left-yf7MqE {
    left: 10px;
}

.right-xFDgIa {
    right: 10px;
}

.arrow-LRPTFl svg {
    width: 20px;
    height: 20px;
    color: #6a40e8;
}

/* Hidden elements you might have */
.hidden {
    display: none !important;
}

.modal-body.d-flex {
    min-height: 400px; /* Give some minimum height for the two panels */
}

.modal-left-panel {
    /* Styles for the left side of the modal (employee, time, customer details) */
    background-color: #f8f9fa; /* Light background for distinction */
    border-right: 1px solid #e9ecef;
    overflow-y: auto; /* Enable scrolling if content overflows */
}

.modal-right-panel {
    /* Styles for the right side of the modal (service selection) */
    background-color: #fff;
    overflow-y: auto; /* Enable scrolling for service list */
}

.service-list-container {
    height: calc(100% - 70px); /* Adjust height to fit search bar and header */
    overflow-y: auto;
    padding-right: 5px; /* Add some padding for scrollbar */
}

/* Service Category Title - Keep as is */
.service-category-title {
    font-weight: 600;
    font-size: 0.9em;
    color: #6c757d;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* Service Item Styling - Keep as is */
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 5px;
    background-color: #f8f8f8;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
}

    .service-item:hover {
        background-color: #e9ecef;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .service-item.selected {
        background-color: #e0f7fa;
        border-color: #00bcd4;
        font-weight: 500;
    }

.service-item-left {
    flex-grow: 1;
}

.service-item-name {
    font-weight: 500;
    color: #333;
    font-size: 0.95em;
}

.service-item-details {
    font-size: 0.85em;
    color: #6c757d;
}

.service-item-price {
    font-weight: 600;
    color: #28a745;
    font-size: 1em;
    flex-shrink: 0;
    margin-left: 10px;
}

.modal-body.d-flex {
    min-height: 400px;
}

.modal-left-panel {
    background-color: #f8f9fa;
    border-right: 1px solid #e9ecef;
    overflow-y: auto;
}

.modal-right-panel {
    background-color: #fff;
    overflow-y: auto;
}

/* Service List Container - Keep this as is */
.service-list-container {
    height: calc(100% - 70px);
    overflow-y: auto;
    padding-right: 5px;
}

/* --- NEW: Customer List Container --- */
.customer-list-container {
    height: calc(100% - 150px); /* Adjust height to fit phone search and top section */
    overflow-y: auto;
    padding-right: 5px;
}

/* --- Customer List Item Styling (Similar to service-item) --- */
.customer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 5px;
    background-color: #f8f8f8;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
}

    .customer-item:hover {
        background-color: #e9ecef;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .customer-item.selected {
        background-color: #e0f7fa; /* Light blue background for selected item */
        border-color: #00bcd4; /* Brighter border */
        font-weight: 500;
    }

.customer-item-name {
    font-weight: 500;
    color: #333;
    font-size: 0.95em;
}

.customer-item-phone {
    font-size: 0.85em;
    color: #6c757d;
}

.employee-list-avatar,
.employee-list-initials {
    width: 40px; /* Standard size for list avatars */
    height: 40px;
    object-fit: cover; /* For images */
    border-radius: 50%; /* Make them circular */
    flex-shrink: 0; /* Prevent them from shrinking in flex containers */
    /* Add styling for initial fallback */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem; /* Adjust font size for initials */
    text-transform: uppercase;
    border: 1px solid #e0e0e0; /* Light border around the circle */
    background-color: #f8f9fa; /* Light background for initials circle */
}

.employee-list-avatar {
    /* Specific styles for img tag if present */
    /* If you set background-color/color inline for initials, it will override this for initials div */
}

.employee-list-initials {
    /* Specific styles for initials div */
    /* Colors will be set inline in the HTML (background-color:@avatarBgColor; color:@avatarLetterColor;) */
}

/* Optional: Adjust table cell padding if avatars make it too tight */
.table th, .table td {
    vertical-align: middle; /* Ensures content is vertically centered in cells */
    /* padding: .75rem; Default, adjust if needed */
}
/* In wwwroot/css/site.css */

/* Custom Avatar Circle for "Add Client" / Selected Client */
.client-avatar-placeholder {
    width: 80px; /* Size of the circle */
    height: 80px;
    border-radius: 50%; /* Make it circular */
    background-color: #e0e6f7; /* Light purple background from image */
    border: 1px solid #6a40e8; /* Thin purple border */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 5px auto; /* Center it horizontally, space below */
    font-size: 2.5rem; /* Size of the icon or initial */
    color: #6a40e8; /* Color of the icon or initial */
    cursor: pointer; /* Indicates it's clickable */
    overflow: hidden; /* Ensures content stays within the circle */
    box-shadow: 0 0 0 2px rgba(106, 64, 232, 0.2); /* Light halo effect */
}

    .client-avatar-placeholder i {
        pointer-events: none; /* Make icon not interfere with click on parent div */
    }

/* Style for actual customer avatar (initials circle) inside the placeholder */
.client-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #6a40e8; /* Solid color for selected avatar */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 2.5rem; /* Adjust font size for initials */
    object-fit: cover; /* For images */
}

/* Styling for the "Add Client" button (which is now a link-style button) */
#addClientButton {
    color: #6a40e8 !important; /* Force purple color */
    font-size: 1.1rem !important; /* Adjust font size */
    font-weight: bold !important;
    text-decoration: none !important; /* Remove underline */
}

    #addClientButton:hover {
        color: #5533bb !important; /* Darker purple on hover */
        text-decoration: underline !important; /* Add underline on hover */
    }

/* Style for the "Selected Customer" readonly input */
#modalSelectedCustomerDisplay {
    text-align: center;
    font-size: 1.1rem; /* Slightly larger font */
    color: #333;
    /* Ensure it has a background if the overall modal has a transparent background */
    background-color: white; /* Explicitly set background */
    border-radius: 0.375rem; /* Match Bootstrap default for form-control */
    border: 1px solid #dee2e6; /* Add a border for definition */
    padding: 0.375rem 0.75rem; /* Add padding */
    height: auto; /* Allow height to adjust */
}

/* Style for service items: Duration on separate line, conditional badge */
.service-item-details {
    font-size: 0.85em; /* Smaller font for duration */
    color: #6c757d;
    display: block; /* Force duration to new line */
}

/* Badge for "Team member doesn't provide this service" */
.service-warning-badge {
    display: inline-block;
    background-color: #fff3cd; /* Light yellow */
    color: #664d03; /* Darker yellow text */
    padding: 0.25em 0.5em;
    border-radius: 0.375rem;
    font-size: 0.75em;
    font-weight: 600;
    margin-top: 0.5em; /* Space from service name/duration */
    vertical-align: middle;
}
/* In wwwroot/css/site.css */

/* Make the modal body scrollable while keeping header/footer fixed */
#newEventModal .modal-body {
    max-height: calc(100vh - 180px); /* Adjust this value as needed */
    /* Explanation:
     * 100vh: 100% of the viewport height.
     * 180px: This is an estimated height for the header and footer combined.
     * You might need to adjust this number based on your actual header/footer heights,
     * padding, and margins to prevent scrollbars from appearing when they aren't needed,
     * or to ensure the footer isn't pushed off-screen.
     * (e.g., header height ~60px, footer height ~60px, plus some padding/margin)
     */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    padding: 0; /* Remove default padding as child panels have their own padding */
}

    /* Ensure the child panels (left/right) stretch vertically */
    #newEventModal .modal-body > div {
        height: 100%; /* Make left and right panels fill the height of the modal-body */
        display: flex; /* Allow content inside to flex if needed */
        flex-direction: column; /* Stack content vertically */
    }

/* Ensure the content within the panels also knows how to scroll if it overflows */
#newEventModal .modal-left-panel,
#newEventModal .modal-right-panel {
    /* You might need to adjust padding/margins on these panels if they also have fixed content */
    /* For example, if you want serviceListContainer to scroll independently: */
    flex-grow: 1; /* Allow them to grow and fill available space */
    overflow-y: auto; /* Allow internal scrolling if content within them overflows */
}

/* If you want specific sub-containers inside the panels to scroll: */
#newEventModal #customerListContainer,
#newEventModal #serviceListContainer {
    flex-grow: 1; /* Allow them to take up available vertical space */
    overflow-y: auto; /* Make these specific lists scrollable */
}

/* Adjust padding on the modal-body itself if needed, as the child panels have padding */
#newEventModal .modal-body.d-flex {
    padding: 0;
}
/* In wwwroot/css/site.css */

/* Style for events that require a specific employee */
.dpc_event_inner.employee-required-event {
    /* Ensure the inner div has relative positioning for absolute child */
    position: relative;
    padding-left: 25px; /* Make space for the star icon */
}

    /* Use a pseudo-element to add the Font Awesome star */
    .dpc_event_inner.employee-required-event::before {
        font-family: "Font Awesome 6 Free"; /* Important: Use the correct Font Awesome font family */
        font-weight: 900; /* Use 900 for solid icons (fas) */
        content: "\f005"; /* Unicode for solid star icon (fas fa-star) */
        color: gold; /* Star color */
        font-size: 1.2em; /* Size of the star */
        position: absolute;
        left: 5px; /* Position from left */
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Adjust for vertical centering */
        z-index: 10; /* Ensure it's on top */
        background-color: rgba(255, 255, 255, 0.7); /* Light background for visibility */
        border-radius: 50%; /* Make it round */
        width: 20px; /* Size of the background circle */
        height: 20px;
        display: flex; /* Use flexbox to center content in the circle */
        align-items: center;
        justify-content: center;
    }

/* Optional: Adjust default event text style if needed */
.dpc_event_inner {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    display: flex !important;
    flex-direction: column !important; /* Forces content into a column */
    justify-content: space-around !important; /* Distributes space vertically */
    align-items: flex-start !important; /* Aligns content to the left */
    white-space: normal !important; /* CRITICAL: ALLOWS content to wrap and newlines */
    overflow: hidden !important; /* Keeps content within bounds */
    text-overflow: ellipsis !important; /* Adds ellipsis if single lines overflow */
    box-sizing: border-box !important;
    padding: 0 !important; /* CRITICAL: Remove any default padding */
    height: 100% !important; /* Ensure it takes full height to justify content */
    background-color: transparent !important; /* Essential to show the event's barColor */
    color: inherit !important; /* Inherit color from the event */
}
/* In wwwroot/css/site.css */

/* Style for the custom star icon area within DayPilot events */
.event-star-icon-area {
    /* Background for the circle */
    background-color: rgba(255, 255, 255, 0.7); /* Light transparent background */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

    .event-star-icon-area .fas.fa-star {
        /* Style the Font Awesome icon inside the area */
        color: gold; /* Gold color for the star */
        font-size: 1.2em; /* Ensure visible size */
        margin: 0; /* Remove any default margins */
        padding: 0;
    }
/* In wwwroot/css/site.css */

.dpc_event_inner.employee-required-event {
    position: relative; /* Needed for absolute positioning of pseudo-element */
    padding-left: 25px; /* Make space for the pseudo-element icon */
    /* Add display:flex and align-items:center here if you want content centered */
    display: flex;
    align-items: center;
}

    .dpc_event_inner.employee-required-event::before {
        font-family: "Font Awesome 6 Free"; /* CRITICAL: Must match Font Awesome font family */
        font-weight: 900; /* CRITICAL: For solid icons (fas) */
        content: "\f005"; /* Unicode for solid star icon */
        color: gold;
        font-size: 1.2em;
        position: absolute; /* Position relative to .dpc_event_inner */
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
/* In wwwroot/css/site.css */

/* Style for the container created by args.e.areas */
.event-star-icon-container {
    background-color: rgba(255, 255, 255, 0.7); /* Light transparent background */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

    /* Style the Font Awesome icon itself within that container */
    .event-star-icon-container .fas.fa-star {
        color: gold; /* Gold color for the star */
        font-size: 1.2em; /* Ensure visible size */
    }

/* Ensure padding on the event itself to make space for the star */
.dpc_event_inner {
    padding-left: 25px; /* Make space for the star icon injected by areas */
    display: flex; /* Use flexbox to align content */
    align-items: center; /* Vertically center content */
    box-sizing: border-box;
}
/* In wwwroot/css/site.css */

/* Style for the container created by args.e.areas for the emoji star */
.event-emoji-star-container {
    background-color: rgba(255, 255, 255, 0.7); /* Light transparent background */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: absolute; /* Areas are already positioned, but good to be explicit */
    /* top: 5px; left: 5px; width: 25px; height: 25px; font-size: 1.2em; */
    /* The above properties are handled by `args.e.areas.style` or direct area properties */
}

/* Ensure padding on the event itself to make space for the emoji star */
/* This prevents the emoji from overlapping the text */
.dpc_event_inner {
    padding-left: 25px; /* Make space for the star icon injected by areas */
    display: flex; /* Use flexbox to align content */
    align-items: center; /* Vertically center content */
    box-sizing: border-box; /* Include padding in element's total width/height */
}
    /* In wwwroot/css/site.css */

    /* Style for events that have an icon in their area (e.g., star) */
    .dpc_event_inner.event-with-icon-padding {
        padding-left: 25px; /* Make space for the icon added by areas */
        /* Ensure flex properties are compatible with areas */
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

/* Style for the container created by args.e.areas for the emoji star */
.event-emoji-star-container {
    background-color: rgba(255, 255, 255, 0.7); /* Light transparent background */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    /* Position is handled by DayPilot areas properties, but ensure it's not overridden */
}

/* In wwwroot/css/site.css */

#latestCustomerNoteDisplay {
    /* Ensure no fixed height or max-height that prevents it from expanding */
    height: auto !important; /* Explicitly set to auto */
    max-height: none !important; /* Remove any max-height constraints */
    /* Ensure padding is reasonable. py-1 / px-2 are Bootstrap classes.
       If they are too much, you can override them here: */
    padding-top: 0.25rem !important; /* Example: Keep small top/bottom padding */
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    /* Control content overflow within the note if it's too long for screen */
    overflow-y: auto; /* Add scrollbar if content exceeds available height (e.g., if modal itself is small) */
    overflow-x: hidden; /* Hide horizontal scroll */
    /* The existing white-space: pre-wrap; font-size: 0.85em; are good */
    white-space: pre-wrap;
    font-size: 0.85em;
    /* Other styles from your HTML/Bootstrap classes */
    /* .alert .alert-info .mb-0 */
    /* Add a subtle background color and border for visual clarity if needed */
    background-color: #e0f7fa; /* Light blue/cyan, similar to your selected service item */
    border: 1px solid #00bcd4; /* Matching border */
    border-radius: 0.375rem; /* Bootstrap's default for alerts */
}

    /* Ensure inner paragraphs don't add too much vertical space */
    #latestCustomerNoteDisplay p {
        margin-bottom: 0 !important; /* Remove default paragraph margins */
        line-height: 1.3; /* Adjust line height for readability, but not too loose */
    }

/* In wwwroot/css/site.css */

/* Define custom properties for easier color management and bigger sizing */
:root {
    --flatpickr-primary-color: #6a40e8; /* Your existing purple for selected states */
    --flatpickr-text-color: #333;
    --flatpickr-border-color: #eee;
    --flatpickr-bg-color: #fff;
    --flatpickr-day-hover-bg: #f0f0f0; /* Light gray on hover for days */
    --flatpickr-day-selected-bg: var(--flatpickr-primary-color);
    --flatpickr-day-selected-text: #fff;
    --flatpickr-header-bg: #fff; /* White header background */
}

/* --- Flatpickr Calendar Customization (Updated) --- */

/* In wwwroot/css/site.css */

/* Define custom properties for easier color management and bigger sizing */
:root {
    --flatpickr-primary-color: #6a40e8;
    --flatpickr-text-color: #333;
    --flatpickr-border-color: #eee;
    --flatpickr-bg-color: #fff;
    --flatpickr-day-hover-bg: #f0f0f0;
    --flatpickr-day-selected-bg: var(--flatpickr-primary-color);
    --flatpickr-day-selected-text: #fff;
    --flatpickr-header-bg: #fff;
    --flatpickr-header-border: 1px solid #eee;
}

.flatpickr-calendar {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: none !important;
    font-family: inherit;
    padding: 0px !important;
    background-color: white !important;
    width: 800px !important;
    max-width: none;
    font-size: 1.2em;
    transform: translateX(-100px) !important;
    margin: 0 !important;
}

.flatpickr-days {
    width: 750px !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    border: none !important;
    background-color: transparent !important;
    min-width: unset !important;
}

.flatpickr-calendar .flatpickr-innerContainer .dayContainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    text-align: center;
}

.flatpickr-innerContainer .flatpickr-rContainer:nth-child(2) {
    margin-left: 50px !important;
}

.flatpickr-innerContainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    gap: 50px !important;
    width: 100%;
}

.flatpickr-weekdaycontainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

.flatpickr-weekday {
    background-color: green;
    border: none !important;
}

.flatpickr-month {
    width: 100%;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 10px;
}

.flatpickr-months {
    background-color: white !important;
    padding: 10px 0 !important;
    border-bottom: var(--flatpickr-header-border) !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    display: flex;
    justify-content: center !important;
    width: 750px !important;
}

    .flatpickr-months .flatpickr-month {
        background-color: white !important;
        font-weight: 600;
        width: 350px !important;
        flex: 0 0 350px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .flatpickr-months .flatpickr-month,
    .flatpickr-weekday {
        background-color: white !important;
        font-weight: 600;
    }

.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekday {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: white !important;
}

.flatpickr-current-month {
    flex-grow: 1;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    flex-shrink: 0;
    padding: 0 5px !important;
    margin: 0 !important;
}

    .flatpickr-prev-month:hover,
    .flatpickr-next-month:hover {
        background-color: rgba(0,0,0,0.05) !important;
        color: var(--flatpickr-primary-color) !important;
        border-radius: 4px;
    }

.flatpickr-weekdays {
    background-color: white !important;
    margin-top: 20px !important;
    border-bottom: none !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 750px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.flatpickr-innerContainer .flatpickr-rContainer .flatpickr-weekdays {
    background-color: white !important;
    margin-top: 20px !important;
    border-bottom: none !important;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    width: 750px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
    flex: none !important;
    padding: 0 !important;
    margin-left: 50px !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
}

.flatpickr-weekday {
    background-color: white !important;
    font-weight: 500;
    color: #888;
    font-size: 1em !important;
    width: auto !important;
    flex: unset !important;
    text-align: center;
    padding: 5px 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
}

.flatpickr-day {
    font-size: 1.1em !important;
    color: var(--flatpickr-text-color);
    text-align: center;
    border: none !important;
    width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 5px !important;
    border-radius: 50%;
}

    .flatpickr-day.selected {
        background-color: var(--flatpickr-day-selected-bg) !important;
        color: var(--flatpickr-day-selected-text) !important;
        border-color: var(--flatpickr-day-selected-bg) !important;
        font-weight: 600;
    }

    .flatpickr-day.today {
        border-color: var(--flatpickr-primary-color) !important;
        color: var(--flatpickr-primary-color) !important;
        background-color: cyan !important;
    }

        .flatpickr-day.today:hover {
            background-color: var(--flatpickr-day-selected-bg) !important;
            color: var(--flatpickr-day-selected-text) !important;
        }

.flatpickr-quick-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
    padding: 20px 15px;
    border-top: 1px solid var(--flatpickr-border-color);
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
}

.flatpickr-quick-button {
    background-color: var(--flatpickr-bg-color);
    color: var(--flatpickr-primary-color);
    border: 1px solid var(--flatpickr-primary-color);
    border-radius: 80px;
    padding: 10px 20px !important;
    margin-left: 5px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    margin-right: 5px !important;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    min-width: 100px;
    flex: 1 1 auto;
}

    .flatpickr-quick-button:hover {
        background-color: var(--flatpickr-primary-color);
        color: var(--flatpickr-day-selected-text);
    }

.flatpickr-input {
    text-align: center !important;
    font-size: 1.5em !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 8px 10px !important;
    height: auto !important;
    line-height: 1.2 !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.flatpickr-calendar input.flatpickr-input, Target input inside flatpickr calendar
.flatpickr-input.form-control, Target flatpickr input with form-control
#date-picker.flatpickr-input Target specific ID with flatpickr class {
    text-align: center !important;
    font-size: 1.5em !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 8px 10px !important;
    height: auto !important;
    line-height: 1.2 !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.flatpickr-innerContainer .flatpickr-rContainer {
    flex: 0 0 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
}

#button-previous,
#button-next {
    font-size: 1em; /* Revert font size to default or smaller */
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); /* Use Bootstrap's default padding */
    min-width: auto;
    min-height: auto;
    display: inline-block;
    align-items: initial;
    justify-content: initial;
}
/* Example: Making surrounding buttons slightly larger for balance */
.top-bar-left .btn {
    font-size: 0.95rem; /* Revert to a typical Bootstrap button font size */
    padding: 8px 15px; /* Revert to a typical Bootstrap button padding */
}
/* In wwwroot/css/site.css */

/* --- Settings Panel for Duration/Height Controls --- */
.settings-panel {
   /* Positioning */
    position: fixed; /* Or absolute, depending on your layout context */
    top: 0;          /* Align to the top of the viewport/parent */
    right: -300px;   /* Start OFF-SCREEN (adjust this value based on your panel width) */
    width: 300px;    /* Define the width of your panel */
    height: 100vh;   /* Make it full height of the viewport */

    /* Appearance */
    background-color: #fff; /* Choose a background color */
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
    padding: 20px;   /* Add some internal spacing */
    overflow-y: auto; /* Enable vertical scrolling if content is long */

    /* Transition for smooth animation */
    transition: right 0.3s ease-out; /* Animates the 'right' property over 0.3 seconds */
    z-index: 1000; /* Ensure it's above most content */
}

    .settings-panel.active {
        /* 3. Active State: Visible on screen */
        right: 0; /* Brings the panel into view */
        /* Optional for display: none alternative */
         visibility: visible; 
         opacity: 1; 
         transform: translateX(0); 
        /* transition: transform 0.3s ease-in-out, visibility 0s 0s, opacity 0.3s; */
    }
    /* Hide the individual controls until the panel is active */
    .settings-panel .settings-control {
        opacity: 0;
        pointer-events: none; /* Disable interaction when hidden */
        transition: opacity 0.1s ease-out;
    }

    /* Show and enable interaction when the panel is active */
    .settings-panel.active .settings-control {
        opacity: 1;
        pointer-events: auto; /* Enable interaction */
        transition-delay: 0.2s; /* Slight delay for controls to fade in after slide */
    }

.cell-time-popup {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.9em; /* Readable font size */
    font-weight: bold; /* Make time stand out */
    color: #333; /* Dark text */
    padding: 3px 6px; /* Padding inside the pop-up */
    white-space: nowrap; /* Prevent time from wrapping */
    position: absolute; /* Position relative to .cell-hover-time-area-container */
    z-index: 101; /* Ensure it's above the container */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    /* Initially hidden by default */
    visibility: hidden; /* <--- HIDDEN BY DEFAULT */
    opacity: 0;
    transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out; /* Smooth transition */
    /* Position the tooltip: Example center top */
    transform: translateX(-50%); /* Adjust for horizontal centering */
    left: 50%;
    top: 5px; /* Position from top */
}
/* Ensure the main drag element (the 'shadow' or 'moving original') is always visible and colored */
.calendar_default_event.dp_event_drag,
.calendar_default_event.dp_event_shadow,
.dp_event_drag,
.dp_event_shadow {
    background-color: rgba(106, 64, 232, 0.7) !important; /* Semi-transparent purple from your scheme */
    border: 2px solid #6a40e8 !important; /* Solid purple border */
    color: #fff !important; /* Ensure text is white */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; /* Small shadow for readability */
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important; /* Use flex to align content if needed */
    align-items: center !important; /* Center content vertically */
    justify-content: center !important; /* Center content horizontally */
    box-sizing: border-box !important;
    padding: 5px 8px !important; /* Ensure padding for text */
    font-size: 0.9em !important; /* Readable font size */
    line-height: 1.2 !important; /* Space out lines */
    pointer-events: none !important; /* Crucial for dropping */
    z-index: 2147483647 !important; /* MAX Z-INDEX to be on top of everything */
    overflow: visible !important; /* Important: Allows content to break out if needed */
}

    /* Hide any default inner text that DayPilot might put inside the main drag element */
    /* We want to show our own args.area.html content instead */
    .calendar_default_event.dp_event_drag .calendar_default_event_inner,
    .calendar_default_event.dp_event_shadow .calendar_default_event_inner,
    .dp_event_drag .calendar_default_event_inner,
    .dp_event_shadow .calendar_event_inner {
        /*display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;*/
    }

/* Ensure the args.area container (which holds your drag-time-tooltip) is also visible and prominent */
.dp_area {
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent !important; /* Keep the background transparent */
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important; /* CRITICAL: Allows contents to be visible even if they extend outside */
    z-index: 2147483647 !important; /* MAX Z-INDEX, on top of everything */
    pointer-events: none !important;
    /* DayPilot controls positioning, so we generally don't put position/left/top/transform here aggressively */
    width: 100% !important; /* Try to make it fill the drag element */
    height: 100% !important; /* Try to make it fill the drag element */
}

/* Style for your custom tooltip text inside dp_area */
.drag-time-tooltip {
    background-color: #6a40e8 !important; /* Solid purple for contrast */
    color: #fff !important;
    border: 1px solid #fff !important; /* White border to stand out */
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-size: 1.0em !important; /* Make it more readable */
    font-weight: bold !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; /* Stronger shadow */
    display: block !important; /* Ensure it's a block element */
    visibility: visible !important;
    opacity: 1 !important;
    /* REVISED POSITIONING FOR MAXIMUM VISIBILITY */
    /* This positioning attempts to center it within the dp_area, which fills the event */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important; /* Center vertically initially */
    transform: translate(-50%, -50%) !important; /* Adjust for perfect centering */

    z-index: 2147483647 !important; /* MAX Z-INDEX, guarantee it's on top */
    pointer-events: none !important;
}
/* --- EMPLOYEE AVATAR/INITIALS IN HEADER COLUMNS --- */

/* The main container for the avatar/initials, styled to be a circle with border */
/* --- EMPLOYEE AVATAR/INITIALS IN HEADER COLUMNS (CONSOLIDATED & FINAL) --- */

/* The main container created by JS, now has complete control over avatar circle styling */
.employee-header-avatar-container {
    width: 100%; /* Should fill its 60x60px parent area */
    height: 100%;
    border-radius: 50%; /* Makes it circular */
    border: 2px solid rgba(173, 216, 230, 0.7) !important; /* Light blue border color (from your picture) */
    background-color: white !important; /* White background for the circle */
    box-shadow: inset 0 0 0 2px white !important; /* Inner white ring effect (from your original desire) */
    overflow: hidden !important; /* Crucial: Clips content (image/initials) to the circle */
    box-sizing: border-box !important; /* Ensure correct box model */
    display: flex !important; /* Use flex to center content (image or initials text) */
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* Prevent it from shrinking */
    position: relative !important; /* In case DayPilot uses relative positioning */
}

/* Styling for the actual avatar IMAGE inside the container */
.employee-header-avatar-image {
    width: 100% !important; /* Make image fill its container */
    height: 100% !important;
    border-radius: 50% !important; /* Important: Clips the image itself to a circle */
    object-fit: cover !important; /* Prevents distortion, crops if necessary */
    display: block !important;
}

/* Styling for the initials text inside the container (fallback) */
.employee-header-initials-text {
    width: 100% !important; /* Make text div fill its container */
    height: 100% !important;
    border-radius: 50% !important; /* For perfect circle background if needed */
    display: flex !important; /* Use flex to center the initial */
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important; /* Adjust font size as needed */
    font-weight: bold !important;
    /* Background and color will be set inline by JavaScript based on dynamic logic */
}

/* AGGRESSIVELY HIDE DAYPILOT'S DEFAULT AVATAR CONTAINERS */
/* These are the elements that DayPilot creates by default for the avatar area in column headers */
/* We want to make sure they don't interfere with our custom .employee-header-avatar-container */
.calendar_default_colheader > div[unselectable="on"][style*="position: absolute"][style*="width: 60px"][style*="height: 60px"] {
    /* Target the specific auto-generated div that contains the default avatar/initials. */
    /* This rule tries to target DayPilot's default avatar container very specifically to hide its conflicting styles. */
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    /* You may need to add display: none !important; or visibility: hidden !important; if it's still drawing something */
    /* display: none !important; */
    /* visibility: hidden !important; */
}
/* The main container for your event's custom HTML */
.event-content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.event-time {
    /*font-size: 0.85em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);*/ /* Slightly transparent white for time */
    /*line-height: 1.2;*/
    white-space: nowrap !important;
}

.event-time, .event-customer-name, .event-service-name {
    white-space: normal !important; /* Allow wrapping for these specific spans */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.event-customer-name {
    font-size: 0.95em; /* Keep current font size */
    font-weight: bold; /* Keep bold */
    color: darkseagreen; /* Keep current color */
    line-height: 1.0 !important; /* <-- CRITICAL: Reduce line height */
    margin: 0 !important; /* <-- Ensure no default margins */
    padding: 0 !important; /* <-- Ensure no default padding */
    white-space: normal !important;
    word-break: break-word;
}

.event-service-name {
    font-size: 0.8em; /* Keep current font size */
    color: darkseagreen; /* Keep current color */
    line-height: 1.0 !important; /* <-- CRITICAL: Reduce line height */
    margin: 0 !important; /* <-- Ensure no default margins */
    padding: 0 !important; /* <-- Ensure no default padding */
    white-space: normal !important;
    word-break: break-word;
}

/* Also ensure no default margins on the <strong> tag if it's adding space */
.event-content-wrapper strong {
    margin: 0 !important;
    padding: 0 !important;
}
/* Base style for DayPilot event (background color, border, text color) */
/* This controls the overall look of the event box */
.calendar_default_event {
    background-color: transparent !important; /* <--- CRITICAL CHANGE: Make it transparent! */
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 1px !important; /* This will create a 1px visual gap around the event */
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    color: #333 !important;
    border: none !important; /* Ensure no borders are adding extra space */
}
/* If you need to make the dpc_event_inner transparent to show the event_wrapper's background */
.dpc_event_inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Or 'center' if you prefer overall vertical centering */
    align-items: flex-start !important;
    height: 100% !important; /* Important for flexbox */
    padding: 0 !important; /* Keep this at 0 */
    box-sizing: border-box !important;
    /* Other properties you already have: */
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background-color: transparent !important;
    color: inherit !important;
    position: relative; /* If needed for absolute positioning of children */
}
/* In your CSS file */
.dp_cell_inner {
    position: relative; /* Needed for absolute positioning of ::before */
}

    .dp_cell_inner::before {
        content: attr(data-cell-time); /* You'd need to set this data attribute dynamically or use a fixed time */
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 0.8em;
        color: #ccc; /* Light color for background hover */
        pointer-events: none; /* Allows clicks/hovers to pass through to events */
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    .dp_cell_inner:hover::before {
        opacity: 1;
    }

/* Ensure events are above this ::before content */
.dp_event_panel {
    z-index: 10;
}
/* Custom CSS for the star icon container on events */
.event-star-icon-area {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white background for the icon */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Subtle shadow */
    color: #e83e8c; /* Example color for the heart icon (pink/red) */
    font-size: 0.8em; /* Adjust icon size within the 20x20 area */
    pointer-events: none; /* Make it unclickable, just visual */
    z-index: 100; /* Ensure it's above event text */
}

/* You might need to adjust the padding of the event if the star overflows */
/* For events with a star, increase padding-right to make space for it */
.employee-required-event .event-content-wrapper {
    padding-right: 25px; /* Make space for the star on the right */
}
/* Styles for the custom drag clone generated in onEventMoving */

.drag-clone-time {
    font-size: 0.85em !important;
    font-weight: bold !important;
    color: rgba(255, 255, 255, 0.9) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/*.drag-clone-customer {
    font-size: 0.95em !important;
    font-weight: bold !important;
    color: #fff !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}*/

.drag-clone-service {
    font-size: 0.8em !important;
    color: rgba(255, 255, 255, 0.8) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.calendar_default_shadow {
    /*display: contents !important;
    visibility: visible !important;*/
    /*opacity: 1 !important;*/
}

/* --- Ensure args.area (your custom drag visual) is always on top and visible --- */
/* This applies to the wrapper DayPilot creates for args.area */
div[style*="z-index: 2000000"] { /* Target the inline style z-index for args.area */
    /* Ensure it is visible and has a background that matches your args.area.style */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important; /* Force full opacity for the container */
    /* Ensure it has a background color to be seen */
    background-color: inherit !important; /* Will inherit from args.area.style */
    color: inherit !important; /* Will inherit text color from args.area.style */
    /* Re-confirm all layout properties in case any default browser styles interfere */
    position: absolute !important;
    box-sizing: border-box !important;
    padding: 0 !important; /* No extra padding on this container */
    margin: 0 !important; /* No extra margin */
    border: none !important; /* No extra border here, your args.area.style will apply it */
}

/* --- Re-confirm .drag-clone-wrapper styles inside args.area --- */
/* These styles ensure your custom content takes up the space inside args.area */
.drag-clone-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important; /* Fill parent (args.area) width */
    height: 100% !important; /* Fill parent (args.area) height */
    box-sizing: border-box !important;
    background-color: transparent !important; /* Must be transparent to show args.area background */
    color: inherit !important; /* Inherit color from args.area.style */
    padding: 5px 8px !important; /* Apply desired padding here, from args.area.style */
    overflow: hidden !important; /* Hide overflowing text */
    text-overflow: ellipsis !important; /* Add ellipsis */
    white-space: normal !important; /* Allow text wrapping */
}

.drag-clone-time,
.drag-clone-customer,
.drag-clone-service {
    color: inherit !important; /* Inherit text color */
    white-space: nowrap !important; /* Keep on one line as shown in screenshot */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drag-clone-customer {
    font-weight: bold !important;
}

.drag-clone-star {
    position: absolute !important;
    right: 5px !important;
    top: 5px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    color: #e83e8c !important;
    font-size: 0.8em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 10 !important; /* Ensure it's above other clone content */
}
#customAlertModal { /* Or whatever ID/class your custom alert modal uses */
    z-index: 1060; /* This is typically higher than Bootstrap's default modals (1050) */
    /* You might also need position: fixed if it's not already set */
    position: fixed;
    /* Other styling for your custom alert modal */
    /* ... */
}

/* If your custom alert also has a backdrop, it needs a z-index too,
   typically just below the alert modal's z-index. */
/* Example (if you have a custom backdrop) */
.custom-alert-backdrop { /* Replace with your actual backdrop class/ID */
    z-index: 1059;
    /* ... */
}