/* 

structure et viewer 

*/
#main-header {
    grid-area: header;
}
#titlebar {
    grid-template-areas:
        "title"
        "subtitle"
        "menu-pages"; 
    column-gap: 1rem;
    align-items: end;
    justify-content: space-evenly;
}
#titlebar h1 {
    grid-area: title;
}
#menu-pages {
    grid-area: menu-pages;
    display: flex;
    gap:0.5rem;
    /*justify-content: flex-end;*/
}

#menu-pages div:hover {
    cursor: pointer;
    color: var(--color-link-hover);
}
.soustitre {
    grid-area: subtitle; 
    color:var(--color-light);
}

#main-frame {
    height:100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: fit-content(8rem) auto;
    grid-template-areas: 
        "header header header"
        "main main main";  
}

#main-container {
    grid-area: main;
    overflow-y:auto; 
} 



[data-viewershow="hide"] #main-frame {
    grid-template-areas: 
        "header header header"
        "main main main";
}

[data-viewershow="show"][data-viewertype="lateral"] #main-frame {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
        "header header header"
        "viewer viewer viewer";
}

[data-viewershow="show"][data-viewertype="lateral"] #main-frame #main-container  {
    display:none;
}

[data-viewershow="show"][data-viewertype="fullwindow"] #main-frame,
[data-viewershow="show"][data-viewertype="gal"] #main-frame {
    grid-template-areas: 
        "header header header"
        "main main main";
}

#viewer-main {
    grid-area: viewer;
    overflow-y:auto;
    background-color: #fff;
    position:relative;
}

#viewer-inner {
    height: 100%;
}

.generic-viewercontent {
    width: 100%;
    max-width: 45rem;
    margin: 0 auto;
}

[data-viewershow="hide"] #viewer-main {
    display: none;
    opacity:0;
}
[data-viewershow="show"] #viewer-main {
    display: block;
    animation: viewershow 0.4s ease-in;
}

[data-viewershow="show"][data-viewertype="fullwindow"] #viewer-main, 
[data-viewershow="show"][data-viewertype="gal"] #viewer-main {
    position:fixed;
    left:0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 1000;

}

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

@keyframes viewershow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}




/* 

collection 

*/
.collectionitem {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 1rem;
    margin-bottom:0.5rem;
    border-radius: 4px;
    background: #efefef;
    border: 1px solid var(--color-light);
    align-items: center;
    font-family: var(--ff-bold-secondary);
    cursor: move;
}
#collection-actuel {
    margin-left: -0.5rem;
}

.collection-edit {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
}

/* 

formulaires

*/
.sfw-form label {
    padding: 0 !important;
}
.field-date_creation {
    display:none;
}

.filetag-container {
}

.filetag-container .input-file {
    display: none;
}

.file-toolbox {
    position: absolute;
    right:1rem;
    top:1rem;
}

[data-process="upload"] .progress_bar {
    display: block
}
[data-process="idle"] .progress_bar {
    display: none;
}
.f-box {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.f-icon {
    aspect-ratio: 1/1;
    object-fit: contain;
    height: 4rem !important;
    max-width: 100%;
    background-color: #efefef;
    border-radius: 3px;
    padding: 3px;
}
.f-icon:hover {
    transform: scale(2);
}

.f-sm-icon {
    height: 2.5rem !important; 
}
.f-disabled {
    display:none;
    /*animation: dissapears 0.5s ease-in forwards;*/
}
.f-info {
    flex-grow: 4;
}

.cropper-icon:hover {
    background-color: var(--color-ok)
}

/* les viewers et leurs icones de menu */
#viewer-inner.wait, .filecontainer.wait {
    filter: blur(4px);
}
#waiticon {
    width: 54px;
    height: 54px;
    position: absolute;
    top:50%;
    left:50%;
    animation: spinit 1s steps(8) infinite;
    display: none;
}
#viewer-inner.wait + #waiticon {
    display: block;  
}


#viewer-menu {
    display: flex;
    justify-content: space-between;
}

[data-viewertype='fullwindow'] #viewer-menu {
    position:fixed;
    top:0;
    left:0;
    width: 100vw;
    z-index: 10000;
    background-color: rgba(255,255,255,0.7);  
}

#v-nav-edit {
    display: flex;
    justify-content: start;
    gap: 4px;
}
#v-viewermode {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.v-icon {
    background-color: #eee;
    border-radius: 4px;
    padding: 5px 0;
    cursor: pointer;
    text-align: center;
    width: 26px;
    box-sizing: border-box;
}

.v-icon.v-type {
    padding: 5px 5px;
    width: auto;
}
.v-icon.v-type img {
    height: 16px;
}
span.v-icon {
    padding: 2px;
    line-height:0;
}
span.v-icon img {
    width: 12px;
    height: auto;
}
#v-viewermode .v-icon {

}
.v-icon.edit img, #mode-fullscreeen img {
    transform: scale(0.9);
}

.v-icon:hover {
    background-color: #ccc
}

#v-viewerclose.v-icon:hover {
    background-color: var(--color-third);
}

#mode-exitfullscreeen {
    display:none;
}

.fullscreen #mode-exitfullscreeen {
    display:block;
}
.fullscreen #mode-fullscreeen {
    display:none;
}

[data-viewertype='lateral'] #mode-lateral { display:none; } 
[data-viewertype='fullscreen'] #mode-fullscreen { display:none; } 
[data-viewertype='fullwindow'] #mode-fullwindow { display:none; } 
[data-viewertype='gal'] #mode-gal { display:none; } 

@media (min-width: 768px) {
    #fw {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "fwvisual fwinfos" ;
    }

    [data-viewershow="show"][data-viewertype="lateral"] #main-frame {
        grid-template-areas: 
            "header header header"
            "main main viewer";
    }
    [data-viewershow="show"][data-viewertype="lateral"] #main-frame #main-container  {
        display:block;
    }

    #titlebar {
        grid-template-areas:
            "title  menu-pages" 
            "subtitle subtitle  ";
    }
}


@media (min-width: 992px) {
        #fw {
        grid-template-columns: 3fr 1fr;
    }
    
}


@media (min-width: 1200px) {
    #fw {
        grid-template-columns: 4fr 1fr;
    }
    
}