/*
 * report.css — styling for the analysis report body.
 *
 * SINGLE SOURCE for report styling: used by results.php on the tool domain AND loaded by
 * the WordPress plugin, so the embedded report looks identical to the standalone one.
 *
 * EVERYTHING is scoped under .aiseo-report on purpose. The report used to be styled by
 * inline CSS with bare `body`, `*`, `table`, `th`, `td` selectors and generic class names
 * (.card, .grid, .nav, .active) — dropping that into a WordPress theme would overwrite the
 * host page and break every other table on it. Never add an unscoped rule to this file.
 *
 * Colours come from custom properties declared on the wrapper (not :root), so a host theme
 * can override them per instance without leaking variables into the rest of the page.
 */

.aiseo-report {
  --brand: #2196f3;
  --brand2: #0ea5e9;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --orange: #f97316;

  /* Typography is pinned so the embedded report matches the tool exactly — a host theme
     with its own `h2 { font-family: … }` would otherwise restyle the headings. A host
     that prefers its native font can override just this one variable:
         .aiseo-report { --aiseo-font: inherit; }   */
  --aiseo-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  color: var(--ink);
  font-family: var(--aiseo-font);
  font-size: 15px;
  line-height: 1.55;
}
.aiseo-report h1, .aiseo-report h2, .aiseo-report h3,
.aiseo-report h4, .aiseo-report p,  .aiseo-report li,
.aiseo-report td, .aiseo-report th, .aiseo-report div,
.aiseo-report span, .aiseo-report button, .aiseo-report a { font-family: var(--aiseo-font); }
.aiseo-report p,
.aiseo-report li,
.aiseo-report ul,
.aiseo-report strong { color: inherit; font-size: inherit; }
.aiseo-report ul { margin: 0 0 10px 18px; padding: 0; }
.aiseo-report li { margin-bottom: 4px; }

.aiseo-report *,
.aiseo-report *::before,
.aiseo-report *::after { box-sizing: border-box; }

