/* ============================================================
   CSS riêng của ứng dụng. Phần nền tảng do template Sneat lo
   (vendor/css/core.css, css/demo.css, vendor/css/pages/app-kanban.css).
   ============================================================ */

h1:focus {
  outline: none;
}

/* ---------- Xác nhận dữ liệu ---------- */

.valid.modified:not([type='checkbox']) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
  font-size: 0.8125rem;
}

.blazor-error-boundary {
  background: #b32121;
  padding: 1rem;
  color: white;
  border-radius: 0.375rem;
}

.blazor-error-boundary::after {
  content: 'Đã xảy ra lỗi.';
}

/* ---------- Logo trong menu và trang đăng nhập ---------- */

.menu-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: var(--bs-primary);
  color: #fff;
  font-size: 1.25rem;
}

/* ---------- Bảng kanban ---------- */

/* app-kanban.css ép .kanban-wrapper một chiều cao cố định (100vh trừ đi phần
   header) kèm overflow-y: auto, nên hễ thẻ nào dài là bảng tự sinh thêm thanh
   cuộn dọc riêng bên trong - thừa, vì thanh cuộn chính của trang đã đủ dùng.
   Bỏ giới hạn chiều cao để .kanban-wrapper cao theo đúng nội dung, còn cuộn
   ngang (nhiều cột) vẫn giữ nguyên qua overflow-x: auto của file gốc. */
.app-kanban .kanban-wrapper {
  block-size: auto;
  overflow-y: visible;
}

@media (min-width: 1200px) {
  .layout-horizontal .app-kanban .kanban-wrapper {
    block-size: auto;
  }
}

/* Tay cầm kéo thẻ: vùng chạm đủ lớn cho ngón tay, và chỉ vùng này bắt sự kiện
   kéo nên cuộn dọc bằng cảm ứng ở phần còn lại của thẻ vẫn hoạt động. */
.kanban-drag-handle {
  cursor: grab;
  padding: 0.375rem;
  margin: -0.375rem;
  border-radius: 0.25rem;
  color: var(--bs-secondary-color);
  touch-action: none;
}

.kanban-drag-handle:hover {
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-primary);
}

.kanban-drag-handle:active {
  cursor: grabbing;
}

.kanban-item {
  cursor: pointer;
}

/* Dấu bình luận: mở thẳng tab Trao đổi nên cần trông như một nút bấm riêng,
   phân biệt với phần còn lại của thẻ (mở tab Thông tin). */
.kanban-comment-badge {
  padding: 0.125rem 0.375rem;
  margin: -0.125rem -0.375rem;
  border-radius: 0.25rem;
}

.kanban-comment-badge:hover,
.kanban-file-badge:hover {
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-primary) !important;
}

.kanban-file-badge {
  padding: 0.125rem 0.375rem;
  margin: -0.125rem 0.125rem -0.125rem -0.375rem;
  border-radius: 0.25rem;
}

/* Mô tả rút gọn: giữ một dòng để thẻ không cao lên theo độ dài nội dung. */
.kanban-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thẻ được mở từ liên kết thông báo (?task=...) */
.kanban-item-highlight {
  box-shadow: 0 0 0 2px var(--bs-primary) !important;
  transition: box-shadow 0.2s ease-in-out;
}

/* Header cột giờ tô nền theo màu cột (class bg-label-* gắn qua kanban-board.js).
   Header nằm sát mép trên của .kanban-board nên chỉ cần bo góc trùng bán kính
   của board là góc trông liền mạch, không cần overflow: hidden (sẽ cắt mất
   menu dropdown "⋮" của cột mỗi khi mở). */
.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-board-header {
  border-start-start-radius: 0.575rem;
  border-start-end-radius: 0.575rem;
}

/* jKanban gói toàn bộ tiêu đề cột vào .kanban-title-board, mà app-kanban.css lại
   giới hạn phần tử này ở max-inline-size 13rem và jkanban.css đặt display:inline.
   Hệ quả: hàng tiêu đề không dàn hết chiều rộng cột nên số lượng thẻ và nút ⋮
   bị dồn về bên trái. Cho nó chiếm hết chỗ để layout flex bên trong hoạt động. */
.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-board-header .kanban-title-board {
  display: block;
  flex: 1 1 auto;
  max-inline-size: none;
  min-inline-size: 0;
  overflow: visible;
}

