/* SMART Diary NEW 2026
-----------------------------------------------------*/
:root {
    /* Centralised gutter: adjust this single value (e.g. 5px, 6px, 8px) 
       to control breathing room across header and lanes simultaneously */
    --diary-track-inset: 3px;
}

.SmContainer {
}




/* 2. MAIN CONTAINER & UNIFIED ROW */
.RepRow {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    margin-bottom: 10px;
    gap: 0;
}

.SmNameElement {
    flex: 0 0 95px;
    min-height: 70px;
    border: 1px solid silver;
    box-sizing: border-box;
    border-radius: 5px 0 0 5px;
    padding: 5px;
    background-color: #fafafa;
}

.SmMainElement {
    flex: 1;
    min-height: 70px;
    border: 1px solid silver;
    border-left: none; /* Seamless join to SmNameElement */
    box-sizing: border-box;
    border-radius: 0 5px 5px 0;
    /* THE FIX: Apply padding-bottom using your global track inset variable. 
       This balances the tighter 1px bottom margin of the job blocks, 
       creating uniform breathing room on all 4 sides. */
    padding: 0 0 var(--diary-track-inset) 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 3. TRACK LANES & CANVAS (Scheduled) */
.csSLane {
    position: relative;
    height: 68px;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    
}

    .csSLane:last-child {
        border-bottom: none;
    }

/* 3. TRACK LANES & CANVAS (Scheduled) */
.csSTrackCanvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--diary-track-inset);
    right: var(--diary-track-inset);
    pointer-events: auto;
    /* THE FIX: Pre-allocate the 1px border invisibly to prevent layout shift */
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    /* Add transition here so both entering and exiting the drag state is smooth */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    /* =========================================================================
   ACTIVE DROP ZONE STATE (Contextual Affordance)
   ========================================================================= */
    .csSTrackCanvas.is-dragover {
        background-color: rgba(128, 255, 212, 0.15); /* Very subtle pale green */
        /* We only change the colour and style, NOT the width. Zero layout shift. */
        border-color: #239b56; /* Using your existing 'Complete' green for better contrast */
        border-style: dashed;
    }


/* 1. TIMELINE HEADER */
.HeaderRow {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    margin-bottom: 5px;
    gap: 0;
}

