/* ===========================================================================
   V-MAX app overrides — chỉ bổ sung trên nền template Materialize (core.css).
   KHÔNG định nghĩa lại class Bootstrap (.card/.badge/.table...) để tránh xung đột.
   =========================================================================== */

/* Ẩn viền focus khi FocusOnNavigate tự focus tiêu đề lúc điều hướng */
h1:focus, h1:focus-visible, [tabindex]:focus, [tabindex]:focus-visible { outline: none; }

/* --- Splash khi tải WASM --- */
.vmax-splash {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1rem;
    background: var(--bs-body-bg, #fff);
}
.vmax-splash-text { color: var(--bs-secondary-color, #697a8d); font-size: .95rem; }

/* Navbar detached dùng backdrop-filter (blur) -> tạo "containing block" khiến mọi
   position:fixed con (modal, backdrop dropdown) bị NHỐT trong navbar 64px.
   Tắt blur để modal/backdrop bung ra viewport như mong đợi. */
.layout-navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --- Dropdown Blazor-native (dùng lại style .dropdown-menu của theme, tự định vị) --- */
.vmax-dropdown { position: relative; display: inline-flex; }
.vmax-dropdown-backdrop { position: fixed; inset: 0; z-index: 1040; }
.vmax-dropdown-menu {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 1050;
    display: block; min-width: 12rem; margin: 0;
    transform-origin: top right;
    animation: vmaxPop .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Animation mượt (thuần CSS, không ảnh hưởng tốc độ tải dữ liệu) ---------- */
@keyframes vmaxPop {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes vmaxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes vmaxModalIn {
    from { opacity: 0; transform: translateY(-28px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Modal: fade nền + trượt/scale hộp thoại khi mở */
.modal-backdrop.show { animation: vmaxFade .18s ease-out; }
.modal.show { animation: vmaxFade .18s ease-out; }
.modal.show .modal-dialog { animation: vmaxModalIn .24s cubic-bezier(.2, .7, .3, 1); }

/* Chuyển động tinh tế cho phần tử tương tác */
.menu-link, .dropdown-item, .list-group-item-action, .btn, .card, .nav-link, .badge {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .12s ease;
}
.list-group-item-action:hover { transform: translateX(2px); }

/* Nội dung trang xuất hiện mượt khi điều hướng (không chặn tải dữ liệu) */
.content-wrapper .container-fluid > * { animation: vmaxFade .22s ease-out; }

/* Tôn trọng người dùng tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
    .vmax-dropdown-menu, .modal.show, .modal.show .modal-dialog, .modal-backdrop.show,
    .content-wrapper .container-fluid > *, .list-group-item-action:hover {
        animation: none !important; transform: none !important;
    }
}
.vmax-dropdown-menu .dropdown-item { cursor: pointer; display: flex; align-items: center; }
.vmax-usermenu { min-width: 15rem; }

/* --- Thanh chọn ngôn ngữ góc phải trang login --- */
.vmax-login-topbar { position: absolute; top: 1.25rem; inset-inline-end: 1.5rem; z-index: 10; }

/* --- Active state cho menu sidebar (NavLink gắn .active lên <a>) --- */
.menu-vertical .menu-inner > .menu-item > .menu-link.active,
.menu-vertical .menu-inner > .menu-item > .menu-link.active:hover {
    background-color: var(--bs-menu-active-bg, rgba(105, 108, 255, .16));
    color: var(--bs-menu-active-color, #696cff);
}

/* Avatar chữ cái đầu */
.avatar .avatar-initial { display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* Blazor error UI */
#blazor-error-ui {
    background: #fff3cd; color: #664d03; bottom: 0; left: 0; width: 100%;
    box-shadow: 0 -1px 4px rgba(0,0,0,.15); display: none; padding: .7rem 1.25rem; position: fixed; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .9rem; top: .6rem; }