/*.fadeup{
    opacity:0;
    visibility:hidden
}
*/

.validation-message {
    color: red;
}

.deleted-participant img {
    filter: grayscale(100%);
    opacity: 0.6;
}

#apiloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: var(--custom-white);*/
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/*OrderStatus history design start*/

.hh-grayBox {
    margin-bottom: 20px;
    margin-top: 20px;
}

.order-tracking {
    text-align: center;
    width: 33.33%;
    position: relative;
    display: block;
}

.order-tracking .is-complete {
    display: block;
    position: relative;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    border: 0px solid #AFAFAF;
    background-color: #f7be16;
    margin: 0 auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
    z-index: 2;
}

.order-tracking.completed .is-complete {
    background-color: #27aa80;
}

.order-tracking .pending {
    background-color: rgb(132, 135, 134);
}

.order-tracking p {
    color: #A4A4A4;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 20px;
}

.order-tracking p span {
    font-size: 14px;
}

.order-tracking.completed p {
    color: #000;
}

.order-tracking.cancel p {
    color: rgb(219, 0, 0);
}

.order-tracking::before,
.order-tracking.completed::before {
    content: '';
    display: block;
    height: 3px;
    width: calc(100%);
    background-color: rgb(132, 135, 134);
    top: 4px;
    position: absolute;
    left: calc(-50%);
    z-index: 0;
}

.order-tracking.cancel .is-complete {
    background-color: rgb(219, 0, 0) !important;
}

.order-tracking:first-child:before {
    display: none;
}

.order-tracking.completed:before {
    background-color: #27aa80;
}

/*.sales-report-card{
    background:red;
}*/
.sales-report-card-body {
    margin: 10px;
    background: #FFF;
    border-bottom: 1px dotted #bdcdcb;
    padding-bottom: 14px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/*OrderStatus history design end*/



/* For webkit browsers (like Chrome, Safari) */
::-webkit-scrollbar:horizontal {
    width: 20px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.view-more-btn {
    /* width: 42%;*/
    border-top-left-radius: 20px !important;
    margin-right: 0 !important;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}

thead.sticky-top th {
    position: sticky;
    top: 0;
    /*background-color: white;*/
    z-index: 2;
}

.no-data-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 250px;
}

.scroll-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
}

.card-scroll-body {
    min-height: 414px;
    overflow-y: auto;
    max-height: 414px
}

.card-header-height {
    min-height: 35px;
}

/*.arrow-indicator {
    height: 30px;
    display: flex;*/
/* justify-content: center; */
/*width: 30px;
    border-radius: 50%;
    background: #c45ef6;
    color: #FFF;
    align-items: center;
    position: absolute;
    justify-content: center;
    font-size: 25px;
    right: 0;
    top: 50%;
}*/

.nav.panel-tabs.panel-success a {
    color: #09ad95;
}

.nav.panel-tabs.panel-success a.active {
    background-color: #a447ea !important;
    color: #fff;
}

.tabs-menu ul li a {
    padding: 10px 12px 11px 13px;
    display: block;
    color: #282f53;
}

.tabs-menu ul li a {
    border-radius: 7px 7px 0 0;
}

.dashboard-card {
    min-height: 115px;
}

.recommended-tag {
    background-color: #28a745;
    /* Green background */
    color: white;
    /* White text */
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 10px;
    /* Space between courier name and tag */
}

.ref-select {
    position: relative;
    display: inline-block;
    width: 350px;
}

.ref-selected-item {
    padding: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    background-color: #fff;
}

.ref-dropdown-menu {
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

.ref-dropdown-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
}

.ref-dropdown-item:hover {
    background-color: #f0f0f0;
}

.ref-selected {
    background-color: #f4f4f4;
}

.ref-selected-item span,
.ref-dropdown-item span {
    display: block;
}

[data-theme-mode=dark] .ref-selected {
    background-color: rgb(46 46 50);
}

.ref-dropdown-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

[data-theme-mode=dark] .ref-selected-item {
    border-color: var(--input-border);
    color: var(--default-text-color);
    background-color: var(--form-control-bg);
    font-size: 0.875rem;
    font-weight: var(--default-font-weight);
    line-height: 1.8;
    border-radius: 0.85rem;
}

[data-theme-mode=dark] .ref-dropdown-item:hover {
    background-color: #0d6efd;
    color: #FFF;
}

[data-theme-mode=dark] .ref-dropdown-menu {
    background-color: #202025;
    border: 1px solid #626262;
    border-radius: 10px;
}

.ref-dropdown-menu {
    border-radius: 10px;
}


.amount {
    float: right;
    /* This will align the amount to the right */
}

.badge-history {
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
}

.balancesheet-table th,
.balancesheet-table td {
    vertical-align: top;
}


.filter-container {
    position: sticky;
    top: 0;
    z-index: 99;
    border: 1px solid;
    border-radius: 0.85rem;
    border-color: var(--input-border);
    padding: 10px;
}

.list-container {
    max-height: 300px;
    /* Adjust based on your layout needs */
    overflow-y: auto;
    margin-top: 10px;
}



@media (max-width: 991.98px) {
    .main-chart-wrapper.note-wrapper .main-chat-area {
        display: block !important;
    }
}

.main-chart-wrapper.note-wrapper .main-chat-area .chat-content:before {
    display: none;
}

.input-group-select {
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

/*template view style*/
.screen-container {
    height: 100%;
}

/* wa-chat */

.wa-chat {
    height: calc(100% - 69px);
}

.wa-chat-container {
    height: 100%;
}

.wa-action-btns {
    max-width: 300px;
}

/* Conversation */
.conversation {
    height: calc(100% - 12px);
    position: relative;
    /*    background: #efe7dd url("/assets/images/whatsapp-bg-light.jpeg") repeat;*/
    z-index: 0;
}

.sticky_container {
    position: sticky;
    top: 135px;
    display: flex;
    flex-direction: column;
}

.dark-mode .conversation {
    background: #1a1a3c url(/assets/images/whatsapp-bg-dark.jpeg);
}

.conversation ::-webkit-scrollbar {
    transition: all 0.5s;
    width: 5px;
    height: 1px;
    z-index: 10;
}

.conversation ::-webkit-scrollbar-track {
    background: transparent;
}

.conversation ::-webkit-scrollbar-thumb {
    background: #b3ada7;
}

.conversation .conversation-container {
    height: calc(100% - 68px);
    /*    overflow-x: hidden;*/
    padding: 0 16px;
    margin-bottom: 5px;
}

.conversation .conversation-container:after {
    content: "";
    display: table;
    clear: both;
}

/* wa-messages */

.wa-message {
    color: #000;
    clear: both;
    line-height: 18px;
    font-size: 13px;
    padding: 8px;
    position: relative;
    margin: 8px 0;
    max-width: 300px;
    word-wrap: break-word;
    z-index: 2;
}

.wa-message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
}

.metadata {
    float: right;
    padding: 0 0 0 7px;
    position: relative;
    bottom: -4px;
}

.metadata .time {
    color: rgba(0, 0, 0, 0.45);
    font-size: 11px;
    display: inline-block;
}

.wa-message:first-child {
    margin: 16px 0 8px;
}

.wa-message.received {
    background: #fff;
    border-radius: 0px 5px 5px 5px;
    float: left;
    width: 100%;
}

.wa-gallery {
    width: 100%;
    height: 100px;
}

.wa-gallery img {
    border-radius: 6px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wa-message.received .metadata {
    padding: 0 0 0 16px;
}

.wa-message.received:after {
    border-width: 0px 10px 10px 0;
    border-color: transparent #fff transparent transparent;
    top: 0;
    left: -10px;
}

.input-invalid-border {
    border-color: red !important;
}

[data-theme-mode="dark"] .wa-title h6 {
    color: #000 !important;
}

.character-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
}


.dashboard-chart {
    max-width: 950px;
    margin: 0 auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.dashboard-chart .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.dashboard-chart .header h1 {
    font-size: 24px;
    color: #444;
    margin: 0;
}

.dashboard-chart .date-selector {
    display: flex;
    align-items: center;
    color: #666;
}

.dashboard-chart .date-selector select {
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.metrics {
    /* display: flex;
            justify-content: space-between;
            margin-bottom: 30px; */
    width: 100%;
    height: auto;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.metric-card:first-child {
    border-right: 1px dashed #ccc;
    height: 90%;
}

.metric-card:nth-child(2) {
    border-right: 1px dashed #ccc;
    height: 90%;
}

/* .metric-card:nth-child(3){
            border-right: 1px dashed #ccc;
            height: 90%;
        } */

.metric-card:last-child {
    border-right: none;
}

.metric-title {
    width: 100%;
    font-size: 13px;
    color: #565656;
    margin: 0;
}

.metric-value {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.metric-value h3 {
    font-size: 31px !important;
    font-weight: 500 !important;
    color: #045ba0;
    margin: 0;
}

.metric-value p {
    font-size: 18px !important;
    margin: 0 0 0 5px;
    width: auto;
    display: inline-block;
    color: #333 !important;
    font-size: 12px;
    font-weight: 300 !important;
}

.lastday_compare {
    padding: 3px 4px !important;
    color: #fff;
    font-size: 11px !important;
    position: relative;
    margin-left: 10px;
    border-radius: 3px;
}

.percentage-badge {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
    margin-left: 10px;
}

.negative {
    background-color: #ff6666;
}

/* .negative:before {
            content: "▼ ";
        } */
.focused-circle {
    width: 120px;
    height: 120px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.focused-text {
    position: absolute;
    text-align: center;
}

.focused-value {
    font-size: 17px;
    font-weight: bold;
    color: #333;
}

.focused-label {
    font-size: 12px;
    color: #888;
}

/* .timeline {
            margin-top: 20px;
        } */
.timeline h2 {
    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #58666e;
}

#timelineChart {
    width: 100% !important;
    height: 200px !important;
}

#focusedChart {
    height: 100px !important;
    width: 100px !important;
}

canvas {
    width: 100%;
    height: 100px;
}

#working-value {
    color: #1a73e8;
}

#productivity-value {
    color: #81B504;
}

#task-value {
    color: #4285f4;
}


/*Date style*/

.date-picker {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    background: #f9f9f9;
    padding: 10px 15px;
    border-radius: 8px;
    width: fit-content;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.date-picker i {
    cursor: pointer;
    color: #444;
    margin: 0 10px;
}

.date-text {
    display: flex;
    align-items: center;
}

.date-text i.fa-calendar {
    margin-right: 8px;
}

.date-text span {
    margin-right: 5px;
}

.task-tabs-container .tab-pane {
    min-height: 0;
    border: 0;
}

.week-navigation .week-navigation-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.week-navigation-prev {
    left: -42px;
}

.week-navigation-next {
    right: -42px;

}

.timeline-nav {
    margin-right: 46px;
    margin-left: 46px;
}

.upcoming-events-list.timeLineList li::before {
    background-color: var(--timeline-color, #ccc) !important;
}


/*.main-content {
    padding: 0 0.5rem;
    background-image: url('/assets/images/main-bg/bodybg.png');
}

[data-theme-mode="dark"] .main-content {
    background-image: unset;
}*/

.stage-history .timeline-widget:before {
    content: "";
    inset-inline-start: 7rem !important;
}

.stage-history .timeline-widget .timeline-widget-list:before {
    content: "";
    inset-inline-start: 6.688rem !important;
}

.subtask-container {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

/* Expanded state */
.subtask-container.expanded {
    opacity: 1;
    max-height: 1000px;
    /* Large enough to fit multiple rows */
    /* Large enough to fit multiple rows */
}

.swal2-container {
    z-index: 20000 !important;
    /* Higher than Bootstrap's 1055-1060 */
    /* Higher than Bootstrap's 1055-1060 */
}

.nested-task-list-card:before {
    position: absolute;
    content: "";
    width: 0.125rem;
    height: 100%;
    background-color: var(--default-border);
    inset-block-start: 0;
    inset-inline-start: 3rem;
}

.nested-task-list-card li:before {
    content: "";
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    inset-inline-start: 2.688rem;
    top: 0.25rem;
    border-radius: 3.125rem;
    border: 0.125rem solid var(--default-border);
    background-color: var(--custom-white);
}

.main-chat-area.tasknote-Wrapper {
    height: unset !important;
}

.main-chat-area.tasknote-Wrapper .chat-content {
    margin-bottom: 31px;
}

.main-chat-area.tasknote-Wrapper .chat-footer {
    height: unset !important;
    padding: 10px 24px;
    position: relative !important;
}

.tasknote-Wrapper .ql-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.tasknote-Wrapper .ql-editor {
    height: 120px !important;
    max-height: 120px !important;
    overflow-y: scroll !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 8px;
    scroll-behavior: smooth;
}

[data-theme-mode="dark"] .ql-custom i {
    color: #FFF;
}

.ql-btn.ql-active {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}

.ql-btn:hover {
    background-color: #f0f0f0 !important;
}

[data-theme-mode="dark"] .ql-btn.ql-active {
    background-color: #424242 !important;
    color: #fff !important;
}

[data-theme-mode="dark"] .ql-btn:hover {
    background-color: #616161 !important;
}

/*  Task Note */
.note-menu {
    display: none;
    z-index: 2;
    position: relative;
}

/* Invisible hover buffer around the icon */
.note-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
}

/* Keep visible when hovering anywhere on the note or menu */
.hover-enabled:hover .note-menu,
.hover-enabled .note-menu:hover,
.hover-enabled .dropdown-menu:hover {
    display: block;
}

.note-menu i {
    font-size: 0.9rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.note-menu i:hover {
    opacity: 1;
}


input[type="file"]::-webkit-file-upload-button {
    color: white;
}

input[type="file"]::file-selector-button {
    color: white;
}

/* HRMS-725: styles.css gives the "Choose File" button its theme background only through the WebKit
   pseudo-element (::-webkit-file-upload-button), which Firefox ignores. Firefox fell back to
   Bootstrap's light --bs-tertiary-bg while the rule above still made the text white, so the button
   rendered as a blank white box. Mirror the theme rules on the standard pseudo-element. Kept as
   separate blocks: one unknown pseudo-element in a selector list drops the whole rule. */
.form-control::file-selector-button {
    background-color: var(--default-background);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--default-background);
}

.dim-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}


/* Highlight animation */
/*@keyframes highlightFade {
    0% {
        background-color: #ffe066;
    }

    100% {
        background-color: transparent;
    }
}

.animate-highlight {
    animation: highlightFade 1s ease;
}*/

@keyframes highlight {
    0% {
        box-shadow: 0 0 0px rgba(0, 123, 255, 0);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 0px rgba(0, 123, 255, 0);
    }
}

.animate-highlight {
    animation: highlight 1.5s ease-in-out;
    border-radius: 8px;
}

.custom-field-card {
    border: 1px solid var(--default-border) !important;
    box-shadow: none !important;
}




#searchModal {
    z-index: 1080 !important;
    /* Bootstrap modal default is 1055, offcanvas is 1045 */
}

