body { background: #f7f7fb; }
.card { border-radius: 14px; }
.navbar .navbar-brand { font-size: 1.2rem; }
.table td, .table th { vertical-align: middle; }
.progress { height: 22px; }
/* Loại bỏ ellipsis chung cho table cell */
.table td, .table th {
  vertical-align: middle;
  white-space: normal;   /* cho phép xuống dòng */
  overflow: visible;
  text-overflow: unset;
}

.table td span.badge {
  max-width: 80px;  /* Giới hạn badge */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.table td form, .table td a.btn {
  flex-shrink: 0;   /* Không co lại nút */
}

td div.d-flex.gap-1 {
  justify-content: center; /* canh giữa nút thao tác */
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.85rem;
  border-radius: 6px;
}
.btn-save-subtask {
  background-color: #28a745;
  border: none;
}
.btn-save-subtask:hover {
  background-color: #218838;
}
.btn-delete-subtask {
  border: 1px solid #dc3545;
  color: #dc3545;
}
.btn-delete-subtask:hover {
  background-color: #dc3545;
  color: #fff;
}

/* ===== Subtask Action Buttons ===== */

.subtask-title-text {
  display: block;
  white-space: normal;    /* Cho phép xuống dòng */
  word-break: break-word; /* Ngắt từ khi dài quá */
  font-size: 0.95rem;
  font-weight: 500;
}

.subtask-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.subtask-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.subtask-actions .btn-success {
  background-color: #28a745;
  border: none;
}
.subtask-actions .btn-success:hover {
  background-color: #218838;
}

.subtask-actions .btn-delete-subtask {
  background-color: #fff;
  color: #dc3545;
  border: 1px solid #dc3545;
}
.subtask-actions .btn-delete-subtask:hover {
  background-color: #dc3545;
  color: #fff;
}

.subtask-actions select.form-select-sm {
  min-width: 130px;
  font-size: 0.85rem;
  border-radius: 6px;
  padding: 2px 6px;
}
.subtask-actions select {
  min-width: 120px;
}

/* Icon style */
.subtask-actions .btn i {
  font-size: 15px;
}

/* Đảm bảo khung subtask gọn gàng */
.list-group-item {
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #e0e0e0;
}
/* ===== Subtask Card ===== */
.subtask-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
}

.subtask-header textarea {
  font-size: 0.95rem;
  min-height: 36px;
  resize: none;
}

.subtask-body textarea {
  font-size: 0.9rem;
  min-height: 50px;
}

.avatar-sm img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
}

.subtask-header .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  flex: 1;  /* cho title block chiếm hết phần header */
}
.subtask-header .title textarea.auto-resize {
  flex-grow: 1;
  width: 100% !important;   /* chiếm toàn bộ chiều ngang */
  max-width: 100%;          /* không bị giới hạn */
  resize: none;             /* tắt resize kéo chuột */
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 6px;
  min-height: 40px;
  white-space: normal;      /* cho phép xuống dòng */
  word-break: break-word;   /* ngắt từ nếu quá dài */
}


.subtask-header small {
  color: #6c757d;
  font-size: 0.85rem;
}

/* ===== Action Buttons ===== */

.subtask-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 6px;
  font-weight: 500;
  transition: 0.2s;
}

.subtask-actions .btn-success {
  background-color: #28a745;
  color: #fff;
  border: none;
}
.subtask-actions .btn-success:hover {
  background-color: #218838;
}

.subtask-actions .btn-delete-subtask {
  border: 1px solid #dc3545;
  color: #dc3545;
  background: #fff;
}
.subtask-actions .btn-delete-subtask:hover {
  background-color: #dc3545;
  color: #fff;
}

/* ===== Body (note, upload, gallery) ===== */
.subtask-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subtask-body label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
}

/* ===== Subtask trạng thái ===== */

/* Pending: giữ mặc định */
.subtask-pending {
  border: 1px solid #e0e0e0;
}

/* Doing: viền xanh dương + chớp nháy */
.subtask-doing {
  border: 2px solid #007bff;
  box-shadow: 0 0 8px rgba(0,123,255,0.6);
  animation: pulse-blue 1.5s infinite;
}

@keyframes pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(0,123,255,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(0,123,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,123,255,0); }
}

