/* styles communs de Processio (les styles propres à un composant sont dans son .razor.css) */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #fff;
}

h1:focus {
    outline: none;
}

/* champs et cases cochées : focus discret */
.form-control:focus {
    border-color: var(--processio-couleur);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--processio-couleur) 25%, transparent);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #c0392b;
}

/* message de validation sous un champ, même style partout (comme Chorale) : ValidationMessage de Blazor (.validation-message)
   et message des LegilogInput* du framework (div.text-danger.font-italic sous le .form-group).
   « body » et !important : legilog.css (chargé après) remet color:red, Bootstrap force .text-danger et .font-italic */
body .validation-message,
body .form-group > div.text-danger.font-italic {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .35rem;
    font-size: .8rem;
    font-style: normal !important;
    font-weight: 500;
    line-height: 1.35;
    color: #c0392b !important;
}

    body .validation-message::before,
    body .form-group > div.text-danger.font-italic::before {
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f06a";
        line-height: 1.35;
    }

/* champ en erreur : bordure rouge sur la zone de saisie du groupe qui affiche un message (saisies et listes Telerik) */
body .form-group:has(> .validation-message, > div.text-danger.font-italic) :is(.form-control, .custom-select, .k-picker, .k-input) {
    border-color: #c0392b;
    box-shadow: 0 0 0 .12rem rgba(192, 57, 43, .15);
}

/* notification de plusieurs lignes (MainLayout) : titre puis liste à puces, pour les erreurs de validation d'une fiche */
.notification-titre {
    font-weight: 600;
    margin-bottom: .3rem;
}

.notification-liste {
    margin: 0;
    padding-left: 1.1rem;
}

    .notification-liste li {
        margin-top: .15rem;
    }

/* texte sur plusieurs lignes (adresses, téléphones, activités) : retours à la ligne du texte gardés */
.multi-lignes {
    white-space: pre-line;
}

/* Menus, comme Chorale : police de Bootstrap (pas celle des pages), entrées des menus déroulants sans icône,
   bleu clair au survol au lieu du gris de Bootstrap, bleu plein pour l'entrée cliquée ; préfixe body pour passer devant legilog.css */
body .navbar,
body .dropdown-menu {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body .dropdown-item {
    color: #212529;
}

    body .dropdown-item:hover,
    body .dropdown-item:focus {
        background-color: color-mix(in srgb, var(--processio-couleur) 12%, transparent);
        color: var(--processio-couleur);
    }

    body .dropdown-item.active,
    body .dropdown-item:active {
        background-color: var(--processio-couleur);
        color: #fff;
    }

/* Toutes les grilles, comme celles des paramétrages : coins arrondis, en-têtes discrets en capitales, lignes aérées,
   survol et ligne sélectionnée marqués, bandeaux de regroupement ; sélecteurs renforcés pour passer devant le thème Telerik */
body .k-grid {
    border-radius: .4rem;
    overflow: hidden;
}

body .k-grid thead th {
    background-color: #f4f7fa;
    color: #5a6b7b;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

body .k-grid tbody tr.k-table-row > td.k-table-td {
    padding-top: .6rem;
    padding-bottom: .6rem;
    vertical-align: middle;
}

/* grilles compactes (onglets, Size Small) : un peu moins hautes */
body .k-grid.k-grid-sm tbody tr.k-table-row > td.k-table-td {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

body .k-grid tbody tr.k-table-row:not(.k-grouping-row):hover > td {
    background-color: color-mix(in srgb, var(--processio-couleur) 7%, transparent);
}

/* ligne sélectionnée (fiche ouverte dans le panneau latéral, cases cochées) */
body .k-grid tbody tr.k-table-row.k-selected > td {
    background-color: color-mix(in srgb, var(--processio-couleur) 14%, transparent);
}

body .k-grid tbody tr.k-table-row.k-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--processio-couleur);
}

/* bandeau d'un groupe (« France », « Chèque »...) */
body .k-grid tbody tr.k-grouping-row > td {
    background-color: #eef3f8;
    color: var(--processio-couleur);
    font-weight: 600;
}

/* colonne qui nomme la ligne (OnCellRender="GrilleHelper.ColonneTitre") */
body .k-grid tbody tr.k-table-row > td.colonne-titre {
    font-weight: 600;
    color: var(--processio-couleur);
}

/* Grilles dont la ligne ouvre une fiche (Class="liste-cliquable") */
body .liste-cliquable tbody tr {
    cursor: pointer;
}

/* couleur de Processio : celle du menu (CouleurMenu, redéfinie par App.razor), reprise partout ; nuances claires par color-mix.
   Bordure du panneau latéral (LegilogPanneauLateral, Legilog.Framework.Blazor) de la même couleur */
:root {
    --processio-couleur: #1f4c75;
    --legilog-panneau-couleur: var(--processio-couleur);
}

/* onglets soulignés des fiches (Class="onglets-soulignes"), comme ceux du panneau latéral */
body .k-tabstrip.onglets-soulignes .k-tabstrip-items-wrapper {
    border-color: #dee2e6 !important;
}

body .k-tabstrip.onglets-soulignes .k-tabstrip-item {
    border-width: 0 0 3px 0 !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
}

    body .k-tabstrip.onglets-soulignes .k-tabstrip-item .k-link {
        color: #6c757d;
        padding: .5rem .75rem;
    }

    body .k-tabstrip.onglets-soulignes .k-tabstrip-item.k-active,
    body .k-tabstrip.onglets-soulignes .k-tabstrip-item.k-selected {
        border-bottom-color: var(--processio-couleur) !important;
    }

        body .k-tabstrip.onglets-soulignes .k-tabstrip-item.k-active .k-link,
        body .k-tabstrip.onglets-soulignes .k-tabstrip-item.k-selected .k-link,
        body .k-tabstrip.onglets-soulignes .k-tabstrip-item:hover .k-link {
            color: var(--processio-couleur);
        }

body .k-tabstrip.onglets-soulignes .k-tabstrip-content {
    overflow: visible !important;
    border: none !important;
    padding: 1.25rem 0;
    background: transparent;
}

/* onglets des fiches du panneau latéral : soulignés, couleur de Processio (comme Denier) */
body .panneau-corps .k-tabstrip .k-tabstrip-items-wrapper {
    border-color: #dee2e6 !important;
}

body .panneau-corps .k-tabstrip .k-tabstrip-item {
    border-width: 0 0 3px 0 !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
}

    body .panneau-corps .k-tabstrip .k-tabstrip-item .k-link {
        color: #6c757d;
        padding: .5rem .25rem;
    }

    body .panneau-corps .k-tabstrip .k-tabstrip-item.k-active,
    body .panneau-corps .k-tabstrip .k-tabstrip-item.k-selected {
        border-bottom-color: var(--processio-couleur) !important;
    }

        body .panneau-corps .k-tabstrip .k-tabstrip-item.k-active .k-link,
        body .panneau-corps .k-tabstrip .k-tabstrip-item.k-selected .k-link,
        body .panneau-corps .k-tabstrip .k-tabstrip-item:hover .k-link {
            color: var(--processio-couleur);
        }

/* overflow visible : le thème met overflow:auto, ce qui coupe les listes déroulantes */
body .panneau-corps .k-tabstrip .k-tabstrip-content {
    overflow: visible !important;
    border: none !important;
    padding: 1.25rem 0;
    background: transparent;
}

/* onglets des fiches (comme l'onglet Liens de Denier) : cadre avec en-tête et pied,
   tableau à bande de couleur à gauche (forte, claire, terminée), pastilles */
.cadre-onglet {
    border: 1px solid #c6d9ea;
    border-radius: .35rem;
    background-color: #fff;
}

.cadre-onglet-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background-color: color-mix(in srgb, var(--processio-couleur) 8%, transparent);
    border-bottom: 1px solid #c6d9ea;
    border-radius: .35rem .35rem 0 0;
}

.cadre-onglet-icone {
    color: var(--processio-couleur);
}

.cadre-onglet-compte {
    background-color: var(--processio-couleur);
    color: #fff;
}

