/*---For visual only ----*/
body * {
    outline: 0px solid rgba(255, 0, 0, 0.3);
}

.link-style {
    color: #1D2BDC !important;
    text-decoration: underline !important;
}

    .link-style:hover {
        color: #1600AC !important;
        cursor: pointer;
    }


/*global hide UI*/
.elem-hidden{
    display: none;
}

.custom-header {
    background-color: #4CAF50;
    color: white; /* Text color */
}

.btn-app-version {
    width: 38px;
    height: 38px;
}
    
.delete-confirmation-logo {
    width: 60px;
    height: 60px;
}

.hr-other-maintenance {
    border: 2px solid #555;
}

/*disabled pointer styling*/
.pointer-disable {
    pointer-events: none;
    opacity: 0.5;
}

/*header text styling*/
.header-fn {
    margin: 0;
}

.checkbox-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.checkbox-fill-red:checked {
    background-color: #E53935 !important;
    border-color: #E53935 !important;
}

.required-label::after {
    content: " *";
    color: #dc3545; /* Bootstrap danger */
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-multiselect-add {
    --bs-btn-padding-y: 0.05rem !important;
    --bs-btn-padding-x: 0.5rem !important;
    --bs-btn-font-size: 0.85rem !important;
    --bs-btn-border-radius: 0.25rem !important;
}

.btn-link {
    color: #000;
}
    html {
    position: relative;
    min-height: 100%;
}


body {
    margin-bottom: 60px;
}

/* override for form labels */
.form-group > label {
    color: var(--bs-gray-500) !important;
}

.k-grid .k-grid-search {
    display: flex;
    margin-left: auto;
    margin-right: 0;
}

.k-form-select {
    line-height: 1.5 !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
}

.k-table-td {
    border-width: 0 !important;
}

.k-table-custom-ondialog {
    z-index: 99999 !important;
}

/* ==========================================
   Status Badges
========================================== */
.status-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    min-width: unset;
    width: auto;
    white-space: nowrap;
}

.status-draft {
    background-color: #e5e5e5;
    color: #555;
}

.status-pending {
    background-color: #fff5cc;
    color: #c29500;
}

.status-approved {
    background-color: #D6F5DD;
    color: #0E8A2D;
}

.status-regular {
    background-color: #d4f8e8;
    color: #1a7f5a;
}


.status-cancelled {
    background-color: #E5E7EB; /* light gray */
    color: #374151; /* dark gray */
}

.status-rejected {
    background-color: #F9D2D7;
    color: #CB1228;
}


/*---Breadcrumb Property --------------*/
.breadcrumb {
    font-size: smaller;
}

#breadcrumbDisplay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#breadcrumbDisplay span {
    vertical-align: middle;
}

.breadcrumb-text {
    color: #555; /* faded color */
    transition: color 0.3s ease; /* smooth fade */
}

.breadcrumb-text-bold {
    font-weight: bold;
    color: #000; /* full opacity / normal color */
}

.breadcrumb-link {
    color: #555; /* faded */
    text-decoration: none; /* remove underline */
    font-weight: normal; /* normal weight */
    transition: color 0.3s, font-weight 0.3s; /* smooth hover effect */
}

.breadcrumb-link:hover {
    color: #000; /* black on hover */
    font-weight: bold; /* bold on hover */
}

#bcHomeLink span.material-symbols-outlined {
    color: #000; /* black */
    font-size: 24px; /* optional, keeps it bigger */
    vertical-align: middle;
}
/*-------------------------------------*/

/* Align buttons to the right */
.k-window .k-actions.k-window-actions {
    justify-content: flex-end !important;
    gap: 8px; /* spacing between buttons */
    margin: 0 !important; /* Override incorrect rendering of kendo window actions footer */
}

/* Put Cancel before Save */
.k-window .k-actions.k-window-actions [ref-cancel-button] {
    order: 1;
}

.k-window .k-actions.k-window-actions [ref-update-button] {
    order: 2;
}


.user-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    margin-right: 5px;
}

.user-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
}

/* force min-width = sum of declared column widths */
#gridUsers .k-grid-content table,
#gridUsers .k-grid-header table {
    min-width: 950px; /* 120 + 180 + 150 + 250 + 50 = 750, give buffer */
}

