/**
 * 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);

    /* ── Trạng thái lịch hẹn ─────────────────────────────────────────────────
     * Một bảng màu duy nhất cho MỌI màn lịch hẹn (danh sách, tuần, tháng, flow,
     * chi tiết). Trước đây mỗi template tự chọn token trong <style> của mình,
     * nên cùng một trạng thái ra màu khác nhau tuỳ màn, và sửa màu phải lần
     * qua 5 file — sót một file là lệch.
     *
     * CỐ Ý neo bằng mã màu cứng, KHÔNG trỏ vào --ds-brand-* hay --ds-danger:
     * themes.css đổi --ds-brand-500 theo từng giao diện (bản "friendly" là tím
     * indigo). Nếu "Xác nhận" mượn màu thương hiệu thì ở giao diện đó nó thành
     * tím, đụng đúng màu của "Chưa xác nhận" — tức là dựng lại cái lỗi khó phân
     * biệt mà bảng màu này sinh ra để dẹp. Trạng thái là ngữ nghĩa, không phải
     * thương hiệu, nên nó phải đứng yên qua mọi giao diện.
     *
     * Bốn màu dưới đây do phòng khám chốt, lấy theo MySpa cho quen mắt:
     *   chưa xác nhận tím — đã xác nhận xanh lá — hoàn thành hồng — hủy đỏ
     * Bốn trạng thái còn lại (đã đến, đang khám, không đến, dời lịch) không nằm
     * trong yêu cầu; chọn sắc khác hẳn 4 màu trên để không nhập nhằng.
     *
     * Mỗi trạng thái có 3 biến: nền đặc (badge/chấm), nền nhạt (thẻ) và màu chữ
     * đọc trên nền nhạt.
     */
    --appt-scheduled:      #7c3aed;
    --appt-scheduled-soft: #f3e8ff;
    --appt-scheduled-text: #5b21b6;

    --appt-confirmed:      #16a34a;
    --appt-confirmed-soft: #dcfce7;
    --appt-confirmed-text: #15803d;

    --appt-completed:      #db2777;
    --appt-completed-soft: #fce7f3;
    --appt-completed-text: #9d174d;

    --appt-cancelled:      #d64545;
    --appt-cancelled-soft: #fdecec;
    --appt-cancelled-text: #8f2c2c;

    --appt-arrived:      #0e7490;
    --appt-arrived-soft: #e6f6f8;
    --appt-arrived-text: #155e75;

    --appt-in_progress:      #f59e0b;
    --appt-in_progress-soft: #fef6e7;
    --appt-in_progress-text: #92600a;

    --appt-no_show:      #64748b;
    --appt-no_show-soft: #f1f5f9;
    --appt-no_show-text: #334155;

    --appt-rescheduled:      #2563eb;
    --appt-rescheduled-soft: #e8f1fe;
    --appt-rescheduled-text: #1e40af;

    /* Chữ trắng đọc trên nền đặc của mọi trạng thái ở trên (đã kiểm tương phản). */
    --appt-on-solid: #ffffff;

    /* ── 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(var(--ds-brand-500-rgb), 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(var(--ds-brand-500-rgb), 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(var(--ds-brand-500-rgb), 0.15);
}

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

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

/* ══════════════════════════════════════════════════════════════════════════
 * GHI CHÚ LỊCH HẸN
 *
 * Dòng "Ghi chú" đi kèm ngay dưới "Lý do khám" trên các màn lịch hẹn. Để ở đây
 * vì cả danh sách lẫn lưới tuần đều dùng — hai template, một định nghĩa.
 * Bảng flow và lịch tháng có khổ chữ riêng nên giữ class riêng trong file của
 * chúng, nhưng vẫn cùng một lối trình bày: nhãn nhỏ + nội dung.
 *
 * Nhãn là phần bắt buộc: lý do khám (khách nói) và ghi chú (lễ tân dặn nội bộ,
 * vd "Chưa thu phí") nằm sát nhau, không có nhãn thì đọc lướt là nhầm hai thứ.
 * ══════════════════════════════════════════════════════════════════════════ */

.appt-note-line {
    margin-top: 3px;
    line-height: 1.35;
    color: var(--ds-neutral-700);
}

.appt-note-tag {
    display: inline-block;
    background: var(--ds-info-soft);
    color: var(--ds-info-text);
    border-radius: 4px;
    padding: 0 5px;
    margin-right: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
 * MENU ĐỔI TRẠNG THÁI NHANH (lịch hẹn)
 *
 * Menu do JS gắn thẳng vào <body> nên phải định vị tuyệt đối theo trang. Lý do
 * không để nó nằm trong thẻ lịch hẹn: ô lưới tuần/tháng và cột bảng điều phối
 * đều có overflow ẩn, menu con sẽ bị cắt mất một nửa.
 * ══════════════════════════════════════════════════════════════════════════ */

.appt-status-menu {
    position: absolute;
    z-index: 2000;
    min-width: 170px;
    padding: 4px;
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(var(--ds-neutral-900-rgb), 0.14);
}

.appt-status-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-neutral-800);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.appt-status-menu__item:hover {
    background: var(--ds-neutral-100);
}

