/* ============================================================================
   AZ ADMIN SHELL — style.css
   ----------------------------------------------------------------------------
   Khung quan tri: thanh ben trai + thanh tren + vung Views + ngan keo cong cu.

   BA NGUYEN TAC CHONG XUNG DOT VOI OS CORE
   1. Moi rule nam trong @layer template — dung ten layer cua OS.css.
      OS.css khai: reset, tokens, base, layout, components, template,
      utilities, overrides. Nam dung tang => KHONG can mot dong !important.
      CSS ngoai layer thang MOI @layer, nen tuyet doi khong de rule tran ra.
   2. Moi lop deu co tien to az-admin-* — da doi chieu 130 lop .az-* cua
      OS.css, khong trung mot cai nao. KHONG dung lai .az-main / .az-card /
      .az-btn... de Views tu do dung chung theo cach cua no.
   3. Mau/khoang cach lay tu token OS core (--az-bg-surface, --az-space-4...).
      Chi khai them token rieng cho kich thuoc khung (--az-admin-rail-w...).
      Nho vay dark mode TU CHAY: OS.css da co html.az-dark + auto theo he
      dieu hanh, doi token la khung doi theo, khong phai viet bang mau thu hai.
   ========================================================================== */

@layer reset, tokens, base, layout, components, template, utilities, overrides;

@layer tokens {
	:root {
		/* Kich thuoc khung — KHONG nuot token OS core */
		--az-admin-rail-w: 248px;
		--az-admin-rail-w-min: 60px;
		--az-admin-topbar-h: 60px;
		--az-admin-dock-w: 380px;
		--az-admin-z-rail: 60;
		--az-admin-z-topbar: 70;
		--az-admin-z-dock: 80;
		--az-admin-dur: .18s;

		/* OS.css doc token nay de tinh chieu cao bang dinh khi cuon.
		   Khong dat = thead dinh sai cho tren moi man danh sach. */
		--az-header-offset: var(--az-admin-topbar-h);
	}

	/* Thu gon: chi con dai bieu tuong */
	:root:has(.az-admin-shell.az-admin-collapsed) {
		--az-admin-rail-w: var(--az-admin-rail-w-min);
	}
}

@layer template {

	/* ==================== KHUNG ==================== */
	.az-admin-shell {
		min-height: 100vh;
		display: grid;
		grid-template-columns: var(--az-admin-rail-w) minmax(0, 1fr);
		grid-template-rows: var(--az-admin-topbar-h) minmax(0, 1fr);
		grid-template-areas:
			"rail topbar"
			"rail view";
		background: var(--az-bg-body);
		transition: grid-template-columns var(--az-admin-dur) ease;
	}

	.az-admin-shell.az-admin-dock-open { grid-template-columns: var(--az-admin-rail-w) minmax(0, 1fr) var(--az-admin-dock-w); }
	.az-admin-shell.az-admin-dock-open { grid-template-areas: "rail topbar dock" "rail view dock"; }

	/* ==================== THANH BEN ==================== */
	.az-admin-rail {
		grid-area: rail;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		z-index: var(--az-admin-z-rail);
		display: flex;
		flex-direction: column;
		background: var(--az-bg-surface);
		border-right: 1px solid var(--az-border-color);
		overflow: hidden;
	}

	.az-admin-brand {
		flex: 0 0 var(--az-admin-topbar-h);
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		padding: 0 var(--az-space-3);
		border-bottom: 1px solid var(--az-border-color-subtle);
		overflow: hidden;
	}

	.az-admin-brand img { max-height: 34px; max-width: 34px; flex: 0 0 auto; }

	.az-admin-brand span {
		font-weight: 600;
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.az-admin-nav {
		flex: 1 1 auto;
		padding: var(--az-space-2) var(--az-space-2) var(--az-space-4);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	.az-admin-nav ul { list-style: none; margin: 0; padding: 0; }
	.az-admin-nav > ul > li + li { margin-top: 1px; }

	.az-admin-nav a {
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		min-height: 38px;
		padding: 0 var(--az-space-3);
		border-radius: var(--az-radius-md);
		color: var(--az-text-secondary, inherit);
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
	}

	.az-admin-nav a:hover { background: var(--az-bg-surface-hover); }

	.az-admin-nav > ul > li.az-admin-on > a {
		background: var(--az-bg-surface-alt);
		color: var(--az-color-primary);
		font-weight: 600;
	}

	.az-admin-nav a img,
	.az-admin-nav a i {
		flex: 0 0 20px;
		width: 20px;
		font-size: 18px;
		text-align: center;
	}

	/* Anh menu do SP tra ve, kich thuoc khong dong nhat -> ep khung vuong */
	.az-admin-nav a img {
		height: 20px;
		object-fit: contain;
	}

	.az-admin-nav a span {
		flex: 1 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Bieu tuong ben phai — CUNG BE RONG cho ca hai loai muc, neu khong
	   chu se so le giua muc co nhom con va muc khong co.
	   ⚠ Phai viet DAY DU '.az-admin-nav a .az-admin-caret': rule ben tren
	   '.az-admin-nav a i' co do uu tien (0,1,2) cao hon '.az-admin-leaf'
	   (0,1,0) nen se thang — dat 20px va de bep moi thu o day. */
	.az-admin-nav a .az-admin-caret,
	.az-admin-nav a .az-admin-leaf {
		flex: 0 0 14px;
		width: 14px;
		font-size: 11px;
		text-align: center;
	}

	/* Mui ten cung ve bang CSS, KHONG dung lop .fal.
	   Ly do: fontawesome581pro.css nap NGOAI @layer, ma CSS ngoai layer THANG
	   moi @layer bat ke do uu tien. '.fal { display:inline-block }' cua no de
	   len 'display:none' cua khung -> thu gon roi mui ten van hien, chen mat
	   anh menu. Cham thi an dung vi khong mang lop .fal nao.
	   Ve bang CSS la thoat han khoi cuoc tranh chap nay. */
	.az-admin-nav a .az-admin-caret {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		opacity: .55;
	}

	.az-admin-nav a .az-admin-caret::before {
		content: '';
		width: 5px;
		height: 5px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg) translate(-1px, -1px);
		transition: transform var(--az-admin-dur) ease;
	}

	/* Muc la: cham ve bang CSS, KHONG dung bieu tuong font.
	   fa-circle ban Light la vong tron rong — thu nho lai trong nhu chu 'C'.
	   Ve bang CSS thi kiem soat duoc hinh dang va khong phu thuoc bo font nao. */
	.az-admin-nav a .az-admin-leaf {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.az-admin-nav a .az-admin-leaf::before {
		content: '';
		width: 4px;
		height: 4px;
		border-radius: var(--az-radius-full);
		background: currentColor;
		opacity: .32;
	}

	.az-admin-nav li.az-admin-open > a .az-admin-caret::before { transform: rotate(45deg) translate(-2px, -2px); }
	.az-admin-nav li.az-admin-on > a .az-admin-leaf::before { opacity: .8; }

	/* Nhom con: xo doc, khong bung ra ngoai — thanh ben cuon duoc nen khong can */
	.az-admin-nav ul ul {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--az-admin-dur) ease;
	}

	.az-admin-nav li.az-admin-open > ul { max-height: 1200px; }
	.az-admin-nav ul ul a { padding-left: calc(var(--az-space-3) + 28px); font-size: 13px; min-height: 34px; }
	.az-admin-nav ul ul ul a { padding-left: calc(var(--az-space-3) + 48px); }

	.az-admin-railfoot {
		flex: 0 0 auto;
		padding: var(--az-space-2);
		border-top: 1px solid var(--az-border-color-subtle);
	}

	.az-admin-railtoggle {
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		width: 100%;
		min-height: 34px;
		padding: 0 var(--az-space-3);
		border-radius: var(--az-radius-md);
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}

	.az-admin-railtoggle:hover { background: var(--az-bg-surface-hover); }
	.az-admin-railtoggle i { flex: 0 0 20px; width: 20px; text-align: center; }

	/* ---- Trang thai thu gon ---- */
	.az-admin-collapsed .az-admin-brand span,
	.az-admin-collapsed .az-admin-nav a span,
	.az-admin-collapsed .az-admin-railtoggle span { display: none; }

	/* Thu gon: chi con MOT bieu tuong giua dai. An mui ten va cham bang
	   width/opacity thay vi display — de neu co bo font nao ep display thi
	   chung van khong chiem cho. */
	.az-admin-collapsed .az-admin-nav a .az-admin-caret,
	.az-admin-collapsed .az-admin-nav a .az-admin-leaf {
		flex: 0 0 0;
		width: 0;
		overflow: hidden;
		opacity: 0;
	}

	.az-admin-collapsed .az-admin-nav ul ul { display: none; }
	.az-admin-collapsed .az-admin-nav a { justify-content: center; padding: 0; }
	.az-admin-collapsed .az-admin-nav a img,
	.az-admin-collapsed .az-admin-nav a i { flex: 0 0 22px; width: 22px; font-size: 19px; }
	.az-admin-collapsed .az-admin-brand { justify-content: center; padding: 0; }
	.az-admin-collapsed .az-admin-railtoggle { justify-content: center; padding: 0; }
	.az-admin-collapsed .az-admin-railtoggle i { transform: rotate(180deg); }

	/* ==================== THANH TREN ==================== */
	.az-admin-topbar {
		grid-area: topbar;
		position: sticky;
		top: 0;
		z-index: var(--az-admin-z-topbar);
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		padding: 0 var(--az-space-4);
		background: var(--az-bg-surface);
		border-bottom: 1px solid var(--az-border-color);
	}

	.az-admin-crumb {
		flex: 0 1 auto;
		min-width: 0;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.az-admin-spacer { flex: 1 1 auto; }

	/* Tim nhanh */
	.az-admin-search {
		flex: 0 1 320px;
		position: relative;
		display: flex;
		align-items: center;
	}

	.az-admin-search input {
		width: 100%;
		height: 34px;
		padding: 0 var(--az-space-3) 0 34px;
		background: var(--az-bg-surface-alt);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		font: inherit;
		font-size: 14px;
		color: inherit;
	}

	.az-admin-search input:focus { outline: none; border-color: var(--az-color-primary); box-shadow: var(--az-shadow-focus); }
	.az-admin-search i { position: absolute; left: 11px; font-size: 15px; opacity: .55; pointer-events: none; }

	/* Nut tron tren thanh */
	.az-admin-iconbtn {
		flex: 0 0 auto;
		position: relative;
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--az-radius-md);
		font-size: 18px;
		cursor: pointer;
	}

	.az-admin-iconbtn:hover { background: var(--az-bg-surface-hover); }
	.az-admin-iconbtn.az-admin-on { color: var(--az-color-primary); background: var(--az-bg-surface-alt); }

	.az-admin-dot {
		position: absolute;
		top: 3px;
		right: 3px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: var(--az-radius-full);
		background: #dc2626;
		color: #fff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}

	.az-admin-avatar {
		width: 30px;
		height: 30px;
		border-radius: var(--az-radius-full);
		object-fit: cover;
	}

	/* Menu xo tu thanh tren */
	.az-admin-pop {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		min-width: 210px;
		padding: var(--az-space-1) 0;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		box-shadow: var(--az-shadow-lg);
		display: none;
	}

	.az-admin-menuwrap { position: relative; }
	.az-admin-menuwrap.az-admin-open .az-admin-pop { display: block; }

	.az-admin-pop a,
	.az-admin-pop button {
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		width: 100%;
		min-height: 36px;
		padding: 0 var(--az-space-4);
		background: none;
		border: 0;
		font: inherit;
		font-size: 14px;
		color: inherit;
		text-align: left;
		cursor: pointer;
	}

	.az-admin-pop a:hover,
	.az-admin-pop button:hover { background: var(--az-bg-surface-hover); }
	.az-admin-pop hr { margin: var(--az-space-1) 0; border: 0; border-top: 1px solid var(--az-border-color-subtle); }
	.az-admin-pop i { flex: 0 0 18px; width: 18px; text-align: center; opacity: .7; }

	/* ==================== VUNG VIEWS ==================== */
	/* Hop dong voi nguoi viet View: moi thu do vao day.
	   Khung KHONG dat rule cho con ben trong — Views tu do dung .az-main,
	   .az-card, .az-table... cua OS core ma khong bi khung can thiep. */
	/* CHI dat vi tri trong luoi.
	   Khoang cach do .az-main cua OS core lo (@layer layout:
	   width calc(100% - space-8), margin space-4). Khung KHONG dung vao —
	   de View nhan dung kich thuoc no van mong doi tu truoc toi nay. */
	.az-admin-view {
		grid-area: view;
		min-width: 0;
		min-height: 0;
	}

	/* Tieu de bang dinh: ep sat day thanh tren.
	   Lui len 1px de khong ho mot vet mong khi trinh duyet lam tron so le
	   luc phong to/thu nho. Tang chieu cao o de dong cuon khong lo ra tren. */
	.az-admin-view .az-table thead th,
	.az-admin-view table thead th {
		top: calc(var(--az-admin-topbar-h) - 1px);
		padding-top: var(--az-space-3);
		padding-bottom: var(--az-space-3);
	}

	/* ==================== NGAN KEO CONG CU ==================== */
	.az-admin-dock {
		grid-area: dock;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		z-index: var(--az-admin-z-dock);
		display: none;
		flex-direction: column;
		background: var(--az-bg-surface);
		border-left: 1px solid var(--az-border-color);
	}

	.az-admin-dock-open .az-admin-dock { display: flex; }

	.az-admin-dockhead {
		flex: 0 0 var(--az-admin-topbar-h);
		display: flex;
		align-items: center;
		gap: var(--az-space-2);
		padding: 0 var(--az-space-3);
		border-bottom: 1px solid var(--az-border-color-subtle);
		font-weight: 600;
		font-size: 14px;
	}

	.az-admin-dockbody { flex: 1 1 auto; min-height: 0; overflow: hidden; }
	.az-admin-dockbody > iframe { width: 100%; height: 100%; border: 0; display: block; }

	.az-admin-docktabs {
		display: flex;
		gap: var(--az-space-1);
		padding: var(--az-space-2);
		border-top: 1px solid var(--az-border-color-subtle);
	}

	.az-admin-docktabs button {
		flex: 1 1 0;
		min-height: 34px;
		background: none;
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		font: inherit;
		font-size: 12px;
		color: inherit;
		cursor: pointer;
	}

	.az-admin-docktabs button.az-admin-on {
		border-color: var(--az-color-primary);
		color: var(--az-color-primary);
	}

	/* ==================== DANG NHAP ==================== */
	.az-admin-login {
		min-height: 100vh;
		display: grid;
		place-items: center;
		padding: var(--az-space-4);
		background: var(--az-bg-body);
	}

	.az-admin-loginbox {
		width: 100%;
		max-width: 380px;
		padding: var(--az-space-8) var(--az-space-6);
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-xl);
		box-shadow: var(--az-shadow-lg);
	}

	.az-admin-loginbox img { max-height: 52px; margin: 0 auto var(--az-space-5); display: block; }

	.az-admin-loginbox h1 {
		margin: 0 0 var(--az-space-6);
		font-size: 19px;
		font-weight: 600;
		text-align: center;
	}

	.az-admin-field { margin-bottom: var(--az-space-4); }

	.az-admin-field label {
		display: block;
		margin-bottom: var(--az-space-2);
		font-size: 13px;
		opacity: .8;
	}

	.az-admin-field input {
		width: 100%;
		height: 42px;
		padding: 0 var(--az-space-3);
		background: var(--az-bg-surface-alt);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		font: inherit;
		font-size: 15px;
		color: inherit;
	}

	.az-admin-field input:focus { outline: none; border-color: var(--az-color-primary); box-shadow: var(--az-shadow-focus); }
	.az-admin-field.az-admin-bad input { border-color: #dc2626; }

	.az-admin-submit {
		width: 100%;
		height: 44px;
		margin-top: var(--az-space-2);
		background: var(--az-color-primary);
		border: 0;
		border-radius: var(--az-radius-md);
		color: #fff;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.az-admin-submit:hover { background: var(--az-color-primary-hover); }
	.az-admin-submit:active { background: var(--az-color-primary-active); }
	.az-admin-submit[disabled] { opacity: .55; cursor: default; }

	.az-admin-loginmsg {
		min-height: 20px;
		margin-top: var(--az-space-3);
		font-size: 13px;
		line-height: 1.5;
		color: #dc2626;
		text-align: center;
	}

	/* ==================== BANG DIEU KHIEN ==================== */
	.az-admin-tiles {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: var(--az-space-4);
	}

	.az-admin-tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--az-space-3);
		padding: var(--az-space-6) var(--az-space-4);
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		text-align: center;
		transition: border-color var(--az-admin-dur) ease;
	}

	.az-admin-tile:hover { border-color: var(--az-color-primary); }
	.az-admin-tile i { font-size: 30px; color: var(--az-color-primary); }
	.az-admin-tile img { max-height: 46px; }
	.az-admin-tile span { font-size: 14px; font-weight: 600; }

	/* ==================== DIEN THOAI / MAY TINH BANG ==================== */
	@media (max-width: 1024px) {
		.az-admin-shell,
		.az-admin-shell.az-admin-dock-open {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "topbar" "view";
		}

		/* Thanh ben truot de len, khong chiem cot */
		.az-admin-rail {
			position: fixed;
			top: 0;
			left: 0;
			width: var(--az-admin-rail-w-min);
			transform: translateX(-100%);
			transition: transform var(--az-admin-dur) ease, width var(--az-admin-dur) ease;
		}

		.az-admin-shell.az-admin-rail-open .az-admin-rail { width: 280px; transform: translateX(0); box-shadow: var(--az-shadow-xl); }
		.az-admin-shell.az-admin-rail-open .az-admin-brand span,
		.az-admin-shell.az-admin-rail-open .az-admin-nav a span,
		.az-admin-shell.az-admin-rail-open .az-admin-caret,
		.az-admin-shell.az-admin-rail-open .az-admin-railtoggle span { display: inline; }
		.az-admin-shell.az-admin-rail-open .az-admin-nav ul ul { display: block; }
		.az-admin-shell.az-admin-rail-open .az-admin-nav a { justify-content: flex-start; padding: 0 var(--az-space-3); }

		.az-admin-scrim {
			position: fixed;
			inset: 0;
			z-index: calc(var(--az-admin-z-rail) - 1);
			background: var(--az-bg-overlay);
			display: none;
		}

		.az-admin-shell.az-admin-rail-open .az-admin-scrim { display: block; }

		/* Ngan keo chiem toan man tren dien thoai */
		.az-admin-dock {
			position: fixed;
			inset: 0;
			height: 100vh;
			border-left: 0;
		}

		.az-admin-search { flex: 0 0 auto; }
		.az-admin-search input { width: 34px; padding-left: 34px; padding-right: 0; }
		.az-admin-search input:focus { width: 220px; padding-right: var(--az-space-3); }
		.az-admin-rail { top: 0; }
	}

	@media (max-width: 640px) {
		.az-admin-crumb { font-size: 14px; }
		.az-admin-tile { padding: var(--az-space-4) var(--az-space-3); }
		.az-admin-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--az-space-3); }
	}

	/* ==================== TON TRONG GIAM CHUYEN DONG ==================== */
	@media (prefers-reduced-motion: reduce) {
		.az-admin-shell,
		.az-admin-rail,
		.az-admin-nav ul ul,
		.az-admin-caret,
		.az-admin-tile { transition: none; }
	}
}