/* ============================================================
   VanThuan Holdings — tùy biến giao diện (đè lên theme DreamsPOS)
   Nạp sau build/css/style.css trong head-css.blade.php.
   NGUỒN: resources/css/app-custom.css (Git theo dõi) — vite-plugin-static-copy
   tự copy ra public/build/css/app-custom.css mỗi lần build (KHÔNG đặt thẳng vào
   public/build vì thư mục đó bị Vite xóa sạch khi build => sẽ mất file).
   ============================================================ */

/* ---- 1. Nhãn nhóm menu (submenu-hdr): IN HOA, cỡ ~gấp đôi mục menu ---- */
#sidebar-menu .submenu-hdr {
    text-transform: uppercase;
    font-size: 0.75rem;    /* ~12px — nhỏ gọn, đậm + IN HOA để phân biệt nhóm */
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.3;
    color: #16191c;
    margin-top: .35rem;
    margin-bottom: .35rem;
}

/* Giữ mục menu con ở cỡ chuẩn để tương phản rõ với nhãn nhóm. */
#sidebar-menu ul li.submenu > a,
#sidebar-menu ul li a {
    font-size: .9rem;
}

/* ---- 2. Logo thương hiệu (ảnh VUÔNG nền đỏ VAN THUAN HOLDINGS) ----
   Khóa cứng tỉ lệ vuông (width = height) + object-fit: contain để KHÔNG bị
   theme kéo giãn méo. !important để đè rule width/height của theme. */

/* Sidebar mở rộng */
.sidebar-logo .logo-normal img,
.sidebar-logo .logo-white img {
    height: 46px !important;
    width: 46px !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 8px;
    vertical-align: middle;
}

/* Chữ thương hiệu "ALL IN ONE ERP" cạnh logo.
   Đặt ABSOLUTE so với thẻ logo (logo anchor giữ nguyên 46px như cũ) + pointer-events:none
   => KHÔNG làm rộng vùng logo và KHÔNG chặn click nút thu gọn #toggle_btn. */
.sidebar-logo .logo-normal,
.sidebar-logo .logo-white {
    position: relative;
}
.sidebar-logo .brand-text {
    position: absolute;
    left: calc(100% + 6px);    /* sát cạnh phải logo */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;      /* để click xuyên qua, không chặn nút toggle */
    font-weight: 800;          /* đậm */
    font-size: 1rem;           /* nhỏ gọn, đỡ phô */
    letter-spacing: 0;         /* co sát khoảng cách ký tự */
    line-height: 1;
    color: #b3091a;            /* đỏ thương hiệu, hợp logo */
    white-space: nowrap;
}
.sidebar-logo .logo-white .brand-text {
    color: #f5d142;            /* nền tối: vàng kim cho nổi */
}
/* Chỉ ẩn chữ khi sidebar ở dạng icon (mini) VÀ KHÔNG đang hover-mở-rộng.
   Khi mini-sidebar được mở rộng ra (theme thêm .expand-menu) thì chữ hiện lại. */
.mini-sidebar:not(.expand-menu) .sidebar-logo .brand-text {
    display: none !important;
}
/* Sidebar thu gọn (mini) */
.sidebar-logo .logo-small img,
.sidebar-logo .logo-small-white img {
    height: 34px !important;
    width: 34px !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 6px;
}

/* Header trên cùng (topbar — hiển thị ở mobile/một số layout) */
.header-left .logo img {
    height: 38px !important;
    width: 38px !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 6px;
}

/* Trang đăng nhập / quên mật khẩu / 2FA — logo vuông căn giữa, gọn gàng */
.login-logo img {
    height: 84px !important;
    width: 84px !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 12px;
}
.login-wrapper .login-content .login-userset .login-logo {
    text-align: center;
    margin-bottom: 1rem;
}

/* ---- 3. Hồ sơ nhân viên — trình bày card chuyên nghiệp ---- */
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b3091a 0%, #e0334a 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    text-transform: uppercase;
}
/* Card có tiêu đề icon (đồng bộ với card Sơ đồ tổ chức) */
.info-card .card-header {
    background: #fafbfc;
    border-bottom: 1px solid #eceef1;
    font-weight: 600;
}
/* Danh sách nhãn — giá trị gọn gàng */
.info-list {
    margin: 0;
}
.info-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed #eef0f2;
}
.info-list li:last-child {
    border-bottom: 0;
}
.info-list .info-label {
    color: #6b7280;
    font-size: .875rem;
    white-space: nowrap;
}
.info-list .info-value {
    font-weight: 600;
    text-align: right;
    color: #16191c;
}

/* ---- 4. Bảng toàn hệ thống (bảng thường + DataTables) — định nghĩa MỘT chỗ ----
   Header nền = màu primary thật của template (#E04F16 = rgb(224,79,22), đúng màu nút
   "Thêm"), chữ trắng. Hover dòng = tint nhạt cùng màu (kiểu nền menu active). */
