body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    background: #fafbff;
}

.luo-kategoria-container form {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

a.takaisin-linkki .fa-arrow-left {
    transform: rotate(45deg);
}

a#aktivoi-lataustila-readonly {
    z-index: 100;
}

div#statusMessages {
    color: #0028d4;
}

button#adminModeToggle {
    position: fixed;
    top: 10px;
    right: 10px;
    border-radius: 10px;
    font-size: 12px;
    padding: 14px;
    z-index: 8;
}

a#kategoria .fa-arrow-left {
    transform: rotate(90deg);
}

.preview-item__thumbnail-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; /* Varmistaa, että kuva täyttää tilan oikein */
  align-items: center;
  justify-content: center;
}

.preview-item__thumbnail-wrapper img {
    /* Varmistaa, että kuva peittää koko alueen säilyttäen mittasuhteet */
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.preview-item__play-icon {
  /* Asetetaan ikoni absoluuttisesti wrapperin päälle */
  position: absolute;
  
  /* Keskitetään ikoni täydellisesti */
    top: 42%;
    left: 51%;
    background: #00000059;
    padding: 11px;
    padding-left: 15px;
    border-radius: 50%;

  transform: translate(-50%, -50%);

  /* Ikonin ulkonäkö */
  font-size: 32px; /* Säädä kokoa tarvittaessa */
  color: #fffafa;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);

  /* Estää ikonia kaappaamasta hiiren klikkauksia */
  pointer-events: none;
}

div#totalProgressBar {
    place-self: anchor-center;
    margin-top: 20px;
    font-size: 18px;
    color: #00d630;
    width: -webkit-fill-available !important;
}


/* LISÄÄ NÄMÄ CSS-SÄÄNNÖT INDEX.PHP:N <style>-TAGIN SISÄÄN */
#global-drop-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0, 100, 200, 0.9); color: white;
    display: none; justify-content: center; align-items: center; 
    z-index: 9999; text-align: center;
}
#global-drop-overlay.visible { display: flex; }
#global-drop-overlay div { border: 3px dashed white; padding: 40px 60px; border-radius: 20px; }
#global-drop-overlay i { font-size: 4rem; }
#global-drop-overlay span { display: block; font-size: 1.5rem; margin-top: 20px; }

.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:1000;}.modal-content{background:#fff;padding:25px;border-radius:8px;width:90%;max-width:500px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,0.3);}.modal-content h2{margin-top:0;}.form-group{margin:20px 0;text-align:left;}.form-group label{display:block;margin-bottom:8px;font-weight:bold;}.form-group select{width:100%;padding:10px;font-size:1rem;border-radius:5px;border:1px solid #ccc;}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}.modal-button-cancel,.modal-button-confirm{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-weight:bold;}.modal-button-cancel{background-color:#ccc;}.modal-button-confirm{background-color:#28a745;color:white;}.modal-button-confirm:disabled{background-color:#999;cursor:not-allowed;}.upload-progress-indicator{position:absolute;bottom:5px;left:5px;right:5px;background-color:rgba(0,0,0,0.8);color:white;padding:8px;border-radius:5px;font-size:0.9em;text-align:center;z-index:10;}.drop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.5rem;pointer-events:none;opacity:0;transition:opacity .2s ease-in-out;z-index:5;border-radius:10px;}.drop-overlay.visible{opacity:1;}.drop-overlay i{font-size:3rem;margin-bottom:.5em;}


/* Tyylit edellinen/seuraava kategoria -navigaatiolle */
.navigointi-nuoli {
position: fixed;
    bottom: 10px;
    border-radius: 10px;
    font-size: 12px;
    padding: 14px;
    z-index: 8;
    background: white;
    border: 2px solid black;
    color: black;
    opacity: 0.8;
    filter: contrast(1.15);
}

.navigointi-nuoli.edellinen {
    bottom: 10px; 
    left: 10px;
}

.navigointi-nuoli.seuraava {
    right: 10px;
}

/* Estä tiedostonimen ilmestyminen videon päälle hover-tilassa */
.media-container:has(video.media-elementti):hover .media-filename-overlay {
    display: none !important;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #0d0d10;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff69;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffffffeb;
}

.luo-kategoria-container input[type="text"] {
    background: #0d0d0df0;
}

.luo-kategoria-container input[type="text"]::placeholder {
    color: #ffffffd6;
}

div#dropZone {
    background: #d3e8ff;
    transition: 0.1s;
}

div#dropZone:hover {
    background: #eef5ff;
    transition: 0.08s;
}

.lataa-kaikki-painike {
    background: #0040ff;
    border: 2px dashed;
    transition: 0.14s;
}

.lataa-kaikki-painike:hover {
    background: #00279c;
    transition: 0.1s;
}

h1 {
    color: #fffdfd;
}

/* Asetetaan kaikille napeille oletusjärjestys (keskimmäinen) */
.toimintonapit > button {
    order: 2;
}

/* Kun valintatila on aktiivinen, siirretään apunapit reunoille */
.toimintonapit.valinta-aktiivinen #valitseKaikki {
    order: 1; /* Tulee ensimmäiseksi */
}

.toimintonapit.valinta-aktiivinen #tyhjennaValinnat {
    order: 3; /* Tulee viimeiseksi */
}



.media-filename-overlay {
    font-weight: 300;
    position: absolute;
    bottom: 8px;
    width: 100%;
    
    background-color: #00000061;
    color: white;
    font-size: 14px;
    text-align: center;
    
    padding: 8px 0px;
    box-sizing: border-box;
    
    /* Piilotetaan oletuksena */
    opacity: 0;
    pointer-events: none;
    
    /* Lisätään siisti siirtymäefekti */
    transition: opacity 0.2s ease-in-out;

    /* Varmistetaan, että teksti ei rivity rumasti */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 900;
    white-space: break-spaces;
}





/* LISÄÄ NÄMÄ CSS-SÄÄNNÖT INDEX.PHP:N <style>-TAGIN SISÄÄN */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); display: flex;
    justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: #fff; padding: 25px; border-radius: 8px;
    width: 90%; max-width: 500px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-content h2 { margin-top: 0; }
.form-group { margin: 20px 0; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
.form-group select { width: 100%; padding: 10px; font-size: 1rem; border-radius: 5px; border: 1px solid #ccc; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-button-cancel, .modal-button-confirm {
    padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;
}
.modal-button-cancel { background-color: #ccc; }
.modal-button-confirm { background-color: #28a745; color: white; }
.modal-button-confirm:disabled { background-color: #999; cursor: not-allowed; }
.upload-progress-indicator {
    position: absolute; bottom: 5px; left: 5px; right: 5px;
    background-color: rgba(0, 0, 0, 0.8); color: white;
    padding: 8px; border-radius: 5px; font-size: 0.9em;
    text-align: center; z-index: 10;
}






@media (hover: hover) {
    .media-container:hover .media-filename-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* 2. Erityissääntö PDF:lle: Tee overlaysta "kosketeltava", kun PDF-containeria
      hoveroidaan, mutta pidä se vielä näkymättömänä. */
.media-container:has(.pdf-preview-container):hover .media-filename-overlay { 
    pointer-events: auto;
}


.media-container:has(.pdf-controls:hover) .overlay-painikkeet, .media-container:has(.pdf-controls:hover) .media-filename-overlay, .media-container.controls-hovered .overlay-painikkeet,
.media-container.controls-hovered .media-filename-overlay {
    opacity: 0 !important;
    pointer-events: none; /* Estää klikkaukset piilotettuihin elementteihin */
    transition: opacity 0.2s ease-out; /* Lisää siisti häivitysefekti */
}

.media-container.touch-active .media-filename-overlay {
    opacity: 1;
    pointer-events: auto; /* Tekee siitä klikattavan */
}

.lightbox-pdf-container {
    background: transparent !important;
    height: inherit;
}


/* KÄYTÄ TÄTÄ SÄILIÖÄ */
#pdf-canvas-wrapper { 
  width: 100%; 
  height: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
    margin-top: -40px;
}

.pdf-lightbox-controls {
    position: absolute;
    justify-self: anchor-center;
    display: -webkit-inline-box;
}

.media-filename-overlay, .lightbox-caption {
    z-index: 999;
}

.media-filename-overlay.kopioitu-onnistui, #lightbox-caption.kopioitu-onnistui {
    color: #d8ffd3 !important;
}

.media-elementti.audio-container .kopioitu-onnistui {
    color: #3ea331 !important;
}


.media-filename-overlay.kopioitu-epaonnistui, #lightbox-caption.kopioitu-epaonnistui, .kopioitava-tiedostonimi.kopioitu-epaonnistui p {
    color: #ffe2d3 !important;
}


.media-elementti.audio-container .kopioitu-epaonnistui {
    color: #ff6c20 !important;
}

.media-container.no-filename-overlay .media-filename-overlay {
    display: none !important;
}

.valintatila .media-filename-overlay.kopioitava-tiedostonimi {
    opacity: 1;
    display: block;
}

/* JÄRJESTYSNUMERON NÄYTTÄMINEN ADMIN-TILASSA */

.media-order-number {
    position: absolute;
    top: -25px;
    justify-self: center;
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 950;
    
    /* Piilotetaan oletuksena */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* Näytetään numero, kun hiiri on containerin päällä */
.media-container:hover .media-order-number {
    opacity: 1;
}

/* Piilotus-napin oma väri toimintopalkissa */
button#aktivoiPiilotustila {
    background: #052069; /* Tumma sinertava */
}

/* Piilota-napin tehosteväri overlay-valikossa */
.overlay-painike.piilota-painike:hover {
    background-color: #000167;
}

/* UUDET SÄÄNNÖT: Estä hover-efektit, kun valintatila on päällä */

/* Estää tiedostonimen ilmestymisen hoverilla valintatilassa */
.valintatila .media-container:hover .media-filename-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Estää yläkulman nappien ilmestymisen hoverilla valintatilassa */
.valintatila .media-container:hover .overlay-painikkeet {
    opacity: 0;
    pointer-events: none;
}

.media-galleria.valintatila .media-container:hover .media-filename-overlay {
    display: none !important;
    opacity: 0 !important;
}

.media-galleria.valintatila .media-container:hover .media-filename-overlay {
    display: none !important;
    opacity: 0 !important;
}

/* --- PIILOTETUN TIEDOSTON VISUAALINEN MERKINTÄ (TÄRKEIN) --- */
.media-container[data-piilotettu="true"] {
    position: relative;
}

/* Tummennuskerros piilotetun tiedoston päällä */
.media-container[data-piilotettu="true"]::before, .laatikko-container[data-piilotettu="true"] .laatikko::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 800;
    pointer-events: none; 
    backdrop-filter: blur(9px);
}

/* Silmä-ikoni piilotetun tiedoston päällä */
.media-container[data-piilotettu="true"]::after, .laatikko-container[data-piilotettu="true"] .laatikko:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f070"; /* Font Awesome "eye-slash" ikoni */
    position: absolute;
    align-self: anchor-center;
    place-self: anchor-center;
    font-size: 2.9em;
    color: white;
    text-shadow: 0 0 5px black;
    z-index: 801;
    pointer-events: none;
}



/* 1. Tummennuskerros. ::before luodaan #lightbox-content-elementin sisään. */
#custom-lightbox.is-hidden-content #lightbox-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2; /* Asetetaan sisällön (kuva/video) päälle */
    backdrop-filter: blur(9px);
}

/* 2. Silmä-ikoni. ::after luodaan myös #lightbox-content-elementin sisään. */
#custom-lightbox.is-hidden-content #lightbox-content::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f070"; /* eye-slash */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Oikea tapa keskittää absolute-elementti */
    font-size: 4em;
    color: white;
    text-shadow: 0 0 8px black;
    z-index: 3; /* Asetetaan tummennuskerroksen päälle */
    pointer-events: none;
}



/*
  1: GALLERIA
  Piilottaa overlayn, kun piilotettua kuvaa painetaan, MUTTA VAIN JOS
  hiiri EI OLE samanaikaisesti nappien tai tiedostonimen päällä.
*/
.media-container[data-piilotettu="true"]:active:not(:has(.overlay-painikkeet:hover)):not(:has(.media-filename-overlay:hover))::before,
.media-container[data-piilotettu="true"]:active:not(:has(.overlay-painikkeet:hover)):not(:has(.media-filename-overlay:hover))::after {
    display: none;
}

/*
  2: LIGHTBOX
  Piilottaa overlayn, kun sisältöaluetta painetaan.
  Tämä ei tarvitse poikkeuksia, koska napit ovat eri elementissä.
*/
#custom-lightbox.is-hidden-content #lightbox-content:active::before,
#custom-lightbox.is-hidden-content #lightbox-content:active::after {
    display: none;
}




/* 2. Kun valitset NÄKYVÄN tiedoston piilotettavaksi, se saa VÄLITTÖMÄSTI saman tummennuksen ja ikonin. */
.valintatila--piilotus .media-container:not([data-piilotettu="true"]).valittu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 1;
    pointer-events: none;
}

