/* ============================================================================
   mod_chess_archive — kho lưu trữ giải đấu theo năm
   v1.2 · 20/09/2026

   MỌI quy tắc đều nằm trong .ca-wrap nên không đụng gì tới template.
   Dùng !important ở vài chỗ vì template site đặt sẵn quy tắc cho table/th/td.
   ============================================================================ */

.ca-wrap {
	--ca-h: 30px;
	--ca-r: 7px;
	--ca-r-card: 12px;
	--ca-fs: 13.5px;
	--ca-fs-th: 11px;
	--ca-gap: 8px;

	--ca-ground: #f6f7f9;
	--ca-surface: #fff;
	--ca-surface-2: #eef2f7;
	--ca-ink: #18222e;
	--ca-ink-2: #4e5c6b;
	--ca-ink-3: #8c98a5;
	--ca-line: #dfe4ea;
	--ca-accent: #2f5070;
	--ca-accent-2: #2c6fbb;
	--ca-soft: #e9eff6;

	position: relative;
	color: var(--ca-ink);
	font-size: var(--ca-fs);
	line-height: 1.45;
}

.ca-wrap *,
.ca-wrap *::before,
.ca-wrap *::after { box-sizing: border-box; }

.ca-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------- ĐẦU KHỐI -- */

.ca-head {
	display: flex;
	align-items: center;
	gap: var(--ca-gap);
	flex-wrap: wrap;
	padding: 6px;
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-r-card) var(--ca-r-card) 0 0;
}

.ca-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.ca-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--ca-h);
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: var(--ca-r);
	background: transparent;
	color: var(--ca-ink-2);
	font-size: var(--ca-fs);
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ca-tab:hover { background: rgba(47, 80, 112, .09); color: var(--ca-ink); }

.ca-tab.is-on {
	background: var(--ca-accent);
	border-color: var(--ca-accent);
	color: #fff;
	box-shadow: 0 1px 3px rgba(24, 34, 46, .22);
}

.ca-tab.is-on .ca-n { background: rgba(255, 255, 255, .22); color: #fff; }

.ca-n {
	display: inline-block;
	min-width: 20px;
	padding: 0 5px;
	border-radius: 9px;
	background: rgba(24, 34, 46, .09);
	color: var(--ca-ink-2);
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.ca-search { position: relative; margin-left: auto; }

.ca-search .ca-q {
	width: 330px;
	max-width: 56vw;
	height: var(--ca-h);
	padding: 0 26px 0 10px;
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-r);
	background: var(--ca-surface);
	font-size: var(--ca-fs);
	color: var(--ca-ink);
}

.ca-search .ca-q:focus { outline: 2px solid var(--ca-soft); border-color: var(--ca-accent-2); }

.ca-qclear {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ca-ink-3);
	line-height: 1;
	cursor: pointer;
}

.ca-qclear:hover { background: var(--ca-surface-2); color: var(--ca-ink); }

/* -------------------------------------------------------------- LƯỚI NĂM -- */

.ca-branch { display: none; }
.ca-branch.is-on { display: block; }

.ca-years {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 6px;
	padding: 10px;
	background: var(--ca-ground);
	border: 1px solid var(--ca-line);
	border-top: 0;
}

.ca-year {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 34px;
	padding: 0 6px;
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-r);
	background: var(--ca-surface);
	color: var(--ca-ink-2) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color .15s, background .15s, color .15s;
}

.ca-year:hover {
	border-color: var(--ca-accent-2);
	background: var(--ca-soft);
	color: var(--ca-accent) !important;
}

.ca-year.is-on {
	background: var(--ca-accent-2);
	border-color: var(--ca-accent-2);
	color: #fff !important;
	box-shadow: 0 1px 4px rgba(44, 111, 187, .35);
}

.ca-year.is-on .ca-n { background: rgba(255, 255, 255, .25); color: #fff; }
.ca-year .ca-y { font-size: 14px; letter-spacing: .01em; }

/* ------------------------------------------------------------------ BẢNG -- */

.ca-panel {
	position: relative;
	min-height: 60px;
	padding: 0;
	background: var(--ca-surface);
	border: 1px solid var(--ca-line);
	border-top: 0;
	border-radius: 0 0 var(--ca-r-card) var(--ca-r-card);
}

.ca-panel.is-busy { opacity: .45; pointer-events: none; }

.ca-panel-head {
	display: flex;
	align-items: center;
	gap: var(--ca-gap);
	padding: 8px 12px;
	border-bottom: 1px solid var(--ca-line);
	background: var(--ca-surface);
}

.ca-panel-title { font-size: 14.5px; font-weight: 700; color: var(--ca-accent); }

.ca-group {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ca-accent);
}

.ca-group i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ca-ink-3); }

.ca-hint, .ca-empty {
	margin: 0;
	padding: 18px 12px;
	color: var(--ca-ink-3);
	text-align: center;
}

.ca-tablewrap { overflow-x: auto; }

.ca-table {
	width: 100%;
	margin: 0 !important;
	border-collapse: collapse;
	background: transparent;
}

.ca-table th,
.ca-table td {
	padding: 6px 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ca-line) !important;
	vertical-align: middle !important;
	background: transparent !important;
}

.ca-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--ca-surface-2) !important;
	color: var(--ca-ink-2) !important;
	font-size: var(--ca-fs-th);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.ca-table tbody tr:hover td { background: #f4f8fd !important; }
.ca-table tbody tr:last-child td { border-bottom: 0 !important; }

.ca-c-idx { width: 34px; color: var(--ca-ink-3); text-align: right; font-size: 12px; }
.ca-c-name { min-width: 240px; }
.ca-c-name a { color: var(--ca-ink) !important; font-weight: 600; text-decoration: none !important; }
.ca-c-name a:hover { color: var(--ca-accent-2) !important; text-decoration: underline !important; }

.ca-c-date { width: 128px; white-space: nowrap; }
.ca-c-venue { width: 170px; }
.ca-c-level { width: 116px; }
.ca-c-act { width: 78px; text-align: center; }
.ca-c-edit { width: 40px; text-align: center; }

.ca-soft { color: var(--ca-ink-3); font-style: italic; }
.ca-none { color: #c3cad2; }

.ca-dot { margin-left: 5px; font-size: 9px; vertical-align: 2px; cursor: help; }
.ca-dot-auto { color: #d99b16; }
.ca-dot-manual { color: #1f9d57; }

.ca-chip {
	display: inline-block;
	padding: 1px 7px;
	border: 1px solid;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- NÚT -- */

.ca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 24px;
	padding: 0 9px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}

.ca-btn-view { background: #e7f0fa; border-color: #b9d3ef; color: #1b4f86 !important; }
.ca-btn-view:hover { background: #2c6fbb; border-color: #2c6fbb; color: #fff !important; }

.ca-btn-zip { background: #e8f6ee; border-color: #b4ddc6; color: #10633c !important; }
.ca-btn-zip:hover { background: #1f9d57; border-color: #1f9d57; color: #fff !important; }

.ca-btn-edit {
	width: 24px;
	padding: 0;
	background: transparent;
	border-color: transparent;
	color: var(--ca-ink-3) !important;
	font-size: 13px;
}

.ca-btn-edit:hover { background: #fff3e0; border-color: #ffb74d; color: #b87400 !important; }

/* ----------------------------------------------------------------- POPUP -- */

.ca-modal-bd {
	position: fixed;
	inset: 0;
	z-index: 1040;
	background: rgba(12, 20, 30, .48);
}

.ca-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1050;
	width: min(760px, 96vw);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	transform: translate(-50%, -50%);
	transition: min-height .12s ease;
	background: var(--ca-surface);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(12, 20, 30, .35);
	overflow: hidden;
}

.ca-m-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: var(--ca-accent);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
}

.ca-m-head .ca-m-x {
	margin-left: auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	line-height: 1;
	cursor: pointer;
}

.ca-m-head .ca-m-x:hover { background: rgba(255, 255, 255, .3); }

.ca-m-body { flex: 1 1 auto; padding: 12px 14px; overflow: auto; }

.ca-m-sub {
	margin: 0 0 10px;
	padding: 6px 9px;
	border-left: 3px solid var(--ca-accent-2);
	background: var(--ca-soft);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ca-ink-2);
}

.ca-m-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ca-m-row > div { min-width: 0; }

.ca-m-row label {
	display: block;
	margin: 0 0 3px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ca-ink-2);
}

.ca-modal .ca-m-row .form-control,
.ca-modal .ca-m-row .form-select {
	width: 100% !important;
	max-width: none !important;
	height: var(--ca-h);
	padding: .1rem .45rem;
	border: 1px solid var(--ca-line);
	border-radius: 5px;
	font-size: .92rem;
	color: var(--ca-ink);
	background: #fff;
}

.ca-m-check label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.ca-m-check input { width: 15px; height: 15px; }

.ca-m-err {
	margin: 0;
	padding: 7px 10px;
	border-radius: 6px;
	background: #fdecea;
	color: #a3241d;
	font-size: 12.5px;
}

.ca-m-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 9px 14px;
	border-top: 1px solid var(--ca-line);
	background: var(--ca-surface-2);
}

.ca-m-foot .btn {
	height: var(--ca-h);
	padding: 0 .9rem;
	display: inline-flex;
	align-items: center;
	border-radius: 5px;
	font-size: var(--ca-fs);
	font-weight: 600;
}

/* ------------------------------------------------------ SẮP XẾP THEO CỘT -- */

/* Không dùng mũi tên: cột đang sắp được gạch chân và đậm màu. */
.ca-table thead th.ca-sortable { cursor: pointer; user-select: none; }
.ca-table thead th.ca-sortable .ca-th { color: inherit !important; text-decoration: none !important; }
.ca-table thead th.ca-sortable:hover { color: var(--ca-accent-2) !important; }

.ca-table thead th.is-sorted {
	color: var(--ca-accent) !important;
	box-shadow: inset 0 -2px 0 var(--ca-accent-2);
}

/* ----------------------------------------------------------- PHÂN TRANG -- */

.ca-pager {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	padding: 8px 12px;
	border-top: 1px solid var(--ca-line);
	background: var(--ca-surface);
}

.ca-pg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 26px;
	padding: 0 7px;
	border: 1px solid var(--ca-line);
	border-radius: 5px;
	background: var(--ca-surface);
	color: var(--ca-ink-2) !important;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
}

.ca-pg:hover { border-color: var(--ca-accent-2); background: var(--ca-soft); color: var(--ca-accent) !important; }

.ca-pg.is-on {
	background: var(--ca-accent-2);
	border-color: var(--ca-accent-2);
	color: #fff !important;
	cursor: default;
}

.ca-pg.is-off { opacity: .4; cursor: default; }
.ca-pg.is-off:hover { border-color: var(--ca-line); background: var(--ca-surface); color: var(--ca-ink-2) !important; }
.ca-pg-gap { padding: 0 2px; color: var(--ca-ink-3); }
.ca-pg-info { margin-left: auto; font-size: 12px; color: var(--ca-ink-3); }

.ca-panel-n {
	display: inline-block;
	min-width: 22px;
	padding: 0 6px;
	border-radius: 9px;
	background: var(--ca-soft);
	color: var(--ca-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ca-panel-q { font-size: 12.5px; color: var(--ca-ink-3); }

/* ---------------------------------------------------------- DÒNG ĐÃ XOÁ -- */

.ca-year-all { font-weight: 700; }

.ca-row-off td { opacity: .5; }
.ca-row-off .ca-c-name a { text-decoration: line-through !important; }

/* Nút trạng thái: icon cho biết dòng ĐANG hiện hay đang ẩn, bấm là đổi — không xoá gì. */
.ca-btn-state { width: 26px; padding: 0; background: transparent; border-color: transparent; }
.ca-btn-state.is-on { color: #1f9d57 !important; }
.ca-btn-state.is-on:hover { background: #e8f6ee; border-color: #b4ddc6; }
.ca-btn-state.is-off { color: #c0392b !important; }
.ca-btn-state.is-off:hover { background: #fdecea; border-color: #f3b4ae; }

.ca-btn-zip,
.ca-btn-view { width: 30px; padding: 0; }
.ca-btn-zip svg,
.ca-btn-view svg { display: block; margin: auto; }

/* ------------------------------------------------------- Ô GỢI Ý TÊN GIẢI -- */

.ca-modal .ca-m-row .form-control.ca-ro { background: var(--ca-surface-2); color: var(--ca-ink-2); }

/* .ca-modal có transform nên con position:fixed lấy nó làm gốc toạ độ —
   dropdown phải treo thẳng vào <body> (xem chess-archive.js). */
.ca-ac-dd {
	position: fixed;
	z-index: 1060;
	max-height: 260px;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--ca-line);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(12, 20, 30, .22);
	font-size: 12.5px;
}

.ca-ac-i { padding: 5px 9px; cursor: pointer; border-bottom: 1px solid #f1f4f7; }
.ca-ac-i:last-child { border-bottom: 0; }
.ca-ac-i:hover { background: #eef5fd; }
.ca-ac-i b { color: #2c6fbb; font-weight: 700; }
.ca-ac-i i { display: block; font-style: normal; font-size: 11px; color: #8c98a5; }

/* Lịch flatpickr đặt static nên nằm gọn trong popup. */
.ca-modal .flatpickr-wrapper { display: block; width: 100%; }
.ca-modal .flatpickr-calendar { z-index: 1070; }

/* Lịch cao ~300px: lúc mở thì nở popup ra cho đủ chỗ, khỏi phải lăn trong khung. */
.ca-modal.ca-cal-open:not(.ca-fb) { min-height: min(600px, 92vh); }

/* Ô năm của flatpickr vốn chỉ là con số trơn, mũi tên mờ tịt và chỉ hiện khi rê
   chuột — không ai thấy là bấm được. Vẽ hẳn thành hộp có viền + hai nút ▲▼ luôn
   hiện, để admin nhìn ra chỗ chuyển năm (giải vắt qua năm). */
.ca-modal .flatpickr-current-month { padding-top: 5px; }

.ca-modal .flatpickr-current-month .numInputWrapper {
	width: 88px;
	border: 1px solid #9dc0e6;
	border-radius: 5px;
	background: #f2f7fd;
	overflow: hidden;
}

.ca-modal .flatpickr-current-month .numInputWrapper:hover { border-color: var(--ca-accent-2); }

.ca-modal .flatpickr-current-month input.cur-year {
	padding: 1px 24px 1px 6px;
	background: transparent;
	font-weight: 700;
	color: var(--ca-accent-2);
	cursor: pointer;
}

.ca-modal .flatpickr-current-month .numInputWrapper span {
	opacity: 1;
	width: 20px;
	border: 0;
	border-left: 1px solid var(--ca-line);
	background: var(--ca-soft);
}

.ca-modal .flatpickr-current-month .numInputWrapper span:hover { background: var(--ca-accent-2); }
.ca-modal .flatpickr-current-month .numInputWrapper span.arrowUp { border-bottom: 1px solid var(--ca-line); }

/* Tam giác mặc định 4px, gần như vô hình — phóng lên và tô đậm. */
.ca-modal .flatpickr-current-month .numInputWrapper span.arrowUp::after {
	border-width: 0 5px 6px 5px;
	border-bottom-color: var(--ca-ink-2);
}

.ca-modal .flatpickr-current-month .numInputWrapper span.arrowDown::after {
	border-width: 6px 5px 0 5px;
	border-top-color: var(--ca-ink-2);
}

.ca-modal .flatpickr-current-month .numInputWrapper span:hover::after {
	border-bottom-color: #fff;
	border-top-color: #fff;
}

.ca-m-note {
	margin: -4px 0 10px;
	padding: 6px 9px;
	border-radius: 6px;
	background: #fff8e1;
	border-left: 3px solid #f0ad4e;
	color: #8a6100;
	font-size: 12px;
}

/* -------------------------------------------------------- DUYỆT FILE ZIP -- */

.ca-zip-wrap { display: flex; gap: 6px; }
.ca-zip-wrap .form-control { flex: 1 1 auto; }

.ca-zip-wrap .ca-zip-browse {
	flex: 0 0 auto;
	height: var(--ca-h);
	padding: 0 .7rem;
	border-radius: 5px;
	font-size: 12.5px;
	white-space: nowrap;
}

.ca-fb { width: min(820px, 96vw); }

/* Thanh đường dẫn: mỗi cấp là một nút bấm quay lại đúng cấp đó. */
.ca-fb-path {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	padding: 5px 12px;
	background: var(--ca-surface-2);
	border-bottom: 1px solid var(--ca-line);
	font-size: 12.5px;
}

.ca-fb-cr {
	height: 22px;
	padding: 0 7px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: transparent;
	color: var(--ca-accent-2);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.ca-fb-cr:hover { background: #fff; border-color: var(--ca-line); }
.ca-fb-sep { color: var(--ca-ink-3); }

.ca-fb-body { display: flex; min-height: 0; }

.ca-fb-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 0 42%;
	border-right: 1px solid var(--ca-line);
}

.ca-fb-right { flex: 1 1 58%; border-right: 0; }

.ca-fb-cap {
	padding: 4px 12px;
	background: #f7f9fc;
	border-bottom: 1px solid var(--ca-line);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ca-ink-3);
}

.ca-fb-list { height: 48vh; overflow: auto; }

.ca-fb-r {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-bottom: 1px solid #f1f4f7;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ca-fb-r:hover { background: #eef5fd; }
.ca-fb-r i { margin-left: auto; padding-left: 8px; font-style: normal; font-size: 11px; color: var(--ca-ink-3); }
.ca-fb-f { color: var(--ca-accent); font-weight: 600; }
.ca-fb-f.is-pick { background: var(--ca-accent-2); color: #fff; }
.ca-fb-f.is-pick i { color: rgba(255, 255, 255, .8); }
.ca-fb-up { color: var(--ca-ink-3); }
.ca-fb-wait { padding: 18px; text-align: center; color: var(--ca-ink-3); }

.ca-fb-sel {
	margin-right: auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	color: var(--ca-ink-2);
}

.ca-fb-ok[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 560px) {
	.ca-fb-body { flex-direction: column; }
	.ca-fb-pane { flex: 1 1 auto; border-right: 0; border-bottom: 1px solid var(--ca-line); }
	.ca-fb-list { height: 26vh; }
}