/*
 * Tinh chỉnh giao diện cho màn hình hẹp (máy tính bảng, điện thoại).
 *
 * CÁCH HOẠT ĐỘNG: file này dùng CHUNG cho mọi trang và được nạp SAU file CSS
 * riêng của từng trang (xem tam_enqueue_responsive() trong functions.php, hook
 * ưu tiên 99), nên quy tắc ở đây luôn thắng mà không cần tăng độ ưu tiên
 * selector. Nhờ vậy chỉ cần sửa MỘT chỗ thay vì lặp lại ở cả 9 file CSS.
 *
 * QUY TẮC: chỉ dùng biến đã có trong tokens.css. Không hardcode màu/kích thước
 * mới (mục 8 CLAUDE.md). Phong cách phẳng, không gradient/shadow trang trí.
 *
 * Hai ngưỡng:
 *   - 900px: thanh bên đã chuyển sang nằm ngang (do CSS từng trang) — chỗ này
 *            sửa lại cách nằm ngang đó cho dùng được.
 *   - 600px: điện thoại thực sự — thu gọn khoảng cách, xếp lại các lưới chật.
 */

/* ============================================================
   1. THANH ĐIỀU HƯỚNG
   Vấn đề: 10 mục (trang hiệu trưởng) hoặc 7 mục (trang giáo viên) khi xuống
   dòng sẽ chiếm 4-5 hàng, đẩy nội dung chính xuống gần hết màn hình.
   Cách sửa: gom thành MỘT hàng cuộn ngang, vuốt để xem tiếp; dính trên cùng
   để luôn chuyển mục được mà không phải cuộn ngược lên.
   ============================================================ */