.valintatila--piilotus .media-container:not([data-piilotettu="true"]).valittu::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f070"; /* eye-slash */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: white;
    text-shadow: 0 0 5px black;
    z-index: 2;
    pointer-events: none;
}

/* 3. Kun valitset PIILOTETUN tiedoston näytettäväksi, tummennus ja ikoni poistetaan VÄLITTÖMÄSTI. */
.valintatila--piilotus .media-container[data-piilotettu="true"].valittu::before,
.valintatila--piilotus .media-container[data-piilotettu="true"].valittu::after {
    content: none; /* Tämä on ainoa tarvittava sääntö, se piilottaa pseudoelementit */
}






/* LISÄÄ NÄMÄ CSS-TIEDOSTOOSI */

/* --- GALLERIAN LATAUSANIMAATION KORJAUS --- */

/* 1. Säiliö, joka pitää laturin ja gallerian päällekkäin. */
.galleria-sailio {
    position: relative;
    min-height: 60vh; /* Antaa tilaa laturille, kun sisältöä ei vielä ole */
}

/* 2. Laturi on näkyvissä ja peittää kaiken alleen oletuksena. */
.galleria-sailio .gallery-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0d10; /* TÄRKEIN: Peittävä taustaväri piilottaa alla olevan sotkun */
    z-index: 10;
    transition: opacity 0.3s ease-out; /* Pehmeä häivytys */
}

/* 3. Galleria on oletuksena täysin näkymätön. */
.galleria-sailio .media-galleria {
    opacity: 0;
    transition: opacity 0.4s ease-in 0.2s; /* Näytetään pienellä viiveellä */
}

/* 4. Kun säiliö on valmis (.galleria-valmis): piilota laturi... */
.galleria-sailio.galleria-valmis .gallery-loader {
    opacity: 0;
    pointer-events: none; /* Estää klikkaukset näkymättömään laturiin */
}

/* 5. ...ja näytä galleria. */
.galleria-sailio.galleria-valmis .media-galleria {
    opacity: 1;
}

/* Nollataan ensin lightbox-loaderin oletustyylit, jotka voivat aiheuttaa laatikon näkymisen */
.lightbox-loader {
    background: transparent !important; /* Estää taustavärin */
    width: 50px !important;            /* Pakotetaan oikea leveys */
    height: 50px !important;           /* Pakotetaan oikea korkeus */
    border: 5px solid #f3f3f3;         /* Vaalea kehys */
    border-top: 5px solid #3498db;     /* Sininen pyörivä osa */
    border-radius: 50% !important;
    animation: spin 1s linear infinite;
    margin: auto;
}

/* Gallerian spinner pidetään erillään selkeyden vuoksi */
.gallery-loader .spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}








/* LISÄÄ TÄMÄ CSS-TIEDOSTOOSI */

#lataus-trigger {
    /* Annetaan triggerille korkeutta, jotta se näkyy ruudulla ja laukaisee latauksen */
    min-height: 120px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Tarvitaan spinnerin keskittämiseen */
}

/* Luodaan spinner pseudoelementillä, ei tarvita ylimääräistä HTML:ää */
#lataus-trigger::before {
    display: none; /* Oletuksena piilossa */
    width: 50px;
    height: 50px;
    margin-top: 500px;
}

/* Kun triggerille annetaan 'loading'-luokka, spinner tulee näkyviin */
#lataus-trigger.loading::before {
    display: block;
}














/* Modal-ikkunan tyylit */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-content h2 {
    margin-top: 0;
}

.modal-content .form-group {
    margin-bottom: 15px;
}

.modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-content select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal-actions {
    margin-top: 20px;
    text-align: right;
}

.modal-actions button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}

.modal-button-cancel {
    background-color: #eee;
}

.modal-button-confirm {
    background-color: #007bff;
    color: white;
}
.modal-button-confirm:disabled {
    background-color: #a0cffa;
    cursor: not-allowed;
}


a {
    color: #000843;
    color: #b5c6ff;
    text-decoration: none;
    transition: 0.12s;
}

h1 a:hover {
    color: #96a9e9;
    transition: 0.08s;
}

.upload-progress-indicator {
    z-index: 999 !important;
}

.galleria, .media-galleria {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

button, input[type="submit"], a.overlay-painike.lataa-painike {
    border-radius: 10%;
    opacity: 0.8 !important; 
    filter: contrast(1.15);
}

button:hover, input[type="submit"]:hover, a.overlay-painike.lataa-painike:hover {
    opacity: 1 !important; 
    filter: contrast(1);
}

.toimintonapit button {
    border-radius: 10%;
    font-size: 10px;
    border: none;
    color: white;
    background: #000000;
    padding: 10px;
    border: 1px solid #00000012;
}

button.toimintolinkki-lisaa {
    border-radius: 10%;
    font-size: 20px;
    height: 30px;
    width: 30px;
    background: #007bff;
    border: none;
    color: white;
    padding: 0px;
}

button.toimintolinkki-lisaa:hover {
    background: #007bff;
    border: none;
    color: white;
}

button#aktivoiNimeamistila {
    background: green;
}

button#aktivoiLataustila {
    background: darkorange;
}

button#siirraTiedosto {
    background: #9b66ce;
}

button#aktivoiPoistotila {
    background: red;
    opacity: 0.7 !important;
}

button#aktivoiPoistotila:hover {
    opacity: 1 !important;
}


/* --- YLEISET LAATIKOT & CONTAINERIT --- */

.laatikko-container, .media-container {
    position: relative;
}

.laatikko {
    position: relative;
    width: 400px;
    height: 280px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-decoration: none;
    color: white;
    display: block;
    cursor: pointer;
}

.laatikko img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.laatikko:hover img {
    transform: scale(1.1);
}

.laatikko .teksti {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #00000061;
    background-color: #00000061;
    padding: 15px;
    box-sizing: border-box;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    z-index: 1;
    opacity: 0.8;
    z-index: 999;
}

.lightbox-text-preview {
    overflow-y: auto; /* Sallii pystysuuntaisen vierityksen */
    max-height: 90vh; /* Rajoittaa korkeuden, jotta vieritys alkaa */
    padding: 20px;
    box-sizing: border-box;
}

.laatikko:hover .teksti {
    opacity: 1;
}

/* --- VUODEN ESIKATSELUN KUVAKOLLAASI (KORJATTU) --- */

