/**
 * Chuẩn màu dùng chung — NGUỒN SỰ THẬT DUY NHẤT.
 *
 * Vì sao cần file này: rà soát 215 template thấy 1.416 mã màu viết cứng với 201
 * giá trị khác nhau, riêng "xanh thương hiệu" đã có 10 sắc cùng tồn tại
 * (#1fa049, #14833a, #28a745, #2f855a, #276749, #20c997, #198754, #16a34a,
 * #0d5a26, #2e7d32). Bốn màn hình song song nhau (tồn kho / lịch sử kho, bản
 * sản phẩm bán và bản vật tư) dùng bốn bộ class nút khác nhau cho CÙNG bốn nút,
 * nên "Tạo phiếu xuất kho" chỗ thì xanh, chỗ thì vàng, chỗ thì đỏ.
 *
 * File này nạp SAU CÙNG trong base.html nên thắng cả <style> trong template lẫn
 * app-shell.css. Sửa màu thì sửa ở đây, không rải hex vào template nữa.
 *
 * ── Quy ước vai trò nút (đọc kỹ trước khi thêm nút mới) ────────────────────
 *   Hành động chính của trang (Tạo mới, Lưu, Tìm kiếm)  → .btn-primary
 *   Hành động phụ (Xuất Excel, File mẫu, Lịch sử, Quay lại) → .btn-outline-secondary
 *   Hành động PHÁ HUỶ, không hoàn tác được (Xoá)        → .btn-danger
 *
 * Đỏ chỉ dành cho phá huỷ. "Tạo phiếu xuất kho" là nghiệp vụ bình thường, tô đỏ
 * làm nhân viên tưởng nguy hiểm và ngần ngại bấm.
 */

