/* PKL — thương hiệu hướng A "Sân Xanh" (PO chọn 2026-10-04). Xem docs/03-design/05-brand-ui.md.
   Mọi màu/bo góc/chữ đi qua biến --pkl-*; Bootstrap được trỏ về các biến này nên các màn tự đổi theo. */
:root {
  --pkl-brand: #0F7B4F;        /* xanh sân: nút chính, tiêu đề, liên kết */
  --pkl-brand-dark: #0B5A38;   /* hover, chữ trên nền nhạt */
  --pkl-brand-soft: #DDF3E5;   /* nền nhãn/nhấn nhạt */
  --pkl-accent: #C8F03C;       /* xanh chanh: điểm nhấn, KHÔNG dùng làm chữ trên nền sáng */
  --pkl-on-accent: #10261B;
  --pkl-bg: #F3F8F4;
  --pkl-card: #FFFFFF;
  --pkl-ink: #10261B;
  --pkl-ink-2: #5C7266;
  --pkl-line: #DCE8E0;
  --pkl-warn-bg: #FFF1CC;
  --pkl-warn-ink: #6B4A00;
  --pkl-radius: .625rem;

  --bs-body-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --bs-body-bg: var(--pkl-bg);
  --bs-body-color: var(--pkl-ink);
  --bs-secondary-color: var(--pkl-ink-2);
  --bs-border-color: var(--pkl-line);
  --bs-border-radius: var(--pkl-radius);
  --bs-primary: var(--pkl-brand);
  --bs-primary-rgb: 15, 123, 79;
  --bs-link-color: var(--pkl-brand);
  --bs-link-color-rgb: 15, 123, 79;
  --bs-link-hover-color: var(--pkl-brand-dark);
  --bs-link-hover-color-rgb: 11, 90, 56;
  --bs-focus-ring-color: rgba(15, 123, 79, .25);
}
body { background: var(--pkl-bg); color: var(--pkl-ink); padding-bottom: 76px; }
body.no-bottomnav { padding-bottom: 0; }
a { color: var(--pkl-brand); }
a:hover { color: var(--pkl-brand-dark); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
.page-narrow { max-width: 760px; }
.text-secondary { color: var(--pkl-ink-2) !important; }

/* Thanh trên: xanh sân, chữ trắng */
.pkl-header { background: var(--pkl-brand); border-bottom: 0; }
.pkl-header .navbar-brand { color: #fff; display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .01em; }
.pkl-header .navbar-brand:hover { color: #fff; }
.pkl-header .navbar-brand svg { width: 26px; height: 26px; flex: none; }
.pkl-header .nav-links a { color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 500; }
.pkl-header .nav-links a:hover { color: #fff; }
.pkl-header .btn-outline-primary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .6);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--pkl-brand); --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff; --bs-btn-active-color: var(--pkl-brand); }

/* Duyệt đăng ký trên điện thoại: thẻ xếp dọc */
.reg-grid { display: grid; grid-template-columns: auto 1fr; gap: .25rem .5rem; }
.reg-grid > * { grid-column: 2; }
.reg-grid > .reg-check { grid-column: 1; grid-row: 1 / span 5; }
.reg-date { display: none; }
.reg-head { display: none; }

/* Chuông thông báo */
.bell { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: #fff; border-radius: 50%; }
.bell:hover { color: #fff; background: rgba(255, 255, 255, .15); }
.bell svg { width: 22px; height: 22px; }
.bell #bell-badge:not(:empty) { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--pkl-accent); color: var(--pkl-on-accent); font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.notice-unread { box-shadow: inset 4px 0 0 var(--pkl-accent); background: #fff; }

/* Nút */
.btn { font-weight: 500; border-radius: var(--pkl-radius); }
.btn-primary {
  --bs-btn-bg: var(--pkl-brand); --bs-btn-border-color: var(--pkl-brand); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--pkl-brand-dark); --bs-btn-hover-border-color: var(--pkl-brand-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #09492D; --bs-btn-active-border-color: #09492D; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #9DB8AA; --bs-btn-disabled-border-color: #9DB8AA;
  --bs-btn-focus-shadow-rgb: 15, 123, 79;
}
.btn-outline-primary {
  --bs-btn-color: var(--pkl-brand); --bs-btn-border-color: var(--pkl-brand);
  --bs-btn-hover-bg: var(--pkl-brand); --bs-btn-hover-border-color: var(--pkl-brand); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--pkl-brand-dark); --bs-btn-active-border-color: var(--pkl-brand-dark); --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 15, 123, 79;
}
.btn-outline-secondary { --bs-btn-color: var(--pkl-ink-2); --bs-btn-border-color: var(--pkl-line);
  --bs-btn-hover-bg: var(--pkl-brand-soft); --bs-btn-hover-border-color: var(--pkl-line); --bs-btn-hover-color: var(--pkl-brand-dark);
  --bs-btn-active-bg: var(--pkl-brand-soft); --bs-btn-active-color: var(--pkl-brand-dark); }

/* Điều hướng, tab */
.nav-pills { --bs-nav-pills-link-active-bg: var(--pkl-brand); --bs-nav-pills-border-radius: 999px; }
.nav-pills .nav-link { color: var(--pkl-ink-2); font-weight: 500; }
.nav-pills .nav-link.active { color: #fff; }
.nav-link { color: var(--pkl-ink-2); }
.nav-link:hover { color: var(--pkl-brand-dark); }
.nav-underline { --bs-nav-underline-gap: .15rem; --bs-nav-underline-border-width: .18rem; --bs-nav-underline-link-active-color: var(--pkl-brand-dark); }
.nav-underline .nav-link { font-size: .9rem; font-weight: 500; padding: .5rem .55rem; color: var(--pkl-ink-2); }
.nav-underline .nav-link.active { font-weight: 600; border-bottom-color: var(--pkl-brand); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--pkl-brand-dark); --bs-nav-tabs-border-color: var(--pkl-line);
  --bs-nav-tabs-link-active-border-color: var(--pkl-line) var(--pkl-line) #fff; }
.nav-tabs .nav-link.active { font-weight: 600; }
.form-check-input:checked { background-color: var(--pkl-brand); border-color: var(--pkl-brand); }
.form-control:focus, .form-select:focus { border-color: var(--pkl-brand); box-shadow: 0 0 0 .2rem rgba(15, 123, 79, .2); }

/* Ô nhập nền trắng để nổi trên nền xanh nhạt của trang */
.form-control, .form-select { background-color: #fff; border-color: #C9DACF; }

/* Nút đủ lớn để chạm (04-ux-flows §2.1) */
.btn, .form-control, .form-select { min-height: 44px; }
.btn-sm, .form-control-sm, .form-select-sm { min-height: 36px; }

/* Nhãn trạng thái. Tên lớp giữ từ wireframe; nghĩa: wf = trung tính, dark-wf = đang/nổi bật, warn-wf = cần chú ý */
.badge-wf { background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); font-weight: 500; }
.badge-dark-wf { background: var(--pkl-brand); color: #fff; font-weight: 500; }
.badge-warn-wf { background: var(--pkl-warn-bg); color: var(--pkl-warn-ink); font-weight: 500; }
.badge { border-radius: 999px; padding: .35em .7em; }
.text-dim { opacity: .45; }

/* Thẻ, danh sách, cảnh báo */
.card, .list-group-item, .alert-light, .table-responsive { border-color: var(--pkl-line); }
.card { background: var(--pkl-card); border-radius: 12px; }
.list-group { --bs-list-group-border-color: var(--pkl-line); --bs-list-group-border-radius: 12px; }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--pkl-brand-soft); color: var(--pkl-ink); }
.alert-light { background: #fff; color: var(--pkl-ink); border-left: 4px solid var(--pkl-accent); }
.alert-light[role="alert"] { border-left-color: #E0A100; }
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pkl-ink-2); font-weight: 600; margin: 1.25rem 0 .5rem; }
.bg-white { background-color: var(--pkl-card) !important; }
.border { border-color: var(--pkl-line) !important; }

/* Các bước trạng thái giải: chấm + nhãn nhỏ, nối bằng đường */
.pkl-steps { list-style: none; display: flex; padding: 0; margin: 0; }
.pkl-steps li { flex: 1; text-align: center; position: relative; font-size: .7rem; line-height: 1.2; color: var(--pkl-ink-2); }
.pkl-steps li::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--pkl-line); }
.pkl-steps li:first-child::before { display: none; }
.pkl-steps .dot { display: block; width: 14px; height: 14px; margin: 0 auto 4px; border-radius: 50%; background: #fff; border: 2px solid var(--pkl-line); position: relative; z-index: 1; }
.pkl-steps li.done::before, .pkl-steps li.current::before { background: var(--pkl-brand); }
.pkl-steps li.done .dot { background: var(--pkl-brand); border-color: var(--pkl-brand); }
.pkl-steps li.current .dot { background: var(--pkl-accent); border-color: var(--pkl-brand); box-shadow: 0 0 0 3px rgba(15, 123, 79, .18); }
.pkl-steps li.current { color: var(--pkl-brand-dark); font-weight: 600; }
.pkl-steps li.done { color: var(--pkl-ink); }

/* Hồ sơ: ảnh chữ cái và điểm lớn */
.bg-secondary-subtle { background-color: var(--pkl-brand-soft) !important; color: var(--pkl-brand-dark); }
.card .fs-2 { color: var(--pkl-brand); letter-spacing: -.02em; }
.card[data-testid^="rating-"] { border-top: 3px solid var(--pkl-accent); }

/* Nhánh loại trực tiếp */
.bracket-match { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 12px; overflow: hidden; }
.bracket-match > div { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .75rem; }
.bracket-match > div + div { border-top: 1px solid var(--pkl-line); }
.bracket-match > div:has(.win) { background: var(--pkl-brand-soft); box-shadow: inset 4px 0 0 var(--pkl-accent); }
.bracket-match .win { font-weight: 600; color: var(--pkl-brand-dark); }

/* Thanh dưới cùng trên điện thoại */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: #fff; border-top: 1px solid var(--pkl-line); display: flex;
}
.bottomnav a { flex: 1; text-align: center; padding: 8px 0 10px; color: var(--pkl-ink-2); text-decoration: none; font-size: .75rem; font-weight: 500; position: relative; }
.bottomnav a .ico { display: block; margin: 0 auto 2px; width: 24px; height: 24px; }
.bottomnav a.active { color: var(--pkl-brand); font-weight: 600; }
.bottomnav a.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--pkl-accent); }
@media (min-width: 768px) {
  .bottomnav { display: none; }
  body { padding-bottom: 0; }
}

