@charset "UTF-8";
:root { 
    --pagina-sfondo: white;
    --pagina-testo: black;
    --intestazione-sfondo: #d500f9;
    --intestazione-testo: white;
    --menu-sfondo: #76ff03;
    --menu-testo: black;
    --form-sfondo: #eee;
    --bordipulsanti-sfondo: #999;
    --bordipulsanti-testo: white;
    --retino: rgba(0, 0, 0, 0.05);

    --pulsanti-padding: 0.5rem;
    --angoli-raggio: 0.5rem;
    
    --checklist-colore: #ff8787;
    --herbaria-colore: #91d8ff;
    --herbaria-sfondo: #edf9ff;
    --vegetation-colore: #227722;
    --vegetation-sfondo: #e3f7e3;
}
*                               { box-sizing: border-box }
body                            { display: flex; flex-direction: column;    
                                  min-height: 100vh; 
                                  background-color: var(--pagina-sfondo); 
                                  color: var(--pagina-testo);
                                  margin: 0 ; font-family: Optima, Sans, Verdana, sans-serif }
main                            { flex-grow: 1; overflow-y:auto; margin:1em }
h1, h2                          { margin:0 ;  padding: 0.25em; text-align: center }
section#risultati p:first-child { text-align: center }
footer                          { width:100% ; padding-top: 4em ;
                                  text-align: center ; font-size:85% }
footer div                      { background-color: var(--menu-sfondo); padding:1em }

/* *********************** griglia di intestazione *********************** */
header { 
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    grid-template-rows: 1fr max-content;
    grid-template-areas:
        "empty logo session"
        "name logo menu";
    
    border-bottom: 1px solid var(--bordipulsanti-sfondo)
}
header > a                  { grid-area: logo }
header > #session           { grid-area: session }
header > #nomeApplicazione  { grid-area: name }
header nav                  { grid-area: menu }

/* ****************************** intestazione *************************** */
header                      { padding:0.25rem 1rem 0 0.1rem; 
                              background: var(--intestazione-sfondo); color: var(--intestazione-testo)  }
header #nomeApplicazione, 
header nav a                { margin:0 ; font-size:125%; padding: 0.25rem }
header #nomeApplicazione    { padding-left: 1rem ; padding-right: 1rem }
header nav a                { text-decoration: none }
header > a                  { line-height: 0 }
header #logo                { height: 4rem ; filter: saturate(200%) brightness(1.25) }
header object               { height: 1.5rem; pointer-events: none; /* serve per i link sugli svg */ }

/* ****************** le icone degli oggetti in sessione ***************** */
#session                    { text-align: right ; line-height:0 }
#session span               { display: inline-block ; padding:0.5rem 0 }
#session a                  { display: inline-block ; margin-left: 1rem ; }
/* questa viene caricata dall'svg */
path                        { fill: var(--intestazione-testo) ; stroke: var(--intestazione-testo) }

/* ********************************* il menu ***************************** */
nav *                       { margin:0; padding: 0 }
nav ul                      { list-style-type: none }
nav a                       { text-decoration:none ; color: var(--intestazione-testo) }

nav > ul > li               { display:inline-block }
nav > ul > li > a           { display: inline-block; z-index: 3; margin-right: 1.5em; border: 1px solid transparent ; cursor:pointer}
                        
nav > ul > li > ul          { position: absolute ; width : 9rem; padding:0.25em ;
                              background-color: var(--menu-sfondo); border: 1px solid var(--bordipulsanti-sfondo);
                              z-index: 2; margin-top: -1px }
nav > ul > li > ul > li a   { display: inline-block ; margin:0.25em ; font-size: 100%; color: var(--menu-testo); }
/* mostra/nascondi submenu */
nav > ul > li > ul          { visibility: hidden }
nav > ul > li.visible > ul  { visibility: visible }
/* login */
nav object                  { height: 1.5rem }
nav > ul > li:last-child    { width : 9rem; float:right ; text-align: right ; margin:0; line-height: 0}
nav > ul > li:last-child a  { margin: 0; padding-right:0}
nav #login                  { line-height: 1em }
nav #login input            { width:100% }
nav #login input[type=text] { margin-bottom:.75rem }
nav #login input[type=submit] { margin-top:1.25rem }
nav > ul > li.visible a     { background: var(--menu-sfondo); color: var(--menu-testo); 
                              border-color: var(--bordipulsanti-sfondo);
                              border-bottom-color: var(--menu-sfondo);  
                              position:relative; z-index:3 }
/* ********************** risultati della ricerca ************************ */
#risultatiRicerca #info { background-color: var(--secondario-sfondo) }
div.campione { 
    background-color: var(--secondario-chiaro-sfondo) ; 
    color: var(--secondario-chiaro-testo);
    margin: 0.25rem
}
div.campione > span { display: block }