/* Done: viền xanh lá */
.subtask-done {
  border: 2px solid #28a745;
  box-shadow: 0 0 6px rgba(40,167,69,0.6);
}


/* Avatar nhỏ cho user của subtask */
.avatar-sm {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border: 1px solid #ddd;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}



.thumbs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thumb-img,
.thumb-video {
  width: 90px;
  height: 90px;
  border-radius: 6px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-video {
  background: #000;
  color: #fff;
  font-size: 28px;
}

/* Task title: cho phép xuống dòng */
.task-title {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  display: block;
}

/* Người thực hiện: hiển thị wrap gọn gàng */
.worker-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}

.worker-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.85rem;
  background: #f0f9ff;
}

/* ===== Hiệu ứng công việc đang làm ===== */
.in-progress {
  border: 2px solid #28a745;
  border-radius: 10px;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.card {
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ĐANG LÀM: viền xanh lá + chớp xanh lá */
tr.in-progress,
.card.in-progress {
  border: 2px solid #28a745 !important;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(40,167,69,.65);
  animation: pulse-green 1.5s infinite;
}

/* QUÁ HẠN + ĐANG LÀM: nền đỏ (giữ), chớp xanh lá */
tr.table-danger.in-progress,
.card.table-danger.in-progress {
  background-color: #fff0f0;             /* nền đỏ nhạt như hiện tại */
  border-color: #28a745 !important;      /* viền xanh lá */
  box-shadow: 0 0 6px rgba(40,167,69,.65);
  animation: pulse-green 1.5s infinite;  /* chớp xanh lá */
}


/* Hiệu ứng chớp nhẹ để dễ nhìn trên mobile */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(40,167,69, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(40,167,69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40,167,69, 0); }
}
/* Task quá hạn */
tr.table-danger, .card.table-danger {
  border: 2px solid #dc3545;
  border-radius: 10px;
  background-color: #ffe6e6; /* nền đỏ nhạt */
}
/* Card task trên mobile gọn hơn */
.card .card-body {
  padding: 8px 10px;
}
.card .card-body .mb-1,
.card .card-body .mt-2 {
  margin-bottom: 4px !important;
  margin-top: 4px !important;
}
.dropdown-menu {
  font-size: 0.95rem;
}
.dropdown-item {
  padding: 8px 14px;
  border-radius: 6px;
  transition: background 0.2s;
}
.dropdown-item:hover {
  background-color: #f0f9ff;
}
/* Task quá hạn: viền đỏ dịu + nền nhạt */
tr.table-danger, .card.table-danger {
  border: 1px solid #f5c6cb;
  border-radius: 10px;
  background-color: #fff0f0;
}



.worker-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf4ff;
  color: #007bff;
  font-weight: 600;
}
.worker-avatar-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}


.card .card-body {
  padding: 8px 10px;
}
.task-title { font-size: 0.95rem; }
/* Modal trên mobile hiển thị đẹp */
/* Modal căn giữa màn hình */
.modal-dialog {
  max-width: 90%;
  margin: auto;
}

.modal-content {
  border-radius: 12px;
  text-align: center;
}

.modal-content img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

/* Avatar trong popup modal */
.avatar-popup {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;   /* đã có */
  display: block;      /* thêm: đảm bảo căn giữa nhất quán */
  margin: 0 auto;      /* đã có dưới dạng "margin: auto" – giữ nguyên */
}

/* Backdrop nhẹ hơn một chút (đỡ "đen sì") */
.modal-backdrop.show { opacity: .25; }


/* Desktop: modal gọn lại ~420px */
@media (min-width: 992px) {
  .modal-dialog { max-width: 420px; }
}
/* ===== Offline Banner ===== */
.offline-banner {
  position: sticky;   /* bám trên cùng khi scroll */
  top: 0;
  z-index: 2000;      /* nằm trên navbar */
  background: #ffc107;
  color: #000;
  padding: 10px;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.dropdown-item button,
.dropdown-item {
  font-size: 15px;
}



/* avatar nhỏ trong navbar */
.navbar .user-small-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  margin-right:8px;
}

textarea.auto-resize {
  min-height: 70px;   /* cao ~3 dòng mặc định */
  line-height: 1.5;
}