.table > thead > tr > th,
.table thead th,
table.dataTable > thead > tr > th,
table.dataTable thead th {
    background-color: rgb(224, 79, 22) !important;   /* = primary template (#E04F16) */
    color: #fff !important;
    border-color: rgb(224, 79, 22) !important;
    font-weight: 600;
    vertical-align: middle;
}
/* Bo góc nhẹ cho ô đầu/cuối hàng tiêu đề */
.table > thead > tr > th:first-child,
.table thead th:first-child {
    border-top-left-radius: 6px;
}
.table > thead > tr > th:last-child,
.table thead th:last-child {
    border-top-right-radius: 6px;
}
/* Icon sắp xếp DataTables giữ sáng để nổi trên nền cam */
table.dataTable > thead .sorting::before,
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::before,
table.dataTable > thead .sorting_desc::after {
    color: #fff !important;
    opacity: .55;
}
/* Hover dòng = màu SOLID rất nhạt (sáng hơn trắng một chút), đặt cả tr lẫn ô
   để KHÔNG bị màu xám hover mặc định lọt qua (tránh "xỉn"). */
.table > tbody > tr:hover,
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #fdf7f3;
    background-color: #fdf7f3 !important;
}

/* Nút outline khi di chuột vào: chữ phải TRẮNG (theme đang để chữ trùng màu nền) */
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.active,
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active,
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    color: #fff !important;
}


/* ---- 5. Trang AUTH (đăng nhập / quên–đặt lại / ép đổi mật khẩu / 2FA) ----
   KHÔNG dùng ảnh nền: nền phẳng nhã nhặn; card canh GIỮA màn hình, cách đều 2 bên,
   responsive full. Bỏ panel 50% lệch trái + lớp kính mờ của theme. */
.login-wrapper,
.login-wrapper.bg-img {
    background-image: none !important;
    background: #f4f6fa !important;   /* nền phẳng, sạch, chuyên nghiệp */
}
.login-wrapper .login-content,
.login-wrapper .login-content.authent-content {
    width: 100% !important;            /* trải full, không còn lệch trái 50% */
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 24px;
}
/* Form = thẻ (card) canh giữa, cách đều 2 bên nhờ margin auto + max-width */
.login-wrapper .login-content form {
    width: 100% !important;
    max-width: 484px;   /* to hơn ~10% so với 440px */
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
}
/* Logo + tiêu đề canh giữa */
.login-wrapper .login-content .login-logo { text-align: center; }
.login-wrapper .login-content .login-userheading { text-align: center; margin-bottom: 1.5rem; }
@media (max-width: 575.98px) {
    .login-wrapper .login-content { padding: 16px; }
    .login-wrapper .login-content form { padding: 1.5rem 1.25rem; border-radius: 14px; }
}
.modal .close,
.modal .btn-close {

  width: 10px !important;
  height: 10px !important;
  font-weight: 700 !important;
}
.modal .modal-header .btn-close,
.modal .btn-close.btn-danger,
.modal .btn-close.bg-danger {
    --bs-btn-close-color: #fff;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    background-position: center center !important;
    background-size: 0.75em auto !important;
    background-repeat: no-repeat !important;
    opacity: 1;
    filter: none !important;
}

/* ===== Stepper biến động nhân sự (Lập đề nghị → Lãnh đạo duyệt → HR thực hiện) ===== */
.lc-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.lc-stepper .lc-step {
  flex: 1 1 0;
  text-align: center;
  position: relative;
}
.lc-stepper .lc-step::before,
.lc-stepper .lc-step::after {
  content: "";
  position: absolute;
  top: 18px;
  height: 3px;
  width: 50%;
  background: #e5e7eb;
  z-index: 0;
}
.lc-stepper .lc-step::before { left: 0; }
.lc-stepper .lc-step::after { right: 0; }
.lc-stepper .lc-step:first-child::before,
.lc-stepper .lc-step:last-child::after { display: none; }
.lc-stepper .lc-step.done::before,
.lc-stepper .lc-step.done::after,
.lc-stepper .lc-step.current::before { background: rgb(224, 79, 22); }
.lc-stepper .lc-step-circle {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e5e7eb;
  color: #9ca3af;
  font-weight: 700;
  margin: 0 auto;
}
.lc-stepper .lc-step.done .lc-step-circle {
  background: rgb(224, 79, 22);
  border-color: rgb(224, 79, 22);
  color: #fff;
}
.lc-stepper .lc-step.current .lc-step-circle {
  border-color: rgb(224, 79, 22);
  color: rgb(224, 79, 22);
}
.lc-stepper .lc-step-label { font-weight: 600; font-size: 0.85rem; margin-top: 0.4rem; }
.lc-stepper .lc-step-sub { color: #9ca3af; font-size: 0.72rem; }

/* ===== 6. SweetAlert2 — thu nhỏ tiêu đề thông báo/xác nhận =====
   Mặc định .swal2-title của SweetAlert2 là 1.875em (rất to, lấn át nội dung).
   Chuẩn hóa MỘT chỗ cho TOÀN hệ thống: tiêu đề gọn, dễ đọc; nội dung & nút giữ nguyên. */
.swal2-popup .swal2-title {
  font-size: 1.2rem;        /* ~19px thay vì ~30px */
  font-weight: 600;
  line-height: 1.4;
  padding: 0 1rem;
}
.swal2-popup .swal2-html-container {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---- Hiển thị nội dung NHẬP TỪ TEXTAREA giữ nguyên xuống dòng/khoảng trắng như lúc nhập.
   Dùng cho mọi nơi HIỂN THỊ (read-only) nội dung dài: mô tả, báo cáo, ghi chú, lý do…
   pre-wrap giữ cả xuống dòng lẫn khoảng trắng; kết hợp {{ }} (escaped) nên an toàn, không cần
   sanitize. word-break để chuỗi dài không tràn khung. ---- */
.vt-multiline {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}