/* ===================================================================
   GOOSE UI — bảng màu và bộ component RIÊNG của Goose.

   VÌ SAO TÁCH KHỎI LMS2.
   Trước tệp này, mọi màu của dashboard trỏ sang bộ token `--lp-*` của LMS2
   (vendor/lms2/player.css), cố ý để hai mặt sản phẩm nhìn như một. Cái giá là
   Goose mặc bảng màu của một hệ đào tạo doanh nghiệp: sage trầm, trung tính,
   nghiêm túc — trong khi nội dung của nó là bầu trời đêm, một con ngỗng pixel,
   rương quần áo, huy chương và kẹo. Trang tự đánh nhau với chính nó.

   Giờ Goose có bảng riêng. LMS2 vẫn y nguyên; hai bên khác nhau là CỐ Ý.

   BẢNG MÀU LẤY TỪ CHÍNH NHÂN VẬT: trời đêm, ngỗng trắng, mỏ cam.
   Nhờ vậy nền sao và mặt trăng đang có sẵn trong dashboard trở thành chủ đích
   chứ không phải thứ trang trí lạc quẻ. Xanh lá chỉ còn đúng một nhiệm vụ —
   báo XONG — nên nó lại có nghĩa; trước đây xanh vừa là màu thương hiệu vừa là
   màu hoàn thành, và khi mọi thứ đều xanh thì không gì nổi lên được.

   MỌI THỨ Ở ĐÂY MANG TIỀN TỐ `gs-`. Tệp này KHÔNG sửa một quy tắc `.bs-*` nào,
   nên nạp nó vào không làm đổi trang đang chạy; chuyển từng phần sang là việc
   có chủ đích, làm tới đâu thấy tới đó.
   =================================================================== */

:root {
  /* ---- Trời đêm: thanh điều hướng, chân trang, mọi mặt tối ---- */
  --gs-night:       #18203A;
  --gs-night-2:     #222C4A;
  --gs-night-3:     #2E3A5C;
  --gs-night-ink:   #EDF0F7;
  --gs-night-ink-2: #A8B2C8;

  /* ---- Ban ngày: vùng nội dung ---- */
  --gs-ground:      #F6F6F4;
  --gs-surface:     #FFFFFF;
  --gs-surface-2:   #F0F1EE;
  --gs-ink:         #171A21;
  --gs-ink-2:       #4A5261;
  /* 4.57:1 là đủ theo chuẩn nhưng sát vạch, mà đây lại là màu của chữ 12px —
     cỡ chữ nhỏ nhất trong bộ. #636B79 cho 5.37:1, chừa được chút dư. */
  --gs-ink-3:       #636B79;
  --gs-rule:        #DFE1E4;
  --gs-rule-2:      #EDEEF0;

  /* ---- Mỏ ngỗng: hành động chính ----
     ĐO CHỨ KHÔNG ƯỚC. Sắc đầu tôi chọn là #C4551F vì nghĩ nó "chắc là đủ" —
     đo ra đúng 4.50:1, tức là đứng ngay trên vạch AA, không còn một chút dư
     nào cho màn kém, ánh sáng chói hay mắt kém. #B54B1A cho 5.27:1, vẫn đọc
     ra là cam mỏ ngỗng chứ chưa ngả nâu. Mọi sắc cam sáng hơn đều tụt xuống
     dưới 3:1 và biến nút chính thành thứ đẹp trên ảnh chụp, mù trên màn thật. */
  --gs-primary:     #B54B1A;
  --gs-primary-h:   #9E3F14;
  --gs-primary-ink: #FFFFFF;
  --gs-primary-sub: #FDEEE4;

  /* ---- Nghĩa ---- */
  --gs-ok:    #2F6B4A;  --gs-ok-sub:   #DCEBE0;
  --gs-warn:  #8A6100;  --gs-warn-sub: #F7EEDA;
  --gs-bad:   #B3213C;  --gs-bad-sub:  #FBE3E7;

  /* ---- Hình khối ----
     Một thang bo góc, không phải năm. Bản cũ dùng lẫn 4/5/6/9/999px trong cùng
     một màn, và chính sự lẫn lộn đó — chứ không phải giá trị nào sai — làm
     trang trông như ghép từ nhiều nơi. */
  --gs-r-sm:   6px;
  --gs-r:     10px;
  --gs-r-lg:  14px;
  --gs-r-pill: 999px;

  /* ---- Chiều cao điều khiển ----
     Bản cũ: 25, 26, 28, 30px. Cao 25px là vùng bấm quá nhỏ cho chuột đã đành,
     còn không cho ô nhập chỗ thở. 32/38/44 vừa dễ trúng vừa tạo được nhịp:
     ba cỡ phân biệt rõ, không phải bốn cỡ na ná nhau. */
  --gs-h-sm: 32px;
  --gs-h:    38px;
  --gs-h-lg: 44px;

  /* ---- Khoảng cách: thang 4px, không có số lẻ ---- */
  --gs-1:  4px;  --gs-2:  8px;  --gs-3: 12px;
  --gs-4: 16px;  --gs-5: 24px;  --gs-6: 32px;

  /* ---- Độ nổi ---- */
  --gs-sh-1: 0 1px 2px rgba(23, 26, 33, .06), 0 1px 1px rgba(23, 26, 33, .04);
  --gs-sh-2: 0 2px 6px rgba(23, 26, 33, .08), 0 1px 2px rgba(23, 26, 33, .05);
  --gs-sh-3: 0 8px 24px rgba(23, 26, 33, .12), 0 2px 6px rgba(23, 26, 33, .06);

  /* ---- Nhịp chuyển ----
     Một đường cong cho tất cả. Đường này ra nhanh vào chậm, nên phản hồi cảm
     thấy tức thì mà vẫn không giật. */
  --gs-t:   140ms cubic-bezier(.2, .7, .3, 1);
  --gs-t-2: 220ms cubic-bezier(.2, .7, .3, 1);

  /* ---- Chữ ---- */
  --gs-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ===================================================================
   NÚT — MỘT component, bốn sắc thái, ba cỡ.

   Thay cho 37 định nghĩa nút rời rạc trong dashboard.css (bo góc 4/5/6/9/999px,
   cao 25/26/28/30px, cỡ chữ 11/11.5/12/12.5/16px). Đó không phải 37 lựa chọn
   thiết kế — đó là 37 lần một người cần một cái nút và viết lại từ đầu.
   =================================================================== */

.gs-btn {
  /* inline-flex chứ không phải inline-block: nút hay có icon + chữ, và chỉ
     inline-flex mới canh giữa được chúng theo chiều dọc mà không phải chỉnh
     line-height bằng tay cho từng cỡ icon. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-2);
  height: var(--gs-h);
  padding: 0 var(--gs-4);
  border: 1px solid transparent;
  border-radius: var(--gs-r-sm);
  background: var(--gs-surface);
  color: var(--gs-ink);
  font: 500 13.5px/1 var(--gs-font);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--gs-t), border-color var(--gs-t),
              box-shadow var(--gs-t), transform var(--gs-t), color var(--gs-t);
}

/* Lún xuống 1px khi bấm. Đây là thứ duy nhất trong cả bộ này thuần cảm giác —
   nhưng nó trả lời một câu hỏi thật: "máy có nhận cú bấm của tôi không?" Trước
   đây câu trả lời chỉ đến sau khi mạng phản hồi. */
.gs-btn:active:not(:disabled) { transform: translateY(1px); }

.gs-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  /* Khoá luôn hiệu ứng lún: nút mờ mà vẫn nhún là hứa một việc sẽ không xảy ra. */
  transform: none;
}

.gs-btn--primary {
  background: var(--gs-primary);
  border-color: var(--gs-primary);
  color: var(--gs-primary-ink);
  box-shadow: var(--gs-sh-1);
}
.gs-btn--primary:hover:not(:disabled) {
  background: var(--gs-primary-h);
  border-color: var(--gs-primary-h);
  box-shadow: var(--gs-sh-2);
}

/* Sắc thái "phụ": nền nhạt cùng tông, dùng cho hành động đứng cạnh nút chính.
   Viền đặc + nền nhạt đọc được rõ hơn nút chỉ-có-viền trên nền xám của trang. */
.gs-btn--sub {
  background: var(--gs-primary-sub);
  border-color: transparent;
  color: var(--gs-primary-h);
}
.gs-btn--sub:hover:not(:disabled) { background: #FAE0CE; }

.gs-btn--line {
  background: var(--gs-surface);
  border-color: var(--gs-rule);
  color: var(--gs-ink-2);
  box-shadow: var(--gs-sh-1);
}
.gs-btn--line:hover:not(:disabled) {
  border-color: var(--gs-ink-3);
  color: var(--gs-ink);
}

.gs-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--gs-ink-2);
}
.gs-btn--ghost:hover:not(:disabled) {
  background: var(--gs-surface-2);
  color: var(--gs-ink);
}