#offcanvasRight {
    z-index: 1045 !important;
}



.card {
    /*border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    border: 1px solid var(--default-border);
    border-radius: 13.6px;
}

.lead-heading {
    font-family: var(--default-font-family);
    color: #000;
    font-size: 15.2px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.8px;
    /* 150% */
    text-transform: capitalize;
}

.drop-down {
    color: #FFF;
    text-align: center;
    font-family: var(--default-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    /* 150% */
}

.lead-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
}

.icon-box.blue {
    background-color: #4361ee;
}

.icon-box.cyan {
    background-color: #22d3ee;
}

.icon-box.teal {
    background-color: #14b8a6;
}

.icon-box.orange {
    background-color: #f59e0b;
}

.icon-box.red {
    background-color: #ef4444;
}

.icon-box.green {
    background-color: #10b981;
}

.icon-box.dark-red {
    background-color: #dc2626;
}

.lead-label {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
    font-family: var(--default-font-family);
}

.lead-total {
    color: #000;
    text-align: right;
    font-family: var(--default-font-family);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.lead-count {
    color: rgba(0, 0, 0, 0.6);
    text-align: right;
    font-family: var(--default-font-family);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.custom-tab-button {
    background-color: var(--default-body-bg-color) !important;
    color: var(--default-text-color) !important;
}

.custom-tab-button:hover,
.custom-tab-button.active {
    background-color: var(--primary-color) !important;
}

/* Remove the generic rule without attribute selector */
[data-theme-mode="light"] .dashboard-icon {
    color: black !important;
}

@media (min-width: 992px) {
    .offcanvas-big {
        --bs-offcanvas-width: 600px;
    }
}

/*cursor Pencil*/
.cursor-pencil {
    cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M20.71%207.04c.39-.39.39-1.04%200-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41%200l-1.84%201.83%203.75%203.75M3%2017.25V21h3.75L17.81%209.93l-3.75-3.75L3%2017.25z%22%2F%3E%3C%2Fsvg%3E') 0 24, pointer !important;
}

[data-theme-mode="dark"] .cursor-pencil {
    cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%220.5%22%20d%3D%22M20.71%207.04c.39-.39.39-1.04%200-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41%200l-1.84%201.83%203.75%203.75M3%2017.25V21h3.75L17.81%209.93l-3.75-3.75L3%2017.25z%22%2F%3E%3C%2Fsvg%3E') 0 24, pointer !important;
}



.jelly {
    --uib-size: 40px;
    --uib-speed: .8s;
    --uib-color: #006AF5;
    position: relative;
    height: calc(var(--uib-size) / 2);
    width: var(--uib-size);
    filter: url('#uib-jelly-ooze');
    animation: rotate72317 calc(var(--uib-speed) * 2) linear infinite;
}

.jelly::before,
.jelly::after {
    content: '';
    position: absolute;
    top: 0%;
    left: 25%;
    width: 50%;
    height: 100%;
    background: var(--uib-color);
    border-radius: 100%;
}

.jelly::before {
    animation: shift-left var(--uib-speed) ease infinite;
}

.jelly::after {
    animation: shift-right var(--uib-speed) ease infinite;
}

.jelly-maker {
    width: 0;
    height: 0;
    position: absolute;
}

@keyframes rotate72317 {

    0%,
    49.999%,
    100% {
        transform: none;
    }

    50%,
    99.999% {
        transform: rotate(90deg);
    }
}

@keyframes shift-left {

    0%,
    100% {
        transform: translateX(0%);
    }

    50% {
        transform: scale(0.65) translateX(-75%);
    }
}

@keyframes shift-right {

    0%,
    100% {
        transform: translateX(0%);
    }

    50% {
        transform: scale(0.65) translateX(75%);
    }
}

.loader-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hover-card {
    transition: all 0.25s ease;
    cursor: pointer;
}

.hover-card:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.hover-list-item {
    transition: all 0.2s ease;
    border-radius: 6px !important;
    margin: 2px 0;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.hover-list-item:hover {
    background-color: var(--light) !important;
    transform: translateX(4px);
}

/* Executive Leads Table Styling */

.executive-leads-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--default-border) !important;
}

.executive-leads-table th,
.executive-leads-table td {
    border-bottom: 1px solid var(--default-border) !important;
    border-right: 1px solid var(--default-border) !important;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    background-color: var(--custom-white);
    color: var(--default-text-color);
}

.executive-leads-table .sticky-top-0 {
    position: sticky;
    top: 0;
    z-index: 15;
    background-color: rgb(var(--light-rgb)) !important;
    box-shadow: inset 0 -1px 0 var(--default-border), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
}

.executive-leads-table .sub-header th {
    border-top: none !important;
}

.executive-leads-table .sticky-top-1 {
    position: sticky;
    top: 41px;
    z-index: 14;
    background-color: rgb(var(--light-rgb)) !important;
    box-shadow: inset 0 -1px 0 var(--default-border), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
}

.executive-leads-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 11;
    min-width: 150px;
    white-space: nowrap;
    border-right: 2px solid var(--default-border) !important;
    background-color: var(--custom-white) !important;
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.15);
}

/* Header corner cell (Executive Name) — both sticky-col AND sticky-top-0. Needs the highest
   z-index in the table so the neighbouring "Leads" / "Leads in Follow-up" group headers don't
   slide over it when the user scrolls right, clipping the label to "Exec…". */
.executive-leads-table th.sticky-col {
    background-color: rgb(var(--light-rgb)) !important;
    color: var(--default-text-color) !important;
    z-index: 20 !important;
}

.executive-leads-table .footer-row {
    background-color: var(--custom-white) !important;
}

.executive-leads-table .footer-cell {
    background-color: var(--custom-white) !important;
    color: var(--default-text-color) !important;
    border-color: var(--default-border) !important;
}

.executive-scroll-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
}

.executive-scroll-container::-webkit-scrollbar-track {
    background: var(--light-rgb);
}

.executive-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

.executive-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

[data-theme-mode="dark"] .executive-scroll-container::-webkit-scrollbar-track {
    background: #2d2d2d;
}

[data-theme-mode="dark"] .executive-scroll-container::-webkit-scrollbar-thumb {
    background: #555;
}

[data-theme-mode="dark"] .executive-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Skeleton Screen Styles */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-box {
    border-radius: 8px;
}

.skeleton-avatar {
    border-radius: 50%;
}

.skeleton-button {
    border-radius: 6px;
}

/* Dark Mode Skeleton Styles */
[data-theme-mode="dark"] .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* ========================================
   Calendar Skeleton Loader Styles
   ======================================== */

/* Skeleton Animation - Light Theme */
.skeleton-text,
.skeleton-circle,
.skeleton-event {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-event {
    border-radius: 3px;
    opacity: 0.6;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Calendar Skeleton Grid */
.calendar-skeleton {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.calendar-skeleton-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.skeleton-day-header {
    padding: 8px;
    text-align: center;
    border-right: 1px solid #e0e0e0;
}

.skeleton-day-header:last-child {
    border-right: none;
}

.calendar-skeleton-body {
    display: flex;
    flex-direction: column;
}

.calendar-skeleton-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #e0e0e0;
}

.calendar-skeleton-row:last-child {
    border-bottom: none;
}

.calendar-skeleton-day {
    min-height: 100px;
    padding: 4px;
    border-right: 1px solid #e0e0e0;
    background-color: #fff;
}

.calendar-skeleton-day:last-child {
    border-right: none;
}

/* Dark Theme Overrides */
[data-theme-mode="dark"] .skeleton-text,
[data-theme-mode="dark"] .skeleton-circle,
[data-theme-mode="dark"] .skeleton-event {
    background: linear-gradient(90deg, #2a2a2e 25%, #3a3a3e 50%, #2a2a2e 75%);
    background-size: 200% 100%;
}

[data-theme-mode="dark"] .calendar-skeleton {
    border-color: #3a3a3e;
}

[data-theme-mode="dark"] .calendar-skeleton-header {
    background-color: #1e1e22;
    border-bottom-color: #3a3a3e;
}

[data-theme-mode="dark"] .skeleton-day-header {
    border-right-color: #3a3a3e;
}

[data-theme-mode="dark"] .calendar-skeleton-row {
    border-bottom-color: #3a3a3e;
}

[data-theme-mode="dark"] .calendar-skeleton-day {
    border-right-color: #3a3a3e;
    background-color: #16161a;
}


/* Note Link Visibility */
.chat-list-inner .main-chat-msg a,
.chat-list-inner .main-chat-msg a:visited,
.chat-list-inner .main-chat-msg a:hover,
.chat-list-inner .main-chat-msg a:focus {
    text-decoration: underline !important;
}

.chat-item-start .main-chat-msg a,
.chat-item-start .main-chat-msg a:visited {
    color: #4361ee !important;
    /* Primary Blue for received messages (light bg) */
}

.chat-item-end .main-chat-msg a,
.chat-item-end .main-chat-msg a:visited {
    color: #ffffff !important;
    /* White for sent messages (primary bg) */
}

/* Ensure Dark Mode compatibility if needed */
[data-theme-mode="dark"] .chat-item-start .main-chat-msg a {
    color: #82b1ff !important;
    /* Lighter blue for dark mode received */
}

/* Rounded Search Design */
.rounded-search-group {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    overflow: hidden;
    background-color: transparent;
    transition: border-color 0.3s;
    width: 100%;
}

.rounded-search-group:focus-within {
    border-color: #0d6efd;
}

.rounded-search-group .form-control {
    border: none !important;
    background-color: transparent !important;
    color: inherit;
    padding: 0.5rem 1rem;
    box-shadow: none !important;
    font-size: 0.9rem;
}

.rounded-search-group .input-group-text {
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: inherit;
    cursor: pointer;
    padding: 0 1.25rem;
    height: 38px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

.rounded-search-group .input-group-text:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Enhanced Timer Stabilization */
.timer-text {
    font-variant-numeric: tabular-nums !important;
    display: inline-block !important;
    width: 6rem !important;
    /* Slightly increased width for Poppins which is wider than Courier */
    text-align: center !important;
}

.running-task-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
    width: 11.5rem !important;
    /* Fixed width to protect the task title from wrapping shifts */
    justify-content: flex-end !important;
}
.swal2-popup {
    padding: 2rem !important;
}

.swal2-html-container {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    line-height: 1.5;
}

.swal2-icon {
    margin-top: 10px !important;
}

.swal2-actions {
    margin-top: 20px !important;
}

/* SweetAlert2 9.x hard-codes #545454 on .swal2-content and #ccc on input placeholders, and a prompt's input
   inherits the former. On the dark theme typed text came out dark grey and the hint light grey, so the two
   read swapped (QA 2026-10-12, Screen Tracker reject reason). Follow the theme the way .form-control does.
   Two classes deep: the bundle injects its own CSS after this file. */
.swal2-container .swal2-content {
    color: var(--text-muted);
}

.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select,
.swal2-container .swal2-file {
    color: var(--default-text-color);
    border-color: var(--default-border);
}

.swal2-container .swal2-input::placeholder,
.swal2-container .swal2-textarea::placeholder {
    color: var(--default-text-color);
    opacity: 0.4;
}

/* WhatsApp Messages page (Chatbot/Chat.razor): the list fills whatever height the panel has left. The theme
   gives the panel a fixed height (100vh - 8rem) and the list a separate fixed max-height (100vh - 21rem) that
   only allows for the title, search and tabs; the filter chips added above the tabs (All / Unread / Blocked /
   lists, which wrap onto more lines as lists are added) pushed the list past the bottom of the panel. */
.main-chart-wrapper .chat-info.wa-chat-info {
    display: flex;
    flex-direction: column;
}

    .main-chart-wrapper .chat-info.wa-chat-info > .tab-content {
        flex: 1 1 0;
        min-height: 0;
    }

        .main-chart-wrapper .chat-info.wa-chat-info > .tab-content > .tab-pane {
            height: 100%;
        }

    .main-chart-wrapper .chat-info.wa-chat-info .chat-users-tab,
    .main-chart-wrapper .chat-info.wa-chat-info .chat-calls-tab {
        max-height: none;
    }

    /* Messages / Contacts tab icons: the theme draws each in a fixed circle as an inline-block with padding, so
       at this page's font size the glyph sat in the top corner of its circle. Centre it in the circle instead. */
    .main-chart-wrapper .chat-info.wa-chat-info .tab-style-2 .nav-item .nav-link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
        vertical-align: middle;
    }

/* WhatsApp Messages page, full window ("Expand" in the list header; Chat.razor FullView puts .wa-full on the wrapper's parent): the chat covers the
   whole window like Team Chat's .ic-shell.ic-full (z-index 104 = under the theme's modal backdrop). The theme
   sizes the panels as 100vh minus the page header/footer (8rem) and the message list as 100vh - 19.5rem; with
   no header/footer, each gains 7rem (the wrapper keeps its 0.5rem padding). */
.wa-full > .main-chart-wrapper {
    position: fixed;
    inset: 0;
    z-index: 104;
    margin: 0;
    background-color: var(--default-body-bg-color);
}

    .wa-full > .main-chart-wrapper .chat-info,
    .wa-full > .main-chart-wrapper .main-chat-area,
    .wa-full > .main-chart-wrapper .chat-user-details {
        height: calc(100vh - 1rem);
    }

    .wa-full > .main-chart-wrapper .chat-screen-content {
        max-height: calc(100vh - 12.5rem) !important;
    }


.main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread,
.main-chart-wrapper .chat-info .chat-groups-tab li.chat-msg-unread {
    background-color: #f3f6f9 !important; 
}

.main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread p,
.main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread span.chat-msg {
    color: #333333 !important; 
}


.main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread .text-muted,
.main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread span.fs-11 {
    color: #6c757d !important;
}


[data-theme-mode="dark"] .main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread,
[data-theme-mode="dark"] .main-chart-wrapper .chat-info .chat-groups-tab li.chat-msg-unread {
    background-color: var(--default-background) !important;
}

[data-theme-mode="dark"] .main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread p,
[data-theme-mode="dark"] .main-chart-wrapper .chat-info .chat-users-tab li.chat-msg-unread span.chat-msg {
    color: var(--default-text-color) !important;
}






/*Task page style*/
/* Exact CRM Modal Style from Image */
:root {
    --bg-modal: #FFFFFF;
    --bg-input: #f4f5f7;
    --accent-blue: #006AF5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #d1d5db;
    --radius: 10px;
    --color-scheme: light;
    --pill-bg: #ffffff;
    --pill-bg-active: #e8eefc;
}

[data-theme-mode=dark] {
    --bg-modal: #2a2a2a;
    --bg-input: #000000;
    --accent-blue: #0076ff;
    --text-primary: #ffffff;
    --text-secondary: #bfbfbf;
    --border-color: #222222;
    --radius: 10px;
    --color-scheme: dark;
    --pill-bg: #1b1b1b;
    --pill-bg-active: #252528;
}



.task-modal .modal-container {
    background-color: var(--bg-modal);
    width: 480px;
    max-height: 90vh;
    /* Fixed height to enable scrolling */
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    margin: 30px 0;
    /* Margin on top and bottom */
    overflow: hidden;
}

.task-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px 24px;
    flex-shrink: 0;
    z-index: 10;
}

    .task-modal .modal-header h1 {
        font-size: 1.1rem;
        font-weight: 600;
    }

.task-modal .close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
}

