:root {
    --chart-Within2Days: #28b463;
    --chart-WithinaWeek: #f4d03f;
    --chart-AfteraaWeek: #f39c12;
    --chart-NotDoneYet: #ec7063;
    --chart-SuccessAndClosed: #2ecc71;
    --chart-blueSuccessAndOnGoing: #82e0aa;
    --chart-Pending: #2e86c1;
    --chart-FailednClosed: #e74c3c;
    --chart-PendingAssignment: #ff6347;
    --chart-ClosedIrrelevant: #212f3c;
}

.installation-wizard {
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
}

.wizard-header {
    flex-shrink: 0;
}

.wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

.notifications-layout {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.notifications-left {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notifications-right {
    flex: 1;
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.start-selection .rz-dropdown {
    border: 2px solid #ff9800;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(255,152,0,.4);
    animation: pulseBorder 1.5s infinite;
}

@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 5px rgba(255,152,0,.3);
    }

    50% {
        box-shadow: 0 0 15px rgba(255,152,0,.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(255,152,0,.3);
    }
}



.big-label {
    font-size: 1.3rem;
    font-weight: 600;
}
/*.e-leftfreeze {
    position: relative !important;
    left: auto !important;
}

.e-freezeleftborder {
    border-left: none !important;
}*/


a, .btn-link {
    color: #0366d6;
}

/*.btn-primary {
    color: #fff ;
    background-color: #1b6ec2;
    border-color: #1861ac;
}*/

*.btn-primary,
*.btn-primary:hover,
*.btn-primary:active,
*.btn-primary:visited,
*.btn-primary:focus {
    color: #000000 !important;
    background-color: #0080FF !important;
    border-color: #1861ac;
}


.fixed-width-label {
    width: 150px;
}



app {
    position: relative;
    display: flex;
    flex-direction: row;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}



.main {
    flex: 1;
    overflow: hidden;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }



.content {
    padding-top: 0px;
    margin: 0; /* Remove margin */
}


.rz-header {
    background-color: #f7f7f7;
    display: block;
    padding: 0 !important; /*Remove padding */
    margin: 0 !important; /* Remove margin */
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;

    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
}

    /* Remove unwanted spacing inside header */


    /* Remove menu spacing */
    .rz-header .rz-menu {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove default UL spacing */
    .rz-header ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Optional: tighten menu item height if still tall */
    .rz-header .rz-navigation-item-wrapper {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

.rz-layout {
    margin: 0;
    padding: 0;
}

.rz-main {
    margin: 0;
    padding: 0;
}


.rz-body {
    background-color: #f7f7f7;
    padding: 0 !important;
    margin: 0 !important; /* Remove margin */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.rz-card {
    margin: 0 !important; /* Remove margin */
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

      
/* This will hide arrows on right of top menu */

.rzi.rz-navigation-item-icon-children {
    display: none;
}

/*.rzi.rz-navigation-item {
    flex-wrap: wrap;
        }

        .rzi.rz-navigation-item .rz-navigation-item-active {
            z-index: 1;
        }*/

.rz-tabview-selected {
    display: block;
    background-color: rgba(100,255,255,0.25);
}

div.rz-navigation-item-link {
    background-color: #f7f7f7;
    color: #000000 !important;
}

    div.rz-navigation-item-link:hover {
        color: #b0b0b0;
    }

.rz-navigation-item {
    background-color: #f7f7f7;
    color: #000000 !important;
}

i.rzi.rz-navigation-item-icon {
    background-color: #f7f7f7;
    color: #000000 !important;
}

.rz-menu {
    background-color: #f7f7f7;
}

div.rz-navigation-item-wrapper {
    background-color: #f7f7f7;
    color: #000000 !important;
}

    div.rz-navigation-item-wrapper:hover {
        background-color: #f7f7f7;
        color: #000000 !important;
    }

    div.rz-navigation-item-wrapper.rz-navigation-item-wrapper-active {
        background-color: #f7f7f7;
        color: #000000 !important;
    }

/*.rz-menu-toggle*/
/*.rz-menu-toggle-item*/

.rz-title-column {
    text-transform: none !important;
}

.rz-column-title-content {
    text-transform: none !important;
}


.row {
    display: flex;
    margin: 0 !important; /* Remove margin */
    padding: 0 !important;
    align-items: stretch; /* Ensures items stretch to fill the row */
}

.footer-buttons {
    display: flex;
    justify-content: center;
}

.button-container {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap into multiple rows */
    justify-content: space-between; /* Evenly distributes space between buttons */
    max-width: 800px; /* Adjust the width to control how the buttons wrap */
    gap: 10px; /* Adds space between buttons */
}

    .button-container .rz-button {
        flex: 1 1 22%; /* Ensures 4 buttons per row; 22% width with gap spacing */
        box-sizing: border-box;
        background-color: white !important; /* White background */
        color: black !important; /* Adjust text color to black for contrast */
    }

.main-buttons {
    display: flex;
    flex-wrap: wrap; /* This allows the buttons to wrap into the next row */
    gap: 2px; /* Add space between the buttons */
    justify-content: left;
    /*  display: flex;
    justify-content: left;*/
    flex-direction: row;
    /*background-color: white !important;*/ /* White background */
    /*color: black !important;*/ /* Adjust text color to black for contrast */
}



.button-container2 {
    display: flex;
    /*flex-wrap: wrap;*/ /* Allows buttons to wrap into multiple rows */
    /*justify-content: space-between;*/ /* Evenly distributes space between buttons */
    /*max-width: 800px;*/ /* Adjust the width to control how the buttons wrap */
    gap: 10px; /* Adds space between buttons */
}

    .button-container2 .rz-button {
        flex: 1 1 22%; /* Ensures 4 buttons per row; 22% width with gap spacing */
        box-sizing: border-box;
        background-color: white !important; /* White background */
        color: black !important; /* Adjust text color to black for contrast */
    }



.col {
    margin: 0 !important; /* Remove margin */
    padding: 0 !important; /* Remove padding */
}

.e-chart {
    width: inherit !important;
    height: inherit !important;
}

/* Make the modal occupy the full screen */
/* Force full-screen and ignore parent transforms */
.full-screen-modal2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important; /* very high so nothing overlays it */
    overflow: auto !important;
}

/* Modal dialog wrapper */
.modal-full-width2 {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

/* Content */
.modal-content {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}


.modal-header, .modal-body {
    width: 100%;
}

.modal-body {
    height: calc(100% - 56px); /* Adjust height to fill remaining space */
    overflow-y: auto !important; /* Enable scrolling if content overflows */
    padding: 10px; /* Optional padding for visual clarity */
    text-align: left; /* Aligns text and content to the left */
}

.modal {
    position: fixed;
    top: 0; /* Align to the top of the screen */
    left: 0; /* Align to the left side of the screen */
    width: 100% !important; /* Full width */
    height: 100% !important; /* Full height */
    padding: 20px;
    background-color: rgba(37, 211, 102, 0.5); /* Background for modal */
    box-shadow: none; /* Remove any extra shadow */
    z-index: 1050;
}

    .modal.show {
        display: block;
    }



.col-1.sidebar {
    width: 80px; /* Increased to accommodate the icon size and padding */
    padding: 10px; /* Padding for spacing around the icons */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .material-icons {
    font-size: 45px; /* Ensuring the icons are 45px */
}

.main-content {
    padding: 0px; /* Adjust padding as needed */
    flex-grow: 1; /* Takes up the remaining space in the row */
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-top: 0; /* Remove margin below the header */
}


.panel-menu {
    background-color: #128C7E !important;
    color: white !important;
}

    .panel-menu .navigation-menu .navigation-item-wrapper {
        background-color: #128C7E !important;
        color: white !important;
    }

.rz-panel-menu .rz-navigation-item-wrapper-active::before {
    content: none !Important;
}




/* Task Type */

.task-div-1 {
    border-left: 4px solid blue !important;
}

/* Task Personal Info */

.task-div-2 {
    border-left: 4px solid red !important;
}
/* Task Custom Fields */

.task-div-3 {
    border-left: 4px solid black !important;
}
/* Task Product Group */

.task-div-4 {
    border-left: 4px solid green !important;
}
/* Task Product Selection */

.task-div-5 {
    border-left: 4px solid lightblue !important;
}
/* Task Account Selection */

.task-div-6 {
    border-left: 4px solid aqua !important;
}
/* Task Coucher Selection like invoices quotations */

.task-div-7 {
    border-left: 4px solid aquamarine !important;
}
/* Task Subject and Message */

.task-div-8 {
    border-left: 4px solid blueviolet !important;
}

/* Task Save */
.task-div-9 {
    border-left: 4px solid darkblue !important;
}
/* Task pipeline or process sequence */

.task-div-10 {
    border-left: 4px solid darkcyan !important;
}
/* Task Assignment Followup */

.task-div-11 {
    border-left: 4px solid darkcyan !important;
}
/* Task Assignment Original Message FRame RadzenCard */
.task-div-12 {
    border-left: 4px solid darkcyan !important;
}
/* Task Assignment Assignment Frame RadzenCard */

.task-div-13 {
    border-left: 4px solid darkcyan !important;
}

/* Task Past Communication RadzenCard */

.task-div-14 {
    border-left: 4px solid darkcyan !important;
}

.task-div-15 {
    border-left: 4px solid darkcyan !important;
}

.task-div-16 {
    border-left: 4px solid blue !important;
}

.task-div-17 {
    border-left: 4px solid green !important;
}





.e-kanban .e-card-kanban-image {
    height: 45px;
    width: 45px;
    margin-left: 8px;
}

    .e-kanban .e-card-kanban-image img {
        height: inherit;
        width: inherit;
        border-radius: 50%;
    }

.e-kanban .e-card .e-card-tag-field {
    background: #000000;
    color: #FFFFFF;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 13px;
    border-radius: 3px !important;
    padding: 4px;
}

.e-kanban-table {
    padding: 0px !important;
}



.e-kanban .e-card .e-card-header-title {
    background: #0047AB;
    color: #FFFFFF;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 10px;
    border-radius: 0px !important;
    padding: 0.5em 0.8em; /* 5px top/bottom, 8px left/right */
}

.e-kanban .e-card .e-card-id-field {
    background: #0047AB;
    color: #FFFFFF;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 13px;
    border-radius: 0px !important;
    padding: 0.5em 0.8em; /* 5px top/bottom, 8px left/right */
    display: inline-block; /* 👈 this is the key */
    width: auto; /* optional, but safe */
}

.e-kanban .e-card-custom-footer {
    display: flex;
    padding: 0.5em 0.8em; /* 5px top/bottom, 8px left/right */
    line-height: 1;
    height: 35px;
}

.e-kanban .e-card td {
    background-color: #fff;
}

.e-kanban .e-card .e-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px !important;
}

    .e-kanban .e-card .e-card-content .subject {
        font-weight: bold; /* Make the contact name bold */
        color: #007bff; /* Change the color to blue */
    }



    .e-kanban .e-card .e-card-content .contact-name {
        font-weight: bold; /* Make the contact name bold */
        color: #007bff; /* Change the color to blue */
    }

    .e-kanban .e-card .e-card-content .company-name {
        /*font-style: italic; Make the company name italic */
        color: #652986; /* Change the color to green */
    }

    .e-kanban .e-card .e-card-content .task-name {
        font-style: italic; /* Make the company name italic */
        color: #007bff; /* Change the color to blue */
    }

    .e-kanban .e-card .e-card-content .task-priority {
        /* font-style: italic;  Make the company name italic */
        color: #FA0404; /* Change the color to blue */
    }



    .e-kanban .e-card .e-card-content .task-date {
        font-style: italic; /* Make the company name italic */
        color: #0F2152; /* Change the color to blue */
    }

    .e-kanban .e-card .e-card-content .target-date {
        /*  font-style: italic;  Make the company name italic */
        color: #007bff; /* Change the color to blue */
    }



    .e-kanban .e-card .e-card-content .full-name {
        font-weight: bold; /* Make the contact name bold */
        /*  font-style: italic;  Make the company name italic */
        color: #28a745; /* Change the color to green */
    }

    .e-kanban .e-card .e-card-content .tag-field {
        background: #000000;
        color: #FFFFFF;
        margin-right: 5px;
        line-height: 1.1;
        font-size: 13px;
        border-radius: 3px !important;
        padding: 4px;
    }


    .e-kanban .e-card .e-card-content .follow-up-remarks {
        color: #000000; /* Keep the color for follow-up remarks */
    }


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.login-page {
    background-color: aquamarine;
}

.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Adjust this value to ensure it's on top of other elements */
}

    .loading-indicator img {
        width: 150px; /* Adjust the size as needed */
        height: 150px; /* Adjust the size as needed */
    }

.taskoriginalmessage {
    font-weight: bold;
    font-size: larger;
    color: blue;
}


.taskassignmentmessage {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskreplymessage {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskpastcommunication {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskcurrentresponse {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskreferences {
    font-weight: bold;
    font-size: larger;
    color: black;
}

.attachfiles {
    font-weight: bold;
    color: black;
}

.filesattached {
    font-weight: bold;
    color: black;
}





.div-likebutton {
    width: 100%;
    height: 40px;
    background-color: Teal;
    border: 1px solid Teal;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}


.div-likebutton2 {
    width: 100%;
    height: 40px;
    background-color: Navy;
    border: 1px solid Navy;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text2 {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}


.div-likebutton3 {
    width: 100%;
    height: 40px;
    background-color: Teal;
    border: 1px solid Teal;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text3 {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}


.div-likebutton4 {
    width: 100%;
    height: 40px;
    background-color: Navy;
    border: 1px solid Navy;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text4 {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}

.e-gantt .e-gantt-chart .e-custom-holiday {
    background-color: #e82869;
}



.form-row {
    display: table-row;
    margin-bottom: 10px;
    padding-left: 10px !important;
    margin-left: 1.5rem;
}

.custom-image {
    width: 15rem; /* Adjust the width as per your requirement */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Optional: Adds rounded corners */
    margin: 0.5rem; /* Optional: Adds space around the image */
    object-fit: cover; /* Optional: Ensures the image fits nicely */
}



.fullscreen-image {
    max-width: 90%; /* Ensure the image fits within the viewport */
    max-height: 90%;
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow for better visibility */
    object-fit: contain; /* Preserve aspect ratio */
    cursor: pointer;
}

.assignment-button {
    background-color: black;
    color: red;
    font-weight: bold;
    font-size: larger;
}


.total-button {
    background-color: black;
    color: red;
    font-weight: bold;
    font-size: larger;
}



.e-panel-content {
    text-align: left;
    margin-top: 10px;
}




.e-dashboardlayout {
    padding: 20px;
    z-index: 0;
}

.e-panel {
    cursor: auto !important;
}

.e-panel-header {
    border: none !important;
    background-color: darkgreen;
    /* height: 40px !important; */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    color: white;
    text-align: center !important;
    font-family: Verdana !important;
    font-size: 24px !important;
    vertical-align: middle !important;
}

.title {
    font-size: 15px;
    font-weight: bold;
    color: white;
}



/* Panel 1: Blue theme */
.panel1 .e-panel-container {
    background-color: #e3f2fd !important;
    /* Light blue */
    color: #0d47a1 !important;
    border-radius: 8px;
}

.panel1 .e-panel-header {
    background-color: #2196f3 !important; /* Blue */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 2: Green theme */
.panel2 .e-panel-container {
    background-color: #e8f5e9 !important; /* Light green */
    color: #1b5e20 !important;
    border-radius: 8px;
}

.panel2 .e-panel-header {
    background-color: #4caf50 !important; /* Green */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 3: Orange theme */
.panel3 .e-panel-container {
    background-color: #fff3e0 !important; /* Light orange */
    color: #e65100 !important;
    border-radius: 8px;
}

.panel3 .e-panel-header {
    background-color: #ff9800 !important; /* Orange */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 4: Purple theme */
.panel4 .e-panel-container {
    background-color: #f3e5f5 !important; /* Light purple */
    color: #4a148c !important;
    border-radius: 8px;
}

.panel4 .e-panel-header {
    background-color: #9c27b0 !important; /* Purple */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 5 - Red Theme */
.panel5 .e-panel-container {
    background-color: #ffebee !important; /* Light Red Content */
    color: #b71c1c !important; /* Deep Red Text */
    border-radius: 8px;
}

.panel5 .e-panel-header {
    background-color: #7B68EE !important; /* Red Header */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

/* Panel 6 - Teal Theme */
.panel6 .e-panel-container {
    background-color: #e0f2f1 !important; /* Light Teal Content */
    color: #004d40 !important;
    border-radius: 8px;
}

.panel6 .e-panel-header {
    background-color: #009688 !important; /* Teal Header */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

/* Panel 7 - Amber Theme */
.panel7 .e-panel-container {
    background-color: #fff8e1 !important; /* Light Amber Content */
    color: #ff6f00 !important;
    border-radius: 8px;
}

.panel7 .e-panel-header {
    background-color: #ffc107 !important; /* Amber Header */
    color: #000000 !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

/* Panel 8 - Gray Theme */
.panel8 .e-panel-container {
    background-color: #f5f5f5 !important; /* Light Gray Content */
    color: #424242 !important;
    border-radius: 8px;
}

.panel8 .e-panel-header {
    background-color: #9e9e9e !important; /* Gray Header */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

ellipse[id*=_Trackball_1] {
    stroke-width: 1 !important;
    stroke: white !important;
}

.e-chart-focused:focus {
    outline: none !important;
}

#control-container {
    padding: 0px !important;
}

#gradient-chart stop {
    stop-color: #2485FA;
}

#gradient-chart1 stop {
    stop-color: #FEC200;
}

.centered-panel {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 100%;
}


.fullscreen-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(37, 211, 102, 0.5);
    z-index: 9999;
    overflow: hidden;
}

.fullscreen-chart {
    width: 90vw;
    height: 90vh;
    background-color: white;
    border-radius: 8px;
    padding: 10px;
}

.panelchart {
    cursor: pointer;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
}

/* Prevent layout scroll */
.dashboard-wrapper {
    overflow-x: hidden !important;
}

/* Ensure dashboard fits container */
.dashboard-layout-full {
    width: 95% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#userMessageCard {
    min-height: 220px;
}

.login-wrapper {
    background-image: url('/Content/Images/login_bg.jpg');
    background-size: cover; /* Fill the screen while maintaining aspect ratio */
    background-position: top center; /* Always align image to the top */
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100vh - 65px);
    position: relative;
    overflow: hidden;
}



.login-form-top-right {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 320px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
}

.logo-top-left {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 200px;
    height: 60px; /* Or as needed */
    /*background-image: url('/Content/Images/logo.jpg');*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    background-color: transparent;
}

/* MOBILE */
@media (max-width: 768px) {

     
    /* MAIN LAYOUT -> vertical */

    .vertical-tabs-container {
        flex-direction: column;
        height: 100%;
    }

    /* TOP MENU */

    .vertical-tabs-menu {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
    }

        /* TITLE */

        .vertical-tabs-menu h5 {
            margin-bottom: 8px;
            font-size: 1rem;
        }

        /* BUTTON AREA -> horizontal */

        .vertical-tabs-menu .rz-stack {
            flex-direction: row !important;
            flex-wrap: nowrap;
            gap: 8px !important;
            align-items: center !important;
            overflow-x: auto;
            width: 100%;
        }

        /* BUTTONS */

        .vertical-tabs-menu .rz-button {
            white-space: nowrap;
            flex: 0 0 auto;
        }

    /* CONTENT */

    .vertical-tabs-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: auto;
        padding: 6px;
        min-height: 0;
        position: relative;
    }
 

    .modern-task-card {
        padding: 14px;
    }

    .task-subject {
        font-size: 0.98rem;
    }

    .task-contact-row {
        flex-direction: column;
    }

    .task-card-footer {
        flex-direction: column;
    }

        .task-card-footer .rz-button {
            width: 100%;
        }
    .task-card-grid {
        grid-template-columns: 90px 1fr;
        gap: 10px;
    }

    .task-title {
        font-size: 0.85rem;
    }

    .message-group-card {
        width: 85vw;
        min-width: 85vw;
        max-width: 85vw;
        height: calc(100vh - 100px);
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        overflow: hidden;
        border-radius: 14px;
        scroll-snap-align: start;
    }

    .notification-splitter {
        height: calc(100vh - 50px);
    }



    .chat-scroll-area {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }


    .chat-scroll-area {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }


    .message-groups-scroll {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 6px;
        gap: 10px;
    }


    .login-wrapper {
        background-image: none;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        min-height: calc(100vh - 65px);
        padding-top: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    .logo-top-left {
        background-image: url('/Content/Images/logo_mobile.jpg');
        position: relative;
        top: 0;
        left: 0;
        width: 300px;
        height: 91px;
        margin-bottom: 20px;
        background-position: center;
    }

    .login-form-top-right {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 95%;
        max-width: 400px;
        margin: 0 auto;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

        .login-form-top-right form {
            margin: 0 auto;
        }

}


.footer-bottom-left {
    position: absolute;
    bottom: 20px;
    left: 30px;
    color: #333;
    background-color: rgba(255, 255, 255);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
}

.register-scroll-wrapper {
    height: 75vh; /*  Or a specific height like 600px */
    overflow-y: auto;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
}

hr.separator {
    width: 98%;
    margin: 1px auto;
    border-top: 1px solid #999999;
}


/* pill look */
.tag-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    height: 32px;
    border-radius: 999px; /* fully rounded pill */
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

    /* subtle hover raise */
    .tag-pill-button:hover {
        transform: translateY(-1px);
        background: rgba(0,0,0,0.02);
    }

    /* focus only shows a small outline, not the 'active' highlight */
    .tag-pill-button:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(100,150,220,0.12);
    }

    /* persistent highlight when tag exists in TaskTags */
    .tag-pill-button.selected-tag {
        background: #e8f4ff; /* light blue background */
        border-color: #7fb9ff; /* blue border */
        box-shadow: 0 2px 6px rgba(127,185,255,0.12);
        color: #0b577f; /* darker blue text for contrast */
    }

        /* keep keyboard accessibility (selected + focus) */
        .tag-pill-button.selected-tag:focus {
            box-shadow: 0 0 0 4px rgba(127,185,255,0.18);
        }

    /* small active feedback on press */
    .tag-pill-button:active {
        transform: translateY(0);
        opacity: 0.95;
    }


/* Minimal helper so very long filenames wrap instead of creating horizontal overflow.
     Remove this block entirely if you want *exactly* default browser behavior. */
.file-name-wrap {
    white-space: normal; /* allow wrapping */
    word-break: break-word; /* break long tokens if needed */
}

/* ============================================
   Syncfusion Chat — Final Unified CSS (copy-paste)
   Place in global CSS loaded AFTER Syncfusion CSS
   ============================================ */

/* -----------------------
   Base wrapper for our custom message items
   ----------------------- */
.e-chat .e-message-wrapper .custom-message-item,
.e-chat .custom-message-item,
.custom-message-item {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    margin: 2px 0 !important; /* compact vertical spacing */
    box-sizing: border-box !important;
}

    /* -----------------------
   Alignment: left = other users, right = logged-in user
   ----------------------- */
    .e-chat .e-message-wrapper .custom-message-item.custom-them,
    .custom-message-item.custom-them {
        justify-content: flex-start !important;
    }

    .e-chat .e-message-wrapper .custom-message-item.custom-me,
    .custom-message-item.custom-me {
        justify-content: flex-end !important;
    }

/* -----------------------
   Message wrapper area — ensure footer doesn't overlay messages
   ----------------------- */
.e-chat .e-message-wrapper {
    /* reserve space for the footer (adjust 90px if your footer height differs) */
    padding-bottom: 92px !important;
    box-sizing: border-box !important;
}

/* -----------------------
   Bubble skeleton — no neutral background; color comes from msg-status-*
   ----------------------- */
.e-chat .custom-message-bubble,
.custom-message-bubble {
    max-width: 95% !important; /* wide bubbles */
    padding: 8px 12px !important;
    margin: 0 6px !important; /* minimal horizontal gap */
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    line-height: 1.35 !important;
    color: inherit !important; /* text color controlled by msg-status */
    background: transparent !important; /* no neutral background; only msg-status applies */
}

/* -----------------------
   Sender (me) bubble shape and placement
   ----------------------- */
.e-chat .custom-message-item.custom-me .custom-message-bubble,
.custom-message-item.custom-me .custom-message-bubble {
    text-align: right !important;
    border-radius: 12px 12px 12px 4px !important;
    margin-left: auto !important;
    margin-right: 6px !important;
}

/* -----------------------
   Receiver (other) bubble shape and placement
   ----------------------- */
.e-chat .custom-message-item.custom-them .custom-message-bubble,
.custom-message-item.custom-them .custom-message-bubble {
    text-align: left !important;
    border-radius: 12px 12px 4px 12px !important;
    margin-right: auto !important;
    margin-left: 6px !important;
}

/* -----------------------
   Ensure Syncfusion's inner .e-text does not interfere
   ----------------------- */
.e-chat .e-text,
.e-text {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* -----------------------
   Collapse empty blocks inserted by HTML editors (avoid blank lines)
   ----------------------- */
.e-chat .custom-text > div:empty,
.custom-text > div:empty,
.e-chat .custom-text > p:empty,
.custom-text > p:empty,
.e-chat .custom-text > br,
.custom-text > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -----------------------
   Message text formatting
   ----------------------- */
.e-chat .custom-text,
.custom-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    white-space: pre-wrap !important;
    display: block !important;
    word-break: break-word !important;
}

/* -----------------------
   Meta row (author + timestamp) — tighten spacing
   ----------------------- */

    .custom-text p {
        margin: 0 !important;
    }


.e-chat .custom-meta,
.custom-meta {
    font-size: 0.82rem !important;
    margin-bottom: 0 !important; /* remove big gap before text */
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.e-chat .custom-time,
.custom-time {
    font-size: 0.75rem !important;
    color: #666 !important;
    opacity: 0.85 !important;
}

/* -----------------------
   Status line — ensure visible and block-level
   ----------------------- */
.e-chat .custom-msg-status,
.custom-msg-status {
    display: block !important; /* ensure it occupies line */
    margin-top: 4px !important;
    font-size: 0.75rem !important;
    color: #333 !important;
    opacity: 0.95 !important;
    text-align: right !important;
}

/* -----------------------
   Make sure last message has extra bottom margin so status not obscured
   ----------------------- */
.e-chat .e-message-wrapper .custom-message-item:last-child .custom-message-bubble,
.custom-message-item:last-child .custom-message-bubble {
    margin-bottom: 18px !important;
}

/* -----------------------
   MessageType backgrounds — ONLY these apply (Alert / Info / Warning)
   ----------------------- */

/* ALERT */
.e-chat .custom-message-item.msg-status-alert .custom-message-bubble,
.custom-message-item.msg-status-alert .custom-message-bubble {
    background-color: #fff3cd !important; /* light yellow */
    color: #856404 !important;
}

/* INFO */
.e-chat .custom-message-item.msg-status-info .custom-message-bubble,
.custom-message-item.msg-status-info .custom-message-bubble {
    background-color: #d1ecf1 !important; /* light blue */
    color: #0c5460 !important;
}

/* WARNING */
.e-chat .custom-message-item.msg-status-warning .custom-message-bubble,
.custom-message-item.msg-status-warning .custom-message-bubble {
    background-color: #f8d7da !important; /* light red/pink */
    color: #721c24 !important;
}

/* -----------------------
   Hover effect
   ----------------------- */
.e-chat .custom-message-bubble:hover,
.custom-message-bubble:hover {
    transform: scale(1.01);
    transition: transform 0.12s ease-in-out;
}

/* -----------------------
   Responsive tweak for narrow screens
   ----------------------- */
@media (max-width: 480px) {
    .e-chat .custom-message-bubble,
    .custom-message-bubble {
        max-width: 85% !important;
        padding: 8px 10px !important;
    }
}
/* ---------- FORCE modal to viewport (high specificity + !important) ---------- */
.modal.fade.show.full-screen-modal2,
.full-screen-modal2.modal.fade.show {
    position: fixed !important; /* fixed to viewport */
    inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    z-index: 99999 !important; /* above almost everything */
    overflow: auto !important;
    background-color: rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
}

/* Force the modal dialog to occupy the viewport area */
.modal-full-width2,
.modal-dialog.modal-full-width2 {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: stretch !important; /* allow header/body to fill vertically */
}

/* Ensure modal-content fills dialog */
.modal-content {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Keep header visible and pinned to top of modal */
.modal-header {
    flex: 0 0 auto !important;
    z-index: 100000 !important;
}

/* Modal body should scroll internally if content larger than viewport */
.modal-body {
    flex: 1 1 auto !important;
    overflow: auto !important;
}

/* Ensure all interactive elements inside modal receive pointer events */
.full-screen-modal2 button,
.full-screen-modal2 input,
.full-screen-modal2 select,
.full-screen-modal2 textarea,
.full-screen-modal2 .rz-button {
    pointer-events: auto !important;
}

    /* Ensure close button shows above everything and is clickable */
    .full-screen-modal2 .close,
    .full-screen-modal2 .rz-button[title="Close"],
    .full-screen-modal2 .rz-button[title="Save Image"],
    .full-screen-modal2 .help-button {
        position: relative !important;
        z-index: 100001 !important;
    }

 

 

/* ---------- Optional: if you want top-aligned (not vertically centered) body content ----------
   Remove align-items:center from .modal-full-width2 and force content to start at top:
*/
.modal-full-width2.align-top,
.modal-full-width2.top-aligned {
    align-items: flex-start !important;
}


/* Submenu container */
/* Submenu background */
.rz-menu .rz-navigation-menu .rz-navigation-item > .rz-navigation-menu {
    background-color: #f3f6f9; /* subtle light grey */
    padding: 6px 0;
    border-radius: 6px;
}

    /* Submenu items spacing */
    .rz-menu .rz-navigation-menu .rz-navigation-item > .rz-navigation-menu
    .rz-navigation-item-link {
        padding-left: 22px;
    }

.kpi-card {
    text-align: center;
    padding: 12px;
    /* border */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    /* soft shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* spacing between cards */
    margin: 10px;
    /* optional polish */
    background-color: #ffffff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    /* subtle hover effect */
    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    }

.kpi-row {
    margin-bottom: 18px;
}

.kpi-title {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: #2E2996;
    padding: 4px 8px; /* optional — improves readability */
}

.kpi-value {
    font-size: 28px;
    font-weight: bold;
}

.kpi-card.risk {
    background: #ffe5e5;
}

.kpi-card.warning {
    background: #fff5cc;
}

.kpi-card.ok {
    background: #e8f8f0;
}
/* ================= TAB CONTAINER ================= */

.mdi-tabs {
    display: flex;
    align-items: flex-end;
    background: #f1f3f4;
    padding: 0 6px;
    border-bottom: 1px solid #d0d0d0;
    overflow-x: auto;
    flex-shrink: 0;
    
}

/* ================= INDIVIDUAL TAB ================= */

.mdi-tab {
    display: flex;
    align-items: center;
    background: #e4e6e8;
    margin-right: 4px;
    padding: 6px 14px;
    border: 1px solid #c9c9c9;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
    min-width: 120px;
    max-width: 220px;
   
}

    /* Hover effect */
    .mdi-tab:hover {
        background: #dcdcdc;
    }

    /* ================= ACTIVE TAB ================= */

    .mdi-tab.active {
        background: white;
        border: 1px solid #c9c9c9;
        border-bottom: 1px solid white;
        z-index: 2;
        font-weight: 500;
        cursor: default;
    }

/* ================= TITLE ================= */

.mdi-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= CLOSE BUTTON ================= */

.mdi-close {
    margin-left: 10px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

    .mdi-close:hover {
        background: #d9534f;
        color: white;
    }

/* ================= CONTENT AREA ================= */

.mdi-content {
    background: white;
    padding: 0px;
    flex: 1;
    overflow: auto;
    min-width: 0; /* VERY IMPORTANT for flex layouts */
}

/* ================= PINNING TABS ================= */
.mdi-pin {
    margin-left: 8px;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.6;
    transition: 0.2s;
}

    .mdi-pin:hover {
        opacity: 1;
        transform: scale(1.1);
    }

.pg-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.pg-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    animation: pg-toast-slide 0.25s ease-out;
    pointer-events: auto;
}

.pg-toast-logo {
    height: 18px;
}

.pg-toast-title {
    font-weight: 600;
    font-size: 13px;
}

.pg-toast-text {
    font-size: 13px;
}

.pg-toast.info {
    border-left: 4px solid #2196F3;
}

.pg-toast.success {
    border-left: 4px solid #4CAF50;
}

.pg-toast.warning {
    border-left: 4px solid #FFC107;
}

.pg-toast.error {
    border-left: 4px solid #F44336;
}

@keyframes pg-toast-slide {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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


.card-table {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
}

.card-row {
    display: table-row;
    line-height: 1.1;
}

.card-cell {
    display: table-cell;
    padding: 2px 4px; /* reduced from 4px */
    line-height: 1.2; /* tighter text */
    padding-left: 6px !important;
}

.card-header {
    font-weight: bold;
}


/* Reduce gap above tags */
.e-card-custom-footer {
    margin-top: 2px;
}

.rz-navigation-item-wrapper {
    padding: 2px 6px !important;
}

.rz-navigation-item-link {
    padding: 2px 6px !important;
    min-height: unset !important;
    line-height: 1.2 !important;
}

.display-container {
    padding: 20px;
    font-family: Arial, sans-serif;
    background: #f5f7fa;
    height: 100vh;
    font-size: 1.2vw; /* scales with screen */
}


.task-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


.no-data {
    font-size: 22px;
    text-align: center;
    margin-top: 40px;
    color: #999;
}

.task-card.highlight {
    background: #eafaf1;
    border-left: 6px solid #28b463;
}


/* vertical tab display for customization and permissions */

/* Only affects your tab area */
.tabs-wrapper {
    height: 100%; /* 👈 control height here */
    display: flex;
}

/* Layout */
.vertical-tabs-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left menu */
.vertical-tabs-menu {
    width: fit-content;
    border-right: 1px solid #ddd;
    padding: 10px;
}

    .vertical-tabs-menu .rz-stack {
        align-items: flex-start;
    }

/* Right content scroll */
.vertical-tabs-content {
    flex: 1;
    padding: 5px;
    overflow-y: auto; /* 👈 ONLY this scrolls */
    overflow-x: auto;
    height: 100%;
}

.filter-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 15px;
    background-color: #fafafa;
}
/* Container controls scroll */
.grid-container {
    width: 100%;
    overflow-x: auto; /* ✅ horizontal scroll inside */
    overflow-y: hidden;
}

 

.dashboard-main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* contain layout */
}

.grid-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* ✅ correct */
}

/* Sidebar container */
.vertical-tabs-menu {
    width: fit-content;
    min-width: max-content;
    border-right: 1px solid #ddd;
    padding: 10px;
}

    /* All buttons */
    .vertical-tabs-menu .tab-btn {
        width: auto !important; /* 🔥 key fix */
        display: inline-flex; /* prevent full stretch */
        justify-content: flex-start;
        white-space: nowrap;
    }

/* Notification wrapper */
.tab-btn-wrapper {
    position: relative;
    display: inline-block;
}

/* Badge */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    min-width: 18px;
    text-align: center;
    font-weight: bold;
}

/* Cart count badge */
.button-notification-badge {
    position: absolute;
    top: 4px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50px;
    background-color: red;
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


.rz-datatable-table {
    table-layout: fixed !important;
}

/* 🔥 Lock ONLY frozen action columns */
.rz-datagrid .frozen-action-col {
    flex: 0 0 auto !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 140px !important;
}

.mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 12px);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--rz-base-50);
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 1000;
}

.bottom-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #444;
    width: auto;
    min-width: 70px;
    position: relative;
    justify-content: center;
}

    .bottom-btn .material-icons {
        font-size: 22px;
        margin-bottom: 2px;
    }

.mobile-home-container {
    padding: 15px;
}

.mobile-header {
    margin-bottom: 20px;
}

    .mobile-header h3 {
        margin: 0;
        font-size: 22px;
    }

    .mobile-header p {
        margin: 0;
        color: #777;
    }

.mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.mobile-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: 0.2s;
}

    .mobile-card:active {
        transform: scale(0.97);
    }

.mobile-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

 

.mobile-product-card {
    border-radius: 16px;
    padding: 12px;
    background: white;
    border: 1px solid #eeeeee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.product-image {
    width: 95px;
    height: 95px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background-color: white;
    flex-shrink: 0;
}

.product-image-placeholder {
    width: 95px;
    height: 95px;
    border-radius: 12px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bdbdbd;
    font-size: 38px;
    flex-shrink: 0;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.product-code {
    font-size: 12px;
    color: #757575;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: #198754;
}

.product-button {
    width: 100%;
    border-radius: 10px;
}

.search-box-container {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    padding-top: 8px;
    padding-bottom: 8px;
}

.search-box {
    width: 100%;
    height: 42px;
    border-radius: 12px;
}

.empty-products {
    text-align: center;
    padding-top: 60px;
    color: #9e9e9e;
}

.empty-products-icon {
    font-size: 60px;
}

.empty-products-text {
    margin-top: 10px;
}

.product-action-area {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
    color: #198754;
    min-width: 90px;
    white-space: nowrap;
}

.product-price-placeholder {
    min-width: 90px;
}

.product-button {
    flex: 1;
    border-radius: 10px;
}

.default-company-box {
    padding: 10px 14px;
    border: 2px solid #ffc107;
    border-radius: 12px;
    background-color: #fff8e1;
    margin-top: 6px;
    margin-bottom: 6px;
}

.default-highlighter-box {
    padding: 10px 14px;
    border: 2px solid #ffc107;
    border-radius: 12px;
    background-color: #fff8e1;
    margin-top: 6px;
    margin-bottom: 6px;
}

.default-sensitiveinfo-box {
    padding: 10px 14px;
    border: 2px solid #ffc107;
    border-radius: 12px;
    background-color: #fff8e1;
    margin-top: 6px;
    margin-bottom: 6px;
}

.product-issue-box {
    padding: 10px 14px;
    border: 2px solid #ffc107;
    border-radius: 12px;
    background-color: #fff8e1;
    margin-top: 6px;
    margin-bottom: 6px;
}

.product-produced-box {
    padding: 10px 14px;
    border: 2px solid #64b5f6;
    border-radius: 12px;
    background-color: #e3f2fd;
    margin-top: 6px;
    margin-bottom: 6px;
}



.product-selection-box {
    padding: 10px 14px;
    border: 2px solid #ffc107;
    border-radius: 12px;
    background-color: #fff8e1;
    margin-top: 6px;
    margin-bottom: 6px;
}

.bottom-slide-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 12px));
    display: flex;
    justify-content: center;
    z-index: 5000;
}



.horizontal-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center !Important;
}


.menu-item-btn {
    flex: 1;
    border: none;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}


    .menu-item-btn .material-icons {
        font-size: 13px;
    }

    .menu-item-btn:hover {
        background: #eeeeee;
    }


.popup-inner-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: white;
    padding: 4px;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    width: calc(100% - 20px);
    max-width: 420px;
}

.card-date-wrapper .rz-datepicker input {
    border-radius: 0 20px 20px 0 !important;
    border-left: none !important;
    height: 36px;
}

.card-date-wrapper .rz-datepicker {
    border-radius: 0 20px 20px 0 !important;
    overflow: hidden;
}

.address-card-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.address-card {
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 14px;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

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

.address-name {
    font-size: 18px;
    font-weight: 600;
}

.default-badge {
    background: #28a745;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.address-phone {
    margin-bottom: 10px;
    font-size: 14px;
}

.address-body {
    line-height: 1.5;
    font-size: 15px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ddd;
}

.address-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
}

/*TaxVouchersMobilePage*/



.mobile-voucher-page {
    background: white;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.product-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.product-price {
    margin-bottom: 10px;
}

.qty-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.line-total {
    font-weight: 600;
    margin-bottom: 10px;
}

.remove-btn {
    width: 100%;
}

.mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.footer-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.draft-btn,
.submit-btn {
    flex: 1;
    height: 45px;
}

/* PAGE */

.cart-page {
    background: #f5f7fb;
    min-height: 100vh;
    padding: 14px;
  padding-bottom: 70px; 
    /*padding-bottom: calc(70px + env(safe-area-inset-bottom));*/
}

 


/* HEADER */

.cart-header-card {
    border-radius: 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: white;
    border: none;
    box-shadow: 0 8px 25px rgba(37,99,235,.25);
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-title {
    font-size: 24px;
    font-weight: 700;
}

.cart-subtitle {
    opacity: .8;
    margin-top: 4px;
    font-size: 13px;
}

.cart-total-chip {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
}


/* SHIPPING */

.shipping-card {
    border-radius: 22px;
    margin-bottom: 18px;
    border: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
}


/* PRODUCTS */

.products-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 220px;
}

.product-card {
    border-radius: 24px;
    border: none;
    background: white;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    overflow: hidden;
    transition: .2s;
}

    .product-card:hover {
        transform: translateY(-2px);
    }

.product-top-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.product-info {
    flex: 1;
}

.product-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
}

.product-price {
    margin-top: 8px;
    color: #2563eb;
    font-size: 20px;
    font-weight: 700;
}


/* DELETE */

.delete-icon-btn {
    border: none;
    background: #fee2e2;
    color: #dc2626;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* QTY */

.qty-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 8px 10px;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.qty-value {
    min-width: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}


/* TOTAL */

.line-total-box {
    text-align: right;
}

.line-total-label {
    font-size: 12px;
    color: #6b7280;
}

.line-total-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

/* PAGE */

.cart-layout {
    height:  100vh;
    background: #f5f7fb;
   
}

.cart-body {
    overflow-y: auto;
}


/* MAIN PAGE */

.cart-page {
    padding: 14px;
    padding-bottom: 30px;
}


/* HEADER */

.cart-header-card {
    border-radius: 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: white;
    border: none;
    box-shadow: 0 8px 25px rgba(37,99,235,.25);
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.cart-title {
    font-size: 24px;
    font-weight: 700;
}

.cart-subtitle {
    opacity: .85;
    margin-top: 4px;
    font-size: 13px;
}

.cart-total-chip {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
}


/* SHIPPING */

.shipping-card {
    border-radius: 22px;
    margin-bottom: 18px;
    border: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
}


/* PRODUCTS */

.products-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 120px;
}

.product-card {
    border-radius: 24px;
    border: none;
    background: white;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    overflow: hidden;
    transition: .2s;
}

    .product-card:hover {
        transform: translateY(-2px);
    }

.product-top-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.product-info {
    flex: 1;
}

.product-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
}

.product-price {
    margin-top: 8px;
    color: #2563eb;
    font-size: 20px;
    font-weight: 700;
}


/* DELETE */

.delete-icon-btn {
    border: none;
    background: #fee2e2;
    color: #dc2626;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* QTY */

.qty-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 8px 10px;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.qty-value {
    min-width: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}


/* TOTAL */

.line-total-box {
    text-align: right;
}

.line-total-label {
    font-size: 12px;
    color: #6b7280;
}

.line-total-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}


/* FOOTER */

.bottom-checkout-bar-desktop {
    background: white;
    padding: 16px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 -6px 30px rgba(0,0,0,.08);
    border: none;
    margin-bottom: 60px;
}



.bottom-checkout-bar {
    background: white;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom) + 60px);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    box-shadow: 0 -6px 30px rgba(0,0,0,.08);
    border: none;
    margin-bottom: 60px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summary-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

.total-line {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.checkout-btn {
    width: 100%;
    height: 54px;
    border-radius: 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border: none !important;
}
 

.message-groups-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    gap: 10px;
}

.notification-splitter {
    height: calc(100vh - 50px);
}

.message-group-card {
    min-width: 360px;
    max-width: 360px;
    flex-shrink: 0;
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 10px;
    scroll-snap-align: start;
}

.message-group-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.message-group-title {
    font-weight: 600;
    font-size: 1rem;
}

.message-group-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.task-type-container {
    padding: 12px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.task-card {
    padding: 14px;
    border-radius: 16px;
    margin-bottom: 12px;
}

.task-card-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
}

.task-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.task-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.task-title {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.task-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.badge-button-container {
    position: relative;
    width: 100%;
}

.task-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: white;
}

.task-cards-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px;
}

.modern-task-card {
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border: none;
    background: white;
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.task-id {
    font-size: 0.9rem;
    color: gray;
    font-weight: 600;
}

.task-subject {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #222;
}

.task-company,
.task-contact,
.task-phone,
.task-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 0.92rem;
}

.task-company {
    margin-bottom: 10px;
}

.task-contact-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.task-date {
    margin-bottom: 14px;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.task-tag {
    background: #f1f3f5;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: #444;
}

.task-card-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
    padding-top: 14px;
}

    .task-card-footer .rz-button {
        flex: 1;
    }



.opening-difference-highlight {
    background-color: #fff3cd !important;
    border: 2px solid #ffc107 !important;
    font-weight: bold;
}


/* CSS isolation – applies to markup written in YieldAnalysis.razor */
.ya {
    --ya-ok: var(--rz-success, #1aa37a);
    --ya-bad: var(--rz-danger, #d64545);
    --ya-muted: var(--rz-text-secondary-color, #6c757d);
    --ya-line: var(--rz-base-300, #dee2e6);
}

.kpi {
    border-left: 4px solid var(--rz-primary, #2a78d6);
    height: 100%;
}

    .kpi.ok {
        border-left-color: var(--ya-ok);
    }

    .kpi.bad {
        border-left-color: var(--ya-bad);
    }

    .kpi .label {
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ya-muted);
    }

    .kpi .value {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.2;
    }

        .kpi .value small {
            font-size: .9rem;
            font-weight: 400;
            color: var(--ya-muted);
        }

.clickable {
    cursor: pointer;
}

.sub {
    font-size: .8rem;
    color: var(--ya-muted);
}

.ok-text {
    color: var(--ya-ok);
}

.bad-text {
    color: var(--ya-bad);
    font-weight: 600;
}

.flow {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

    .flow .stage {
        flex: 1 1 220px;
        border: 1px solid var(--ya-line);
        border-radius: 6px;
        padding: .6rem .75rem;
    }

    .flow .name {
        font-weight: 600;
    }

    .flow .big {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .flow .arrow {
        align-self: center;
        font-size: 1.4rem;
        color: var(--ya-muted);
    }

.ya-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

    .ya-table th, .ya-table td {
        padding: .3rem .45rem;
        border-bottom: 1px solid var(--ya-line);
        vertical-align: middle;
    }

    .ya-table thead th {
        text-align: left;
        background: var(--rz-base-100, #f6f7f9);
    }

    .ya-table .num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .ya-table tfoot td, .ya-table tr.total td {
        font-weight: 600;
    }

    .ya-table tr.out td {
        background: rgba(214, 69, 69, .10);
        color: var(--ya-bad);
        font-weight: 600;
    }

    .ya-table.stage {
        border: 1px solid var(--ya-line);
    }

.float-right {
    float: right;
    font-weight: 400;
}

.bar {
    height: 8px;
    border-radius: 4px;
    background: var(--rz-primary, #2a78d6);
}

.selected-batch {
    border: 2px solid var(--rz-primary, #2a78d6);
}

.flags {
    margin: 0;
    padding-left: 1.2rem;
}

.cell-flag {
    display: inline-block;
    min-width: 100%;
    padding: 0 .3rem;
    border-radius: 3px;
    background: rgba(214, 69, 69, .14);
    color: var(--ya-bad);
    font-weight: 600;
}

/* rows are rendered by RadzenDataGrid, so they need ::deep */
::deep .row-incomplete > td {
    background: var(--rz-base-200, #eceff3) !important;
    color: var(--ya-muted);
}

::deep .row-selected > td {
    background: rgba(42, 120, 214, .14) !important;
}


/* ---------------------------------------------------------------
   Dashboard panels (replaces the Syncfusion DashboardLayout).
   4 columns on a wide screen, 2 on a tablet, 1 on a phone.
   Panel colours come from the .panel1 ... .panel8 rules above.
   --------------------------------------------------------------- */
.pg-dash-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
}

.pg-dash-grid .e-panel {
    aspect-ratio: var(--pg-dash-ratio, 1);
    min-height: 200px;
    display: flex;
}

.pg-dash-grid .e-panel-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.pg-dash-grid .e-panel-header {
    flex: 0 0 auto;
    min-height: 36px;
}

.pg-dash-grid .e-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .pg-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .pg-dash-grid { grid-template-columns: 1fr; }
    .pg-dash-grid .e-panel { aspect-ratio: auto; }
}