/* Operations Hub — dashboard styles
   Tách riêng khỏi index.html. Lưu ý: file CSS ngoài KHÔNG hiểu @apply của Tailwind
   nên các class brand được viết thành CSS thuần (giá trị lấy từ tailwind.config). */

/* Một font duy nhất (Inter) cho cả dashboard.
   `.font-mono` được Tailwind map về Inter trong tailwind.config; thêm tabular-nums
   để các con số trong bảng vẫn thẳng cột dù không còn dùng font đẳng-rộng. */
.font-mono { font-variant-numeric: tabular-nums; }

/* === Tone Attio (2026-06-21): typography sắc hơn — chữ mịn + tracking âm nhẹ === */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
  font-feature-settings: "cv11";
}

/* Chữ menu: weight 450 (medium nhẹ) kiểu Attio — chắc nhưng không nặng */
.nav-item { font-weight: 450; }

/* Nav item đang chọn — tô NGỌC NHẠT (màu nhấn hub, nối với login).
   Sáng: nền #e8f4f3 / chữ ngọc đậm. Tối: ngọc mờ / chữ trắng. */
.nav-item.active {
  background-color: #e8f4f3;
  color: #134a51;
  font-weight: 500;
}
.dark .nav-item.active {
  background-color: rgba(111, 208, 208, 0.12);
  color: #ffffff;
}

/* Sidebar nền xám-ngọc rất nhạt (chỉ LIGHT — tách khỏi vùng nội dung trắng tinh).
   Scope html:not(.dark) để KHÔNG đụng dark mode (vẫn slate-800). */
html:not(.dark) #sidebar { background-color: #f7fafa; }

/* Mục con trong block: ĐƯỜNG LINE DỌC dẫn (kiểu Attio "Automations") + thụt lề.
   Áp chung cho cả 5 block qua class .nav-block-items → đổi 1 chỗ lan hết. */