.task-modal .modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 24px 24px 24px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

    .task-modal .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .task-modal .modal-body::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 10px;
    }
/* Timing Pills */
.task-modal .timing-toggles {
    display: flex;
    background: var(--bg-modal);
    padding: 4px;
    border-radius: 10px;
    width: fit-content;
}

.task-modal .timing-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s;
}

    .task-modal .timing-btn.active {
        background: var(--accent-blue);
        color: white;
    }

.task-modal .hidden {
    display: none !important;
}
/* Sub Tabs (Scheduled, Unscheduled, Repeat) */
.task-modal .sub-tabs-container {
    display: flex;
    background: transparent;
    /* Remove container bg for better gap visibility */
    padding: 0;
    margin-bottom: 24px;
    width: fit-content;
    gap: 12px;
    /* Increased gap as requested */
}

.task-modal .sub-tab-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--pill-bg);
    /* Default pill bg */
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

    .task-modal .sub-tab-btn.active {
        background: var(--pill-bg-active);
        /* Active pill bg */
        color: var(--accent-blue);
        border-color: var(--accent-blue);
    }
/* Date Time Section */
.task-modal .date-time-box {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.task-modal .dt-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.task-modal .dt-input-group {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    /* Matches .task-modal .input-field — this row sits directly under the plain text inputs, and
       at 0.85rem the date read a step smaller than everything above it. */
    font-size: 0.9rem;
    position: relative;
    /* Fixed for absolute child */
}

    .task-modal .dt-input-group i {
        color: var(--accent-blue);
        font-size: 1rem;
        pointer-events: none;
        /* Let clicks pass through to the input */
    }

    .task-modal .dt-input-group.icon-right {
        justify-content: space-between;
    }

        .task-modal .dt-input-group.icon-right i {
            color: #555;
            /* Muted icon for repeat section */
        }

    .task-modal .dt-input-group input {
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        width: 100%;
        outline: none;
        cursor: pointer;
        color-scheme: var(--color-scheme);
        /* Ensures the picker menu is dark */
    }
        /* Hide default browser icons but keep functionality */
        .task-modal .dt-input-group input::-webkit-calendar-picker-indicator {
            background: transparent;
            bottom: 0;
            color: transparent;
            cursor: pointer;
            height: auto;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: auto;
        }
/* Form Styles */
.task-modal .form-group {
    margin-bottom: 20px;
}

.task-modal .label-text {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.05rem;
}

.task-modal .form-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.05rem;
}

.task-modal .input-field {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

    .task-modal .input-field::placeholder {
        color: #555;
    }

    .task-modal .input-field:focus {
        border-color: #333;
    }

.task-modal .row {
    display: flex;
    gap: 12px;
}

.task-modal .col-half {
    flex: 1;
}
/* Select Styling */
.task-modal .select-wrapper {
    position: relative;
}

    .task-modal .select-wrapper i {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 0.8rem;
        pointer-events: none;
    }

.task-modal .select-field {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}
/* Deadline Toggle */
.task-modal .deadline-box {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}

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

.task-modal .toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

    .task-modal .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.task-modal .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    transition: .4s;
    border-radius: 34px;
}

    .task-modal .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

.task-modal input:checked + .slider {
    background-color: var(--accent-blue);
}

    .task-modal input:checked + .slider:before {
        transform: translateX(16px);
    }

.task-modal .deadline-display {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
}
/* Hosts / Participants Section */
.task-modal .hosts-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.task-modal .avatar-stack {
    display: flex;
    align-items: center;
}

.task-modal .avatar-item {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid var(--bg-modal);
    margin-right: -15px;
    /* Significant overlap */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

    .task-modal .avatar-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Overlap order: right elements on top */
    .task-modal .avatar-item:nth-child(2) {
        z-index: 2;
    }

    .task-modal .avatar-item:nth-child(3) {
        z-index: 3;
    }

    .task-modal .avatar-item:nth-child(4) {
        z-index: 4;
    }

.task-modal .add-host-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
}

    .task-modal .add-host-btn:hover {
        border-color: var(--accent-blue);
        color: white;
    }

.task-modal .add-participants-banner {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border 0.2s;
}

    .task-modal .add-participants-banner:hover {
        border-color: var(--border-color);
    }

.task-modal .banner-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.task-modal .add-participants-banner span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}
/* Description */
.task-modal .textarea-field {
    width: 100%;
    height: 80px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    color: var(--text-primary);
    font-size: 0.85rem;
    resize: none;
    outline: none;
}
/* Footer Group */
.task-modal .footer-inputs {
    margin-top: 12px;
}

.task-modal .icon-input {
    position: relative;
    display: flex;
    align-items: center;
}

    .task-modal .icon-input i {
        position: absolute;
        left: 12px;
        color: #666;
        font-size: 0.9rem;
    }

    .task-modal .icon-input input {
        padding-left: 36px;
        background: var(--bg-input);
    }
/* Modal Footer */
.task-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--bg-modal);
    /* Slightly different bg to distinguish fixed footer */
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.task-modal .clear-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 500;
}

.task-modal .save-btn {
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 118, 255, 0.3);
}

    .task-modal .save-btn:hover {
        background: #0069e6;
    }





.page-size-select {
    width: 60px;
    height: 30px;
    text-align: center;
    text-align-last: center;
    padding: 0 !important;
    padding-right: 15px !important;
}



/* ===== Kanban board (FollowUps) ===== */
.kb-board-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 0 16px;
    font-size: .78rem;
    color: var(--text-muted, #8c9097);
}

.kb-board {
    display: flex;
    gap: 16px;
    padding: 16px;
    overflow-x: auto;
    align-items: stretch;
    min-height: 60vh;
}

