/* Button sisällön asettelu - modifioidaan näyttämään kynä-ikoni oikeassa reunassa */
.button-content {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* Muutetaan tämä, jotta kynä menee oikeaan reunaan */
    min-height: 20px; /* Pienennetään minimikorkeutta */
}

/* Tiedoston nimen tyylit */
.file-name {
    color: white;
    font-size: 13px; /* Pienennetään fonttikokoa hieman */
    margin-left: 6px;
    flex-grow: 1; /* Nimi vie kaiken ylimääräisen tilan */
    text-align: left; /* Varmista että teksti on vasemmalla */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2; /* Pienennetään riviväliä */
    padding: 2px 0; /* Pienennetään täytettä */
}

/* Ikonit ja kynä samaan riviin */
.file-icon, .edit-icon {
    flex-shrink: 0; /* Estä ikonien kutistuminen */
}

/* Kynä-ikoni - sininen kynä viivan päällä */
.edit-icon {
    width: 14px; /* Pienennetään ikonin kokoa */
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230066cc'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center top; /* Sijoita yläosaan, jotta alle jää tilaa viivalle */
    background-size: contain;
    display: inline-block;
    margin-right: 6px;
    position: relative;
    padding-bottom: 2px; /* Pienennetään täytettä */
}

/* Lisää viiva kynän alle */
.edit-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #0066cc; /* Sama sininen kuin kynässä */
    border-radius: 1px;
}

/* File item wrapper */
.file-item-wrapper {
    /*margin-bottom: 3px;*/ /* Pienennetään riviväliä */
    padding: 0 !important;
    position: relative;
}

/* File button style */
.file-button {
    background-color: #122938 !important; /* tiedostolistalla oleav buttonin taustaväri */
    width: 100% !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #00171f !important;
    color: white !important;
    padding: 6px 8px !important; /* Pienennetään pystysuuntaista täytettä */
    margin: 0 !important;
    height: auto !important; /* Varmista että korkeus määräytyy sisällön mukaan */
    min-height: 32px; /* Pienennetään minimikorkeutta */
}

/* Perustyylit */
.custom-listbox .e-btn.e-primary {
    background-color: #00253a !important; /* buttonin väri */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    z-index: 2; /* Nostetaan sisältö hover-overlay:n päälle */
}

    .custom-listbox .e-btn.e-primary:hover {
        background-color: red !important;
    }

/* Checkboxin sisäosan väri (ruutu) */
.custom-listbox .e-checkbox-wrapper .e-frame {
    border: 2px solid #00171f !important;
    background-color: #00171f !important;
    position: relative;
    z-index: 2;
}
    
    /* Checkboxin ympäröivä container */
    .custom-listbox .e-checkbox-wrapper {
        background-color: #00171f !important;
        position: relative;
        z-index: 2;
    }

/* Listboxin taustavärit */
.custom-listbox .e-list-item {
    background-color: #00171f !important;
    position: relative !important; /* Tärkeä hover-overlay:ta varten */
    cursor: pointer !important;
    /*margin-bottom: 2px !important;*/ /* Pienennetään rivien väliä */
    padding: 2px 0 !important; /* Pienennetään täytettä */
}

.custom-listbox .e-list-parent {
    background-color: #00171f !important;
}

/* Varmistetaan että Syncfusion ListBox-komponentti näyttää rivit oikein */
.e-listbox-wrapper:not(.e-list-template) .e-list-item, 
.e-listbox-container:not(.e-list-template) .e-list-item {
    height: auto !important; /* Sallitaan rivien korkeus sisällön mukaan */
    line-height: 1.2 !important; /* Pienennetään rivin korkeutta */
    padding: 2px 8px !important; /* Pienennetään täytettä */
}

/* Palauta vierityspalkin toiminta */
.e-listbox-wrapper,
.e-listbox-container {
    overflow-y: auto !important;

}

/* Varmista että listbox-parent toimii oikein */
.e-listbox-wrapper .e-list-parent,
.e-listbox-container .e-list-parent {
    height: auto !important;
}

/* Button sisällön asettelu */
.button-content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2; /* Nostetaan sisältö hover-overlay:n päälle */
}

.file-name {
    color: white;
    font-size: 14px;
    margin-left: 8px;
    position: relative;
    z-index: 2;
}

/* Ikonielementti */
.file-icon {
    width: 20px; /* Pienennetään ikonin kokoa */
    height: 20px;
    min-width: 20px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* Säilytä ikonit - ei muutoksia näihin */
.file-icon-pdf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z'/%3E%3C/svg%3E") !important;
}

.file-icon-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z'/%3E%3C/svg%3E") !important;
}

.file-icon-ppt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zM8 9h8c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-5v-2h4v-3H9v7H8V9z'/%3E%3C/svg%3E") !important;
}

.file-icon-video {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") !important;
}

.file-icon-unc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/%3E%3C/svg%3E") !important;
}

.file-icon-www {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'/%3E%3C/svg%3E") !important;
}

.file-icon-default {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") !important;
}

/* sininen väkänen */
.custom-listbox .e-list-item .e-checkbox-wrapper .e-check::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%230066cc" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/%3E%3C/svg%3E');
    background-size: 140%;
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    z-index: 2;
}

/* Hover-overlay elementti */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2d5986;
    opacity: 0;
    pointer-events: none; /* Tärkeä: Älä estä klikkauksia! */
    z-index: 10;
    transition: opacity 0.2s ease;
}

/* Tiedostojen sisältöalue, otsikko ja painikkeet */
.files-content {
    padding: 10px;
}

/* Player-listan sisältöalue */
.player-content {
    padding: 8px 0px 0px 10px;
}

.files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #0073ff !important;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.files-buttons {
    display: flex;
    gap: 2px;
}


.tiedostot-otsikko {
    color: white !important;
    font-weight: bold;
    margin: 0;
}

/* Vierityspalkin muokkaus */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #00171f;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

::-webkit-scrollbar-button {
    display: none;
}

/* Varmistetaan listbox-komponenttien vieritys */
#Tiedostot, #Playerit, .fix-listbox, .matala-rivi {
    overflow-y: auto !important;
}

/* Listbox-komponentin rivimääritykset dialogi-näkymissä */
.fix-listbox .e-list-item, 
.matala-rivi .e-list-item {
    height: 40px !important;
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    background-color: black !important;
}

/* Valintaruutu listbox-komponenteissa */
/*.fix-listbox .e-checkbox-wrapper .e-frame,
.matala-rivi .e-checkbox-wrapper .e-frame {
    border: 2px solid #0073ff !important;
    background-color: transparent !important;
}*/

/* Dialogi-listboxien hover-efekti */
.fix-listbox .e-list-item:hover,
.matala-rivi .e-list-item:hover {
    background-color: #11354d !important;
    color: white !important;
}