html {
  font-size: 14px;
}

/* Restored: Task detail page header and back link styles */
.task-detail .task-header {
    position: relative;
    z-index: 3;
}

@media (min-width: 992px) {
    .task-detail .sidebar-card {
        position: relative;
        z-index: 2;
    }
}

.task-detail .task-title {
    margin-top: 0.25rem;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
/*
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

html {
  position: relative;
  min-height: 100%;
}
/*Cards*/
.card.custom-card {
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}
.custom-card-style1 {
    border: 1px solid #dee2e6;
}
/*Css for Buttons*/
.horizon-btn {
    border: none;
    box-shadow: none;
    outline: none;
}
.horizon-btn {
    font-size: 12px;
}
.flex-with-gap {
    display: flex;
    gap: 0.5rem;
}
.horizon-btn-with-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 251px;
}
.horizon-btn:active, .horizon-btn:focus {
    box-shadow: none !important;
}

/*Sweet Alert Popup*/
.swal2-container .swal2-styled.swal2-cancel {
    background: rgb(var(--danger-rgb)) !important;
    color: white !important;
}
/*Tab Nav*/
.horizon-tab-nav .nav-tabs .nav-link {
    border-radius: 6px 6px 0 0;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 1rem;
}
.horizon-tab-nav .nav-tabs .nav-link:hover {
    color: #374151;
}
.horizon-tab-nav .nav-tabs .nav-link.active {
    background: #ffffff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-bottom-color: #ffffff;
    box-shadow: none;
}
.horizon-tab-nav .nav-tabs .nav-link:hover {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-bottom-color: white;
}

.modal-max-width-80-percent {
    max-width: 80% !important;
}

.pcl-modal-sticky-top {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Processing Activity: make only the content area horizontally scrollable */
.procact-right-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.procact-right-scroll-inner {
    min-width: max-content;
}

.vendor-detail-modal #vendorDetailTabContent > .tab-pane > div:not(:empty) {
    margin-top: 0.55rem !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    border-bottom: 1px solid #ece8e2;
}

.vendor-detail-modal #vendorDetailTabContent > .tab-pane > div:empty {
    display: none;
}

.vendor-detail-modal .modal-footer {
    padding: 0.7rem 1rem;
    border-top: 1px solid #e7e4de;
    background: #fcfbf9;
}

.vendor-detail-modal .vendor-summary-actions .btn {
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
}

.vendor-detail-modal .vendor-summary-actions {
    margin-top: auto;
    padding-top: 0.75rem;
}
.bu-div {
    max-width: 270px;
    text-align: right;
    overflow: scroll;
}
.bu-div .badge {
    margin-bottom: 3px;
}
.navigation-icon-primary {
    color: #253c83;
}
.navigation-icon-meant-foam {
    color: rgb(var(--meant-foam-rgb))
}
.navigation-icon {
    font-size: 24px;
    cursor:pointer;
}
.navigation-icon-disabled {
    color: #bebebe;
    cursor: not-allowed;
}
.rounded-border-div {
    border-radius: var(--border-radius);
}
/*Title with icon*/
.title-with-icon .title-icon, .title-with-icon .title-text {
    font-size: 16px;
    line-height: 16px;
}
/*Add Item Popover*/
.add-popover .popover-body {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Task */
.task-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.5rem;
    border-radius: 8px 8px 0 0;
}

.task-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.task-meta {
    color: #6b7280;
    font-size: 0.875rem;
}

.status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-open {
    background-color: #fef3c7;
    color: #92400e;
}

.status-in-progress {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-resolved {
    background-color: #d1fae5;
    color: #065f46;
}

.conversation-container {
    background: #fff;
    border-radius: 0 0 8px 8px;
    min-height: 500px;
}

/* Sidebar feedback link pinned to bottom */
.app-sidebar .main-sidebar .main-menu {
    display: flex;
    flex-direction: column;
    width:100%
}

.app-sidebar .main-sidebar .main-menu .pcl-feedback-nav-item {
    margin-top: auto;
    margin-bottom: 0.75rem;
}

.pcl-feedback-stars {
    display: inline-flex;
    gap: 2rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #9ca3af;
}

.pcl-feedback-star.active {
    color: #f59e0b;
}

/* Feedback modal visual polish */
.pcl-feedback-modal-bottom-left .modal-content {
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
    border: 1px solid #e5e7eb;
}

.pcl-feedback-modal-bottom-left .modal-header {
    border-bottom: none;
    padding: 1.25rem 1.5rem 0.75rem;
}

.pcl-feedback-modal-bottom-left .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}

.pcl-feedback-modal-bottom-left .modal-body {
    padding: 0.75rem 1.5rem 1rem;
}

.pcl-feedback-modal-bottom-left .modal-footer {
    border-top: none;
    padding: 0 1.5rem 1.25rem;
    gap: 1rem;
}

.pcl-feedback-modal-bottom-left .form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
}

.pcl-feedback-modal-bottom-left textarea.form-control {
    border-radius: 10px;
    font-size: 0.9rem;
    min-height: 110px;
}

.pcl-feedback-modal-bottom-left textarea.form-control:focus {
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.25);
}

.pcl-feedback-stars {
    padding: 0.1rem 0;
}

.pcl-feedback-star {
    transition: transform 0.12s ease, color 0.12s ease;
}

.pcl-feedback-star:hover {
    transform: scale(1.1);
    color: #fbbf24;
}

.pcl-feedback-modal-bottom-left .btn-outline-secondary {
    border-radius: 9999px;
    padding-inline: 1.25rem;
}

.pcl-feedback-modal-bottom-left #pclFeedbackSubmitBtn {
    border-radius: 9999px;
    padding-inline: 1.6rem;
}