:root {
    /* ── Thương hiệu ─────────────────────────────────────────────────────── */
    --ds-brand-50:  #eaf3ee;
    --ds-brand-100: #d4e7dc;
    --ds-brand-200: #a9cfba;
    --ds-brand-400: #57a97c;
    --ds-brand-500: #2f855a;
    --ds-brand-600: #2b7a52;
    --ds-brand-700: #276749;
    --ds-brand-800: #1d4f38;
    --ds-brand-contrast: #ffffff;

    /* ── Trung tính (nền, viền, chữ) ─────────────────────────────────────── */
    --ds-neutral-0:   #ffffff;
    --ds-neutral-50:  #f8fafc;
    --ds-neutral-100: #f1f5f9;
    --ds-neutral-200: #e2e8f0;
    --ds-neutral-300: #cbd5e1;
    --ds-neutral-400: #94a3b8;
    --ds-neutral-500: #64748b;
    --ds-neutral-600: #475569;
    --ds-neutral-700: #334155;
    --ds-neutral-800: #1e293b;
    --ds-neutral-900: #0f172a;

    /* ── Ngữ nghĩa ───────────────────────────────────────────────────────── */
    --ds-danger-soft:   #fdecec;
    --ds-danger-border: #f5b5b5;
    --ds-danger:        #d64545;
    --ds-danger-dark:   #b03636;
    --ds-danger-text:   #8f2c2c;

    --ds-warning-soft:   #fef6e7;
    --ds-warning-border: #f3d29a;
    --ds-warning:        #f59e0b;
    --ds-warning-dark:   #b45309;
    --ds-warning-text:   #92600a;

    --ds-info-soft:   #e8f1fe;
    --ds-info-border: #a9c8f8;
    --ds-info:        #2563eb;
    --ds-info-dark:   #1d4ed8;
    --ds-info-text:   #1e40af;

    --ds-success-soft: var(--ds-brand-50);
    --ds-success-text: var(--ds-brand-700);

    --ds-link: var(--ds-info);

    /* ── Sắc phụ ─────────────────────────────────────────────────────────────
     * Giữ hai sắc này tách riêng thay vì gộp vào xanh dương: chúng đang dùng để
     * phân biệt kênh/nguồn (Facebook, Website…) và vài nhãn trạng thái. Gộp hết
     * về một màu là mất luôn khả năng phân biệt bằng mắt.
     */
    /* ── Bản RGB, cho rgba(..., độ trong suốt) ───────────────────────────────
     * CSS không tách được kênh màu từ một biến hex, nên các chỗ cần đổ bóng /
     * nền mờ phải dùng rgba(var(--x-rgb), .25). Không dùng cú pháp mới
     * rgb(from var(--x) r g b / .25): trình duyệt cũ không hiểu thì cả dòng
     * khai báo bị bỏ, mất luôn màu nền.
     */
    --ds-brand-500-rgb: 47, 133, 90;
    --ds-brand-600-rgb: 43, 122, 82;
    --ds-brand-700-rgb: 39, 103, 73;
    --ds-neutral-200-rgb: 226, 232, 240;
    --ds-neutral-900-rgb: 15, 23, 42;
    --ds-danger-rgb: 214, 69, 69;
    --ds-warning-rgb: 245, 158, 11;
    --ds-info-rgb: 37, 99, 235;
    --ds-accent-purple-rgb: 124, 58, 237;

    --ds-accent-teal-soft:   #e6f6f8;
    --ds-accent-teal:        #0e7490;
    --ds-accent-teal-text:   #155e75;
    --ds-accent-purple-soft: #f3e8ff;
    --ds-accent-purple:      #7c3aed;
    --ds-accent-purple-text: #5b21b6;

    /* ── Phụ trợ phân loại danh mục ──────────────────────────────────────────
     * Vật tư tiêu hao cần phân biệt với sản phẩm bán, nhưng đó là NHÃN PHÂN
     * LOẠI chứ không phải màu thương hiệu. Trước đây các màn vật tư đổi luôn
     * --brand-primary thành vàng, kéo theo nút/link/mã đều vàng — nhìn như một
     * phần mềm khác. Nay chỉ chiếc badge phân loại mang màu này.
     */
    --ds-cat-supply:      #b45309;
    --ds-cat-supply-soft: #fef6e7;
    --ds-cat-product:      var(--ds-brand-700);
    --ds-cat-product-soft: var(--ds-brand-50);

    /* ── Ghi đè token cũ ─────────────────────────────────────────────────────
     * 46 template tự khai lại --brand-* trong <style> của mình (4 màn khai màu
     * VÀNG, 3 màn khai CAM, 2 màn khai sắc xanh khác). Chúng vốn đã vô hiệu vì
     * app-shell.css nạp sau, nhưng vẫn nằm đó đánh lừa người sửa code. Neo cứng
     * về một giá trị ở đây để dù template nào còn sót cũng không lệch được.
     */
    --brand-primary: var(--ds-brand-500);
    --brand-primary-dark: var(--ds-brand-700);
    --brand-primary-soft: var(--ds-brand-50);
    --brand-primary-soft-2: var(--ds-brand-100);
    --brand-accent: var(--ds-brand-500);
    --brand-gradient-start: var(--ds-brand-500);
    --brand-gradient-end: var(--ds-brand-700);
    --brand-primary-rgb: 47, 133, 90;
}

/* ══════════════════════════════════════════════════════════════════════════
 * NÚT
 * Bootstrap có 4 lớp nút đang bị dùng lẫn lộn cho cùng một vai trò. Gom
 * .btn-primary và .btn-success về một (cả hai đang được dùng cho "hành động
 * chính"), và hạ .btn-warning / .btn-info xuống nút phụ viền trung tính — đúng
 * cách chúng đang được dùng thực tế, thay vì đi sửa tay 215 template.
 * ══════════════════════════════════════════════════════════════════════════ */

.btn-primary,
.btn-success {
    background-color: var(--ds-brand-500);
    border-color: var(--ds-brand-500);
    color: var(--ds-brand-contrast);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--ds-brand-700);
    border-color: var(--ds-brand-700);
    color: var(--ds-brand-contrast);
}

.btn-primary:focus, .btn-success:focus,
.btn-outline-secondary:focus, .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 133, 90, 0.25);
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--ds-brand-700);
    border-color: var(--ds-brand-500);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    background-color: var(--ds-brand-500);
    border-color: var(--ds-brand-500);
    color: var(--ds-brand-contrast);
}

