/* =============================================================================
 * izy-brand.css — MÀU CHỦ ĐẠO IZY (11/11/2026)
 * Mặc định của theme Corporate đổi từ xanh sáng Velzon #687cfe sang xanh navy IZY #224080.
 *   data-theme-colors=default (hoặc chưa đặt) → navy #224080; nền tối dùng bản sáng hơn #5580dc
 *   data-theme-colors=indigo                  → xanh sáng #687cfe cũ (giữ lại làm tuỳ chọn)
 *   green / purple / blue                     → nguyên bản Velzon trong app.min.css
 * Navy #224080 trên nền tối chỉ đạt tương phản ~1.6:1 nên KHÔNG dùng thẳng cho dark:
 *   #5580dc = nền nút/chữ nhấn (4.1:1 trên card #212529), link #7b9cec (5.7:1).
 * File riêng (không nằm trong fixed.css) vì các trang độc lập — đăng nhập, đăng ký, mời, hướng dẫn,
 * đánh giá, 2FA — chỉ nạp app.min.css; mọi trang nạp app.min.css đều phải nạp file này ngay sau.
 * Bảng chọn: resources/views/backend/pages/theme_setting.blade.php; app.js đã thêm case "indigo".
 * ============================================================================= */

[data-theme=corporate] {
    --vz-primary: #224080;
    --vz-primary-rgb: 34, 64, 128;
    --vz-primary-bg-subtle: rgba(34, 64, 128, 0.12);
    --vz-primary-border-subtle: rgba(34, 64, 128, 0.3);
    --vz-primary-text-emphasis: #1a3163;
    /* Link đi theo màu chủ đạo đang chọn (bản gốc ghim cứng #687cfe cho mọi màu). */
    --vz-link-color: var(--vz-primary);
    --vz-link-color-rgb: var(--vz-primary-rgb);
    --vz-link-hover-color: #1a3163;
    --vz-link-hover-color-rgb: 26, 49, 99;
}

[data-theme=corporate]:is(:not([data-theme-colors]), [data-theme-colors=default])[data-bs-theme=dark] {
    --vz-primary: #5580dc;
    --vz-primary-rgb: 85, 128, 220;
    --vz-primary-bg-subtle: rgba(85, 128, 220, 0.18);
    --vz-primary-border-subtle: rgba(85, 128, 220, 0.35);
    --vz-primary-text-emphasis: #8fb0f5;
    --vz-link-color: #7b9cec;
    --vz-link-color-rgb: 123, 156, 236;
    --vz-link-hover-color: #a3bcf5;
    --vz-link-hover-color-rgb: 163, 188, 245;
}

