/*#region Clearup*/
*,
*::after,
*::before {
    box-sizing: border-box;
}

body {
    padding: 0 0px;
    background-color: var(--bg-body);

    margin: 0;
    min-width: 100dvw;
    line-height: 26px;

    overscroll-behavior:contain;
}

/*#endregion*/

/*#region Common*/
.hidden,
i.hidden,
.grid-over-elems.hidden {
    content-visibility: hidden;
}


#root {
    width: max-content;
    position: relative;

}

p {
    margin: 0;
}



/*#endregion*/

/*#region Colors vars*/
:root {
    --border-shadow-light: rgba(200, 200, 200, 0.4);
    --border-shadow-dark: rgba(50, 50, 50, 0.4);
    --background-60: hsl(0, 0%, 60%);
    --background-40: hsl(0, 0%, 40%);
    --background-80: hsl(0, 0%, 80%);

    --bg-body: hsl(0, 0%, 40%);
    --bg-body-opacity1: hsla(0, 0%, 40%, 0.95);
    --bg-body-opacity: hsla( from var(--bg-body) h s l / 0.85);
    --bg-tab-active: var(--background-60);
}

/*#endregion*/


/*#region Sizes vars*/

:root {
    --margin-pic:15px;
    --full-pic-width: 560px;
    --full-pic-height: 280px;
    --coeff-size-for-big: 0.5;
    --coeff-size-for-small: 0.4;

    --cell-width: calc(var(--full-pic-width) * var(--coeff-size-for-big));
    --cell-height: calc(var(--full-pic-height) * var(--coeff-size-for-big));

    --cell-width-narrow: calc(2 * var(--cell-width) / 3 - 4pt);
    --row-title-width: calc(var(--cell-width) / 4);
    --row-title-height: calc(var(--cell-height) * 0.9);

    --pic-small-width: calc(var(--full-pic-width) * var(--coeff-size-for-small));
    --pic-small-height: calc(var(--full-pic-height) * var(--coeff-size-for-small));
}

/*#endregion*/

/*#region Sticky position*/
.row-day::before {
    display: inline-block;
    position: sticky;
    left: 20px;
    z-index: 10;
}

.header-div {
    height: 3em;
    margin: 0;
    padding: 0;
    background-color:var(--bg-body-opacity); 
      width: 100vw;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

.header-div .header-content {
  padding: 1em;
  background-color:var(--bg-body-opacity);
}

/*#endregion*/

/*#region .header-div */


.header-div details {
    margin: auto;
    width: max-content;
    display: grid;
    background-color: var(--bg-body);
}

.header-div details summary {
    list-style: none;
    font-size: 2em;
}

.header-div details[open] summary span {
    color: var(--bg-body);
}

.header-div details summary::after {
    content: '\f0c9';
    margin: 0 1em 0 1em;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.header-div details[open] summary::after {
    content: '\f00d';
}

.header-div ul {
    width: max-content;
    margin: 0;
    justify-self: right;
}

.header-div ul,
.header-div li {
    list-style: none;
}

.header-div ::first-letter {
    text-transform: uppercase;
}

.header-div details a {
    color: #000;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    width: 100%;
}

.header-div details a p {
    margin-block: 0;
    text-align-last: justify;
}

.header-div details a .curr {
    color: aqua;
}

/* animate detail */
.header-div details[open]::details-content {
    height: auto;
}

.header-div ::details-content {
    height: 0;
    transition: height 50ms ease-out, content-visibility 50ms ease-out allow-discrete;
    overflow: clip;
}

:root {
    interpolate-size: allow-keywords;
}

/*#endregion*/

/*#region tab-month */
.tab-month {
        content-visibility: hidden;
    position: relative;
    /* padding-bottom: var(--margin-pic); */
    background: var(--bg-tab-active);


}
body{
      position: absolute;
}
html{
    width: 100%;
}
html{
    /* width: 100vw; 
    overflow: scroll;*/
         scroll-snap-type: both mandatory;
    scroll-padding-top: calc(5em + var(--margin-pic));
    scroll-padding-left:var(--row-title-height) ;

}

.cell{
    scroll-snap-align: start;


}

/* .tab-month:not(:target) {
    content-visibility: hidden;
} */

.tab-month:target {
    content-visibility: auto;
}
div::-webkit-scrollbar {
  display: none;
}

/*#endregion*/

/*#region Border & shadow */

.row-day>* {
    border-top-left-radius: 4% 7%;
    border-bottom-left-radius: 4% 9%;
    border-top-right-radius: 4% 8%;
    border-bottom-right-radius: 4% 8%;
}
.row-day>:first-child {
    border-top-left-radius: 6% 7%;
    border-bottom-left-radius: 6% 9%;
    border-top-right-radius: 6% 8%;
    border-bottom-right-radius: 6% 8%;
}

.cell,
.row-day::before {
    box-shadow:
        1px -5px 5px -1px var(--border-shadow-light),
        -1px -5px 5px -1px var(--border-shadow-light),
        1px 1px 5px -1px var(--border-shadow-dark),
        -1px 1px 5px -1px var(--border-shadow-dark);
}
.header-content{
    box-shadow:

        0 10px 5px 1px  rgba(50, 50, 50, 0.3),

        0 5px 5px 1px  rgba(20, 20, 20, 0.7)        

}

/*#endregion*/

/*#region Cell & image */
.row-day  {
    display: flex;
    margin: var(--margin-pic);
    gap: var(--margin-pic);
    min-width: max-content;
    height: var(--cell-height);
    /* scroll-snap-align: start; 
     scroll-snap-type : x required;*/
}
.row-day>*{
    flex: 0 0 var(--cell-width);
}
.row-day :first-child{
    flex: 0 0 var(--cell-width-narrow);
}
.cell {
    overflow: hidden;
}

/* .cell form:has(>.cell-form),
.cell.pic-exist .cell-img ,
.cell.pic-exist>img {
    content-visibility: auto;
}
.cell-img{
    display: none;
} */
img{
    width: 100%;
    display: block;
}
.num-box{
    display: none;
}
/* .cell .cell-img,.cell>img,
.cell.pic-exist form:has(>.cell-form) {
    content-visibility: hidden;
} */

.pic-exist:not(.pic-exist:has(~ .pic-exist)) img {
    filter: none
}

.cell.pic-exist img {
    filter: grayscale(0.8);
}

.cell{
    position: relative;
    /* scroll-snap-align: center; */
}
    .cell::before{
    content: attr(data-box-num);
    position: absolute;
    display: block ;
      z-index: 10;
      top: 10%;
      right: 5%;
      font-size: 1.5em;
      color: #ddd;
    }
    .cell.pic-exist::before,
    .cell[data-box-num='0']::before{
content: none;
    }


.row-day::before {
    content: attr(data-day-num);
    margin-right: 20px;
    order: -1;
    height: var(--row-title-height);
    min-height: max-content;
    flex: 0 0 var(--row-title-width);
    border-radius: 50%;
    order: -1;
    align-content: center;
    align-self: center;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    background-color: var(--bg-body-opacity);
}


/*#endregion*/

/*#region Sizes all */

.grid-over-elems {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
}



.grid-over-elems>* {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
    z-index: 1;
    color: rgb(130, 260, 160);
    align-self: center;
    text-align: center;
    
}

.cell.grid-over-elems {
    width: var(--cell-width);
    height: var(--cell-height);
}

.cell.grid-over-elems:first-child {
    width: var(--cell-width-narrow);
}

.cell-form {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.cell-form img,
.cell-img img
.cell>img{
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.cell-form img{
    aspect-ratio: 16 / 9;
}
.cell-img img{
        aspect-ratio: 2 / 1;
}

.cell:first-child .cell-img img,
.cell:first-child>img{
    width: var(--cell-width);
    max-width: var(--cell-width);
}
/*#endregion*/

/*#region Form Input & button */

.cell-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) max-content;
    align-items: center;
    justify-items: right;
    overflow: hidden;
    padding: 4px;
}

.cell-form .btn-browse,
.cell-form .btn-upload {
    grid-row: 2;
}

.cell-form .btn-browse {
    grid-column: 1;
    justify-self: start;
}

.cell-form .btn-upload {
    grid-column: 2;
}

.cell-form img {
    display: block;
    object-fit: contain;
    grid-row: 1;
    grid-column: -1 / 1;
}

button:disabled{
    opacity: 0.4;
}

input {
    opacity: 0;
    height: 1px;
    width: 1px;
}
button{
    font-family: 'Times New Roman', Times, serif;
}

.btn-browse,
.btn-upload {
    display: inline-block;
    border: 0;
    cursor: pointer;
    background-color: #00c000;
    border-radius: 20% / 45%;
    padding: 2px 8px;
    border-bottom: 4px solid #006400;
    font-weight: bold;
    color: white;
    margin: 3px;
    margin-bottom: 5px;
    min-width: 20px;
    max-width: 90%;
    width: max-content;
    height: max-content;
    aspect-ratio: 25 / 7;
    transition: transform 350ms;
    line-height: inherit;
    font-size: inherit;
}

.btn-browse:active,
.btn-upload:active {
    transform: translateY(4px);
}

.btn-browse::before,
.btn-upload::after {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: bold;
    margin-left: calc(1em + 4px);
    margin-right: 1em;
}

.btn-browse::before {
    content: "\f07c";
}

.btn-upload::after {
    content: "\f093";
}

.cell:not(:has(img[data-src$="box0.jpg"])) .btn-browse::after {
    content: 'Browse';
}

.cell:not(:has(img[data-src$="box0.jpg"])) .btn-upload::before {
    content: 'Upload';
}

.cell:not(:has(img[data-src$="box0.jpg"])) .btn-browse::before,
.cell:not(:has(img[data-src$="box0.jpg"])) .btn-upload::after {
    margin-left: 0;
    margin-right: 0;
}

.cell:has(img[data-src$="box0.jpg"]) .btn-browse,
.cell:has(img[data-src$="box0.jpg"]) .btn-upload {
    border-radius: 25% / 50%;
}

div:has(>button) {
    height: max-content;
}

/*#endregion*/