/* new_studies_styles.css - v50 — FULLY CLEANED & ORGANIZED */

/* NEW: status colors for filtered_studies */
tr.status-U { background-color: #ffffff; }           /* unworked - white */
tr.status-N { background-color: #b2f2ea; }           /* Add to Queue - light teal */
tr.status-D { background-color: #e0e0e0; }           /* Delete - grey */

tr.status-N td, tr.status-D td {
    background-color: inherit;   /* make sure cells inherit the row color */
}

body {
    background-color: #E6F4F1;
    color: #000;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 10pt;
    margin: 0;
    padding: 0;
}

/* ====================== GLOBAL TABLE FONT ====================== */
#new-studies-table,
#new-studies-table td,
#new-studies-table th {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 10pt;
    color: #000;
}

/* ====================== NEW SEARCH TABLE - SIMPLE ====================== */
.search-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* base spacing */
.search-table td {
    vertical-align: top;
    padding: 0px 10px 0px 10px;   /* reduced horizontal padding for more room */
}

/* extra space ONLY above the top row of headings (keeps "above" good) */
.search-table tr:first-child td {
    padding-top: 8px; 
}

/* even tighter bottom on the controls row (the row with all the dropdowns/inputs) */
.search-table tr:nth-child(2) td {
    padding-bottom: 0px;
    padding-top: 2px;
}

/* column widths + padding IN FRONT of Project column - 100% percentages only */
.project-col     { width: 35%; }     
.api-source-col  { width: 11%; }
.journal-col     { width: 14%; }
.author-col      { width: 14%; }
.years-col       { width: 8%; }                        
.search-btn-col  { width: 18%; }     /* reduced — search button doesn't need that much space */

.ns-select,
.ns-input,
.ns-year-select {
    width: 100%;
    height: 36px;
    border: 2px solid #263F3B;
    border-radius: 6px;
    padding: 5px 5px;
    background: #fff;
    box-sizing: border-box;
}

/* Make the Years dropdown tall when in multiple mode (PubMed, OpenAlex, etc.) */
.ns-year-select[multiple] {
    height: 180px;
}

/* Force Project dropdown to match the consistent 420px width used by Search Term and Bottom card */
#project_switcher {
    width: 100% !important;
    max-width: 420px;
    box-sizing: border-box;
}


.ns-search-btn {
    height: 46px;
    width: auto;
    min-width: 110px;
    padding: 0 75px; 
    background: #2e5a4a;       /* match Fetch button */
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 17px;           /* ← a little bigger */
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    display: block;
}

/* Secondary actions (Continue crossword, Close, etc.) */
.ns-secondary-btn {
    height: 42px;
    width: auto;
    min-width: 120px;
    padding: 0 18px;
    background: #fff;
    color: #263F3B;
    border: 2px solid #263F3B;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}
.ns-secondary-btn:hover {
    background: #e8f4f0;
}

.pagination-right-actions .ns-search-btn {
    margin-left: 0;
    display: inline-block;
    padding: 0 22px;
    min-width: 150px;
}
.pagination-right-actions .ns-secondary-btn {
    height: 46px;
}

.ns-search-hint {
    margin-top: 4px;
    font-size: 7px;        /* ← way smaller, as requested */
    color: #555;
}

#search_term_row {
    margin-top: 14px;     /* ← move it down more/less by changing this number */
}

.filter-heading {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 3px;        /* ← normal headings stay tight */
    color: #222b22;
}

/* ONLY Search Term heading gets a little more space below it */
#search_term_row .filter-heading {
    margin-bottom: 10px;       /* ← this adds the extra space you want */
}

/* ====================== SEARCH AREA  ====================== */

/* ====================== MAIN RESULTS TABLE ====================== */
#new-studies-table {
    width: calc(100% - 40px);
    margin: 12px 20px;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #C1E0D9;
    table-layout: fixed;
}

#new-studies-table thead {
    background: #5a9866;
}

#new-studies-table th {
    padding: 12px 10px;
    font-size: 14.5px;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #5a9866;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #C1E0D9;
}

#new-studies-table td {
    border: 1px solid #C1E0D9;
    padding: 10px 8px;
    vertical-align: top;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Results table column widths - tuned to sum ~99% so table-layout:fixed doesn't cause shifting of Title/Journal/Authors */
