#admin
{

}

/* CONNEXION */
#admin_connexion
{
width: 100%;
max-width: 10em;
margin: auto;
padding: 2em;
& [type=password] {}
& .btn[type=submit]
{
width: 100%;
margin-top: 0.5em;
}
}

/* MENU */

#admin > nav
{
display: flex;
margin-top: calc(var(--marges) / 2);
margin-bottom: calc(var(--marges) / 2);
place-content: center;
place-items: center;
gap: 1em;
}
#admin > nav a
{
min-width: 3em;
padding: 1em;
border: 1px solid var(--noir);
border-radius: 0.5em;
font-size: 0.75em;
font-weight: 800;
text-align: center;
text-transform: uppercase;
& i
{
display: block;
margin-bottom: 0.5em;
font-size: 2em;
}
&:is(:hover, .on)
{
background: var(--rouge);
border-color: var(--rouge);
color: white;
}
}

/* Mini menu (fin) */
#admin > nav > div
{
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 1em;
font-size: 0.66em;
}
#admin > nav > div a
{
min-width: 2em;
& i {margin: 0;}
}

/* SECTIONS */

#admin > section
{
padding-top: 0;
background: transparent;
&:not(:target) {display: none;}
& h2 {display: none;}
}
#admin > section > div:has(.btn) {text-align: center;}

/* SOMMAIRE */
#admin .livres
{
--dispersion: 1;
}
#admin .livres li {position: relative;}
#admin .livres li.on
{
background: var(--gris);
outline: 2px solid var(--rouge);
outline-offset: -6px;
}
#admin .livres li button
{
z-index: 1;
display: block;
position: absolute;
left: 1em;
top: 1em;
padding: 0.15em;
background: rgba(0,0,0,0.5);
border: none;
border-radius: 0.25em;
font-size: 1.25em;
&:hover {background: var(--rouge);}
}
#admin .livres li.nouveau span
{
outline: 2px solid var(--rouge);
outline-offset: -6px;
}

/* FORMULAIRES */
#admin form {text-align: center;}
#admin form[data-id]
{
float: right;
max-width: 20em;
margin-left: var(--marges);
&:not(.on) {display: none;}
}
#admin form .categorie
{
display: flex;
place-content: center;
place-items: center;
gap: 1em;
& label {flex: 1; margin: 0;}
& label:has([type=checkbox])
{
max-width: 10em;
& input {height: initial;}
}
& textarea {min-height: 2.55em; height: 2.55em;}
& .btn
{
width: 3.5em;
min-width: initial;
margin: 0;
transform: translateY(0.35em);
& i {margin: 0;}
}
}
#admin form select[multiple] {height: 10em;}
#admin form abbr
{
display: inline-block;
text-decoration: none;
&:after {content: none;}
}
#admin form textarea.🔍:focus
{
z-index: 20;
position: fixed;
width: calc(100vw - var(--marges));
max-width: 50em;
height: calc(100vh - var(--marges));
right: calc(var(--marges) / 2);
top: calc(var(--marges) / 2);
padding: 1em;
background: white;
box-shadow: 0 0 3em rgba(0,0,0,0.75);
font-weight: inherit;
text-align: justify;
clip-path: none;
&.mini {height: 15em;}
}
#admin form .btn {margin-top: 1.75em;}
#admin .btn.haut {margin-top: 0; margin-bottom: 2em;}
#admin form .btn.🗑
{
float: right;
width: 3.5em;
min-width: initial;
& i {margin: 0;}
}
#admin form .btn.🗑 + .btn[type=submit]
{
width: calc(100% - 4.5em);
min-width: initial;
margin-left: initial;
}
#admin form[data-id] > .btn:not(.🗑) {width: 100%;}
#admin form .fermer
{
display: flex;
position: absolute;
width: 1.25em;
height: 1.25em;
left: -0.75em;
top: 0;
place-content: center;
place-items: center;
background: var(--gris);
border: none;
border-radius: 100%;
font-family: Sans-Serif;
font-size: 2.25em;
font-weight: 800;
&:hover
{
background: var(--rouge);
color: white;
}
}

/* Livres (pages & fichiers) */
#admin form:not(.🖼) button.🖼 span:last-of-type {display: none;}
#admin form.🖼 button.🖼 span:first-of-type {display: none;}
#admin form.🖼 > *:not(:is(.🖼, .🖼 ~ *)) {display: none;}
#admin form:not(.🖼) button.🖼 ~ label {display: none;}
#admin form button.🖼 + label {margin-top: 1.25em;}

/* Catégories */
#admin form div:first-of-type .btn.🔼 {visibility: hidden; pointer-events: none;}
#admin form div:last-of-type .btn.🔽 {visibility: hidden; pointer-events: none;}

/* TABLEAUX */
#admin table {width: 100%;}
#admin table tr:nth-of-type(even) {background: var(--gris)}
#admin table:has(.actif) tr:nth-child(n+2):not(.actif) {opacity: 0.5;}
#admin table tr :is(th, td)
{
padding-top: 0.25em;
padding-bottom: 0.25em;
text-align: left;
&:first-child {padding-left: 0.35em;}
&:has(.btn)
{
padding: 0;
text-align: right;
text-wrap: nowrap;
}
}
#admin table tr.👻
{
font-size: 0.5em;
filter: blur(1px) opacity(0.5);
user-select: none;
pointer-events: none;
}
#admin table [type=checkbox] {margin: 0 0.25em; transform: scale(1.5);}
#admin table button
{
margin-top: 0;
background: transparent;
font-size: 0.6em;
& + button {margin-left: 0.1em;}
}

/* Livres */
#admin table td:has(.📕)
{
max-width: 20em;
align-content: center;
}
#admin table .📕
{
display: inline-block;
margin: 0.25em;
padding: 0em 0.25em;
border: 1px solid var(--noir);
border-radius: 0.5em;
font-size: 0.9em;
transform: translateX(-0.25em);
}

/* Cadeaux & avis */
#admin :is(#cadeaux, #avis) form[data-id]
{
z-index: 5;
position: fixed;
right: 1em;
top: 50%;
padding: 2em;
background: white;
box-shadow: 0 0 2em rgba(0,0,0,0.25);
border-radius: 2em;
transform: translateY(-50%);
}

/* Avis */
#admin #avis .💬 {max-width: 40vw;}

/* FILTRES */

#admin .filtres
{
display: flex;
margin-bottom: calc(var(--marges) / 2);
flex-wrap: wrap;
place-content: center;
gap: 1em;
}
#admin .filtres button
{
display: flex;
max-width: 6em;
padding: 0.5em;
flex-direction: column;
place-content: center;
place-items: center;
gap: 1em;
border: 4px solid var(--gris);
border-radius: 0.75em;
&.on {border-color: var(--rouge);}
}
#admin .filtres button img
{
display: block;
height: 5em;
}