:root {
  --brand: #1d4e89;
  --brand-dark: #12385f;
}
body { background: #f4f6f9; }
.description-text { white-space: pre-line; }
.app-navbar { background: var(--brand-dark); }
.nav-link { color: #cfe0f2 !important; }
.nav-link.active, .nav-link:hover { color: #fff !important; }

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-left: 5px solid var(--brand);
}
.stat-card .stat-number { font-size: 1.9rem; font-weight: 700; }
.stat-card.late { border-left-color: #dc3545; }
.stat-card.soon { border-left-color: #fd7e14; }
.stat-card.done { border-left-color: #198754; }
.stat-card.progress { border-left-color: #0dcaf0; }
.stat-card.wait { border-left-color: #6c757d; }

.card-panel {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.badge-status { font-weight: 500; padding: .4em .7em; }
.badge-Hoàn.thành, .badge-status-done { background: #198754; }

.progress { height: 10px; border-radius: 6px; }

.stage-track { display: flex; gap: 4px; flex-wrap: wrap; }
.stage-pill {
  flex: 1;
  min-width: 130px;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e2e6ea;
  background: #fafbfc;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.stage-pill:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.stage-pill.done { background: #e9f7ef; border-color: #b7e4c7; }
.stage-pill.in_progress { background: #e7f6fb; border-color: #a9e0f0; }
.stage-pill.pending { background: #f4f4f4; border-color: #e2e2e2; color: #888; }
/* QC không đạt — nổi đỏ để thấy ngay điểm nghẽn */
.stage-pill.failed { background: #fdecea; border-color: #f5c2c0; }
.stage-pill.failed .stage-idx { background: #dc3545 !important; }
.qc-fail-box {
  background: #f8d7da; border: 1px solid #f1aeb5; border-radius: 5px;
  padding: 3px 5px; font-size: .66rem; color: #842029; text-align: left;
}
.stage-pill .stage-idx {
  display: inline-block; width: 24px; height: 24px; border-radius: 50%;
  background: #ccc; color: #fff; font-size: .8rem; line-height: 24px; margin-bottom: 6px;
}
.stage-pill.done .stage-idx { background: #198754; }
.stage-pill.in_progress .stage-idx { background: #0dcaf0; }

.table-orders tbody tr { cursor: pointer; }
.table-orders tbody tr:hover { background: #f0f4f9; }

/* Pipeline quy trình sản xuất (dashboard) */
.pipeline-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pipeline-step {
  flex: 1;
  min-width: 110px;
  text-align: center;
  background: #fafbfc;
  border: 1px solid #e2e6ea;
  border-top: 4px solid #ccc;
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease;
}
.pipeline-step:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); transform: translateY(-1px); }
/* ---- Timeline truy vết đơn hàng ---- */
.timeline-late { color: #dc3545; font-weight: 600; }
.timeline-ontime { color: #198754; }
/* Gom nhóm theo sản phẩm: 1 dòng tóm tắt, bấm mới bung chi tiết */
.tl-group { border: 1px solid #e2e6ea; border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
.tl-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; cursor: pointer; background: #fafbfc;
}
.tl-head:hover { background: #f1f3f5; }
.tl-caret { font-size: .8rem; color: #888; width: 12px; }
.tl-detail { padding: 4px 12px 10px; border-top: 1px solid #eceff1; }

/* ---- Bộ phận / phòng ban ---- */
/* Thanh chip chuyển nhanh giữa các bộ phận (ai cũng bấm được — không khoá) */
.dept-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.dept-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #e2e6ea; border-radius: 999px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600;
  color: #495057; text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.dept-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); color: #212529; }
.dept-chip.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.dept-chip.mine:not(.active) { border-color: #198754; color: #198754; }
.dept-chip-icon { font-size: 1rem; }

/* Thẻ bộ phận trên Dashboard */
.dept-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.dept-card {
  flex: 1; min-width: 130px; text-align: center; text-decoration: none;
  background: #fafbfc; border: 1px solid #e2e6ea; border-radius: 12px;
  padding: 14px 10px; color: #343a40;
  transition: box-shadow .15s ease, transform .1s ease;
}
.dept-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.12); transform: translateY(-1px); color: #212529; }
.dept-card.mine { border-color: #198754; background: #f1f9f4; }
.dept-card.locked {
  cursor: not-allowed; opacity: .42; filter: grayscale(70%);
  background: #f1f3f5;
}
.dept-card.locked:hover { box-shadow: none; transform: none; }
.dept-card-icon { font-size: 1.7rem; display: block; margin-bottom: 6px; }
.dept-card-name { font-size: .82rem; font-weight: 600; }
.dept-card-badge { font-size: .68rem; color: #198754; font-weight: 600; margin-top: 4px; }
/* Số việc chờ trên thẻ bộ phận — đủ đậm để liếc là thấy, không cần bấm vào mới biết */
.dept-card-count { font-size: .95rem; font-weight: 700; color: #0d6efd; margin-top: 4px; }
.dept-card-count.none { font-size: .7rem; font-weight: 500; color: #adb5bd; }
.pipeline-icon {
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.pipeline-name { font-size: .8rem; font-weight: 600; min-height: 32px; }
.pipeline-count { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }
.pipeline-count-label { font-size: .7rem; color: #888; }

.legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 4px;
}

/* Trang chi tiết đơn hàng (nhiều sản phẩm) */
.product-card {
  background: #fff; border-radius: 12px; padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 16px;
}
.product-card .product-title { font-weight: 700; font-size: 1.05rem; }

/* Header: logo + chuông thông báo */
.navbar-logo { height: 30px; background: #fff; border-radius: 4px; padding: 2px 6px; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #4a7fc1;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; text-transform: uppercase;
}
.user-position { font-size: .72rem; color: #cfe0f2; }

/* Khoá công đoạn theo quyền */
.stage-pill.locked { opacity: .55; cursor: not-allowed; }
.stage-pill.no-permission { cursor: default; }
.stage-lock-icon { font-size: .8rem; }
.stage-note {
  font-size: .78rem;
  color: #7a5b00;
  background: #fff6db;
  border-radius: 4px;
  padding: 2px 5px;
  margin-top: 4px;
  text-align: left;
  word-break: break-word;
}
.drawing-preview-wrap { position: relative; display: inline-block; }
.drawing-preview-wrap img { display: block; }
.drawing-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #dc3545;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.drawing-remove-btn:hover { background: #b02a37; }
.deploy-panel { border: 1px solid #ffe4a1; background: #fffbf0; }
.deploy-table { font-size: .88rem; }
.stage-quick-btn {
  font-size: .68rem;
  padding: 1px 6px;
  line-height: 1.4;
}
.deploy-banner {
  background: #fff7e6; border: 1px solid #ffd591; border-radius: 10px;
  padding: 14px 18px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* Cài đặt */
.settings-tabs .nav-link { color: #444; }
.role-select-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.role-select-row .stage-name { width: 160px; font-weight: 600; font-size: .85rem; }
.notif-badge {
  position: absolute; top: -4px; right: -8px; font-size: .65rem;
}
#bellBtn { font-size: 1.2rem; text-decoration: none; }
.notif-dropdown { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: block; padding: 10px 14px; border-bottom: 1px solid #f0f0f0;
  color: #333; text-decoration: none;
}
.notif-item:hover { background: #f7f9fb; }
.notif-item.unread { background: #eaf3ff; }
.notif-item.unread .small { font-weight: 600; }

/* Cảnh báo chưa có hạn giao */
.due-warning { color: #dc3545; cursor: help; }

/* Bảng xem trước khi tạo đơn hàng */
.preview-panel {
  background: #fff; border-radius: 12px; padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); position: sticky; top: 16px;
}
.preview-item {
  border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: .85rem;
}
.preview-item .remove-item { cursor: pointer; color: #dc3545; }

/* ---- Đơn hàng / sản phẩm đã huỷ ---- */
/* Làm mờ để lướt mắt qua ngay, nhưng vẫn đọc được khi cần tra lại */
.order-cancelled { background: #fff5f5; opacity: .7; }
.order-cancelled:hover { background: #ffecec; }
.product-card.item-cancelled { border-left: 4px solid #dc3545; background: #fffafa; }
/* Sản phẩm đã đi hết quy trình: thu thành 1 dòng cho đỡ chiếm chỗ, bấm mới bung */
.product-card.product-card-done {
  border-left: 4px solid #198754; background: #f6fbf8;
  padding: 8px 14px; margin-bottom: 8px;
}
.product-card.product-card-done .done-row { cursor: pointer; }
.product-card.product-card-done:hover { background: #eaf6ef; }

/* ---- Nhật ký thao tác ---- */
.audit-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.audit-table tbody tr:hover { background: #f7f9fb; }
.au-badge { font-weight: 600; font-size: .68rem; padding: .3em .6em; }
/* Màu theo nhóm việc để lướt mắt nhận ra ngay loại thao tác */
.au-g-order    { background: #0d6efd; }
.au-g-progress { background: #0dcaf0; color: #063a44 !important; }
.au-g-delivery { background: #198754; }
.au-g-stock    { background: #fd7e14; }
.au-g-catalog  { background: #6c757d; }
.au-g-account  { background: #dc3545; }   /* nhóm nhạy cảm nhất — cho nổi đỏ */
.au-old   { color: #dc3545; text-decoration: line-through; }
.au-arrow { color: #888; margin: 0 3px; }
.au-new   { color: #198754; font-weight: 600; }

/* Bullet list thông tin khác (sản phẩm) */
.bullet-row { display: flex; gap: 6px; margin-bottom: 6px; }
.bullet-row input { flex: 1; }

/* ---- Danh mục sản phẩm dạng tick khi tạo đơn ----
   Hộp cố định chiều cao để phần còn lại của form không bị đẩy xuống khi
   danh mục dài; bên trong mới cuộn. */
.catalog-box {
  max-height: 270px; overflow-y: auto;
  border: 1px solid #dee2e6; border-radius: 8px; background: #fff;
}
.catalog-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 12px; border-bottom: 1px solid #f1f3f5;
  cursor: pointer; margin: 0;
}
.catalog-row:last-child { border-bottom: none; }
.catalog-row:hover { background: #f8fafc; }
.catalog-row.picked { background: #eaf4ff; }
.catalog-row input { margin-top: 3px; flex-shrink: 0; }
.catalog-text { font-size: .875rem; line-height: 1.35; }
.catalog-desc {
  font-size: .75rem; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}