@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Lato&family=Alice&display=swap');

:root,
::backdrop {
    /* Colors (palette)*/
    --col-purewhite:     white;
    --col-white:         #E8E9EB; /* RGB(232, 233, 235) */
    --col-grey:          #E0DFD5; /* RGB(224, 223, 213) */
    --col-black:         #313638;
    --col-accent-dark:   #EF6461;
    --col-accent-light:  #E4B363;  /*#e29f6e;;*/

    --col-white-with-alpha: rgba(232, 233, 235, 0.2); /*#E8E9EB with alpha*/
    --col-purewhite-with-alpha: rgba(255, 255, 255, 0.2); /*#ffffff with alpha*/
    --col-black-with-alpha:rgba(49,54,56, 0.6); /*#313638 with alpha*/
    --col-transparent:    rgba(0, 0, 0, 0); 

    /* Colors (background)*/
    --bg-col:                   var(--col-purewhite);
    --hdr-bg-col:               var(--col-white);

    --btn-bg-col:               var(--col-grey); 
    --btn-bg-col-alt:           var(--col-accent-dark);

    --dialog-bg-col:            var(--col-purewhite); 

    --book-itm-bg-col:          var(--col-black-with-alpha);
    --book-title-bg-col:        transparent; /*var(--col-white-with-alpha);*/
    --book-data-bg-col:         var(--col-black-with-alpha);

    /* Colors (text/icons)*/
    --col-txt:                  var(--col-black);
    --col-txt-alt:              var(--col-white);
    --col-highlight:            var(--col-accent-dark);

    --btn-col:                  var(--col-black);
    --btn-col-alt:              var(--col-black);
    --btn-focus-col:            var(--col-grey);

    --dialog-col:               var(--col-black);
    --dialog-border-col:        var(--col-accent-dark);
    --dialog-input-border-color: var(--col-grey);
    --dialog-label-color: var(--col-white);
    --dialog-label-focus-color: var(--col-grey);

    --book-title-col:           var(--col-purewhite-with-alpha); /*var(--col-purewhite);*/
    --book-author-col-secondary:var(--col-purewhite-with-alpha);
    --book-author-col:          var(--col-purewhite);
    --book-data-col:            var(--col-accent-light);
    --book-data-lbl-col:        var(--col-grey);
    --book-data-alt-col:        var(--col-purewhite);
    --book-highlight-col:       var(--col-accent-dark);
    --book-addedon-lbl-col:     var(--book-data-lbl-col);
    --book-addedon-col:         var(--col-purewhite);
    --book-footer-icon-col:     var(--col-purewhite);

    --book-page-btn-col:             var(--book-data-alt-col);
    --book-page-btn-col-hover:       var(--book-data-alt-col);
    --book-page-btn-col-active:      var(--col-black);

    --book-page-btn-bg-col:          var(--col-black);
    --book-page-btn-bg-col-hover:    var(--col-black-with-alpha);
    --book-page-btn-bg-col-active:   var(--col-grey);

    /* Shadows */
    --outset-shadow-center: 0px 0px 3px var(--col-black);
    --outset-shadow-below: 0px 1px 5px var(--col-black);
    --outset-shadow-top: 0px -1px 3px var(--col-black);
    --title-txt-shadow: white 1px 1px 1px, var(--col-black-with-alpha) -1px 0px 1px, var(--col-black) 0px 0px 10px;
    --author-txt-shadow: var(--col-black-with-alpha) -1px 0px 2px, black 0px 0px 10px; /*var(--col-black) 1px 1px 1px,var(--col-black) 0px 0px 10px;*/
    --author-secondary-txt-shadow: var(--title-txt-shadow);
    --data-txt-shadow: black 1px 1px 1px,var(--col-black) 0px 0px 10px;

    /* Font family */
    --main-font: 'Lato', sans-serif;
    --hdr-font: 'Montserrat', sans-serif;
    --highlight-font: 'Alice', serif;

    /* Font sizes */
    --txt-fontsize:     min(1.6vmax, 16px);
    --txt-lineheight:   1.2;

    --dialog-fontsize:          1.1rem;
    --dialog-btn-fontsize:      1rem;
    --dialog-input-lineheight: 2;
    --unselected-fontsize: calc(var(--dialog-fontsize) * 0.5);

    --hdr-fontsize:             2rem;
    --hdr-btn-fontsize:         0.8rem;
    --book-title-fontsize:      2rem;
    --book-author-fontsize:     1.05rem;
    --book-data-fontsize:       1.5rem;
    --book-data-lbl-fontsize:   1rem;
    --book-pages-read-fontsize: 1.2rem;
    --book-state-fontsize:      30px;
    --book-addedon-fontsize:    0.8rem;
    --book-addedon-var-fontsize: 0.9rem;
    --book-page-btn-fontsize:   1rem;

    /* Text clamping: number of lines */
    /* --main-itm-project-description-max-lines: 6;
    --main-itm-announcements-description-max-lines: 3; */

    /* Maximum width (including dashboard margin) */
    --max-width: min(1440px, 100%);

    /*Margins, gaps and paddings (+widths)*/
    --btn-focus-offset:     1px;
    --btn-focus-width:      2px;

    --dialog-padding:       20px;
    --dialog-border-width:  3px;
    --dialog-gap:           1.5rem;
    --dialog-btn-height:    3rem;
    --dialog-btn-width:     5rem;
    --dialog-btn-gap:       10px;
    --dialog-btn-border-width:2px;
    --dialog-form-gap: calc(var(--dialog-gap) / 2) calc(var(--dialog-gap));
    --dialog-form-radius: calc(var(--radius) / 2);

    --hdr-padding-tb:       10px;
    --hdr-padding-lr:       25px;
    --hdr-padding:          var(--hdr-padding-tb) var(--hdr-padding-lr);
    --hdr-btn-height:       3.5rem;
    --hdr-btn-width:        3.5rem;
    --hdr-btn-gap:          6px;
    --hdr-btn-icon-len:     1.8rem;
    --hdr-btn-border-width: 2px;

    --main-padding:         25px;

    --books-container-gap:  2rem;

    --book-box-max-width:   200px;


    --book-title-rows: 2;

    --book-box-padding:      10px;
    --book-box-data-gap-ver: 15px;
    --book-box-data-gap-hor: 10px;
    --book-box-data-gap:     var(--book-box-data-gap-ver) var(--book-box-data-gap-hor);
    --book-author-bottom-padding: calc(2 * var(--book-box-padding));

    --book-state-height:    80px;
    --book-state-height:    calc(var(--book-property-height) + var(--book-page-btn-height) + var(--book-box-data-gap-ver));
    --book-pages-btns-gap:  0px;
    --book-footer-icon-gap: 0.4rem;
    --book-footer-icon-len:  min(2rem, 24px);;

    --book-page-btn-height: 2rem;
    --book-page-btn-width:  3rem;

    --book-title-height: calc(var(--book-title-fontsize) * var(--txt-lineheight) * var(--book-title-rows)
                            + 2 * var(--book-box-padding));
    --book-author-height: calc(var(--book-author-fontsize) * var(--txt-lineheight) + var(--book-author-bottom-padding));
    --book-property-height: calc((var(--book-data-lbl-fontsize) + var(--book-data-fontsize)) * var(--txt-lineheight));
    --book-data-height: calc(2 * var(--book-box-padding) + var(--book-property-height) + var(--book-box-data-gap-ver) 
                        + max(var(--book-property-height) + var(--book-page-btn-height) + var(--book-box-data-gap-ver),var(--book-state-height)));
    --book-footer-height: calc(max(max(var(--book-addedon-fontsize) + var(--book-addedon-var-fontsize)) * var(--txt-lineheight), var(--book-footer-icon-len))
                        + 2 * var(--book-box-padding));

    --book-box-height: min-content;
    --book-box-height: calc(var(--book-title-height) + var(--book-author-height) + var(--book-data-height) + var(--book-footer-height));

    /* settings */
    --display-settings-gap:             0.8rem;

    --display-settings-label-fontsize:  1rem;
    --display-settings-fontsize:        1.2rem;
    --display-settings-unselected-fontsize: calc(var(--display-settings-fontsize) * 0.5);
    --display-settings-line-color:      var(--col-grey);

    --display-settings-input-height:    max(2.2rem, calc(var(--display-settings-fontsize) * var(--txt-lineheight) + 1px)); /*1px: border bottom of input*/
    
    --display-settings-btn-width:       2.5rem;
    --display-settings-btn-gap:         0px;
    --display-settings-btn-icon-len:    var(--display-settings-input-height);
    --display-settings-btn-fontsize:    var(--display-settings-label-fontsiz);
    --display-settings-btn-border-width:0px;
    --display-setting-orderby-gap:      0.5rem;
    --display-setting-orderby-width:    11rem;
    --display-setting-favourite-max-width: 5rem;

    --display-settings-radio-label-padding-lr: calc(var(--radius) *2 / 3);    

    /* Radius */
    --radius:           10px;

    /* Animations on hover / active / ...*/
    --transition-time: 0.3s;
}

::backdrop {
    background-color: var(--col-black);
    opacity: 0.75;
}


html {
    background-color: var(--bg-col);
    color: var(--col-txt);
    font-family: var(--main-font), sans-serif;
    font-weight: 400;
    font-size: var(--txt-fontsize);
    line-height: var(--txt-lineheight);
}

*,
*:before,
*:after{
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

ul{
    list-style: none;    
}

a,
a:hover,
a:active,
a:visited{
    text-decoration: none;
}

label{
    user-select: none;
}

body {
    margin: 0 auto;
    min-height: 100vh;
    height: 100%;
    /*it is assumed the same for <html>*/
    width: 100%;
    /* or max-width -- this avoids horizontal scroll bars */
    touch-action: manipulation; /* disable double tap to zoom on some browsers*/
}

/*****************************************************/

/* || Generic */

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

header,
main{
    width: 100%;
}

.header-container,
.main-container{
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Buttons */
.group-buttons{
    display: flex;
    justify-content: space-around;
    gap: var(--btn-gap);
}

button{
    height: var(--btn-height);
    width: var(--btn-width);
    font-size: var(--btn-fontsize);
    border-radius: var(--radius);
    vertical-align: middle;
    text-wrap: balance;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-bg-col);
    color: var(--btn-col);
    border: var(--btn-border-width) solid transparent;
    background-clip: padding-box; /*to set the border transparent*/
    outline: none;
    user-select: none;
}

button > * {
    pointer-events: none;
}

button.btn-highlight{
    background-color: var(--btn-bg-col-alt);
    color: var(--btn-col-alt);
}

button:hover{
    font-weight: bold;
    border-color: var(--btn-bg-col);
}

button.btn-highlight:hover{
    border-color: var(--btn-bg-col-alt);
}

button:active,
button.btn-highlight:active{
    font-weight: bold;
    border-color: transparent;
}

button:focus-visible{
    outline: var(--btn-focus-width) solid var(--btn-focus-col);
    outline-offset: var(--btn-focus-offset);
}

button .icon{
    display: flex;
    justify-content: center;
    align-items: center;
}

button .icon::before{
    display: inline-block;
    content:"";
    width: var(--btn-icon-len); 
    height: var(--btn-icon-len); 
    background-size: var(--btn-icon-len) var(--btn-icon-len);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--btn-col);
}