[data-theme=corporate][data-theme-colors=indigo] {
    --vz-primary: #687cfe;
    --vz-primary-rgb: 104, 124, 254;
    --vz-primary-bg-subtle: rgba(104, 124, 254, 0.15);
    --vz-primary-border-subtle: rgba(104, 124, 254, 0.3);
    --vz-primary-text-emphasis: #4e5dbf;
    --vz-link-hover-color: #5363cb;
    --vz-link-hover-color-rgb: 83, 99, 203;
}
[data-theme=corporate][data-theme-colors=green]  { --vz-link-hover-color: #276b51; --vz-link-hover-color-rgb: 39, 107, 81; }
[data-theme=corporate][data-theme-colors=purple] { --vz-link-hover-color: #7446ac; --vz-link-hover-color-rgb: 116, 70, 172; }
[data-theme=corporate][data-theme-colors=blue]   { --vz-link-hover-color: #008cbb; --vz-link-hover-color-rgb: 0, 140, 187; }

/* Topbar "dark" của Corporate ghim cứng #687cfe → đi theo màu chủ đạo (chỉ nền sáng). */
[data-theme=corporate]:not([data-bs-theme=dark])[data-topbar=dark] {
    --vz-header-bg: var(--vz-primary);
    --vz-header-border: var(--vz-primary);
    --vz-header-item-bg: color-mix(in srgb, var(--vz-primary) 90%, white);
    --vz-topbar-user-bg: color-mix(in srgb, var(--vz-primary) 88%, black);
}

/* Ô màu trong bảng tuỳ biến */
[data-theme=corporate] .card-radio .form-check-label[for=themeColor-01] { background-color: #224080; }
[data-theme=corporate] .card-radio .form-check-label[for=themeColor-05] { background-color: #687cfe; }
html:not([data-theme=corporate]) .theme-color-corporate-only { display: none; }
.theme-color-picker .card-radio .form-check-input:checked + .form-check-label:before { color: #fff; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); line-height: 1; }

/* =============================================================================
 * LOGO Ô NGŨ HÀNH ở sidebar / topbar (11/11/2026) — docs/rules/logo-sidebar.md
 * Chống chìm vào nền, KHÔNG phụ thuộc màu chủ đạo hay sáng/tối:
 *   1. Ô có nền riêng, chữ trong ô đã tương phản với nền của chính ô.
 *   2. Viền + tên thương hiệu dùng màu chữ của thanh chứa (token menu / header) — thứ luôn tương phản với nền thanh đó.
 *   3. izy-logo.js chọn mặt nghỉ ngược độ sáng với nền (nền tối → ô sáng, nền sáng → ô navy).
 * ============================================================================= */
.navbar-menu .navbar-brand-box .logo      { color: var(--vz-vertical-menu-item-active-color); }
#page-topbar .navbar-brand-box .logo      { color: var(--vz-header-item-color); }
[data-layout=horizontal] .navbar-menu .navbar-brand-box .logo { color: var(--vz-header-item-color); }

.izy-logo {
    display: inline-flex; flex: none;
    border-radius: calc(var(--hl-size) * .24);
    --hl-radius: .24em;
    --hl-void: transparent;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent), 0 2px 6px rgba(0, 0, 0, .2);
    vertical-align: middle;
}
/* Đứng yên ở mặt --izy-face (0 Mộc · 1 Hoả · 2 Thổ · 3 Kim · 4 Thuỷ); izy-logo.js thêm .is-flipping trong đúng một nhịp. */
/* Mặt nghỉ mặc định đặt sẵn bằng CSS (khớp lựa chọn của izy-logo.js) để logo KHÔNG đổi mặt sau khi trang vẽ. */
.izy-logo { --izy-face: 3; }
:is([data-sidebar=light]):not([data-bs-theme=dark]) .navbar-menu .izy-logo,
[data-topbar=light]:not([data-bs-theme=dark]) #page-topbar .izy-logo { --izy-face: 4; }
.izy-logo .hl-cell { /* [hub-loader-dao-chieu] */ --hl-at: calc(var(--hl-step) * (var(--izy-face) - 9)); }
.izy-logo:not(.is-flipping) .hl-cell,
.izy-logo:not(.is-flipping) .hl-cell > i,
.izy-logo:not(.is-flipping) .hl-cell > i::after { animation-play-state: paused; }
/* Trước khi izy-loader.js chạy (hoặc JS tắt): giữ chỗ bằng một ô màu ô Thuỷ của sprite (#5b8dee — sprite IZY; Core hub-loader là #0f4c81), không nhảy bố cục. */
.izy-logo izy-loader:not(.izy-loader) {
    display: block;
    width: var(--hl-size); height: var(--hl-size);
    border-radius: inherit;
    background: #5b8dee;
}
.izy-logo .izy-loader { --hl-size: inherit; }
.izy-logo-wrap {
    display: inline-flex; align-items: center; gap: .6rem;
    max-width: 100%; line-height: 1.15; vertical-align: middle;
}
.izy-logo-name {
    font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
    color: inherit;
    max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =============================================================================
 * POWERED BY ELGC — dòng nhỏ ghim đáy sidebar (11/11/2026) — docs/rules/logo-sidebar.md
 * Mọi công ty (có logo riêng hay không). Markup: master.blade.php, ngay sau #scrollbar, trong .app-menu.navbar-menu (app.js chụp
 * innerHTML của .navbar-menu rồi vẽ lại lúc load — dòng này nằm trong bản chụp nên vẫn còn).
 * Vị trí: tuyệt đối ở đáy .navbar-menu (thanh fixed, cao cả màn). Velzon chừa padding-bottom 70 + 25px (70 = ô logo phía trên,
 * #scrollbar h-100); đổi 25 → --izy-powered-h để vùng cuộn kết thúc đúng ở mép trên dòng này: không che mục cuối, không thêm
 * thanh cuộn. Màu = màu chữ menu (--vz-vertical-menu-item-color) nên theo sidebar sáng / tối / gradient và nền tối toàn trang.
 * Thu gọn (sm, sm-hover khi chưa rê chuột): chỉ còn "ELGC" cỡ rất nhỏ trong cột 70px. Menu ngang / hai cột: ẩn.
 * ============================================================================= */
.izy-powered { display: none; }
html:not([data-layout=horizontal]):not([data-layout=twocolumn]) .navbar-menu {
    --izy-powered-h: 28px;
    padding-bottom: calc(70px + var(--izy-powered-h));
}
html:not([data-layout=horizontal]):not([data-layout=twocolumn]) .izy-powered {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: .3em;
    height: var(--izy-powered-h);
    padding: 0 .5rem;
    overflow: hidden; white-space: nowrap;
    font-size: 11px; line-height: 1; letter-spacing: .02em;
    /* mờ bằng color-mix chứ không opacity: ở sidebar thu gọn dòng này có nền, nền phải đặc */
    color: color-mix(in srgb, var(--vz-vertical-menu-item-color) 65%, transparent);
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
}
.izy-powered-name { font-weight: 700; }
/* Thu gọn: menu tràn ra ngoài #scrollbar (overflow visible, jt-sidebar-collapsed.js dịch bằng translateY) → dòng này cần nền để
   mục menu trôi xuống dưới không lẫn vào chữ; jt-sidebar-collapsed.js chừa thêm đúng chiều cao dòng này ở đáy khi cuộn. */
html:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .izy-powered {
    background: var(--vz-vertical-menu-bg);
    padding: 0;
    font-size: 9px;
}
html:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .izy-powered-by,
html:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:not(:hover) .izy-powered-by { display: none; }
html:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:not(:hover) .izy-powered { padding: 0; font-size: 9px; }
/* Bố cục "detached" (≥1024px): Velzon đổi padding thanh thành 10px trên/dưới, không có ô logo. Tiền tố html: cùng độ ưu tiên với
   luật padding ở trên (html:not…:not… .navbar-menu) và đứng sau nên thắng; các luật sm phía trên cũng vậy. */
@media (min-width: 1024.1px) {
    html:is([data-layout=vertical], [data-layout=semibox])[data-layout-style=detached] .navbar-menu {
        padding-bottom: calc(10px + var(--izy-powered-h));
    }
}