/* Evidence Action Button Disabled Styles */
.evidence-no-access-action {
    opacity: 0.5;
    cursor: not-allowed !important;
    filter: grayscale(50%);
}

.evidence-no-access-action:hover {
    opacity: 0.7;
    transform: none !important;
}

/* Evidence Modal Scrollable Styles */
#newEvidenceModal.modal,
#editEvidenceModal.modal {
    --bs-modal-height: 100vh;
}

#newEvidenceModal .modal-dialog-scrollable,
#editEvidenceModal .modal-dialog-scrollable {
    max-height: calc(100vh - 3.5rem);
}

#newEvidenceModal .modal-dialog-scrollable .modal-content,
#editEvidenceModal .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

#newEvidenceModal .modal-dialog-scrollable .modal-body,
#editEvidenceModal .modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 8rem);
}

/* Evidence Modal Select2 Styles */
#newEvidenceModal .select2-container,
#editEvidenceModal .select2-container {
    width: 100% !important;
}

#newEvidenceModal .select2-container--default .select2-selection--single,
#editEvidenceModal .select2-container--default .select2-selection--single {
    border-radius: 0.25rem;
}

#newEvidenceModal .select2-container--default .select2-selection--single .select2-selection__arrow,
#editEvidenceModal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

#newEvidenceModal .select2-container--default .select2-selection--single .select2-selection__rendered,
#editEvidenceModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
    padding: 7px 8px !important;
}

#newEvidenceModal .select2-container--default .select2-selection--single .select2-selection__placeholder,
#editEvidenceModal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

#newEvidenceModal span.select2-selection.select2-selection--multiple.select2-selection--placeholder {
    height: 40px;
}

.select2-dropdown {
    z-index: 9999;
}

/* Ensure Select2 dropdowns work properly in scrollable modals */
#newEvidenceModal .select2-dropdown,
#editEvidenceModal .select2-dropdown {
    z-index: 1056 !important;
}

#newEvidenceModal.modal .select2-container,
#editEvidenceModal.modal .select2-container {
    z-index: 1055;
}

/* Multiselect Placeholder Styles */
.select2-selection--multiple.select2-selection--placeholder {
    color: #6c757d !important;
}

.select2-selection--multiple .select2-selection__placeholder,
#select2-evidenceOwner-container,
#select2-expirationSchedule-container {
    color: #6c757d !important;
    font-style: normal !important;
    padding: 7px 8px !important;
    display: block !important;
}

.select2-selection--multiple:not(.select2-selection--placeholder) .select2-selection__placeholder {
    display: none !important;
}

/* Has-selections styling for evidence domain and type */
.evidence-domain.has-selections,
.evidence-type.has-selections,
.select-wrapper.has-selections {
    position: relative;
}



.evidence-domain.has-selections .select2-container,
.evidence-type.has-selections .select2-container,
.select-wrapper.has-selections .select2-container {
    border-radius: 4px;
}

.evidence-domain.has-selections .select2-selection,
.evidence-type.has-selections .select2-selection,
.select-wrapper.has-selections .select2-selection {
    max-height: 80px;
    overflow-y: scroll;
    padding-right: 40px;
    min-height: 40px;
}

.evidence-domain.has-selections .select2-selection::-webkit-scrollbar,
.evidence-type.has-selections .select2-selection::-webkit-scrollbar,
.select-wrapper.has-selections .select2-selection::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
    transition: width 0.2s;
}

.evidence-domain.has-selections:hover .select2-selection::-webkit-scrollbar,
.evidence-type.has-selections:hover .select2-selection::-webkit-scrollbar,
.select-wrapper.has-selections:hover .select2-selection::-webkit-scrollbar {
    width: 12px;
}

.evidence-domain.has-selections .select2-selection::-webkit-scrollbar-track,
.evidence-type.has-selections .select2-selection::-webkit-scrollbar-track,
.select-wrapper.has-selections .select2-selection::-webkit-scrollbar-track {
    background-color: transparent;
}

.evidence-domain.has-selections .select2-selection::-webkit-scrollbar-thumb,
.evidence-type.has-selections .select2-selection::-webkit-scrollbar-thumb,
.select-wrapper.has-selections .select2-selection::-webkit-scrollbar-thumb {
    border-radius: 10rem;
    border-width: 0.2rem;
    border-style: solid;
    background-clip: padding-box;
    background-color: transparent;
    border-color: transparent;
    min-height: 30px;
}

.evidence-domain.has-selections:hover .select2-selection::-webkit-scrollbar-thumb,
.evidence-type.has-selections:hover .select2-selection::-webkit-scrollbar-thumb,
.select-wrapper.has-selections:hover .select2-selection::-webkit-scrollbar-thumb {
    background-color: rgba(33, 40, 50, 0.2);
}

.evidence-domain.has-selections .select2-selection::-webkit-scrollbar-button,
.evidence-type.has-selections .select2-selection::-webkit-scrollbar-button,
.select-wrapper.has-selections .select2-selection::-webkit-scrollbar-button {
    display: none;
}

.evidence-domain.has-selections .select2-selection::-webkit-scrollbar-corner,
.evidence-type.has-selections .select2-selection::-webkit-scrollbar-corner,
.select-wrapper.has-selections .select2-selection::-webkit-scrollbar-corner {
    background-color: transparent;
}

.evidence-domain.has-selections .select-wrapper::after,
.evidence-type.has-selections .select-wrapper::after,
.select-wrapper.has-selections .select-wrapper::after {
    right: 20px;
}

.evidence-status .badge {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.evidence-status .badge.clickable {
    cursor: pointer;
}

.no-evidence {
    margin-left: 0.75rem;
}

.new-project-btn {
    padding: 10px;
}

form#newEvidenceForm .form-select {
    width: 100%;
    max-width: 100% !important;
}

form#newEvidenceForm input[type="text"],
form#editEvidenceForm input,
form#modalProjectSelector input {
    height: 40px;
}

form#newEvidenceForm #evidenceFile {
    height: 100%;
}


textarea#evidenceNotes,
textarea#editEvidenceNotes {
    min-height: 230px;
}

/* File Upload Drop Zone Styles */
.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 40px 0;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#addFilesModal .drop-zone {
    padding: 80px 0;
}

.drop-zone.dragover {
    border-color: #007bff;
    background: #e9ecef;
}

.drop-zone-text {
    color: #6c757d;
    margin-top: 10px;
}

.file-list {
    margin-top: 15px;
}

.file-item {
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.file-item .file-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-item .remove-file {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.file-item .remove-file:hover {
    opacity: 1;
}

#evidenceFile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* Hide file input in Add Files modal drop zone */
#addFilesModal .drop-zone #evidenceFiles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* Vertically center the Add Files modal */
#addFilesModal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 3.5rem);
}

/* Evidence Preview Modal Styles */
#evidencePreviewModal .modal-xl {
    max-width: 90%;
}

#evidencePreviewModal .modal-body {
    padding: 1rem;
}

.evidence-preview {
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
}

.evidence-preview img {
    max-height: 60vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.evidence-preview iframe {
    border: 1px solid #dee2e6;
    background: #fff;
    height: 60vh;
    max-height: 60vh;
    min-height: auto;
}

.evidence-preview .text-content {
    background: #f8f9fa;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 60vh;
    overflow-y: auto;
}

.evidence-preview .text-content pre {
    margin: 0;
    padding: 1rem;
}

.pdf-viewer {
    width: 100%;
    height: 80vh;
    border: 1px solid #dee2e6;
}

.office-viewer {
    width: 100%;
    height: 80vh;
    border: 1px solid #dee2e6;
}

/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Project Associations Accordion Styles */
#projectAssociationsAccordion .accordion-item {
    background: #e5e9ef3b;
  border: 1px solid #dee2e6;
  margin: 10px 0;
  border-radius: 7px !important;
}

#projectAssociationsAccordion .accordion-item .accordion-button {
    border-radius: 7px !important; 
}

#projectAssociationsAccordion .accordion-button {
  font-weight: 500;
  padding: 1rem 1.25rem;
}

#projectAssociationsAccordion .accordion-button:not(.collapsed) {
    background-color: #f9fafb;
    border-color: #b8daff;
}

#projectAssociationsAccordion .accordion-button:focus {
    box-shadow: none;
}


#projectAssociationsAccordion .accordion-button:focus:not(.collapsed) {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

#projectAssociationsAccordion .accordion-body {
  padding: 0;
}

#projectAssociationsAccordion .safeguards-table-container {
  margin: 0;
}

#projectAssociationsAccordion .table {
  margin-bottom: 0;
  border-radius: 0;
  background: #fff;
  border-color: #d9e1ed
}

#projectAssociationsAccordion .table th {
  background-color: #f2f3f3;
  border-top: none;
  font-weight: 600;
  font-size: 0.875rem;
}