button.btn-highlight .icon::before{
    background-color: var(--btn-col-alt);
}

/* || Header */

header{
    background-color: var(--hdr-bg-col);
    box-shadow: var(--outset-shadow-below);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-container{
    font-family: var(--hdr-font);
    font-size: var(--hdr-fontsize);
    padding: var(--hdr-padding);
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.header-container h1 .highlight{
    color: var(--col-accent-dark);
}

/* || Header buttons */
.header-buttons{
    --btn-height: var(--hdr-btn-height);
    --btn-width: var(--hdr-btn-width);
    --btn-gap: var(--hdr-btn-gap);
    --btn-icon-len: var(--hdr-btn-icon-len);
    --btn-fontsize: var(--hdr-btn-fontsize);
    --btn-border-width: var(--hdr-btn-border-width);
}

.header-container .txt{
    display: none;
}

.header-container button:hover .icon::before{
    display: none;
}
.header-container button:hover .txt{
    display: initial;
}

.header-container button:hover{
    border-radius: 50%;
}

/* || Main */

main{
    flex: 1;
}

/* || Books container */
.books-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--book-box-max-width),100%),1fr));
    gap: var(--books-container-gap);
    justify-content: stretch;
    padding: var(--main-padding);
}


/* || Book box */
.book-box{
    height: var(--book-box-height);
    min-height: var(--book-box-height);
    max-height: var(--book-box-height);

    background-color: var(--book-itm-bg-col);
    border-radius: var(--radius);
    box-shadow: var(--outset-shadow-center);

    display: grid;
    grid-template-rows: min-content min-content min-content min-content min-content;
    grid-template-areas: 
        "title"
        "author"
        "image"
        "data"
        "footer";
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    transition: all var(--transition-time);

    /* remove this: apparently, using mask: linear-gradient(...) and backdrop-filter: blur(...)  to dissolve the blur, */
    /* eg, in .book-header-section, does not work properly when there is overflow: hidden in a container */
    /* by removing the following overflow hidden the expected behaviour happens */
    /* This introduce non-rounded corners in the footer of the box, caused by the data section which is pushed down */
    /* This is fixed later in the style for .book-footer-section, as it only involves that part */
    /* see https://stackoverflow.com/questions/76921302/backdrop-filter-in-combination-with-mask-image-doesnt-work-as-expected-on-chrom */
    /* overflow: hidden; */ 
}