.kb-column {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    background: var(--default-background, #f5f6fa);
    border: 1px solid var(--default-border, #e9edf6);
    border-radius: 12px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.kb-column-dragover {
    border-color: var(--primary-color, #5c67f2);
    box-shadow: 0 0 0 2px rgba(92,103,242,.25) inset;
}

/* Data-derived buckets (e.g. New Quotation / New Enquiry) are not valid drop targets */
.kb-column-locked .kb-column-header {
    opacity: .85;
}

.kb-column-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: var(--custom-white, #fff);
    border-bottom: 1px solid var(--default-border, #e9edf6);
    border-radius: 12px 12px 0 0;
}

.kb-column-title {
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-column-count {
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color, #5c67f2);
    border-radius: 999px;
    padding: 2px 8px;
}

.kb-column-body {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 65vh;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-card {
    background: var(--custom-white, #fff);
    border: 1px solid var(--default-border, #e9edf6);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    cursor: grab;
    transition: box-shadow .15s ease, transform .1s ease;
}

    .kb-card:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,.12);
        transform: translateY(-1px);
    }

    .kb-card:active {
        cursor: grabbing;
    }

.kb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.kb-card-number {
    font-weight: 600;
    font-size: .78rem;
    color: var(--primary-color, #5c67f2);
}

.kb-card-name {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--text-muted, #8c9097);
    margin-bottom: 4px;
}

    .kb-card-row i {
        font-size: .85rem;
        flex-shrink: 0;
    }

.kb-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kb-chip {
    font-size: .68rem;
    background: var(--default-background, #f5f6fa);
    border: 1px solid var(--default-border, #e9edf6);
    border-radius: 999px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kb-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--default-border, #e9edf6);
}

.kb-empty {
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted, #8c9097);
    padding: 24px 8px;
    border: 1px dashed var(--default-border, #e9edf6);
    border-radius: 8px;
}

.kb-grip {
    color: var(--text-muted, #b9bfc7);
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
}

.kb-card:active .kb-grip {
    cursor: grabbing;
}

/* Dragula drag feedback: dim the source card and style the floating mirror */
.kb-card.gu-transit {
    opacity: .4;
}

.gu-mirror .kb-card,
.kb-card.gu-mirror {
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    transform: rotate(1.5deg);
}

/* ===== Smoother dragging =====
   Promote the floating mirror to its own layer and strip its transitions so it
   tracks the pointer without per-frame style animation. */
.gu-mirror {
    will-change: transform;
    pointer-events: none;
    transition: none !important;
}

    .gu-mirror .kb-card,
    .gu-mirror.kb-card {
        transition: none !important;
    }

/* While a drag is active (.kb-dragging is toggled on the board by followup-kanban.js),
   suppress the hover lift/shadow and column transitions on the cards the mirror passes
   over. Repeatedly repainting those large shadows is the main source of drag lag. */
.kb-board.kb-dragging .kb-card,
.kb-board.kb-dragging .kb-column {
    transition: none;
}

    .kb-board.kb-dragging .kb-card:hover {
        transform: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    }

/* Don't animate scrolling during auto-scroll — the rAF loop already steps it smoothly. */
.kb-board.kb-dragging {
    scroll-behavior: auto;
}

/* Centers the reused loader / empty-state component within the Kanban area */
.kb-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60vh;
    padding: 32px;
}

/* ===== Kanban board — light theme ===== */
html:not([data-theme-mode=dark]) .kb-board-info {
    color: #6b7280;
}

html:not([data-theme-mode=dark]) .kb-column {
    background: #f5f6fa;
    border-color: #e9edf6;
}

html:not([data-theme-mode=dark]) .kb-column-header {
    background: #fff;
    border-bottom-color: #e9edf6;
}

html:not([data-theme-mode=dark]) .kb-column-title {
    color: #2c2c2c;
}

html:not([data-theme-mode=dark]) .kb-card {
    background: #fff;
    border-color: #e9edf6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

    html:not([data-theme-mode=dark]) .kb-card:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    }

html:not([data-theme-mode=dark]) .kb-card-name {
    color: #2c2c2c;
}

html:not([data-theme-mode=dark]) .kb-card-row {
    color: #6b7280;
}

html:not([data-theme-mode=dark]) .kb-chip {
    background: #f1f3f9;
    border-color: #e9edf6;
    color: #4b5563;
}

html:not([data-theme-mode=dark]) .kb-card-actions {
    border-top-color: #e9edf6;
}

html:not([data-theme-mode=dark]) .kb-empty {
    color: #6b7280;
    border-color: #e9edf6;
}

html:not([data-theme-mode=dark]) .kb-grip {
    color: #9aa1ab;
}

/* ===== CRM Dashboard — Segmented View Control ===== */
.crm-view-segment {
    display: inline-flex;
    align-items: stretch;
    background: #e9ecf1;
    border-radius: 8px;
    padding: 3px;
    gap: 0;
    /*margin: 0 !important;*/
}

.crm-view-segment .crm-view-segment-btn {
    margin: 0 !important;
}

.crm-view-segment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #5a6370;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    outline: none;
}

.crm-view-segment-btn:hover:not(.active) {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.06);
}

.crm-view-segment-btn.active {
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Dark theme */
[data-theme-mode="dark"] .crm-view-segment {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="dark"] .crm-view-segment-btn {
    color: #8896a6;
}

[data-theme-mode="dark"] .crm-view-segment-btn:hover:not(.active) {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
}

[data-theme-mode="light"] .call-rec-audio {
    color-scheme: light;
}

[data-theme-mode="dark"] .call-rec-audio {
    color-scheme: dark;
}

[data-theme-mode="dark"] .crm-view-segment-btn.active {
    background: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}



/* Shift config tabs: outlined chips so inactive tabs read as clickable in the resting
state (not plain text); filled primary when active so it stays clearly highlighted. */
.shift-config-tabs.nav-tabs {
    border-bottom: 0;
    gap: .45rem;
}

.shift-config-tabs .nav-item .nav-link {
    border: 1px solid var(--default-border);
    border-radius: .5rem;
    color: var(--default-text-color);
    background-color: transparent;
    padding: .4rem .85rem;
    margin-bottom: 0;
    font-weight: 500;
    opacity: .85;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

    .shift-config-tabs .nav-item .nav-link:hover {
        border-color: var(--primary-color);
        background-color: var(--primary01);
        color: var(--primary-color);
        opacity: 1;
    }

    .shift-config-tabs .nav-item .nav-link.active {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
        opacity: 1;
    }


/* ===== Dark-mode fix for Bootstrap contextual table rows =====
   The template's .table-danger sets a hard-coded `background-color: #fff` and `color: #000`
   directly on the row (styles.css), on top of a translucent danger tint on the cells. That
   glares against the dark theme (and rendered the rows white once the tint was removed). In
   dark mode make .table-danger rows identical to a normal row: override the direct white
   background and point --bs-table-bg at --custom-white (which is the dark row colour in dark
   mode), with default text. The OVERDUE badge remains the only marker. Applies everywhere
   .table-danger is used on a row (e.g. the Helpdesk overdue-ticket rows). */
[data-theme-mode="dark"] .table-danger {
    --bs-table-color: var(--default-text-color);
    --bs-table-bg: var(--custom-white);
    --bs-table-border-color: var(--default-border);
    --bs-table-striped-bg: var(--custom-white);
    --bs-table-striped-color: var(--default-text-color);
    --bs-table-active-bg: var(--gray-1);
    --bs-table-active-color: var(--default-text-color);
    --bs-table-hover-bg: var(--gray-1);
    --bs-table-hover-color: var(--default-text-color);
    color: var(--default-text-color);
    background-color: transparent;
}

/* Row action menus inside a scrollable table are positioned with Popper's fixed strategy (see
   assets/scripts/common.js) so .table-responsive can no longer clip them. Fixed positioning
   lifts the menu out of the table's stacking order, and the theme's base .dropdown-menu only
   sets z-index:10 — too low to clear the sticky header/sidebar — so raise it here. */
.table-responsive .dropdown-menu {
    z-index: 1055;
}

/* ===== Chrome autofill vs. the dark theme =====
   When Chrome fills an input (or the user picks one of its saved suggestions) the browser paints
   its own pale near-white background through a UA shadow style that a plain `background-color`
   cannot override — so that one field turned white while every other control stayed dark
   (reported on Holiday Name, /holiday). An inset box-shadow is the only way to repaint it, and
   the UA also forces the text colour, hence -webkit-text-fill-color. The absurd transition delay
   is the standard trick that stops the highlight flashing back in on focus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--form-control-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--form-control-bg) inset !important;
    -webkit-text-fill-color: var(--default-text-color) !important;
    caret-color: var(--default-text-color);
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* ===== Duration / minute inputs =====
   Client/Shared/InputComponents/DurationInput.razor and MinuteInput.razor. Fields that are STORED as
   whole minutes are entered as "8 hr 30 min" / "10 min" instead of as a raw 510 or 10. Only the sizing
   is set here: each part is held to its content so a two-digit hour box and a 00-59 dropdown don't
   stretch across the whole grid column. Borders, focus ring and dark mode stay the theme's own
   .input-group styling, so the controls read as native form controls. */
.duration-input {
    max-width: 230px;
}

    .duration-input > .form-control {
        max-width: 64px;
    }

    .duration-input > .form-select {
        max-width: 80px;
    }

.minute-input {
    max-width: 145px;
}

    .duration-input > .input-group-text,
    .minute-input > .input-group-text {
        padding-left: .5rem;
        padding-right: .5rem;
    }

/* ============================================================================
   Leave management — HRMS > Leave Policy (/leave-policy)
   Moved out of the <style> block that used to sit at the top of
   LeavePolicyConfig.razor: a page-level <style> is re-injected into the DOM on
   every render of that page, and it is invisible to anyone searching the
   stylesheets for these class names. Loaded globally from index.html.
   ========================================================================== */
.policy-group {
    border: 1px solid var(--default-border, #e9edf6);
    border-radius: .5rem;
    padding: .5rem .85rem;
    margin-bottom: .6rem;
}

    .policy-group > summary {
        cursor: pointer;
        font-weight: 600;
        list-style: revert;
        padding: .15rem 0;
        user-select: none;
    }

    .policy-group[open] > summary {
        margin-bottom: .6rem;
        border-bottom: 1px dashed var(--default-border, #e9edf6);
    }

.rule-help {
    cursor: help;
    font-size: .9rem;
    opacity: .6;
}

    .rule-help:hover {
        opacity: 1;
    }

.policy-q {
    padding: .45rem 0 .55rem;
    border-bottom: 1px dashed var(--default-border, #e9edf6);
    margin-bottom: .55rem;
}

    .policy-q:last-child {
        border-bottom: 0;
        margin-bottom: 0;
    }

.policy-q-label {
    font-weight: 500;
    display: block;
    margin-bottom: .4rem;
}

.policy-reveal {
    margin-top: .55rem;
}

.yn-group .btn {
    min-width: 3.4rem;
}

/* Grid columns are flex items, and a flex item's automatic minimum size is its CONTENT — so the
   6-column types table pushed its own column past the declared 5/12 and the policy card, still
   sized at 7/12, was drawn overlapping it. min-width:0 lets the column hold its grid width and
   the .table-responsive wrapper scrolls the table inside it instead of pushing outwards. */
.policy-split > [class*="col-"] {
    min-width: 0;
}

/* Keep inputs on one baseline even when their labels wrap to different heights. */
.policy-num > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

    .policy-num > [class*="col-"] > .form-control,
    .policy-num > [class*="col-"] > .form-select {
        margin-top: auto;
    }

/* ── Horizontal tab strip ──────────────────────────────────────────────────────
   One LINE of tabs that scrolls between an arrow at each end, for a tab list too
   long to fit: Shift configuration, and the employee form / profile, whose tabs
   used to run down the left in a column. The strip is the scroller; the arrows
   sit outside it and drive it through scrollElementById (custom.js), which
   clamps at both ends — so an arrow at the end of its travel simply does nothing.
   Named .shift-config-tabs / .shift-tab-nav until a second page needed them. */
.tab-scroll-strip {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
}

/* The arrows ARE the scrollbar here — a native one under a row of tabs is noise. */
.tab-scroll-strip::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* Tabs keep their own width instead of squeezing to fit, because squeezing is what
   wraps a label onto a second line — the layout this strip exists to replace. */
.tab-scroll-strip > .nav-item,
.tab-scroll-strip > .nav-link {
    flex-shrink: 0;
}

/* tab-style-7 spaces its pills for a vertical column; on one line that gap just
   detaches them from the strip's bottom border. */
.tab-scroll-strip > .nav-link {
    margin-block-end: 0;
}

.tab-scroll-arrow {
    flex-shrink: 0;
    width: 2.25rem;
    border: 0;
    background-color: transparent;
    color: var(--default-text-color);
    font-size: 1.25rem;
    line-height: 1;
}

.tab-scroll-arrow:hover {
    color: var(--primary-color);
    background-color: var(--primary01);
}

/* ── .line-tabs — the page-level tab strip (underline nav) ──────────────────────
   One quiet style for every scrolling tab strip: muted icon + label, the selected tab
   in the theme primary with a 2px underline. No per-tab colours, no pill fills.
   Markup (either a <ul> of <li><a class="nav-link"> or Bootstrap pill <button>s):
       <div class="line-tabs mb-3">
           <button class="tab-scroll-arrow">…</button>
           <ul class="nav flex-nowrap tab-scroll-strip">…nav-link…</ul>
           <button class="tab-scroll-arrow">…</button>
       </div>
   Styles any .nav-link inside, so Bootstrap's data-bs-toggle="pill" tabs (which flip
   .active themselves) and Blazor-driven tabs look identical. Do NOT add nav-tabs /
   nav-pills / tab-style-* to the strip — their active fills would fight this. */
.line-tabs {
    display: flex;
    align-items: stretch;
    /* The baseline is an INSET shadow, not a border: the strip scrolls horizontally, so the
       selected tab's underline cannot hang below it — it is drawn over this line instead. */
    box-shadow: inset 0 -1px 0 var(--default-border);
}

.line-tabs > .tab-scroll-strip {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.line-tabs > .tab-scroll-arrow {
    width: 32px;
    margin-bottom: 1px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 1rem;
}

.line-tabs > .tab-scroll-arrow:hover {
    color: var(--default-text-color);
}

.line-tabs .nav-item {
    margin: 0;
}

.line-tabs .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500; /* same weight in every state, so selecting a tab never shifts the row */
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s;
}

.line-tabs .nav-link > i {
    margin: 0 !important; /* the strip's gap spaces the icon; drop any me-1 left on it */
    font-size: 16px;
    line-height: 1;
}

.line-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background-color .15s;
}

.line-tabs .nav-link:hover,
.line-tabs .nav-link:focus {
    color: var(--default-text-color);
    background: transparent;
}

.line-tabs .nav-link:hover::after {
    background: var(--default-border);
}

.line-tabs .nav-link.active,
.line-tabs .nav-link.active:hover,
.line-tabs .nav-link.active:focus {
    color: var(--primary-color);
    background: transparent;
}

.line-tabs .nav-link.active::after {
    background: var(--primary-color);
}

.line-tabs .nav-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 6px;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .line-tabs .nav-link {
        height: 42px;
        padding: 0 10px;
        font-size: 13px;
    }

    .line-tabs .nav-link > i {
        font-size: 15px;
    }
}

/* ── tab-style-2 icon chips ────────────────────────────────────────────────────
   The theme draws the icon inside a nav-link of .tab-style-2 as a 1.875rem circle
   (styles.css) using `display:inline-block` plus padding. An inline-block box
   positions its glyph on the TEXT BASELINE, so the icon sat low and off-centre in
   its circle — and, because the padding is symmetric while the glyph is not, it
   also crowded one edge. Every recruitment hub strip uses this class (Job Board's
   Job Openings / Candidates / Talent Pools, and the Candidate Info tabs), so the
   fix belongs here rather than on any one page.
   Flex centering does the work; the padding is dropped and the glyph is sized
   relative to the circle instead, which is what keeps the ring of space around it even. */
.tab-style-2 .nav-item .nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}


/* ============================================================================
   Helpdesk — ticket list surface (ESS > My Support Tickets,
   Client/Pages/ESS/Helpdesk/MyTickets.razor — /ess/helpdesk/my-tickets)

   Presentation only: the page still renders the same Bootstrap table, the same
   `badge text-bg-*` classes returned by GetStatusBadgeClass/GetPriorityBadgeClass
   and the same paging buttons — this file only restyles them. Colour meaning is
   untouched (success stays green, danger stays red …); the badges are re-tinted
   from solid fills to soft pills, which reads far better on the dark theme.

   Lives here rather than in a <style> block on the page for the same reason as
   the leave-policy rules below: a page-level <style> is re-injected into the DOM
   on every render and is invisible to anyone grepping the stylesheets.
   ========================================================================== */

/* ── Page header ──────────────────────────────────────────────────────────── */
.hd-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.hd-page-head-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

/* Tinted tile instead of a loose inline icon: gives the title a fixed optical
   anchor at any font size, and matches the module tiles used elsewhere. */
.hd-head-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), .12);
    border: 1px solid rgba(var(--primary-rgb), .2);
}

.hd-head-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--default-text-color);
}

.hd-head-sub {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--text-muted);
    opacity: .8;
}

/* ── Card surface ─────────────────────────────────────────────────────────── */
.hd-card {
    background-color: var(--custom-white);
    border: 1px solid var(--default-border);
    border-radius: .85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px -12px rgba(0, 0, 0, .25);
    overflow: hidden;
}

/* ── Fill the available height ────────────────────────────────────────────
   A single-row grid used to collapse to ~150px and float in a large empty
   region. The layout is already a flex column down to .main-content
   (`.page{min-height:100vh}` -> `.main-content{flex:1 0 auto}`, styles.css),
   so the grid only needs that chain continued into the card — no viewport
   arithmetic, and it stays correct whatever the header/footer heights are.

   .main-content is shared by every page, so it is switched to a flex column
   ONLY when it holds this page, via :has(). Where :has() is unsupported the
   whole rule is dropped and the card simply sizes to its content, which is
   the previous behaviour — so this degrades safely. */
.main-content:has(> .hd-page) {
    display: flex;
    flex-direction: column;
}

.hd-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    /* The head keeps its natural height; the card takes everything left over. */
    .hd-page > .hd-card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

/* The rows sit at the top of the grown area and the slack falls below them,
   which is what puts the pager on the bottom edge of the card. */
.hd-card > .table-responsive {
    flex: 1 1 auto;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
/* Bootstrap paints cell backgrounds with an inset box-shadow driven by
   --bs-table-*-bg, so hover/header colours are set through those variables
   rather than a background-color that the shadow would cover. */
.hd-table {
    --bs-table-hover-bg: rgba(var(--primary-rgb), .06);
    margin-bottom: 0;
    vertical-align: middle;
}

    .hd-table > thead > tr > th {
        padding: .85rem 1.15rem;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--text-muted);
        /* --light-rgb, not --default-background: the latter is a dark navy in the
           light theme (styles.css :root) and would paint a near-black header band
           behind dark text. --light-rgb is the neutral surface in both themes. */
        background-color: rgb(var(--light-rgb));
        border-bottom: 1px solid var(--default-border);
        box-shadow: none;
    }

    /* No box-shadow reset here: Bootstrap paints the hover row through the cell's
       inset shadow, so clearing it would silently disable :hover. */
    .hd-table > tbody > tr > td {
        padding: .95rem 1.15rem;
        font-size: .84rem;
        border-bottom: 1px solid var(--default-border);
    }

    .hd-table > tbody > tr:last-child > td {
        border-bottom: 0;
    }

    .hd-table > tbody > tr {
        transition: background-color .15s ease;
    }

.hd-col-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── Cell content ─────────────────────────────────────────────────────────── */
.hd-ticket-no {
    font-weight: 600;
    font-size: .84rem;
    letter-spacing: .02em;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}

    .hd-ticket-no:hover,
    .hd-ticket-no:focus-visible {
        color: var(--primary-color);
        text-decoration: underline;
        text-underline-offset: .2em;
    }

.hd-subject {
    display: block;
    max-width: 32rem;
    font-weight: 500;
    color: var(--default-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-date {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.hd-due-time {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

    .hd-due-time i {
        font-size: .75rem;
        opacity: .7;
    }

.hd-muted-dash {
    color: var(--text-muted);
    opacity: .45;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
/* Shape/size only; the colour still comes from the text-bg-* class the page
   already emits, re-tinted below. !important is required because Bootstrap's
   own .text-bg-* declarations carry it. */
.hd-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .hd-badge.hd-badge-dot::before {
        content: "";
        flex: 0 0 auto;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background-color: currentColor;
    }

    .hd-badge.text-bg-primary {
        color: rgb(var(--primary-rgb)) !important;
        background-color: rgba(var(--primary-rgb), .14) !important;
        border-color: rgba(var(--primary-rgb), .28);
    }

    .hd-badge.text-bg-success {
        color: rgb(var(--success-rgb)) !important;
        background-color: rgba(var(--success-rgb), .14) !important;
        border-color: rgba(var(--success-rgb), .28);
    }

    .hd-badge.text-bg-danger {
        color: rgb(var(--danger-rgb)) !important;
        background-color: rgba(var(--danger-rgb), .14) !important;
        border-color: rgba(var(--danger-rgb), .28);
    }

    .hd-badge.text-bg-warning {
        color: rgb(var(--warning-rgb)) !important;
        background-color: rgba(var(--warning-rgb), .14) !important;
        border-color: rgba(var(--warning-rgb), .28);
    }

    .hd-badge.text-bg-info {
        color: rgb(var(--info-rgb)) !important;
        background-color: rgba(var(--info-rgb), .14) !important;
        border-color: rgba(var(--info-rgb), .28);
    }

    /* Neutral chip for the "nothing is happening" states (Closed / On Hold / Low).
       Deliberately NOT --secondary-rgb: in this theme that variable is green
       (styles.css :root), which would read as a success state. --light-rgb is the
       theme's own neutral surface and flips correctly between light and dark. */
    .hd-badge.text-bg-secondary {
        color: var(--text-muted) !important;
        background-color: rgb(var(--light-rgb)) !important;
        border-color: var(--default-border);
    }

/* Overdue is the one state that must be caught at a glance, so it keeps a
   stronger tint and an icon — but stays a pill, not a shouting solid block. */
.hd-overdue {
    color: rgb(var(--danger-rgb));
    background-color: rgba(var(--danger-rgb), .16);
    border-color: rgba(var(--danger-rgb), .4);
}

    .hd-overdue i {
        font-size: .7rem;
    }

/* ── Row action ───────────────────────────────────────────────────────────── */
.hd-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    border-radius: .45rem;
}

    .hd-view-btn i {
        font-size: .75rem;
    }

/* ── Pager ────────────────────────────────────────────────────────────────── */
/* Right-aligned, on the same edge as the New Ticket button, and padded to the
   same 1.15rem as the table cells so Next lines up with the Action column.
   margin-top:auto pins it to the bottom of the card once the card is taller
   than its rows. */
.hd-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: auto;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--default-border);
}

.hd-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--default-text-color);
    background-color: transparent;
    border: 1px solid var(--default-border);
    border-radius: .5rem;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

    .hd-pager-btn:hover:not(:disabled) {
        color: var(--primary-color);
        background-color: rgba(var(--primary-rgb), .08);
        border-color: rgba(var(--primary-rgb), .4);
    }

    .hd-pager-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.hd-pager-current {
    min-width: 2.4rem;
    padding: .35rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: .5rem;
}

/* ── Empty / loading states ───────────────────────────────────────────────── */
/* flex:1 so the empty/loading state centres in the grown card instead of
   sitting at its top edge. */
.hd-state {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.25rem;
    gap: .4rem;
}

.hd-state-title {
    margin: .5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--default-text-color);
}

.hd-state-text {
    margin: 0;
    max-width: 26rem;
    font-size: .82rem;
    color: var(--text-muted);
    opacity: .85;
}

.hd-state-actions {
    margin-top: .9rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .hd-subject {
        max-width: 18rem;
    }
}

/* Below tablet the row becomes a card: the header row is dropped and each cell
   carries its own label from data-label, so nothing has to scroll sideways. */
@media (max-width: 767.98px) {
    .hd-page-head {
        align-items: flex-start;
    }

    .hd-card {
        border-radius: .75rem;
    }

    .hd-table > thead {
        display: none;
    }

    .hd-table,
    .hd-table > tbody,
    .hd-table > tbody > tr,
    .hd-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .hd-table > tbody > tr {
        padding: .35rem 0;
        border-bottom: 1px solid var(--default-border);
    }

    .hd-table > tbody > tr:last-child {
        border-bottom: 0;
    }

    .hd-table > tbody > tr > td,
    .hd-table > tbody > tr:last-child > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .45rem 1rem;
        border-bottom: 0;
        text-align: left;
    }

        .hd-table > tbody > tr > td::before {
            content: attr(data-label);
            flex: 0 0 auto;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--text-muted);
            opacity: .7;
        }

    .hd-subject {
        max-width: 60vw;
        text-align: right;
    }

    .hd-col-action {
        width: auto;
    }

    .hd-pager-btn span {
        display: none;
    }
}

/* ============================================================================
   Helpdesk — ticket detail surface, shared by the employee and the admin view
   (Client/Pages/ESS/Helpdesk/TicketDetail.razor, AdminTicketManagement.razor)

   One set of rules for both pages so the toolbar, the heading and the field
   grid cannot drift apart again. Presentation only.
   ========================================================================== */

/* ── Toolbar: back link on the left, ticket action on the right ───────────── */
.hdt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.hdt-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Every navigation / action button on the two pages: a 42px target whatever
   the label, instead of the btn-sm the pages used to mix with full-size ones. */
.hdt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .5rem 1.1rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Neutral, for navigation. --light-rgb rather than the secondary variants:
   --secondary-rgb is green in this theme and would read as a commit action. */
.hdt-btn-nav {
    color: var(--default-text-color);
    background-color: rgb(var(--light-rgb));
    border: 1px solid var(--default-border);
}

    .hdt-btn-nav:hover,
    .hdt-btn-nav:focus-visible {
        color: var(--primary-color);
        background-color: rgba(var(--primary-rgb), .1);
        border-color: rgba(var(--primary-rgb), .3);
    }

/* ── Heading: the subject leads, number + status sit under it ─────────────── */
.hdt-head {
    margin-bottom: 1.25rem;
}

.hdt-subject {
    margin: 0 0 .4rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--default-text-color);
    overflow-wrap: anywhere;
}

.hdt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.hdt-ticket-no {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── Field grid ───────────────────────────────────────────────────────────── */
.hdt-label {
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.hdt-value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--default-text-color);
    overflow-wrap: anywhere;
}

/* Free text typed by a person (description, resolution notes, comments): keep
   their line breaks and let an unbroken string (a URL, a pasted log line) wrap
   instead of pushing the card wider than the page. */
.hdt-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .hdt-subject {
        font-size: 1.15rem;
    }

    /* One button per line: a 42px target that is also the full width of a phone. */
    .hdt-toolbar > .hdt-btn,
    .hdt-toolbar-left > .hdt-btn {
        width: 100%;
    }

    .hdt-toolbar-left {
        width: 100%;
    }
}

/* InfoTip Wide="true": a sentence-length tip in a wider, left-aligned box. Bootstrap's default is a 200px
   centred column, which wrapped a two-sentence tip into a tall, hard-to-read block. Opt-in via the class
   InfoTip adds through data-bs-custom-class, so every other tooltip keeps its look. */
.tooltip.infotip-wide {
    --bs-tooltip-max-width: 340px;
}

.tooltip.infotip-wide .tooltip-inner {
    max-width: 340px;
    text-align: left;
}

/* Offer History popup (Recruitment > Offers, OfferList.razor) — a vertical timeline.
   Done steps: green tick, joined to the next by a solid green line. The CURRENT step: filled marker and
   a tinted card in the offer's status colour. Steps still to come: dashed outline and dashed line.
   Colour comes from --oh-rgb, set by the oh-tone-* class on the banner / each step. */
.oh-tone-primary { --oh-rgb: var(--primary-rgb); }
.oh-tone-success { --oh-rgb: var(--success-rgb); }
.oh-tone-danger { --oh-rgb: var(--danger-rgb); }
.oh-tone-warning { --oh-rgb: var(--warning-rgb); }
.oh-tone-info { --oh-rgb: var(--info-rgb); }
.oh-tone-purple { --oh-rgb: var(--purple-rgb); }
/* A mid grey that reads on both the light and the dark theme (never --secondary-rgb: that one is green). */
.oh-tone-neutral { --oh-rgb: 134, 142, 150; }

@media (min-width: 576px) {
    .offer-hist-dialog {
        max-width: 620px;
    }
}

.offer-hist-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.offer-hist-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 50rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    vertical-align: middle;
    color: rgb(var(--oh-rgb));
    background: rgba(var(--oh-rgb), .12);
}

