/*
 * congcuseoai.com — Thư viện component dùng chung (phase 03, 260905).
 *
 * 11 khuôn trích từ mockup (Keywords/Projects/WriteAI/AdminIntegrations/Dashboard/History.dc.html):
 * nút, thẻ, bảng, badge, form, chip phân đoạn, tiến trình, ô thêm mới, cảnh báo, rỗng, thẻ số liệu.
 *
 * Nạp SAU design-tokens.css, TRƯỚC app-shell.css và style.css (style.css nạp SAU CÙNG để rule
 * đặc thù từng trang thắng nhờ thứ tự nguồn, không phải vì đặc hiệu cao hơn — file này KHÔNG
 * dùng !important, không tăng đặc hiệu selector). Class cũ giữ nguyên tên làm alias — không view
 * nào bị sửa vì phase này.
 */

/* ── 1. Nút ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block; padding: 9px 16px; border-radius: var(--r);
    border: 1px solid transparent; text-decoration: none; cursor: pointer;
    font-weight: 700; font-size: 13.5px; font-family: inherit;
}
.btn-primary { background: var(--brand); color: var(--surface); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-soft { background: var(--surface-alt); color: var(--ink); }
.btn-soft:hover { background: var(--tint); }
.btn-danger { background: var(--danger-fg); color: var(--surface); }
.btn-lg { padding: 12px 22px; font-size: 1.05rem; box-shadow: var(--sh-btn); }
.btn-small { padding: 5px 10px; font-size: 0.85rem; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* ── 2. Thẻ ──────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }

/* ── 3. Bảng ─────────────────────────────────────────────────────────────── */
/* View đang dùng .table-scroll bọc <table class="data-table"> ở mọi trang — style thẳng cặp này
   theo khuôn mockup thay vì bắt view thêm div .card mới (không sửa view ở phase này). */
.table-scroll {
    overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.data-table thead th {
    text-align: left; padding: 14px 22px; font-size: 12.5px; font-weight: 700; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}
.data-table tbody td { text-align: left; padding: 14px 22px; border-bottom: 1px solid var(--line-faint); white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--canvas); }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table code { font-size: 0.85rem; }

/* ── 4. Badge ────────────────────────────────────────────────────────────── */
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid transparent; }
.tag--ok, .tag-ok { background: var(--ok-bg); color: var(--ok-fg); }
.tag--warn { background: var(--warn-bg); color: var(--warn-fg); }
.tag--danger, .tag-bad { background: var(--danger-bg); color: var(--danger-fg); }
.tag--info, .tag-admin { background: var(--info-bg); color: var(--info-fg); }
.tag--neutral { background: var(--surface-alt); color: var(--ink-3); }

/* .text-ok/.text-error: project-wp-test.js tự gán 2 class này lên kết quả "Kiểm tra kết nối
   WordPress" (tab-wordpress.php) bằng resultEl.className — chưa từng có rule CSS từ trước, kết
   quả hiển thị không màu thay vì xanh/đỏ như ý đồ ban đầu. Không đổi tên class trong .js, chỉ bù
   CSS còn thiếu. */
.text-ok { color: var(--ok-fg); }
.text-error { color: var(--danger-fg); }

/* ── 5. Form ─────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: var(--sp-4); }
.field > span:first-child, .field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.field input[type="text"], .field input[type="url"], .field input[type="number"],
.field input[type="email"], .field input[type="password"], .field select, .field textarea,
input[type="text"], input[type="url"], input[type="number"], input[type="email"], select, textarea {
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); color: var(--fg); font: inherit;
}
.field input, .field select, .field textarea { width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint);
}
/* :focus-visible (phase 10, a11y) — bổ sung viền rõ cho điều hướng bàn phím, cộng thêm chứ không
   thay :focus ở trên (giữ nguyên box-shadow đã chốt, chỉ thêm outline khi focus do Tab). */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand-dark); outline-offset: 1px;
}
.field small { display: block; margin-top: 5px; color: var(--muted); }
.required { color: var(--danger-fg); }

/* ── 6. Chip phân đoạn ───────────────────────────────────────────────────── */
/* Dùng cho bước viết bài (write/progress.js bật/tắt .is-active) và bộ lọc lịch sử (link query) —
   chưa có view nào dùng ở phase này, dựng sẵn khuôn cho phase 06/08. */
.seg { display: inline-flex; background: var(--surface-alt); border-radius: var(--r); padding: 3px; gap: 2px; }
.seg-item {
    padding: 7px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700;
    color: var(--ink-3); text-decoration: none; border: 0; background: none; cursor: pointer; font-family: inherit;
}
.seg-item.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.seg-item:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* ── 7. Tiến trình ───────────────────────────────────────────────────────── */
.progress-bar { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; min-width: 110px; }
.progress-bar > span { display: block; height: 100%; background: var(--brand); transition: width .4s ease; }

/* ── 8. Ô thêm mới ───────────────────────────────────────────────────────── */
.tile-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 1px dashed var(--line-tint); border-radius: var(--r-lg); padding: 28px 16px;
    color: var(--brand-link); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; cursor: pointer;
}
.tile-add:hover { border-color: var(--brand); background: var(--tint); }

/* ── 9. Cảnh báo ─────────────────────────────────────────────────────────── */
.alert { padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); text-align: left; }
.alert--ok, .alert-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-fg); }
.alert--warn, .alert-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); }
.alert--danger, .alert-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-fg); }
.alert--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-fg); }

/* ── 10. Rỗng ────────────────────────────────────────────────────────────── */
/* .image-empty (cũ, riêng thư viện ảnh) giữ nguyên ở style.css — .empty-state là bản tổng quát
   dùng cho mọi bảng/danh sách rỗng khác. */
.empty-state { padding: 48px 24px; text-align: center; color: var(--muted); }
/* .empty-state-icon — xoá (phase 10, 260908): 0 kết quả grep app/Views + public/assets/js, chưa
   view nào render icon trong ô rỗng. */
.empty-state-title { font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }

/* ── 11. Thẻ số liệu ─────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 20px 0 36px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
/* .stat-label/.stat-delta — xoá (phase 10, 260908): 0 kết quả grep app/Views + public/assets/js;
   3 trang dùng .stat-grid (dashboard.php, admin/dashboard.php, credits-history.php) chỉ render
   .stat/.stat-num, không có nhãn phụ/độ lệch. */
.stat-num { display: block; font-size: 24px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }