@import "tailwindcss";

/*
 * Hệ màu — lấy theo nhận diện thương hiệu Mediworld (mediworld.vn).
 *
 * Cam #F05A2A là màu chủ đạo trên website của khách: thanh điều hướng, nút chính,
 * nhãn sản phẩm. Xanh navy #214B9A là màu phụ. Bảng màu dưới đây giữ đúng cặp
 * cam–navy đó: cam làm màu nhấn, còn dải xám trung tính ngả navy làm chữ và nền.
 *
 * ## Vì sao màu ngữ nghĩa phải tránh xa dải cam
 *
 * Cam vốn là màu cảnh báo quy ước. Khi cam trở thành màu thương hiệu, ba trạng thái
 * tốt / cần chú ý / nghiêm trọng phải được đẩy ra xa nó, nếu không người dùng không
 * phân biệt được "nút chính" với "cảnh báo":
 *   - tốt        → xanh lá, khác hẳn tông cam
 *   - cần chú ý  → hổ phách sẫm ngả nâu, đục hơn hẳn cam thương hiệu vốn rất tươi
 *   - nghiêm trọng → đỏ ngả hồng, lệch sang phía đối diện của cam trên vòng màu
 */
@theme {
  /* Dải trung tính ngả navy — cặp bổ trợ tự nhiên của cam. */
  --color-ink-50: #f5f7fa;
  --color-ink-100: #e8edf4;
  --color-ink-200: #cdd8e6;
  --color-ink-300: #a3b1c6;
  --color-ink-400: #6a7a92;
  --color-ink-500: #45536a;
  --color-ink-600: #2c3a50;
  --color-ink-700: #1b2739;
  --color-ink-800: #131c2b;
  --color-ink-900: #0c121c;

  /* Cam Mediworld. */
  --color-brand-400: #f47d57;
  --color-brand-500: #f05a2a;
  --color-brand-600: #d4451a;
  --color-brand-700: #b03812;
  --color-brand-50: #fdede7;

  /* Navy Mediworld — dùng cho chuỗi dữ liệu thứ hai trên biểu đồ. */
  --color-navy-500: #214b9a;

  /* Cần chú ý: hổ phách sẫm, đục hơn cam thương hiệu để không lẫn. */
  --color-gold-500: #a16207;
  --color-gold-100: #fdf3d7;

  /* Nghiêm trọng: đỏ ngả hồng. Đỏ tiêu chuẩn (#dc2626) quá gần cam thương hiệu —
     đặt cạnh nhau trên cùng một bảng thì người dùng phải nhìn kỹ mới phân biệt. */
  --color-red-50: #fff1f3;
  --color-red-100: #ffe4e8;
  --color-red-500: #e11d48;
  --color-red-600: #be123c;
  --color-red-700: #9f1239;

  --color-line: #e2e8f0;
  --color-canvas: #f7f9fc;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

@layer base {
  html {
    background: var(--color-canvas);
    color: var(--color-ink-700);
    -webkit-font-smoothing: antialiased;
  }

  body {
    font-family: var(--font-sans);
  }

  /* Ô lưới mặc định không co nhỏ hơn nội dung của nó — một bảng rộng bên trong sẽ kéo cả
     cột lưới (và cả trang) rộng quá màn hình điện thoại. min-width: 0 cho phép ô co lại,
     bảng tự cuộn ngang trong khung riêng như thiết kế. */
  .grid > * {
    min-width: 0;
  }

  /* Số liệu trong bảng phải thẳng cột. */
  .tnum {
    font-variant-numeric: tabular-nums;
  }

  /* Trạng thái focus rõ ràng cho thao tác bằng bàn phím. */
  :focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
}

@layer components {
  .card {
    @apply rounded-xl border border-[var(--color-line)] bg-white;
  }

  .label-caps {
    @apply text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-400;
  }

  /* Tailwind v4 không cho @apply một class component khác, nên mỗi biến thể
     khai báo đầy đủ thuộc tính thay vì kế thừa .btn. */
  .btn,
  .btn-primary,
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold
           transition-colors disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply bg-brand-500 text-white hover:bg-brand-600;
  }
  .btn-ghost {
    @apply border border-[var(--color-line)] bg-white text-ink-600 hover:bg-ink-50;
  }

  .input {
    @apply w-full rounded-lg border border-[var(--color-line)] bg-white px-3 py-2 text-sm
           text-ink-700 placeholder:text-ink-300 focus:border-brand-400 focus:outline-none;
  }

  /* Bảng dữ liệu: dày đặc thông tin nhưng vẫn đọc được. */
  .data-table {
    @apply w-full text-sm;
  }
  .data-table th {
    @apply border-b border-[var(--color-line)] px-3 py-2.5 text-left text-[11px] font-semibold
           uppercase tracking-[0.06em] text-ink-400;
  }
  .data-table td {
    @apply border-b border-[var(--color-line)] px-3 py-2.5 align-top;
  }
  .data-table tbody tr:hover {
    @apply bg-ink-50/60;
  }
}

/*
 * Bản in báo cáo — xuất PDF qua chức năng in của trình duyệt.
 *
 * Khối này phải nằm NGOÀI mọi `@layer`: Tailwind v4 xử lý nội dung trong
 * `@layer components` theo cách riêng và loại bỏ các at-rule thô như `@media print`
 * hay `@page` đặt bên trong, chỉ giữ lại các biến thể `print:` của chính nó.
 * Đặt trong layer thì thanh điều hướng vẫn in ra giấy mà không có lỗi nào báo.
 */
@media print {
  /* Ẩn khung điều hướng, chỉ in phần nội dung báo cáo. */
  aside,
  header.sticky {
    display: none !important;
  }

  main {
    padding: 0 !important;
  }

  .print-report {
    max-width: none;
  }

  /* Buộc in màu nền và viền, nếu không bảng biểu ra giấy trắng trơn. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Lặp lại tiêu đề cột khi bảng tràn sang trang sau. */
  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
  }
}

@page {
  size: A4;
  margin: 15mm 12mm;
}

/* Thông báo nhanh: trượt nhẹ vào. */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-in {
  animation: toast-in 0.18s ease-out;
}

/* Form đang xử lý (ActionForm): nút gửi mờ đi và không bấm được, tránh bấm đúp. */
form[data-pending="true"] button[type="submit"] {
  opacity: 0.55;
  pointer-events: none;
}