/* ==========================================================================
   TMT AOES ICON SYSTEM — trạng thái và hoạt ảnh
   Chuẩn: TMT-CN-TCHC-2026-001 (KNOWLED nhánh 08.02)
   Đặt tại: app/public/icons/tmt-icon.css — nạp MỘT lần ở layout gốc:
     <link rel="stylesheet" href="/icons/tmt-icon.css">

   Vì sao dùng filter/transform mà không đổi màu bằng CSS:
   icon.js kết xuất thẻ <img>. Ảnh trong <img> KHÔNG thừa hưởng `color` của
   CSS, nên màu đã nung sẵn vào từng tệp SVG. Bốn trạng thái dưới đây dùng
   filter và transform — hai thứ <img> nhận được.
   ========================================================================== */

.tmt-icon{
  display:inline-block; vertical-align:-0.15em;
  width:24px; height:24px; flex:0 0 auto;
  transition: filter .15s ease, transform .15s ease, opacity .15s ease;
  -webkit-user-drag:none; user-select:none;
}

/* ---------- Năm khổ chuẩn ---------- */
.tmt-icon--14{ width:14px; height:14px }   /* bảng dữ liệu rất dày */
.tmt-icon--16{ width:16px; height:16px }   /* bảng, chip trạng thái */
.tmt-icon--20{ width:20px; height:20px }   /* thẻ phiếu việc */
.tmt-icon--24{ width:24px; height:24px }   /* mặc định, nút chính */
.tmt-icon--28{ width:28px; height:28px }   /* trần — trên mức này dùng lớp 3D icon-v2 */

/* ---------- BỐN TRẠNG THÁI BẮT BUỘC ---------- */

/* mặc định — không cần khai báo thêm */

/* hover: sáng +10%, phóng 1.05×, 150ms */
.tmt-icon-nut:hover .tmt-icon,
a:hover > .tmt-icon,
button:hover > .tmt-icon,
.tmt-icon.co-hover:hover{
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* active: thu 0.95×, 80ms */
.tmt-icon-nut:active .tmt-icon,
a:active > .tmt-icon,
button:active > .tmt-icon,
.tmt-icon.co-hover:active{
  transform: scale(.95);
  transition-duration: .08s;
}

/* disabled: độ đậm 40%, thang xám */
.tmt-icon--tat,
[disabled] .tmt-icon,
[aria-disabled="true"] .tmt-icon{
  filter: grayscale(1) opacity(.4);
  transform:none !important;
  cursor:not-allowed;
}

/* ---------- Nút bọc icon ---------- */
.tmt-icon-nut{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  border:1px solid transparent; border-radius:8px; padding:.4em .6em;
  background:transparent; cursor:pointer; color:#1E4B8F;
  font:inherit; transition: background .15s ease, border-color .15s ease;
}
.tmt-icon-nut:hover{ background:#EAF1FB; border-color:#C3D9F7 }
.tmt-icon-nut:focus-visible{ outline:2px solid #2F7FE0; outline-offset:2px }
.tmt-icon-nut--nguy-hiem{ color:#DC2626 }
.tmt-icon-nut--nguy-hiem:hover{ background:#FEF2F2; border-color:#FECACA }

/* ---------- Chip trạng thái phiếu ---------- */
.tmt-chip{
  display:inline-flex; align-items:center; gap:.35em; white-space:nowrap;
  font-size:12.5px; font-weight:600; line-height:1;
  padding:.34em .62em .34em .5em; border-radius:999px; border:1px solid currentColor;
  background:color-mix(in srgb, currentColor 9%, #fff);
}
.tmt-chip .tmt-icon{ width:14px; height:14px }
.tmt-chip--ok{ color:#16A34A } .tmt-chip--loi{ color:#DC2626 }
.tmt-chip--canh-bao{ color:#D97706 } .tmt-chip--cho{ color:#64748B }
.tmt-chip--dang{ color:#1E4B8F }

/* ---------- BỐN BIỂU TƯỢNG BẮT BUỘC CÓ HOẠT ẢNH LIÊN TỤC ---------- */
@keyframes tmt-quay{ to{ transform:rotate(360deg) } }
@keyframes tmt-sang{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.35) } }

.tmt-icon[data-icon="icon_processing"],
.tmt-icon[data-icon="icon_sync"],
.tmt-icon[data-icon="icon_sync_data"]{
  animation: tmt-quay 1.1s linear infinite;
  transform-origin:50% 50%;
}
.tmt-icon[data-icon="icon_ai_tmt"]{ animation: tmt-sang 2.4s ease-in-out infinite }

/* Dừng quay khi việc đã xong — thêm class này, đừng để quay mãi
   (quay mãi khiến người dùng tưởng hệ treo). */
.tmt-icon.da-xong{ animation:none !important }

/* ---------- Ô nét đứt khi thiếu tệp (iconTag tự sinh) ---------- */
.icon-thieu{ font-weight:700 }

/* ---------- Tôn trọng người tắt hiệu ứng ---------- */
@media (prefers-reduced-motion: reduce){
  .tmt-icon{ transition:none !important; animation:none !important }
  .tmt-icon-nut:hover .tmt-icon, button:hover > .tmt-icon, a:hover > .tmt-icon{ transform:none }
}

/* ---------- In giấy ---------- */
@media print{ .tmt-icon{ animation:none !important; filter:none !important } }

/* ---------- Icon đặt trên nền màu đậm ----------
   Icon 3D xanh TMT đặt trên nút gradient navy→blue sẽ chìm.
   Viền trắng mỏng tách hình khỏi nền mà không phải làm thêm bộ ảnh trắng. */
.tmt-icon--nen-dam{
  filter:
    drop-shadow(0  1px 0 rgba(255,255,255,.95))
    drop-shadow(0 -1px 0 rgba(255,255,255,.95))
    drop-shadow( 1px 0 0 rgba(255,255,255,.95))
    drop-shadow(-1px 0 0 rgba(255,255,255,.95));
}
.tmt-icon-nut:hover .tmt-icon--nen-dam,
button:hover > .tmt-icon--nen-dam{ filter:
    drop-shadow(0  1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow( 1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) brightness(1.1); }