/* Nút phụ: viền trung tính. .btn-warning / .btn-info gần như luôn được dùng ở
 * vai trò này (Xuất Excel, File mẫu, Lịch sử phiếu, Quay lại) chứ không mang
 * nghĩa cảnh báo hay thông tin. */
.btn-secondary,
.btn-outline-secondary,
.btn-warning,
.btn-info,
.btn-outline-warning,
.btn-outline-info {
    background-color: var(--ds-neutral-0);
    border-color: var(--ds-neutral-300);
    color: var(--ds-neutral-700);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
    background-color: var(--ds-neutral-100);
    border-color: var(--ds-neutral-500);
    color: var(--ds-neutral-900);
}

/* Đỏ = phá huỷ, không hoàn tác. Không dùng cho nghiệp vụ thường. */
.btn-danger {
    background-color: var(--ds-danger);
    border-color: var(--ds-danger);
    color: #fff;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--ds-danger-dark);
    border-color: var(--ds-danger-dark);
    color: #fff;
}

.btn-outline-danger {
    color: var(--ds-danger-dark);
    border-color: var(--ds-danger);
    background-color: transparent;
}

.btn-outline-danger:hover {
    background-color: var(--ds-danger);
    border-color: var(--ds-danger);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
 * NHÃN TRẠNG THÁI
 * ══════════════════════════════════════════════════════════════════════════ */

.badge.bg-success,
.badge.bg-primary {
    background-color: var(--ds-success-soft) !important;
    color: var(--ds-success-text) !important;
}

.badge.bg-danger {
    background-color: var(--ds-danger-soft) !important;
    color: var(--ds-danger-text) !important;
}

.badge.bg-warning {
    background-color: var(--ds-warning-soft) !important;
    color: var(--ds-warning-text) !important;
}

.badge.bg-secondary,
.badge.bg-light,
.badge.bg-info {
    background-color: var(--ds-neutral-100) !important;
    color: var(--ds-neutral-700) !important;
}

/* Badge phân loại danh mục cạnh tiêu đề trang. */
.ds-cat-badge {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: var(--ds-cat-product-soft);
    color: var(--ds-cat-product);
}

.ds-cat-badge--supply {
    background-color: var(--ds-cat-supply-soft);
    color: var(--ds-cat-supply);
}

/* ══════════════════════════════════════════════════════════════════════════
 * MÃ ĐỐI TƯỢNG (mã SP, mã dịch vụ, mã đơn…)
 * Trước đây mã sản phẩm xanh lá, mã vật tư vàng, tên combo xanh dương, mã đơn
 * thuốc xanh dương — cùng là "link mở chi tiết" mà bốn màu.
 * ══════════════════════════════════════════════════════════════════════════ */

.ds-code-link,
td a.ds-code-link {
    color: var(--ds-brand-700);
    font-weight: 600;
    text-decoration: none;
}

.ds-code-link:hover {
    color: var(--ds-brand-500);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
 * CÔNG TẮC BẬT/TẮT
 * Bootstrap mặc định xanh dương — lạc hẳn khỏi bảng màu xanh lá của hệ thống.
 * ══════════════════════════════════════════════════════════════════════════ */

.form-check-input:checked {
    background-color: var(--ds-brand-500);
    border-color: var(--ds-brand-500);
}

.form-check-input:focus {
    border-color: var(--ds-brand-300, var(--ds-brand-100));
    box-shadow: 0 0 0 0.2rem rgba(47, 133, 90, 0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Ô NHẬP LIỆU
 * ══════════════════════════════════════════════════════════════════════════ */

.form-control:focus,
.form-select:focus {
    border-color: var(--ds-brand-500);
    box-shadow: 0 0 0 0.2rem rgba(47, 133, 90, 0.15);
}

/* ══════════════════════════════════════════════════════════════════════════
 * THANH TIẾN ĐỘ (số buổi liệu trình đã dùng)
 * ══════════════════════════════════════════════════════════════════════════ */

.progress-bar {
    background-color: var(--ds-brand-500);
}