/*Purple Dome Button*/





/*notificationPanel css*/
.notification-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 1080;
}

.notification {
    padding: .75rem 1rem;
    border-radius: .375rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.15);
    background: #2196f3;
    color: #fff;
    cursor: pointer;
    max-width: 20rem;
    word-wrap: break-word;
    animation: fade-in .3s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/*File Uploader css*/
.drop-zone {
    border: 3px dashed #6c757d;
    border-radius: .5rem;
    padding: 3rem;
    position: relative;
    text-align: center;
    transition: background .2s;
}

    .drop-zone:hover {
        background: #f8f9fa;
        cursor: pointer;
    }

.overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    background: rgba(0,123,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0d6efd;
    font-weight: 600;
}





/*DRAG DROP LISTS css*/

.lists-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
}

section {
    flex: 1 1 0;
    min-width: 10rem;
}

/* --- UL: always block, always at least 10 rem high --- */
.name-list {
    display: block; /* critical when UL has no LI children   */
    min-height: 10rem; /* keeps it a visible target             */
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    border: 2px dashed #bbb;
    border-radius: .45rem;
    background: #fafafa;
}

    /* --- normal list items --- */
    .name-list li {
        margin: .3rem;
        padding: .55rem .85rem;
        font-size: 1.15rem;
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: .35rem;
        cursor: move;
        transition: background .15s;
    }

        .name-list li:hover {
            background: #e5e7eb;
        }

        .name-list li:active {
            opacity: .65;
        }

/* --- placeholder row shown when list is empty --- */
.placeholder {
    pointer-events: none; /* so UL still gets the drop             */
    text-align: center;
    font-style: italic;
    color: #999;
    background: transparent;
    border: none;
}




/*Button and Multiselect panel control*/
/* Parent grid: two rows (button, dropdown) filling its container */
.bmp-wrapper {
    display: grid;
    grid-template-rows: auto 1fr; /* button height = auto, dropdown grows */
    height: 100%;
    width: 100%;
    gap: .5rem;
}

/* Button scales horizontally; adjust style as desired */
.bmp-button {
    width: 100%;
    padding: .6rem 1rem;
    border: none;
    border-radius: .4rem;
    background: #2563eb;
    color: #fff;
    font-size: clamp(.9rem, 1.2vw, 1.1rem);
    cursor: pointer;
}

/* Multi-select fills everything left */
.bmp-select {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: .5rem;
    border: 1px solid #d1d5db;
    border-radius: .25rem;
    font-size: clamp(.85rem, 1vw, 1rem);
}



