/* ============================================================================
   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); }
	}


	/* ==================== O NHAP TRONG VUNG NOI DUNG ====================
	   Ly do co khoi nay: moi man (Tenant · Baseline · Home · Setting…) truoc day
	   tu ke style cho input/select/textarea → moi noi mot kieu, va sau khi doi
	   template thi tro ve mac dinh cua trinh duyet (nen trang, chu den) → chim
	   trong nen toi. Gom ve MOT NOI: man hinh chi viet <input>, khung lo phan nhin.

	   Pham vi: CHI trong .az-admin-view — khong dung toi o tim nhanh tren thanh
	   (.az-admin-search input) va form dang nhap (.az-admin-field input), hai cho
	   do da co rule rieng ngay tren.

	   Dung dung bo token cua hai rule do → ba noi cung mot ngoai hinh.
	   Man nao can khac (o nho, o rong) thi dat class rieng cua man, dung sua day. */
	.az-admin-view input[type="text"],
	.az-admin-view input[type="search"],
	.az-admin-view input[type="number"],
	.az-admin-view input[type="password"],
	.az-admin-view input[type="email"],
	.az-admin-view input[type="tel"],
	.az-admin-view input[type="url"],
	.az-admin-view input[type="date"],
	.az-admin-view input[type="time"],
	.az-admin-view input[type="datetime-local"],
	.az-admin-view input:not([type]),
	.az-admin-view select,
	.az-admin-view textarea {
		min-height: 34px;
		padding: 6px 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: 14px;
		color: inherit;
		transition: border-color var(--az-admin-dur) ease;
	}

	.az-admin-view textarea { min-height: 64px; line-height: 1.5; resize: vertical; }

	/* Mui ten cua select ve theo mau chu → khong bi den om tren nen toi */
	.az-admin-view select {
		appearance: none;
		padding-right: 30px;
		background-image:
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%);
		background-position: right 14px top 55%, right 9px top 55%;
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
	}

	.az-admin-view input:hover,
	.az-admin-view select:hover,
	.az-admin-view textarea:hover { border-color: var(--az-border-color-strong, var(--az-color-primary)); }

	.az-admin-view input:focus,
	.az-admin-view select:focus,
	.az-admin-view textarea:focus {
		outline: none;
		border-color: var(--az-color-primary);
		box-shadow: var(--az-shadow-focus);
	}

	/* Chu goi y mo han chu that — dang bi cung mau nen doc nham la da nhap */
	.az-admin-view ::placeholder { color: var(--az-text-muted, currentColor); opacity: .55; }

	.az-admin-view input[disabled],
	.az-admin-view select[disabled],
	.az-admin-view textarea[disabled],
	.az-admin-view input[readonly],
	.az-admin-view textarea[readonly] { opacity: .55; cursor: not-allowed; }

	/* O tick / nut chon: theo mau thuong hieu thay vi xanh mac dinh he dieu hanh */
	.az-admin-view input[type="checkbox"],
	.az-admin-view input[type="radio"] { accent-color: var(--az-color-primary); width: 15px; height: 15px; vertical-align: -2px; }

	/* Nut cua trinh duyet trong vung noi dung — cung bo mat voi o nhap */
	.az-admin-view button:not([class]) {
		min-height: 34px;
		padding: 6px var(--az-space-4);
		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;
		cursor: pointer;
	}
	.az-admin-view button:not([class]):hover { border-color: var(--az-color-primary); }


	/* ==================== THANH PHAN DUNG CHUNG — TELTONIKA ====================
	   Bon man (Thiet bi · Hang doi day · Trang thai · Lenh) dung CHUNG bo lop nay.
	   Truoc day chung nam trong style.css CU cua site; doi sang Template moi thi
	   MAT SACH → bang KPI do thanh chu xep chong. Dat o day = mot noi, an ca bon.
	   Man nao co thu dac thu (chip tenant, thanh gui lo, so tay) thi giu o CSS
	   rieng cua man, dung nhet vao day. */
	.az-admin-view {
		--tl-ok:   var(--az-color-success, #16a34a);
		--tl-bad:  var(--az-color-danger,  #dc2626);
		--tl-warn: var(--az-color-warning, #d97706);
	}
	.az-tl-ok { color: var(--tl-ok); }
	.az-tl-bad { color: var(--tl-bad); font-size: 13px; }
	.az-tl-warn { color: var(--tl-warn); font-size: 13px; }
	.az-tl-pre {
		max-height: 55vh; overflow: auto; padding: 10px; text-align: left;
		background: var(--az-bg-surface-alt); border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md); font-size: 12px;
	}

	.az-tl-brand { color: var(--az-color-primary); }
	.az-tl-h3 { margin: 15px 0 7px; font-size: 14px; }
	.az-tl-pad { padding: 20px; }
	.az-admin-view tr.az-tl-rowbad > td { background: color-mix(in srgb, var(--tl-bad) 10%, transparent); }
	@supports not (background: color-mix(in srgb, red 8%, transparent)) {
		.az-admin-view tr.az-tl-rowbad > td { background: var(--az-bg-surface-alt); }
	}

	/* Khung bang dieu khien dau man */
	.az-admin-view .az-fleet {
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		background: var(--az-bg-surface-alt);
		margin-bottom: var(--az-space-3);
	}
	.az-admin-view .az-fleet-head {
		display: flex; flex-wrap: wrap; gap: var(--az-space-3); align-items: center;
		padding: 10px 16px; border-bottom: 1px solid var(--az-border-color);
	}
	.az-admin-view .az-fleet-head .right { margin-left: auto; }
	.az-admin-view .az-fleet-body { padding: 14px 16px; }

	/* The KPI: so lon tren, nhan nho duoi */
	.az-admin-view .az-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--az-space-3); margin-bottom: 14px; }
	.az-admin-view .az-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--az-border-color); border-radius: var(--az-radius-md); }
	.az-admin-view .az-kpi b { font-size: 22px; line-height: 1.15; }
	.az-admin-view .az-kpi span { font-size: 12px; color: var(--az-text-muted, inherit); opacity: .8; }
	.az-admin-view .az-kpi.green b { color: var(--tl-ok); }
	.az-admin-view .az-kpi.red b { color: var(--tl-bad); }
	.az-admin-view .az-kpi.amber b { color: var(--tl-warn); }

	/* Luoi panel nho */
	.az-admin-view .az-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--az-space-3); margin-top: 14px; }
	.az-admin-view .az-panel { border: 1px solid var(--az-border-color); border-radius: var(--az-radius-md); padding: 10px 14px; }
	.az-admin-view .az-panel-t { font-weight: 600; font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: var(--az-space-2); }
	.az-admin-view .az-panel-t .right { margin-left: auto; }
	.az-admin-view .az-top { margin: 4px 0 0 18px; padding: 0; font-size: 13px; }
	.az-admin-view .az-top li { margin: 2px 0; }

	/* Cot theo ngay */
	.az-admin-view .az-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
	.az-admin-view .az-bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
	.az-admin-view .az-bar-fill { width: 100%; background: var(--az-color-primary); border-radius: 3px 3px 0 0; opacity: .75; }
	.az-admin-view .az-bar-fill.amber { background: var(--tl-warn); }
	.az-admin-view .az-bar span { font-size: 10px; color: var(--az-text-muted, inherit); opacity: .8; margin-top: 3px; }

	/* Luoi hai cot + huy hieu (man Lenh, man Tenant) */
	.az-admin-view .az-ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--az-space-3); align-items: start; }
	.az-admin-view .az-ov-badges { display: flex; flex-wrap: wrap; gap: var(--az-space-2); align-items: center; margin-bottom: var(--az-space-3); }
	.az-admin-view .az-ov-badges .right { margin-left: auto; }
	.az-admin-view .az-badge { padding: 4px 12px; border: 1px solid var(--az-border-color); border-radius: var(--az-radius-full, 999px); font-size: 13px; }
	.az-admin-view .az-badge.amber { border-color: var(--tl-warn); }
	.az-admin-view .az-ov-cmd { display: flex; flex-wrap: wrap; gap: var(--az-space-2); align-items: center; }
	.az-admin-view .az-chip { display: inline-block; padding: 2px 10px; border: 1px solid var(--az-border-color); border-radius: var(--az-radius-full, 999px); font-size: 12px; }

	@media (max-width: 900px) {
		.az-admin-view .az-kpis { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
		.az-admin-view .az-fleet-head .right,
		.az-admin-view .az-ov-badges .right { margin-left: 0; }
	}

	/* ==================== 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,
		.az-admin-view input,
		.az-admin-view select,
		.az-admin-view textarea { transition: none; }
	}
}