.gs-btn--bad {
  background: var(--gs-bad);
  border-color: var(--gs-bad);
  color: #fff;
  box-shadow: var(--gs-sh-1);
}
.gs-btn--bad:hover:not(:disabled) { background: #96162F; border-color: #96162F; }

.gs-btn--sm { height: var(--gs-h-sm); padding: 0 var(--gs-3); font-size: 12.5px; }
.gs-btn--lg { height: var(--gs-h-lg); padding: 0 var(--gs-5); font-size: 14.5px; }

/* Nút chỉ có icon: vuông đúng bằng chiều cao, không padding ngang. Tách riêng
   vì nút icon dùng padding của nút chữ sẽ thành hình chữ nhật dẹt. */
.gs-btn--icon { width: var(--gs-h); padding: 0; }
.gs-btn--icon.gs-btn--sm { width: var(--gs-h-sm); }
.gs-btn--icon.gs-btn--lg { width: var(--gs-h-lg); }

/* Nút trên nền trời đêm (thanh điều hướng). Không phải biến thể màu mới — chỉ
   là cùng bộ nút đọc trên nền tối. */
.gs-night .gs-btn--ghost { color: var(--gs-night-ink-2); }
.gs-night .gs-btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .10);
  color: var(--gs-night-ink);
}
.gs-night .gs-btn--line {
  background: transparent;
  border-color: var(--gs-night-3);
  color: var(--gs-night-ink);
  box-shadow: none;
}
.gs-night .gs-btn--line:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08);
  border-color: var(--gs-night-ink-2);
}

/* ===================================================================
   Ô NHẬP
   =================================================================== */

.gs-field {
  display: block;
  width: 100%;
  height: var(--gs-h);
  padding: 0 var(--gs-3);
  border: 1px solid var(--gs-rule);
  border-radius: var(--gs-r-sm);
  background: var(--gs-surface);
  color: var(--gs-ink);
  font: 400 13.5px/1 var(--gs-font);
  transition: border-color var(--gs-t), box-shadow var(--gs-t);
}
.gs-field::placeholder { color: var(--gs-ink-3); }
.gs-field:hover:not(:disabled) { border-color: var(--gs-ink-3); }

/* Viền đậm + quầng mỏng cùng màu. Quầng làm ô đang gõ nổi lên khi có mười ô
   cạnh nhau, mà chỉ đổi màu viền thì ở cỡ 1px gần như không thấy. */
.gs-field:focus {
  outline: none;
  border-color: var(--gs-primary);
  box-shadow: 0 0 0 3px var(--gs-primary-sub);
}
.gs-field:disabled { background: var(--gs-surface-2); color: var(--gs-ink-3); cursor: not-allowed; }

textarea.gs-field { height: auto; min-height: 88px; padding: var(--gs-2) var(--gs-3); line-height: 1.5; resize: vertical; }
select.gs-field { padding-right: var(--gs-5); cursor: pointer; }

.gs-field--sm { height: var(--gs-h-sm); font-size: 12.5px; }

/* Nhãn + gợi ý. Nhãn ĐỨNG TRÊN ô, không nằm bên trái: bảng biểu ở đây có ô rất
   hẹp, nhãn bên trái sẽ ép ô co lại hoặc bị cắt chữ. */