@media (max-width: 900px) {

	.tam-db-sidebar {
		position: sticky;
		top: 0;
		z-index: 20;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
	}

	/* Hàng 1: tên trường bên trái, nút đăng xuất bên phải.
	   flex-basis phải là 0 (không phải auto): nếu để auto, tên trường dài sẽ
	   lấy nguyên chiều rộng theo nội dung và đẩy nút Đăng xuất xuống dòng
	   riêng trên máy hẹp (320px). Với basis 0, tên trường chỉ chiếm phần còn
	   thừa sau khi đã chừa chỗ cho nút, và tự cắt bớt bằng dấu ba chấm. */
	.tam-db-sidebar-logo {
		flex: 1 1 0;
		min-width: 0;
		margin-bottom: 0;
		font-size: var(--font-size-sm);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tam-db-nav-logout {
		flex: 0 0 auto;
		order: 2;
		display: flex;
		align-items: center;
		min-height: 44px;
		margin-top: 0;
		padding: var(--space-2) var(--space-3);
		border-top: none;
	}

	/* Hàng 2: dải mục điều hướng, cuộn ngang */
	.tam-db-nav {
		flex: 0 0 100%;
		order: 3;
		min-width: 0;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--space-2);
		padding-bottom: var(--space-1);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tam-db-nav::-webkit-scrollbar {
		display: none;
	}

	.tam-db-nav-link {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		min-height: 44px;
		white-space: nowrap;
		padding: var(--space-2) var(--space-4);
	}
}

/* ============================================================
   2. VÙNG BẤM — tối thiểu 44px theo chuẩn cảm ứng
   Vấn đề: nút icon 28px và nút nhỏ cao ~24px, rất khó bấm trúng bằng ngón tay.
   ============================================================ */

@media (max-width: 900px) {

	/* box-sizing: border-box để min-height là chiều cao THỰC (gồm cả padding
	   và viền). Không có dòng này, min-height chỉ tính phần nội dung nên nút
	   bị cao hơn dự định — ví dụ 44px + 8px padding trên dưới = 60px, ăn mất
	   chỗ hiển thị trên màn hình điện thoại. */
	.tam-db-nav-link,
	.tam-db-nav-logout,
	.tam-btn,
	.tam-btn-small,
	.tam-icon-btn,
	.tam-modal-close {
		box-sizing: border-box;
	}

	.tam-btn {
		min-height: 44px;
	}

	.tam-btn-small {
		min-height: 44px;
		padding: var(--space-2) var(--space-4);
		font-size: var(--font-size-sm);
	}

	.tam-icon-btn {
		width: 44px;
		height: 44px;
	}

	.tam-modal-close {
		min-width: 44px;
		min-height: 44px;
	}

	/* Nút bỏ giáo viên khỏi danh sách (dấu × trong thẻ chip) */
	.tam-nv-btn-xoa-gv,
	.tam-bantru-btn-xoa {
		min-width: 32px;
		min-height: 32px;
	}

	/* Ô chọn ngày, ô lọc — cao bằng nút cho dễ bấm */
	.tam-db-date-input,
	.tam-db-hoso-filters select,
	.tam-nv-danh-gia-select {
		min-height: 44px;
	}
}

/* ============================================================
   3. KHOẢNG CÁCH — lấy lại chiều ngang cho nội dung
   Trên máy 375px, padding 24px mỗi cạnh ở cả khung ngoài lẫn thẻ khiến nội
   dung chỉ còn 279px. Giảm xuống 16px lấy lại 32px.
   ============================================================ */

@media (max-width: 600px) {

	.tam-db-main,
	.tam-ho-so-main {
		padding: var(--space-4) var(--space-3);
		gap: var(--space-4);
	}

	.tam-ch-section,
	.tam-ho-so-block {
		padding: var(--space-4);
	}

	.tam-db-greeting {
		padding: var(--space-5) var(--space-4);
	}

	.tam-topbar {
		padding: 0 var(--space-3);
	}

	.tam-topbar-title {
		font-size: var(--font-size-base);
	}

	/* Tiêu đề mục + nút hành động: xuống dòng thay vì bóp chữ */
	.tam-db-section-header,
	.tam-ho-so-toolbar {
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.tam-db-greeting-facts {
		flex-wrap: wrap;
		gap: var(--space-4);
	}
}

/* ============================================================
   4. BẢNG DỮ LIỆU
   Bảng nhiều cột (bảng nhiệm vụ có 8 cột) không thể thu vừa màn hình điện
   thoại. Cho cuộn ngang trong khung riêng để phần còn lại của trang KHÔNG bị
   kéo ngang theo.

   Ngưỡng phải là 900px, ĐÚNG BẰNG ngưỡng đổi bố cục ở mục 1. Nếu để 720px thì
   trong khoảng 721-900px thanh bên đã nằm ngang (nội dung chiếm trọn bề rộng
   máy) nhưng bảng lại chưa được cho cuộn, nên bảng rộng ~840px đẩy CẢ TRANG
   trượt ngang.
   ============================================================ */

@media (max-width: 900px) {

	.tam-table:not([hidden]) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Không để ô bảng bị bóp thành mỗi dòng một chữ */
	.tam-table th,
	.tam-table td {
		white-space: nowrap;
		padding: var(--space-3);
	}

	/* Riêng cột nội dung dài thì vẫn cho xuống dòng, giới hạn bề ngang */
	.tam-table td.tam-table-noi-dung {
		white-space: normal;
		min-width: 200px;
	}
}

/* ============================================================
   5. CÁC LƯỚI CỐ ĐỊNH CỘT — xếp lại cho vừa màn hình hẹp
   ============================================================ */

@media (max-width: 600px) {

	/* --- Khối "Theo dõi giáo án hôm nay" (dashboard hiệu trưởng) ---
	   Gốc: 160px 1fr 60px auto — trên điện thoại thanh tiến độ chỉ còn vài
	   chục px, không đọc được gì. Tách tên tổ lên dòng riêng. */
	.tam-db-ga-row {
		grid-template-columns: 1fr auto auto;
		gap: var(--space-2) var(--space-3);
	}

	.tam-db-ga-ten {
		grid-column: 1 / -1;
	}

	/* --- Danh sách giáo viên chưa đăng giáo án ---
	   Gốc: 1fr 160px auto. Đưa tên tổ xuống dòng dưới, badge nằm bên phải
	   trải suốt hai dòng. */
	.tam-db-ga-gv-row {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.tam-db-ga-gv-ten {
		grid-column: 1;
		grid-row: 1;
	}

	.tam-db-ga-gv-to {
		grid-column: 1;
		grid-row: 2;
	}

	.tam-db-ga-gv-row .tam-badge {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* --- Khối thông tin chỉ đọc trong hộp thoại ---
	   Hai cột làm nhãn tiếng Việt bị vỡ chữ giữa từ. */
	.tam-ga-info {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.tam-ga-info dt {
		margin-top: var(--space-3);
	}

	.tam-ga-info dt:first-child {
		margin-top: 0;
	}

	.tam-ga-info dd {
		margin-bottom: 0;
	}

	/* --- Thẻ thống kê --- */
	.tam-stat-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}

	.tam-db-hs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}
}

/* ============================================================
   6. HỘP THOẠI — dạng trượt lên từ đáy
   Trên điện thoại, hộp thoại nằm giữa màn hình khó với tới bằng ngón cái.
   Cho nó bám đáy, rộng gần hết bề ngang.
   ============================================================ */

@media (max-width: 600px) {

	.tam-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.tam-modal {
		max-width: none;
		width: 100%;
		max-height: 92vh;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		padding: var(--space-5) var(--space-4) var(--space-6);
	}

	.tam-modal-actions {
		flex-direction: column-reverse;
		gap: var(--space-2);
	}

	.tam-modal-actions .tam-btn {
		width: 100%;
	}
}

/* ============================================================
   7. TRANG ĐĂNG NHẬP
   ============================================================ */

@media (max-width: 600px) {

	.tam-login-card,
	.tam-noi-bo-card {
		padding: var(--space-8) var(--space-5);
	}

	.tam-login-field input,
	.tam-login-form .tam-btn {
		min-height: 44px;
	}
}