/* =====================================================================
   SmartTheme.css — bảng màu dùng chung cho toàn bộ form (theo bản WinForms)
   - Áp cho mọi trang trong .content-wrapper và mọi dialog Syncfusion (.e-dialog)
   - Trang đăng nhập (LoginLayout) không có .content-wrapper nên không bị ảnh hưởng
   - Muốn chỉnh tông màu: đổi các biến --smart-* ở :root
   ===================================================================== */
:root {
    --smart-bg: #f7f9fc;            /* nền trang */
    --smart-panel-bg: #eef4fb;      /* panel lọc, khung thông tin phiếu, toolbar */
    --smart-panel-title: #dbe6f3;
    --smart-border: #cbd8e8;        /* viền panel, ô nhập */
    --smart-grid-line: #e1e7ef;     /* kẻ ô lưới */
    --smart-header-bg: #f2f6fb;     /* header lưới (gradient trên) */
    --smart-header-bg2: #e1eaf5;    /* header lưới (gradient dưới) */
    --smart-navy: #15428b;          /* chữ header, nhãn, tiêu đề */
    --smart-text: #1e1e1e;          /* chữ trong ô: mã, tên, ngày, mô tả */
    --smart-number: #1f4fc4;        /* số liệu */
    --smart-alt-row: #f8fafd;
    --smart-hover: #edf3fb;
    --smart-selected: #dbe8f8;
    --smart-footer-bg: #eff3f9;     /* dòng tổng, phân trang */
    --smart-red: #d40000;
}

/* ---------- Nền trang & khối card / panel ---------- */
.content-wrapper {
    background-color: var(--smart-bg);
    color: var(--smart-text);
}

    .content-wrapper .card {
        box-shadow: none;
        border: 1px solid var(--smart-border);
        border-radius: 2px;
        background-color: var(--smart-panel-bg);
        margin-bottom: 4px;
    }

    /* Panel chỉ tiêu tìm kiếm (các trang tra cứu) — gồm cả layout vì trang dùng chung không còn style riêng */
    .content-wrapper .custom-panel {
        border: 1px solid var(--smart-border);
        border-radius: 2px;
        background-color: var(--smart-panel-bg);
        padding: 2px;
        width: auto;
    }

    .content-wrapper .custom-panel-horizontal {
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 1px;
        border: none;
        background-color: transparent;
        width: auto;
    }

    .content-wrapper label,
    .e-dialog .form-group label {
        color: var(--smart-navy);
        font-size: 12px;
    }

    .content-wrapper .card label {
        font-weight: 600;
    }

/* ---------- Ô nhập: trắng, viền mảnh, focus viền navy ---------- */
:is(.content-wrapper, .e-dialog) .textbox-bordered {
    border: 1px solid var(--smart-border);
    border-radius: 2px;
    background-color: #fff;
    padding: 0;
}

    :is(.content-wrapper, .e-dialog) .textbox-bordered:focus-within {
        border-color: var(--smart-navy);
    }

:is(.content-wrapper, .e-dialog) .e-input-group,
:is(.content-wrapper, .e-dialog) .e-input-group.e-control-wrapper,
:is(.content-wrapper, .e-dialog) .input-custom.e-input-group,
:is(.content-wrapper, .e-dialog) .e-input-group.e-control-wrapper:not(.e-float-icon-left) {
    border: 1px solid var(--smart-border) !important;
    border-radius: 2px !important;
    background-color: #fff;
    box-shadow: none !important;
}

    :is(.content-wrapper, .e-dialog) .e-input-group.e-input-focus,
    :is(.content-wrapper, .e-dialog) .e-input-group.e-control-wrapper.e-input-focus {
        border-color: var(--smart-navy) !important;
    }

    :is(.content-wrapper, .e-dialog) .e-input-group input.e-input,
    :is(.content-wrapper, .e-dialog) .e-input-group.e-control-wrapper input.e-input,
    :is(.content-wrapper, .e-dialog) .e-input-group textarea.e-input {
        color: var(--smart-text);
        background-color: #fff;
    }

    :is(.content-wrapper, .e-dialog) .e-input-group .e-input-group-icon,
    :is(.content-wrapper, .e-dialog) .e-input-group.e-control-wrapper .e-input-group-icon {
        color: var(--smart-navy);
    }

/* Số chứng từ trên phiếu: in đậm (gắn CssClass="inv-voucher-no" cho SfTextBox) */
.e-dialog .inv-voucher-no input.e-input {
    font-weight: 700;
    font-size: 13px;
    color: var(--smart-navy);
}