/* Vùng thả của một cột rỗng chỉ cao 1rem (app-kanban.css đặt min-block-size: 1rem)
   nên gần như không thả được thẻ vào, nhất là bằng ngón tay. Ghi đè bằng chuỗi
   selector cùng độ ưu tiên với quy tắc gốc.
   min-inline-size nâng lên 18rem cho khớp widthBoard '288px' truyền vào jKanban
   (chiều rộng cột do vùng thả quyết định, vì .kanban-board là inline-size:auto). */
.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-drag {
  min-block-size: 5rem;
  min-inline-size: 18rem;
}

/* Thẻ bị đặt inline-size: 16.25rem cứng nên không giãn theo chiều rộng cột -
   thừa một khoảng trống bên phải khi cột rộng hơn 260px (rõ nhất trên điện thoại
   vì cột chiếm 86vw). Cho thẻ tự giãn kín vùng thả. */
.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-item {
  inline-size: auto;
}

/* ---------- Bảng ít cột: giãn chia đều chỗ còn trống (desktop) ----------
   Mặc định app-kanban.css đặt container là max-content và cột là auto, nên bảng
   chỉ 2-3 cột sẽ chừa một khoảng trống lớn bên phải. Với class board-flex do
   Board.razor gắn khi có ≤3 cột, cột trở thành flex item chia đều chiều rộng.
   max-inline-size chặn trên để thẻ không bị loãng trên màn siêu rộng, còn
   min-inline-size của vùng thả là sàn: màn hẹp thì cuộn ngang chứ không bóp thẻ. */
@media (min-width: 992px) {
  .app-kanban.board-flex .kanban-wrapper .kanban-container {
    inline-size: 100% !important;
  }

  .app-kanban.board-flex .kanban-wrapper .kanban-container .kanban-board {
    flex: 1 1 0;
    max-inline-size: 30rem;
  }

  .app-kanban.board-flex .kanban-wrapper .kanban-container .kanban-board .kanban-drag {
    min-inline-size: 15rem;
  }

  /* 3 cột: 340px như yêu cầu, rộng hơn mức 288px mặc định nhưng vẫn gọn. */
  .app-kanban.board-cols-3 .kanban-wrapper .kanban-container .kanban-board {
    max-inline-size: 21.25rem;
  }
}

.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-drag:empty {
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.375rem;
  margin: 0.575rem;
}

.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-drag:empty::after {
  content: 'Thả nhiệm vụ vào đây';
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 5rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);  
}

/* Cột đang là đích thả hợp lệ */
.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-drag.gu-over {
  background: var(--bs-primary-bg-subtle);
  border-radius: 0.375rem;
  border-style: solid;
}

/* Nút "+ Thêm nhiệm vụ" gốc là position:absolute với margin-block:-1.5rem nên luôn
   chồm lên vùng ngay dưới khung thả. Đưa về dòng chảy bình thường để nó nằm gọn
   bên dưới và có khoảng cách rõ ràng. */
.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-title-button {
  position: static;
  inset: auto;
  display: block;
  margin-block: 0;
  margin-inline: 0;
  padding-inline: 0.475rem;
  text-align: start;
}

/* Cột "hoàn thành" và thẻ quá hạn dễ nhận ra hơn */
.kanban-item .text-danger .bx-calendar {
  color: inherit;
}

/* Trên điện thoại: cột hẹp lại và cuộn ngang - cách dùng kanban quen thuộc.
   jKanban đặt chiều rộng cột bằng style inline nên cần !important, và app-kanban.css
   đặt min-inline-size 16.25rem cho vùng thả nên phải nới ra theo. */
@media (max-width: 575.98px) {
  .kanban-wrapper .kanban-board {
    width: 86vw !important;
    min-width: 86vw !important;
  }

  .app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-drag {
    min-inline-size: auto;
  }

  /* Vùng chạm của tay cầm phải đủ lớn cho ngón tay (khuyến nghị ~44px). */
  .kanban-drag-handle {
    padding: 0.75rem;
    margin: -0.625rem -0.5rem -0.625rem 0;
    font-size: 1.25rem;
  }
}

.kanban-wrapper {
  padding-bottom: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Tiện ích nhỏ ---------- */

.min-w-0 {
  min-width: 0;
}

.cursor-pointer {
  cursor: pointer;
}

/* Ô chọn người thực hiện trong bảng bên */
label.cursor-pointer:hover {
  background: var(--bs-secondary-bg-subtle);
}