#projectAssociationsAccordion .table td {
  vertical-align: middle;
  font-size: 0.875rem;
  padding: 0.75em;
}

/* Modal Project Associations Accordion Styles */
#modalProjectAssociationsAccordion .accordion-item {
  border: 1px solid #dee2e6;
  margin-bottom: 1px;
}

#modalProjectAssociationsAccordion .accordion-button {
  font-weight: 500;
  padding: 1rem 1.25rem;
  position: relative;
}

#modalProjectAssociationsAccordion .accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  border-color: #b8daff;
}

#modalProjectAssociationsAccordion .accordion-button .btn {
  position: static;
  margin-left: auto;
  z-index: 10;
}

#modalProjectAssociationsAccordion .accordion-body {
  padding: 1rem;
}

#modalProjectAssociationsAccordion .safeguards-table-container {
  margin: 0;
}

#modalProjectAssociationsAccordion .table {
  margin-bottom: 0;
  border-radius: 0;
}

#modalProjectAssociationsAccordion .table th {
  background-color: #f8f9fa;
  border-top: none;
  font-weight: 600;
  font-size: 0.875rem;
}

#modalProjectAssociationsAccordion .table td {
  vertical-align: middle;
  font-size: 0.875rem;
}

#modalProjectAssociationsAccordion .remove-existing-project {
  border: none;
  background: none;
  color: #dc3545;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
}

.fa-spinner {
    animation: spin 1s linear infinite;
}

/* Safeguard Owner Loading State */
.safeguard-owner-loading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 20px;
}

.safeguard-owner-loading .fa-spinner {
    font-size: 0.875rem;
    color: #6c757d;
}

.safeguard-owner-loading span {
    font-size: 0.875rem;
    color: #6c757d;
}

.btn i.fa,
.btn i.fas {
    margin-right: 8px;
}

.delete-evidence-btn {
    color: red;
    text-decoration: underline red;
    padding: 3px 0;
}

#edit-expiration-pencil {
    transition: color 0.2s ease-in-out;
}

#edit-expiration-pencil:hover {
    color: #007bff;
}

.associated-safeguard-repeater {
    display: none;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 3.175L10.825 8 9.763 9.063 6 5.3 2.238 9.063 1.175 8z'/%3E%3C/svg%3E");
}

/* Select2 Dropdown Icon Styles */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 30px !important;
    min-height: 40px !important;
}

/* Ensure the dropdown icon is visible in dark mode */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
}

/* Style for disabled state */
.select2-container--default .select2-selection--single[aria-disabled=true],
.select2-container--default .select2-selection--multiple[aria-disabled=true] {
    background-color: #f8f9fa;
    opacity: 0.65;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 40px;
}

.evidence-domain .select2-selection--multiple,
.evidence-type .select2-selection--multiple,
.evidence-owner .select2-selection--single,
.evidence-expiration-schedule .select2-selection--single {
    height: auto !important;
    max-height: 80px !important;
    padding-bottom: 0;
    overflow-y: hidden;
}

#newEvidenceModal .evidence-owner .select2-selection__arrow {
    display: none !important;
}

.select2-results__option {
  white-space: normal !important;
  word-break: break-word !important;
  padding: 6px 12px !important;
}

/* Optionally, if you want the selected items in the select box to wrap too */
.select2-selection__choice {
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Safeguard Selector Loading State */
.safeguard-selector.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px !important;
    animation: spin 1s linear infinite;
}

.safeguard-selector.loading option {
    display: none;
}

/* Add this style for the select wrapper */
.select-wrapper {
    position: relative;
    z-index: 3;
  }
  
  /* Add this style for the chevron icon in the select wrapper */
  .select-wrapper::after {
    content: url(../icons/fa-angle-down.svg);
    position: absolute;
    right: 15px;
    top: 10px;
    opacity: .35;
    width: 11px;
    z-index: -1;
  }
  
  
  .has-selections .select-wrapper::after {
      right: 20px;
  }
  
  .filter-group.has-selections .select2-selection__choice {
    display: block !important;
  }
  
  /* Styling the select element (dropdown) */
  .select-wrapper select {
    font-size: 16px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    background: none;
    outline: none;
    cursor: pointer;
    height: 38.2px;
  }
  
  .select2-container--default .select2-selection--multiple {
      background: none !important;
      cursor: pointer;
      border: 1px solid #ccc !important;
  }
  
  .select2-container--default .select2-selection--single {
    background: none !important;
    cursor: pointer;
  }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Dark mode support */
