/* ═══════════════════════════════════════════════════════════════════════
   styles.css — VayuVeg DocDiscover frontend styles.
   Extracted verbatim from the index.html <style> block.
   Covers: base/reset, login page, header/nav, search bar + filters, result
   cards, viewer tabs, Docs pagination + sort bar, admin & upload modals,
   summarizer panel, change-password modal, toasts, spinners.
   ═══════════════════════════════════════════════════════════════════════ */
  * { box-sizing: border-box; }
  body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8f9fa; }
  .panel { height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; }
  .panel::-webkit-scrollbar { width: 4px; }
  .panel::-webkit-scrollbar-track { background: transparent; }
  .panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
  .doc-card { transition: all 0.15s ease; cursor: pointer; }
  .doc-card:hover { background: #f9fafb; }
  .doc-card.active { background: #eff6ff; border-color: #93c5fd; }
  .filter-section { border-bottom: 1px solid #f0f0f0; }
  .highlight { background: #fef08a; border-radius: 2px; padding: 0 1px; }
  .tab-content { background: white; padding: 20px; flex: 1; overflow-y: auto; }
  .citation-link { color: #1e40af; text-decoration: none; cursor: pointer; }
  .citation-link:hover { text-decoration: underline; }
  .citation-disabled { color: #9ca3af; cursor: default; }

  .related-card { cursor: default; transition: background 0.1s; }
  .related-card:hover { background: #f9fafb; }
  .nav-dropdown-btn { cursor: pointer; display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:5px; font-size:12px; color:#cbd5e1; background:transparent; border:1px solid #334155; transition:all 0.15s; }
  .nav-dropdown-btn:hover { background:#334155; color:white; }
  .nav-dropdown { position:absolute; top:44px; background:white; border:1px solid #e5e7eb; border-radius:7px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:200; min-width:220px; }
  .nav-dropdown-item { padding:8px 14px; font-size:12px; color:#374151; cursor:pointer; display:flex; align-items:center; gap:8px; }
  .nav-dropdown-item:hover { background:#f9fafb; }
  .nav-dropdown-item:first-child { border-radius:7px 7px 0 0; }
  .nav-dropdown-item:last-child { border-radius:0 0 7px 7px; }
  input[type=range] { width: 100%; accent-color: #1e3a5f; }
  .tab-btn { cursor: pointer; transition: all 0.1s; }
  .tab-btn.active { border-bottom: 2px solid #1e3a5f; color: #1e3a5f; }
  .tab-btn:not(.active) { color: #6b7280; border-bottom: 2px solid transparent; }
  .tab-btn:not(.active):hover { color: #374151; }
    .doc-type-badge { font-size: 8.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; }
  .badge-infopack { background: #dbeafe; color: #1e40af; }
  .badge-pdf { background:#f3e8ff; color:#6d28d9; border:1px solid #e9d5ff; }
  .badge-scanned { background:#f3e8ff; color:#6d28d9; border:1px solid #e9d5ff; }
  .badge-report { background: #dcfce7; color: #166534; }
  .badge-individual { background: #fef3c7; color: #92400e; }
  .badge-organisation { background: #f3e8ff; color: #6b21a8; }
  .badge-activism { background: #ffe4e6; color: #9f1239; }
  .badge-propagation { background: #e0f2fe; color: #075985; }
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
  .modal { background: white; border-radius: 8px; padding: 24px; max-width: 400px; width: 90%; }
  .toast { position: fixed; bottom: 24px; right: 24px; background: #1f2937; color: white; padding: 10px 16px; border-radius: 6px; font-size: 13px; z-index: 999; animation: fadeInUp 0.2s ease; }
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .center-full { width: calc(100% - 280px); }
  .center-split { width: 38%; }
  .right-panel { width: 0; opacity: 0; overflow: hidden; transition: all 0.25s ease; }
  .right-panel.open { width: calc(62% - 280px); opacity: 1; overflow-y: auto; }
  .search-autocomplete { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 6px 6px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  /* Topic accordion */
  .topic-row { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:5px; user-select:none; transition:background 0.1s; cursor:pointer; }
  .topic-row:hover { background:#f3f4f6; }
  .topic-row.active { background:#eff6ff; }
  .topic-expand-area { display:flex; align-items:center; justify-content:space-between; flex:1; cursor:pointer; min-height:28px; }
  .topic-name { font-size:13px; font-weight:600; color:#1f2937; line-height:1.3; }
  .topic-row.active .topic-name { color:#1e3a5f; }
  .topic-check-wrap { display:flex; align-items:center; padding-right:8px; cursor:pointer; }
  /* Section chips */
  .section-chip { font-size:11px; padding:4px 10px; border-radius:20px; border:1px solid #d1d5db; background:#f3f4f6; color:#374151; cursor:pointer; white-space:nowrap; transition:all 0.15s; font-weight:500; }
  .section-chip:hover { background:#e5e7eb; }
  .section-chip.active-chip { background:#1e3a5f; color:white; border-color:#1e3a5f; }
  /* Breadcrumb single line */

  /* ── SOCIAL MEDIA PULSE TWEET CARDS ──────────────────────────────────────
     Fallback styling for <blockquote class="twitter-tweet"> so embedded
     tweets are readable even when Twitter's widgets.js fails or is blocked.
     If widgets.js does load, it replaces these with proper iframes. */
  #pdfContent blockquote.twitter-tweet {
    margin: 12px 0;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1da1f2;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #1f2937;
    max-width: 520px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  #pdfContent blockquote.twitter-tweet p {
    margin: 0 0 8px 0;
    white-space: pre-wrap;
  }
  #pdfContent blockquote.twitter-tweet a {
    color: #1da1f2;
    text-decoration: none;
    word-break: break-word;
  }
  #pdfContent blockquote.twitter-tweet a:hover {
    text-decoration: underline;
  }
  #pdfContent .grid-layout-container {
    display: block;
  }
  #pdfContent .grid-layout-container > div {
    margin-bottom: 12px;
  }

  /* ── PDF SUMMARIZER ─────────────────────────────────────────────────────── */
  .pdf-summarizer-card {
    margin: 10px 10px 0 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e9f7 100%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #93c5e8;
  }
  .pdf-summarizer-card:hover { filter: brightness(0.97); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(30,100,180,0.12); }
  .summarizer-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,0.45);
    z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.25s;
  }
  .summarizer-overlay.open { opacity: 1; pointer-events: all; }
  .summarizer-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 75%; min-width: 720px; max-width: 100%;
    background: white; z-index: 501; box-shadow: -8px 0 32px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .summarizer-panel.open { transform: translateX(0); }
  /* Upload-from-inside-the-summarizer is removed — PDFs (file or link) are
     handed over by the Upload PDF drawer's Summarize button. !important also
     overrides the setFile()/clearFile() display toggles. */
  #summarizerPanel #dropZone { display: none !important; }
  .summarizer-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #e5e7eb;
    background: white; flex-shrink: 0;
  }
  .summarizer-body { flex: 1; overflow-y: auto; padding: 24px 28px; }
  .drop-zone {
    border: 2px dashed #d1d5db; border-radius: 8px;
    padding: 36px 24px; text-align: center; background: #f9fafb;
    transition: all 0.2s; cursor: pointer; position: relative;
  }
  /* Default blue tint variant — gives the drop-zone equal visual weight to
     the Paste-link box. Declared after .drop-zone so it overrides the base
     border/background, but :hover/.drag-over (declared after this) still win. */
  .drop-zone.drop-zone-tinted { border-color: #bae6fd; background: #f0f9ff; }
  .drop-zone:hover, .drop-zone.drag-over { border-color: #1e3a5f; background: #eff6ff; }
  .drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

  /* Upload PDF modal — loading spinner shown in #uploadStatusRow while the
     stubbed submit is "in flight". */
  .upload-spinner {
    display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
    border: 2px solid #bae6fd; border-top-color: #1e3a5f; border-radius: 50%;
    animation: upload-spin 0.7s linear infinite;
  }
  @keyframes upload-spin { to { transform: rotate(360deg); } }
  
  /* Upload PDF drawer — slides in from the right, same motion as the
     Summarizer panel, but keeps the modal's original narrower width. */
  .upload-drawer-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    z-index: 3000; opacity: 0; pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .upload-drawer-overlay.open { opacity: 1; pointer-events: all; }
  .upload-drawer-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 480px;
    background: white; box-shadow: -8px 0 32px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .upload-drawer-panel.open { transform: translateX(0); }
  .slider-track {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 5px; border-radius: 3px;
    background: linear-gradient(to right, #1e3a5f 0%, #1e3a5f var(--val, 50%), #e5e7eb var(--val, 50%), #e5e7eb 100%);
    outline: none; cursor: pointer;
  }
  .slider-track::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: #1e3a5f; cursor: pointer;
    border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  .summarizer-btn {
    padding: 10px 22px; border-radius: 6px; font-size: 13px;
    font-weight: 600; cursor: pointer; border: none; transition: all 0.15s;
  }
  .summarizer-btn-primary {
    background: #1e3a5f; color: white;
  }
  .summarizer-btn-primary:hover { background: #2d5282; }
  .summarizer-btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }
  .summarizer-btn-secondary {
    background: white; color: #374151; border: 1px solid #d1d5db;
  }
  .summarizer-btn-secondary:hover { background: #f9fafb; }
  .summary-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
  }
  .summary-col-header {
    padding: 10px 14px; border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: space-between;
    background: #f9fafb;
  }
  .summary-col-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px; font-size: 13px; color: #374151; line-height: 1.8; }
  .summary-col-body .col-summary { flex: 1 1 auto; }
  .progress-bar-wrap { background: #f0f0f0; border-radius: 4px; height: 6px; overflow: hidden; margin-top: 10px; }
  .progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, #1e3a5f, #3b82f6);
    border-radius: 4px; width: 0%;
    transition: width 0.4s ease;
  }


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

  /* ── LOGIN SCREEN ─────────────────────────────────────────────────────── */
  #loginScreen {
    position: fixed; inset: 0; z-index: 1000;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
  }
  .login-card {
    background: white; border-radius: 12px; padding: 40px 40px 36px;
    width: 100%; max-width: 400px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
  }
  .login-input {
    width: 100%; padding: 10px 12px; border: 1.5px solid #d1d5db;
    border-radius: 6px; font-size: 13px; color: #111827;
    outline: none; transition: border-color 0.15s; box-sizing: border-box;
    font-family: inherit;
  }
  .login-input:focus { border-color: #1e3a5f; }
  .login-input.error { border-color: #ef4444; }
  .login-btn {
    width: 100%; padding: 11px; background: #1e3a5f; color: white;
    border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s; font-family: inherit;
  }
  .login-btn:hover { background: #2d5282; }
  .login-btn:active { background: #1a3354; }
  #loginError {
    display: none; font-size: 12px; color: #ef4444;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 5px; padding: 8px 12px; margin-bottom: 16px;
  }

  /* ── CHANGE PASSWORD MODAL ──────────────────────────────────────────────── */
  #changePwdModal {
    position:fixed; inset:0; background:rgba(15,23,42,0.4);
    z-index:600; display:none; align-items:center; justify-content:center;
  }
  #changePwdModal.open { display:flex; }
  .cp-card {
    background:white; border-radius:10px; padding:28px 32px;
    width:100%; max-width:360px; box-shadow:0 8px 32px rgba(0,0,0,0.12);
  }

  /* ── PHP CONTENT RENDERING ───────────────────────────────────────────────── */
  #pdfContent a { color: #1e40af; text-decoration: underline; }
  #pdfContent a:hover { color: #1e3a5f; }
  #pdfContent ol, #pdfContent ul { padding-left: 20px; margin: 8px 0 12px; }
  #pdfContent li { font-size: 13px; color: #374151; line-height: 1.8; margin-bottom: 4px; }
  #pdfContent p { font-size: 13px; color: #374151; line-height: 1.8; margin-bottom: 10px; }
  #pdfContent img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
  #pdfContent figure { margin: 12px 0; }
  #pdfContent strong { color: #111827; }
  #pdfContent blockquote { display: none; } /* tweets need JS to render — hide gracefully */

  /* ── PDF.js TEXT LAYER (View PDF tab) ──────────────────────────────────────
     Transparent text spans drawn over each page canvas so the PDF text can be
     selected and browser-searched (Ctrl+F) instead of being a flat image.
     The canvas shows the glyphs; these spans are invisible but selectable. */
  .pdf-page { position: relative; }
  .textLayer {
    position: absolute; inset: 0; overflow: hidden;
    line-height: 1.0; opacity: 0.2; text-align: initial;
    transform-origin: 0 0; forced-color-adjust: none;
  }
  .textLayer span, .textLayer br {
    color: transparent; position: absolute; white-space: pre;
    cursor: text; transform-origin: 0% 0%;
  }
  .textLayer ::selection { background: rgb(0, 0, 255); }

  /* View PDF tab: the viewer shell is height:100%, but #pdfContent is
     height:auto, so that collapsed to content height — the page stack then
     overflowed and got clipped by #tabContentArea instead of scrolling. Give
     the chain a definite height so .pdf-scroll-area (overflow-y:auto) becomes
     the scroller. Scoped via :has() so all other tabs are untouched. */
  #tabContentArea:has(.pdf-viewer-shell) { display: flex; flex-direction: column; }
  #tabContentArea:has(.pdf-viewer-shell) > #pdfContent { flex: 1 1 auto; min-height: 0; }