/* browse_studies_styles.css — public Browse Studies
 *
 * All browse layout/colors live here (no inline styles on the page).
 * Blue hierarchy:
 *   Header .................... soft steel blue (overrides index_header inline)
 *   Page background ........... cool blue-gray wash
 *   Filters card .............. white + slate-blue border
 *   Results table head ........ deep navy + white text
 *   Results body .............. white / pale blue zebra
 *   Search buttons ............ deep navy
 *   Total + pagination ........ pale sky panels
 *
 * !important is reserved for beating index_header.php inline styles only.
 */

/* ---------- Page canvas (beats review_studies body via higher specificity) ---------- */
html.browse-studies-html,
html.browse-studies-html body,
body.browse-studies-page,
body.browse-studies-page.review-studies-page {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(165deg, #c8d4e4 0%, #d8e0ec 45%, #e6e4dc 100%);
    background-attachment: fixed;
    color: #1a2433;
}

/* ---------- Header: must beat index_header inline style="..." ---------- */
html.browse-studies-html > header,
html.browse-studies-html header {
    background: linear-gradient(90deg, #a8bad0 0%, #b8c8dc 50%, #c5d2e4 100%) !important; /* beats inline */
    border-color: #6b849e !important;
    border-width: 3px !important;
}

html.browse-studies-html header .logged-in-as {
    background: #e8f0fa !important; /* beats inline tan badge */
    color: #1e3a5f !important;
    border: 1px solid #7a9bc0;
}

/* ---------- Shared side margins (match results table) ---------- */
body.browse-studies-page .search-card,
body.browse-studies-page .table-wrapper,
body.browse-studies-page .total-studies,
body.browse-studies-page .bottom-controls {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    box-sizing: border-box;
}

/* ---------- Filters card (compact, single-row) ---------- */
body.browse-studies-page .search-card {
    margin-top: 0.15in;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 2px solid #2c4a6e;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(30, 58, 95, 0.12);
    /* visible so the dashed divider can extend slightly into the side padding */
    overflow: visible;
}

body.browse-studies-page .search-table {
    border-collapse: separate;
    /* More horizontal air between columns (less crowded) */
    border-spacing: 22px 0;
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
}

body.browse-studies-page .search-table td {
    vertical-align: top;
    padding: 2px 4px;
}

/* Spread columns evenly — drop heavy min-widths that crushed the row */
body.browse-studies-page .search-table td.project-col {
    width: 30%;
    min-width: 0;
}
body.browse-studies-page .search-table td.rs-api-source-col {
    width: 11%;
    min-width: 0;
}
body.browse-studies-page .search-table td.rs-author-col {
    width: 12%;
    min-width: 0;
}
body.browse-studies-page .search-table td.rs-journal-col {
    width: 12%;
    min-width: 0;
}
body.browse-studies-page .search-table td.rs-years-col {
    width: 8%;
    min-width: 72px;
}
body.browse-studies-page .search-table td.rs-flags-col {
    width: 17%;
    min-width: 0;
    max-width: none;
    overflow: hidden;
}
body.browse-studies-page .search-table td.search-button-col {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
    vertical-align: top;
    text-align: left;
    padding-right: 4px;
    box-sizing: border-box;
    /* Line up with top of input controls under headings */
    padding-top: 1.45em;
}

body.browse-studies-page .filter-heading {
    color: #1e3a5f;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 3px;
}

/* Project heading + Project Focus on one row (focus right-justified) */
body.browse-studies-page .project-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

body.browse-studies-page .project-heading-row .filter-heading {
    margin-bottom: 0;
}

body.browse-studies-page .project-focus-link-btn {
    background: none;
    border: none;
    color: #0066cc;
    font-size: 13px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Search Term sits directly under Project dropdown */
body.browse-studies-page .project-selector-row {
    margin-top: 8px;
}

/* Space above the divider so the line sits lower (clear of the top filter row) */
body.browse-studies-page .search-table tr:first-child > td {
    padding-bottom: 20px;
}

/* Continuous dashed line across the full search area (single colspan cell = no column breaks) */
body.browse-studies-page .search-table tr.keyword-divider-row > td {
    padding: 0;
    border: none;
    vertical-align: middle;
    /* Allow the line to extend past the cell into card padding */
    overflow: visible;
}

body.browse-studies-page .keyword-search-divider {
    /* Extend a bit past each end of the filter table into the card padding.
       Custom dashes (border-style:dashed can't set dash length): long dash + short gap */
    width: calc(100% + 36px);
    height: 3px;
    margin: 0 -18px;
    border: none;
    background-image: repeating-linear-gradient(
        to right,
        #5a7390 0,
        #5a7390 18px,
        transparent 18px,
        transparent 26px
    );
    background-repeat: repeat-x;
    box-sizing: border-box;
}

/* Keyword Search content row (line is above this) */
body.browse-studies-page .search-table tr.keyword-search-row > td {
    border: none;
    padding-top: 14px;
}

body.browse-studies-page .search-table tr.keyword-search-row > td.project-col {
    vertical-align: top;
}

/* Button cell: same structure as project-col (heading spacer + control) so heights match */
body.browse-studies-page .search-table tr.keyword-search-row > td.keyword-search-actions {
    vertical-align: top;
    text-align: left;
}

/* Invisible copy of the Keyword Search heading — forces button onto the textbox row */
body.browse-studies-page .keyword-btn-heading-spacer {
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}

/* Same size as Project + Search Term dropdowns */
body.browse-studies-page #project_switcher,
body.browse-studies-page #search_term_select,
body.browse-studies-page #source_filter,
body.browse-studies-page .keyword-search-input,
body.browse-studies-page #title_search {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 34px;
}

body.browse-studies-page .rs-author-col input.additional-input,
body.browse-studies-page .rs-journal-col input.additional-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 0;
    height: 34px;
}

/* Override review_studies_styles author max-width so column can use full width */
body.browse-studies-page #author_search,
body.browse-studies-page #journal_input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

body.browse-studies-page .rs-select,
body.browse-studies-page .additional-input,
body.browse-studies-page .title-search-input,
body.browse-studies-page .rs-year-select,
body.browse-studies-page #project_switcher,
body.browse-studies-page #search_term_select,
body.browse-studies-page #source_filter,
body.browse-studies-page #author_search,
body.browse-studies-page #journal_input,
body.browse-studies-page #title_search,
body.browse-studies-page #yearFilter {
    background: #f4f7fb;
    border: 1.5px solid #9aafc4;
    border-radius: 6px;
    color: #1a2433;
}