.k-edit-form-container {
    min-width: 700px !important;
    width: 700px !important;
}

.login-logo {
    background-image: url(/images/logos/logo_mold_720x720.png);
    width: 100%;
    height: 80px;
    background-size: 80px 80px;
    background-position: center center;
    vertical-align: middle;
    display: block;
    background-repeat: no-repeat;
}

/* Theme Variables -------------------------------*/
:root {
    --primary-color: #E53935;
    --primary-hover: #d32f2f;
    --danger-color: #DB140A;
    --cancel-border: #D9D9D9;
}

/* Search Box */
#searchBox {
    border-radius: 25px;
    padding: 8px 15px; /* reduced height */
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    font-size: 14px;
    height: 38px; /* fixed height for alignment */
}


/* Buttons */
.btn-background {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 25px !important;
    padding: 8px 20px; /* match search box height */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    height: 38px; /* match search box height */
    line-height: 1.2; /* keeps text centered */
}

@media (min-width: 992px) {
    .btn-background {
        border-radius: 6px !important;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px; /* horizontal padding only */
        line-height: normal;
    }
}

.btn-background:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.btn-modal-save {
    background-color: var(--danger-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

.btn-modal-save:hover {
    background-color: #b50f08 !important;
}


.btn-modal-save,
.btn-modal-cancel {
    height: 40px;
}

.btn-modal-save,
.btn-modal-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5; /* same height baseline */
    vertical-align: middle;
}

.btn-modal-cancel {
    background-color: #fff !important;
    color: var(--danger-color) !important;
    border: 1.8px solid #D9D9D9 !important;
    border-radius: 4px;
    padding: 8px 20px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}


.btn-modal-cancel:hover {
    background-color: #fcebea !important;
}

.btn-create, .btn-reject, .btn-approve, .btn-revision {
    background-color: var(--danger-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    width: 152px; /*!important;*/
    height: 32px !important; /* ✅ fixed height */
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1;
    padding: 0 !important;
    transition: background-color 0.2s ease-in-out;
    display: inline-flex; /*  aligns icon/text center properly */
    align-items: center;
    justify-content: center;
    gap: 6px; /* space between icon and text */
}

.btn-print {
    background-color: var(--danger-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    width: 100px; /*!important;*/
    height: 32px !important; /* ✅ fixed height */
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1;
    padding: 0 !important;
    transition: background-color 0.2s ease-in-out;
    display: inline-flex; /*  aligns icon/text center properly */
    align-items: center;
    justify-content: center;
    gap: 6px; /* space between icon and text */
}

.btn-add-mini {
    background-color: var(--danger-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    width: 100%;
    height: 34px !important; /* ✅ fixed height */
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1;
    transition: background-color 0.2s ease-in-out;
    display: inline-flex; /*  aligns icon/text center properly */
    align-items: center;
    justify-content: center;
    gap: 6px; /* space between icon and text */
}

.btn-custom-create {
    background-color: var(--danger-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    width: 210px; /*!important;*/
    height: 32px !important; /* ✅ fixed height */
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1;
    padding: 0 !important;
    transition: background-color 0.2s ease-in-out;
    display: inline-flex; /*  aligns icon/text center properly */
    align-items: center;
    justify-content: center;
    gap: 6px; /* space between icon and text */
}


.btn-save {
    background-color: var(--danger-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    width: 120px !important;
    height: 32px !important; /* ✅ fixed height */
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1;
    padding: 0 !important;
    transition: background-color 0.2s ease-in-out;
    display: inline-flex; /* ✅ aligns icon/text center properly */
    align-items: center;
    justify-content: center;
    gap: 6px; /* space between icon and text */
}

  /*.btn-save:hover 
  {
      background-color: #f2f2f2 !important;*/ /* light gray hover */
      /*color: #333333 !important;
  }*/

    .btn-save:hover:hover,
    .btn-custom-create,
    .btn-create:hover {
        background-color: #BB221B !important;
        border-color: #BB221B !important;
        color: #fff !important; /* White text to match the darker red */
    }


/* Back Button */
.btn-back {
    background-color: #fff !important;
    color: var(--danger-color) !important;
    border: 1.8px solid var(--danger-color) !important;
    border-radius: 50px !important;
    width: 120px;
    height: 38px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .btn-back:hover {
     background-color: #fcebea !important;
 }

/* CANCEL BUTTON */
.btn-cancel {
    background-color: #FFFFFF !important;
    color: #666666 !important;
    border: 1.8px solid #D9D9D9 !important;
    border-radius: 8px !important;
    width: 120px !important;
    height: 32px; 
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

 .btn-cancel:hover {
     background-color: #f5f5f5 !important; /*  subtle gray hover */
     color: #333333 !important;
     border-color: #c9c9c9 !important; /* slightly darker hover border */
 }


.btn-save, .btn-cancel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Transparent Add Button with red border */
.btn-modify,
.btn-add {
    display: none;
    border: 1px solid var(--danger-color) !important; /* Bootstrap red */
    background-color: transparent;
    color: var(--danger-color);
    font-weight: 500;
    border-radius: 8px;
    width: 120px; /* same width for consistency */
    height: 32px; /* same height */
    padding: 4px 16px;
    transition: all 0.2s ease-in-out;
}

.btn-add-employee {
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    border: 1px solid var(--danger-color) !important;
    background-color: transparent;
    color: var(--danger-color);
    font-weight: 500;
    border-radius: 8px;
    width: 165px;
    height: 32px;
    padding: 0; /* Remove extra padding */
    transition: all 0.2s ease-in-out;
}


.btn-delete, btn-cancel {
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    border: 1px solid var(--danger-color) !important;
    background-color: transparent;
    color: var(--danger-color);
    font-weight: 500;
    border-radius: 8px;
    width: 120px;
    height: 32px;
    padding: 0; /* Remove extra padding */
    transition: all 0.2s ease-in-out;
}


    .btn-add:hover,
    .btn-delete:hover,
    .btn-cancel:hover,
    .btn-add-employee:hover,
    .btn-modify:hover {
        background-color: var(--danger-color);
        color: white;
    }



/* ================================
   LARGE SCREENS (≥1200px)
================================ */
@media (min-width: 1200px) {
    .btn-save,
    .btn-cancel {
        width: 125px;
        height: 35px;
        font-size: 1rem;
    }
}

/* ================================
   MEDIUM SCREENS (768px–1199px)
================================ */
@media (max-width: 1199px) and (min-width: 768px) {
    .btn-save,
    .btn-cancel {
        width: 120px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ================================
   SMALL SCREENS (≤767px)
================================ */
@media (max-width: 767px) {
    .btn-save,
    .btn-cancel {
        width: 100%;
        height: 38px;
        font-size: 1rem;
    }

}


/* ==========================================================
   Kendo Grid Pager — Full Custom Chevron Arrows
   ========================================================== */

/* ------------------ Kendo Pager Styling ------------------ */
/* ------------------ Pager Container ------------------ */
.k-grid-pager, .k-pager-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 !important;
}

/* Hide extra pager info and page sizes */
.k-pager-info, .k-pager-sizes, .k-pager-refresh {
    display: none !important;
}

/* ------------------ Pager Numbers ------------------ */
.k-pager-numbers .k-link {
    border-radius: 6px !important;
    margin: 0 3px;
    color: #000000 !important; /* default text color when no background */
    background-color: transparent; /* default background */
    padding: 5px 9px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

    /* Selected page */
    .k-pager-numbers .k-link.k-state-selected {
        background-color: #F04E42 !important; /* active page background */
        color: #FFFFFF !important; /* active page text color */
        font-weight: bold;
    }

    /* Hover state (non-selected pages) */
    .k-pager-numbers .k-link:not(.k-state-selected):hover {
        background-color: rgba(240, 78, 66, 0.2); /* subtle red overlay */
        color: #000000 !important; /* hover text black for non-selected */
    }

/* ------------------ Pager Navigation Arrows ------------------ */
/* Hide default Kendo SVG icons */
.k-pager-nav .k-icon svg {
    display: none !important;
}

/* Custom chevrons */
.k-pager-first .k-icon::before {
    content: "❮❮";
}

.k-pager-nav .k-svg-i-caret-alt-left {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    content: "" !important;
}

    .k-pager-nav .k-svg-i-caret-alt-left::before {
        content: "❮" !important;
    }

.k-pager-nav .k-svg-i-caret-alt-right {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    content: "" !important;
}

    .k-pager-nav .k-svg-i-caret-alt-right::before {
        content: "❯" !important;
    }

.k-pager-last .k-icon::before {
    content: "❯❯";
}

/* Styling for chevrons */
.k-pager-nav .k-icon::before {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    text-align: center;
}

/* Pager nav links */
.k-pager-nav .k-link {
    color: #fff !important; /* arrows text color */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.2s ease-in-out;
    padding: 4px 8px;
    text-decoration: none !important;
}

 /* Hover arrows */
 .k-pager-nav .k-link:hover {
     color: #fff !important; /* or #b01008 if you want dark red hover */
 }
/* Hide default Kendo SVG pager icons */
.k-pager-nav .k-icon svg {
    display: none !important;
}

/* Modern double & single chevron arrows */
.k-pager-first .k-icon::before {
    content: "❮❮";
}

.k-pager-nav .k-svg-i-caret-alt-left {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
}

    .k-pager-nav .k-svg-i-caret-alt-left::before {
        content: "❮" !important;
    }

.k-pager-nav .k-svg-i-caret-alt-right {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
}

    .k-pager-nav .k-svg-i-caret-alt-right::before {
        content: "❯" !important;
    }


.k-pager-last .k-icon::before {
    content: "❯❯";
}

/* Ensure visibility and proper sizing */
.k-pager-nav .k-icon::before {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    text-align: center;
}

/* Style for the pager links */
.k-pager-nav .k-link {
    color: #fff!important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.2s ease-in-out;
    padding: 4px 8px;
    text-decoration: none !important;
}

    .k-pager-nav .k-link:hover {
        color: #fff !important; /*#b01008 */
    }

/* Highlight active page number */
.k-pager-numbers .k-link.k-state-selected {
    background-color: #F04E42 !important; /*#DB140A*/
    color: #fff !important;
    border-radius: 4px;
}

/* ------------------ Mobile Pager ------------------ */
@media (max-width: 575.98px) {
    .k-grid-pager {
        gap: 4px;
        font-size: 0.9rem;
    }

    .k-pager-numbers .k-link {
        padding: 4px 7px !important;
    }
}


.k-pager-prev[aria-disabled="true"]::before,
.k-pager-next[aria-disabled="true"]::before {
    opacity: 0.3;
    pointer-events: none;
}


/* Change chevron icon color (normal state) */
.k-pager-nav .k-icon::before,
.k-pager-nav .k-svg-i-caret-alt-left::before,
.k-pager-nav .k-svg-i-caret-alt-right::before {
    color: #DB140A !important; /* your main red */
}

/* Hover state — darker red on hover */
.k-pager-nav .k-link:hover .k-icon::before,
.k-pager-nav .k-link:hover .k-svg-i-caret-alt-left::before,
.k-pager-nav .k-link:hover .k-svg-i-caret-alt-right::before {
    color: #b01008 !important;
}

/* Disabled arrows — lighter gray */
.k-pager-nav[aria-disabled="true"] .k-svg-i-caret-alt-left::before,
.k-pager-nav[aria-disabled="true"] .k-svg-i-caret-alt-right::before,
.k-pager-first[aria-disabled="true"] .k-icon::before,
.k-pager-last[aria-disabled="true"] .k-icon::before {
    color: #aaa !important;
    opacity: 0.5;
}

.k-grid {
    border-radius: 12px !important;
    overflow: visible !important;
}

/* Desktop font size */
.breadcrumb-wrapper {
    font-size: 1rem;
}


/* Mobile devices */
@media (max-width: 768px) {
    .breadcrumb-wrapper {
        font-size: 0.8rem; /* smaller text */
    }

        .breadcrumb-wrapper a,
        .breadcrumb-wrapper span {
            font-size: 0.8rem;
        }

            .breadcrumb-wrapper span.material-symbols-outlined {
                font-size: 20px; /* smaller home icon */
                vertical-align: middle;
            }
}


/*label.required::after {*/
label.form-label.required::after {
    content: " *" !important;
    color: red;
}

label.required::after {
    content: " *" !important;
    color: red;
}

.profile-arrow {
    transition: transform 0.25s ease;
}

.sidebar-profile[aria-expanded="true"] .profile-arrow {
    transform: rotate(180deg);
}


/* Force height for Bootstrap inputs & selects */
.form-control,
.form-select,
textarea.form-control {
    height: 32px !important;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 14px;
}

/* For Kendo DropDownList */
.k-dropdown,
.k-dropdown .k-dropdown-wrap,
.k-combobox,
.k-combobox .k-input,
.k-select {
    height: 32px !important;
    min-height: 32px !important;
}

.k-input-inner {
    height: 30px !important;
    padding: 2px 6px !important;
}

/* Remove alternating row background (striped rows) */
.k-grid .k-grid-content tr:nth-child(even),
.k-table .k-table-row:nth-child(even) {
    background-color: transparent;
}

/* Hover styling */
.k-grid .k-grid-content tr:hover,
.k-table .k-table-row:hover {
    background-color: #f1f1f1;
}


/* Action buttons container */
.action-buttons {
    display: flex;
    gap: 8px;
}

 /* Prevent flex stretching of buttons */
 .action-buttons .btn {
     flex: 0 0 auto;
 }


/* ===============================
   KENDO GRID – HEADER STYLE
   =============================== */

.k-grid thead th,
.k-grid thead th.k-header {
    background-color: #F2F2F2 !important;
    color: #333; 
    font-weight: 600;
    border-color: #e0e0e0;
}

/*---------------------------------*/

/* ===============================
   READONLY INPUT STYLE
   =============================== */

.form-control[readonly] {
    background-color: #F5F5F5; /* light grey fill */
    color: #495057; /* normal readable text */
    border-color: #D1D5DB; /* soft border */
    cursor: default;
}

 /* prevent bootstrap from making it look disabled */
 .form-control[readonly]:focus {
     background-color: #F5F5F5;
     box-shadow: none;
     border-color: #D1D5DB;
 }

 /*-------------------------------------*/


/* Kendo Grid checkbox – darker border */
.k-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #6b7280; /* dark gray */
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}


.delete-returned i {
    font-size: 1.1rem;
}

.delete-returned:hover i {
    opacity: 0.75;
}




/*------- Loading Overlay --------------*/
#loadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-box {
    font-size: 20px;
    font-weight: 600;
    color: #b00000;
}

.loading-text {
    margin-right: 5px;
}

.dot {
    font-size: 30px;
    color: red;
    animation: blink 1.4s infinite both;
}

.dot1 {
    animation-delay: 0s;
}

.dot2 {
    animation-delay: .2s;
}

.dot3 {
    animation-delay: .4s;
}

@keyframes blink {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

/*-----------------------------*/


/*-----------For Daashboard -------------*/
.performance-wrapper {
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
/*    box-shadow: 0 8px 20px rgba(0,0,0,0.06);*/
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.10), 0 2px 5px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease;
    width: 100%;
}

/* Header */
.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .performance-header h5 {
        margin: 0;
        font-weight: 600;
    }

.time-filter {
    background: #f4f6f8;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #555;
}

/* Grid */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #eee;
}

.performance-item {
    text-align: center;
    padding: 18px 10px;
    position: relative;
}

    .performance-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: #e6e8eb;
    }

    .performance-item small {
        color: #8a8f98;
        display: block;
        margin-bottom: 6px;
    }

    .performance-item strong {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #111;
    }

    .performance-item span {
        display: block;
        font-size: 13px;
        color: #8a8f98;
        margin-top: 4px;
    }

/* 📱 Tablet */
@media (max-width: 991px) {
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .performance-item::after {
        display: none;
    }

    .performance-item {
        border-bottom: 1px solid #eee;
    }

        .performance-item:nth-last-child(-n+2) {
            border-bottom: none;
        }
}

/* 📱 Mobile */
@media (max-width: 576px) {
    .performance-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .performance-grid {
        grid-template-columns: 1fr;
        border-top: none;
    }

    .performance-item {
        text-align: left;
        padding: 14px 0;
        border-bottom: 1px solid #eee;
    }

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

/*.performance-wrapper:hover { //Temp hide ------------------------------------------
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease;
}
*/

.badge.bg-success {
    background-color: #e6f7ec !important;
    color: #1a7f37;
    font-weight: 600;
    border-radius: 20px;
    padding: 6px 10px;
}

.badge i {
    font-size: 0.85rem;
}

.inv-turnover {
    color: #00B22D;
}


/* Status indicator */
.status-indicator {
    width: 12px;
    height: 12px;
    background-color: #28a745;
    border-radius: 50%;
    display: inline-block;
}

/* Status count */
.status-count {
    font-weight: bold;
    color: #333;
}

/* Card */
.call-coverage-card {
    padding: 20px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
.call-coverage-header {
    text-align: center;
    margin-bottom: 12px;
}

/* Donut container (controls size) */
.donut-wrapper {
    position: relative;
    width: 100%;
    max-width: 260px; /* keeps design size */
    aspect-ratio: 1 / 1; /* perfect square */
    margin: 0 auto;
    /*    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;*/
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%); /* slight optical correction */
    text-align: center;
    pointer-events: none;
}

.donut-label {
    font-size: 12px; /* slightly smaller */
    color: #8a8f98;
    letter-spacing: 0.4px;
    margin-bottom: 2px; /* tighter spacing */
}

.donut-value {
    font-size: 20px; /* fits donut hole better */
    font-weight: 700;
    line-height: 1.1; /* removes extra vertical space */
    color: #111;
}


/* Custom legend */
.call-coverage-legend {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 15px;
    justify-content: center;
}

 .call-coverage-legend > div {
     display: flex;
     align-items: center;
 }


.legend-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 6px;
}

/*.call-coverage-legend {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 15px;
    justify-content: center;
}

.legend-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 6px;
}*/



.legend-dot.completed {
    background: #28a745;
}

.legend-dot.in-progress {
    background: #6fda8c;
}

.legend-dot.remarked {
    background: #fd7e14;
}

.legend-dot.pending {
    background: #adb5bd;
}



/*------Promo ------------*/
/* ===== MODAL WIDTH ===== */
.promo-modal {
    max-width: 340px;
}

/* ===== MODAL CONTENT (LOCK HEIGHT) ===== */
#promoModal .modal-content {
    position: relative;
    border-radius: 16px;
    padding: 18px 16px 16px;
    height: 460px; /* 🔒 LOCKED HEIGHT */
    max-height: 460px;
    /*  overflow: hidden;*/
    overflow-x: hidden;
    overflow-y: visible; /* 👈 allow indicator to fully show */
    display: flex;
    flex-direction: column;
}

/* ===== CLOSE BUTTON ===== */
.promo-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

/* =========================================================
   CAROUSEL (BOOTSTRAP-CORRECT, NO OVERLAP)
   ========================================================= */

/* Carousel wrapper */
#promoCarousel {
    margin-top: 6px;
}

/* IMPORTANT:
   carousel-inner must be RELATIVE and NOT flex */
.promo-carousel-inner {
    position: relative; /* ✅ REQUIRED */
    height: 210px;
    min-height: 210px;
    max-height: 210px;
    overflow: hidden; /* ✅ prevent bleed */
}

/* Each slide becomes a centered frame */
#promoCarousel .carousel-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Ensure only active slide is visible */
  /*  #promoCarousel .carousel-item:not(.active) {
        display: none;
    }*/

/* Promo image */
.promo-img {
    max-height: 190px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    /* subtle polish */
    will-change: opacity;
    backface-visibility: hidden;
}

.promo-indicators button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: #e0e0e0;
    border: none;
    opacity: 1;
    transition: background-color 0.25s ease;

    /*  transition: background-color 0.25s ease;
    transform-origin: center;*/
}

.promo-indicators .active {
    background-color: #000;
   /* transform: scale(1.2);*/
}

/* =========================================================
   TEXT
   ========================================================= */

#promoModal h4 {
    font-size: 1.2rem;
    margin: 8px 0 6px;
}

#promoModal p {
    font-size: 0.95rem;
    margin-bottom: 6px;
    min-height: 40px; /* 🔒 Prevent text height jump */
}

/* =========================================================
   INDICATORS (DOTS BELOW DESCRIPTION)
   ========================================================= */
/* Container */
.carousel-indicators.promo-indicators {
    position: static !important;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 16px;
    min-height: 20px;
}

    /* Force circular dots (override Bootstrap defaults) */
    .carousel-indicators.promo-indicators button,
    .carousel-indicators.promo-indicators [data-bs-target] {
        width: 8px !important;
        height: 8px !important;
        padding: 0;
        margin: 0;
        border-radius: 50% !important;
        background-color: #e0e0e0;
        border: none;
        opacity: 1;
        transition: background-color 0.25s ease;
    }

    /* Active dot */
    .carousel-indicators.promo-indicators .active {
        background-color: #000 !important;
    }



/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.promo-actions {
    display: flex;
    flex-direction: column; /* 👈 stack vertically */
    align-items: center;
    gap: 10px;
    margin-top: auto;
    /*    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: auto; */
}

.promo-btn {
    height: 32px;
    min-width: 130px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    border-radius: 8px;
}

/* =========================================================
   MODAL ENTRY ANIMATION
   ========================================================= */

.promo-animate .modal-dialog {
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.promo-animate.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}



/* Smooth fade tuning */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 800ms; /* slower = smoother */
    transition-timing-function: ease-in-out;
    pointer-events: none; /* 👈 important polish */
}

    .carousel-fade .carousel-item.active {
        opacity: 1;
        pointer-events: auto;
    }