.book-box.fitFontSizeTempShow{ /* it is used by jd function fitFontSize() in js/script.js to adapt fontsize container*/
    display: grid !important; /*this must be the same as display in .book-box */
    visibility: visible !important;
}

.book-box.hide,
.book-box.unmatched{
    display: none;
}

/* Book box - generic section */
.book-section{
    padding: var(--book-box-padding);
    transition: all var(--transition-time);
}

.var-data{
    font-family: var(--highlight-font);
    /* white-space: nowrap; */
}

/* Book box - title and author section */

/* see https://stackoverflow.com/questions/57700730/how-to-fade-edges-of-backdrop-filter-blur*/
.book-header-section {
    position: relative;
    z-index: 1;
}

.book-header-section *{
    z-index: 2;
}

.book-header-section::after {
    content: "";
    position: absolute;
    --book-header-padding: 0px; /*calc(var(--book-box-padding)/2);*/
    inset: var(--book-header-padding) var(--book-header-padding) var(--book-header-padding) var(--book-header-padding);
    z-index: -1;

    /* border: 2px solid var(--bg-col);
    border-bottom: none; */
    background-image: linear-gradient(180deg, var(--col-black) 0%, var(--book-data-bg-col) 60%, var(--col-transparent));
    border-radius: var(--radius) var(--radius) 0  0;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    mask: linear-gradient(#000 0%, #0000 80%);
    -webkit-mask: linear-gradient(#000 0%, #0000 80%);
}

.book-title-section{
    grid-area: title;
    font-size: var(--book-title-fontsize);
    text-align: center;
    font-variant: small-caps;
    text-wrap: balance;

    min-height: var(--book-title-height);
    max-height: var(--book-title-height); 
    height: var(--book-title-height);
    width: 100%;
}

.book-title-section h2{
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    
    border-radius: var(--radius);
    background-color: var(--book-title-bg-col);
    color: var(--book-title-col);
    text-shadow: var(--title-txt-shadow);
    /* box-shadow: var(--outset-shadow-center); */
}

.book-author-section{   
    grid-area: author;
    padding-top: 0px;
    padding-bottom: var(--book-author-bottom-padding);
    font-size: var(--book-author-fontsize);
    text-align: right;
    color: var(--book-author-col-secondary);
    text-shadow: var(--author-secondary-txt-shadow);
}

.book-author-section .book-author .var-author{
    font-weight: bold;
    color: var(--book-author-col);
    text-shadow: var(--author-txt-shadow);
}

/* Book box - image section */
/* This is an empty div, used to show the underlaying image*/

.book-image-section{
    grid-area: image;
    padding: 0;
    height: var(--book-data-height);
    background-color: transparent;
}

/* Book box - data section */

.book-data-section{
    grid-area: data;
    height: 0px;
    padding: 0px var(--book-box-padding) 0px;
    overflow: hidden;
    background-image: linear-gradient(180deg, var(--book-data-bg-col), var(--col-transparent));

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
        "genre      year"
        "pages      state"
        "pagesBtns  state";
    align-items: end;
    justify-items: center;
    text-align: center;
    gap: var(--book-box-data-gap);

    border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0;
    box-shadow: var(--outset-shadow-top);
}

.book-data{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--book-data-lbl-col);
    font-size: var(--book-data-lbl-fontsize);
}

.book-data .var-data{
    font-weight: bold;
    font-size: var(--book-data-fontsize);
    color: var(--book-data-col);
    text-shadow: var(--data-txt-shadow);
}

.book-genre{
    grid-area: genre;
}

.book-year{
    grid-area: year;
}

/* Book box - data section (pages) */

.book-pages{
    grid-area: pages;
    align-self: center;
}

.book-pages .var-pages-read,
.book-pages .var-pages-read-style{
    color: var(--book-data-alt-col);
    font-size: var(--book-pages-read-fontsize);
    text-transform: full-width;
}

.book-pages-btns{
    grid-area: pagesBtns;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--book-pages-btns-gap);
}