.nav-scroll { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll .nav-item { flex: none; }

.sticky-action {
  position: sticky; bottom: 0; z-index: 1020; background: #fff;
  border-top: 1px solid var(--pkl-line); padding: .75rem; margin: 0 -12px;
}

/* htmx: làm mờ vùng đang tải */
.htmx-request { opacity: .6; transition: opacity .2s; }

/* ===== Giao diện máy tính cho phần quản lý (/quan-ly, /admin) — từ 992px ===== */
@media (min-width: 992px) {
  main.manage-wide { max-width: 1280px; }

  /* Có thanh điều hướng: cột bên trái + nội dung rộng */
  main.manage-wide:has(> .manage-nav) { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  main.manage-wide:has(> .manage-nav) > * { grid-column: 2; min-width: 0; }
  main.manage-wide:has(> .manage-nav) > .manage-nav {
    grid-column: 1; grid-row: 1 / span 200; position: sticky; top: 1rem;
    margin: 0 !important; padding: 1rem !important; background: var(--pkl-card); border: 1px solid var(--pkl-line) !important; border-radius: 12px;
  }
  /* Không có thanh bên (nhập kết quả, tạo giải): giữ cột hẹp ở giữa */
  main.manage-wide:not(:has(> .manage-nav)) > * { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* Tab biến thành menu dọc */
  .manage-nav .nav { flex-direction: column; overflow: visible; gap: .15rem; margin-top: .75rem !important; }
  .manage-nav .nav-item { width: 100%; }
  .manage-nav .nav-link { display: block; width: 100%; padding: .55rem .75rem; border-radius: 8px; border-bottom: 0 !important; font-size: .95rem; }
  .manage-nav .nav-link:hover { background: var(--pkl-brand-soft); }
  .manage-nav .nav-link.active { background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); box-shadow: inset 4px 0 0 var(--pkl-brand); }
  .manage-nav .nav-pills .nav-link.active { background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); }

  /* Danh sách thành lưới 2 cột */
  form:has(> [data-testid="entry"]) { display: block; }
  [data-testid="match-list"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  [data-testid="match-list"] .list-group-item { border: 1px solid var(--pkl-line); border-radius: 12px !important; }

  /* Điều phối: sân bên trái, hàng đợi bên phải */
  .board-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
  .board-courts .row > .col-6 { width: 50%; }

  /* Điểm trình (Admin): tên | Đôi | Đơn cạnh nhau */
  [data-testid="player"] { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 1rem; align-items: start; }
  [data-testid="player"] form { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }

  }

/* Biểu đồ điểm trình (SVG phía máy chủ) */
.rating-chart { width: 100%; height: auto; display: block; }
.rating-chart .rc-axis { stroke: var(--pkl-line); stroke-width: 1; }
.rating-chart .rc-line { fill: none; stroke: var(--pkl-brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rating-chart .rc-dot { fill: #fff; stroke: var(--pkl-brand); stroke-width: 1.5; }
.rating-chart .rc-last { fill: var(--pkl-accent); stroke: var(--pkl-brand); stroke-width: 2; }
.rating-chart .rc-text { font-size: 11px; font-weight: 600; fill: var(--pkl-brand-dark); }
.rating-chart .rc-muted { fill: var(--pkl-ink-2); font-weight: 400; }

@media (min-width: 1200px) {
  /* Duyệt đăng ký: bảng nhiều cột (thẻ trên điện thoại và màn hẹp → hàng bảng từ 1200px) */
  .reg-head, .reg-grid { display: grid; grid-template-columns: 28px minmax(170px, 1.2fr) minmax(230px, 1.5fr) minmax(170px, 1fr) 130px minmax(200px, auto); column-gap: 1rem; align-items: start; }
  .reg-head { padding: .5rem .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--pkl-ink-2);
    background: #fff; border: 1px solid var(--pkl-line); border-radius: 12px 12px 0 0; }
  .reg-head a { color: inherit; text-decoration: none; }
  .reg-head a:hover { color: var(--pkl-brand-dark); }
  .reg-grid > *, .reg-grid > .reg-check { grid-column: auto; grid-row: auto; }
  .reg-row { margin: 0 !important; border-radius: 0; border-top-width: 0; }
  .reg-head + .reg-row { border-top-width: 1px; }
  .reg-row:last-of-type { border-radius: 0 0 12px 12px; }
  .reg-row:hover { background: #FBFDFB; }
  .reg-date-m { display: none; }
  .reg-date { display: block; }
  .reg-ratings > div:first-child { margin-top: 0 !important; }
  .reg-status > * { margin-right: .25rem; }
}

/* Danh sách người dùng (Admin): thẻ trên điện thoại, bảng từ 1200px */
.user-head { display: none; }
.user-grid { display: block; }
.ug-phone, .ug-prov, .ug-roles, .ug-date { display: none; }
@media (min-width: 1200px) {
  .user-head, .user-grid { display: grid; grid-template-columns: minmax(230px, 1fr) 140px 150px 100px 100px; column-gap: 1rem; align-items: start; }
  .user-head { padding: .5rem .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--pkl-ink-2);
    background: #fff; border: 1px solid var(--pkl-line); border-radius: 12px 12px 0 0; }
  .user-head a { color: inherit; text-decoration: none; }
  .user-head a:hover { color: var(--pkl-brand-dark); }
  .user-row { margin: 0 !important; border-radius: 0; border-top-width: 0; }
  .user-row:hover { background: #FBFDFB; }
  .ug-roles, .ug-date { display: block; }
  .ug-badges-m { display: none; }
  .user-head > :nth-child(2), .user-head > :nth-child(3) { display: none; } /* SĐT, tỉnh nằm dưới email */
  .ug-user .text-break { grid-column: auto; }
  .ug-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
  .ug-actions > details, .ug-actions > div { margin: 0 !important; }
  .ug-actions > div { display: contents; }
}

/* Số liệu tổng quan (Admin) */
.metric { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 12px; padding: .75rem 1rem; color: var(--pkl-ink); height: 100%; }
a.metric:hover { background: var(--pkl-brand-soft); color: var(--pkl-ink); }
.metric-label { font-size: .8rem; color: var(--pkl-ink-2); }
.metric-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--pkl-brand-dark); }
.metric-sub { font-size: .75rem; color: var(--pkl-ink-2); }
.metric-alert { border-color: #E0A100; box-shadow: inset 4px 0 0 #E0A100; }

/* Nhật ký: thẻ trên điện thoại, bảng trên máy tính */
.audit-head { display: none; }
.audit-line .al-time { float: right; }
.audit-line .al-actor, .audit-line .al-action { margin-right: .35rem; }
.audit-line .al-detail { clear: both; }
@media (min-width: 1200px) {
  .audit-head, .audit-line { display: grid; grid-template-columns: 150px 170px 190px minmax(0, 1fr) 190px; column-gap: 1rem; align-items: start; }
  .audit-head { padding: .5rem 1rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--pkl-ink-2);
    background: #fff; border: 1px solid var(--pkl-line); border-radius: 12px 12px 0 0; }
  .audit-list { --bs-list-group-border-radius: 0; }
  .audit-line { padding: .7rem 1rem; }
  .audit-line .al-time { float: none; }
  .audit-line .al-detail { clear: none; }
}

/* Bảng quản trị trên laptop: thoáng, đầu cột rõ, số căn phải */
.admin-table { font-size: .92rem; --bs-table-bg: transparent; }
.admin-table thead th { background: #F3F7F3; color: var(--pkl-ink-2); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .7rem .75rem; border-bottom: 1px solid var(--pkl-line); white-space: nowrap; vertical-align: bottom; }
.admin-table thead th a { color: inherit; text-decoration: none; }
.admin-table thead th a:hover { color: var(--pkl-brand-dark); }
.admin-table tbody td { padding: .8rem .75rem; border-bottom: 1px solid var(--pkl-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: #FBFDFB; }
.admin-table .badge { white-space: nowrap; font-size: .75rem; padding: .35em .65em; }
.admin-table .btn-sm { font-size: .82rem; padding: .3rem .7rem; white-space: nowrap; }
.admin-table .at-name { font-weight: 600; text-decoration: none; display: block; min-width: 200px; line-height: 1.3; }
.at-progress { height: 6px; border-radius: 3px; background: var(--pkl-line); overflow: hidden; }
.at-progress > span { display: block; height: 100%; background: var(--pkl-brand); }
.at-progress-label { font-size: .8rem; color: var(--pkl-ink-2); margin-top: .2rem; }