/* Vaadin containers sometimes clip horizontal overflow; allow X-scroll in the main content area */
html, body {
    width: 100%;
    max-width: 100%;
}

vaadin-app-layout::part(content) {
    overflow-x: auto;
}

/* Ensure flex children are allowed to overflow instead of forcing shrink-to-fit */
vaadin-vertical-layout,
vaadin-horizontal-layout {
    min-width: 0;
}

/* общий ряд */
.dashboard-row {
    display: flex;
    gap: 12px;
    align-items: stretch;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    /* allow swipe/scroll to reach columns on the right */
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;

    /* optional: nicer horizontal snapping while scrolling */
    scroll-snap-type: x proximity;
}

/* each column snaps nicely when scrolling */
.dashboard-col,
.dashboard-col--main {
    scroll-snap-align: start;
}


/* колонки по умолчанию */
.dashboard-col {
    /* fixed-width columns so horizontal scrolling works predictably */
    flex: 0 0 260px;
    min-width: 260px;   /* чтобы не схлопывались */
}

/* main column: fixed min width, but can grow on wide screens */
.dashboard-col--main {
    flex: 1 1 600px;   /* allow grow */
    min-width: 420px;
}

/* <= 1200px: 2 колонки в ряд */
@media (max-width: 1200px) {
    .dashboard-row {
        /* keep everything in one row and allow swipe */
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .dashboard-col {
        flex: 0 0 360px;
        min-width: 360px;
    }
    .dashboard-col--main {
        flex: 0 0 520px;
        min-width: 360px;
    }
}

/* <= 800px: всё в одну колонку */
@media (max-width: 800px) {
    .dashboard-col,
    .dashboard-col--main {
        flex: 1 1 100%;
        min-width: 0;
    }
}

.dashboard-col > vaadin-vertical-layout > vaadin-horizontal-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-col > vaadin-vertical-layout > vaadin-horizontal-layout vaadin-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.dashboard-col > vaadin-vertical-layout > vaadin-horizontal-layout * {
    min-width: 0;
}