.book-pages-btns button{
    height: var(--book-page-btn-height);
    width: var(--book-page-btn-width);
    color: var(--book-page-btn-col);
    font-size: var(--book-page-btn-fontsize);
    font-weight: bold;
    background-color: var(--book-page-btn-bg-col);
    border: none;
    box-shadow: 0px 0px 3px var(--col-white);
    outline: none;
    border-radius: var(--radius);
    vertical-align: middle;
    display:inline-flex;
    align-items: center;
    justify-content: center;
}
.book-pages-btns button:first-child{
    border-radius: var(--radius) 0 0 var(--radius);
}
.book-pages-btns button:last-child{
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Book box - data section (state) */

.book-state{
    grid-area: state;
    display: flex;
    align-items: center;
    align-self: center;
}

.book-state svg {
    width: auto;
    height: var(--book-state-height);
}

.book-state svg circle:first-child{
    stroke: var(--bg-col);
}

.book-state svg circle:nth-child(2){
    stroke: var(--book-highlight-col);
}

.book-state svg textPath{
    fill: var(--book-data-alt-col);
    font-variant: small-caps;
    font-size: var(--book-state-fontsize);
}

/* Book box - footer section */

.book-footer-section{
    grid-area: footer;
    background-image: linear-gradient(0deg, var(--book-data-bg-col), var(--col-transparent));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /*fix for the problem reported in the style of .book-box*/
    overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
    height: var(--book-footer-height);
}

.book-footer-section .book-icons{
    display: flex;
    align-items: flex-end;
    gap: var(--book-footer-icon-gap);
    color: var(--book-addedon-col);
    font-size: 0;
}

#display-setting-filter-favourites label div.icon.favourites-yes::before, /* see the other styles below*/
.book-footer-section .book-icons div::before{
    display: inline-block;
    content:"";
    width: var(--book-footer-icon-len); 
    height: var(--book-footer-icon-len); 
    background-size: var(--book-footer-icon-len) var(--book-footer-icon-len);
    background-color: var(--book-footer-icon-col);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.book-box.favourite .book-footer-section .book-icons div.like::before{
    background-color: var(--book-highlight-col);
}

.book-footer-section .book-icons div:not(.like)::before{
    visibility: hidden;
}

.book-addedon{
    font-size: var(--book-addedon-fontsize);
    color: var(--book-addedon-lbl-col);
    visibility: hidden;
    opacity: 0;
    transition: all var(--transition-time);
    text-align: right;
}

.book-addedon .var-addedon{
    font-size: var(--book-addedon-var-fontsize);
    color: var(--book-addedon-col);
}

/* || Book box: hover */

.books-container.view-text .book-box .book-image-section,
.book-box:hover .book-image-section{
    height: 0;
}

.books-container.view-text .book-box .book-data-section,
.book-box:hover .book-data-section{
    padding: var(--book-box-padding);
    height: var(--book-data-height);
    background-color: var(--book-data-bg-col);
}

.books-container.view-text .book-box .book-footer-section,
.book-box:hover .book-footer-section{
    background-color: var(--book-data-bg-col);
}

.books-container.view-text .book-box .book-addedon,
.book-box:hover .book-addedon{
    visibility: visible;
    opacity: 1;
    transition: all var(--transition-time);
}

.book-pages-btns button:hover {
    background-color: var(--book-page-btn-bg-col-hover);
    color: var(--book-page-btn-col-hover);
}

.book-pages-btns button:active {
    background-color: var(--book-page-btn-bg-col-active);
    color: var(--book-page-btn-col-active);
}

.books-container.view-text .book-box .book-footer-section .book-icons div:not(.like)::before,
.book-box:hover .book-footer-section .book-icons div:not(.like)::before{
    visibility: visible;
}

/* || Dialog boxes */

dialog{
    border-radius: var(--radius);
    color: var(--dialog-col);
    background-color: var(--dialog-bg-col);
    border: var(--dialog-border-width) solid var(--dialog-border-col); 
    box-shadow: var(--outset-shadow-center);
    font-size: var(--dialog-fontsize);
                
    /*center it in the page*/
    /* top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;  */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.dialog-content{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-around;
    gap: var(--dialog-gap);
    padding: var(--dialog-padding);
}

.flex-separator{
    flex:1;
}

.dialog-buttons{
    --btn-height: var(--dialog-btn-height);
    --btn-width: var(--dialog-btn-width);
    --btn-gap: var(--dialog-btn-gap);
    --btn-fontsize: var(--dialog-btn-fontsize);
    --btn-border-width: var(--dialog-btn-border-width);
}

.dialog-buttons button.suggest{
    --btn-width: max-content;
    padding-left: var(--dialog-padding);
    padding-right: var(--dialog-padding);
}

dialog#dialog-delete-this-book{
    max-width: min(calc(var(--max-width) - 2 * var(--main-padding)), 768px) !important;
}

dialog#dialog-delete-this-book span{
    font-weight: bold;
    font-family: var(--highlight-font);
}

dialog#dialog-delete-this-book span.book-to-delete-title{
    font-style: italic;
}

