/* Dùng chung bảng màu với qr-manager và pdf-to-word để các công cụ trong /apps
   nhìn đồng bộ. */
:root {
    --color-primary: #50AFA4;
    --color-primary-hover: #3D9B90;
    --color-light: #E8F6F2;
    --color-bg: #F6FAF9;
    --color-surface: #FFFFFF;
    --color-border: #DCE9E6;
    --color-text: #253638;
    --color-muted: #738487;
    --color-danger: #D65353;
    --color-warning: #D39A22;
    --color-success: #10B981;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    padding: 1rem;
}

.hidden { display: none !important; }

.app-container { max-width: 62rem; margin: 0 auto; }

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.app-header h1 { font-size: 1.25rem; font-weight: 600; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--color-light);
    color: var(--color-primary-hover);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.privacy-note {
    display: flex;
    gap: 0.5rem;
    background: var(--color-light);
    border-left: 3px solid var(--color-primary);
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.privacy-note > i { color: var(--color-primary); margin-top: 0.15rem; flex: none; }
/* Cả câu phải nằm trong một thẻ span: chữ trần và <strong> đặt thẳng trong
   khung flex sẽ bị tách thành nhiều cột, vỡ câu văn. */
.privacy-note > span { flex: 1; min-width: 0; }

/* Khung từng bước */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.card-title .ok { color: var(--color-success); }
.step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8125rem;
}

.hint { font-size: 0.8125rem; color: var(--color-muted); }
.hint code {
    background: var(--color-light);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.9em;
}

/* Vùng thả tệp */
.dropzone {
    border: 2px dashed var(--color-border);
    border-radius: 0.625rem;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.over {
    border-color: var(--color-primary);
    background: var(--color-light);
    outline: none;
}
.dropzone > i { font-size: 1.75rem; color: var(--color-primary); }
.dropzone-title { font-weight: 600; margin-top: 0.5rem; }
.dropzone-sub { font-size: 0.875rem; color: var(--color-muted); }
.dropzone-limit { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.375rem; }

/* Ô nhập */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field-wide { grid-column: 1 / -1; }
.field > span { font-size: 0.8125rem; font-weight: 500; }
.field small { font-size: 0.75rem; color: var(--color-muted); }

input[type="text"], input[type="number"], select, textarea {
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.4375rem 0.5rem;
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    border-color: var(--color-primary);
}
textarea { resize: vertical; }

.checkbox-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}
.checkbox-row input { margin-top: 0.25rem; flex-shrink: 0; }
.checkbox-row small { display: block; font-size: 0.75rem; color: var(--color-muted); }

/* Nút */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-outline {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover:not(:disabled) { background: var(--color-light); }
.btn-block { width: 100%; margin-top: 0.75rem; }
.btn-sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; margin-top: 0.5rem; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.btn-icon {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0.25rem 0.3125rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}
.btn-icon:hover { background: var(--color-light); color: var(--color-primary-hover); }

/* Xem trước */
.preview-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.preview-row .hint { flex: 1; min-width: 14rem; }
.preview-box {
    margin-top: 0.75rem;
    max-height: 32rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: #F1F5F4;
    padding: 0.75rem;
    text-align: center;
}
/* Trang được vẽ ra ảnh, không nhúng trình xem PDF — xem chú thích trong
   veTrangDauRaCanvas(). */
.preview-box canvas {
    max-width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* Bảng danh mục */
.table-wrap { overflow-x: auto; margin-top: 0.75rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 46rem; }
.tbl th, .tbl td {
    border: 1px solid var(--color-border);
    padding: 0.25rem 0.375rem;
    text-align: left;
    vertical-align: middle;
}
.tbl th {
    background: var(--color-light);
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}
.tbl td input { border-color: transparent; background: transparent; padding: 0.25rem 0.375rem; }
.tbl td input:hover { border-color: var(--color-border); }
.tbl .o-chu { text-align: center; font-variant-numeric: tabular-nums; }
.tbl .c-stt { width: 3rem; }
.tbl .c-ngay { width: 7.5rem; }
.tbl .c-ht { width: 8.5rem; }
.tbl .c-soto { width: 5.5rem; text-align: center; }
/* Word/Excel: ô Số tờ nhập được, dải bút lục hiện nhỏ bên dưới. */
.tbl .o-so-trang {
    width: 4rem;
    text-align: center;
    border-color: var(--color-border);
    background: var(--color-surface);
}
.dai-but-luc {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-muted);
    margin-top: 0.125rem;
    white-space: nowrap;
}
.tbl .c-gc { width: 7.5rem; }
.tbl .c-act { width: 5.5rem; white-space: nowrap; text-align: center; }

.ten-tep {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-muted);
    padding: 0 0.375rem 0.125rem;
    word-break: break-all;
}
.row-nhom td { background: #F1F7F5; }
.row-nhom input { font-weight: 600; }
.row-loi td { background: #FDF1F1; }
.row-loi .ten-tep { color: var(--color-danger); }

/* Nhắc đăng nhập — hiện tại chỗ, không chiếm cả trang, để người dùng vẫn thấy
   danh mục mình vừa nhập. Giống pdf-to-word. */
.login-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--color-light);
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 0.875rem;
    margin-top: 0.75rem;
}
.login-prompt > i { font-size: 1.25rem; color: var(--color-primary); flex-shrink: 0; }
.login-prompt-body { flex: 1; min-width: 12rem; }
.login-prompt-body strong { display: block; font-size: 0.9375rem; }
.login-prompt-body p { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.125rem; }
.login-prompt .btn { flex-shrink: 0; }

/* Nhắc có bản scan — kèm nút chạy nhận dạng chữ */
.scan-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #FDF6E7;
    border: 1px solid var(--color-warning);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
}
.scan-box > i { font-size: 1.25rem; color: var(--color-warning); flex-shrink: 0; }
.scan-body { flex: 1; min-width: 14rem; }
.scan-body strong { display: block; font-size: 0.9375rem; }
.scan-body p { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.125rem; }
.scan-box .btn { flex-shrink: 0; }

.details {
    margin-top: 1rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}
.details summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* Tiến trình */
.progress {
    height: 0.5rem;
    background: var(--color-light);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.625rem;
}
.progress-bar {
    height: 100%;
    width: 0;
    background: var(--color-primary);
    transition: width 0.2s;
}
.working-title { font-size: 0.875rem; font-weight: 500; word-break: break-all; }

/* Kết quả */
.tom-tat { font-size: 0.875rem; margin-bottom: 0.75rem; }
.tom-tat p + p { margin-top: 0.5rem; }
.canh-bao {
    background: #FDF6E7;
    border-left: 3px solid var(--color-warning);
    border-radius: 0.375rem;
    padding: 0.625rem;
    font-size: 0.8125rem;
}
.canh-bao > i { color: var(--color-warning); }

.error-box {
    display: flex;
    gap: 0.5rem;
    background: #FDF1F1;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

@media (max-width: 40rem) {
    body { padding: 0.625rem; }
    .card { padding: 0.75rem; }
}