/* --- VUODEN ESIKATSELUN KUVAKOLLAASI (KORJATTU) --- */

.vuosi-grid {
    display: grid;
    width: 100%;
    height: 100%;
}

.vuosi-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    background: white;
}

.laatikko:hover .vuosi-grid img {
    transform: scale(1.1);
}

/* 1 kuva: 1x1 ruudukko */
.vuosi-grid[data-kuvia="1"] { grid-template-columns: 1fr; grid-template-rows: 100%; }

/* 2 kuvaa: 2x1 ruudukko (vierekkäin) */
.vuosi-grid[data-kuvia="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 100%; }

/* 3 kuvaa: Yksi iso vasemmalla, kaksi pientä päällekkäin oikealla */
.vuosi-grid[data-kuvia="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 50% 50%; }
.vuosi-grid[data-kuvia="3"] img:nth-child(1) { grid-row: span 2; }

/* 4 kuvaa: 2x2 ruudukko */
.vuosi-grid[data-kuvia="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 50% 50%; }

/* 5 kuvaa: Kaksi isoa ylhäällä, kolme pientä alhaalla */
.vuosi-grid[data-kuvia="5"] { grid-template-columns: repeat(6, 1fr); grid-template-rows: 50% 50%; }
.vuosi-grid[data-kuvia="5"] img:nth-child(1) { grid-column: span 3; }
.vuosi-grid[data-kuvia="5"] img:nth-child(2) { grid-column: span 3; }
.vuosi-grid[data-kuvia="5"] img:nth-child(3) { grid-column: span 2; }
.vuosi-grid[data-kuvia="5"] img:nth-child(4) { grid-column: span 2; }
.vuosi-grid[data-kuvia="5"] img:nth-child(5) { grid-column: span 2; }

/* 6 kuvaa: 3x2 ruudukko */
.vuosi-grid[data-kuvia="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50% 50%; }












/* Kategoria-boksien kuvagalleria (vuosi.php) */
.kategoria-kuvagalleria {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Käytetään flexboxia kuvien asetteluun */
    overflow: hidden; /* Varmistaa, etteivät kuvat vuoda yli */
    background-color: #333; /* Oletustausta, jos kuvia ei ole */
}

.kategoria-kuvagalleria img {
    width: 100%; /* Oletus, täyttää käytettävän tilan */
    height: 100%;
    object-fit: cover; /* Kuva täyttää tilan, säilyttäen kuvasuhteen */
    flex-shrink: 0; /* Estää kuvien kutistumisen pienemmäksi kuin content-boxin koko */
}

/* Yksi kuva (vuosi.php) */
.kategoria-kuvagalleria[data-kuvia="1"] img {
    width: 100%;
}

/* Kaksi kuvaa vierekkäin (vuosi.php) */
.kategoria-kuvagalleria[data-kuvia="2"] img {
    width: 50%; /* Kumpikin kuva ottaa 50% leveydestä */
}

/* Kolme kuvaa vierekkäin (vuosi.php) */
.kategoria-kuvagalleria[data-kuvia="3"] img {
    width: calc(100% / 3); /* Kumpikin kuva ottaa 1/3 leveydestä */
}
















/* --- HALLINTAPAINIKKEET --- */

.overlay-painikkeet {
    width: calc(100% - 10px);
    position: absolute;
    top: 5px;
    margin: 2px 5px;
    justify-content: right;
    z-index: 999;
    display: flex;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.laatikko-container:hover .overlay-painikkeet,
.media-container:not(.controls-hovered):hover .overlay-painikkeet {
    opacity: 1;
    pointer-events: auto;
}

.overlay-painike {
    background-color: #00000061;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s;
}

button#upload-lightbox-delete {
    max-width: 35px !important;
    font-size: 16px !important;
    padding: 15px !important;
    aspect-ratio: 1/1;
    max-height: fit-content;
}

a.overlay-painike.lataa-painike {
    border-radius: 50%;
}

.overlay-painike:hover { background-color: #000000a1; }
.overlay-painike.lisaa-painike:hover { background-color: #35dc9a; }
.poista-painike:hover { background-color: #dc3545; }
.overlay-painike.lataa-painike:hover { background: #da8b14; }
.overlay-painike.nimea-painike:hover { background: #186518; }
.overlay-painike.siirra-tiedosto:hover { background: #855aaf; }
.overlay-painike.korvaa-tiedosto:hover { background: #0c70dc; }


/* --- KATEGORIA-SIVUN ELEMENTIT --- */

.media-elementti {
    max-width: 100%;
    height: auto;
    padding: 20px 0px;
    border-radius: 5px !important;
    margin-bottom: 20px;
}

.media-container img,
.media-container video {
    padding: unset;
}

.media-elementti.audio-container {
    padding-bottom: 15px;
}


/* --- MUUT ELEMENTIT --- */

.luo-kategoria-container { max-width: 600px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-align: left; }
.luo-kategoria-container h2 { text-align: center; margin-top: 0; }
.luo-kategoria-container input[type="text"], .luo-kategoria-container input[type="number"] { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.luo-kategoria-container input[type="submit"] { padding: 10px 20px; background-color: #b6cbfff2; color: black !important; border: 1px solid #00000012; box-shadow: 0px 2px 4px #00000030; border-radius: 5px; cursor: pointer; transition: background-color 0.2s }
.luo-kategoria-container input#luo-vuosi { background-color: #ffaf24f2; color: black; border: 1px solid #00000029; box-shadow: 0px 2px 4px #00000030; }
/* .takaisin-linkki { display: block; position: fixed; padding: 10px 20px; background-color: #00000061; color: white; border-radius: 5px; text-decoration: none; font-weight: bold; top: 10px; border: 1px solid #0000000f; } */
.takaisin-linkki { position: fixed; top: 10px; left: 10px; border-radius: 10px; font-size: 12px; padding: 14px; z-index: 8; background: white; border: 2px solid black; color: black; opacity: 0.8;
    filter: contrast(1.15);}
.takaisin-linkki:hover, .lataus-linkki-fixed:hover { background-color: #f0f0f0; opacity: 1; filter: contrast(1);}
.sortable-ghost { opacity: 0.4; }

.overlay-painikkeet button { border: 1px solid #00000012; }

.lataus-linkki-fixed { position: fixed; bottom: 10px; justify-self: anchor-center;; border-radius: 10px; font-size: 12px; padding: 14px; z-index: 8; background: white; border: 2px solid black; color: black; opacity: 0.8;
    filter: contrast(1.15); }



.laatikko-container {
    position: relative;
    z-index: 1;
}

.lightbox-audio-preview {
    background: #f1f3f4;
    padding: 12px;
    border-radius: 12px;
}

#lightbox-content > * {
    max-width: 100vw;
    background: #f1f3f4;
    white-space: break-spaces;
}

pre.lightbox-text-preview {
    font-size: 15px;
    max-width: 80vw !important;
    background: #fffffffc;
    white-space: break-spaces;
    border-radius: 1.4px;
}

.drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 5;
}

.laatikko-container {
    border-radius: 10px !important;
}

.drop-overlay.visible {
    opacity: 1;
}

.drop-overlay i {
    font-size: 3rem;
    margin-bottom: 0.5em;
}







.toimintonapit {
    display: flex;
    justify-content: center;    
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

/* --- KATEGORIA-SIVUN ELEMENTIT (UUSI MASONRY-GRID) --- */

.media-galleria {
    display: grid;
    gap: 15px;
    /* Luo automaattisesti niin monta saraketta kuin mahtuu, min. leveys 350px */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* Määritellään pieni rivikorkeus, jota elementit voivat "span"nata */
    grid-auto-rows: 20px;
}

.media-container {
    position: relative;
    display: flex;
    align-self: flex-start;
}

.media-container > *,
.media-container::before,
.media-container::after {
    grid-area: 1 / 1;
}

/* Annetaan kuville/videoille joustava korkeus */
.media-elementti {
    width: 100%; /* Leveys on aina 100% sarakkeesta */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: block; /* Varmistaa oikean koon laskennan */
    margin-bottom: 0; /* Ei tarvita enää, gap hoitaa välit */
}

video.media-elementti {
    max-width: 100%; /* Poistetaan aiempi 600px rajoitus */
}



/* --- UUSI DRAG & DROP -LATAUSKOMPONENTTI --- */

/* Piilotetaan alkuperäinen tiedostonvalitsin */
#uploadForm input[type="file"] {
    display: none;
}

/* Itse pudotusalue */
.drop-zone {
    margin-top: 47px;
    width: 50%;
    place-self: center;
    background: #009bff12;
    height: 200px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #000843;
    border: 4px dashed #000843;
    border-radius: 10px;
    transition: background-color 0.2s, border-color 0.2s;
}

.drop-zone--over {
    border-style: solid;
    border-color: #007bff;
    background-color: #f0f8ff;
}

.drop-zone__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.drop-zone__icon {
    font-size: 3em;
}

/* TÄMÄ ESTÄÄ RUUTUKON UUDELLEENLASKENNAN RAHAUKSEN AIKANA */
.media-galleria.sortable-dragging-active {
    /* Lukitse ruudukko, kun raahataan, estää vaakasuuntaisen liikkumisen! */
    grid-auto-flow: row;
    /* Voit kokeilla myös asettaa elementeille kiinteän korkeuden/leveyden,
       mutta yllä oleva pitäisi riittää Grid-asettelussa. */
}

/* Sortable.js:n fallback-luokka, jotta raahattava elementti näyttää oikealta */
.sortable-fallback {
    opacity: 0.9 !important; /* Raahattava elementti on läpinäkyvä */
    transform: rotate(0) !important; /* Estetään Sortable.js:n oletuspyöritys */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}








/* Korostaa elementin, jonka kanssa paikka vaihdetaan */
.sortable-swap-target .media-elementti{
    /* Voit valita minkä tahansa korostuksen tähän */
    outline: 2px dashed #0b00ff; /* Sininen katkoviiva tekee selväksi kohde-elementin */
    box-shadow: 0 0 10px #0040ff69;
    transform: scale(0.95); /* Pieni efekti korostamaan vaihtoa */
    transition: all 0.25s ease;
}

/* Varmistetaan, että itse raahattu elementti pysyy raahauksen aikana visuaalisesti ennallaan paikallaan */
.sortable-chosen {
    opacity: 1 !important; 
    transform: none !important; 
}

/* Piilotetaan se "tyhjä tila", jonka Sortable luo, koska swap-tilassa sitä ei tarvita */
.media-galleria .sortable-placeholder {
    display: none !important; 
}




.galleria-sailio {
    max-width: 900px;
    justify-self: center;
}

body {
    background: #0d0d10;
}








/* Esikatselulistan containeri */
.preview-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    place-content: center;
}

/* Yksittäinen esikatselukuva */
.preview-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: grab;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tiedostonimi kuvan päällä */
.preview-item__name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Poistopainike */
.preview-item__remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: rgba(220, 53, 69, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-item__remove:hover {
    background: rgba(220, 53, 69, 1);
}

/* Latauspainikkeen uusi tyyli */
.lataa-kaikki-painike {
    width: 100%;
    padding: 15px;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}


/* --- MONIVALINNAN TYYLIT --- */
.valintatila .media-container img,
.valintatila .media-container video, .valintatila .media-elementti.pdf-preview-container canvas {
    cursor: pointer;
    filter: brightness(0.6);
    transition: filter 0.2s;
}

.valintatila audio.media-soitin {
    filter: brightness(0.63);
}

.media-elementti {
    background: #f1f3f4;
}

.valintatila .media-elementti {
    background: #98999a;
}

.valintatila .media-container:hover .media-elementti {
    background: #f1f3f4;
}

/* Lisätään läpinäkyvä kalvo elementtien päälle valintatilassa.
   Tämä varmistaa, että klikkaus valitsee elementin, eikä esim.
   käynnistä audion tai videon toistoa. */
.valintatila .media-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Asetetaan kalvo sisällön päälle */
}

.valintatila .media-container:hover img, .valintatila .media-container:hover video, .valintatila .media-container:hover audio.media-soitin, .valintatila .media-container:hover .media-elementti.pdf-preview-container canvas {
    filter: brightness(1);
}

.valintatila--piilotus .media-container.valittu .media-elementti {
    border: 4px solid #000167 !important; /* Lila, piilotus-napin väri */
    box-sizing: border-box !important;
}

/* --- KANSIOIDEN MONIVALINNAN TYYLIT --- */

/* Himmentää kaikki laatikot, kun valintatila on päällä */
.galleria.valintatila .laatikko {
    cursor: pointer;
    filter: brightness(0.6);
    transition: filter 0.2s;
}

/* Palauttaa kirkkauden, kun hiiri on laatikon päällä valintatilassa */
.galleria.valintatila .laatikko-container:hover .laatikko {
    filter: brightness(1);
}

/* Estää linkin toiminnan ja overlay-nappien näkymisen valintatilassa */
.galleria.valintatila .laatikko-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Varmistaa, että tämä on elementtien päällä */
}
.galleria.valintatila .overlay-painikkeet {
    display: none;
}

/* Näyttää valintamerkin, kun laatikko on valittu */
.laatikko-container.valittu .valintamerkki {
    opacity: 1;
}

/* Lisää oranssin kehyksen valitun laatikon ympärille */
.galleria.valintatila .laatikko-container.valittu .laatikko {
    filter: brightness(1.0);
    border: 4px solid #94ffa0;
    box-sizing: border-box;
}

.toimintonapit button, button#avaaLatausosio {
    border: 1px solid;
}











.media-container.valittu img,
.media-container.valittu video {
    filter: brightness(1.0);
    box-sizing: border-box;
}

.media-container.valittu .media-elementti {
    background: inherit;
}

.media-container.valittu audio.media-soitin {
    filter: brightness(1);
}

.media-container.valittu {
    margin: -4px;
}


.valintatila .overlay-painikkeet { display: none; }
.valintamerkki {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    color: white;
    text-shadow: 0 0 5px black;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 11;
}
.media-container.valittu .valintamerkki { opacity: 1; }
.toimintolinkki-poista-valitut { background-color: #dc3545 !important; }

.media-elementti audio {
    width: 100%;
    display: block;
    padding: 0px 9px;
    width: calc(100% - 18px);
}

.media-elementti p {
    margin: 0;
    text-align: center;
    font-size: 0.9em;
    margin: 20px 4px;
    margin-bottom: 10px;
}

.media-elementti.audio-container p {
    margin-bottom: 20px;
}

.media-galleria {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 10px; /* pieni rivikorkeus, jota elementit span:aa */
}

/* Lisätään marginaali joka toiselle elementille, mutta ohitetaan ensimmäinen.
   Tämä kohdistuu elementteihin 2, 4, 6, 8... */
.media-container:nth-child(2n) {
    margin-top: 14px;
}

/* Lisätään pienempi marginaali joka neljännelle elementille.
   Tämä kohdistuu elementteihin 4, 8, 12...
   HUOM: Tämä sääntö on aiemman jälkeen, joten se ylikirjoittaa
   elementtien 4, 8 jne. marginaalin 20px -> 7px. */
.media-container:nth-child(4n) {
    margin-top: 7px;
}

.media-container {
    display: block;
}

/* Sisältö, joka määrittää korkeus-spannin */
.media-elementti {
    width: 100%;
    display: block;
}

/* Kuvat ja videot: poistetaan vanha border ja annetaan sen olla nyt */
.media-container.valittu img,
.media-container.valittu video {
    filter: brightness(1.0); /* Palauttaa kirkkauden */
    /* HUOM: Tämä sääntö poistetaan/muokataan myöhemmin JS:llä, joten ei tarvitse borderia tässä */
    box-sizing: border-box;
}

/* VIHREÄ kehys, kun valintatila on LATAUS */
.valintatila--lataus .media-container.valittu .media-elementti{
    border: 4px solid #ffb75c !important; /* Oranssi, ehdoton! */
    box-sizing: border-box !important;
}

.media-container.valittu .media-elementti {
    border-radius: 10px !important;
}

.media-elementti.pdf-preview-container canvas {
    border-radius: 10px !important;
    margin-bottom: -4px;
}

/* PUNAINEN kehys, kun valintatila on POISTO */
.valintatila--poisto .media-container.valittu .media-elementti{
    border: 4px solid #ff1f00 !important; /* Punainen, ehdoton! */
    box-sizing: border-box !important;
}

















/* --- OMAN LIGHTBOXIN TYYLIT --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000e0;
    z-index: 9999;
    display: none; /* Piilotettu oletuksena */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(14px);
}
.lightbox-overlay.visible {
    display: flex; /* Näytetään flexboxina, jotta keskitys toimii */
}

.lightbox-content {
    position: relative;
    width: 100%; /* Muutettu 100% */
    height: 100%; /* Muutettu 100% */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Lisätään ilmatilaa paddingilla, ei leveydellä */
    padding: 2vh 5vw;
    box-sizing: border-box; /* Tärkeä! Varmistaa, että padding lasketaan leveyden sisään */
}

.lightbox-content img,
.lightbox-content video,
.lightbox-content iframe {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    border: none;
}
.lightbox-content iframe {
    width: 80%;
    height: 100%;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 3em;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    z-index: 99;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    font-size: 2em;
    cursor: pointer;
    padding: 15px;
    border-radius: 5px;
}
.lightbox-nav.prev { left: 15px; z-index: 1;}
.lightbox-nav.next { right: 15px; z-index: 1;}
.lightbox-nav:hover { background: rgba(0,0,0,0.6); }

.lightbox-caption {
    position: absolute;
    bottom: 15px;
    color: white;
    background: rgba(0,0,0,0.5);
    padding: 10px 15px;
    border-radius: 5px;
}

/* Yksinkertainen latausanimaatio */
.lightbox-loader {
    width: 50px;
    height: 50px;
    border: 5px solid #555;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.lightbox-generic-preview p {
    color: #fffffff2;
    font-size: 14px;
}

.lightbox-generic-preview p:hover {
    color: white;
}

.lightbox-generic-preview .fa-solid, .lightbox-generic-preview .fas {
    color: #ffffffa1;
    font-size: 30px;
    transition: 0.08s;
}

.lightbox-generic-preview .fa-solid:hover, .lightbox-generic-preview .fas:hover {
    color: #ffffffcf;
}

.lightbox-download-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #000000d6;
    border: 2px dashed #ffffff42;
    color: #ffffffe0;
    margin-top: 22px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.2s;
}

.lightbox-download-button:hover {
    background-color: black;
    border: 2px dashed white;
    transition: 0.1s;
    color: white;
}

#custom-lightbox .lightbox-content {
  box-sizing: border-box;
  padding: 0;
  border: none;
}











.laatikko.tyhja {
    background-color: white;
}

.laatikko.tyhja img {
    opacity: 0;
}

























































































/* Tekstiesikatselun tyyli */
.text-preview {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    height: auto !important; 
    overflow: hidden;
    padding: 15px;
}

.text-preview pre {
    text-align: left;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap; /* Rivittää tekstiä tarvittaessa */
    word-break: break-all;
    max-height: 400px;
    overflow: auto;
    padding: 10px;
    margin: 0px;
}

.media-elementti.text-preview, .media-elementti.pdf-preview-container {
    padding: 0px;
}

/* PDF-esikatselun tyyli */
.pdf-preview {
    background-color: #525659; /* Tumma tausta latauksen ajaksi */
}

.pdf-preview canvas {
    width: 100%;
    height: auto;
    display: block;
}


.pdf-preview-container {
    position: relative; /* Tarvitaan, jotta kontrollit voidaan asemoida absoluuttisesti */
}

.pdf-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #00000061;
    color: white;
    border-radius: 20px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0 !important; /* Piilotettu oletuksena */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* Ei reagoi klikkauksiin piilotettuna */
}

/* Näytä kontrollit hoverissa */
.pdf-preview-container:hover .pdf-controls, .lightbox-pdf-container:hover .pdf-lightbox-controls, .lightbox-pdf-container:hover .lightbox-caption {
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
}

.lightbox-pdf-container .pdf-lightbox-controls, .lightbox-pdf-container .lightbox-caption {
    pointer-events: none;
    opacity: 0;
}







/* 1. Määritä kaikki lightboxin navigointi ja kontrollit piiloon oletuksena */
.lightbox-nav,
.lightbox-close,
.lightbox-caption,
.overlay-painikkeet-lightbox-container,
.overlay-painikkeet-lightbox-container-upload {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in-out; /* Lisää pehmeä siirtymä */
}

/* 2. Salli natiivien videokontrollien näkyminen, mutta vain kun video on läsnä */
.lightbox-content video {
    /* Varmista, että videon natiivit kontrollit ovat sallittuja */
    /* Jos videolla on 'controls' attribuutti, ne näkyvät aina elementin sisällä */
}


/* 3. Näytä navigaatio ja painikkeet, kun hiiri on overlayn päällä */
.lightbox-overlay:hover .lightbox-nav,
.lightbox-overlay:hover .lightbox-close,
.lightbox-overlay:hover .lightbox-caption,
.lightbox-overlay:hover .overlay-painikkeet-lightbox-container,
.lightbox-overlay:hover .overlay-painikkeet-lightbox-container-upload {
    opacity: 1 !important;
    pointer-events: auto !important;
}

div#kategoria-galleria {
    margin-bottom: 70px;
}

/* 4. Kosketusnäytöillä (joissa :hover ei toimi), näytä ne aina (kuten PDF-logiikassa) */
@media (hover: none) {
    .lightbox-nav,
    .lightbox-close,
    .lightbox-caption,
    .overlay-painikkeet-lightbox-container,
    .overlay-painikkeet-lightbox-container-upload, .pdf-controls {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

input#pdf-page-input {
    background: transparent;
}

.pdf-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
}
.pdf-controls button:hover {
    color: #ccc;
}
.pdf-controls button:disabled {
    color: #666;
    cursor: not-allowed;
}

.pdf-page-info {
    font-size: 14px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.media-elementti.pdf-preview-container canvas {
    max-width: -webkit-fill-available;
    max-height: -webkit-fill-available;
}









.sortable-fallback {
    visibility: visible !important;
    opacity: 0 !important;
}

/* PAKOTETTU KORKEUS TYHJILLE RUUDUILLE */
.media-elementti.tyhja-ruutu {
    min-height: 4px; 
    border: 1px dashed #00000070;
    border-radius: 5px;
}

div#tyhjä-ruutu {
    border: 1px dashed #00000070;
    height: 4px;
    padding: 4px;
}


.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: top center;
}

/* --- Lightboxin PDF-katselimen lisätyylit --- */

/* Uusi container sivunumerokentälle */
.page-nav-container {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 2px 4px;
    width: 50%;
    margin: 0px 10px;
}

button#pdf-prev-lightbox, button#pdf-next-lightbox {
    height: 30px !important;
    border: none;
    padding: 2px 6px;
}

.page-nav-container {
    padding: 0px;
    height: 29px !important;
}

button#pdf-prev-lightbox, button#pdf-next-lightbox, .page-nav-container {
    border: 1px solid #0000000f;
    background: #ffffff8c;
    backdrop-filter: blur(1px);
}

span#pdf-page-total {
    color: #000000a3;
}

/* Itse sivunumeron input-kenttä */
.pdf-page-input {
    max-width: 35%;
    background-color: #222;
    color: white;
    border: none;
    text-align: right;
    font-size: 16px;
    padding: 4px;
    -moz-appearance: textfield; /* Poistaa nuolinäppäimet Firefoxista */
}
.pdf-page-input::-webkit-outer-spin-button,
.pdf-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Poistaa nuolinäppäimet Chromesta/Safartista */
    margin: 0;
}

/* Sivujen kokonaismäärä */
#pdf-page-total {
    padding-left: 4px;
    font-size: 16px;
    color: #ccc;
}