/* Makes the button occupy the entire space of its parent */
.full-expand-btn {
    width: 100%;
    height: 100%;
    display: block; /* removes inline-block gaps */
    cursor: pointer;
    /* use fallback values if the container doesn't set them */
    background: var(--feb-bg, #2563eb);
    color: var(--feb-fg, #fff);
    border: var(--feb-border, none);
    border-radius: var(--feb-radius, .25rem);
    font-size: var(--feb-fz, 1rem);

}

    .full-expand-btn:hover {
        filter: brightness(110%);
    }

    .full-expand-btn:active {
        filter: brightness(90%);
    }

    /* multi input grid*/
/* Root flex-column that fills its parent */
.igf-wrapper {
    display: grid;
    grid-template-rows: auto 1fr; /* inputs then grid */
    height: 100%;
    width: 100%;
}





/* ---------- Inputs area ---------- */
.igf-input-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 × 3 */
    gap: .75rem;
    padding: .75rem;
}

.igf-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    /* Responsive font sizing: between .8 rem and 1.1 rem */
    .igf-field label,
    .igf-input {
        font-size: clamp(.8rem, 1.2vw, 1.1rem);
    }

.igf-input {
    width: 100%;
    box-sizing: border-box;
    padding: .35rem .5rem;
    border: 1px solid #d1d5db;
    border-radius: .25rem;
}

/* ---------- Grid / table area ---------- */
.igf-grid-area {
    overflow: auto; /* scroll if content taller than space */
}

.igf-table {
    width: 100%;
    border-collapse: collapse;
}

    .igf-table th,
    .igf-table td {
        border: 1px solid #e5e7eb;
        padding: .5rem .75rem;
        text-align: left;
        font-size: clamp(.8rem, 1vw, 1rem);
        white-space: nowrap;
    }

    .igf-table th {
        position: sticky; /* keeps headers visible during scroll */
        top: 0;
        background: #f3f4f6;
    }



/* this is the css for the main grids for orders,appointments, and invoices*/
/* Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: [row1-start] 20px 
    [whitespace1] 5px 
    [row2-start] 40px 
    [whitespace2] 5px
    [row3-start] 10%
    [row4-start] 10%
    [whitespace3] 5px
    [row5-start] 10%
    [row6-start] 10%
    [whitespace4] 5px
    [row7-start] 10%
    [row8-start] 10%
    [whitespace5] 5px
    [row9-start] 10%
    [row10-start] 10%
    [whitespace6] 5px
    [row11-start] 10%
    [nexttolast-line] auto [last-line];
    
    
    width: 100%;
    height: 150vh;
}
/* Notification-Full Width*/
.notification-full-width {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: row1-start;
    grid-row-end: whitespace1;
    background-color: #004a70;
    color: white;
    text-align: center;
    
}

/* PizzaTracker-Full Width*/
.pizzatracker-full-width {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: whitespace1;
    grid-row-end: whitespace2;
    background-color: #004a70;
    color: white;
    text-align: center;
}

/* Appoint Summary Two-thirds width Sections */
.appointment-summary-two-thirds {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: row3-start;
    grid-row-end: whitespace3;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Actions Section Two-thirds width Sections */
.actions-section-two-thirds {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: row5-start;
    grid-row-end: whitespace4;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Checklist one-third width Sections */
.checklist-section-one-third {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: row3-start;
    grid-row-end: row7-start; /*row8-start;*/
    background-color: #006080;
    color: white;
    text-align: center;
}


.checklist-section-one-third-collapsed {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: row3-start;
    grid-row-end: row8-start;
    background-color: #006080;
    color: white;
    text-align: center;
}

.checklist-section-one-third-collapsed {
    width: 100vw;
    height: 100vh;
    background-color: lightblue;
    transition: all 0.5s ease-in-out;
    position: fixed;
    top: 0;
    left: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* pdf one-third width Sections */
.pdf-section-one-third {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: row7-start;
    grid-row-end: lastline;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* manifest one-sixth width Sections */
.manifest-section-one-sixth {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: row7-start;
    grid-row-end: lastline;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* button onebyone Section */
.button-section-one-sixth-one-row {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: row11-start;
    grid-row-end: lastline;
    background-color: #ff0000;
    color: white;
    text-align: center;
}

/* Signature Capture Half width Sections */
.signature-section-one-half {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row7-start;
    grid-row-end: whitespace5;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Scan and Sign Half width Sections */
.scan-and-sign-section-one-half {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row9-start;
    grid-row-end: whitespace6;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* chat Half width Sections */
.chat-section-one-half {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row11-start;
    grid-row-end: lastline;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Full-width Sections */
.full-width {
    grid-column: span 6;
    height:10px;
    background-color: #004a70;
    color: white;
    text-align: center;
    padding: 5px;
}

/* Two-thirds width Sections */
.two-thirds {
    grid-column: span 4;
    background-color: #006080;
    color: white;
    text-align: center;
    padding: 10px;
}

/* One-third width Sections */
.one-third {
    grid-column: span 2;
    background-color: #00709a;
    color: white;
    text-align: center;
    padding: 10px;
}

/* Full-height Sections */
.full-height {
    grid-row: span 2;
    
}

/* Common container style */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid white;
    min-height:20px;
}



/* Grid Container Appointments*/
.grid-container-appointments {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: [row1-start] 20px [whitespace1] 5px [row2-start] 40px [whitespace2] 5px [row3-start] 10% [row4-start] 10% [whitespace3] 5px [row5-start] 10% [row6-start] 10% [whitespace4] 5px [row7-start] 10% [row8-start] 10% [whitespace5] 5px [row9-start] 10% [row10-start] 10% [whitespace6] 5px [row11-start] 10% [nexttolast-line] auto [last-line];
    width: 100%;
    height: 150vh;
}
/* Notification-Full Width*/
.notification-full-width-appointments {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: row1-start;
    grid-row-end: whitespace1;
    background-color: #004a70;
    color: white;
    text-align: center;
}

/* PizzaTracker-Full Width*/
.pizzatracker-full-width-appointments {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: whitespace1;
    grid-row-end: whitespace2;
    background-color: #004a70;
    color: white;
    text-align: center;
}

/* Appoint Summary Two-thirds width Sections */
.appointment-summary-two-thirds-appointments {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: row3-start;
    grid-row-end: whitespace3;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Actions Section Two-thirds width Sections */
.actions-section-two-thirds-appointments {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: row5-start;
    grid-row-end: whitespace4;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Checklist one-third width Sections */
.checklist-section-one-third-appointments {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: row3-start;
    grid-row-end: row7-start; /*row8-start;*/
    background-color: #006080;
    color: white;
    text-align: center;
}


.checklist-section-one-third-collapsed-appointments {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: row3-start;
    grid-row-end: row8-start;
    background-color: #006080;
    color: white;
    text-align: center;
}

.checklist-section-one-third-collapsed-appointments {
    width: 100vw;
    height: 100vh;
    background-color: lightblue;
    transition: all 0.5s ease-in-out;
    position: fixed;
    top: 0;
    left: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* pdf one-third width Sections */
.pdf-section-one-third-appointments {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: row7-start;
    grid-row-end: lastline;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* manifest one-sixth width Sections */
.manifest-section-one-sixth-appointments {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: row7-start;
    grid-row-end: lastline;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Signature Capture Half width Sections */
.signature-section-one-half-appointments {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row7-start;
    grid-row-end: whitespace5;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Scan and Sign Half width Sections */
.scan-and-sign-section-one-half-appointments {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row9-start;
    grid-row-end: whitespace6;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* chat Half width Sections */
.chat-section-one-half-appointments {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row11-start;
    grid-row-end: lastline;
    background-color: #006080;
    color: white;
    text-align: center;
}

/* Full-width Sections */
.full-width-appointments {
    grid-column: span 6;
    height: 10px;
    background-color: #004a70;
    color: white;
    text-align: center;
    padding: 5px;
}

/* Two-thirds width Sections */
.two-thirds-appointments {
    grid-column: span 4;
    background-color: #006080;
    color: white;
    text-align: center;
    padding: 10px;
}

/* One-third width Sections */
.one-third-appointments {
    grid-column: span 2;
    background-color: #00709a;
    color: white;
    text-align: center;
    padding: 10px;
}

/* Full-height Sections */
.full-height-appointments {
    grid-row: span 2;
}

/* Common container style */
.container-appointments {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid white;
    min-height: 20px;
}



/* this section is for the different display systems*/
/* Responsive Design */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .full-width, .two-thirds, .one-third {
        grid-column: span 1;
    }

    .full-height {
        grid-row: auto;
    }

    .scrolling-banner-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: #f8f8f8;
        border: 1px solid #ccc;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .scrolling-banner-content {
        display: inline-block;
        white-space: nowrap;
        animation: scroll-left linear infinite;
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }