/* */
/* Project search bar and table */
/* */

#projectSearchDiv {
    display: none;
}

.tag-cloud-container {
    margin-bottom: 10px;
    margin-top: 10px;
    display: none;

}

.searchTagDivs {
    display: inline-block;
    background-color: #fff;
    border: solid 1px #f1f1f1;
    border-radius: 12px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    user-select: none;
}
.searchTagDivs:hover {
    background-color: #e0e0e0;
    border: solid 1px #ddd;
}
.searchTagDivs.toggled {
    background-color: #40ABFD;
    color: white;
    border-color: #40ABFD;
}

.tagCloudDivs {
    display: inline-block;
    background-color: #fff;
    border: solid 1px #f1f1f1;
    border-radius: 12px;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    user-select: none;
}
.tagCloudDivs:hover {
    background-color: #e0e0e0;
    border: solid 1px #ddd;
}
.tagCloudDivs.toggled {
    background-color: #40ABFD;
    color: white;
    border-color: #40ABFD;
}

.tagCloudLabel {
    font-weight: 500;
    font-size: 13px;
    background: #e8e8e8;
    color: #444;
    border-radius: 4px;
    padding: 3px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #ddd;
    user-select: none;
    white-space: nowrap;
    display: inline-block;
    margin: 2px 4px 2px 0;
}

.tag-cloud-category-table {
    width: 100%;
    margin-bottom: 4px;
    border-spacing: 0;
    border-collapse: separate;
}

.tag-cloud-category-table td {
    vertical-align: top;
    padding: 1px 0;
}

.tag-cloud-category-table td:first-child {
    width: 1%;
    padding-right: 8px;
}

.tag-toggle-button {
    position: relative; 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background-color: white;
    user-select: none;
    border: 2px solid white;
    border-radius: 15px;
    width: auto;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    color: black;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    vertical-align: middle;
}
.tag-toggle-button:hover {
    border: 2px solid black;
    background-color: #d3eaf2
}

.tag-toggle-button.toggled {
    background-color: #40ABFD;
    color: white;
}

.tag-toggle-button svg{
    flex-shrink: 0;
    stroke: #555555;
    stroke-width: 2px;
}
.tag-toggle-button.toggled svg {
    stroke: white;
    fill: white;
}
.tag-toggle-button.inactive {
    display: none;
}


.projectBarAndIcon {
    width: 100%;
    max-width: 400px;
    position: relative;
    display: inline-block;
    height: 28px;
    vertical-align: middle;
}


.project-search-controls {
    position: absolute;
    top: 10px;
    left: 270px; /* Ensure 5px space from the sidebar */
    z-index: 30; /* Ensure it stays on top */
    transition: left 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: calc(100% - 200px);
    display: none;
}


.project-search-controls.minimized {
    left: 70px;
    
}

.project-search-toggle {
    position: absolute;
    top: 10px;
    left: 320px; /* Ensure 5px space from the sidebar */
    z-index: 30; /* Ensure it stays on top */
    transition: left 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: calc(100% - 200px);;
    margin-bottom: 20px;
    margin-left: 5px;
}


.project-search-toggle.minimized {
    left: 70px;
    
}



.projectTableBody {
    /*margin: 40px;*/
    /*margin-left: 150px;*/
    font-family: 'Open Sans', sans-serif;
    background-color: #ffffff;
    color: #333;
    /*max-width: 1200px;*/
    overflow-y: auto;
    /*margin: auto;*/
}
.projectHead1 {
    font-size: 36px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 20px;
}
.projectHead2 {
    font-size: 26px;
    font-weight: 300;
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: transparent;
}
.project-search-container {
    position: relative;
    min-width: calc(100% - 200px);
    margin-bottom: 20px;
    margin-left: 5px;
}
#projectSearchBar {
    width: 100%;
    max-width: 400px;
    padding: 8px 36px 8px 36px;
    font-size: 16px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 999px;
    outline: none;
    box-sizing: border-box;
    
}

.project-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: #888;
    padding-right: 5px;
}
.project-clear-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #888;
    display: none;
    z-index: 10;
    pointer-events: all;
}
.project-clear-icon:hover {
    color: #555;
}

.scroll-container {
    width: 100%;
    flex: 1 1 auto;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#resultsArea {
    position: absolute;
    left: 280px;
    right: 100px;
    bottom: 100px;
    top: 75px;
    transform: none;
    margin-left: 5px;
    min-width: auto;
    min-height: auto;
    max-width: none;
    max-height: none;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1.5px 4px rgba(0,0,0,0.10);
    border-radius: 7px;
    z-index: 1000;
    overflow: hidden;
    display: none;
    flex-direction: column;
    transition: box-shadow 0.15s, left 0.3s ease;
}