/* | Dialog new book */
dialog#dialog-new-book{
    max-width: min(calc(var(--max-width) - 2 * var(--main-padding)), 768px);
    width: 100%;
}

.dialog-form{
    font-size: var(--dialog-fontsize);
    line-height: var(--dialog-input-lineheight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "title title"
    "author author"
    "genre genre"
    "year year"
    "state state"
    "pages pagesread";
    gap: var(--dialog-form-gap);
}

#new-book-title-div{
    grid-area: title;
}
#new-book-author-div{
    grid-area: author;
}
#new-book-year-div{
    grid-area: year;
}
#new-book-genre-div{
    grid-area: genre;
}
#new-book-pages-div{
    grid-area: pages;
}
#new-book-pagesread-div{
    grid-area: pagesread;
}
#new-book-state-fieldset{
    grid-area: state;
}

form>.input-field{
    display: grid; 
    grid-template-columns: 5.8em 1fr;
    grid-template-areas:
        "label input"; 
    overflow: hidden;
    border-radius: var(--dialog-form-radius);
    border: 1px solid var(--dialog-input-border-color);
}

form>.input-field#new-book-pages-div,
form>.input-field#new-book-pagesread-div{
    grid-template-columns: 1fr;
    grid-template-areas:
        "label"
        "input";  
}

form .input-field label{
    grid-area: label;
    background-color: var(--dialog-label-color);
    padding-left: var(--radius);
    padding-right: var(--radius);
}

form .input-field input,
form .input-field select{
    font-size: var(--dialog-fontsize);
    line-height: var(--dialog-input-lineheight);
    grid-area: input;
    padding-left: var(--radius);
    padding-right: var(--radius);
    border: none;
    outline: none;
}

form>div input[type='number']{
    padding-right: 0;
}

form>div input:required+label:after{
    content: ' *';
    color: var(--col-highlight);
}
.note{
    font-style: italic;
}
.required-span{
    color: var(--col-highlight);
    font-style: normal;
}

form>div:hover label{
    background-color: var(--dialog-input-border-color);
}

form>div input:focus+label{
    background-color: var(--dialog-label-focus-color);
    font-weight: bold;
}


fieldset{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--dialog-input-border-color);
    border-radius: var(--radius);
    outline: none;
    /* align-self: end; */
}

fieldset input{
    display: none;
}

fieldset label{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--unselected-fontsize);
    line-height: calc(2 * var(--dialog-input-lineheight));
    flex: 1;
    height: 100%;
}

fieldset input:checked+label{
    background-color: var(--col-txt);
    color: var(--dialog-bg-col);
    font-size: var(--dialog-fontsize);
    border-radius: var(--radius);
    flex: 3;
}

.dialog-description-book-already-in{
    color: var(--col-highlight);
    font-weight: bold;
    transform: scale(0);
}

/* || Display settings */

.display-settings{
    --settings-top: calc(2 * var(--hdr-padding-tb) + max(var(--hdr-btn-height), var(--txt-lineheight) * var(--hdr-fontsize)) );
    --settings-translateY: calc(-1 * 100% - var(--settings-top));
    background-color: var(--bg-col);
    border-radius: 0 0 var(--radius) var(--radius);
    padding:  var(--main-padding);
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-areas:
        "show show"
        "search order";
    gap: var(--display-settings-gap);
    user-select: none;
    align-items: end;

    position: -webkit-sticky;
    position: sticky;
    top: var(--settings-top);
    z-index: 9;
    transition: var(--transition-time);
    transform: translateY(0);
}
.display-settings.hide{ /* when scrolling down */
    transform: translateY(var(--settings-translateY));
}

.display-settings.pinned{ /* when it does not behave like static, ie when some scroll is applied wrt to the top */
    box-shadow: var(--outset-shadow-below);
}

.display-setting{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "label"
        "input";
}

.display-settings label{
    font-size: var(--display-settings-label-fontsize);
    font-variant: small-caps;
    font-weight: bold;
}

.display-setting input,
.display-setting select{
    font-size: var(--display-settings-fontsize);
    border: none;
    outline: none;
    border-bottom: 1px solid var(--display-settings-line-color);
    height: var(--display-settings-input-height);
    width: 100%;
    background-color: transparent;
}

/****/

#display-setting-orderby-div{
    grid-area: order;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-areas:
        "label-orderby  label-order"
        "select-orderby button-order";
    gap: 0px var(--display-setting-orderby-gap);
}

#display-setting-orderby>label{
    grid-area: label-orderby;
}
#display-setting-orderby-descend-btn>label{
    grid-area: label-order;
}
#display-setting-orderby{
    grid-area: select-orderby;
    width: var(--display-setting-orderby-width);
}
#display-setting-view-info-btn,
#display-setting-orderby-descend-btn{
    --btn-height: var(--display-settings-input-height);
    --btn-width: var(--display-settings-btn-width);
    --btn-gap: var(--display-settings-btn-gap);
    --btn-icon-len: var(--display-settings-input-height);
    --btn-fontsize: var(--display-settings-btn-fontsize);
    --btn-border-width: var(--display-settings-btn-border-width);
    align-self: end;
    border-radius: 0;
    background-color: transparent;
}

#display-setting-orderby-descend-btn{
    grid-area: button-order;
}

/****/

#display-setting-search-div{
    grid-area: search;
    flex: 1;
}

#display-setting-search>label{
    grid-area: label;
}
#display-setting-search{
    grid-area: input;
}

/****/

#display-setting-show-div{
    grid-area: show;
    display: grid;
    grid-template-columns: var(--display-setting-favourite-max-width) 2fr min-content;
    gap: var(--display-settings-gap);
}

#display-setting-view-info-div,
#display-setting-filter-favourites-div,
#display-setting-filter-state-div{
    text-align: center;
}

#display-setting-view-info-div>label,
#display-setting-filter-favourites>label,
#display-setting-filter-state>label{
    grid-area: label;

}
#display-setting-view-info-btn,
#display-setting-filter-favourites,
#display-setting-filter-state{
    /*fieldset*/
    grid-area: input;
}
#display-setting-filter-favourites label,
#display-setting-filter-state label{
    font-size: var(--display-settings-unselected-fontsize);
    line-height: 0.9;
    height: var(--display-settings-input-height);
    font-variant: normal;
    font-weight: normal;
    padding: 0 var(--display-settings-radio-label-padding-lr) 0;
}
#display-setting-filter-favourites input:checked+label,
#display-setting-filter-state input:checked+label{
    font-size: var(--display-settings-fontsize);
    flex: 1.5;
    font-weight: bold;
}
#display-setting-filter-favourites label:first-of-type,
#display-setting-filter-state label:first-of-type{
    flex: 0;
    width: min-content;
}
#display-setting-filter-favourites input:checked+label:first-of-type,
#display-setting-filter-state input:checked+label:first-of-type{
    flex: 0;
    background-color: var(--display-settings-line-color);
    color: var(--col-txt);
}

#display-setting-filter-favourites label div.icon.favourites-yes{ 
    display:inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