/* ---------- Dialog ---------- */
.e-dialog {
    border: 1px solid var(--smart-border);
}

    .e-dialog .e-dlg-header-content {
        background: linear-gradient(to bottom, var(--smart-header-bg), var(--smart-header-bg2));
        border-bottom: 1px solid var(--smart-border);
        padding: 6px 12px;
    }

    .e-dialog .e-dlg-header,
    .e-dialog .e-dlg-header h4,
    .e-dialog .e-dlg-header h5 {
        color: var(--smart-navy);
        font-size: 14px;
        font-weight: 600;
        margin: 0;
    }

    .e-dialog.e-popup,
    .e-dialog.e-popup .e-dlg-content {
        background-color: var(--smart-bg);
        color: var(--smart-text);
    }

    .e-dialog .e-footer-content {
        background-color: var(--smart-panel-bg);
        border-top: 1px solid var(--smart-border);
    }

    /* Khung thông tin phiếu (pane trên của splitter) */
    .e-dialog .inv-groupbox,
    .e-dialog .e-splitter .e-pane > .p-2 {
        border: 1px solid var(--smart-border);
        border-radius: 2px;
        background-color: var(--smart-panel-bg);
        margin: 2px;
    }

    .e-dialog .e-splitter {
        border-color: var(--smart-border);
    }

        .e-dialog .e-splitter .e-split-bar {
            background-color: var(--smart-panel-title);
        }

/* ---------- Tab ---------- */
:is(.content-wrapper, .e-dialog) .e-tab .e-tab-header {
    background-color: var(--smart-panel-bg);
    border-bottom: 1px solid var(--smart-border);
}

    :is(.content-wrapper, .e-dialog) .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
    :is(.content-wrapper, .e-dialog) .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
        color: var(--smart-navy);
        font-size: 12px;
    }

    :is(.content-wrapper, .e-dialog) .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
        background-color: #fff;
        border: 1px solid var(--smart-border);
        border-bottom-color: #fff;
    }

    :is(.content-wrapper, .e-dialog) .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
        color: var(--smart-red);
        font-weight: 600;
    }

    :is(.content-wrapper, .e-dialog) .e-tab .e-tab-header .e-indicator {
        background-color: var(--smart-red);
    }

:is(.content-wrapper, .e-dialog) .e-tab .e-content {
    background-color: #fff;
}

/* ---------- Nút thanh công cụ (kiểu WinForms: xám nhạt, chữ navy, icon màu) ---------- */
:is(.content-wrapper, .e-dialog) .e-grid .e-toolbar {
    background-color: var(--smart-panel-bg);
    border-color: var(--smart-border);
}