/* Lisäksi, aseta LightboxContent keskittämään sisällön, jotta raahauslogiikka toimii */
.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.lightbox-image-viewer {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Varmistaa kuvan näkymisen kokonaan */
    transition: none; /* Estää CSS-siirtymät zoomauksen aikana */
}

.varmuuskopio-container {
    margin-top: 50px;
    padding-bottom: 30px;
    text-align: center;
}
.varmuuskopio-painike, button#lataaKokoVuosi {
    display: inline-block;
    padding: 10px 22px;
    background-color: #5a6268;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s;
    border: 1px solid #333;
    font-size: 14px;
    font-weight: 400;
    font-family: auto;
}
.varmuuskopio-painike:hover, button#lataaKokoVuosi:hover {
    background-color: #343a40;
    color: white;
}
.varmuuskopio-painike .fa-solid {
    margin-right: 10px;
}

.laatikko-container {
    position: relative;
}

.upload-progress-indicator {
    position: absolute;
    top: 10px;
    place-self: center;
    opacity: 0.9;
    padding: 10px;
    background-color: white;
    border: 1px solid #00000012;
    box-shadow: 0px 2px 2px #0000000a;
    border-radius: 8px;
    font-size: 0.9em;
    line-height: 1.4;
    text-align: left;
    color: #333;
}


