/* =====================================================================
   Bố cục KHÔNG cuộn trang: khung ứng dụng cố định đúng chiều cao màn hình.
   Chỉ bảng / khung nội dung bên trong được cuộn (thead dính trên cùng).
   Màn hình nhỏ (điện thoại, cửa sổ thấp) quay về cuộn trang bình thường.
   ===================================================================== */
@media (min-width: 821px) and (min-height: 621px) {
  html, body { height: 100%; overflow: hidden; }
  #app { height: 100vh; min-height: 0; }
  .sidebar { height: 100vh; }
  .main { height: 100vh; min-height: 0; overflow: hidden; }
  #view { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 24px 16px; }
  #view > * { flex: 0 0 auto; }
  #view > .page-head { margin-bottom: 12px; }
  #view > .tiles, #view > .toolbar-card, #view > .filter-card, #view > .filter-bar, #view > .metrics, #view > .bulk-bar { margin-bottom: 12px; }

  /* Phần tử cuối cùng của trang chiếm toàn bộ chiều cao còn lại */
  #view > :last-child, .fill { flex: 1 1 auto; min-height: 0; margin-bottom: 0 !important; }
  #view > .grid:last-child { align-content: start; align-items: start; overflow: auto; }
  #view > .card:last-child:not(.table-card):not(.scroll-card), #view > form.card:last-child { overflow: auto; }
  #view > .empty:last-child, #view > .loading:last-child { overflow: auto; }

  /* Card có bảng: tiêu đề + bảng cuộn + chân bảng cố định */
  .table-card, .scroll-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin-bottom: 0; }
  .table-card > .table-wrap, .scroll-card > .sc-body, .scroll-card > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .scroll-card > .mw-head, .scroll-card > .tab-pills, .scroll-card > .dp-tabs, .table-card > .tfoot, .scroll-card > .tfoot, .scroll-card > .sc-foot { flex: 0 0 auto; }
  .scroll-card > .sc-body { padding: 0 18px 14px; }
  .scroll-card > .sc-body.flush { padding: 0; }
  #view > .table-wrap:last-child { overflow: auto; }

  /* Tiêu đề bảng dính khi cuộn trong bảng */
  .table-wrap thead th, .sc-body thead th { position: sticky; top: 0; z-index: 2; }
  .tbl th { background: var(--surface-2); }
  .tbl-lg th { background: color-mix(in srgb, var(--brand-soft) 65%, var(--surface)); }

  /* Lưới card lấp đầy chiều cao còn lại – mỗi card cuộn bên trong */
  .fill-grid { display: grid; gap: 14px; min-height: 0; }
  .fill-grid > * { min-height: 0; margin: 0 !important; }
  .fill-grid.g-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .fill-grid.g-dash > .span2 { grid-column: span 2; }
  .fill-grid.g-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .fill-grid.g-2r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .fill-grid.g-2r > .span2 { grid-column: span 2; }
  .fill-grid.g-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .fill-grid.g-issues { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .fill-grid.g-issues > .span3 { grid-column: span 3; }
  .fill-grid.g-work { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }

  /* Donut trong card thấp: thu nhỏ, chú thích cuộn được */
  .scroll-card .mw-donut-wrap { padding: 4px 0; gap: 16px; }
  .scroll-card .mw-donut { width: 140px !important; height: 140px !important; }
  .scroll-card .mw-legend li { padding: 5px 0; font-size: 13px; }
  .scroll-card .mw-cols { max-height: 100%; }

  /* KPI gọn một hàng */
  .tiles.compact { gap: 10px; }
  .tiles.compact .stat-tile { padding: 10px 12px; gap: 10px; border-radius: 12px; }
  .tiles.compact .st-ic { width: 40px; height: 40px; border-radius: 10px; }
  .tiles.compact .st-ic .i { width: 22px; height: 22px; }
  .tiles.compact .st-body b { font-size: 13px; line-height: 1.25; }
  .tiles.compact .st-body strong { font-size: 22px; }
  .tiles.compact .st-body small { font-size: 11.5px; line-height: 1.3; }
  .tiles-6.compact { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .metrics { margin-top: 0; }

  /* Kanban: bảng ngang lấp đầy; mỗi cột cuộn bên trong */
  #view > .board { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; align-items: stretch; }
  .board .col { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
  .board .col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .board .col.collapsed { min-height: 0; }

  /* Danh sách dự án: chỉ 1 hàng thẻ dự án, bảng lấp phần còn lại */
  #view > .proj-cards { grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; row-gap: 0; margin-bottom: 12px; }
  #view > .list-layout { align-items: stretch; }
  .list-layout > * { min-height: 0; margin: 0 !important; }
  .list-layout > .side-col { overflow: auto; }

  /* Giao việc */
  #view > .assign-layout { align-items: stretch; }
  .assign-layout > * { min-height: 0; margin: 0 !important; }
  .assign-layout > .quick-form { position: static; overflow: auto; }
  #given { display: flex; flex-direction: column; overflow: hidden; }
  #given > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
  #given > .mw-head, #given > .tab-pills { flex: 0 0 auto; }

  /* Chi tiết Task: tab nội dung & cột thông tin cuộn riêng */
  #view > .task-hero { margin-bottom: 12px; padding: 14px 20px; }
  #view > .task-hero .th-title { margin: 4px 0 8px; font-size: 20px; }
  #view > .task-hero .th-actions { margin-top: 10px; padding-top: 10px; }
  #view > .task-layout { margin-top: 0; align-items: stretch; }
  .task-layout > * { min-height: 0; }
  .task-tabs { display: flex; flex-direction: column; overflow: hidden; margin: 0; }
  .task-tabs > .dp-tabs { flex: 0 0 auto; }
  .task-tabs > #tab-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .task-side { position: static; overflow: auto; margin: 0; }

  /* Chi tiết dự án: phần tab lấp đầy */
  #view > .proj-hero { margin-bottom: 0; padding: 12px 18px; }
  #view > .big-tabs2 { margin: 10px 0; }
  #ptab { display: flex; flex-direction: column; min-height: 0; }
  #ptab > * { flex: 0 0 auto; }
  #ptab > :last-child { flex: 1 1 auto; min-height: 0; margin-bottom: 0 !important; }
  #ptab > .tiles { margin-bottom: 12px; }
  #ptab > .toolbar-card { margin-bottom: 12px; }

  /* Công việc của tôi: danh sách việc cuộn trong card */
  .scroll-card .mw-row2 { padding-left: 0; padding-right: 0; }
}

@media (min-width: 821px) and (min-height: 621px) {
  .scroll-card > .sc-body, .scroll-card > .table-wrap, .scroll-card > .sc-foot { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
  .scroll-card > .sc-body.flush .tbl { margin: 0; }
}

@media (min-width: 821px) and (min-height: 621px) {
  /* Donut trong card hẹp: không tràn ngang */
  .scroll-card .mw-donut-wrap { min-width: 0; gap: 12px; }
  .scroll-card .mw-donut-wrap:not(.stack) .mw-donut { width: 120px !important; height: 120px !important; }
  .scroll-card .mw-legend { min-width: 0; border: 0; padding: 0; }
  .scroll-card .mw-legend li { gap: 6px; }
  .scroll-card .mw-legend span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .scroll-card .mw-legend b { font-size: 12.5px; }
  .scroll-card .mw-legend b .muted { display: none; }
  /* Tiến độ dự án: tên một dòng, thanh tiến độ + nhãn dòng dưới */
  .scroll-card .pp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "bar meta"; row-gap: 4px; }
  .scroll-card .pp-name { grid-area: name; }
  .scroll-card .pp-bar { grid-area: bar; }
  .scroll-card .pp-meta { grid-area: meta; }
  .list-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* Task quá hạn trong "Công việc của tôi": cả khối nền đỏ nhạt, mã + tên Task chữ đỏ (không dùng vạch lẻ bên trái) */
.mw-row2.is-overdue, .scroll-card .mw-row2.is-overdue { padding: 12px 12px; margin: 6px 0; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; box-shadow: none; }
.mw-row2.is-overdue .code, .mw-row2.is-overdue .w-title { color: #DC2626; }
.mw-row2.is-overdue .w-title { font-weight: 600; }
.mw-row2.is-overdue small.muted { color: #B91C1C; opacity: .8; }
:root[data-theme="dark"] .mw-row2.is-overdue { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }