/* habillage d'EasyAdmin repris de jardin-lacore, aux couleurs et aux polices des pages de recettes ; EasyAdmin se règle par ses
   variables CSS, sans toucher à ses gabarits */

/* polices hébergées avec le site, sans appel à Google Fonts (paquets @fontsource, licence OFL jointe à côté des fichiers) */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-400-normal-tgeBUz0.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-600-normal-WFbedGL.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-700-normal-QPABG8D.woff2") format("woff2");
}

@font-face {
    font-family: "Zilla Slab";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/zilla-slab-latin-600-normal-n8BbLI9.woff2") format("woff2");
}

/* le site n'existe qu'en clair : les champs et le remplissage automatique du navigateur restent clairs, même sur un téléphone
   en thème sombre */
:root {
    /* charte des pages de recettes : vert sapin, encre verte, fond vert pâle ; texte et boutons à un contraste d'au moins 4,5 */
    --hub-vert: #2c6a4c;
    --hub-vert-fonce: #1f4d36;
    --hub-vert-pale: #e1efe6;
    --hub-encre: #1d2721;
    --hub-gris: #5a685f;
    --hub-fond: #f4f6f2;
    --hub-ligne: #dce3da;
    /* bordure des champs de saisie, plus marquée que celle des séparations pour rester visible sur fond blanc */
    --hub-ligne-soutenue: #c3cec5;
    --hub-brique: #b5432a;

    --font-family-sans-serif: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --admin-headings-font-family: "Zilla Slab", Georgia, serif;

    /* menu vert pâle sur la gauche, contenu sur fond blanc pour lire et saisir sans effort */
    --body-bg: #fff;
    --content-bg: #fff;
    --text-color: var(--hub-encre);
    --sidebar-max-width: 240px;
    --sidebar-bg: var(--hub-fond);
    --sidebar-border-color: var(--hub-ligne);
    --sidebar-menu-color: var(--hub-encre);
    --sidebar-menu-icon-color: var(--hub-vert);
    --sidebar-menu-header-color: var(--hub-gris);
    --sidebar-menu-active-item-bg: var(--hub-vert-pale);
    --sidebar-menu-active-item-color: var(--hub-vert-fonce);
    --sidebar-item-hover-bg: var(--hub-ligne);
    --sidebar-menu-hover-color: var(--hub-vert-fonce);
    --content-top-border-color: var(--hub-ligne);
    --content-section-border-color: var(--hub-ligne);
    --responsive-header-bg: var(--hub-fond);
    --responsive-header-border-color: var(--hub-ligne);
    --page-login-bg: var(--hub-fond);

    /* tableaux et formulaires : cellules sur fond blanc, champs nettement bordés */
    --table-cell-border-color: var(--hub-ligne);
    --table-hover-cell-bg: var(--hub-fond);
    --datalist-border-color: var(--hub-ligne);
    --form-control-bg: #fff;
    --form-label-color: var(--hub-encre);
    --form-input-border-color: var(--hub-ligne-soutenue);
    --border-secondary-color: var(--hub-ligne-soutenue);
    --form-type-check-input-border-color: var(--hub-gris);

    /* boutons pleins, sans dégradé */
    --button-primary-bg: var(--hub-vert);
    --button-primary-hover-bg: var(--hub-vert-fonce);
    --button-primary-active-bg: var(--hub-vert-fonce);
    --button-primary-border-color: var(--hub-vert);
    --button-primary-hover-border-color: var(--hub-vert-fonce);

    /* boutons secondaires blancs bordés, vert pâle au survol, icône verte */
    --button-secondary-bg: #fff;
    --button-secondary-hover-bg: var(--hub-fond);
    --button-secondary-active-bg: var(--hub-ligne);
    --button-secondary-border-color: var(--hub-ligne);
    --button-secondary-hover-border-color: var(--hub-vert);
    --button-secondary-active-border-color: var(--hub-vert);
    --button-secondary-icon-color: var(--hub-vert);

    color-scheme: light;
}

/* titres des pages dans la police et le vert foncé des titres des recettes */
.content-header-title .title {
    font-family: var(--admin-headings-font-family);
    font-weight: 600;
    color: var(--hub-vert-fonce);
}

/* nom du site en haut du menu, dans la police des titres */
.main-sidebar .logo,
.page-login h1 {
    font-family: var(--admin-headings-font-family);
    font-weight: 600;
    color: var(--hub-vert-fonce);
}

/* corps d'une partie de formulaire : sa colonne ne s'élargit pas au contenu */
.form-fieldset-body {
    grid-template-columns: minmax(0, 1fr);
}

/* menu toujours déplié et contenu pleine largeur, fixés par le tableau de bord : pas de poignée pour les changer */
.resizer-handler {
    display: none;
}

/* message après une action : une petite carte en haut au milieu, un seul à la fois, une pastille colorée à gauche, qui glisse
   puis s'efface */
#flash-messages {
    z-index: 2000;
    width: min(24rem, calc(100vw - 2rem));
}

#flash-messages .toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .75rem 2.75rem .75rem 1rem;
    width: auto;
    max-width: none;
    border: 1px solid var(--hub-ligne);
    border-radius: .75rem;
    background: #fff;
    color: var(--hub-encre);
    box-shadow: 0 10px 25px -8px rgb(29 39 33 / .35);
    cursor: pointer;
    animation: toast-in .25s ease-out;
    transition: opacity .3s, transform .3s;
}

#flash-messages .toast .toast-body {
    padding: 0;
}

#flash-messages .toast .toast-close {
    position: absolute;
    top: 50%;
    right: .85rem;
    transform: translateY(-50%);
    width: .75rem;
    height: .75rem;
    background-size: .65rem;
    opacity: .5;
}

#flash-messages .toast .toast-close:hover {
    opacity: 1;
}

#flash-messages .toast strong {
    color: var(--hub-vert-fonce);
}

#flash-messages .toast::before {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--hub-vert);
    color: #fff;
    font-weight: 700;
    content: "✓";
}

#flash-messages .toast.alert-danger::before {
    background: var(--hub-brique);
    content: "!";
}

#flash-messages .toast.alert-danger strong {
    color: var(--hub-brique);
}

#flash-messages .toast.is-leaving {
    opacity: 0;
    transform: translateY(-.75rem);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-.75rem);
    }
}

/* fil d'Ariane au-dessus du titre (composant breadcrumb de Bootstrap) : Accueil › liste › page, en petit */
.admin-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-divider-color: var(--hub-ligne-soutenue);
    --bs-breadcrumb-item-active-color: var(--hub-gris);
    --bs-breadcrumb-margin-bottom: .5rem;
    padding-top: 1rem;
    font-size: var(--font-size-sm);
}

.admin-breadcrumb a {
    color: var(--hub-vert);
    text-decoration: none;
}

.admin-breadcrumb a:hover {
    text-decoration: underline;
}

/* aide d'une page, en clair sous son titre */
.admin-page-help {
    max-width: 75ch;
    margin: 0 0 1.5rem;
    color: var(--hub-gris);
}

/* actions d'une ligne de liste : les icônes côte à côte, à 4 px l'une de l'autre */
td.actions {
    white-space: nowrap;
}

td.actions > * {
    gap: .25rem !important;
}

/* actions d'une ligne : boutons carrés pleins doux, teintés de la couleur de l'action, pleins avec icône blanche au survol ;
   !important car EasyAdmin peint ses boutons par des dégradés et des variables plus spécifiques */
td.actions .btn {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .5rem;
    box-shadow: none;
}

/* EasyAdmin peint le survol de ses boutons par un calque qui recouvrirait le fond plein */
td.actions .btn::before,
.page-actions .action-delete::before {
    display: none;
}

td.actions .action-edit {
    --hub-action: var(--hub-vert);
}

td.actions .action-detail {
    --hub-action: var(--hub-gris);
}

td.actions .action-delete,
.page-actions .action-delete {
    --hub-action: var(--hub-brique);
}

td.actions .btn[class*="action-"],
.page-actions .action-delete {
    background: color-mix(in srgb, var(--hub-action, var(--hub-vert)) 10%, transparent) !important;
    border-color: transparent !important;
    color: var(--hub-action, var(--hub-vert)) !important;
}

td.actions .btn[class*="action-"] :is(.icon, svg),
.page-actions .action-delete :is(.icon, svg) {
    color: var(--hub-action, var(--hub-vert)) !important;
}

td.actions .btn[class*="action-"]:is(:hover, :focus-visible),
.page-actions .action-delete:is(:hover, :focus-visible) {
    background: var(--hub-action, var(--hub-vert)) !important;
    border-color: var(--hub-action, var(--hub-vert)) !important;
    color: #fff !important;
}

td.actions .btn[class*="action-"]:is(:hover, :focus-visible) :is(.icon, svg),
.page-actions .action-delete:is(:hover, :focus-visible) :is(.icon, svg) {
    color: #fff !important;
}

/* « Supprimer » en haut d'une fiche ou d'un formulaire : un vrai bouton rouge doux, comme dans les listes */
.page-actions .action-delete {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .375rem .85rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    font-weight: 500;
}

/* déconnexion du menu du compte : texte et icône en rouge */
.user-menu-wrapper .dropdown-menu .text-danger,
.user-menu-wrapper .dropdown-menu .text-danger :is(.icon, svg) {
    color: var(--hub-brique) !important;
}

/* nom d'une entrée du menu : toujours sur une ligne, coupé par des points de suspension s'il était trop long */
.ea-sidebar-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* photo des comptes, dans leur liste : ronde, comme en haut à droite */
.ea-index-User .datagrid td.field-image img,
.ea-index-User .datagrid td.field-image .ea-lightbox-thumbnail img {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem;
    max-height: none !important;
    aspect-ratio: 1;
    object-fit: cover;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgb(29 39 33 / .25);
}

.ea-index-User .datagrid td.field-image .ea-lightbox-thumbnail {
    display: inline-block;
    border-radius: 50%;
}

/* « Connecté en tant que » : la photo plus grande, centrée à côté du prénom */
.dropdown-user-details {
    align-items: center !important;
}

.dropdown-user-details img.user-avatar {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem;
}

.dropdown-user-details .user-label {
    white-space: nowrap;
}

.dropdown-user-details > div:first-child {
    display: flex;
    align-self: center;
}

/* photo du compte, en haut à droite : ronde et recadrée */
img.user-avatar {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(29 39 33 / .25);
}

/* colonne des vignettes serrée sur son contenu : la colonne de texte suivante arrive juste après */
.datagrid th.field-image,
.datagrid td.field-image {
    width: 1%;
    white-space: nowrap;
}

/* monogramme H du site, devant son nom dans le menu et sur la page de connexion */
.hub-logo {
    border-radius: .5rem;
    vertical-align: middle;
}

.hub-logo--login {
    margin-bottom: .75rem;
    border-radius: 1rem;
}