#resultsArea.minimized{
    left: 80px;
}

#resultsArea:focus-within, #resultsArea:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.13);
}

.project-results-div {

    margin-top: 10px;
    background-color: white;
    border: 0px solid #fff;
    border-radius: 10px 10px 0 0;
    overflow-y: hidden;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    min-height: 120px;
    max-width: 90vw;
    max-height: 80vh;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1.5px 4px rgba(0,0,0,0.10);
    /* border removed */
    border-radius: 7px;
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.project-results-div:focus-within, .project-results-div:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.13);
}

.table-scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
  height: calc(100vh - 300px);
  min-height: 200px;
  max-height: calc(100% - 60px);
}

/* Match scrollbar width to the fake scrollbar above */
.table-scroll::-webkit-scrollbar {
  width: 17px;
}

.table-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}


.projectsTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    flex: 1 0 auto;
}
.projectsTable thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.projectsTable th, .projectsTable td {
    padding: 0 20px; /* Only left/right padding */
    text-align: left;
    white-space: nowrap;
}

.projectsTable td {
    padding: 12px 20px; /* Restore vertical and horizontal padding for table rows */
    text-align: left;
    white-space: nowrap;
}

.projectsTable th {
    background-color: #eaeaea;
    font-weight: 600;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    line-height: 48px;      /* Ensures text is vertically centered and fixes height */
    vertical-align: middle;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

td.projectsHeader {
    padding-left: 6px;

}

.projectsTable td:first-child,
.projectsTable th:first-child {
    text-align: center;
    vertical-align: middle;
    width: 48px;
}
.projectsTable input[type="checkbox"].project-checkbox {
    display: block;
    margin: 0 auto;
}


/* Checked projects table header (default, lighter gray) */
#checkedProjectsTable thead th {
  background-color: #eaeaea;
  white-space: nowrap;
}

#checkedProjectsTable tbody td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Scrollable projects table header (darker gray) */
.table-scroll .projectsTable thead th {
  background-color: #e0e0e0;
}

#checkedProjectsTable,
.table-scroll .projectsTable {
  width: 100%;
  table-layout: fixed;
}

.table-header-wrapper {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.table-header-wrapper::-webkit-scrollbar {
  width: 17px;
  background: #eaeaea; /* Match the header background */
}

.table-header-wrapper::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Account for scrollbar width in the header table */
#checkedProjectsTable {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#checkedProjectsTable::-webkit-scrollbar {
  width: 17px;
  background: #eaeaea; /* Match the header background */
}

#checkedProjectsTable::-webkit-scrollbar-thumb {
  background: #eaeaea; /* Match the header background */
}

.table-scroll td,
.table-scroll th {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.resize-corner-handle {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 16.2px; /* 10% smaller than 18px */
    height: 16.2px;
    background: rgba(240,240,240,0.85);
    border-radius: 0 0 7px 0;
    cursor: se-resize;
    z-index: 10;
    border: 1px solid #d0d0d0;
    border-right: none;
    border-bottom: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    transition: background 0.15s, border 0.15s;
}
.resize-corner-handle:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    /* Use dragArrow.svg for the resize icon */
    background: url('icons/dragArrow.svg') no-repeat right bottom;
    background-size: 14.4px 14.4px; /* 10% smaller than 16px */
    opacity: 0.85;
}
.resize-corner-handle:hover, .resize-corner-handle:active {
    background: #e0e0e0;
    border-color: #aaa;
}


.clear-all-button {
    position: absolute;
    left: 40px;
    top: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65em;
    cursor: pointer;
    z-index: 1002;
    white-space: nowrap;
    color: #888;
    transform: translateX(-50%);
}

.clear-all-button:hover {
    color: #444;
}

.close-button {
    position: absolute;
    top: 3px;
    right: 3px;   
    display: flex;
    align-items: center;
    justify-content: center;    
    margin-right: 10px;
    user-select: none;
    color: rgb(157, 0, 0);
    font-size: 0.65em;
    cursor: pointer;
    z-index: 1002;
}
.export-button {
        position: absolute;
        left: 50%;
        top: calc(100% + 8px); /*// 8px gap below resultsDiv*/
        transform: translateX(-50%);
        z-index: 1001;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        background: #fff;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        padding: 2px 10px 2px 4px;
        margin: 0;
        height: 28px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
}