.toimintolinkki-apu {
    padding: 8px 12px;
    font-size: 0.9em;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}
.toimintolinkki-apu:hover {
    background-color: #e0e0e0;
}

/*

button#valitseKaikki {
    background: #ffe564;
    color: black;
}

button#tyhjennaValinnat {
    background: #d3d9ff;
    color: black;
}

*/

button#valitseKaikki {
    background: white;
    color: black;
}

button#tyhjennaValinnat {
    background: black;
}

#global-drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(52, 152, 219, 0.9); /* Sinertävä tehosteväri */
    color: white;
    z-index: 9999;
    display: none; /* Oletuksena piilossa */
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Tärkeä, jotta muut hiiritapahtumat toimivat! */
    transition: opacity 0.2s ease-in-out;
}

#global-drop-overlay.visible {
    display: flex;
}

#global-drop-overlay div {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

#global-drop-overlay i {
    font-size: 3em;
    display: block;
    margin-bottom: 0.5em;
}

.media-container:focus {
    filter: brightness(1.5);
}


/* Varmistaa, että takaisin-linkit ovat fixed-asettelussa */
.takaisin-linkki {
    position: fixed;
    /* Muut takaisin-linkin tyylit (kuten koko, väri jne.) */
    z-index: 1000; /* Pidä päällä */
}

