html, body {
    height: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

app {
    display: block;
    height: 100%;
}

/* ==========================================================================
   THAY THẾ LOGO XAF MẶC ĐỊNH BẰNG LOGO CÔNG TY TNHH THỰC PHẨM SÀI GÒN ECOFOOD
   ========================================================================== */
.header-logo {
    flex-shrink: 0;
    background-color: #ffffff !important;
    background-image: url('../images/CompanyLogo.png') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    width: 68px !important;
    height: 44px !important;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
    box-shadow: 0 1px 4px rgba(22, 101, 52, 0.14);
    margin-right: 8px;
}

/* Hiển thị rõ nét & phóng to Logo Sài Gòn EcoFood trên màn hình Splash Screen */
#applicationLoadingPanel .loading-image-wrapper {
    width: 240px !important;
    height: 240px !important;
}

#applicationLoadingPanel .loading-border,
#applicationLoadingPanel .loading-floated-circle {
    width: 240px !important;
    height: 240px !important;
}

#applicationLoadingPanel #loadingBackground {
    width: 216px !important;
    height: 216px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(22, 101, 52, 0.16) !important;
}

#applicationLoadingPanel .loading-image {
    width: 185px !important;
    height: auto !important;
    max-width: 185px !important;
    max-height: 160px !important;
    object-fit: contain !important;
}

#applicationLoadingPanel .loading-caption {
    display: none !important;
}

/* Ẩn dòng AboutInfo + Version mặc định ở góc trái dưới thanh menu của XAF */
.about-info,
.xaf-about-info,
.xaf-sidebar-footer .about-info {
    display: none !important;
}

/* Dải ghi nhận Bản quyền Công ty & Kiến trúc Phát triển: Lâm Thanh Phương */
.ecofood-author-footer {
    position: fixed;
    bottom: 6px;
    right: 16px;
    z-index: 999;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #86efac;
    border-left: 4px solid #16a34a;
    border-radius: 20px;
    padding: 4px 14px 4px 8px;
    font-size: 0.78rem;
    color: #1e293b;
    box-shadow: 0 2px 10px rgba(22, 101, 52, 0.12);
}

.ecofood-footer-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}

.ecofood-author-name {
    color: #15803d;
    font-weight: 700;
}

