/* ============================================================================
   SEARCH PAGE COMPONENT
   ============================================================================
   
   Overall search page layout with different states: idle, loading, error.
   Contains page header, navigation, and conditional content based on state.
   
   ============================================================================ */

/* Note shown when the result set exceeds the browsable window (1000) */
.search-browse-cap-note {
    margin: 0.5rem auto;
    max-width: 800px;
    padding: 0.5rem 1rem;
    background: var(--color-primary-light, #f5f0e8);
    border: 1px solid var(--color-border, #d4c4a8);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-primary, 'Amiri', serif);
    font-size: 0.9rem;
    color: var(--color-text-secondary, #666);
    text-align: center;
}

/* ============================================================================
   PAGE CONTAINER
   ============================================================================ */

/* 100% not 100vh: this sits inside .app-main, which is already sized to
   calc(100vh - nav - footer). Asking for a full viewport forced overflow
   equal to the chrome height — and now that search has a fixed bottom bar,
   that was a guaranteed scrollbar on every result set. */
.search-page {
    min-height: 100%;
    background: #f5f5f5;  /* TODO: Add --color-page-bg to variables */
    padding: 20px;
}


/* ============================================================================
   SEARCH HEADER
   ============================================================================ */

.search-header {
    max-width: 1000px;
    margin: 0 auto 30px;
}

.back-to-home {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    transition: var(--transition-all);
}

.back-to-home:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateX(-4px);
}

.page-title {
    font-size: 2rem;
    color: #1f2937;  /* TODO: Add --color-page-title to variables */
    text-align: center;
    font-family: var(--font-primary);
}

.search-content {
    margin-top: 40px;
}


/* ============================================================================
   IDLE STATE (Empty/Initial)
   ============================================================================ */

.search-idle {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
}

.idle-message {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.idle-text {
    font-size: 1.125rem;
    color: #6b7280;  /* TODO: Add --color-idle-text to variables */
    margin-bottom: 30px;
    font-family: var(--font-primary);
}


/* ============================================================================
   SEARCH TIPS
   ============================================================================ */

.search-tips {
    text-align: start;
    margin-top: 30px;
}

.search-tips h3 {
    color: #1f2937;  /* TODO: Add --color-tips-heading to variables */
    margin-bottom: 16px;
    font-family: var(--font-primary);
}

.tips-list {
    list-style: none;
    padding: 0;
}

.tips-list li {
    padding: 8px 0;
    color: #4b5563;  /* TODO: Add --color-tips-text to variables */
    position: relative;
    padding-inline-start: 24px;
    font-family: var(--font-primary);
}

.tips-list li:before {
    content: "•";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-primary);
    font-weight: bold;
}


/* ============================================================================
   LOADING STATE
   ============================================================================ */

.search-loading {
    text-align: center;
    padding: 60px 20px;
}

.loading-text {
    margin-top: 20px;
    font-size: 1.125rem;
    color: #6b7280;  /* TODO: Add --color-loading-text to variables */
    font-family: var(--font-primary);
}


/* ============================================================================
   ERROR STATE
   ============================================================================ */

.search-error {
    max-width: 500px;
    margin: 60px auto;
    text-align: center;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-sm);
    border: 2px solid #fee2e2;  /* TODO: Add --color-error-border to variables */
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.error-title {
    color: #991b1b;  /* TODO: Add --color-error-title to variables */
    margin-bottom: 16px;
    font-family: var(--font-primary);
}

.error-message {
    color: #dc2626;  /* TODO: Add --color-error-message to variables */
    margin-bottom: 20px;
    padding: 12px;
    background: #fee2e2;  /* TODO: Add --color-error-bg to variables */
    border-radius: var(--radius-lg);
    font-family: monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

.error-hint {
    color: #6b7280;  /* TODO: Add --color-error-hint to variables */
    font-size: 0.875rem;
    font-family: var(--font-primary);
}


/* ============================================================================
   REDESIGNED SEARCH (v2): collapsible sidebar · embedded reader pane ·
   virtualized infinite-scroll results table
   ============================================================================ */

.search-page2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--color-sand, #f5f0e8);
}

/* ---- Collapsible full-width top search bar ---- */
.search-topbar {
    flex: 0 0 auto;            /* natural height — never shrink (shrinking crammed
                                  the collapsed strip and gave it a stray scroll) */
    max-height: 62vh;          /* expanded: scroll internally if very tall */
    overflow-y: auto;
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-border, #d4c4a8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.topbar-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    min-width: 0;
}
.topbar-searchbar { flex: 1 1 auto; min-width: 0; }
.topbar-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 22px;             /* match the reader-pane header's controls */
    border: 1px solid var(--color-border, #d4c4a8);
    background: var(--color-white, #fff);
    color: var(--color-text-secondary, #666);
    border-radius: 6px;
    padding: 0 10px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    white-space: nowrap;
}
.topbar-toggle:hover { background: var(--color-primary, #8b5e34); color: #fff; }

.topbar-advanced { padding: 0 18px 8px; }

/* Collapsing the top bar hides the search field itself (sort / filter / save
   now live in the footer), leaving just the toggle + count strip so the
   results and reader pane reclaim the height. */
.search-page2.topbar-collapsed .topbar-searchbar,
.search-page2.topbar-collapsed .topbar-advanced { display: none; }
/* Collapsed: a clean, full-width fixed strip the same height as the reader-pane
   header — no internal scroll, no shrinking. */
.search-page2.topbar-collapsed .search-topbar { overflow: visible; max-height: none; }

.sidebar-sort { display: flex; align-items: center; gap: 8px; }
.sidebar-sort-label {
    font-family: var(--font-primary);
    color: var(--color-text-secondary, #666);
    font-size: 0.875rem;
}
.sort-seg {
    display: inline-flex;
    border: 1px solid var(--color-border, #d4c4a8);
    border-radius: 8px;
    overflow: hidden;
}
.sort-seg-btn {
    border: none;
    background: var(--color-white, #fff);
    padding: 6px 16px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    color: var(--color-text-secondary, #666);
}
.sort-seg-btn.on { background: var(--color-primary, #8b5e34); color: #fff; }

.sidebar-count {
    font-family: var(--font-primary);
    color: var(--color-text-secondary, #666);
    font-size: 0.8125rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
.search-filter-widen-note {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #666);
    background: var(--color-primary-light, #f5f0e8);
    border: 1px solid var(--color-border, #d4c4a8);
    border-radius: 6px;
    padding: 6px 10px;
}

/* ---- Layout: an UPPER group (search bar + reader pane) over a LOWER group
   (results table).

   No result open: the top bar sits at the top and the results fill the rest.
   A result open (.has-pane): the results table is pinned to a fixed 40% and the
   upper group takes the remaining 60% — so collapsing/expanding the search bar
   trades space with the VIEWER, never with the results. ---- */
.search-upper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
}
.search-lower {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}
.search-page2.has-pane .search-upper { flex: 1 1 auto; }
.search-page2.has-pane .search-lower { flex: 0 0 40%; }

/* Reader pane — native vertical resize handle (bottom edge) */
.sr-pane-wrap {
    /* Fills the upper group below the search bar; shrinks when the bar expands,
       grows when it collapses. The results table below stays fixed at 40%. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-bottom: 3px solid var(--color-border, #d4c4a8);
    background: var(--color-white, #fff);
}
.sr-pane { display: flex; flex-direction: column; height: 100%; }
.sr-pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    border-bottom: 1px solid var(--color-border, #e5dcc9);
    background: var(--color-sand-footer, #f0e8d6);
}
.sr-pane-title {
    flex: 1;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary, #1f2937);
}
.sr-pane-open {
    flex: 0 0 auto;
    border: 1px solid var(--color-primary, #8b5e34);
    background: var(--color-white, #fff);
    color: var(--color-primary, #8b5e34);
    border-radius: 5px;
    padding: 1px 8px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    white-space: nowrap;
}
.sr-pane-open:hover { background: var(--color-primary, #8b5e34); color: #fff; }

/* Forward/back page navigation within the pane (read surrounding text). */
.sr-pane-nav { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.sr-pane-navbtn {
    border: 1px solid var(--color-border, #d4c4a8);
    background: var(--color-white, #fff);
    color: var(--color-primary, #8b5e34);
    border-radius: 5px;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1;
}
.sr-pane-navbtn:disabled { opacity: .4; cursor: default; }
.sr-pane-navbtn:not(:disabled):hover { background: var(--color-primary, #8b5e34); color: #fff; }
.sr-pane-pageno {
    font-family: var(--font-primary);
    font-size: 0.72rem;
    color: var(--color-text-secondary, #666);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 58px;
    text-align: center;
}

.sr-pane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 18px; }
.sr-pane-msg { padding: 24px; text-align: center; color: var(--color-text-secondary, #666); font-family: var(--font-primary); }

/* ---- Virtualized results table ---- */
.sr-table {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--color-white, #fff);
    position: relative;
}
.sr-head,
.sr-row {
    display: flex;
    align-items: center;
    direction: rtl;
    line-height: 1.15;
    border-bottom: 1px solid var(--color-border-light, #eee4d2);
    box-sizing: border-box;
}
.sr-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-sand-footer, #f0e8d6);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--color-text-secondary, #666);
    height: 24px;
}
.sr-row { cursor: pointer; }
.sr-row:hover { background: var(--color-hover, #faf6ee); }
.sr-row.selected {
    background: var(--color-primary-light, #f2e7d3);
    box-shadow: inset 3px 0 0 var(--color-primary, #8b5e34);
}
.sr-spacer { flex: none; }

.sr-c {
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-primary);
}
.sr-author { flex: 0 0 18%; font-size: 0.75rem; color: var(--color-text-secondary, #555); }
.sr-title  { flex: 0 0 20%; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary, #1f2937); }
.sr-preview{ flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; }
.sr-loc    { flex: 0 0 58px; font-size: 0.72rem; color: var(--color-text-secondary, #666); font-variant-numeric: tabular-nums; text-align: center; }
.sr-go     { flex: 0 0 32px; text-align: center; }
.sr-go-btn {
    border: 1px solid var(--color-border, #d4c4a8);
    background: var(--color-white, #fff);
    color: var(--color-primary, #8b5e34);
    border-radius: 4px;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    font-size: 0.72rem;
}
.sr-go-btn:hover { background: var(--color-primary, #8b5e34); color: #fff; }

/* Preview term highlights (same markup preview_html emits everywhere) */
.sr-preview strong { color: var(--color-primary, #8b5e34); font-weight: 700; }
.sr-preview .hl-root { color: var(--color-sienna, #a0522d); }

.sr-more { text-align: center; padding: 10px; color: var(--color-text-secondary, #666); font-family: var(--font-primary); }

/* Footer bar layout — same three-column strip as the matches / visualization
   modules. .search-page-footer + .footer-button + .footer-right are styled in
   module-footer.css; .footer-left / .footer-right flex come from match-viewer.
   Only the (module-scoped) .footer-controls container is defined here. */
.search-page-footer .footer-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    max-width: var(--content-max-width);
    margin: 0 auto;
    height: 100%;
    gap: 1rem;
}
.search-page-footer .sidebar-sort { direction: rtl; }

@media (max-width: 768px) {
    .search-topbar { max-height: 50vh; }
    .topbar-main { flex-wrap: wrap; }
    .sr-author { flex-basis: 28%; }
    .sr-title { flex-basis: 30%; }
}