body.browse-studies-page .rs-select:focus,
body.browse-studies-page .additional-input:focus,
body.browse-studies-page .title-search-input:focus,
body.browse-studies-page #yearFilter:focus {
    border-color: #2c4a6e;
    outline: none;
    box-shadow: 0 0 0 2px rgba(44, 74, 110, 0.18);
}

/* Years + Study Flags: same fixed height (taller, matched pair) */
body.browse-studies-page .rs-year-select,
body.browse-studies-page #yearFilter,
body.browse-studies-page #flag_checkboxes {
    height: 140px !important;
    max-height: 140px !important;
    min-height: 140px !important;
    box-sizing: border-box;
}

body.browse-studies-page .rs-year-select,
body.browse-studies-page #yearFilter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 12px;
    line-height: 1.15;
    padding: 2px 4px;
}

body.browse-studies-page #flag_checkboxes {
    background: #f4f7fb;
    border: 1.5px solid #9aafc4;
    border-radius: 6px;
    padding: 4px 6px;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}

body.browse-studies-page #flag_checkboxes label.flag-label {
    font-size: 8.5pt;
    line-height: 1.2;
    gap: 4px;
}

body.browse-studies-page #flag_checkboxes label.flag-label:hover {
    background: #e4eef8;
}

/* Shared Search button look */
body.browse-studies-page .search-button-col button,
body.browse-studies-page .search-btn-wide,
body.browse-studies-page .search-btn-title,
body.browse-studies-page button.search-btn-title {
    height: 34px;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #2c4a6e;
    color: #ffffff;
    border: 1px solid #1e3a5f;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.22);
    cursor: pointer;
}

/* Beat review_studies_styles margin-top on search button */
body.browse-studies-page .search-button-col button,
body.browse-studies-page .search-btn-wide {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* "Search Keyword" beside the keyword textbox */
body.browse-studies-page .search-btn-title,
body.browse-studies-page button.search-btn-title {
    width: auto;
    min-width: 120px;
    max-width: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px;
}

body.browse-studies-page .search-btn-wide:hover,
body.browse-studies-page .search-button-col button:hover,
body.browse-studies-page .search-btn-title:hover,
body.browse-studies-page button.search-btn-title:hover {
    background: #1e3a5f;
    color: #f0f6fc;
}

body.browse-studies-page .bs-empty-note {
    margin: 6px 0;
    color: #4a5c70;
    font-size: 0.95em;
}

/* ---------- Total studies strip ---------- */
body.browse-studies-page .total-studies {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 8px 14px;
    background: #e8f0fa;
    border: 1.5px solid #7a9bc0;
    border-radius: 8px;
    color: #1e3a5f;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.08);
}

/* ---------- Results table card ---------- */
body.browse-studies-page .table-wrapper {
    margin-top: 4px;
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid #2c4a6e;
    box-shadow: 0 8px 28px rgba(30, 58, 95, 0.12);
    background: #fff;
}

body.browse-studies-page #review-studies-table {
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body.browse-studies-page #review-studies-table th,
body.browse-studies-page #review-studies-table td {
    border-width: 1px;
    border-color: #c5d2e0;
}

body.browse-studies-page #review-studies-table th {
    background-color: #2c4a6e;
    color: #ffffff;
    border-color: #1e3a5f;
    border-bottom: 2px solid #4a6d94;
    font-weight: 700;
}

body.browse-studies-page #review-studies-table td {
    background-color: #ffffff;
    color: #1a2433;
    vertical-align: top;
}

body.browse-studies-page #review-studies-table tbody tr:nth-child(even) td {
    background-color: #f2f6fb;
}

body.browse-studies-page #review-studies-table tbody tr:hover td {
    background-color: #e4eef8;
}

body.browse-studies-page #review-studies-table a.rs-title-link {
    color: #0b5cab;
    /* Prevent browser soft-hyphen injection that breaks copy of "DNA-based" */
    -webkit-hyphens: none;
    hyphens: none;
}
body.browse-studies-page #review-studies-table a.rs-title-link:hover {
    color: #084280;
}
body.browse-studies-page #review-studies-table .rs-title-cell,
body.browse-studies-page #review-studies-table td.title-column {
    -webkit-hyphens: none;
    hyphens: none;
}
body.browse-studies-page #review-studies-table a.toggle-more {
    color: #0b5cab;
}

body.browse-studies-page #review-studies-table td.date-column {
    padding-bottom: 8px;
    vertical-align: top;
    text-align: center;
}

/* Result column widths — combined source/journal frees room for summaries */
body.browse-studies-page .number-column           { width: 3%;  min-width: 3%;  max-width: 3%; }
body.browse-studies-page .date-column             { width: 6%;  min-width: 6%;  max-width: 6%; }
body.browse-studies-page .search-term-column      { width: 8%;  min-width: 8%;  max-width: 8%; }
body.browse-studies-page .title-column            { width: 14%; min-width: 14%; max-width: 14%; }
body.browse-studies-page .source-journal-column   {
    width: 10%;
    min-width: 10%;
    max-width: 10%;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
}
body.browse-studies-page .source-journal-column .trunc-text {
    word-break: break-word;
    overflow-wrap: anywhere;
}
body.browse-studies-page .authors-column          { width: 9%;  min-width: 9%;  max-width: 9%; }
body.browse-studies-page .conclusion-table-column { width: 12%; min-width: 12%; max-width: 12%; }
body.browse-studies-page .simple-summary-column,
body.browse-studies-page .grok-summary-column     {
    width: 19%;
    min-width: 19%;
    max-width: 19%;
}

/* ---------- Pagination bar ---------- */
body.browse-studies-page .bottom-controls {
    margin-bottom: 24px;
    padding: 10px 16px;
    background: #e8f0fa;
    border: 1.5px solid #7a9bc0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(30, 58, 95, 0.08);
    overflow: hidden;
}

body.browse-studies-page .bottom-controls .pagination button,
body.browse-studies-page .bottom-controls .goto-btn {
    background: #2c4a6e;
    color: #fff;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
body.browse-studies-page .bottom-controls .pagination button:hover,
body.browse-studies-page .bottom-controls .goto-btn:hover {
    background: #1e3a5f;
}

body.browse-studies-page .bottom-controls .pagination button.hidden {
    /* Prefer disabled over hidden so Next stays visible when multi-page */
    visibility: hidden;
}

body.browse-studies-page .bottom-controls .pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #7a8fa8;
    border-color: #6a7f98;
}

body.browse-studies-page .bottom-controls .pagination button:disabled:hover {
    background: #7a8fa8;
}

body.browse-studies-page #pageInfoBrowse {
    color: #1e3a5f;
    font-weight: 600;
}

/* ---------- Project Focus modal (shared idea with Browse by Keyword) ---------- */
.project-focus-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.project-focus-modal-content {
    background: white;
    max-width: 720px;
    margin: 20px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-height: 85vh;
    overflow-y: auto;
}

#modalProjectName {
    margin: 0 0 4px 0;
    font-size: 1.45em;
}

#modalCuratorLine {
    font-size: 15.5px;
    color: #444;
    margin-bottom: 25px;
}

#modalFocusContent {
    line-height: 1.7;
    white-space: normal;
    font-size: 15px;
    word-break: break-word;
}

#modalFocusContent a {
    color: #0f766e;
    font-weight: 600;
    text-decoration: underline;
    word-break: break-all;
}

.modal-close-btn {
    margin-top: 30px;
    padding: 10px 26px;
    font-size: 15px;
    cursor: pointer;
}