@media print {
    .ecofood-author-footer {
        display: none !important;
    }
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ==========================================================================
   THIẾT KẾ MENU ĐIỀU HƯỚNG NỀN TRẮNG TINH KHIẾT, CHỮ NHỎ GỌN, RÕ RÀNG, HIỆN ĐẠI
   ========================================================================== */

/* 1. Khung Sidebar nền Trắng (#ffffff) sạch sẽ, thanh thoát */
.sidebar,
.xaf-sidebar,
.main > .sidebar,
.xaf-navmenu,
.dxbl-accordion {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.sidebar {
    min-width: 245px !important;
    width: 245px !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* Ô tìm kiếm Filter ở đầu thanh Menu gọn gàng trên nền trắng */
.sidebar .dxbl-navigation-filter,
.xaf-navmenu .dxbl-navigation-filter {
    margin: 8px 10px 6px 10px !important;
}

.sidebar .dxbl-text-edit {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
}

/* 2. XÓA TRIỆT ĐỂ GẠCH CHÂN (UNDERLINE) CỦA XAF TRÊN MỌI MỤC MENU */
.clickable-xaf-nav-item > a .xaf-nav-link,
.clickable-xaf-nav-item > div > a .xaf-nav-link,
.xaf-nav-link,
.xaf-nav-item a,
.dxbl-accordion a,
.dxbl-accordion a:hover,
.dxbl-accordion a:focus,
.dxbl-accordion-item-content,
.dxbl-accordion-item-text,
.dxbl-grid td a {
    text-decoration: none !important;
}

.dxbl-grid td a:hover {
    text-decoration: underline !important;
}

/* 3. Tiêu đề Nhóm Cha (Danh mục chuẩn, Báo giá đối tác...): Nền xám trắng dịu, chữ vừa vặn, đồng màu icon */
.dxbl-accordion .dxbl-accordion-group {
    margin: 3px 8px !important;
    border: none !important;
    background-color: #ffffff !important;
}

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-group-header {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #16a34a !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    min-height: 34px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-group-header:hover {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    border-left-color: #15803d !important;
}

.dxbl-accordion-group-header .xaf-nav-link,
.dxbl-accordion-group-header .dxbl-accordion-item-text {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: 0.01em;
}

/* Đồng bộ màu Icon Nhóm Cha sang tông Xám Xanh (Monochrome) thanh lịch, không lòe loẹt */
.dxbl-accordion-group-header .xaf-nav-menu-item-icon,
.dxbl-accordion-group-header .dxbl-image,
.dxbl-accordion-group-header img,
.dxbl-accordion-group-header svg {
    filter: grayscale(100%) brightness(0.45) contrast(1.3) !important;
    opacity: 0.82 !important;
    width: 15px !important;
    height: 15px !important;
}

/* 4. Danh sách Mục Con bên trong mỗi Nhóm: Khít gọn, chữ nhỏ rõ nét, nền trắng tinh */
.dxbl-accordion-group-body {
    background-color: #ffffff !important;
    padding: 0 !important;
}

.dxbl-accordion-group-body > .dxbl-accordion-items-container {
    margin-left: 20px !important;
    padding-left: 10px !important;
    margin-top: 3px !important;
    margin-bottom: 5px !important;
    border-left: 1.5px solid #e2e8f0 !important;
}

/* Ẩn khoảng trắng thụt lề thừa & ẩn icon con để giao diện phẳng, sạch sẽ */
.dxbl-accordion-group-body .dxbl-accordion-item-indent,
.dxbl-accordion-group-body .dxbl-accordion-item-indent-end,
.dxbl-accordion-group-body .xaf-nav-menu-item-icon,
.dxbl-accordion-group-body .dxbl-image {
    display: none !important;
}

/* Từng dòng Mục Con: Chiều cao gọn gàng (không bị giãn cách thưa) */
.dxbl-accordion-group-body .dxbl-accordion-item,
.dxbl-accordion-group-body .xaf-nav-item {
    margin: 1px 6px 1px 0 !important;
    padding: 0 !important;
    border: none !important;
    min-height: 28px !important;
}

.dxbl-accordion-group-body .dxbl-accordion-item-content {
    display: flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    min-height: 28px !important;
    border-radius: 5px !important;
    background-color: transparent !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Dấu chấm tròn nhỏ (•) tinh tế phía trước chữ Mục Con */
.dxbl-accordion-group-body .dxbl-accordion-item-content::before {
    content: "" !important;
    display: inline-block !important;
    width: 4.5px !important;
    height: 4.5px !important;
    border-radius: 50% !important;
    background-color: #94a3b8 !important;
    margin-right: 9px !important;
    flex-shrink: 0 !important;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

/* Chữ Mục Con: Cỡ chữ nhỏ gọn (0.82rem ~ 13px), rõ nét, màu xám than dễ đọc trên nền trắng */
.dxbl-accordion-group-body .xaf-nav-link,
.dxbl-accordion-group-body .dxbl-accordion-item-text {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-decoration: none !important;
}

/* Khi rê chuột vào Mục Con */
.dxbl-accordion-group-body .dxbl-accordion-item-content:hover {
    background-color: #f0fdf4 !important;
}

.dxbl-accordion-group-body .dxbl-accordion-item-content:hover .xaf-nav-link,
.dxbl-accordion-group-body .dxbl-accordion-item-content:hover .dxbl-accordion-item-text {
    color: #15803d !important;
    font-weight: 500 !important;
}

.dxbl-accordion-group-body .dxbl-accordion-item-content:hover::before {
    background-color: #16a34a !important;
}

/* Khi Mục Con đang được chọn (Active) */
.dxbl-accordion-group-body .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content,
.dxbl-accordion-group-body .dxbl-accordion-item-selected > .dxbl-accordion-item-content,
.dxbl-accordion-group-body .xaf-nav-item.active .dxbl-accordion-item-content {
    background-color: #dcfce7 !important;
}

.dxbl-accordion-group-body .dxbl-accordion-item.dxbl-active .xaf-nav-link,
.dxbl-accordion-group-body .dxbl-accordion-item-selected .xaf-nav-link,
.dxbl-accordion-group-body .dxbl-accordion-item.dxbl-active .dxbl-accordion-item-text {
    color: #166534 !important;
    font-weight: 600 !important;
}

.dxbl-accordion-group-body .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content::before,
.dxbl-accordion-group-body .dxbl-accordion-item-selected > .dxbl-accordion-item-content::before {
    background-color: #16a34a !important;
    transform: scale(1.25);
}

/* ==========================================================================
   TỐI ƯU GIAO DIỆN BẢNG DỮ LIỆU (DXGRID) & BỐ CỤC CHUYÊN NGHIỆP ECOFOOD ERP
   ========================================================================== */

/* Tiêu đề cột bảng (Header) luôn nằm gọn trên 1 dòng, in đậm rõ nét, nền xám nhạt sang trọng */
.dxbl-grid .dxbl-grid-header-row th,
.dxbl-grid .dxbl-grid-header {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.dxbl-grid .dxbl-grid-header-content {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Dòng dữ liệu gọn gàng, số liệu thẳng hàng chuẩn kế toán */
.dxbl-grid td {
    white-space: nowrap !important;
    vertical-align: middle !important;
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Khung nhóm trong màn hình nhập liệu chi tiết (DetailView) */
.dxbl-group-header {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-left: 3px solid #16a34a !important;
}

.dxbl-fl-item-caption {
    font-weight: 500 !important;
    color: #334155 !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   CHỨC NĂNG PHÓNG TO FULL MÀN HÌNH PHẦN 3 & THU GỌN / MỞ RỘNG PHẦN 1, 2
   ÁP DỤNG ĐỒNG BỘ TRÊN CÁC PHIẾU (ĐƠN ĐẶT HÀNG, GIAO HÀNG, MUA HÀNG, BÁO GIÁ, SƠ CHẾ...)
   TUYỆT ĐỐI KHÔNG ẢNH HƯỞNG ĐẾN MENU ĐIỀU HƯỚNG BÊN TRÁI
   ========================================================================== */

/* Khóa bảo vệ tuyệt đối: Không bao giờ hiển thị nút thu gọn trong thanh Menu bên trái */
.sidebar .ecofood-section-tools,
.xaf-sidebar .ecofood-section-tools,
.xaf-navmenu .ecofood-section-tools,
.dxbl-accordion .ecofood-section-tools {
    display: none !important;
}

/* Thanh tiêu đề Phần 1, Phần 2, Phần 3 luôn nằm gọn trên 1 dòng ngang duy nhất (cao 38px) */
.dxbl-fl .dxbl-group-header.ecofood-enhanced-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 4px 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Mọi thành phần chữ tiêu đề bên trái luôn nằm trên 1 dòng, không bao giờ bị ép rớt dòng dọc */
.dxbl-fl .dxbl-group-header.ecofood-enhanced-header > *:not(.ecofood-section-tools) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
}

.dxbl-fl .dxbl-group-header.ecofood-enhanced-header:hover {
    background-color: #f0fdf4 !important;
    border-left-color: #15803d !important;
}

.dxbl-fl .dxbl-group-header.ecofood-grid-section-header {
    background-color: #f0f9ff !important;
    border-left: 4px solid #0284c7 !important;
}

.dxbl-fl .dxbl-group-header.ecofood-grid-section-header:hover {
    background-color: #e0f2fe !important;
    border-left-color: #0369a1 !important;
}

/* Cụm nút điều khiển nằm gọn bên phải thanh tiêu đề mỗi Phần */
.ecofood-section-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

.ecofood-sec-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.ecofood-sec-btn:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Nút Thu gọn / Mở rộng đang ở trạng thái Đã thu gọn */
.ecofood-sec-btn.ecofood-sec-btn-collapsed {
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.ecofood-sec-btn.ecofood-sec-btn-collapsed:hover {
    background-color: #bbf7d0 !important;
}

/* Nút Phóng to Full Phần 3 (Nổi bật màu xanh dương hiện đại) */
.ecofood-sec-btn.ecofood-sec-btn-fullscreen {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
    padding: 3px 12px !important;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.22) !important;
}

.ecofood-sec-btn.ecofood-sec-btn-fullscreen:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    color: #ffffff !important;
}

/* Nút Thu nhỏ về 3 phần khi đang ở chế độ Full Screen (Màu cam hổ phách nổi bật) */
.ecofood-sec-btn.ecofood-sec-btn-fullscreen.is-active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

.ecofood-sec-btn.ecofood-sec-btn-fullscreen.is-active:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
}

/* Khi một Phần (Phần 1, Phần 2) đang được Thu gọn: chỉ ẩn phần thân, giữ nguyên thanh tiêu đề 38px */
.ecofood-section-collapsed > .dxbl-group-body,
.ecofood-section-collapsed > .dxbl-fl-group-body,
.ecofood-section-collapsed > .card-body,
.ecofood-section-body-collapsed {
    display: none !important;
}

.ecofood-section-collapsed > .dxbl-group-header {
    background-color: #f8fafc !important;
    border-left: 4px solid #16a34a !important;
    border-bottom: 1px dashed #cbd5e1 !important;
    border-radius: 6px !important;
}

/* Ẩn hoàn toàn Phần 1 & Phần 2 khi Phần 3 đang ở chế độ Phóng to Full Màn Hình */
.ecofood-hidden-for-fullscreen {
    display: none !important;
}

/* Trạng thái Phần 3 đang Phóng to Full Màn Hình */
.ecofood-section-is-fullscreen {
    margin-top: 0 !important;
    border: 2px solid #0284c7 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.12) !important;
}

.ecofood-section-is-fullscreen > .dxbl-group-header {
    background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%) !important;
    border-left: 5px solid #0284c7 !important;
    border-bottom: 1px solid #bae6fd !important;
}

/* Tự động kéo giãn chiều cao bảng danh sách mặt hàng (DxGrid) khi Phóng to Full Phần 3 */
.ecofood-section-is-fullscreen .dxbl-grid {
    min-height: calc(100vh - 220px) !important;
}