.offer-hist-now {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    background: rgba(var(--oh-rgb), .07);
    border: 1px solid rgba(var(--oh-rgb), .25);
}

.offer-hist-now-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: rgb(var(--oh-rgb));
    background: rgba(var(--oh-rgb), .15);
}

.offer-hist-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.offer-hist-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.offer-hist-item {
    position: relative;
    display: flex;
    gap: .875rem;
    padding-bottom: 1.5rem;
}

    .offer-hist-item:last-child {
        padding-bottom: 0;
    }

    /* The connector down to the next step, centred under the 2rem marker. */
    .offer-hist-item::before {
        content: "";
        position: absolute;
        top: 2rem;
        bottom: 0;
        left: calc(1rem - 1px);
        border-left: 2px dashed var(--default-border);
    }

    .offer-hist-item:last-child::before {
        display: none;
    }

    .offer-hist-item.is-done::before {
        border-left-style: solid;
        border-left-color: rgb(var(--success-rgb));
    }

.offer-hist-marker {
    position: relative;
    z-index: 1;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-muted);
    background: var(--custom-white);
    border: 2px dashed var(--default-border);
}

.is-done > .offer-hist-marker {
    color: #fff;
    background: rgb(var(--success-rgb));
    border: 2px solid rgb(var(--success-rgb));
}