/* Update the existing HeaderSpacer to align the new button */
.HeaderSpacer {
    flex: 0 0 95px;
    box-sizing: border-box;
    margin: 0;
    /* Added Flex properties to perfectly centre the button */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* New compact button specifically designed for the 95px HeaderSpacer */
.AddBookingHeader {
    background-color: #42647F; /* Fits the standard 'Success/Add' green, adjust to your theme */
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    width: 65px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

    .AddBookingHeader:hover {
        background-color: #375263;
        transform: scale(1.02);
    }

    .AddBookingHeader i {
        margin-right: 4px;
    }

.TimelineContainer {
    flex: 1;
    display: flex;
    border: 1px solid silver;
    border-radius: 5px;
    overflow: hidden;
    background-color: #80ffd4;
    box-sizing: border-box;
    margin: 0 var(--diary-track-inset); /* Dynamic Header Inset */
}

.TimeBlock {
    flex: 1;
    text-align: center;
    border-right: 1px solid silver;
    box-sizing: border-box;
    padding: 5px 0;
    font-family: Arial, sans-serif;
}

    .TimeBlock:last-child {
        border-right: none;
    }






/* 1. Base Job Block: Ensure background transparency so no white shows beneath */
/* Base class for all dynamically plotted jobs */
.csSJobBlock {
    position: absolute;
    top: 4px;
    bottom: 4px;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 0; /* Changed from 0 0 0 6px so content fills cleanly */
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border-left: none; /* Removed: was 4px solid rgba(0,0,0,0.3) */
    top: 3px;
    bottom: 1px;
}

   


/* Main Job Inner Container: Enforce full stretch, border-radius matching, and hide overflow */
.csSMainJob {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px 3px 3px 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Enforce 3px right padding. Left remains 14px to clear status boxes */
    padding: 2px 3px 2px 14px;
}




    /* Unify Line 2 (Name), Line 3 (Location), and Line 4 (Details) */
    .csSJobTitle .csSJobName,
    .csSJobDetails {
        display: block;
        font-size: 11px;
        line-height: 1.3;
    }

/* Ensure single-line details truncate with an ellipsis 3px from the edge */
.csSJobTitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* If job details span multiple lines, ensure words break before the 3px padding */
.csSJobDetails {
    word-break: break-word;
    overflow: hidden;
}

.csSJobBlock:hover { 
    z-index: 10; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Presentation Utility Classes */
.fw-bold {
    font-weight: bold;
}

.text-light {
    color: #f8f9fa !important;
    font-style: normal; /* Fixes the italicisation previously caused by <var> */
}

.opacity-75 {
    opacity: 0.75;
}


/* Example status colours to apply alongside csSJobBlock */
.csSStatusBooked {
    background-color: #aed6f1; /* Light Blue */
    border-left-color: #2e86c1;
}

.csSStatusInProgress {
    background-color: #f9e79f; /* Yellow */
    border-left-color: #d4ac0d;
}

.csSStatusComplete {
    background-color: #abebc6; /* Green */
    border-left-color: #239b56;
}



.csSCompactLane .csSJobTitle {
    /* Compress line height so Time and Name fit neatly within 26px of internal space */
    line-height: 1.1;
}

    .csSCompactLane .csSJobTitle .csSJobName {
        /* Move name onto the same line as time if space permits, or tighten display */
        display: inline;
        margin-left: 4px;
    }


/* 
   State Modifier: Compact Row
   Overrides the default 70px min-height when the user preference demands a tighter UI.
   We use 36px to account for the 34px child lane plus 2px for standard border boxing.
*/
.RepRow.is-compact .SmNameElement,
.RepRow.is-compact .SmMainElement {
    min-height: 36px;
}



/* 2. Convert the Lane into a flex container to manage vertical growth */
.csSUnscheduledLane {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 65px;
    box-sizing: border-box;
    padding: 4px 0;
    transition: min-height 0.2s ease, height 0.2s ease;
    /* NEW: Force the lane to consume all available height in the parent */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 3. Instruct the canvas to consume 100% of the lane's available space */
.csSUnscheduledCanvas {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    box-sizing: border-box;
    margin: 0 var(--diary-track-inset);
    width: calc(100% - (var(--diary-track-inset) * 2));
    background-color: #f4f6f8;
    border: 1px dashed #b0bec5;
    border-radius: 4px;
    min-height: 70px;
    padding: 4px;
    transition: min-height 0.2s ease, background-color 0.2s ease;
    /* NEW: Eliminates dead white space by stretching the drop zone to the container's edge */
    flex: 1;
}

.csSUnscheduledLane.is-empty-tba .csSUnscheduledCanvas {
    min-height: 20px;
    background-color: #e9ecef; /* Slightly darker grey to signify a rail */
    border-style: solid;
    border-color: #cfd8dc;
}

    /* 2. Hide the watermark text when condensed to prevent overflow */
    .csSUnscheduledLane.is-empty-tba .csSUnscheduledCanvas::before {
        content: "Drop here to unassign job";
    }

/* 3. Expand to full drop-zone size when a dragged job hovers over it */
.csSUnscheduledLane.is-empty-tba.is-dragover {
    min-height: 65px;
}

.csSUnscheduledLane.is-empty-tba {
    min-height: 18px;
    padding: 2px 0;
}

    .csSUnscheduledLane.is-empty-tba.is-dragover .csSUnscheduledCanvas {
        min-height: 70px;
        background-color: rgba(128, 255, 212, 0.15);
        border-color: #239b56;
        border-style: dashed;
    }

        /* 4. Swap the watermark text to an active instruction during drag */
        .csSUnscheduledLane.is-empty-tba.is-dragover .csSUnscheduledCanvas::before {
            content: "Release to unassign";
            color: #239b56;
            font-weight: bold;
        }

    /* NEW: The Watermark Text */
.csSUnscheduledCanvas::before {
    content: "Unassigned Holding Queue";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #90a4ae;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.5px;
    /* CRITICAL: Ensures the text is purely visual and cannot intercept drag/drop events */
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Ensure dropped job blocks sit securely above the watermark */
.csSUnscheduledLane .csSUnscheduledBlock {
    position: relative;
    top: auto;
    bottom: auto;
    flex: 0 0 100px;
    height: 60px;
    margin: 0;
    box-sizing: border-box;
    z-index: 1; /* Elevates above the ::before watermark */
}

/* 2. Break the inner container out of the flow to reveal the content */
.csSUnscheduledLane.csSCompactLane .csSUnscheduledBlock:hover .csSMainJob {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100px;
    z-index: 30;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Dynamic Compact Track Mode (Triggered on 3+ lanes or User Prefs) */
.csSLane.csSCompactLane {
    height: 36px; /* Strictly 50% of the standard 68px */
    transition: height 0.2s ease;
}

/* ... (Keep existing inner compact styling for job text) ... */

/* =========================================================================
   COMPACT VIEW OVERRIDES FOR UNSCHEDULED JOBS
   Forces the flex-based unscheduled canvas to respect the 34px compaction
   ========================================================================= */

/* Override the rigid 65px min-height on the parent lane */
.csSUnscheduledLane.csSCompactLane {
    min-height: 34px;
    height: auto;
}

    /* Ensure the canvas scales down and visually adjusts for compact mode */
    .csSUnscheduledLane.csSCompactLane .csSUnscheduledCanvas {
        min-height: 26px; /* Matches 34px parent minus standard 8px padding */
        padding: 2px 4px; /* Tighter padding for compact layout */
        gap: 2px 5px;
    }

        /* Shrink the watermark text so it fits the compressed rail */
        .csSUnscheduledLane.csSCompactLane .csSUnscheduledCanvas::before {
            font-size: 11px;
        }

    /* Override the rigid 60px height on the child blocks */
    .csSUnscheduledLane.csSCompactLane .csSUnscheduledBlock {
        height: 30px; /* Compressed to fit the newly tightened canvas */
    }






/* Status indicators: clean split top and bottom on the card's left margin */
.statBox1,
.statBox2 {
    position: absolute;
    left: 0;
    width: 10px;
    height: 50%;
    box-sizing: border-box;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}

.statBox1 {
    top: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 1px solid silver;
}

.statBox2 {
    bottom: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: 1px solid silver;
}



/* =========================================================================
   DRAG AND DROP TOOLTIP (Time Indicator)
   ========================================================================= */
.csSDragTooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: #375263; /* Matches your 'AddBookingHeader' hover state */
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    /* CRITICAL: Hardware acceleration to prevent layout thrashing during drag */
    will-change: transform;
    /* CRITICAL: Ensures the tooltip does not intercept dragover events */
    pointer-events: none;
    /* Centering calculation applied via JS transform, but origin set here */
    transform-origin: center bottom;
}

    .csSDragTooltip.hidden {
        display: none;
    }

/* CSS Triangle for the down arrow */
.csSDragTooltip-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #375263 transparent transparent transparent;
}


/* 1. Release the rigid 70px minimums on the Unassigned row wrappers */
.RepRow.RepRow-Unassigned .SmUnassignedNameElement,
.RepRow.RepRow-Unassigned .SmMainElement {
    min-height: 30px; /* Allows the container to collapse around the slim empty rail */
    transition: min-height 0.2s ease, height 0.2s ease;
}


/* =========================================================================
   UNASSIGNED QUEUE SEPARATION (Holding Pen)
   ========================================================================= */

/* The parent row modifier */
.RepRow.RepRow-Unassigned {
    margin-bottom: 0; /* Let the divider handle the spacing */
}

/* Distinct styling for the Unassigned strap line */
.SmUnassignedNameElement {
    flex: 0 0 95px;
    min-height: 70px;
    border: 1px dashed #90a4ae; /* Dashed implies a temporary/queue state */
    border-right: 1px solid silver; /* Keep the join to the main element solid */
    box-sizing: border-box;
    border-radius: 5px 0 0 5px;
    padding: 5px;
    background-color: #eceff1; /* Distinct cool grey, unlike the #fafafa rep background */
    color: #455a64;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Distinct visual break separating the queue from the physical staff */
.UnassignedDivider {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient( to right, #cfd8dc, #cfd8dc 10px, transparent 10px, transparent 20px );
    margin: 15px 0;
}

/* Compact mode support for the unassigned block */
.RepRow.is-compact .SmUnassignedNameElement {
    min-height: 36px;
    flex-direction: row; /* Shift icon and text inline */
    gap: 5px;
}

    .RepRow.is-compact .SmUnassignedNameElement i {
        margin-bottom: 0 !important;
    }


/* =========================================================================
   PENDING DROP STATE (Optimistic UI)
   ========================================================================= */
.csSJobBlock.is-pending-update {
    /* Visual indicator that the system is processing the timeline update */
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
    /* Ensure any CSS transitions do not interfere with our calculated DOM repositioning */
    transition: none !important;
}



/* =========================================================================
   RESIZE HANDLE FOR SMART DIARY
   ========================================================================= */
.csSResizeHandle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px; /* Generous hit area for the mouse */
    cursor: ew-resize;
    z-index: 50; /* Ensure it sits above the job text */
    background-color: transparent;
    transition: background-color 0.2s ease;
}

    .csSResizeHandle:hover {
        background-color: rgba(0, 0, 0, 0.15); /* Visual feedback on hover */
    }

/* Optional: styling when the block is actively being resized */
.csSJobBlock.is-resizing {
    opacity: 0.8;
    z-index: 100;
    transition: none !important; /* Disable CSS transitions during rapid JS width updates */
}