#new-studies-table .number-column            { width: 3%;     min-width: 38px; text-align: center; }
#new-studies-table .date-column              { width: 6%;     min-width: 65px; text-align: center; }
#new-studies-table .search-term-column       { width: 12%;    min-width: 150px; padding-right: 8px; }
#new-studies-table .title-column             { width: 20%;    min-width: 280px; }
/* Robust truncation to keep long titles/journals/authors inside their own cells (prevents bleed/shift into next columns) */
#new-studies-table .title-column.truncate-text,
#new-studies-table .title-column.truncate-text a,
#new-studies-table .journal-column.truncate-text,
#new-studies-table .authors-column.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;           /* block instead of inline-block for better table-cell containment */
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;   /* helps very long titles without spaces */
}
#new-studies-table .journal-column           { width: 10%;    min-width: 120px; }
#new-studies-table .authors-column           { width: 14%;    min-width: 190px; }
#new-studies-table .conclusion-table-column  { width: 23%;    min-width: 300px; }
#new-studies-table .action-column            { width: 92px;   min-width: 92px; max-width: 92px; }  /* match review_studies action column exactly */

/* Row states */

/* Row states */
#new-studies-table tr.state-new     { background-color: #ffffff; }
#new-studies-table tr.state-added   { background-color: #C1E0D9; }
#new-studies-table tr.state-deleted { background-color: #E6F4F1; }

tr.highlight-processed {
    background: linear-gradient(to bottom, #E6F4F1 0%, #C1E0D9 50%, #7BC8B9 100%);
    box-shadow: 0 0 0 4px #263F3B inset;
    transition: opacity 5s ease-out;
}

/* ====================== ACTIONS COLUMN ====================== */
.action-column {
    text-align: left;
    padding: 8px 6px 8px 22px;
    vertical-align: middle;
    position: relative;
}

.action-checkbox-label {
    display: block;
    font-size: 12px;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
}

.action-checkbox-label input {
    vertical-align: middle;
    margin-right: 4px;
}

.action-label {
    display: block;
    font-size: 14.5px;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 2px;
    text-align: left;
    line-height: 1.1;
}

/* .action-header-container and old row styles are no longer used; kept for reference */

.action-header-row1,
.action-header-row2 {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f8fafc;
    font-size: 13px;
}

/* Old row styles kept for reference but no longer used by the Actions header */
/* .action-header-row1, .action-header-row2 { ... } */

/* Compact buttons */
.action-header-row1 button,
.action-header-row2 button {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap;
    line-height: 1.3;
}

/* Clear X button - updated for consistency with review_studies layout */
.clear-all-x,
.clear-x-btn {
    position: absolute;
    top: 8px;
    right: 6px;
    font-size: 14px;
    padding: 1px 6px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #64748b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Header actions to match review_studies exactly */
.header-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.header-action-btn {
    font-size: 9.5pt;
    padding: 2px 6px;
    line-height: 1;
    background: #ffffff;
    color: #000000;
    border: 1px solid #C1E0D9;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

/* ====================== BOTTOM BAR & PAGINATION ====================== */
.bottom-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 20px 90px 20px;
}

.total-studies,
.export-bar {
    margin: 2px 20px 8px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.total-studies {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 10pt;
    font-weight: 500;
    color: #263F3B;
}

.total-studies span {
    font-weight: 700;
    color: #1a2f2a;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ====================== MISC ====================== */
.title-link { 
    text-decoration: none; 
    color: #0066cc; 
    font-weight: bold; 
}

.conclusion-cell { 
    overflow-wrap: anywhere; 
    word-break: break-word; 
}

.toggle-concl { 
    color: #0066cc; 
}

.goto-input {
    width: 58px;
    padding: 6px 6px;
    text-align: center;
    font-size: 14px;
}

/* ====================== BOTTOM SUBMIT SELECTED BUTTON ====================== */
.bottom-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 20px 90px 20px;
}

#submit-selected {
    width: 190px;                    /* exactly matches Actions column */
    height: 46px;
    font-size: 15.5px;
    font-weight: bold;
    background: #5a9866;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;               /* pushes it all the way right under Actions */
}

#submit-selected:hover {
    background: #4a8055;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* left group vs right button */
    gap: 20px;
    flex-wrap: wrap;
    margin: 25px 20px 15px 20px;
    width: calc(100% - 40px);
}

.pagination-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination-controls button,
.pagination-controls span {
    white-space: nowrap;
}

/* Next/Previous while a page request is in flight */
.pagination-controls button.page-btn-loading {
    background-color: #c45c26 !important;
    background: #c45c26 !important;
    color: #fff !important;
    border-color: #a34a1c !important;
    cursor: wait;
    opacity: 1;
}

/* Submit Selected button only - centered text */
#submit-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 30px;        /* keeps the button size nice */
    white-space: nowrap;
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}

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

#authorQuery,
#journalQuery {
    text-align: left;
    padding-left: 4px;
}

/* Make project switcher match other form elements */
#project_switcher {
    border: 2px solid #263F3B;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
    height: 38px;
    padding: 6px 10px;
}