.is-current > .offer-hist-marker,
.is-stopped > .offer-hist-marker {
    color: #fff;
    background: rgb(var(--oh-rgb));
    border: 2px solid rgb(var(--oh-rgb));
    box-shadow: 0 0 0 .3rem rgba(var(--oh-rgb), .18);
}

.offer-hist-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .3rem;
}

.is-current > .offer-hist-body,
.is-stopped > .offer-hist-body {
    margin-top: -.3rem;
    padding: .6rem .85rem;
    border-radius: .5rem;
    background: rgba(var(--oh-rgb), .06);
    border: 1px solid rgba(var(--oh-rgb), .3);
}

.is-skipped > .offer-hist-marker,
.is-skipped > .offer-hist-body {
    opacity: .6;
}

.offer-hist-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .125rem .75rem;
}

.offer-hist-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--default-text-color);
}

.is-upcoming .offer-hist-title,
.is-skipped .offer-hist-title {
    font-weight: 500;
    color: var(--text-muted);
}

.offer-hist-when {
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.offer-hist-meta {
    font-size: .8125rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

.offer-hist-note {
    font-size: .8125rem;
    font-style: italic;
    margin-top: .4rem;
    padding: .4rem .65rem;
    border-radius: .375rem;
    background: rgb(var(--light-rgb));
    border-left: 3px solid var(--default-border);
}

/* The approval chain, one row per level, under the approval step. */
.offer-hist-levels {
    list-style: none;
    margin: .5rem 0 0;
    padding: .125rem 0 .125rem .75rem;
    border-left: 2px solid var(--default-border);
}

    .offer-hist-levels > li {
        font-size: .8125rem;
        padding: .2rem 0;
    }

    .offer-hist-levels .is-approved i {
        color: rgb(var(--success-rgb));
    }

    .offer-hist-levels .is-rejected i {
        color: rgb(var(--danger-rgb));
    }

    .offer-hist-levels .is-waiting {
        font-weight: 500;
    }

        .offer-hist-levels .is-waiting i {
            color: rgb(var(--warning-rgb));
        }

    .offer-hist-levels .is-open {
        color: var(--text-muted);
    }

/* Pipeline Stages config (Recruitment > Pipeline, RecruitmentPipeline.razor): the stage table scrolls
   inside its own box, header row pinned (thead carries sticky-top, so it needs a solid background).
   The scrollbar is set explicitly because styles.css hides every vertical scrollbar in the app
   (*::-webkit-scrollbar { width: 0 }); scrollbar-width/-color take precedence over that rule. */
.pipeline-stage-scroll {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(134, 142, 150, .7) rgb(var(--light-rgb));
}

    .pipeline-stage-scroll thead th {
        background: var(--custom-white);
        box-shadow: inset 0 -1px 0 var(--default-border);
    }


/* ==========================================================================
   RECRUITMENT LIST DESIGN SYSTEM                                  (v1 · 2026-09)
   --------------------------------------------------------------------------
   Scoped to `.recruit-page` — the wrapper class added to the `.container-fluid`
   root of every Recruitment (ATS) list page: Job Requisitions, Job Board,
   Job Applications, Assessments, Interview Schedules, Offers, Offer Acceptance,
   Recruitment Approvals, Talent Pool, Interview Rounds.

   WHY SCOPED: the building blocks restyled here — .custom-card, .table,
   .page-header-breadcrumb, .pagination, GridNoData's .no-data-img, .nav-tabs —
   are shared app-wide. Everything is nested under `.recruit-page`, so ONLY the
   recruitment lists pick up the premium treatment and every other module renders
   byte-for-byte as before. This layer is presentation only: it changes no markup
   behaviour, no business logic, no API.

   THEME-SAFE: colours come from the theme rgb tokens (styles.css :root), so both
   light and dark render correctly. It deliberately avoids the two traps recorded
   elsewhere in this file — --default-background (a dark navy in the LIGHT theme)
   and --secondary-rgb (a green, not a neutral). Neutral surfaces use --light-rgb;
   the single accent is --primary-rgb. Row hover uses the Bootstrap 5.3 table
   state variable (--bs-table-bg-state), never box-shadow:none, so hover is never
   silently disabled.
   ========================================================================== */

.recruit-page {
    --rp-accent: var(--primary-rgb);
    --rp-radius: 14px;
    --rp-radius-sm: 8px;
    --rp-border: var(--default-border);
    --rp-surface: var(--custom-white);
    --rp-hover: rgba(var(--primary-rgb), .055);
    --rp-band: rgb(var(--light-rgb));
}

/* ── Page header : title · description · primary action ─────────────────── */
.recruit-page .page-header-breadcrumb { margin-bottom: 1.15rem; }

.recruit-page .page-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--default-text-color);
    margin-bottom: .3rem !important;
}

.recruit-page .page-header-breadcrumb .breadcrumb { font-size: .74rem; margin: 0; }
.recruit-page .breadcrumb-item + .breadcrumb-item::before { opacity: .45; padding: 0 .4rem; }
.recruit-page .breadcrumb-item a { color: var(--text-muted); text-decoration: none; }
.recruit-page .breadcrumb-item a:hover { color: rgb(var(--primary-rgb)); }
.recruit-page .breadcrumb-item.active { color: rgb(var(--primary-rgb)); font-weight: 500; }

/* One-line contextual description, sits under the title on every list page. */
.recruit-page .rp-subtitle {
    font-size: .8rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin: .3rem 0 0;
    max-width: 68ch;
}

/* ── Card shell ────────────────────────────────────────────────────────── */
.recruit-page .custom-card {
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .03);
    /* No overflow:hidden — several of these pages open Bootstrap dropdowns inside the
       card (row actions, header menus); clipping them to the card would hide the menu.
       The card-body's own padding keeps table/pagination off the rounded corners, so
       the radius reads clean without it. Edge-to-edge (card-body p-0) tables get their
       own bottom-corner rounding below. */
}
/* Round the bottom corners of an edge-to-edge table so it doesn't square off the card. */
.recruit-page .custom-card > .card-body.p-0 > .table-responsive:last-child {
    border-bottom-left-radius: var(--rp-radius);
    border-bottom-right-radius: var(--rp-radius);
    overflow: hidden;
}

.recruit-page .custom-card > .card-header {
    padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--rp-border);
    background: transparent;
    min-height: 62px;
    row-gap: .55rem;
}

.recruit-page .card-title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--default-text-color);
    text-transform: none;
    line-height: 1.25;
}

/* ── Toolbar : search + filters + actions ──────────────────────────────── */
.recruit-page .card-header .input-group .form-control,
.recruit-page .card-header .input-group .input-group-text {
    border-color: var(--rp-border);
    height: 38px;
}
.recruit-page .card-header .input-group .form-control {
    min-width: 210px;
    font-size: .82rem;
    border-right: 0;
}
.recruit-page .card-header .input-group .form-control:focus {
    box-shadow: none;
    border-color: rgba(var(--primary-rgb), .5);
}
.recruit-page .card-header .input-group:focus-within {
    border-radius: var(--rp-radius-sm);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
.recruit-page .card-header .input-group > :first-child { border-top-left-radius: var(--rp-radius-sm); border-bottom-left-radius: var(--rp-radius-sm); }
.recruit-page .card-header .input-group > :last-child { border-top-right-radius: var(--rp-radius-sm); border-bottom-right-radius: var(--rp-radius-sm); }
.recruit-page .card-header .input-group .input-group-text {
    background: var(--rp-band);
    color: var(--text-muted);
    transition: color .15s ease, background .15s ease;
}
.recruit-page .card-header .input-group .input-group-text:hover { color: rgb(var(--primary-rgb)); }

/* Filter (sliders) launcher — a clean square affordance with the count badge. */
.recruit-page .card-header a.input-group-text {
    border-radius: var(--rp-radius-sm) !important;
    background: var(--rp-band);
    border: 1px solid var(--rp-border);
    color: var(--text-muted);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.recruit-page .card-header a.input-group-text:hover {
    color: rgb(var(--primary-rgb));
    border-color: rgba(var(--primary-rgb), .45);
    background: rgba(var(--primary-rgb), .06);
}

/* Buttons — keep the btn-*-transparent family (house standard), add polish. */
.recruit-page .btn { border-radius: var(--rp-radius-sm); font-weight: 600; }
.recruit-page .btn:not(.btn-icon):not(.btn-sm) { padding-inline: 1rem; }
.recruit-page .card-header .btn-icon.btn-sm { border-radius: var(--rp-radius-sm); }
.recruit-page .btn-success-transparent:hover { box-shadow: 0 2px 8px rgba(var(--success-rgb), .22); }

/* Active-filter chips ("Status: …  ✕", "Accepting applications ✕"). */
.recruit-page .card-header .btn-danger-transparent.btn-sm {
    border-radius: 999px;
    font-weight: 500;
    font-size: .74rem;
    background: rgba(var(--danger-rgb), .1);
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.recruit-page .table-responsive { border-radius: 0; }

.recruit-page .table {
    --bs-table-hover-bg: var(--rp-hover);
    margin-bottom: 0;
    color: var(--default-text-color);
    border-color: var(--rp-border);
}

/* Header row: a quiet neutral band, small-caps label styling, no heavy rules. */
.recruit-page .table > thead > tr > th {
    background: var(--rp-band);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--rp-border);
    border-top: 0;
    white-space: nowrap;
    vertical-align: middle;
}
.recruit-page .table > thead > tr > th:first-child { padding-left: 1.25rem; border-top-left-radius: 0; }
.recruit-page .table > thead > tr > th:last-child { padding-right: 1.25rem; }

/* Kill the 2px currentColor rule .table-group-divider paints between head/body:
   it reads as a hard black line. The header band already separates the two. */
.recruit-page .table > tbody.table-group-divider { border-top: 0; }

.recruit-page .table > tbody > tr > td {
    padding: .8rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--rp-border);
    border-top: 0;
    font-size: .84rem;
}
.recruit-page .table > tbody > tr > td:first-child { padding-left: 1.25rem; }
.recruit-page .table > tbody > tr > td:last-child { padding-right: 1.25rem; }
.recruit-page .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Row hover via the 5.3 state var (not box-shadow:none) so it works on every
   recruitment table whether or not the page put .table-hover on it. */
.recruit-page .table > tbody > tr { transition: background-color .12s ease; }
.recruit-page .table > tbody > tr:hover > * { --bs-table-bg-state: var(--rp-hover); }

/* Primary link cell (candidate / designation names). */
.recruit-page .table a.fw-medium,
.recruit-page .table a.fw-600,
.recruit-page .table a.text-primary { text-decoration: none; }
.recruit-page .table a.fw-medium:hover,
.recruit-page .table a.fw-600:hover,
.recruit-page .table a.text-primary:hover { text-decoration: underline; }

/* Row action buttons: even, tappable, quietly separated. */
.recruit-page .table td .btn-icon.btn-sm {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Badges / chips ────────────────────────────────────────────────────── */
.recruit-page .badge {
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .01em;
    padding: .38em .62em;
    line-height: 1.2;
}
.recruit-page .badge:not(.rounded-pill) { border-radius: 6px; }
.recruit-page .table .badge.bg-light { border: 1px solid var(--rp-border); }

/* ── Empty state (GridNoData) ──────────────────────────────────────────── */
.recruit-page .no-data-img { max-width: 168px; opacity: .95; }
.recruit-page td > div > .no-data-img + p,
.recruit-page .no-data-img ~ p {
    font-size: .9rem !important;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1rem !important;
}
.recruit-page tbody td[colspan] { padding-block: 2.6rem; }

/* ── Loading skeleton (GridSkeleton) ───────────────────────────────────── */
.recruit-page .placeholder { border-radius: 6px; height: .72rem; opacity: .55; }

/* ── Pagination footer ─────────────────────────────────────────────────── */
.recruit-page .pagination-style-4 { margin-block: 1rem !important; }
.recruit-page .pagination-style-4 .page-link {
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius-sm) !important;
    margin: 0 3px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--default-text-color);
    background: var(--rp-surface);
    transition: all .15s ease;
}
.recruit-page .pagination-style-4 .page-link:hover {
    border-color: rgba(var(--primary-rgb), .5);
    color: rgb(var(--primary-rgb));
    background: rgba(var(--primary-rgb), .06);
}
.recruit-page .pagination-style-4 .page-item.active .page-link {
    background: rgb(var(--primary-rgb));
    border-color: rgb(var(--primary-rgb));
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), .28);
}
.recruit-page .page-size-select {
    height: 34px;
    border-radius: var(--rp-radius-sm);
    border: 1px solid var(--rp-border);
    font-size: .8rem;
    font-weight: 600;
}
.recruit-page .pagination + *,
.recruit-page .d-flex > .text-muted.fs-11 { font-size: .78rem !important; }

/* ── Tabs (hiring hub / assessment kind / approval tabs) ───────────────── */
.recruit-page .nav-tabs { border-bottom: 1px solid var(--rp-border); gap: .15rem; }
.recruit-page .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .84rem;
    padding: .6rem .95rem;
    border-radius: var(--rp-radius-sm) var(--rp-radius-sm) 0 0;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.recruit-page .nav-tabs .nav-link:hover {
    color: rgb(var(--primary-rgb));
    background: rgba(var(--primary-rgb), .05);
}
.recruit-page .nav-tabs .nav-link.active {
    color: rgb(var(--primary-rgb));
    background: transparent;
    border-bottom-color: rgb(var(--primary-rgb));
}

