@import url('./main-layout.css');
@import url('./views/videa-view.css');
@import url('./views/e-materialy-view.css');
@import url('./views/forgot-password-view.css');
@import url('./views/ovocko-view.css');
@import url('./views/reset-password-view.css');
@import url('@fontsource/cabin/index.css');    html, spreadsheet-view-export, grid-with-filters-view-export {
      --lumo-border-radius-s: 1px;
      --lumo-border-radius-m: 2px;
      --lumo-border-radius-l: 4px;
#--lumo-font-family: Cabin;

    }

    [theme~="dark"] {
      --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);
      --lumo-primary-color-10pct: hsla(214, 86%, 55%, 0.1);
      --lumo-primary-color: hsla(214, 86%, 55%, 0.98);
      --lumo-body-text-color: hsla(214, 100%, 100%, 0.9);

    }


vaadin-app-layout::part(navbar) {
    background-color: #3F4147;
}

/* Toto cieli priamo na tvoje slotted komponenty */
.app-header-contrast {
    color: white !important;
}


.app-logo {
    margin-right: var(--lumo-space-m);
}



.video-page {
    display: flex;
    gap: var(--lumo-space-l);
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.video-wrapper {
    flex: 2 1 700px;
    aspect-ratio: 16/9;
    width: 100%;
    background-color: black;
    border-radius: var(--lumo-border-radius-l);
    overflow: hidden;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.video-chapters {
    flex: 1 1 250px;
    min-width: 220px;
}

@media (max-width: 900px) {
    .video-page {
        flex-direction: column;
    }
    .video-chapters {
        width: 100%;
    }
}