.subtask-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Avatar trong subtask: hiển thị liền nhau */
.subtask-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;   /* khoảng cách nhỏ gọn, đều */
}
.subtask-avatars .avatar-btn {
  margin: 0;        /* xoá margin mặc định */
  padding: 0;       /* không thêm khoảng trống */
  line-height: 0;   /* tránh đẩy button giãn */
}

.avatar-btn {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.avatar-btn .avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ccc;
}

.avatar-btn .remove-x {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #dc3545;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  display: none;
}

.avatar-btn:hover .remove-x {
  display: block;
}




.subtask-actions .btn {
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 6px;
}

.subtask-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thumbs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thumb-img, .thumb-video {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-video {
  background: #000;
  color: #fff;
  font-size: 22px;
}

/* Form chỉnh đẹp hơn */
.card-body form .form-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.card-body form .form-control,
.card-body form .form-select {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1px solid #ced4da;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-body form .form-control:focus,
.card-body form .form-select:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.card-body form .row .col {
  margin-bottom: 15px;
}

/* Nút cập nhật full chiều ngang đẹp */
.btn-primary.btn-lg.w-100 {
  border-radius: 8px;
  font-size: 1rem;
  padding: 12px;
  font-weight: 600;
}


/* Avatar trang user detail */
.avatar-profile {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin: 0 auto;
  display: block;
}
/* Thống kê user detail */
.user-stats p {
  margin: 4px 0;
  font-size: 0.95rem;
}

/* ==== User detail – compact, clean ==== */
.profile-card { border-radius: 14px; }
.stat-card{
  background: #fff; border-radius: 12px; padding: 14px 16px;
  border: 1px solid #e9ecef;
}
.stat-title{ font-size: .9rem; color:#6c757d; }
.stat-value{ font-size: 1.4rem; font-weight: 700; }
.stat-note{ font-size: .8rem; color:#6c757d; }

.tasks-section .progress{ height: 22px; }
.tasks-section .progress-bar{ font-weight: 600; }

/* Mobile spacing */
@media (max-width: 576px){
  .profile-card .avatar-profile{ width:120px;height:120px; }
  .stat-card{ padding: 12px; }
}


/* Card công việc */
/* Card công việc trên mobile */
.task-card {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  transition: box-shadow .2s;
}
.task-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.task-card .task-title a {
  font-weight: 600;
  color: #333;
  text-decoration: none;
}
.task-card .task-title a:hover {
  color: #007bff;
}


/* ===== User detail table fix ===== */
.tasks-section table {
  table-layout: fixed;       /* đồng bộ cột */
  width: 100%;
}
.tasks-section td,
.tasks-section th {
  white-space: nowrap;       /* không cho xuống dòng lung tung */
  text-overflow: ellipsis;   /* hiển thị ... khi quá dài */
  overflow: hidden;
  vertical-align: middle;
}

.tasks-section td a {
  display: inline-block;
  max-width: 250px;          /* giới hạn chiều ngang cho link tiêu đề */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-section .progress-bar {
  font-weight: bold;
}

/* Đồng bộ chiều cao các card công việc trong cùng 1 row */
.tasks-section .card.task-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tasks-section .card.task-card .card-body {
  flex-grow: 1;
}

/* ==== User list (users table) ==== */
.table-users td, .table-users th {
  vertical-align: middle;
  white-space: normal;     /* cho phép xuống dòng trên mobile */
  word-break: break-word;
}

.table-users .phones-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.table-users .phones-badges .badge{
  border-radius:16px;
  font-weight:500;
  padding:4px 8px;
}

/* Nút 3 chấm nhỏ gọn */
.table-users .btn.btn-outline-secondary.btn-sm{
  border-radius:8px;
}

/* Mobile: ẩn cột phụ để gọn */
@media (max-width: 576px){
  .table-users th:nth-child(2), .table-users td:nth-child(2),  /* Tên đăng nhập */
  .table-users th:nth-child(6), .table-users td:nth-child(6)   /* Trạng thái */
  { display:none; }
}


/* Badge rõ ràng hơn cho vai trò & trạng thái */
.badge.text-bg-danger-subtle {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.badge.text-bg-primary-subtle {
  background-color: #0d6efd !important;
  color: #fff !important;
}

.badge.text-bg-info-subtle {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

.badge.text-bg-success-subtle {
  background-color: #198754 !important;
  color: #fff !important;
}
/* Đồng bộ chiều cao card công việc */
.tasks-section .task-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  transition: box-shadow .2s;
}
.tasks-section .task-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tasks-section .task-card .card-body {
  flex-grow: 1;
}
.tasks-section .task-title a {
  font-weight: 600;
  color: #333;
  text-decoration: none;
}
.tasks-section .task-title a:hover {
  color: #0d6efd;
}

/* == Pulse xanh lá cho task đang làm == */
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(40,167,69,.65); }
  70%  { box-shadow: 0 0 0 12px rgba(40,167,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}


.modal-body ul { padding-left: 0; }
.modal-body li { border-bottom: 1px solid #eee; padding-bottom: 6px; }
.modal-body li:last-child { border-bottom: none; }

/* Modal to giữa kiểu “profile card” */
.user-modal-card{
  border-radius: 16px;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Avatar trong modal popup: canh giữa */
.avatar-xl {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);

  display: block;      /* ép thành block */
  margin: 0 auto 12px; /* canh giữa + cách dưới 12px */
}

/* Dòng số điện thoại */
#uimPhones li{
  padding: .5rem .75rem;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem;
  justify-content: space-between;
  align-items: center;
}
#uimPhones .phone-text{ font-weight: 500; padding-left: 0;
  margin: 0 auto;
  max-width: 300px;  /* giới hạn chiều ngang để cân đối */}
#uimPhones .badge-zalo{ background:#25a1f0; }   /* nếu bạn thích màu Zalo */


/*Toast edit_task.html*/
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-msg {
  min-width: 70px;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #28a745;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.2s forwards;
}

.toast-msg.error {
  background: #dc3545;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(100%); }
}

.attendance-logs {
  display: flex;
  flex-direction: column;  /* mỗi log một dòng */
  align-items: flex-start; /* căn trái */
  gap: 2px;
  line-height: 1.2;
}
.attendance-logs .badge {
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 6px;
}

.attendance-table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.8rem;   /* chữ nhỏ hơn cho mobile */
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.attendance-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
@media (max-width: 768px) {
  .attendance-table {
    font-size: 0.8rem;   /* chữ nhỏ lại cho vừa màn hình */
  }
  .attendance-table th,
  .attendance-table td {
    white-space: nowrap; /* tránh chữ xuống dòng lung tung */
  }
}
/* Gợi ý địa điểm: neo ngay dưới input, rộng bằng input */
#placeDropdown{
  display:none;
  position:absolute;
  left:0;
  right:0;                 /* = width:100% của khối position-relative */
  top: calc(100% + .25rem);/* ngay dưới input 4px */
  max-height:220px;
  overflow-y:auto;
  z-index:1050;            /* nằm trên card */
}
#placeDropdown.show{ display:block; }
/* Nút thêm lịch trình luôn nổi ở góc dưới phải */
#addBtnFloating {
  width: 60px;
  height: 60px;
  font-size: 28px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}


#tbl-payroll td.text-end,
#tbl-payroll th {
    width: 100px;
    white-space: nowrap;
}

/* Cột HỌ TÊN dính ngang, nhưng luôn dưới header */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;   /* thấp hơn header */
  background: #fff;
}

.bg-base { background: #f7f7f7 !important; }
.bg-plus { background: #eef9ee !important; }
.bg-minus { background: #faeeee !important; }
.bg-final { background: #fff3cd !important; }

tfoot tr {
  background: #ffeeba !important;
  font-weight: bold;
}
#tbl-payroll thead .sticky-col {
  z-index: 6;  /* header HỌ TÊN cao nhất */
}
#tbl-payroll thead {
  position: sticky;
  top: 0;
  z-index: 5;   /* cao hơn sticky-col */
}

/* Cột HỌ TÊN: luôn hiển thị 1 dòng, không xuống hàng */
#tbl-payroll th.sticky-col,
#tbl-payroll td.sticky-col {
  white-space: nowrap;   /* không cho xuống dòng */
  max-width: 220px;      /* tuỳ, có thể chỉnh 200–250px */
}


/* Tay nắm kéo ở cột STT */
.drag-handle {
  cursor: move;
}

/* Hàng đang kéo */
.sortable-ghost {
  opacity: 0.7;
  background: #fff3cd !important;
}