/* Kiinnittää uuden admin-painikkeen oikeaan yläkulmaan */
.admin-linkki-fixed {
    top: 20px; 
    right: 20px; 
    left: auto !important; /* Varmistaa, ettei ole vasemmalla */
}

.media-container.tyhja-ruutu {
    display: none;
}

/* Säiliö siirretyille napeille */
.overlay-painikkeet-lightbox-container, .overlay-painikkeet-lightbox-container-upload {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1001;
}

/* Itse siirretty nappirivi lightboxissa */
.overlay-painikkeet-lightbox-container .overlay-painikkeet, .overlay-painikkeet-lightbox-container-upload .overlay-painikkeet {
    position: static;
    opacity: 1;
    background: none;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
}


/* Piilotetaan turha "laajenna"-nappi lightboxin sisällä */
.overlay-painikkeet-lightbox-container .avaa-lightbox {
    display: none;
}




/* Sallitaan klikkaukset ja interagointi varsinaiselle sisällölle (kuva, video, pdf) */
#lightbox-content > * {
    pointer-events: auto;
}

.overlay-painikkeet-lightbox-container, .overlay-painikkeet-lightbox-container-upload {
    /* Asetetaan position, jotta z-index toimii */
    position: relative; 
    
    /* Nostetaan elementti muiden päälle. 
       Arvon tulee olla suurempi kuin sisar-elementtien (kuten #lightbox-content) z-index.
       Arvo 10 on yleensä turvallinen valinta. */
    z-index: 10; 

    /* Voit myös lisätä tämän, jos haluat varmistaa, ettei elementti itse estä klikkauksia,
       mutta z-index on oikea ratkaisu.
    pointer-events: none; */
}