/* ── Responsive : header stacks, toolbar wraps, search goes full width ──── */
@media (max-width: 575.98px) {
    .recruit-page .page-title { font-size: 1.15rem; }
    .recruit-page .custom-card > .card-header { padding: .85rem 1rem; }
    .recruit-page .card-header .input-group { width: 100% !important; }
    .recruit-page .card-header .input-group .form-control { min-width: 0; }
    .recruit-page .card-header > .d-flex { width: 100%; }
    .recruit-page .table > thead > tr > th,
    .recruit-page .table > tbody > tr > td { padding: .65rem .75rem; }
    .recruit-page .table > thead > tr > th:first-child,
    .recruit-page .table > tbody > tr > td:first-child { padding-left: 1rem; }
}


/* ==========================================================================
   RECRUITMENT MODALS  (v1 · 2026-09) — Panel & Feedback, Assessment Submissions
   --------------------------------------------------------------------------
   Scoped to `.rp-modal`, a class added to a Bootstrap `.modal-content`. It is
   SELF-CONTAINED — it declares its own tokens, so it renders correctly whether
   or not an ancestor carries `.recruit-page` (the Panel & Feedback board is a
   standalone component opened from several pages). Presentation only: no markup
   behaviour, no logic, no API change.

   THEME-SAFE: colours come from the theme rgb tokens, so light + dark both read
   correctly. Neutral surfaces use --light-rgb (never --default-background, a
   dark navy in the LIGHT theme); the single accent is --primary-rgb; status
   colours use the semantic success/warning/danger/info tokens. Never sets
   box-shadow:none on a table cell (would kill row hover).
   ========================================================================== */
.rp-modal {
    --rpm-radius: 14px;
    --rpm-radius-sm: 9px;
    --rpm-border: var(--default-border);
    --rpm-band: rgb(var(--light-rgb));
    --rpm-hover: rgba(var(--primary-rgb), .06);
    border: 1px solid var(--rpm-border);
    border-radius: var(--rpm-radius);
    box-shadow: 0 16px 48px rgba(16, 24, 40, .24);
    overflow: hidden;
}

/* ── Header : candidate/name prominent, subtitle muted, quiet band ──────── */
.rp-modal .modal-header {
    align-items: flex-start;
    gap: .75rem;
    padding: 1.05rem 1.35rem;
    background: linear-gradient(180deg, var(--rpm-band), transparent);
    border-bottom: 1px solid var(--rpm-border);
}
.rp-modal .modal-title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--default-text-color);
}
.rp-modal .rpm-sub {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .18rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.rp-modal .modal-header .btn-close { margin: -.15rem -.15rem auto 0; }

/* Candidate's designation · department under the name (Interview Panel board) + its View Resume. */
.rp-modal .rpm-role {
    font-size: .82rem;
    font-weight: 500;
    color: var(--default-text-color);
    margin-top: .2rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.rp-modal .rpm-role i { color: rgb(var(--primary-rgb)); font-size: .9rem; }
.rp-modal .rpm-head-action { margin-left: auto; align-self: center; flex-shrink: 0; }

/* Header summary chips (assessment: candidates / evaluated / pending). */
.rp-modal .rpm-head-stats { display: flex; gap: 1.1rem; margin-left: auto; padding-right: .35rem; }
.rp-modal .rpm-hs { text-align: center; line-height: 1.1; }
.rp-modal .rpm-hs b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--default-text-color); }
.rp-modal .rpm-hs span { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

/* ── Body / footer ─────────────────────────────────────────────────────── */
.rp-modal .modal-body { padding: 1.2rem 1.35rem; }
.rp-modal .modal-body::-webkit-scrollbar { width: 10px; }
.rp-modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(134, 142, 150, .45);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.rp-modal .modal-footer {
    padding: .8rem 1.35rem;
    border-top: 1px solid var(--rpm-border);
    background: var(--rpm-band);
}

/* ── Meta chips (scheduled / conducted) ────────────────────────────────── */
.rp-modal .rpm-meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.rp-modal .rpm-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .74rem; font-weight: 500; color: var(--text-muted);
    background: var(--rpm-band); border: 1px solid var(--rpm-border);
    border-radius: 999px; padding: .26rem .6rem;
}
.rp-modal .rpm-chip i { font-size: .88rem; opacity: .85; }

/* ── Section shell + heading ───────────────────────────────────────────── */
.rp-modal .rp-sec { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rpm-border); }
.rp-modal .rp-sec.rp-sec-first { margin-top: .9rem; padding-top: 0; border-top: 0; }
.rp-modal .rp-sec-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.rp-modal .rp-sec-head > i { color: rgb(var(--primary-rgb)); font-size: 1.05rem; }
.rp-modal .rp-sec-title {
    font-size: .92rem; font-weight: 700; letter-spacing: -.005em;
    color: var(--default-text-color); margin: 0;
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.rp-modal .rp-sec-title .rpm-count { font-weight: 600; color: var(--text-muted); font-size: .78rem; }

/* ── Note / banner (info · lock · warning) ─────────────────────────────── */
.rp-modal .rp-note {
    display: flex; gap: .6rem; align-items: flex-start;
    font-size: .78rem; line-height: 1.5; color: var(--default-text-color);
    border: 1px solid var(--rpm-border); border-left-width: 3px;
    border-radius: var(--rpm-radius-sm); padding: .6rem .8rem; background: var(--rpm-band);
}
.rp-modal .rp-note > i { font-size: 1rem; margin-top: .06rem; flex-shrink: 0; }
.rp-modal .rp-note-info { border-left-color: rgb(var(--primary-rgb)); }
.rp-modal .rp-note-info > i { color: rgb(var(--primary-rgb)); }
.rp-modal .rp-note-lock { border-left-color: rgb(var(--warning-rgb)); background: rgba(var(--warning-rgb), .07); }
.rp-modal .rp-note-lock > i { color: rgb(var(--warning-rgb)); }
.rp-modal .rp-note-warn { border-left-color: rgb(var(--danger-rgb)); background: rgba(var(--danger-rgb), .07); }
.rp-modal .rp-note-warn > i { color: rgb(var(--danger-rgb)); }

/* ── People list (panel members) ───────────────────────────────────────── */
.rp-modal .rp-people { display: flex; flex-direction: column; gap: .5rem; }
.rp-modal .rp-person {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .8rem; border: 1px solid var(--rpm-border);
    border-radius: var(--rpm-radius-sm); background: var(--custom-white);
    transition: background .12s ease, border-color .12s ease;
}
.rp-modal .rp-person:hover { background: var(--rpm-hover); border-color: rgba(var(--primary-rgb), .32); }
.rp-modal .rp-ava {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: rgb(var(--primary-rgb));
    background: rgba(var(--primary-rgb), .12);
}
.rp-modal .rp-person-main { min-width: 0; flex: 1; }
.rp-modal .rp-person-name { font-weight: 600; font-size: .86rem; color: var(--default-text-color); }
.rp-modal .rp-you {
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .13);
    border-radius: 5px; padding: .05rem .32rem; margin-left: .35rem; vertical-align: middle;
}
.rp-modal .rp-roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.rp-modal .rp-role {
    font-size: .68rem; font-weight: 600; color: var(--text-muted);
    background: rgb(var(--light-rgb)); border: 1px solid var(--rpm-border);
    border-radius: 5px; padding: .08rem .4rem;
}
.rp-modal .rp-role-lead { color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .1); border-color: rgba(var(--primary-rgb), .25); }

/* ── Evaluation form card — the primary interactive area ────────────────── */
.rp-modal .rp-eval {
    border: 1px solid rgba(var(--primary-rgb), .28);
    border-radius: var(--rpm-radius-sm);
    background: rgba(var(--primary-rgb), .035);
    padding: 1rem 1.1rem;
}
.rp-modal .rp-eval .form-label,
.rp-modal .rp-field .form-label { font-size: .76rem; font-weight: 600; color: var(--text-muted); margin-bottom: .3rem; }
.rp-modal .rp-req { color: rgb(var(--danger-rgb)); }

/* Star rating (1–5) — sets the same numeric value as the old number box.
   Block-level flex with a fixed height: as inline-flex it shared a line with the inline label
   whenever it fit, and its width changes with the rating (filled vs outline glyph, "—/5" vs "4/5"),
   so the stars jumped between beside-the-label and below-it. Fixed star boxes + a fixed-width
   value keep every state the same size, aligned with the inputs next to it. */
.rp-modal .rp-stars { display: flex; align-items: center; gap: .1rem; height: 2.5rem; }
.rp-modal .rp-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
    border: 0; background: transparent; padding: 0; line-height: 1; cursor: pointer;
    color: rgba(134, 142, 150, .45); font-size: 1.4rem;
    transition: color .1s ease, transform .1s ease;
}
.rp-modal .rp-star:hover { transform: scale(1.12); }
.rp-modal .rp-star.on { color: rgb(var(--warning-rgb)); }
.rp-modal .rp-star:focus-visible { outline: 2px solid rgba(var(--primary-rgb), .6); outline-offset: 2px; border-radius: 5px; }
.rp-modal .rp-star-val { font-size: .82rem; font-weight: 700; color: var(--default-text-color); margin-left: .45rem; min-width: 2.2rem; font-variant-numeric: tabular-nums; }

/* ── Metric strip ──────────────────────────────────────────────────────── */
.rp-modal .rp-metrics { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .95rem; }
.rp-modal .rp-metric {
    flex: 1 1 130px; border: 1px solid var(--rpm-border); border-radius: var(--rpm-radius-sm);
    padding: .6rem .85rem; background: var(--custom-white);
}
.rp-modal .rp-metric-label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.rp-modal .rp-metric-val { font-size: 1.2rem; font-weight: 800; color: var(--default-text-color); line-height: 1.2; margin-top: .18rem; display: flex; align-items: baseline; gap: .3rem; }
.rp-modal .rp-metric-val small { font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.rp-modal .rp-metric-accent { border-color: rgba(var(--primary-rgb), .32); background: rgba(var(--primary-rgb), .05); }
.rp-modal .rp-metric-accent .rp-metric-val { color: rgb(var(--primary-rgb)); }
.rp-modal .rp-metric-val > .ri-star-fill { color: rgb(var(--warning-rgb)); font-size: 1rem; }

/* ── Score cell (assessment submissions) ───────────────────────────────── */
.rp-modal .rp-score { font-size: 1.08rem; font-weight: 800; color: var(--default-text-color); white-space: nowrap; }
.rp-modal .rp-score small { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.rp-modal .rp-score-muted { color: var(--text-muted); }
.rp-modal .rp-progress { height: 5px; border-radius: 999px; background: rgb(var(--light-rgb)); overflow: hidden; margin-top: .4rem; max-width: 130px; }
.rp-modal .rp-progress > span { display: block; height: 100%; border-radius: 999px; background: rgb(var(--primary-rgb)); }

/* ── Compact timeline (assignment) ─────────────────────────────────────── */
.rp-modal .rp-tl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; }
.rp-modal .rp-tl dt {
    color: var(--text-muted); font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; font-size: .62rem; align-self: center; white-space: nowrap;
}
.rp-modal .rp-tl dd { margin: 0; color: var(--default-text-color); font-weight: 600; font-size: .78rem; }

/* ── Refined table (consolidated / submissions) ────────────────────────── */
.rp-modal table.rp-table { width: 100%; margin: 0; color: var(--default-text-color); }
.rp-modal table.rp-table.rp-table-card { border: 1px solid var(--rpm-border); border-radius: var(--rpm-radius-sm); overflow: hidden; }
.rp-modal table.rp-table > thead > tr > th {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
    color: var(--text-muted); background: var(--rpm-band);
    padding: .55rem .8rem; border-bottom: 1px solid var(--rpm-border); white-space: nowrap; vertical-align: middle;
}
.rp-modal table.rp-table > tbody > tr > td {
    padding: .65rem .8rem; border-bottom: 1px solid var(--rpm-border);
    vertical-align: middle; font-size: .82rem;
}
.rp-modal table.rp-table > tbody > tr:last-child > td { border-bottom: 0; }
.rp-modal table.rp-table.rp-table-hover > tbody > tr { transition: background-color .12s ease; }
.rp-modal table.rp-table.rp-table-hover > tbody > tr:hover > td { background: var(--rpm-hover); }
.rp-modal table.rp-table.rp-table-top > tbody > tr > td { vertical-align: top; }
.rp-modal .rp-cmt { color: var(--default-text-color); overflow-wrap: anywhere; }
.rp-modal .rp-cmt-empty { color: var(--text-muted); }

/* Filter toolbar */
.rp-modal .rp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
.rp-modal .rp-filters .form-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: .25rem; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .rp-modal .rpm-head-stats { display: none; }
}
@media (max-width: 575.98px) {
    .rp-modal .modal-header,
    .rp-modal .modal-body,
    .rp-modal .modal-footer { padding-inline: 1rem; }
    .rp-modal .rp-eval .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .rp-modal .rp-person { flex-wrap: wrap; }
}

/* ============================================================================
   ESS Refer & Earn — "Refer a Candidate" (Client/Pages/ESS/Referral/ReferJob.razor)
   Selected-opening details panel under the "Which role are you referring for?" select.
   A one-line <option> can only carry "JOB0001 · Title — Dept · Branch · Work type"; this
   panel lays the same facts out so the employee can verify the vacancy before submitting.
   Surfaces use --light-rgb (neutral in BOTH themes) — never --default-background.
   ============================================================================ */