:is(.content-wrapper, .e-dialog) .e-btn.e-outline.e-btn-custom {
    background: linear-gradient(to bottom, #ffffff, #e6ecf4);
    border: 1px solid var(--smart-border);
    color: var(--smart-navy);
}

    :is(.content-wrapper, .e-dialog) .e-btn.e-outline.e-btn-custom:hover {
        background: var(--smart-hover);
        border-color: var(--smart-navy);
    }

    :is(.content-wrapper, .e-dialog) .e-btn.e-outline.e-btn-custom.e-primary .e-btn-icon { color: #2e8b2e; }
    :is(.content-wrapper, .e-dialog) .e-btn.e-outline.e-btn-custom.e-danger .e-btn-icon { color: var(--smart-red); }
    :is(.content-wrapper, .e-dialog) .e-btn.e-outline.e-btn-custom.e-success .e-btn-icon { color: #b8860b; }
    :is(.content-wrapper, .e-dialog) .e-btn.e-outline.e-btn-custom.e-info .e-btn-icon { color: var(--smart-navy); }

/* ---------- Lưới Syncfusion ---------- */
:is(.content-wrapper, .e-dialog) .e-grid {
    border-color: var(--smart-border);
    font-size: 12px;
}

    :is(.content-wrapper, .e-dialog) .e-grid .e-gridheader,
    :is(.content-wrapper, .e-dialog) .e-grid .e-headercell,
    :is(.content-wrapper, .e-dialog) .e-grid .e-headercontent,
    :is(.content-wrapper, .e-dialog) .e-grid .e-filterbarcell {
        background: linear-gradient(to bottom, var(--smart-header-bg), var(--smart-header-bg2));
        color: var(--smart-navy);
    }

    :is(.content-wrapper, .e-dialog) .e-grid .e-headercell,
    :is(.content-wrapper, .e-dialog) .e-grid .e-headercell .e-headertext,
    :is(.content-wrapper, .e-dialog) .e-grid .e-headercell .e-icons {
        color: var(--smart-navy);
        font-weight: 600;
    }

    :is(.content-wrapper, .e-dialog) .e-grid .e-headercell,
    :is(.content-wrapper, .e-dialog) .e-grid .e-rowcell,
    :is(.content-wrapper, .e-dialog) .e-grid .e-groupcaption,
    :is(.content-wrapper, .e-dialog) .e-grid .e-summarycell {
        border-color: var(--smart-grid-line);
    }

    /* Chữ trong ô (độ ưu tiên cao hơn rule mặc định của theme Syncfusion) */
    :is(.content-wrapper, .e-dialog) .e-grid .e-gridcontent .e-rowcell:not(.e-editedbatchcell),
    :is(.content-wrapper, .e-dialog) .e-grid .e-content .e-rowcell:not(.e-editedbatchcell) {
        color: var(--smart-text);
    }

    /* Cột số: Syncfusion đặt inline style="text-align:right" cho cột canh phải;
       cột số canh giữa/trái thì gắn CustomAttributes class="inv-num" */
    :is(.content-wrapper, .e-dialog) .e-grid .e-gridcontent .e-rowcell[style*="text-align:right"],
    :is(.content-wrapper, .e-dialog) .e-grid .e-gridcontent .e-rowcell[style*="text-align: right"],
    :is(.content-wrapper, .e-dialog) .e-grid .e-gridcontent .e-rowcell.inv-num,
    :is(.content-wrapper, .e-dialog) .e-grid .e-content .e-rowcell[style*="text-align:right"],
    :is(.content-wrapper, .e-dialog) .e-grid .e-content .e-rowcell[style*="text-align: right"],
    :is(.content-wrapper, .e-dialog) .e-grid .e-content .e-rowcell.inv-num {
        color: var(--smart-number);
    }

    :is(.content-wrapper, .e-dialog) .e-grid .e-row {
        background-color: #fff;
    }

    :is(.content-wrapper, .e-dialog) .e-grid .e-altrow {
        background-color: var(--smart-alt-row);
    }

    :is(.content-wrapper, .e-dialog) .e-grid .e-row:hover .e-rowcell {
        background-color: var(--smart-hover);
    }

    :is(.content-wrapper, .e-dialog) .e-grid td.e-active,
    :is(.content-wrapper, .e-dialog) .e-grid .e-row.e-active .e-rowcell {
        background-color: var(--smart-selected) !important;
        color: var(--smart-navy);
    }

    /* Vùng kéo cột để gom nhóm, tiêu đề nhóm */
    :is(.content-wrapper, .e-dialog) .e-grid .e-groupdroparea {
        background-color: var(--smart-panel-bg);
        border-color: var(--smart-border);
        color: var(--smart-navy);
        font-size: 12px;
    }

    :is(.content-wrapper, .e-dialog) .e-grid .e-groupcaption {
        background-color: var(--smart-header-bg);
        color: var(--smart-navy);
        font-weight: 600;
    }

    /* Dòng "Tổng cộng" */
    :is(.content-wrapper, .e-dialog) .e-grid .e-summaryrow .e-summarycell,
    :is(.content-wrapper, .e-dialog) .e-grid .e-gridfooter,
    :is(.content-wrapper, .e-dialog) .e-grid .e-summarycontent {
        background-color: var(--smart-footer-bg);
        color: var(--smart-navy);
        font-weight: 600;
    }

    :is(.content-wrapper, .e-dialog) .e-grid .total-sum,
    :is(.content-wrapper, .e-dialog) .e-grid .total-sum p {
        color: var(--smart-red);
        font-weight: 600;
        margin: 0;
    }

    /* Phân trang */
    :is(.content-wrapper, .e-dialog) .e-grid .e-gridpager,
    :is(.content-wrapper, .e-dialog) .e-grid .e-pager {
        background-color: var(--smart-panel-bg);
        border-color: var(--smart-border);
        color: var(--smart-navy);
    }

        :is(.content-wrapper, .e-dialog) .e-grid .e-pager .e-currentitem,
        :is(.content-wrapper, .e-dialog) .e-grid .e-pager .e-currentitem:hover {
            background-color: var(--smart-navy);
            color: #fff;
        }

    :is(.content-wrapper, .e-dialog) .e-grid .e-emptyrow td {
        color: var(--smart-navy);
    }