/*.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;
}

/* A table row can't show a box-shadow reliably, so a highlighted row glows through its cells instead
   (same blue, same timing) — e.g. the approval a notification opened (CMP-0072). */
@keyframes highlight-row {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(0, 123, 255, 0.22); }
}

tr.animate-highlight {
    animation: none;
}

tr.animate-highlight > td {
    animation: highlight-row 1.5s ease-in-out;
}

.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; }

/* ── StarRating component (Shared/InputComponents/StarRating.razor) ────── */
.star-rating { display: flex; align-items: center; gap: .1rem; min-height: 2.25rem; border-radius: 6px; }
.star-rating.is-invalid { outline: 1px solid rgb(var(--danger-rgb)); outline-offset: 2px; }
.star-rating-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;
}
.star-rating-star:hover:not(:disabled) { transform: scale(1.12); }
.star-rating-star.on { color: rgb(var(--warning-rgb)); }
.star-rating-star:disabled { cursor: default; }
.star-rating-star:focus-visible { outline: 2px solid rgba(var(--primary-rgb), .6); outline-offset: 2px; border-radius: 5px; }
.star-rating-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;
    }

    /* Who's Late rows carry a third line (Early / Late By), so five of them need more than 320px */
    .ess-late-list.ess-late-list-3line {
        max-height: 400px;
    }

.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);
}

/* Notifications bell (PageLayout). The theme hides every .notifications-dropdown below 576px; the bell is
   the only way to reach /notifications from the header, so it stays — and its menu fits the phone. */
@media (max-width: 575.98px) {
    .header-element.header-bell { display: block !important; }
    .main-header-container .header-bell .main-header-dropdown { width: calc(100vw - 2rem); max-width: 22rem; }
}
/* The bell's list scrolls inside the menu (header and "View all" stay put) instead of running off the
   bottom of the screen. Rows wrap to two lines rather than one cut-off line: the text column needs an
   explicit min-width:0, because a flex child otherwise grows to its content and pushes the row past the
   menu's edge (this theme has no global min-w-0 utility). */
.header-bell .bell-list { max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain; }
.header-bell .bell-list .dropdown-item { white-space: normal; }
.header-bell .bell-body { min-width: 0; }
.header-bell .bell-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Emoji newer than the PC's own emoji font - two emoji sent from a phone in Team Chat drew two
   empty boxes on a Windows 10 PC (2026-10-14). The system emoji fonts stay first, so emoji the PC has keep
   their usual look; Noto Color Emoji (index.html, same family Android draws) fills in only what is missing. */
:root {
    --default-font-family: "Poppins", sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

/* Arabic UI (index.html sets lang="ar" and loads Cairo): Poppins has no Arabic letters. */
html[lang="ar"] {
    --default-font-family: "Cairo", "Poppins", sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

/* Upload previews and avatars are fixed squares; with no object-fit a non-square picture was pressed into the
   square, which read as a shrunken, squashed photo (CMP-0055). Upload previews show the whole picture (a logo
   or signature must never be cropped); round avatars and the Profile photo fill their frame. */
.image-item img {
    object-fit: contain;
}

img.avatar {
    object-fit: cover;
}

/* The Profile page's own photo: a larger square, filled. */
.profile-photo-canvas .image-item {
    margin: 0;
}

/* A square whatever the column allows: up to 200px, smaller in a narrow column (height follows the width). */
.profile-photo-canvas .image-item img,
.profile-photo-canvas .overlay-icons {
    width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    border-radius: 12px;
}

.profile-photo-canvas .image-item img {
    object-fit: cover;
}