/*@import "theme-editor.css";*/
@import url('./main-layout.css');
@import url('./views/files-view.css');

html {    
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
/*    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;
*/
}

/* Tùy chỉnh Sidebar cho giống Fintech App */
vaadin-app-layout::part(drawer) {
    background-color: var(--lumo-base-color);
    border-right: 1px solid var(--lumo-contrast-10pct);
}

/* Logo X-WEALTH */


/* SideNav Item */
vaadin-side-nav-item {
    font-weight: 500;
}

vaadin-side-nav-item::part(icon) {
    color: var(--lumo-primary-text-color);
}

/* Active state */
vaadin-side-nav-item[active] {
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-color);
    border-radius: var(--lumo-border-radius-m);
}

/* --- RAIL SIDEBAR (Thu gọn) --- */

/* 1. Hiệu ứng chuyển động mượt mà */
vaadin-app-layout {
    transition: --vaadin-app-layout-drawer-width 0.3s;
}

/* 2. Class kích hoạt chế độ thu gọn */
vaadin-app-layout.mini-sidebar {
    --vaadin-app-layout-drawer-width: 4.5rem; /* Thu nhỏ còn khoảng 72px */
}

/* 3. Ẩn text (label) của menu item khi thu gọn */
vaadin-app-layout.mini-sidebar vaadin-side-nav-item::part(label) {
    display: none;
}

/* 4. Ẩn mũi tên toggle của nhóm menu khi thu gọn */
vaadin-app-layout.mini-sidebar vaadin-side-nav-item::part(toggle-button) {
    display: none;
}

/* 5. Căn giữa icon khi thu gọn */
vaadin-app-layout.mini-sidebar vaadin-side-nav-item::part(icon) {
    margin-right: 0; /* Xóa margin mặc định */
}

/* 6. Xử lý Logo khi thu gọn */
/* Ẩn toàn bộ text logo */
vaadin-app-layout.mini-sidebar h2 {
    display: none;
}

/* Hiển thị phiên bản rút gọn của Logo (Optional) */
vaadin-app-layout.mini-sidebar header::after {
    content: "X"; /* Logo chữ cái đầu */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    background: linear-gradient(45deg, #0066cc, #00cc99);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin: 0 auto;
}

/* Căn giữa header chứa logo */
vaadin-app-layout.mini-sidebar header {
    justify-content: center;
    padding: 0;
}

/* Ẩn footer version text */
vaadin-app-layout.mini-sidebar footer span {
    display: none;
}

/* Style for the selected row in PartyGrid */
.party-grid-selected-row {
    background-color: var(--lumo-primary-color-10pct);
    font-weight: bold;
}