.ref-scope .ref-opening { padding: .75rem 1rem; border: 1px solid var(--default-border); border-radius: .5rem; background: rgb(var(--light-rgb)); }
.ref-scope .ref-opening-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.ref-scope .ref-opening-title { font-weight: 600; }
.ref-scope .ref-opening-code { letter-spacing: .03em; }
.ref-scope .ref-opening-grid { display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; row-gap: .25rem; font-size: .85rem; }
.ref-scope .ref-opening-grid dt { font-weight: 500; color: var(--text-muted); }
.ref-scope .ref-opening-grid dd { margin: 0; }
/* Open Positions cards (ReferralHome.razor): the Job Code chip beside the title. */
.ref-scope .ref-job-code { font-size: .72rem; letter-spacing: .03em; vertical-align: middle; }


/* Light mode leaves data-theme-mode unset on load, so match "not dark" rather than "light". */
html:not([data-theme-mode="dark"]) {
    --default-border: #c9c9c9;
}

html:not([data-theme-mode="dark"]) .card.custom-card {
    border: 1px solid var(--default-border);
}

.chat-quote {
    border-inline-start: 3px solid var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.08);
    border-radius: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    max-width: 300px;
    text-align: start;
    overflow: hidden;
}

.chat-reply-btn {
    visibility: hidden;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    margin-inline: 0.25rem;
    cursor: pointer;
}

.chat-content li:hover .chat-reply-btn,
.chat-reply-btn:focus-visible {
    visibility: visible;
}

@media (hover: none) {
    .chat-reply-btn {
        visibility: visible;
    }
}

/* Sits on top of the conversation just above the absolutely positioned footer. */
.main-chat-area .chat-reply-bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 4.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--custom-white);
    border-top: 1px solid var(--default-border);
}

    .main-chat-area .chat-reply-bar .chat-quote {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

.main-chat-area.chat-replying .chat-content > ul,
.main-chat-area.chat-replying .chat-content .simplebar-content > ul {
    padding-bottom: 3.5rem;
}
/* ── Side-menu search ─────────────────────────────────────────────────────────────────────── */
/* Sticks to the top of the scrolling sidebar so it stays reachable anywhere in a long menu. */
.side-menu-search {
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background-color: var(--menu-bg);
    border-block-end: 1px solid var(--menu-border-color);
}

.side-menu-search__icon {
    font-size: 0.8rem;
    color: var(--menu-prime-color);
    opacity: 0.7;
}

.side-menu-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--menu-prime-color);
    font-size: 0.8125rem;
    outline: none;
}

    .side-menu-search__input::placeholder {
        color: var(--menu-prime-color);
        opacity: 0.55;
    }

.side-menu-search__clear {
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    font-size: 0.7rem;
    color: var(--menu-prime-color);
    opacity: 0.7;
    cursor: pointer;
}

.side-menu-search__empty {
    display: none;
    padding: 0.75rem 1.4rem;
    color: var(--menu-prime-color);
    font-size: 0.8125rem;
    opacity: 0.65;
}

    .side-menu-search__empty--show {
        display: block;
    }

/* No room for it once the sidebar is down to icons, and no sidebar at all in horizontal layout —
   the same states in which the theme drops .side-menu__label. */
@media (min-width: 992px) {
    [data-nav-layout="horizontal"] .side-menu-search,
    [data-nav-layout="horizontal"] .side-menu-search__empty,
    [data-nav-style="menu-click"][data-toggled="menu-click-closed"] .side-menu-search,
    [data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] .side-menu-search,
    [data-nav-style="icon-click"][data-toggled="icon-click-closed"] .side-menu-search,
    [data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] .side-menu-search,
    [data-vertical-style="closed"][data-toggled="close-menu-close"] .side-menu-search,
    [data-vertical-style="doublemenu"] .side-menu-search,
    [data-vertical-style="overlay"][data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .side-menu-search,
    [data-vertical-style="icontext"][data-toggled="icon-text-close"]:not([data-icon-text="open"]) .side-menu-search,
    [data-vertical-style="detached"][data-toggled="detached-close"]:not([data-icon-overlay="open"]) .side-menu-search {
        display: none;
    }
}

/* ── ESS › Refer & Earn › New Referral: form actions ────────────────────────
   Cancel is a neutral grey in every state so it never reads like the green
   Submit. Deliberately not btn-*-secondary: --secondary-rgb is green here. */
.rfj-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.rfj-btn-cancel {
    color: var(--default-text-color);
    background-color: rgba(134, 142, 150, .1);
    border: 1px solid rgba(134, 142, 150, .35);
}

    .rfj-btn-cancel:hover {
        color: var(--default-text-color);
        background-color: rgba(134, 142, 150, .22);
        border-color: rgba(134, 142, 150, .55);
    }

    .rfj-btn-cancel:focus-visible {
        color: var(--default-text-color);
        background-color: rgba(134, 142, 150, .22);
        border-color: rgb(134, 142, 150);
        box-shadow: 0 0 0 .2rem rgba(134, 142, 150, .35);
        outline: 0;
    }

    .rfj-btn-cancel:active {
        color: var(--default-text-color) !important;
        background-color: rgba(134, 142, 150, .3) !important;
        border-color: rgb(134, 142, 150) !important;
    }

.rfj-actions .btn-success-transparent:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--success-rgb), .35);
    outline: 0;
}

/* Lead Forecast dashboard */
.lf-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.72) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .lf-hero::after {
        content: "";
        position: absolute;
        inset-inline-end: -40px;
        inset-block-start: -40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .lf-hero .lf-muted {
        color: rgba(255, 255, 255, 0.8);
    }

    .lf-hero .lf-chip {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

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

.lf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.55rem;
    border-radius: 50rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.lf-chip-up {
    background: rgba(var(--success-rgb), 0.12);
    color: rgb(var(--success-rgb));
}

.lf-chip-down {
    background: rgba(var(--danger-rgb), 0.12);
    color: rgb(var(--danger-rgb));
}

.lf-chip-flat {
    background: rgba(var(--light-rgb), 0.6);
    color: var(--default-text-color);
}

.lf-warmup {
    background: radial-gradient(circle at 92% 8%, rgba(var(--primary-rgb), 0.14), transparent 42%), var(--custom-white);
}

.lf-warmup-stat {
    border: 1px dashed var(--default-border);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.lf-preview-tile {
    border: 1px dashed var(--default-border);
    border-radius: 0.5rem;
    padding: 1rem;
    height: 100%;
    opacity: 0.85;
}

.lf-bar-track {
    height: 6px;
    border-radius: 50rem;
    background: rgba(var(--primary-rgb), 0.1);
    overflow: hidden;
}

    .lf-bar-track > span {
        display: block;
        height: 100%;
        border-radius: 50rem;
        background: var(--primary-color);
        transition: width 0.6s ease;
    }

.lf-weekdays {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 170px;
}

.lf-weekday {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

    .lf-weekday .lf-weekday-bar {
        width: 100%;
        max-width: 42px;
        min-height: 4px;
        border-radius: 6px 6px 2px 2px;
        background: rgba(var(--primary-rgb), 0.22);
        transition: height 0.6s ease;
    }

    .lf-weekday.lf-weekday-top .lf-weekday-bar {
        background: var(--primary-color);
    }

.lf-insight + .lf-insight {
    border-block-start: 1px dashed var(--default-border);
}

.lf-stage-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.lf-hero .lf-hero-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Home screen (Task + CRM) header toolbar: every control the same height so the row reads as one line,
   whatever font size or btn-sm each one uses. The avatar picker is 38px too. */
.home-toolbar > .btn,
.home-toolbar > .btn-group > .btn,
.home-toolbar > .dropdown > .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
}

/* .btn-list gives a bottom margin to the wrapper AND to the button/link inside it; the inner one lifts
   it 3px above the rest of the row. (`.dropdown > a` is the ExecutivePicker avatar.) */
.home-toolbar > .btn-group > .btn,
.home-toolbar > .dropdown > .btn,
.home-toolbar > .dropdown > a {
    margin-bottom: 0;
}

/* ESS Dashboard — "Who's Out Today" and "Who's Late Today" cards (Client/Pages/ESS/EssDashboard.razor). Built so nothing around them moves:
   the Custom range opens as an overlay instead of pushing the list down, the range line under the title is always
   there (blank while loading), and a paged list holds the height of a full page so the last, shorter page does not
   pull the footer up. */
.ess-late-period {
    width: auto;
    min-width: 9.5rem;
}

.ess-late-range {
    min-height: 1.1rem;
}

.ess-late-custom {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    left: auto;
    width: 16rem;
    max-width: calc(100vw - 2rem);
}

.ess-late-list {
    max-height: 320px;
    overflow-y: auto;
    transition: opacity .15s ease;
}

    .ess-late-list.is-paged {
        min-height: calc(5 * 3.375rem);
    }

    .ess-late-list.is-loading {
        opacity: .55;
        pointer-events: none;
    }

.ess-late-row {
    min-height: 3.375rem;
}

    /* lets a long name truncate instead of pushing the badge out of the row */
    .ess-late-row > .ess-late-who {
        min-width: 0;
    }

.ess-late-empty {
    min-height: 7rem;
}

/* The shared Pagination footer is sized for full-width grids; inside a card on a phone let it wrap. */
.ess-late-footer > div,
.ess-late-footer .pagination {
    flex-wrap: wrap;
}

/* Designation Job Role / Job Description shown back from its Quill editor (RichText.Safe) on the
   Vacancy, Requisition, Apply Now and Careers pages. Quill writes one <p> per line, so the default
   paragraph margin would double-space every line; lists keep a small indent. */
.rich-text p {
    margin-bottom: 0;
}
.rich-text ol,
.rich-text ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* Header profile dropdown: user card (name, user type, email) + tenant code with copy, then menu. */
.main-header-container .header-profile-dropdown {
    width: 16rem;
}

.header-profile-dropdown .header-profile-head {
    padding: 1rem;
    border-bottom: 1px solid var(--default-border);
}

    .header-profile-dropdown .header-profile-head .min-w-0 {
        min-width: 0;
    }

.header-profile-dropdown .header-profile-tenant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--default-border);
    border-radius: 0.5rem;
    background-color: rgb(var(--light-rgb));
}

/* ── View-only file viewer (ViewOnlyFileViewer.razor + assets/js/view-only-doc.js) ──────────────
   The reader may look, not take: no selection, no drag, and printing comes out blank while a viewer
   is open (html.vod-open is set by the script). The page backdrop is a neutral dark grey in both
   themes, like a PDF reader's, so white pages stand out either way. */
.vof-modal .modal-header { align-items: center; gap: .75rem; }
.vof-modal .vof-title { display: flex; align-items: baseline; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.vof-modal .vof-pages-count { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.vof-modal .vof-zoom { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.vof-modal .vof-zoom-val { min-width: 4rem; }
.vof-modal .modal-header .btn-close { margin: 0; }
.vof-modal .vof-body {
    position: relative;
    height: 80vh;
    overflow: auto;
    background: #525659;
    -webkit-user-select: none;
    user-select: none;
}
.vof-modal .vof-pages { padding: 16px; min-height: 100%; }
.vof-modal .vof-pages .vod-page {
    display: block;
    margin: 0 auto 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.vof-modal .vof-pages .vod-image { display: block; max-width: 100%; margin: 0 auto; }
.vof-modal .vof-pages .vod-docx-host { all: initial; display: block; }
.vof-modal .vof-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 100%;
    padding: 2rem;
    text-align: center;
    color: #f1f3f5;
}
.vof-modal .vof-state-overlay { position: absolute; inset: 0; z-index: 1; background: #525659; }
.vof-modal .vof-state-icon { font-size: 2.5rem; opacity: .8; }

@media print {
    html.vod-open body { display: none !important; }
}

/* ===== Apply Now (public application form, Pages/HRMS/ApplyNow.razor) =====
   Dialling-code dropdown beside the mobile / WhatsApp number. It was an inline max-width:140px, which
   on a phone left the number box too narrow to show its own placeholder ("WhatsApp Numb"). */
.apply-now .apply-isd { flex: 0 0 140px; max-width: 140px; }
@media (max-width: 575.98px) {
    .apply-now .apply-isd { flex-basis: 118px; max-width: 118px; padding-left: .5rem; }
}
/* Quill content (JD / JR) can carry pasted images and tables wider than a phone. */
.apply-now .rich-text img,
.apply-now .rich-text table { max-width: 100%; height: auto; }
.apply-now .rich-text table { display: block; overflow-x: auto; }
/* iOS Safari sizes a date input to its own intrinsic width, pushing it past the column edge. */
.apply-now input[type="date"].form-control { min-width: 0; }
@supports (-webkit-touch-callout: none) {
    .apply-now input[type="date"].form-control { -webkit-appearance: none; appearance: none; min-height: calc(1.5em + .75rem + 2px); }
}

/* Unsaved edit in a grid row. Not table-warning: the theme hard-codes #fff/#000 into it, so on the
   dark theme the row turns cream under light text. */
.table > tbody > tr.row-unsaved > * {
    --bs-table-bg-type: rgba(var(--warning-rgb), 0.15);
    color: var(--default-text-color);
}