#display-setting-filter-favourites label div.icon.favourites-yes::before{ 
    --icon-height: var(--display-settings-label-fontsize);
    --icon-width: calc(var(--display-settings-label-fontsize) * 1);
    height: var(--icon-height);
    width: var(--icon-width);
    background-size: var(--icon-width) var(--icon-height);
}

#display-setting-filter-favourites label div.icon.favourites-yes::before{ 
    background-color: var(--col-txt);
}

#display-setting-filter-favourites input:checked+label:last-of-type div.icon.favourites-yes::before{ 
    --icon-height: var(--display-settings-fontsize);
    --icon-width: calc(var(--display-settings-fontsize) * 1.3);
    background-color: var(--book-highlight-col);
}


/* tablet and desktop */
@media only screen and (min-width: 768px), (orientation: landscape){
    .dialog-form{
        grid-template-columns: 3fr 2fr;
        grid-template-areas: 
        "title title"
        "author author"
        "genre year"
        "state pages"
        "state pagesread";
    }

    form>.input-field#new-book-year-div,
    form>.input-field#new-book-pages-div,
    form>.input-field#new-book-pagesread-div{
        grid-template-columns: 7.3em 1fr;
        grid-template-areas:
            "label input";  
    }

    .display-settings{
        grid-template-columns: 1.4fr min-content 2fr;
        grid-template-areas:
            "search order show";
    }
}

/* || Icons sources */
/* from: https://pictogrammers.com/library/mdi/ */

.header-container .new-book-icon{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>plus-thick</title><path d="M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z" /></svg>');
}

.header-container .clear-all-icon{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>delete-sweep-outline</title><path d="M15,16H19V18H15V16M15,8H22V10H15V8M15,12H21V14H15V12M11,10V18H5V10H11M13,8H3V18A2,2 0 0,0 5,20H11A2,2 0 0,0 13,18V8M14,5H11L10,4H6L5,5H2V7H14V5Z" /></svg>');
}

#display-setting-filter-favourites label div.icon.favourites-yes::before,
.book-footer-section .book-icons div.like::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>heart-outline</title><path d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z" /></svg>');
}

#display-setting-filter-favourites input:checked+label div.icon.favourites-yes::before,
.book-box.favourite .book-footer-section .book-icons div.like::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>heart</title><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /></svg>');
}

.book-footer-section .book-icons div.share::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>share-variant-outline</title><path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12S8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5S19.66 2 18 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12S4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.34C15.11 18.55 15.08 18.77 15.08 19C15.08 20.61 16.39 21.91 18 21.91S20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08M18 4C18.55 4 19 4.45 19 5S18.55 6 18 6 17 5.55 17 5 17.45 4 18 4M6 13C5.45 13 5 12.55 5 12S5.45 11 6 11 7 11.45 7 12 6.55 13 6 13M18 20C17.45 20 17 19.55 17 19S17.45 18 18 18 19 18.45 19 19 18.55 20 18 20Z" /></svg>');
}

.book-footer-section .book-icons div.del::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>delete-outline</title><path d="M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8,9H16V19H8V9M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z" /></svg>');
}

.display-settings div.view-info::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>image</title><path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>');
}

.display-settings #display-setting-view-info-btn.view-text div.view-info::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>text-box-search</title><path d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M7,15V17H9C9.14,18.55 9.8,19.94 10.81,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19A2,2 0 0,1 21,5V13.03C19.85,11.21 17.82,10 15.5,10C14.23,10 13.04,10.37 12.04,11H7V13H10C9.64,13.6 9.34,14.28 9.17,15H7M17,9V7H7V9H17Z" /></svg>');
}

.display-settings div.orderby-descend::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>sort-ascending</title><path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" /></svg>');
}

.display-settings #display-setting-orderby-descend-btn.descend div.orderby-descend::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>sort-descending</title><path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" /></svg>');
}


/* || Footer */
footer {
    --light-grey: rgb(210, 210, 210);
    --black: rgb(0, 0, 0);
    --ftr-fontsize: 12px;
    --ftr-font: 'Montserrat';
    --ftr-padding: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--light-grey);
    color: var(--black);
    font-family: var(--ftr-font), sans-serif;
    font-size: var(--ftr-fontsize);
    font-weight: 400;
    line-height: 1.2;
    padding: var(--ftr-padding);
}

footer i {
    font-size: 1.3em;
}