/* ====================================================================
 * stm-ui.css — lớp component của design system STM cho ASP.NET Core.
 * Dùng token từ stm-ui-tokens.css (đồng bộ từ @stmjsc/ui). Class ánh xạ 1-1
 * theo shadcn/ui STM (button.tsx / input.tsx / card.tsx …) nhưng viết bằng CSS
 * thuần để không cần Tailwind trong build .NET.
 * Focus: shadcn dùng ring box-shadow (offset-0) + outline-none — component tự đặt (KHÔNG dùng
 *   outline offset 2px mặc định của lớp token). box-sizing: border-box vì token layer không có preflight.
 * ==================================================================== */

/* Reset base tối thiểu (lớp token không kèm preflight của Tailwind): bỏ margin 8px mặc định của body. */
body { margin: 0; }

/* ── Nút — khớp buttonVariants (base + variant + size) ─────────────── */
.stm-btn {
  box-sizing: border-box;         /* height gồm padding + border (như Tailwind preflight) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  height: 2.5rem;                 /* h-10 */
  padding: 0.5rem 1rem;           /* py-2 px-4 */
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);  /* rounded-md */
  font: inherit;
  font-size: 0.875rem;            /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;               /* font-medium */
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.stm-btn:disabled { pointer-events: none; opacity: .5; }
.stm-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
/* Focus khớp shadcn: outline-none + ring-1 ring-ring/30 ring-offset-0. */
.stm-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring) / .3); }

/* variants */
.stm-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.stm-btn--primary:hover { background: hsl(var(--primary) / .9); }

.stm-btn--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.stm-btn--secondary:hover { background: hsl(var(--secondary) / .8); }

.stm-btn--destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.stm-btn--destructive:hover { background: hsl(var(--destructive) / .9); }

.stm-btn--outline { background: hsl(var(--background)); border-color: hsl(var(--input)); color: inherit; }
.stm-btn--outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.stm-btn--ghost { background: transparent; color: inherit; }
.stm-btn--ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.stm-btn--link { background: transparent; color: hsl(var(--primary)); height: auto; padding: 0; }
.stm-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* sizes */
.stm-btn--sm { height: 2.25rem; padding-left: .75rem; padding-right: .75rem; }
.stm-btn--lg { height: 2.75rem; padding-left: 2rem; padding-right: 2rem; }
.stm-btn--icon { height: 2.5rem; width: 2.5rem; padding: 0; }
.stm-btn--block { width: 100%; }

/* ── Ô nhập — khớp Input ───────────────────────────────────────────── */
.stm-input,
.stm-textarea {
  box-sizing: border-box;         /* height gồm padding + border → đúng h-10 (40px) */
  display: flex;
  width: 100%;
  height: 2.5rem;                 /* h-10 */
  padding: 0.5rem 0.75rem;        /* py-2 px-3 */
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: border-color .15s, box-shadow .15s;
}
.stm-textarea { height: auto; min-height: 5rem; resize: vertical; }
.stm-input::placeholder,
.stm-textarea::placeholder { color: hsl(var(--muted-foreground)); }
/* Focus khớp shadcn: border → ring, ring-1 ring-ring/30 SÁT viền (offset-0), outline-none (bỏ gap 2px của token layer). */
.stm-input:focus-visible,
.stm-textarea:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring) / .3);
}
.stm-input:disabled,
.stm-textarea:disabled { cursor: not-allowed; opacity: .5; }

/* ── Nhãn & field (label + control + lỗi) ──────────────────────────── */
.stm-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}
.stm-field { margin-bottom: 1rem; }
.stm-field__error { margin-top: 0.375rem; font-size: 0.8125rem; color: hsl(var(--destructive)); }

/* ── Alert ─────────────────────────────────────────────────────────── */
.stm-alert {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.stm-alert--destructive { background: hsl(var(--destructive) / .08); border-color: hsl(var(--destructive) / .3); color: hsl(var(--destructive)); }
.stm-alert--success { background: hsl(var(--success) / .12); border-color: hsl(var(--success) / .3); color: hsl(var(--success)); }
.stm-alert--warning { background: hsl(var(--warning) / .12); border-color: hsl(var(--warning) / .35); color: hsl(var(--warning-foreground)); }
.stm-alert--info { background: hsl(var(--info) / .12); border-color: hsl(var(--info) / .3); color: hsl(var(--info)); }

/* ── Card ──────────────────────────────────────────────────────────── */
.stm-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);   /* rounded-lg */
  box-shadow: 0 8px 30px hsl(var(--foreground) / .06);
}
.stm-card__content { padding: 2rem; }
.stm-card__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
.stm-card__desc { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0 0 1.25rem; }

/* ── Auth shell (màn đăng nhập/chọn đơn vị) ────────────────────────── */
.stm-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: hsl(var(--background));
  /* Tôn trọng --font-sans nếu app khai báo (vd nhúng Inter), nếu không → system sans (tránh fallback serif). */
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}
.stm-auth__card { width: 100%; max-width: 400px; }
.stm-auth__footer { margin-top: 1.25rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-align: center; }

.stm-brand { text-align: center; margin-bottom: 1.5rem; }
/* Logo hub-mark trước tiêu đề — tô theo --primary (theme-aware, hiện rõ trên cả light/dark). */
.stm-brand__logo { display: block; margin: 0 auto 0.75rem; color: hsl(var(--primary)); }
.stm-brand__mark { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.5px; color: hsl(var(--foreground)); }
.stm-brand__mark .stm-brand__dot { color: hsl(var(--primary)); }
.stm-brand__tagline { display: block; font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 2px; margin-top: 0.25rem; }

/* ── Danh sách lựa chọn (chọn đơn vị / list picker) — nút full-width, căn trái ── */
.stm-list { list-style: none; margin: 0; padding: 0; }
.stm-list > li { margin-bottom: 0.625rem; }
.stm-list > li:last-child { margin-bottom: 0; }

.stm-choice {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-align: left;
  padding: 0.875rem 1rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.stm-choice:hover { border-color: hsl(var(--primary)); background: hsl(var(--accent)); }
.stm-choice:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring) / .3); }
.stm-choice__title { font-weight: 600; font-size: 0.875rem; }
.stm-choice__meta { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* ── Link inline ───────────────────────────────────────────────────── */
.stm-link { color: hsl(var(--primary)); text-decoration: none; }
.stm-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Tiện ích nhỏ dùng chung */
.stm-muted { color: hsl(var(--muted-foreground)); }
.stm-hint { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.75rem; text-align: center; }