.appt-status-menu__item.is-current {
    font-weight: 600;
    background: var(--ds-neutral-50);
}

.appt-status-menu__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.appt-status-menu__dot.status-scheduled { background-color: var(--appt-scheduled); }
.appt-status-menu__dot.status-confirmed { background-color: var(--appt-confirmed); }
.appt-status-menu__dot.status-arrived { background-color: var(--appt-arrived); }
.appt-status-menu__dot.status-in_progress { background-color: var(--appt-in_progress); }
.appt-status-menu__dot.status-completed { background-color: var(--appt-completed); }
.appt-status-menu__dot.status-cancelled { background-color: var(--appt-cancelled); }
.appt-status-menu__dot.status-no_show { background-color: var(--appt-no_show); }
.appt-status-menu__dot.status-rescheduled { background-color: var(--appt-rescheduled); }

/* Nền đặc theo trạng thái, dùng lại được ở mọi màn (chip lưới tuần, badge…).
   Ghép cùng class status-<mã>; JS đổi nhanh chỉ tráo class status-* nên phần
   còn lại của kiểu dáng giữ nguyên. */
.appt-solid.status-scheduled { background-color: var(--appt-scheduled); color: var(--appt-on-solid); }
.appt-solid.status-confirmed { background-color: var(--appt-confirmed); color: var(--appt-on-solid); }
.appt-solid.status-arrived { background-color: var(--appt-arrived); color: var(--appt-on-solid); }
.appt-solid.status-in_progress { background-color: var(--appt-in_progress); color: var(--appt-on-solid); }
.appt-solid.status-completed { background-color: var(--appt-completed); color: var(--appt-on-solid); }
.appt-solid.status-cancelled { background-color: var(--appt-cancelled); color: var(--appt-on-solid); }
.appt-solid.status-no_show { background-color: var(--appt-no_show); color: var(--appt-on-solid); }
.appt-solid.status-rescheduled { background-color: var(--appt-rescheduled); color: var(--appt-on-solid); }

/* Badge/thẻ bấm được thì phải trông bấm được. */
[data-appt-status-toggle] {
    cursor: pointer;
}

[data-appt-status-toggle].is-saving {
    opacity: 0.55;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * TÁCH VAT TRÊN Ô SỐ LIỆU
 * «7.079.367.538đ chưa VAT · 53.417.452đ VAT» viết liền một dòng là dãy chữ số
 * dài không ngắt, mắt không bắt được đâu là nhãn đâu là số.
 *
 * Nhãn nằm CẠNH số, không nằm trên: ô doanh thu ở trang chủ hẹp, xếp nhãn trên
 * số là mỗi ô thành bốn dòng chồng nhau — rối hơn hẳn kiểu viết liền ban đầu.
 * Mỗi cặp nhãn-số là một khối không tách rời (nowrap); chỉ được xuống dòng GIỮA
 * hai cặp khi hẹp quá.
 * ══════════════════════════════════════════════════════════════════════════ */

.ds-vat-split {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.1rem;
    margin-top: .4rem;
    padding-top: .35rem;
    border-top: 1px solid var(--ds-neutral-200, rgba(0, 0, 0, .08));
}

.ds-vat-split > div {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;
}

.ds-vat-split .k {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-neutral-400);
}

.ds-vat-split .v {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ds-neutral-600);
    /* Số tiền thẳng cột khi hai cặp nằm cạnh nhau. */
    font-variant-numeric: tabular-nums;
}

/* Trên nền tối (ô «Tổng thực thu») chữ xám nhạt chìm mất. */
.ds-vat-split--dark {
    border-top-color: rgba(255, 255, 255, .18);
}

.ds-vat-split--dark .k { color: rgba(255, 255, 255, .62); }
.ds-vat-split--dark .v { color: rgba(255, 255, 255, .92); }

/* ===== Modal cuộn được khi thân nằm trong <form> =====
   Bootstrap đặt `.modal-dialog-scrollable .modal-content { display:flex;
   flex-direction:column; max-height:100%; overflow:hidden }` và cho
   `.modal-body` tự cuộn. Nhưng khi header/body/footer bị bọc trong một <form>,
   chính <form> mới là con flex — body không còn bị ràng chiều cao, nó phình ra,
   và `overflow:hidden` của modal-content CẮT MẤT phần đáy: nút Lưu nằm ngoài
   màn hình và không cuộn tới được.

   Ca thật: đơn có nhiều dòng xét nghiệm, hộp thoại «Sửa nhân viên trên đơn»
   không kéo xuống bấm Lưu được (phòng khám báo 02/10/2026).

   Cho <form> nhận luôn vai trò cột flex để body cuộn lại như thiết kế gốc. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    min-height: 0;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}