[data-bs-theme="dark"] .safeguard-selector.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
}

/* Evidence Table Multiple Domains Tooltip Styles */
#userEvidenceTable span[data-bs-toggle="tooltip"] {
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Force tooltip to appear on top */
.tooltip.bs-tooltip-top {
    z-index: 1070;
}

.tooltip.bs-tooltip-top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #f2f6fc;
}

.tooltip-arrow {
    --bs-tooltip-bg: #a7a7a7;
}

.tooltip.evidence-domains-tooltip {
    opacity: 1 !important;
}

/* Evidence table tooltip width - Desktop */
.tooltip.evidence-domains-tooltip .tooltip-inner {
    opacity: 1 !important;
    max-width: 50vw;
    width: max-content;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    font-size: 14px;
    background-color: #f2f6fc;
    color: #69707a;
    padding: 20px !important;
    border: 1px solid #babfc6a4;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

#expiration-date-text, #edit-expiration-pencil {
    color: #5789bb;
}

.safeguard-table-container thead th {
    background-color: #f5f5f5;
    font-weight: bold;
    padding: 0.75em;
    border: 1px solid #ccc;
    text-align: left;
}

.safeguard-table-container tbody td {
    padding: 0.75em;
    border: 1px solid #ccc;
}

.safeguard-select, .safeguard-actions {
    vertical-align: middle;
    text-align: center;
}

.safeguard-search-container label {
    visibility: hidden;
}

.safeguard-search-container input {
    display: block;
    margin: 0 auto;
    padding: 0.5em 1em;
    height: 44px;
    padding-left: 40px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s;
    background-color: #f1f1f1;
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/android-search.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

td.safeguard-owner, td.safeguard-id, th.safeguard-owner, th.safeguard-id {
    text-align: center;
    vertical-align: middle;
}

.safeguards-table-container th {
    padding: 0.75em;
}

td.project-name, .safeguard-id {
    vertical-align: middle;
}

.pagination {
    justify-content: flex-end;
}

.safeguard-table-container .dataTables_info {
    margin-top: 9px;
}

.safeguard-assigned-to, .safeguard-assigned-by, .safeguard-date {
    text-align: center;
}

td.safeguard-users .select2-selection {
    padding-right: 0 !important;
}

td.safeguard-users .assignment-placeholder {
    line-height: 40px;
    display: block !important;
    position: relative;
    top: 4px;
}

.evidence-actions-header {
    text-align: center;
    vertical-align: middle;
}

.evidence-actions {
    text-align: center;
}

/* Evidence table tooltip width - Mobile */
@media (max-width: 768px) {
    .tooltip.evidence-domains-tooltip .tooltip-inner {
        max-width: 90vw;
        width: max-content;
        font-size: 13px;
    }
} 

.loader {
    display: none;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    align-content: center; 
    justify-content: center;  
    z-index: 100000;
    --point-color: #5789bb;
    --size: 3px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  
  .loader_element {
    border-radius: 100%;
    border: var(--size) solid var(--point-color);
    margin: calc(var(--size)*2);
  }
  
  .loader_element:nth-child(1) {
    animation: preloader .6s ease-in-out alternate infinite;
  }
  .loader_element:nth-child(2) {
    animation: preloader .6s ease-in-out alternate .2s infinite;
  }
  
  .loader_element:nth-child(3) {
    animation: preloader .6s ease-in-out alternate .4s infinite;
  }
  
  @keyframes preloader {
    100% { transform: scale(2); }
  }

/* Safeguard Table Column Widths */
.safeguards-table-modal th.safeguard-select-col,
.safeguards-table-modal td.safeguard-select {
    width: 5% !important;
}

.safeguards-table-modal th.safeguard-id-col,
.safeguards-table-modal td.safeguard-id {
    width: 10% !important;
}

.safeguards-table-modal th.safeguard-description-col,
.safeguards-table-modal td.safeguard-description {
    width: 50% !important;
}

.safeguards-table-modal th.safeguard-users-col,
.safeguards-table-modal td.safeguard-users {
    width: 30% !important;
}

.safeguard-users span.select2-selection {
    text-align: left;
}

span.text-muted.assignment-placeholder {
    text-align: center;
}

.safeguard-users {
    vertical-align: middle;
}

a.remove-project-association-link {
    margin-top: 20px !important;
    display: block;
}