/* Varmistetaan, että itse napit reagoivat taas klikkauksiin */
.overlay-painikkeet-lightbox-container .overlay-painikkeet, .overlay-painikkeet-lightbox-container-upload .overlay-painikkeet {
    pointer-events: auto;
}

.overlay-painikkeet-lightbox-container, .overlay-painikkeet-lightbox-container-upload {
    top: 10px;
    left: 10px;
    position: absolute;
}

/* Piilottaa lightboxin muut elementit, kun hiiri on PDF-kontrollien päällä */
#custom-lightbox:has(.pdf-controls:hover) #lightbox-caption,
#custom-lightbox:has(.pdf-controls:hover) a.overlay-painike.lataa-painike {
    opacity: 0;
    pointer-events: none; /* Estää klikkaukset piilotettuihin elementteihin */
    transition: opacity 0.2s ease-out; /* Lisää siisti häivitysefekti */
}

canvas#lightbox-pdf-canvas {
    height: auto;
    width: auto;
    max-height: 80% !important;
    max-width: fit-content;
    margin-top: -10%;
}

/* 1. Pakottaa koko lightboxin leikkaamaan pois ylivuotavan sisällön */
.lightbox-overlay {
    overflow: hidden;
}

/* 2. Estää koko sivun vaakasuuntaisen selauksen mobiililaitteilla, mikä on yleinen sivuvaikutus tässä ongelmassa */
html, body {
    overflow-x: hidden;
}

































.overlay-painikkeet a, .overlay-painikkeet button, button#upload-lightbox-delete {
    max-width: 35px;
    min-width: 0px;
    width: -webkit-fill-available;
    height: auto;
    padding: 5px;
    aspect-ratio: 1 / 1;
    max-height: fit-content;
    box-sizing: border-box;
}  


@media (max-width: 1200px) {
    .laatikko {
        max-width: 100%;
        width: 95vw;
    }

    .media-galleria {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-auto-rows: 10px; /* pieni rivikorkeus, elementit voivat spanata */
    }






}
@media (max-width: 786px) {
    .laatikko {
        max-width: 100%;
        width: 95vw;
    }

    .media-galleria {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 10px; /* pieni rivikorkeus, elementit voivat spanata */
    }

    /* Sovitetaan elementit masonry-korkeuteen */
    .media-container {
        display: block;
    }

    .media-elementti {
        width: 100%;
        height: auto;
        display: block;
    }
    
    .luo-kategoria-container form {
    display: grid;
}
    
.laatikko img {
    width: 100vw;
    max-width: 100%;
}    
    
.drop-zone {
    width: 80vw;
}
    
.lightbox-nav {
    display: none;
}    
    
/* Lightbox-sisältöalueen asettelu */
.lightbox-content {
    /* Varmistaa, että sisältö on Lightboxin keskellä */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Lightboxin oma vieritys piiloon */
}

/* Uusi zoomauksen mahdollistava kerros */
.lightbox-zoom-wrapper {
    /* Varmistaa, että PinchZoom.js toimii oikein */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto; 
    cursor: grab; /* Osoitin, joka ilmoittaa, että sisältöä voi siirtää */
    /* HUOM: zoom-wrapperin sisäinen sisältö (kuva) on oletuksena 100% leveä ja korkea */
}

/* Kuvaelementti Lightboxissa (pakotetaan näkymään kunnolla) */
.lightbox-zoom-wrapper > img {
    /* Tämä on välttämätöntä, jotta kuva skaalautuu oikein Lightboxiin */
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Varmistaa, että kuva näkyy kokonaisena Lightboxin sisällä */
    margin: auto;
}    
    
.overlay-painikkeet-lightbox-container {
    top: 15px;
}






}    
 @media (max-width: 620px) {   
    
.overlay-painikkeet-lightbox-container .overlay-painikkeet, .overlay-painikkeet-lightbox-container-upload .overlay-painikkeet {
    display: flex;
    flex-direction: row;
}    
    
pre.lightbox-text-preview {
    margin-top: 20%;
    max-width: 95vw !important;
}    
    
    
    
    
    
    
    
    
}    
 @media (max-width: 414px) {   
    
    .laatikko-container, .media-container {
    width: -webkit-fill-available;
}
    
}