/* ********************************* form ******************************** */
.aa_form                      { display:grid; 
                                grid-template-columns: 0em 1fr max-content 0em;
                                grid-template-rows: max-content max-content max-content max-content 0em;
                                grid-template-areas:
                                    "titolo titolo titolo titolo"
                                    "gaps    base   base   gapd"
                                    "gaps   estesi estesi  gapd"
                                    "gaps   extra   invio  gapd"
                                    "gap     gap     gap    gap ";
                                grid-row-gap: 2em;
                                align-items: end;
                                grid-column-gap:1em;
                                width: max-content; margin:2em auto;
                                border: 1px solid var(--bordipulsanti-sfondo);
                                border-radius: var(--angoli-raggio);
                                background-color: var(--form-sfondo); }
.aa_form > h1, .aa_form > h2  { grid-area: titolo ;
                                border-bottom: 1px solid var(--bordipulsanti-sfondo);
                                background: var( --retino ) }
.aa_form > #fbody             { grid-area: base }
.aa_form > #fexteded          { grid-area: estesi }
.aa_extra                     { grid-area: extra }
.aa_form > button             { grid-area: invio }
.aa_form > #button-group      { grid-area: invio }
.aa_form button               { min-width: 8rem;
                                background: var(--bordipulsanti-sfondo); 
                                color: var(--bordipulsanti-testo);
                                border-radius: var(--angoli-raggio);
                                padding:0.5em; border: 0; 
                                font:inherit; text-align: center;
                                cursor:pointer;
                                }
.aa_fields > div.aa_field     { display:grid; 
                                grid-template-columns: max-content max-content 1fr max-content;
                                grid-template-rows: max-content max-content ;
                                grid-gap: 0.25em }
div.aa_field                  { padding: 0.25em 0 1em 0 }
div.aa_field.compat           { padding: 0.10em 0 0.5em 0 }
/* il pulsante con la x */
.aa_form .aa_field button     { padding-top:0em ; padding-bottom:0em ; min-width: 0}
.aa_field button object       { height:0.55em ; pointer-events: none }
.aa_field input[type="text"]  { border:1px solid var(--bordipulsanti-sfondo) }
.aa_field *                   { font-size:1em }
.aa_fields > div.aa_field > p { grid-column: 1/5; grid-row: 2/3; margin:0 ; font-size:85% }
/* la riga per il pulsante show/hide extended */
.aa_extended_control          { text-align:right; font-size:60%}
.aa_separator                 { border-bottom: 1px dotted var(--bordipulsanti-sfondo); margin-bottom:0.2em }

/* ************************** cartellini/rilievi ************************* */
.oggetto  { 
    margin: 0.25em; padding:0.25em;
    display: grid;
    grid-gap:0.25em;
    grid-template-columns: min-content auto;
    grid-template-rows: max-content max-content max-content;
    grid-template-areas: "directory title"
     "info0 info0"
     "info1 info1"
     "info2 info2";
    align-items: end;
    width: 15rem;
    box-shadow: 0px 5px 20px -7px #0000008a;
}

.oggetto:hover{
	box-shadow: 0px 5px 30px -7px #0000008a;
}
.oggetto.vegetation , [data-type="sample"], [data-type="leaf"]   {
	border-left: 0.5rem solid var(--vegetation-colore);
	background-color: var(--vegetation-sfondo);
}
.oggetto.herbaria   , [data-type="specimen"] {
	border-left: 0.5rem solid var(--herbaria-colore);
	background-color: var(--herbaria-sfondo);
}

.oggetto[data-selected="true"]{
	box-shadow: inset 0px 5px 30px -7px #0000008a;
}

.oggetto[data-selected="true"]:hover{
	box-shadow: inset 0px 5px 30px -7px #0000008a;
}

.oggetto[data-selected]{
    cursor:pointer;
}

.oggetto .directory { grid-area: directory; white-space: nowrap ; font-size: 85%; }
.oggetto .title     { grid-area: title ; font-size:125%}
.oggetto .info0     { grid-area: info0 ; font-size:125%}
.oggetto .info1     { grid-area: info1 }
.oggetto .info2     { grid-area: info2 }

/* ******************************* alberi ******************************** */
div#tree div {
	background-color: rgba(0,0,0,0.05); 
}

div#tree.vegetation .ac {
	color: var(--vegetation-colore) 
}

/* ************************* browser ************************************* */
#browser > * { text-align: left ; border:1px solid var(--bordipulsanti-sfondo)}
#browser > h2 {
    background-color: var(--intestazione-sfondo); 
    color: var(--intestazione-testo) 
}
#browser > div > div { padding:0.2em; cursor: pointer; }
#browser > div > div:hover{
    background-color: var(--menu-sfondo);
}
#browser .selezionato { background-color: var(--menu-sfondo) ; color: var(--menu-testo) }