.gs-label {
  display: block;
  margin-bottom: var(--gs-1);
  color: var(--gs-ink-2);
  font: 500 12.5px/1.4 var(--gs-font);
}
.gs-hint { margin: var(--gs-1) 0 0; color: var(--gs-ink-3); font-size: 12px; }
.gs-hint--bad { color: var(--gs-bad); }

/* ===================================================================
   THẺ / KHỐI
   =================================================================== */

.gs-card {
  border: 1px solid var(--gs-rule-2);
  border-radius: var(--gs-r);
  background: var(--gs-surface);
  box-shadow: var(--gs-sh-1);
}
.gs-card-head {
  display: flex;
  align-items: center;
  gap: var(--gs-2);
  padding: var(--gs-3) var(--gs-4);
  border-bottom: 1px solid var(--gs-rule-2);
  font: 600 13.5px/1.3 var(--gs-font);
  color: var(--gs-ink);
}
.gs-card-head .gs-spacer { margin-left: auto; }
.gs-card-body { padding: var(--gs-4); }

/* ===================================================================
   CHIP, HUY HIỆU, SỐ ĐẾM
   =================================================================== */

.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-1);
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--gs-rule);
  border-radius: var(--gs-r-pill);
  background: var(--gs-surface);
  color: var(--gs-ink-2);
  font: 500 12.5px/1 var(--gs-font);
  cursor: pointer;
  transition: background var(--gs-t), border-color var(--gs-t), color var(--gs-t);
}
.gs-chip:hover { border-color: var(--gs-ink-3); color: var(--gs-ink); }
.gs-chip[aria-pressed="true"] {
  background: var(--gs-primary-sub);
  border-color: var(--gs-primary);
  color: var(--gs-primary-h);
}

.gs-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--gs-r-pill);
  background: var(--gs-surface-2);
  color: var(--gs-ink-2);
  font: 600 11.5px/1 var(--gs-font);
  font-variant-numeric: tabular-nums;
}
.gs-badge--ok   { background: var(--gs-ok-sub);   color: var(--gs-ok); }
.gs-badge--warn { background: var(--gs-warn-sub); color: var(--gs-warn); }
.gs-badge--bad  { background: var(--gs-bad-sub);  color: var(--gs-bad); }
.gs-badge--pri  { background: var(--gs-primary-sub); color: var(--gs-primary-h); }

/* ===================================================================
   TAB — một dải, con trượt chạy dưới mục đang mở
   =================================================================== */

.gs-tabs {
  display: inline-flex;
  gap: var(--gs-1);
  padding: 3px;
  border-radius: var(--gs-r-sm);
  background: var(--gs-surface-2);
}
.gs-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-2);
  height: var(--gs-h-sm);
  padding: 0 var(--gs-3);
  border: 0;
  border-radius: var(--gs-r-sm);
  background: transparent;
  color: var(--gs-ink-2);
  font: 500 13px/1 var(--gs-font);
  cursor: pointer;
  transition: background var(--gs-t), color var(--gs-t), box-shadow var(--gs-t);
}
.gs-tab:hover { color: var(--gs-ink); }
.gs-tab[aria-selected="true"] {
  background: var(--gs-surface);
  color: var(--gs-ink);
  box-shadow: var(--gs-sh-1);
}

/* ===================================================================
   CÔNG TẮC
   =================================================================== */

.gs-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  flex: none;
  border: 0;
  padding: 0;
  border-radius: var(--gs-r-pill);
  background: var(--gs-rule);
  cursor: pointer;
  transition: background var(--gs-t);
}
.gs-switch::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--gs-sh-1);
  transition: transform var(--gs-t);
}
.gs-switch[aria-checked="true"] { background: var(--gs-primary); }
.gs-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* ===================================================================
   CHỜ — ba trạng thái cho ba tình huống khác nhau.

   Bản cũ chỉ có đúng một cách nói "đang chờ": không nói gì cả. Bảng việc trống
   trong lúc tải nhìn y hệt bảng việc rỗng vì hôm nay không có việc — hai nghĩa
   trái ngược, cùng một hình.
   =================================================================== */