.carousel-fade .carousel-item-start,
.carousel-fade .carousel-item-end {
    opacity: 0;
}


/*-------------------------------------------*/



/*------Week Config Upload property-------------*/

.btn-primary-theme {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-primary-theme:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}


/* =========================================
   Upload Button (Week Config)
========================================= */

#btnUpload {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
}

    /* Hover */
    #btnUpload:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
        color: #fff;
    }

    /* Focus (Bootstrap override fix) */
    #btnUpload:focus,
    #btnUpload:active {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
        box-shadow: 0 0 0 0.2rem rgba(229,57,53,0.25);
    }

    /* Optional: slightly darker when clicking */
    #btnUpload:active {
        transform: translateY(1px);
    }



/* =========================================
   Themed Modal Header
========================================= */

.modal-header-primary {
    background-color: var(--primary-color);
    border-bottom: none;
    color: #fff;
}

/* close button visibility */
.modal-header-primary .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* optional hover feel when modal active */
.modal-header-primary .modal-title {
    font-weight: 600;
}


/* =========================================
   Download Template Button (Theme Outline)
========================================= */

#downloadTemplate {
    background-color: transparent;
    color: var(--primary-color);
    border: 1.5px solid rgba(229, 57, 53, 0.45); /* light red border */
    font-weight: 500;
    transition: all 0.2s ease;
}

    /* Hover → solid red */
    #downloadTemplate:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

    /* Focus */
    #downloadTemplate:focus,
    #downloadTemplate:active {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
        color: #fff;
        box-shadow: 0 0 0 0.2rem rgba(229,57,53,0.25);
    }