.cadre-onglet-pied {
    padding: .6rem 1rem;
    font-size: .8rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 .35rem .35rem;
}

.cadre-onglet-vide {
    text-align: center;
    color: #6c757d;
    padding: 2rem 1rem;
}

    .cadre-onglet-vide .fas {
        color: #c6d9ea;
    }

/* chiffres clés sous l'en-tête du cadre (comme la fiche contact de Denier) : tuiles côte à côte, séparées par un trait */
.cadre-onglet-chiffres {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9ecef;
}

.cadre-onglet-chiffre {
    flex: 1 1 9rem;
    min-width: 0;
    padding: .75rem 1rem;
    border-right: 1px solid #f1f3f5;
}

    .cadre-onglet-chiffre:last-child {
        border-right: 0;
    }

.cadre-onglet-chiffre-libelle {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.cadre-onglet-chiffre-valeur {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--processio-couleur);
}

/* valeur en texte (libellé d'un pèlerinage, objet d'un email) : plus petite, coupée si trop longue */
.cadre-onglet-chiffre-texte {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cadre-onglet-chiffre-detail {
    font-size: .75rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tableau-onglet th {
    border-top: 0;
    border-bottom: 1px solid #dee2e6;
    padding: .5rem .75rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.tableau-onglet td {
    vertical-align: middle;
    padding: .55rem .75rem;
    border-top: 1px solid #f1f3f5;
}

.tableau-onglet tbody tr:hover td {
    background-color: color-mix(in srgb, var(--processio-couleur) 4%, transparent);
}

.tableau-onglet .ligne-forte td:first-child {
    box-shadow: inset 4px 0 0 var(--processio-couleur);
}

.tableau-onglet .ligne-claire td:first-child {
    box-shadow: inset 4px 0 0 color-mix(in srgb, var(--processio-couleur) 40%, white);
}

.tableau-onglet .ligne-terminee td:first-child {
    box-shadow: inset 4px 0 0 #ced4da;
}

.tableau-onglet .ligne-terminee td {
    color: #6c757d;
}

/* ligne de regroupement (groupe d'activités) */
.tableau-onglet .ligne-groupe td {
    background-color: #f8f9fa;
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--processio-couleur);
    border-top: 1px solid #e9ecef;
}

.texte-secondaire {
    font-size: .8rem;
    color: #6c757d;
    line-height: 1.4;
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .6rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--processio-couleur) 12%, transparent);
    color: var(--processio-couleur);
}

.pastille-pleine {
    background-color: var(--processio-couleur);
    color: #fff;
}

.pastille-grise {
    background-color: #e9ecef;
    color: #6c757d;
}

/* ligne écartée d'un import */
.pastille-ecartee {
    background-color: rgba(220, 53, 69, .12);
    color: #a71d2a;
}

.action-ligne {
    color: var(--processio-couleur);
    padding: .15rem .35rem;
}

    .action-ligne:hover {
        background-color: color-mix(in srgb, var(--processio-couleur) 12%, transparent);
    }

/* confirmation de suppression (ConfirmationSuppression.razor) : titre et bouton rouges */
.dialogue-suppression .k-window-titlebar {
    background-color: #dc3545;
    color: #fff;
}

.blazor-error-boundary {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 1rem;
    color: #856404;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Groupe des notifications Telerik (MainLayout, classes « legilog-notification alert ») : il reste dans la page, en bas à droite,
   même vide, et le padding de .alert en faisait une boîte invisible qui avalait les clics (boutons du pied du panneau latéral).
   Le conteneur laisse passer les clics, seules les notifications affichées les reçoivent (comme Denier). */
body .k-notification-group.legilog-notification {
    pointer-events: none;
}

body .k-notification-group.legilog-notification:empty {
    padding: 0;
    border: 0;
}

body .k-notification-group.legilog-notification > * {
    pointer-events: auto;
}

/* menu Paramétrages en groupes titrés, deux par rangée (comme Denier) */
.menu-groupes {
    min-width: 30rem;
}

.menu-groupe-titre {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--processio-couleur);
}

@media (max-width: 767.98px) {
    .menu-groupes {
        min-width: 0;
    }
}