/* 1. KHUNG XƯƠNG — dùng khi ĐÃ BIẾT hình dạng thứ sắp hiện ra. Giữ nguyên bố
      cục nên nội dung ập vào không làm trang nhảy. */
.gs-skel {
  border-radius: var(--gs-r-sm);
  background:
    linear-gradient(90deg, var(--gs-surface-2) 25%, #E6E7E4 37%, var(--gs-surface-2) 63%)
    0 0 / 400% 100%;
  animation: gs-skel 1.4s ease-in-out infinite;
}
.gs-skel--line { height: 12px; }
.gs-skel--title { height: 18px; width: 45%; }
.gs-skel--pill { height: 26px; width: 84px; border-radius: var(--gs-r-pill); }
@keyframes gs-skel { to { background-position: -400% 0; } }

/* 2. VÒNG XOAY — dùng khi CHƯA biết hình dạng, hoặc chờ ngay trong một nút.
      `currentColor` để nó tự hợp màu với chỗ được đặt vào, không phải khai
      thêm một biến thể cho mỗi nền. */
.gs-spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .9;
  animation: gs-spin .7s linear infinite;
}
.gs-spin--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes gs-spin { to { transform: rotate(360deg); } }

/* 3. THANH TIẾN TRÌNH — dùng khi có SỐ thật để nói. */
.gs-bar {
  height: 8px;
  border-radius: var(--gs-r-pill);
  background: var(--gs-surface-2);
  overflow: hidden;
}
.gs-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gs-primary);
  transition: width var(--gs-t-2);
}
.gs-bar--ok > i { background: var(--gs-ok); }

/* Nút đang chạy: khoá bấm, thay chữ bằng vòng xoay, GIỮ NGUYÊN chiều rộng.
   Nút co lại giữa chừng làm mọi thứ bên cạnh nhảy chỗ, và người dùng vừa bấm
   xong thì con trỏ đang ở đúng chỗ vừa nhảy đi. */
.gs-btn[data-dang-chay] { pointer-events: none; }
.gs-btn[data-dang-chay] > :not(.gs-spin) { visibility: hidden; }
.gs-btn[data-dang-chay] > .gs-spin { position: absolute; }
.gs-btn { position: relative; }

/* ===================================================================
   MÀN TRỐNG
   =================================================================== */

.gs-empty {
  display: grid;
  place-items: center;
  gap: var(--gs-2);
  padding: var(--gs-6) var(--gs-4);
  text-align: center;
  color: var(--gs-ink-3);
}
.gs-empty b { color: var(--gs-ink-2); font-size: 13.5px; }
.gs-empty p { margin: 0; font-size: 12.5px; max-width: 42ch; }

/* ===================================================================
   MẶT TỐI — thanh điều hướng, chân trang
   =================================================================== */

.gs-night {
  background: var(--gs-night);
  color: var(--gs-night-ink);
}
.gs-night a { color: var(--gs-night-ink-2); text-decoration: none; }
.gs-night a:hover { color: var(--gs-night-ink); }

/* ===================================================================
   VÒNG FOCUS BÀN PHÍM
   Một quy tắc cho cả bộ. Cam trên nền sáng, trắng trên nền đêm.
   =================================================================== */

:is(.gs-btn, .gs-chip, .gs-tab, .gs-switch, .gs-field, a):focus-visible {
  outline: 2px solid var(--gs-primary);
  outline-offset: 2px;
}
.gs-night :is(.gs-btn, .gs-chip, .gs-tab, a):focus-visible {
  outline-color: #fff;
}

/* ===================================================================
   prefers-reduced-motion
   Ba hoạt ảnh trên dừng hẳn. Vòng xoay KHÔNG dừng — nó là thông tin, không
   phải trang trí; đứng im thì nó nói sai rằng mọi thứ đã treo. Chỉ quay chậm
   lại để bớt gây mệt.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gs-skel { animation: none; background: var(--gs-surface-2); }
  .gs-btn, .gs-chip, .gs-tab, .gs-switch, .gs-switch::after, .gs-field, .gs-bar > i {
    transition: none;
  }
  .gs-btn:active:not(:disabled) { transform: none; }
  .gs-spin { animation-duration: 1.6s; }
}