.nav-block-items {
  margin-left: 17px;          /* canh line thẳng dưới icon block header */
  padding-left: 10px;
  border-left: 1px solid #dfe8e9;
}
.dark .nav-block-items { border-left-color: #33474c; }
/* mục con thụt vừa phải (không quá sâu sau line) */
.nav-block-items .nav-item { padding-left: 0.5rem; padding-right: 0.5rem; }

#sidebar { transition: transform 0.25s ease; }
#overlay { transition: opacity 0.25s ease; }

/* Thu gọn sidebar (chỉ desktop ≥1024px) — nút mở lại nổi ở góc trên-trái nội dung.
   #sidebarExpand mặc định ẩn, chỉ hiện khi đã thu gọn ở desktop. */
#sidebarExpand { display: none; }
@media (min-width: 1024px) {
  body.sb-collapsed #sidebar { display: none; }
  body.sb-collapsed #sidebarExpand { display: inline-flex; }
  /* chừa lề trái cho nút "mở thanh bên" nổi khi sidebar đang thu gọn */
  body.sb-collapsed main { padding-left: 3.5rem; }
}

/* Scrollbar mảnh */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c6d4d6; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #465c61; }

/* Flatpickr — dùng chung font Inter */
.flatpickr-calendar, .flatpickr-calendar input { font-family: inherit; }

/* Flatpickr — màu chọn ngày theo màu nhấn xanh ngọc (light mode).
   Dùng !important để đè rule mặc định của flatpickr (CDN) — nếu không,
   ô đầu khoảng (.startRange) vẫn giữ màu xanh #569ff7 của flatpickr. */
.flatpickr-day.today { border-color: #1f6f78 !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus {
  background: #1f6f78 !important; border-color: #1f6f78 !important; color: #fff !important;
}
.flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 #1f6f78 !important; }
.flatpickr-day.inRange {
  background: #cfe6e6 !important; border-color: #cfe6e6 !important; color: #134a51 !important;
  box-shadow: -5px 0 0 #cfe6e6, 5px 0 0 #cfe6e6 !important;
}

/* Flatpickr — dark mode */
.dark .flatpickr-calendar { background: #1f3037; border-color: #33474c; box-shadow: 0 3px 13px rgba(0,0,0,.5); }
.dark .flatpickr-calendar.arrowTop:before, .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #1f3037; }
.dark .flatpickr-calendar.arrowBottom:before, .dark .flatpickr-calendar.arrowBottom:after { border-top-color: #1f3037; }
.dark .flatpickr-months .flatpickr-month, .dark .flatpickr-weekdays, .dark span.flatpickr-weekday { background: #1f3037; color: #c6d4d6; fill: #c6d4d6; }
.dark .flatpickr-current-month input.cur-year, .dark .flatpickr-current-month .flatpickr-monthDropdown-months { color: #dfe8e9; }
.dark .flatpickr-day { color: #dfe8e9; }
.dark .flatpickr-day:hover, .dark .flatpickr-day.prevMonthDay:hover, .dark .flatpickr-day.nextMonthDay:hover { background: #33474c; border-color: #33474c; }
.dark .flatpickr-day.today { border-color: #1f6f78 !important; }
.dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange,
.dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange:hover, .dark .flatpickr-day.endRange:hover { background: #1f6f78 !important; border-color: #1f6f78 !important; color: #fff !important; }
.dark .flatpickr-day.inRange { background: #33474c; border-color: #33474c; box-shadow: -5px 0 0 #33474c, 5px 0 0 #33474c; }
.dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay { color: #5f777c; }
.dark .flatpickr-months .flatpickr-prev-month svg, .dark .flatpickr-months .flatpickr-next-month svg { fill: #c6d4d6; }
.dark .numInputWrapper span { border-color: #33474c; }

/* Time picker tự build — dòng giờ/phút đang chọn tô màu nhấn hub (xanh ngọc) */
.fs-tp-on { background: #1f6f78 !important; color: #fff !important; font-weight: 600; }
.fs-tp-on:hover { background: #195d65 !important; }
/* Scrollbar mảnh cho 2 cột giờ/phút */
.fs-tp-h, .fs-tp-m { scrollbar-width: thin; }
.fs-tp-h::-webkit-scrollbar, .fs-tp-m::-webkit-scrollbar { width: 6px; }
.fs-tp-h::-webkit-scrollbar-thumb, .fs-tp-m::-webkit-scrollbar-thumb { background: #c6d4d6; border-radius: 3px; }
.dark .fs-tp-h::-webkit-scrollbar-thumb, .dark .fs-tp-m::-webkit-scrollbar-thumb { background: #465c61; }

/* Tab Đối soát tiền về ví — thẻ KPI bấm để lọc; thẻ đang chọn tô viền (màu nhấn xanh ngọc) */
.rw-card { cursor: pointer; }
.rw-card.active { border-color: #1f6f78; box-shadow: 0 0 0 1px #1f6f78; }
.dark .rw-card.active { border-color: #6fd0d0; box-shadow: 0 0 0 1px #6fd0d0; }

/* Tab Flash Sale — stepper 2 bước trong drawer Tạo/Sửa nhóm (màu nhấn xanh ngọc) */
.fs-step { display: inline-flex; align-items: center; gap: .4rem; color: #8fa5a9; font-weight: 500; white-space: nowrap; }
.fs-step-on { color: #1f6f78; font-weight: 600; }
.dark .fs-step { color: #5f777c; }
.dark .fs-step-on { color: #eef4f4; }
/* Dòng SP trong 2 cột chuyển (trái=kho, phải=đã chọn) */
.fs-tr { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; cursor: pointer; }
.fs-tr:hover { background: rgba(0,0,0,.03); }
.dark .fs-tr:hover { background: rgba(255,255,255,.04); }
.fs-tr.fs-locked { opacity: .4; cursor: not-allowed; }
.fs-tr.fs-tr-on { background: #e8f4f3; }
.dark .fs-tr.fs-tr-on { background: rgba(255,255,255,.06); }

/* ── Tabulator — tone Attio monochrome (dùng cho các tab bảng, bắt đầu từ Hàng hoàn) ── */
.tabulator { border: none; background: transparent; font-size: 12px; }  /* body bảng = bậc NHỎ (Ngọc chốt); header/badge giữ cỡ riêng */
.tabulator .tabulator-header { border-bottom: 1px solid #dfe8e9; background: #f7fafa; }
.tabulator .tabulator-header .tabulator-col {
  background: transparent; border-right: none;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5f777c;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 10px 12px; }
.tabulator .tabulator-row { border-bottom: 1px solid #eef4f4; background: transparent; }
.tabulator .tabulator-row.tabulator-row-even { background: transparent; }
.tabulator .tabulator-row:hover { background: #f7fafa !important; }
.tabulator .tabulator-cell {
  border-right: none; padding: 10px 12px; vertical-align: top;
  color: #465c61; white-space: normal; line-height: 1.4;
}
.tabulator .tabulator-cell.tabulator-editing { border: 1px solid #1f6f78; padding: 6px 10px; }
.tabulator .tabulator-cell.tabulator-editing input,
.tabulator .tabulator-cell.tabulator-editing select { font-size: 13px; border: none; outline: none; }
.tabulator .tabulator-placeholder { color: #8fa5a9; font-size: 13px; }
.tabulator .tabulator-tableholder:focus { outline: none; }
/* Editable cell — gợi ý bấm để sửa */
.tabulator .tabulator-cell[tabulator-field="tinh_trang_kho"],
.tabulator .tabulator-cell[tabulator-field="ghi_chu"] { cursor: text; }
.tabulator .tabulator-cell[tabulator-field="tinh_trang_kho"]:hover,
.tabulator .tabulator-cell[tabulator-field="ghi_chu"]:hover { background: #eef4f4; }
.ret-edit-caret { color: #c6d4d6; font-size: 10px; }
.ret-placeholder { color: #8fa5a9; }

/* Nội dung cell tab Hàng hoàn */
.ret-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.ret-badge-TH  { background: #eff6ff; color: #1d4ed8; }
.ret-badge-HT  { background: #fff7ed; color: #c2410c; }
.ret-badge-BOM { background: #fef2f2; color: #b91c1c; }
/* Tag trạng thái Nhanh.vn — pill mềm, tint sáng (chạy cả dark: chip sáng trên nền tối) */
.ret-nhanh-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.55; white-space: nowrap; }
.ret-nhanh-done   { background: #ecfdf5; color: #15803d; }   /* Đã hoàn → xanh (đạt đích) */
.ret-nhanh-prog   { background: #fff7ed; color: #c2410c; }   /* Đang hoàn → cam */
.ret-nhanh-succ   { background: #eff6ff; color: #1d4ed8; }   /* Thành công → xanh dương */
.ret-nhanh-cancel { background: #eef4f4; color: #5f777c; }   /* hủy/thất bại → xám */
.ret-nhanh-other  { background: #f7fafa; color: #465c61; box-shadow: inset 0 0 0 1px #dfe8e9; }
.ret-nhanh-empty  { background: transparent; color: #c6d4d6; font-weight: 500; padding: 2px 4px; }
/* Tag trạng thái đơn (Tình trạng đơn) — pill mềm click-to-edit; màu tint lấy inline từ RET_TT */
.ret-tt-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.55; }
.ret-madon { font-weight: 500; color: #33474c; white-space: nowrap; }
.ret-sub { font-size: 11px; color: #8fa5a9; margin-top: 2px; }
/* Mã bấm-để-copy (hyperlink-style, không icon) — 1 LOGIC chung cho cả Mã đơn lẫn Mã vận đơn:
   dòng TRÊN = mã chính (đậm đen) · dòng DƯỚI = mã phụ (nhỏ, nhạt xám). Không nhãn chữ. */
.ret-code { cursor: pointer; color: #465c61; transition: color .15s; }
.ret-code:hover { text-decoration: underline; }
.ret-code-main { font-weight: 500; color: #1f3037; }   /* dòng trên = mã chính, đậm đen */
.ret-code-sub  { font-size: 12px; color: #8fa5a9; }    /* dòng dưới = mã phụ, nhạt xám */
.ret-wrap { word-break: break-all; }                    /* mã dài (vận đơn) → xuống dòng gọn */
.ret-copied { color: #16a34a !important; text-decoration: none !important; }  /* nháy xanh khi copy */
/* Dòng kiện quá hạn — nền đỏ nhạt; bản tối dùng đỏ mờ (trước đây tô inline → chữ sáng trên nền hồng, không đọc được) */
.tabulator .tabulator-row.ret-overdue { background: rgba(254,226,226,.45); }
.dark .tabulator .tabulator-row.ret-overdue { background: rgba(248,113,113,.10); }
.ret-noparcel { font-size: 12px; font-style: italic; color: #8fa5a9; }
/* 2 dòng mã (mã đơn+YC / mã về+gốc) — KHÔNG flex (flex bóp code → bẻ từng ký tự) */
.ret-trk2 > div { line-height: 1.4; }
.ret-trk2 > div + div { margin-top: 3px; }
.dark .ret-code-sub { color: #5f777c; }
.ret-sp-line { display: flex; gap: 6px; }
.ret-sp-dash { color: #8fa5a9; user-select: none; }
.ret-clock { color: #ef4444; }
.ret-copy { background: none; border: none; cursor: pointer; padding: 0; color: #c6d4d6; }
.ret-copy:hover { color: #5f777c; }

/* Dark mode Tabulator */
.dark .tabulator .tabulator-table { background: transparent; }   /* lib để nền trắng cứng → chữ sáng trên nền trắng ở bản tối */
.dark .tabulator .tabulator-header { background: #122128; border-bottom-color: #33474c; }
.dark .tabulator .tabulator-header .tabulator-col { color: #8fa5a9; }
.dark .tabulator .tabulator-row { border-bottom-color: rgba(51,71,76,.5); }
.dark .tabulator .tabulator-row:hover { background: rgba(31,48,55,.5) !important; }
.dark .tabulator .tabulator-cell { color: #c6d4d6; }
.dark .tabulator .tabulator-cell[tabulator-field="tinh_trang_kho"]:hover,
.dark .tabulator .tabulator-cell[tabulator-field="ghi_chu"]:hover { background: rgba(255,255,255,.06); }
.dark .ret-madon { color: #dfe8e9; }
.dark .ret-code { color: #c6d4d6; }
.dark .ret-code-main { color: #eef4f4; }
.dark .ret-badge-TH  { background: rgba(30,58,138,.3); color: #93c5fd; }
.dark .ret-badge-HT  { background: rgba(124,45,18,.3); color: #fdba74; }
.dark .ret-badge-BOM { background: rgba(127,29,29,.3); color: #fca5a5; }