/* Giao diện đối chiếu ảnh gốc và kết quả bóc tách (tài liệu Mục 6.4.3).

   Biến màu khai báo cho nền SÁNG ở :root, và chỉ định nghĩa lại phần đổi trong
   khối prefers-color-scheme — không tách hai bảng màu rời nhau, vì tách ra thì
   thêm một màu mới rất dễ quên nửa còn lại.
*/
:root{
    --bg:#f4f5f7; --surface:#ffffff; --border:#dcdfe4; --text:#1c2024; --text-muted:#6b7280;
    --brand:#2563eb; --brand-strong:#1d4ed8; --error:#b42318; --error-bg:#fef3f2;
    --ok:#067647; --ok-bg:#ecfdf3; --warn:#b54708; --warn-bg:#fffaeb; --code-bg:#0f172a; --code-text:#e2e8f0;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1115; --surface:#181b21; --border:#2b3039; --text:#e6e8eb; --text-muted:#9aa1ac;
      --brand:#3b82f6; --brand-strong:#2563eb; --error:#ff8a80; --error-bg:#2a1616;
      --ok:#5ce0a0; --ok-bg:#12251c; --warn:#fdb022; --warn-bg:#2a2113; --code-bg:#0b0d12; --code-text:#cbd5e1;
    }
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  .container{max-width:1800px; margin:0 auto; padding:22px 24px 36px}
  header{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px}
  h1{font-size:20px; margin:0; font-weight:650; letter-spacing:-.01em}
  .grid{display:grid; grid-template-columns:minmax(0,310px) minmax(0,1fr); gap:20px; align-items:start}
  @media (max-width:900px){ .grid{grid-template-columns:1fr} }

  .card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px}
  .card h2{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
          margin:0 0 12px; font-weight:600}

  .dropzone{
    border:2px dashed var(--border); border-radius:10px; padding:28px 16px; text-align:center;
    cursor:pointer; transition:border-color .15s, background .15s; color:var(--text-muted);
  }
  .dropzone:hover,.dropzone.dragging{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 7%,transparent)}
  .dropzone b{display:block; color:var(--text); font-weight:600; margin-bottom:4px}
  .dropzone small{font-size:12.5px}

  .file-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
  .file-list li{
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    border:1px solid var(--border); border-radius:8px; font-size:13.5px; min-width:0;
    cursor:pointer;
  }
  .file-list li:hover{border-color:var(--brand)}
  .file-list .thumb{width:38px; height:38px; border-radius:5px; object-fit:cover; flex:none; background:var(--bg)}
  .file-list .thumb.pdf{display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--error)}
  .file-list .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .file-list .size{color:var(--text-muted); font-size:12px; flex:none}
  .file-list button{
    border:0; background:none; color:var(--text-muted); cursor:pointer; font-size:18px;
    line-height:1; padding:2px 5px; border-radius:5px; flex:none;
  }
  .file-list button:hover{background:var(--bg); color:var(--error)}

  .button-row{display:flex; gap:10px; margin-top:16px}
  button.primary{
    flex:1; border:0; border-radius:9px; padding:11px 16px; font-size:15px; font-weight:600;
    background:var(--brand); color:#fff; cursor:pointer;
  }
  button.primary:hover:not(:disabled){background:var(--brand-strong)}
  button.primary:disabled{opacity:.45; cursor:not-allowed}
  button.secondary{
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    border-radius:9px; padding:11px 14px; cursor:pointer; font-size:14px;
  }
  button.secondary:hover{background:var(--bg)}

  .spinner{
    display:inline-block; width:14px; height:14px; margin-right:7px; vertical-align:-2px;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
    animation:quay .7s linear infinite;
  }
  @keyframes quay{to{transform:rotate(360deg)}}

  .empty{color:var(--text-muted); text-align:center; padding:60px 20px; font-size:14px}

  .result{margin-bottom:16px}
  .result-header{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
  .result-header .name{font-weight:600; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .badge{font-size:12px; padding:2px 9px; border-radius:999px; font-weight:600; flex:none}
  .badge.ok{background:var(--ok-bg); color:var(--ok)}
  .badge.warn{background:var(--warn-bg); color:var(--warn)}
  .badge.error{background:var(--error-bg); color:var(--error)}
  .result-header .small-buttons{margin-left:auto; display:flex; gap:8px}
  .small-buttons button{
    border:1px solid var(--border); background:transparent; color:var(--text-muted);
    border-radius:7px; padding:5px 10px; font-size:12.5px; cursor:pointer;
  }
  .small-buttons button:hover{background:var(--bg); color:var(--text)}

  /* Tệp bên trái, trường bóc được bên phải — đặt cạnh nhau để soi từng trường
     ngược lại văn bản gốc mà không phải mở/đóng khung viewer. */
  .result-body{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
           gap:20px; align-items:start}
  @media (max-width:1150px){ .result-body{grid-template-columns:1fr} }
  /* Cao theo màn hình: 440px cố định để lọt vừa một khổ A4 thu nhỏ tới mức khó
     đọc, mà vẫn chừa một mảng trắng lớn dưới thẻ trên màn hình cao. */
  .result-preview{
    height:clamp(460px, 74vh, 880px); background:var(--bg);
    border:1px solid var(--border); border-radius:9px; overflow:auto; display:flex;
  }
  .result-preview img{margin:auto; display:block; max-width:100%; max-height:100%;
              object-fit:contain; cursor:zoom-in}
  .result-preview iframe{flex:1; min-height:0; border:0; display:block; background:#fff}
  .result-preview .viewer-note{padding:22px; font-size:13px}

  table.fields{width:100%; border-collapse:collapse; font-size:14px}
  table.fields th{
    text-align:left; width:190px; vertical-align:top; font-weight:600; color:var(--text-muted);
    padding:9px 14px 9px 0; border-top:1px solid var(--border); font-size:13.5px;
  }
  table.fields td{padding:9px 0; border-top:1px solid var(--border); word-break:break-word}
  table.fields tr:first-child th, table.fields tr:first-child td{border-top:0}
  .empty-value{color:var(--text-muted); font-style:italic}

  /* Vỏ ngoài của response mô tả TỆP (số trang, số văn bản, giờ bóc tách) — đặt
     một dòng ở trên, tách hẳn khỏi các khối văn bản bên dưới. */
  .file-summary{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px;
            color:var(--text-muted); padding-bottom:10px; margin-bottom:4px;
            border-bottom:1px solid var(--border)}

  /* Mỗi văn bản tìm được trong tệp là một khối riêng, có tiêu đề trang của nó.
     Tệp một văn bản thì chỉ có đúng một khối, trông như bảng trường như cũ. */
  .page-block{margin-top:14px}
  .page-block + .page-block{padding-top:16px; border-top:2px solid var(--border)}
  .page-head{font-size:12px; text-transform:uppercase; letter-spacing:.05em;
         color:var(--text-muted); font-weight:700; margin-bottom:8px}
  .conf-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px}

  .stamp{margin-top:6px; padding:12px 14px; background:var(--bg); border-radius:9px}
  .stamp-label{font-size:12px; text-transform:uppercase; letter-spacing:.05em;
            color:var(--text-muted); font-weight:600; margin-bottom:8px}
  .stamp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
  .stamp-grid div span{display:block; font-size:12px; color:var(--text-muted); margin-bottom:2px}

  .error-box{background:var(--error-bg); color:var(--error); border-radius:9px; padding:12px 14px; font-size:14px}
  pre.json{
    background:var(--code-bg); color:var(--code-text); padding:14px; border-radius:9px;
    overflow-x:auto; font-size:12.5px; margin:12px 0 0;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  }
  /* --- khung viewer trước tệp --- */
  .viewer{
    position:fixed; inset:0; z-index:50; background:rgba(9,11,15,.72);
    display:flex; flex-direction:column; gap:12px; padding:22px;
  }
  .viewer[hidden]{display:none}
  .viewer-bar{
    display:flex; align-items:center; gap:12px; color:#fff; flex:none;
    width:100%; max-width:1100px; margin:0 auto;
  }
  .viewer-bar .name{
    font-size:14px; font-weight:600; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .viewer-bar .size{font-size:12.5px; color:rgba(255,255,255,.6); flex:none}
  .viewer-bar .close{
    margin-left:auto; flex:none; border:0; cursor:pointer; color:#fff;
    background:rgba(255,255,255,.15); width:32px; height:32px;
    border-radius:8px; font-size:20px; line-height:1;
  }
  .viewer-bar .close:hover{background:rgba(255,255,255,.28)}
  .viewer-body{
    flex:1; min-height:0; width:100%; max-width:1100px; margin:0 auto;
    background:#fff; color:#1c2024; border-radius:10px; overflow:auto; display:flex;
  }
  /* margin:auto thay cho align-items:center — khi phóng to ảnh vượt khung thì
     canh giữa bằng flex sẽ cắt mất mép trên, còn margin:auto thì không. */
  .viewer-body img{
    margin:auto; display:block; max-width:100%; max-height:100%;
    object-fit:contain; cursor:zoom-in;
  }
  .viewer-body img.zoomed{max-width:none; max-height:none; cursor:zoom-out}
  .viewer-body iframe{flex:1; min-height:0; border:0; display:block}
  .viewer-note{margin:auto; padding:34px; text-align:center; color:inherit;
           font-size:14px; line-height:1.7; max-width:460px}
  .viewer-note a{color:#2563eb; display:inline-block; margin-top:10px}

  /* --- bộ chọn định dạng kết quả (tài liệu Mục 2.4.5, 3.2) --- */
  .format-picker{
    border:1px solid var(--border); border-radius:10px; margin:16px 0 0;
    padding:10px 12px 12px;
  }
  .format-picker legend{
    font-size:12px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-muted); font-weight:600; padding:0 6px;
  }
  .format-picker label{
    display:flex; align-items:baseline; gap:8px; padding:6px 6px;
    border-radius:7px; cursor:pointer; font-size:13.5px;
  }
  .format-picker label:hover{background:var(--bg)}
  .format-picker input{accent-color:var(--brand); flex:none}
  .format-picker span{font-weight:600}
  .format-picker small{color:var(--text-muted); font-size:12px; margin-left:auto; text-align:right}
  .format-picker .hint{margin:8px 6px 0; font-size:12px; color:var(--text-muted); line-height:1.5}
  /* Ô chọn kèm/bỏ khối thông tin. Ngăn cách bằng một đường kẻ vì nó không phải
     một lựa chọn định dạng thứ năm mà là tuỳ chọn ÁP LÊN lựa chọn vừa chọn. */
  .format-picker .toggle{
    margin-top:8px; padding-top:10px; border-top:1px solid var(--border);
  }
  /* Vô nghĩa với JSON: làm mờ chứ không giấu, để ô chọn không nhảy ra nhảy vào
     mỗi lần đổi định dạng. */

  /* --- tab định dạng trên mỗi thẻ kết quả --- */
  .tabs{
    display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px;
    border-bottom:1px solid var(--border);
  }
  .tab{
    border:0; background:none; color:var(--text-muted); cursor:pointer;
    font-size:13px; font-weight:600; padding:8px 12px; margin-bottom:-1px;
    border-bottom:2px solid transparent;
  }
  .tab:hover:not(:disabled){color:var(--text)}
  .tab.active{color:var(--brand); border-bottom-color:var(--brand)}
  .tab:disabled{opacity:.5; cursor:progress}

  .tab-loading{
    display:flex; align-items:center; gap:10px; padding:26px 4px;
    color:var(--text-muted); font-size:13.5px;
  }
  /* Spinner mặc định là trắng vì nó nằm trong nút xanh. Bản này nằm trên nền
     thẻ nên phải đổi màu, nếu không thì trắng trên trắng = không thấy gì. */
  .spinner.dark{
    margin:0; border-color:color-mix(in srgb,var(--text-muted) 35%,transparent);
    border-top-color:var(--brand);
  }

  /* Bản text và Markdown là VĂN BẢN THUẦN: giữ nguyên khoảng trắng để bảng căn
     bằng dấu cách còn thẳng cột, nhưng vẫn cho xuống dòng mềm để câu dài không
     đẩy cả thẻ trượt ngang. */
  pre.doc-source{
    background:var(--code-bg); color:var(--code-text); padding:14px; border-radius:9px;
    margin:0; font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word;
    overflow:auto; max-height:clamp(460px,74vh,880px);
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  }
  pre.json{max-height:360px; overflow:auto}

  .html-preview{border:1px solid var(--border); border-radius:9px; overflow:hidden; background:#fff}
  .html-preview iframe{width:100%; height:clamp(420px,66vh,800px); border:0; display:block}
  .html-source{margin-top:12px}
  .html-source summary{cursor:pointer; color:var(--text-muted); font-size:12.5px; padding:4px 0}
  .html-source summary:hover{color:var(--text)}
  .html-source pre.doc-source{margin-top:8px; max-height:340px}