/* ── Cards & text ────────────────────────────────────────────────────────── */
.aiseo-report .card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 16px 0;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .06);
}
.aiseo-report .muted { color: var(--muted); }
.aiseo-report .err   { color: var(--red); }
.aiseo-report h2 { color: var(--ink); font-size: 19px; margin: 2px 0 10px; }
.aiseo-report h3 { color: var(--brand); font-size: 15px; margin: 14px 0 6px; }
.aiseo-report .sect {
  text-transform: uppercase; font-size: 14px; letter-spacing: .06em; font-weight: 800;
  color: #334155; margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}

/* ── Score cards ─────────────────────────────────────────────────────────── */
.aiseo-report .scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.aiseo-report .score {
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; text-align: center;
}
.aiseo-report .score .n { font-size: 30px; font-weight: 900; }
.aiseo-report .score .l {
  font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 800;
}
.aiseo-report .overview-hero {
  border: 2px solid var(--line); border-radius: 16px;
  background: linear-gradient(135deg, #fff, #f8fafc);
  padding: 26px; margin: 6px 0 16px; text-align: center;
}
.aiseo-report .overview-num {
  font-size: clamp(48px, 9vw, 92px); line-height: .9; font-weight: 950;
}
.aiseo-report .overview-num span {
  font-size: .28em; color: var(--muted); margin-left: 8px; vertical-align: baseline;
}
.aiseo-report .overview-lbl {
  margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 900; color: var(--muted);
}
.aiseo-report .overview-verdict { margin-top: 6px; font-size: 17px; font-weight: 850; }

/* ── Tables — framed, rounded, zebra ─────────────────────────────────────── */
/* background + color are declared EXPLICITLY, not left to inherit: a host theme with a
   blanket `th, td { background: …; color: … }` rule would otherwise bleed into the report
   on every row the zebra rule below does not cover. Verified against a hostile theme. */
.aiseo-report table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}
.aiseo-report th,
.aiseo-report td {
  text-align: left; padding: 13px 15px; vertical-align: top; font-size: 14px;
  font-family: inherit; line-height: 1.5;
}
.aiseo-report td {
  /* `border: 0` trước rồi mới vẽ hai cạnh cần: hello-elementor có
     `table td, table th { border: 1px solid … }`. Ta thắng về specificity (0,1,1 > 0,0,2)
     nhưng chỉ ở hai cạnh ta khai — không reset thì viền TRÊN và TRÁI của theme vẫn còn,
     thành ra mỗi ô một khung xám. */
  border: 0;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  background: #fff; color: var(--ink);
}
.aiseo-report td:last-child { border-right: 0; }
.aiseo-report tr:last-child td { border-bottom: 0; }
/* !important CHỈ trên ba thuộc tính quyết định hàng tiêu đề có ĐỌC ĐƯỢC hay không.
 *
 * Lý do cụ thể, đã đo trên up4d-group.com (theme hello-elementor):
 *     table tbody > tr:nth-child(odd) > th { background-color: hsla(0,0%,50.2%,.07) }
 * Độ ưu tiên (0,1,4) — cao hơn `.aiseo-report th` (0,1,1) của ta. Nó trúng vì 25/26 bảng
 * trong báo cáo có <th> nằm NGOÀI <thead>, nên trình duyệt nhét hàng tiêu đề vào <tbody>
 * ngầm và nó thành "hàng lẻ đầu tiên". Kết quả: nền xanh bị thay bằng xám nhạt, chữ vẫn
 * trắng → tiêu đề trắng trên nền trắng, không đọc được gì.
 *
 * Cùng lý do đó theme cũng vẽ viền xám quanh mọi ô (table td, table th { border: … }).
 *
 * Nâng specificity bằng selector dài hơn thì chỉ thắng ĐÚNG cái theme này; theme khác viết
 * !important là thua tiếp. Đây chính là lập luận đã dùng cho ô nhập trong ui.css.
 * KHÔNG lan !important sang thuộc tính khác của file này. */
.aiseo-report th {
  background: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .45) !important;
  font-size: 14px; text-transform: uppercase;
  letter-spacing: .03em; font-weight: 800;
  /* Tiêu đề cột luôn MỘT DÒNG. Chúng đều ngắn ("AI SEO", "GESAMT", "STATUS"), nhưng cột
     hẹp là trình duyệt ngắt thành "AI" / "SEO" — hàng tiêu đề cao gấp đôi và lệch hẳn so
     với các bảng khác. Bảng Scan history CỐ Ý cho ngắt dòng và tự ghi đè bên dưới
     (.aiseo-report table.hist th, specificity 0,2,2 > 0,1,1). */
  white-space: nowrap;
}
/* !important theo cùng lý do ở trên — nếu không, border-right !important của .aiseo-report th
   sẽ thắng chính quy tắc này và cột cuối vẫn còn vạch trắng thừa. */
.aiseo-report th:last-child { border-right: 0 !important; }
.aiseo-report th:first-child { border-top-left-radius: 8px; }
.aiseo-report th:last-child  { border-top-right-radius: 8px; }
.aiseo-report tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.aiseo-report tr:last-child td:last-child  { border-bottom-right-radius: 8px; }
.aiseo-report tr:nth-child(odd) td { background: #f8fafc; }
/* Wide tables must scroll inside their own box, never push the host page sideways. */
.aiseo-report .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.aiseo-report .tag {
  display: inline-block; border-radius: 999px; padding: 4px 10px; font-size: 14px;
  font-weight: 800; background: #e0f2fe; color: #0369a1;
}
.aiseo-report .tag-g { background: var(--green); color: #fff; }
.aiseo-report .tag-y { background: var(--orange); color: #fff; }
.aiseo-report .tag-r { background: var(--red); color: #fff; }
.aiseo-report .verdict {
  text-transform: uppercase; letter-spacing: .05em; padding: 6px 14px;
  font-size: 14px; vertical-align: middle;
}

/* ── Quick wins & grids ──────────────────────────────────────────────────── */
.aiseo-report .grid  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.aiseo-report .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aiseo-report .qw {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff;
}
.aiseo-report .qw h3 { margin: 0 0 8px; text-align: center; }
.aiseo-report .qw h3 + p { text-align: center; margin: 0 0 10px; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.aiseo-report .tabs {
  display: flex; gap: 0; margin: 22px auto 16px; max-width: 720px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
.aiseo-report .tab {
  flex: 1; border: 0; border-right: 1px solid var(--line); background: #fff;
  padding: 15px 20px; font-weight: 800; cursor: pointer; color: var(--muted);
  font-size: 15px; text-align: center; font-family: inherit;
}
.aiseo-report .tab:last-child { border-right: 0; }
.aiseo-report .tab.active { background: var(--brand); color: #fff; }
.aiseo-report .tabpanel { display: none; }
.aiseo-report .tabpanel.active { display: block; }
.aiseo-report .subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.aiseo-report .subtab {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--muted); font-family: inherit;
}
.aiseo-report .subtab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.aiseo-report .subpanel { display: none; }
.aiseo-report .subpanel.active { display: block; }

/* ── Scan history ────────────────────────────────────────────────────────── */
.aiseo-report .aiseo-history {
  width: 100%;
  margin: 16px 0;
  padding: 32px 24px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
  font-family: Lato, var(--aiseo-font);
}
.aiseo-report .aiseo-history .sect {
  margin: 0 0 8px;
  color: #606060;
  display: block;
  font-family: Lato, var(--aiseo-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
}
.aiseo-report .aiseo-history .history-copy {
  margin: 0 0 32px;
  color: #606060;
  font-size: 14px;
  line-height: 1.5;
}
.aiseo-report .aiseo-history .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* table-layout:fixed là mấu chốt. Với `auto` (mặc định), các width bên dưới chỉ là GỢI Ý:
   nội dung dài hơn sẽ đội cột rộng ra — "Payment status" ~104px trên cột khai 96px,
   "ai-seo-analysis.test" ~148px trên cột khai 132px — cộng lại vượt 752px của khung nên
   sinh thanh cuộn ngang ngay cả trên màn hình rất rộng. Với `fixed`, bề rộng khai báo là
   quyết định và bảng luôn vừa đúng 100% khung. */
.aiseo-report table.hist {
  width: 100%;
  /* 740 chứ không phải 680: dưới 740 thì hai cột trạng thái hẹp hơn cái pill 62px bên
     trong và pill bị cắt cụt. Vẫn nhỏ hơn 752 nên trên desktop không hề có cuộn ngang. */
  min-width: 740px;
  table-layout: fixed;
  margin: 0;
  border: .5px solid #dce6ed;
  border-collapse: collapse;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.aiseo-report table.hist th,
.aiseo-report table.hist td {
  height: 56px;
  padding: 0 8px;
  border: 1px solid #dce6ed;
  color: #606060;
  font-family: Lato, var(--aiseo-font);
  font-size: 14px;
  letter-spacing: -.132px;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiseo-report table.hist th {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-transform: none;
  /* Cho tiêu đề xuống dòng: "Payment status" một dòng là cột ngốn chỗ nhất, gấp đôi dòng
     vẫn thừa chỗ trong ô cao 56px (2 × 18px). */
  white-space: normal;
}
/* Cột Site: tên miền dài là thứ đội bề rộng nhiều thứ hai — cho nó ngắt dòng thay vì đẩy
   cả bảng rộng ra. */
.aiseo-report table.hist td:nth-child(3) {
  white-space: normal;
  word-break: break-word;
}
.aiseo-report table.hist td {
  background: #fff;
  font-weight: 500;
}
.aiseo-report table.hist tbody tr:nth-child(even) td { background: #f3f5f7; }
.aiseo-report table.hist tbody tr { cursor: pointer; }
.aiseo-report table.hist tr.cur td {
  background: #fff;
  font-weight: 500;
}
/* Phần trăm, KHÔNG phải px: cộng lại đúng 100% nên bảng vừa khít khung ở mọi bề rộng —
   px cố định chỉ khớp đúng một khung 752px, lệch một chút là lại có thanh cuộn.
   5 + 13 + 20 + 12 + 7 + 9.5 + 11.5 + 12.5 + 9.5 = 100 */
.aiseo-report table.hist th:nth-child(1),
.aiseo-report table.hist td:nth-child(1) { width: 5%; }
.aiseo-report table.hist th:nth-child(2),
.aiseo-report table.hist td:nth-child(2) { width: 13%; }
.aiseo-report table.hist th:nth-child(3),
.aiseo-report table.hist td:nth-child(3) { width: 20%; }
.aiseo-report table.hist th:nth-child(4),
.aiseo-report table.hist td:nth-child(4) { width: 12%; }
.aiseo-report table.hist th:nth-child(5),
.aiseo-report table.hist td:nth-child(5) { width: 7%; }
.aiseo-report table.hist th:nth-child(6),
.aiseo-report table.hist td:nth-child(6) { width: 9.5%; }
.aiseo-report table.hist th:nth-child(7),
.aiseo-report table.hist td:nth-child(7) { width: 11.5%; }
.aiseo-report table.hist th:nth-child(8),
.aiseo-report table.hist td:nth-child(8) { width: 12.5%; }
.aiseo-report table.hist th:nth-child(9),
.aiseo-report table.hist td:nth-child(9) { width: 9.5%; }
/* Ngày và tên gói cũng cho ngắt dòng: "2026-08-13 / 06:13" và "Hyper / Engine" xuống hai
   dòng vẫn đọc được, còn cắt cụt bằng dấu … thì mất thông tin. */
.aiseo-report table.hist td:nth-child(2),
.aiseo-report table.hist td:nth-child(4) { white-space: normal; }
.aiseo-report .hist-score { font-weight: 800; }
.aiseo-report .hist-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 333px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: unset;
}
.aiseo-report .hist-status-done,
.aiseo-report .hist-payment-success { background: #42a245; }
.aiseo-report .hist-status-process { background: #afafaf; }
.aiseo-report .hist-status-failed,
.aiseo-report .hist-payment-fail { background: #bf202e; }
.aiseo-report .hist-payment-pending { background: #f05b28; }
.aiseo-report .hist-viewing {
  color: #606060;
  font-size: 14px;
  font-weight: 500;
}
.aiseo-report .eye {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #606060;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.aiseo-report .eye svg { width: 22px; height: 22px; stroke-width: 1.8; }
.aiseo-report .eye:hover { background: transparent; color: var(--brand); }
.aiseo-report .hist-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.aiseo-report .hist-page {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dce6ed;
  border-radius: 8px;
  background: #fff;
  color: #606060;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.aiseo-report .hist-page.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: default;
}
.aiseo-report .hist-page.disabled {
  opacity: .45;
  pointer-events: none;
}
.aiseo-report .hist-page-ellipsis,
.aiseo-report .hist-page-meta {
  color: #606060;
  font-size: 14px;
  font-weight: 500;
}
.aiseo-report .hist-page-meta { margin-left: 4px; }

/* ── Download buttons ────────────────────────────────────────────────────── */
.aiseo-report .btn {
  border: 0; border-radius: 10px; padding: 13px 18px; font-weight: 850; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; font-family: inherit; font-size: 15px;
}
.aiseo-report .btn:hover { filter: brightness(1.05); color: #fff; }
.aiseo-report .dl {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; justify-content: center;
}
.aiseo-report .dl .btn { padding: 16px 30px; font-size: 16px; border-radius: 12px; }
.aiseo-report .dl-card { text-align: center; }

/* ── Link chia sẻ ────────────────────────────────────────────────────────── */
.aiseo-report .share-card { text-align: center; }
.aiseo-report .share-copy { margin: 0 auto 14px; max-width: 620px; color: var(--muted); }
.aiseo-report .share-row {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center;
}
/* min-width:0 + flex:1 là cặp bắt buộc: thiếu min-width, ô input giữ nguyên chiều rộng
   mặc định của nó và đẩy hai nút tràn ra khỏi thẻ khi URL dài. */
.aiseo-report .share-url {
  flex: 1 1 320px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink);
  background: #f8fafc;
}
.aiseo-report .share-exp { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) {
  .aiseo-report .share-row { flex-direction: column; align-items: stretch; }
  .aiseo-report .share-row .btn { justify-content: center; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 850px) {
  .aiseo-report .scores { grid-template-columns: 1fr 1fr; }
  .aiseo-report .grid,
  .aiseo-report .quick { grid-template-columns: 1fr; }
  .aiseo-report .tabs { flex-direction: column; }
  .aiseo-report .tab { border-right: 0; border-bottom: 1px solid var(--line); }
}