.pcl-feedback-floating-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1060;
    background-color: rgb(var(--primary-rgb));
    border-color: rgb(var(--primary-rgb));
    color: #ffffff;
    font-weight: 600;
    padding: 0.6rem 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
}

.pcl-feedback-floating-btn .pcl-feedback-icon-close {
    display: none;
    font-size: 1.1rem;
}

.pcl-feedback-floating-btn.is-open .pcl-feedback-icon-open {
    display: none;
}

.pcl-feedback-floating-btn.is-open .pcl-feedback-icon-close {
    display: inline-block;
}

.pcl-feedback-floating-btn i {
    font-size: 1.25rem;
}

.pcl-feedback-floating-btn:hover,
.pcl-feedback-floating-btn:focus {
    background-color: rgba(var(--primary-rgb), 0.9);
    border-color: rgba(var(--primary-rgb), 0.9);
    color: #ffffff;
}

@media (max-width: 768px) {
    .pcl-feedback-floating-btn {
        bottom: 1rem;
        left: 1rem;
        padding: 0.5rem 0.85rem;
    }
}

/* Feedback popup container near floating button (no global backdrop) */
.pcl-feedback-popup {
    position: fixed;
    left: 1.5rem;
    bottom: 4.5rem;
    z-index: 1070;
    display: none;
}

.pcl-feedback-popup.show {
    display: block;
}

.pcl-feedback-modal-bottom-left .modal-dialog {
    margin: 0;
    max-width: none;
    width: 350px;
}

@media (max-width: 576px) {
    .pcl-feedback-popup {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 4rem;
    }

    .pcl-feedback-modal-bottom-left .modal-dialog {
        width: auto;
    }
}

.message {
    padding: 1rem;
    margin: 1rem;
    border-radius: 8px;
    max-width: 80%;
}

.message-customer {
    background-color: #f3f4f6;
    margin-right: auto;
}

.message-agent {
    background-color: #1e40af;
    color: white;
    margin-left: auto;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.message-sender {
    font-weight: 600;
}

.message-time {
    color: #6b7280;
}

.message-agent .message-time {
    color: #dbeafe;
}

.reply-input {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    resize: vertical;
    min-height: 100px;
}

.workflow-progress {
    padding: 1.5rem;
}

.workflow-progress .progress-bar {
    height: 8px;
    border-radius: 4px;
    background-color: #e5e7eb;
    overflow: hidden;
    opacity: 1 !important;
}

.workflow-progress .progress-fill {
    height: 100%;
    background-color: #3b82f6;
    transition: width 0.3s ease;
}

.workflow-step {
    padding: 1rem;
    margin: 0.5rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.step-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.status-complete {
    background-color: #10b981;
    color: white;
}

.status-in-progress {
    background-color: #3b82f6;
    color: white;
}

.status-pending {
    background-color: #e5e7eb;
    color: #6b7280;
}

.status-not-applicable {
    background-color: #f3f4f6;
    color: #9ca3af;
}

.status-tag {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tag-complete {
    background-color: #d1fae5;
    color: #065f46;
}

.tag-in-progress {
    background-color: #dbeafe;
    color: #1e40af;
}

.tag-pending {
    background-color: #f3f4f6;
    color: #6b7280;
}

.tag-not-applicable {
    background-color: #fafafa;
    color: #9ca3af;
}

.internal-note {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.note-author {
    font-weight: 600;
    color: #1f2937;
}

.note-time {
    color: #6b7280;
    font-size: 0.875rem;
}

.note-tag {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #fef2f2;
    color: #dc2626;
}

.warning-banner {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 1.125rem;
    color: #1f2937;
}

.sidebar-body {
    padding: 1.5rem;
}

.detail-item {
    margin-bottom: 1.5rem;
}

.detail-label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.detail-value {
    color: #1f2937;
    font-size: 0.875rem;
}

    .detail-value.customer-name {
        font-weight: 600;
        font-size: 1rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .detail-value.customer-email {
        color: #6b7280;
        font-size: 0.875rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

.category-tag {
    background-color: #dbeafe;
    color: #1e40af;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.time-logged {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-edit {
    color: #6b7280;
    cursor: pointer;
}

    .time-edit:hover {
        color: #374151;
    }

.action-button {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-outline {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

    .btn-outline:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

.btn-danger {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: white;
}

    .btn-danger:hover {
        background: #b91c1c;
        border-color: #b91c1c;
    }

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.875rem;
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    overflow: hidden;
}
.customer-info > div {
    min-width: 0;
    overflow: hidden;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Timeline Styles */
.timeline {
    padding: 0;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

    .timeline-item:last-child {
        margin-bottom: 0;
    }

.timeline-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.timeline-icon-new {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid transparent;
}

    .timeline-icon-new i {
        font-size: 1rem;
        color: inherit;
    }

.timeline-connector {
    width: 1px;
    height: 2rem;
    background-color: #e5e7eb;
    margin-top: 0.5rem;
}

/* Icon background colors */
.timeline-icon.text-primary {
    background-color: #f3f4f6;
    color: #8b5cf6;
}

.timeline-icon.text-success {
    background-color: #f3f4f6;
    color: #10b981;
}

.timeline-icon.text-info {
    background-color: #f3f4f6;
    color: #3b82f6;
}

.timeline-icon.text-warning {
    background-color: #f3f4f6;
    color: #f59e0b;
}

.timeline-content {
    flex: 1;
    min-width: 0;
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.timeline-title {
    margin: 0;
    font-weight: 500;
    color: #1f2937;
    font-size: 0.875rem;
}

.timeline-time-new {
    margin: 0;
    color: #6b7280;
    font-size: 0.75rem;
}

.timeline-description {
    margin: 0.25rem 0 0 0;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.timeline-author {
    margin: 0.25rem 0 0 0;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Modal specific styles */
.modal-lg {
    max-width: 800px;
}
.modal-header {
    border-bottom: 1px solid #e5e7eb;
}
/*
.modal-title {
    font-weight: 600;
    color: #1f2937;
}*/

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
}

.btn-close {
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
}

.btn-close:hover {
    color: #374151;
}

/* Log Time Modal Styles */
.log-time-modal .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1.5rem;
}

.log-time-modal .modal-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.25rem;
}

.log-time-modal .modal-body {
    padding: 1.5rem;
}

.log-time-modal .form-label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.log-time-modal .form-control {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

    .log-time-modal .form-control:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
    }

    .log-time-modal .form-control[readonly] {
        background-color: #f9fafb;
        color: #6b7280;
    }

.log-time-modal .input-group-text {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    color: #6b7280;
}

.log-time-modal .form-text {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.log-time-modal .btn-resolve {
    background-color: #10b981;
    border-color: #10b981;
    color: white;
}

    .log-time-modal .btn-resolve:hover {
        background-color: #059669;
        border-color: #059669;
    }

.log-time-modal .btn-cancel {
    background-color: #fff;
    border-color: #d1d5db;
    color: #374151;
}

    .log-time-modal .btn-cancel:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
    }

/* ===============================
   Task Detail Page   
   =============================== */
.task-detail { padding-bottom: 1.5rem; }


/* Messages */
.task-detail .message {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  max-width: 72%;
}
.task-detail .message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.task-detail .message-sender { font-weight: 600; color: #374151; }
.task-detail .message-time { color: #6b7280; font-size: 0.8rem; }
.task-detail .message-content { color: #1f2937; line-height: 1.6; }

.task-detail .message-customer {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  margin-left: 0;
  margin-right: auto;
}
.task-detail .message-agent {
  background: #273a91;
  color: #ffffff;
  margin-left: auto;
  margin-right: 0;
  border: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.task-detail .message-agent .message-sender,
.task-detail .message-agent .message-time,
.task-detail .message-agent .message-content { color: #ffffff; }

/* Internal Notes */
.task-detail .internal-note {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.task-detail .note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.task-detail .note-author { font-weight: 600; color: #111827; }
.task-detail .note-time { color: #6b7280; font-size: 0.8rem; }
.task-detail .note-content { color: #374151; line-height: 1.6; }

/* Warning Banner */
.task-detail .warning-banner {
  background-color: #fff8e1;
  border: 1px solid #ffecb5;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #8a6d3b;
  font-size: 0.9rem;
  box-sizing: border-box;
}

/* Workflow: status icon centering */
.task-detail .step-status { display: flex; align-items: center; gap: 0.5rem; }
.task-detail .status-icon { 
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.task-detail .status-icon i {
  line-height: 1;
}

/* Status Badge Styles */
.task-detail .status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
}
.task-detail .status-open {
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}
.task-detail .status-in-progress {
  background-color: #fff3e0;
  color: #f57c00;
  border: 1px solid #ffcc02;
}
.task-detail .status-resolved {
  background-color: #e8f5e8;
  color: #388e3c;
  border: 1px solid #c8e6c9;
}
.task-detail .status-pending {
  background-color: #f3e5f5;
  color: #7b1fa2;
  border: 1px solid #e1bee7;
}

/* Loading Spinner */
.task-detail .loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Reply Input */
.task-detail .reply-input {
  border: 1px solid #ced4da;
  border-radius: 6px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  resize: vertical;
}
.task-detail .reply-input:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.task-detail .reply-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

/* Button Loading States */
.task-detail .btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.task-detail .btn .spinner-border {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

/* Tab Content */
.task-detail .tab-content {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
  background-clip: padding-box;
  position: relative;
  margin-top: -1px; /* tuck under tab borders to prevent hairlines */
}
.task-detail .tab-pane { min-height: 400px; background-color: #fff; border-radius: inherit; }
.task-detail .tab-pane .p-3 { padding: 1.5rem !important; margin: 0; }

/* Message Containers */
.task-detail #customerMessages,
.task-detail #internalNotes {
  min-height: 200px;
  margin-bottom: 1.5rem;
}

/* Empty State Styling */
.task-detail .text-muted.text-center.py-4 { padding: 3rem 1rem !important; }
.task-detail .text-muted.text-center.py-4 i {
  font-size: 3rem;
  color: #dee2e6;
  margin-bottom: 1rem;
}
.task-detail .text-muted.text-center.py-4 p {
  color: #6c757d;
  font-size: 1rem;
  margin: 0;
}
.task-detail .text-muted.text-center.py-4 small {
  color: #adb5bd;
  font-size: 0.875rem;
}

/* Task Header (scoped variant) */
.task-detail .task-header {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}
.task-detail .task-description .card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.task-detail .task-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.5rem;
}
.task-detail .task-meta { color: #6c757d; font-size: 1rem; }

/* Sidebar */
.task-detail .sidebar-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.task-detail .sidebar-header {
  background-color: #f8f9fa;
  padding: 1rem;
  font-weight: 600;
  color: #495057;
  border-bottom: 1px solid #dee2e6;
}
.task-detail .sidebar-body { padding: 1.5rem; }

.task-detail .detail-item { margin-bottom: 1.5rem; }
.task-detail .detail-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.task-detail .detail-value { color: #212529; font-size: 1rem; }

/* Customer Info */
.task-detail .customer-info { display: flex; align-items: center; gap: 0.75rem; }
.task-detail .avatar {
  width: 40px;
  height: 40px;
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.task-detail .customer-name { 
  font-weight: 600; 
  word-break: break-word;
  overflow-wrap: break-word;
}
.task-detail .customer-email { 
  color: #6c757d; 
  font-size: 0.875rem; 
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Category Tag */
.task-detail .category-tag {
  background-color: #e9ecef;
  color: #495057;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Time Logged */
.task-detail .time-logged { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.task-detail .time-edit { cursor: pointer; color: #6c757d; transition: color 0.15s ease-in-out; }
.task-detail .time-edit:hover { color: #007bff; }
.task-detail .time-logged-edit { margin-top: 0.5rem; }
.task-detail .time-logged-edit .input-group { margin-bottom: 0.5rem; }
.task-detail .time-logged-edit .input-group .form-control { border-radius: 4px 0 0 4px; border-right: none; }
.task-detail .time-logged-edit .input-group .input-group-text { border-radius: 0 4px 4px 0; background-color: #f8f9fa; border-left: none; color: #6c757d; font-size: 0.875rem; }
.task-detail .time-logged-edit .btn { margin-right: 0.5rem; font-size: 0.875rem; padding: 0.25rem 0.75rem; }
.task-detail .time-logged-edit .btn:last-child { margin-right: 0; }

/* Action Buttons */
.task-detail .action-button {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  background-color: #fff;
  color: #495057;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.task-detail .action-button:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  text-decoration: none;
}
.task-detail .btn-outline { border-color: #007bff; color: #007bff; }
.task-detail .btn-outline:hover { background-color: #007bff; color: #fff; }
.task-detail .btn-danger { border-color: #dc3545; color: #dc3545; }
.task-detail .btn-danger:hover { background-color: #dc3545; color: #fff; }

/* Ensure danger-light action buttons keep white text on hover */
.task-detail .action-button.btn-danger-light:hover {
  color: #fff;
}

/* Timeline */
.task-detail .timeline {
  position: relative;
  padding: 1rem 1.5rem 1rem 1rem;
  max-height: 60vh;
  overflow-y: auto;
}
.task-detail .timeline-item {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-start;
  padding-left: 3rem;
}
.task-detail .timeline-icon-container {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.task-detail .timeline-icon-new {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background-color: #f8f9fa;
  border: 2px solid #e9ecef;
  z-index: 2;
  position: relative;
}

#customerMessages, #internalNotes {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}      

.task-detail .timeline-icon-new.text-primary { background-color: #e3f2fd; border-color: #2196f3; color: #1976d2; }
.task-detail .timeline-icon-new.text-success { background-color: #e8f5e8; border-color: #4caf50; color: #388e3c; }
.task-detail .timeline-icon-new.text-warning { background-color: #fff3e0; border-color: #ff9800; color: #f57c00; }
.task-detail .timeline-icon-new.text-danger { background-color: #ffebee; border-color: #f44336; color: #d32f2f; }
.task-detail .timeline-icon-new.text-info { background-color: #e0f2f1; border-color: #00bcd4; color: #00695c; }
.task-detail .timeline-icon-new.text-secondary { background-color: #f3e5f5; border-color: #9c27b0; color: #7b1fa2; }
.task-detail .timeline-icon-new.text-muted { background-color: #f5f5f5; border-color: #9e9e9e; color: #616161; }
.task-detail .timeline-connector {
  width: 2px;
  height: 2rem;
  background-color: #e9ecef;
  margin-top: 0.5rem;
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.task-detail .timeline-content { flex: 1; padding-left: 1rem; }
.task-detail .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.task-detail .timeline-title { font-weight: 600; color: #212529; margin: 0; font-size: 1rem; }
.task-detail .timeline-time-new { color: #6c757d; font-size: 0.875rem; margin: 0; }
.task-detail .timeline-description { color: #495057; margin-bottom: 0.5rem; line-height: 1.5; }
.task-detail .timeline-author { color: #6c757d; font-size: 0.875rem; margin: 0; font-style: italic; }
.task-detail .timeline .text-muted.text-center.py-4 { padding: 3rem 1rem !important; text-align: center; }
.task-detail .timeline .text-muted.text-center.py-4 i { font-size: 3rem; color: #dee2e6; margin-bottom: 1rem; }
.task-detail .timeline .text-muted.text-center.py-4 p { color: #6c757d; font-size: 1rem; margin: 0; }
.task-detail .timeline .text-muted.text-center.py-4 small { color: #adb5bd; font-size: 0.875rem; }

/* Responsive */
@media (max-width: 768px) {
  .task-detail .message-customer,
  .task-detail .message-agent { margin-left: 0; margin-right: 0; }
  .task-detail .task-title { font-size: 1.5rem; }
  .task-detail .sidebar-body { padding: 1rem; }
  .task-detail .timeline { padding: 1rem 1rem 1rem 1rem; max-height: 50vh; }
  .task-detail .timeline-item { padding-left: 2.5rem; }
  .task-detail .timeline-icon-container { left: 0; }
  .task-detail .timeline-icon-new { width: 2rem; height: 2rem; font-size: 1rem; }
  .task-detail .timeline-content { padding-left: 0.5rem; }
  .task-detail .timeline-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

.task-detail .action-button.btn-outline:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  color: #495057;
}
.task-detail .action-button.btn-outline:hover { color: #374151; }

/* Task Detail: inline utilities moved from Detail.cshtml */
.task-detail .category-badges .badge {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
}
.task-detail .bg-info-transparent { background-color: rgba(13, 202, 240, 0.1); color: #0dcaf0; border: 1px solid rgba(13, 202, 240, 0.3); }
.task-detail .bg-danger-transparent { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.3); }
.task-detail .bg-warning-transparent { background-color: rgba(255, 193, 7, 0.1); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.3); }
.task-detail .bg-success-transparent { background-color: rgba(25, 135, 84, 0.1); color: #198754; border: 1px solid rgba(25, 135, 84, 0.3); }
.task-detail .bg-secondary-transparent { background-color: rgba(108, 117, 125, 0.1); color: #6c757d; border: 1px solid rgba(108, 117, 125, 0.3); }
.task-detail .workflow-status-select { min-width: 120px; }

/* ===============================
   Tasks Index Page   
   =============================== */
.tasks-index .priority-btn {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.tasks-index .priority-btn:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.tasks-index .priority-icon { font-size: 12px; margin-right: 4px; }

/* Priority states */
.tasks-index .priority-minor { color: #059669; }
.tasks-index .priority-minor .priority-icon { color: #059669; }
.tasks-index .priority-minor:hover { background-color: #f0fdf4; border-color: #059669; }
.tasks-index .priority-minor-active { background-color: #059669 !important; border-color: #059669 !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(5,150,105,0.3); }
.tasks-index .priority-minor-active .priority-icon { color: #ffffff !important; }

.tasks-index .priority-moderate { color: #ea580c; }
.tasks-index .priority-moderate .priority-icon { color: #ea580c; }
.tasks-index .priority-moderate:hover { background-color: #fff7ed; border-color: #ea580c; }
.tasks-index .priority-moderate-active { background-color: #ea580c !important; border-color: #ea580c !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(234,88,12,0.3); }
.tasks-index .priority-moderate-active .priority-icon { color: #ffffff !important; }

.tasks-index .priority-major { color: #dc2626; }
.tasks-index .priority-major .priority-icon { color: #dc2626; }
.tasks-index .priority-major:hover { background-color: #fef2f2; border-color: #dc2626; }
.tasks-index .priority-major-active { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(220,38,38,0.3); }
.tasks-index .priority-major-active .priority-icon { color: #ffffff !important; }

.tasks-index .priority-escalated { color: #6b7280; }
.tasks-index .priority-escalated .priority-icon { color: #6b7280; }
.tasks-index .priority-escalated:hover { background-color: #f9fafb; border-color: #6b7280; }
.tasks-index .priority-escalated-active { background-color: #6b7280 !important; border-color: #6b7280 !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(107,114,128,0.3); }
.tasks-index .priority-escalated-active .priority-icon { color: #ffffff !important; }

/* Layout for priority buttons */
.tasks-index #priority-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.tasks-index #priority-buttons .priority-btn { flex: 1; min-width: 120px; justify-content: center; }

/* Category Badge transparent helpers (scoped) */
.tasks-index .bg-info-transparent { background-color: rgba(13,202,240,0.1); color: #0dcaf0; border: 1px solid rgba(13,202,240,0.3); }
.tasks-index .bg-danger-transparent { background-color: rgba(220,53,69,0.1); color: #dc3545; border: 1px solid rgba(220,53,69,0.3); }
.tasks-index .bg-warning-transparent { background-color: rgba(255,193,7,0.1); color: #ffc107; border: 1px solid rgba(255,193,7,0.3); }
.tasks-index .bg-success-transparent { background-color: rgba(25,135,84,0.1); color: #198754; border: 1px solid rgba(25,135,84,0.3); }
.tasks-index .bg-secondary-transparent { background-color: rgba(108,117,125,0.1); color: #6c757d; border: 1px solid rgba(108,117,125,0.3); }

/* Badge items for tags and attachments */
.tasks-index .badge-item {
  display: inline-flex;
  align-items: center;
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
  border-radius: 16px;
  padding: 4px 8px 4px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 2px;
  transition: all 0.2s ease-in-out;
}
.tasks-index .badge-item:hover { background-color: #bbdefb; border-color: #90caf9; }
.tasks-index .badge-item .badge-remove {
  background: none;
  border: none;
  color: #1976d2;
  margin-left: 6px;
  padding: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.tasks-index .badge-item .badge-remove:hover { background-color: #f44336; color: white; }

/* Typing Indicator Styles - Teams-like */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  margin: 2px 0;
  background-color: #f3f2f1;
  border-radius: 16px;
  border: 1px solid #e1dfdd;
  font-size: 0.8rem;
  color: #605e5c;
  max-width: fit-content;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.typing-dots {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #605e5c;
  margin: 0 1px;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.typing-text {
  font-style: italic;
  font-weight: 500;
}

/* ===============================
   Filter Panel Styles   
   =============================== */
.filter-panel {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.filter-panel .card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
  transition: background-color 0.2s ease;
}

.filter-panel .card-header:hover {
  background-color: #f1f3f5;
}

.filter-panel .card-header i.bx-filter-alt {
  font-size: 1.25rem;
  color: #667eea;
}

.filter-panel .card-header #filterToggleIcon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
  color: #6b7280;
}

.filter-panel .card-header:not(.collapsed) #filterToggleIcon {
  transform: rotate(180deg);
}

.filter-panel .card-body {
  padding: 1.5rem;
}

.filter-panel .form-label {
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.5rem;
}

.filter-panel .form-select {
  font-size: 0.875rem;
  border-color: #d1d5db;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-panel .form-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.filter-panel .form-select[multiple] {
  padding: 0.375rem;
  max-height: 120px;
  overflow-y: auto;
}

.filter-panel .form-select[multiple] option {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.filter-panel .form-select[multiple] option:hover {
  background-color: #f3f4f6;
}

.filter-panel .form-select[multiple] option:checked {
  background-color: #667eea;
  color: white;
}


#activeFilterCount {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Custom date range inputs */
#customDateRange .form-control {
  border-color: #d1d5db;
  font-size: 0.875rem;
}

#customDateRange .form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Filter action buttons */
.filter-panel #applyFiltersBtn {
  background-color: #667eea;
  border-color: #667eea;
  color: white;
  font-weight: 500;
  transition: all 0.2s ease;
}

.filter-panel #applyFiltersBtn:hover {
  background-color: #5568d3;
  border-color: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.filter-panel #clearFiltersBtn {
  border-color: #d1d5db;
  color: #6b7280;
  transition: all 0.2s ease;
}

.filter-panel #clearFiltersBtn:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

/* Active filter tags */
#activeFilterTags .filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #667eea;
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

#activeFilterTags .filter-tag:hover {
  background-color: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

#activeFilterTags .filter-tag .remove-filter {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#activeFilterTags .filter-tag .remove-filter:hover {
  opacity: 1;
}

#activeFiltersDisplay {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .filter-panel .card-body {
    padding: 1rem;
  }
  
  .filter-panel .col-md-3 {
    margin-bottom: 1rem;
  }
}

/* ===============================
   View Toggle Styles   
   =============================== */
.view-toggle-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.view-toggle-btn {
  padding: 0.5rem 1rem;
  border-color: #dee2e6;
}

.view-toggle-btn i {
  font-size: 1.25rem;
}

.view-toggle-btn.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.view-toggle-btn:hover:not(.active) {
  background-color: #f8f9fa;
}

/* ===============================
   List View Styles   
   =============================== */
.task-list-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-list-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.task-list-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.task-list-item a {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
  gap: 1rem;
}

.task-list-title {
  flex: 1;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 200px;
}

.task-list-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}

.task-list-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
  min-width: 300px;
  justify-content: flex-end;
}

.task-list-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.task-list-meta-item i {
  font-size: 1rem;
}

/* Responsive adjustments for list view */
@media (max-width: 1200px) {
  .task-list-meta {
    gap: 0.75rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 992px) {
  .task-list-meta {
    gap: 0.5rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .task-list-item a {
    flex-wrap: wrap;
  }
  
  .task-list-title {
    min-width: 150px;
  }
  
  .task-list-meta {
    min-width: unset;
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5rem;
    gap: 0.75rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
  }
  
  .task-list-badges {
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
  .task-list-meta {
    gap: 0.5rem;
    font-size: 0.75rem;
    justify-content: flex-start;
  }
  
  .task-list-meta-item {
    flex-basis: calc(50% - 0.25rem);
    min-width: fit-content;
  }
}

/*Column Selection Dropdown*/
.dropstart .dropdown-toggle.btn.btn-primary::before {
    display: none;
}
.dropstart .dropdown-toggle.btn.btn-persian-green::before {
    display: none;
}
.dropdown-menu-column-selection .dropdown-item {
    padding: 0.20rem 0.4rem;
    background: white;
    color: black;
}
.dropdown-menu-column-selection .dropdown-item a {
    font-size: 0.7rem;
    color: inherit;
    background: inherit;
}
.dropdown-menu-column-selection .dropdown-item.active,
.dropdown-menu-column-selection .dropdown-item.active:hover,
.dropdown-menu-column-selection .dropdown-item.active:focus {
    background: white !important;
    color: black;
}
.dropdown-menu-column-selection .dropdown-item:not(.active),
.dropdown-menu-column-selection .dropdown-item:not(.active):hover,
.dropdown-menu-column-selection .dropdown-item:not(.active):focus,
.dropdown-menu-column-selection .dropdown-item.inactive:hover {
    background: white !important;
    color: black;
}
.dropdown-menu-column-selection .dropdown-item-with-icon:hover a, .dropdown-menu-column-selection .dropdown-item-with-icon:hover i {
    color: black !important; 
}
.dropdown-menu-column-selection .dropdown-item:nth-child(1), .dropdown-menu-column-selection .dropdown-item:nth-child(1):hover {
    background: rgb(var(--primary-rgb)) !important;
    color: white
}
.dropdown-menu-column-selection .dropdown-item:nth-child(1):hover a {
    color: white !important;
}
.data-view-toggle {
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
    border-radius: 0.4rem;
    height: fit-content;
}
.dropdown-menu-column-selection .dropdown-item:nth-last-child(1),
.dropdown-menu-column-selection .dropdown-item:nth-last-child(1):hover {
    background: var(--meant-foam-color) !important;
    color: white;
}
.dropdown-menu-column-selection .dropdown-item:nth-last-child(1):hover a {
    color: white !important;
}
.dropdown-menu-column-selection .dropdown-item:nth-last-child(1) {
    display: block;
    text-align: center;
}
/* Kanban View moved to kanban-view.css */
/*Pagination UI*/
.horizon-pagination {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}
/*Vertical Tab*/
.vertical-tab-items .vertical-tab-item {
    padding: 0.8rem;
    font-size: 1rem;
    cursor: pointer;
}
.vertical-tab-item.active {
    background: rgb(var(--meant-foam-rgb));
    color: white;
}
.vertical-tab-items {
    overflow: hidden;
    border-radius: var(--border-radius);
}
.vertical-tab-item:hover {
    background: rgb(var(--meant-foam-rgb));
    color: white;
    transition: 0.3s;
}

/* Edit Processing Activity: sticky first column */
@media (min-width: 992px) {
    .edit-proc-act-sidebar {
        position: sticky;
        top: 5rem;
        align-self: flex-start;
    }
}
/*Oveeride accordion*/
.accordion-header .accordion-button.collapsed {
    background: var(--persian-green-color) !important;
    color: white;
}
.filter-panel .accordion-button:not(.collapsed) .filter-count-wrapper {
    background: var(--persian-green-color) !important;
}
.filter-panel .accordion-button:not(.collapsed) .filter-count-wrapper .filter-count {
    color: var(--custom-white) !important;
}
.dropdown-toggle.btn-disabled::before {
    display: none;
}
.form-disabled-input {
    cursor: not-allowed;
}
/*
Custom checkbox
*/
.custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #C4CAD6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all .15s;
    flex-shrink: 0;
}
.custom-checkbox-style1 {
    width: 15px;
    height: 15px;
    border: 1.5px solid #94a3b8;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
    background: #fff;
}
.custom-checkbox-checked {
    background: var(--cobalt-depth);
    border-color: var(--cobalt-depth);
}
.custom-checkbox.custom-checkbox-checked::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}
.custom-checkbox-sm {
    height: 15px;
    width: 15px;
    border-radius: 4px;
}

.accordion-style-light .accordion-header .accordion-button.collapsed {
    background: var(--default-background) !important;
}

.custom-checkbox-sm.custom-checkbox-checked::after {
    width: 9.5px;
    height: 5px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
}

.accordion-style-light .accordion-header .accordion-button.collapsed {
    background: var(--default-background) !important;
    color:black;
}
.accordion-style-light .accordion-header {
    background-color: var(--default-background);
}

.accordion-style-light .accordion-button {
    border-left: 1.5px solid #d6d6d6;
    border-top-left-radius: 0px !important;
}
.text-with-icon i {
    background: rgb(var(--primary-rgb));
    color: var(--custom-white);
    padding: 6px 9px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
}

.text-with-after-line::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: var(--meant-foam03);
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    width: 86%;
}

.text-with-after-line {
    position: relative;
    overflow: hidden;
}

/* Table pages: horizontally scroll ONLY the right action buttons area */
.table-actions-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.table-actions-scroll-inner {
    flex-wrap: nowrap;
    width: max-content;
    margin-left: auto; /* keep aligned to the right like before */
    flex-direction: row !important; /* override Bootstrap flex-column on small screens */
    align-items: center;
}

/* Processing Activity: keep column-selection menu above other UI */
#procActActionbar .dropdown-menu-column-selection {
    z-index: 5000 !important;
}

/* Dashboard Pages (Cosmos Menu): keep column-selection menu above other UI */
#menuActionbar .dropdown-menu-column-selection {
    z-index: 9999 !important;
    overflow: visible;
    max-height: none !important;
}

/* Dashboard Pages (Cosmos Menu): Kanban column + card styling */
#menuKanban .kanban-column {
    border: 1px solid var(--pcl-surface-border, #e9ecef);
}

#menuKanban .kanban-card {
    background: #fff;
    border: 1px solid var(--pcl-surface-border, #e9ecef);
    border-radius: var(--border-radius);
    box-shadow: var(--pcl-shadow-sm, var(--box-shadow));
}

#menuKanban .kanban-card[data-status="Active"] {
    border-left: 3px solid var(--meant-foam-color);
}

#menuKanban .kanban-card[data-status="InActive"] {
    border-left: 3px solid var(--bronze-amber-color);
}

/* Force-hide pagination footer (grid page-size + pager) when we add .hide */
#processingActivityPaginationFooter.hide,
#processingActivityPagination.hide,
#assessmentPaginationFooter.hide,
#assessmentPagination.hide,
#vendorPaginationFooter.hide,
#assetPaginationFooter.hide,
#riskPaginationFooter.hide,
#riskPagination.hide {
    display: none !important;
}

/* fixed-width kanban columns + horizontal scroll moved to kanban-view.css */

/*Scrollbar style 1*/
.scrollbar-style1::-webkit-scrollbar-track, .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.scrollbar-style1::-webkit-scrollbar, .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
.scrollbar-style1::-webkit-scrollbar-thumb, .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
    background-color: rgb(var(--meant-foam-rgb)) !important;
}
.round-count {
    border-radius: 100%;
    line-height: normal;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.show-table-metrics-badge {
    position: absolute !important;
    top: -2.2rem;
    right: 0;
}
.show-table-metrics-badge .badge {
    line-height: normal;
}
/*Processing Activity Feedback*/
.ropa-feedback-chatbox {
    height: 15rem;
    overflow-y: scroll;
}
.processing-activity-feedback-editor textarea:focus, .processing-activity-feedback-editor textarea:focus-visible {
    box-shadow: none;
}
.processing-activity-feedback-compose {
    height: 2.4rem;
}
.processing-activity-feedback-compose textarea {
    border-color: #acacac;
    resize: none;
}
.processing-activity-feedback-insert:focus, .processing-activity-feedback-insert:focus-visible {
    box-shadow: none !important;
    border-color: #acacac;
}

/* ===============================
   Generic Stepper Wizard UI
   =============================== */
.stepper-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.step-item.btn-disabled {
    cursor: default;
}

.step-circle {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--meant-foam-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--meant-foam-color);
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
}

.step-circle.step-active,
.step-circle.step-completed {
    background: var(--meant-foam-color);
    border-color: var(--meant-foam-color);
    color: #fff;
}

.step-connector {
    height: 2px;
    width: 20px;
    background: #d1d5db;
    align-self: flex-start;
    margin-top: 17px;
    flex-shrink: 0;
}

.step-connector.step-connector-active {
    background: var(--meant-foam-color);
}

.step-label {
    font-size: 12px;
    color: var(--meant-foam-color);
    text-align: center;
    white-space: nowrap;
}

.step-label.step-label-active {
    color: var(--meant-foam-color);
}

/* =============================================================
   Inventory Kanban — shared by Vendor and Asset kanban views
   ============================================================= */

.kanban-wrapper .kanban-column[data-risk="UNASSIGNED"] .kanban-card {
    border-left: 3px solid var(--gray-6);
}

.kanban-wrapper .kanban-column[data-risk="HIGH"] .kanban-card {
    border-left: 3px solid rgb(var(--danger-rgb));
}

.kanban-wrapper .kanban-column[data-risk="MEDIUM"] .kanban-card {
    border-left: 3px solid rgb(var(--warning-rgb));
}

.kanban-wrapper .kanban-column[data-risk="LOW"] .kanban-card {
    border-left: 3px solid rgb(var(--success-rgb));
}

.kanban-wrapper .kanban-column .kanban-card {
    margin-bottom: 0;
}

.kanban-card-wrapper .kanban-card-separator {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid #c3c3c3;
    opacity: 1;
}

.kanban-box-description-html {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-break: break-word;
}

.kanban-box-description-html p {
    margin-bottom: 0.25rem;
}

/* =============================================================
   No Risk metric card — shared by Vendor and Asset status boxes
   ============================================================= */

.pcl-metric-card--custom .pcl-metric-card__value {
    color: var(--gray-6);
}

.pcl-metric-card--custom .pcl-metric-card__icon {
    background: rgba(121, 135, 161, 0.12);
    color: var(--gray-6);
}

.pcl-metric-card--custom.is-active {
    background: var(--gray-2);
    border-color: rgba(121, 135, 161, 0.25);
    border-top-color: var(--gray-6);
}

/* =============================================================
   Inventory detail modal — shared by Vendor and Asset modals
   ============================================================= */

.inventory-view-modal .inventory-modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
}

.inventory-view-modal .inventory-modal-body {
    padding: 0.85rem 1rem;
    background: #f1f5f9;
    flex: 1 1 auto;
}

.inventory-view-modal .modal-footer {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.inventory-detail-tab-content > .tab-pane > div:not(:empty) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.inventory-detail-tab-content .tab-pane > hr:last-child {
    display: none;
}

.inventory-view-description {
    word-break: break-word;
}

.inventory-view-page .inventory-view-description {
    word-break: break-word;
}
.data-view-toggle-disabled {
    cursor: not-allowed;
}

/* ========================================================================
   Shared: KPI cards (moved from Operational Assessment)
   ======================================================================== */

.rc-stats-row .rc-stat-card {
    position: relative;
    overflow: hidden;
}

.rc-stats-row .rc-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #0d6efd;
}

.rc-stats-row .rc-stat-card--navy::before { background: #0d6efd; }
.rc-stats-row .rc-stat-card--red::before { background: #dc3545; }
.rc-stats-row .rc-stat-card--orange::before { background: #fd7e14; }
.rc-stats-row .rc-stat-card--green::before { background: #198754; }
.rc-stats-row .rc-stat-card--blue::before { background: #0d6efd; }
.rc-stats-row .rc-stat-card--purple::before { background: #6f42c1; }

/* ========================================================================
   Shared: Kanban column/card colour alignment
   ======================================================================== */

.kanban-wrapper .kanban-card {
    border-left: 4px solid transparent;
}

/* Risk-based kanban (Inventories/Vendor) */
.kanban-wrapper .kanban-column[data-risk="UNASSIGNED"] .kanban-card { border-left-color: rgba(121, 135, 161, 0.9); }
.kanban-wrapper .kanban-column[data-risk="HIGH"] .kanban-card { border-left-color: rgba(var(--danger-rgb), 0.9); }
.kanban-wrapper .kanban-column[data-risk="MEDIUM"] .kanban-card { border-left-color: rgba(var(--warning-rgb), 0.9); }
.kanban-wrapper .kanban-column[data-risk="LOW"] .kanban-card { border-left-color: rgba(var(--success-rgb), 0.9); }

/* Workflow-status kanban (Risk Catalogue) */
/* Markup uses bg-* utility classes; force the intended palette. */
.kanban-wrapper .kanban-column[data-status="UNASSIGNED"] { background: rgba(121, 135, 161, 0.06) !important; }
.kanban-wrapper .kanban-column[data-status="Not Started"] { background: rgba(var(--danger-rgb), 0.05) !important; }
.kanban-wrapper .kanban-column[data-status="In Progress"] { background: rgba(var(--warning-rgb), 0.05) !important; }
.kanban-wrapper .kanban-column[data-status="Under Review"] { background: rgba(var(--purple-rgb), 0.05) !important; }
.kanban-wrapper .kanban-column[data-status="Monitoring"] { background: rgba(var(--success-rgb), 0.05) !important; }
.kanban-wrapper .kanban-column[data-status="Closed"] { background: var(--slate-storm005) !important; }
.kanban-wrapper .kanban-column[data-status="Archived"] { background: var(--warm-taupe005) !important; }
.kanban-wrapper .kanban-column[data-status="Risk Audit"] { background: var(--persian-red01) !important; }

.kanban-wrapper .kanban-column[data-status="UNASSIGNED"] .kanban-card { border-left-color: rgba(121, 135, 161, 0.9); }
.kanban-wrapper .kanban-column[data-status="Not Started"] .kanban-card { border-left-color: rgba(var(--danger-rgb), 0.9); }
.kanban-wrapper .kanban-column[data-status="In Progress"] .kanban-card { border-left-color: rgba(var(--warning-rgb), 0.9); }
.kanban-wrapper .kanban-column[data-status="Under Review"] .kanban-card { border-left-color: rgba(var(--purple-rgb), 0.9); }
.kanban-wrapper .kanban-column[data-status="Monitoring"] .kanban-card { border-left-color: rgba(var(--success-rgb), 0.9); }
.kanban-wrapper .kanban-column[data-status="Closed"] .kanban-card { border-left-color: var(--slate-storm); }
.kanban-wrapper .kanban-column[data-status="Archived"] .kanban-card { border-left-color: var(--warm-taupe); }
.kanban-wrapper .kanban-column[data-status="Risk Audit"] .kanban-card { border-left-color: var(--persian-red-color); }

/* Critical / High severity — keep Critical cool burgundy; High warmer coral */
.bg-risk-critical {
    background-color: var(--risk-critical-bg, rgba(255, 60, 60, 0.23)) !important;
}
.text-risk-critical {
    color: var(--risk-critical-text, #821340) !important;
}
.bg-risk-high {
    background-color: var(--risk-high-bg, #FBD4C2) !important;
}
.text-risk-high {
    color: var(--risk-high-text, rgb(121, 31, 31)) !important;
}