/*-------------------------------------------*/



/*-----MOR Reports ----------*/

.mor-card:active {
    transform: scale(0.98);
}


/* icon alignment fix */
.mor-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* icon look */
.mor-icon {
    font-size: 28px;
    color: #2563eb; /* nice blue */
    flex-shrink: 0;
    background: #e0ecff;
    padding: 10px;
    border-radius: 50%;
}

.mor-modal-body {
    padding: 20px;
}

.mor-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mor-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    border-radius: 12px;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mor-card:hover {
        background: #eef4ff;
        border-color: #3b82f6;
        transform: translateY(-2px);
    }

.mor-icon {
    font-size: 28px;
    color: #3b82f6;
}

.mor-title {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
}

.mor-desc {
    font-size: 13px;
    color: #6b7280;
}

/* Optional: modal header polish */
#morReportsModal .modal-header,
#salesReportsModal .modal-header {
    background: #f1f5f9;
    border-bottom: 1px solid #e5e7eb;
}


.ar-item {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.ar-item:hover {
    background-color: #f5f5f5;
    transform: translateX(4px);
}

 .ar-item:hover .material-symbols-outlined {
     color: #dc3545; /* Bootstrap danger red */
 }

.ar-item:hover h6 {
    color: #dc3545;
}


/*--Border on left ----------*/
.ar-item:hover,
.ap-item:hover {
    border-left: 4px solid #dc3545;
    padding-left: 6px;
}

/* .ar-item:hover {
     border-left: 4px solid #dc3545;
     padding-left: 6px;
 }*/

/*---------------------------------------*/