/* ============================================================================
   ACE Comptabilité & RH — Modale d'ajout/modification + éléments manquants
   ----------------------------------------------------------------------------
   Complète ace-site.css et ace-responsive.css (ne les remplace pas).
   A charger APRES les deux, dans Main.master :

     <link rel="stylesheet" href="Content/ace-site.css" />
     <link rel="stylesheet" href="Content/ace-responsive.css" />
     <link rel="stylesheet" href="Content/ace-modal.css" />

   Couvre les classes utilisées par Pays.aspx (et pages similaires) qui
   n'existaient dans aucune des deux feuilles de style d'origine :
     ace-modal-overlay / ace-modal / ace-modal-header / ace-modal-body /
     ace-modal-footer / ace-modal-close / ace-modal-open
     ace-toolbar / ace-btn-inline / ace-filtre-row / ace-import-row
     ace-no-print (masquage à l'impression)
============================================================================ */

/* ---------------------------------------------------------------------------
   MODALE : overlay plein écran, caché par défaut
--------------------------------------------------------------------------- */
.ace-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 37, 69, 0.55); /* var(--ace-primary) assombri */
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .ace-modal-overlay.ace-modal-open {
        display: flex;
    }

.ace-modal {
    background: var(--ace-card-bg);
    border-radius: var(--ace-radius);
    box-shadow: 0 12px 40px rgba(11, 37, 69, 0.28);
    border-top: 4px solid var(--ace-gold);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: aceModalIn 0.15s ease-out;
}

@keyframes aceModalIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ace-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ace-border);
    background: linear-gradient(180deg, #EEF2F8 0%, #ffffff 100%);
}

    .ace-modal-header span,
    .ace-modal-header label {
        font-size: 16px;
        font-weight: 700;
        color: var(--ace-primary);
    }

.ace-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ace-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

    .ace-modal-close:hover {
        background: var(--ace-bg);
        color: var(--ace-danger);
    }

.ace-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.ace-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--ace-border);
    background: var(--ace-bg);
}

    .ace-modal-footer .ace-btn-primary,
    .ace-modal-footer .ace-btn-secondary {
        width: auto;
        min-width: 120px;
    }

@media (max-width: 480px) {
    .ace-modal-footer {
        flex-direction: column-reverse;
    }

        .ace-modal-footer .ace-btn-primary,
        .ace-modal-footer .ace-btn-secondary {
            width: 100%;
        }
}

/* ---------------------------------------------------------------------------
   LARGEUR DES CHAMPS : ace-site.css met width:100% sur tous les champs, ce
   qui les étire sur toute la largeur du conteneur (carte, colonne de grille,
   modale...). On plafonne à une largeur raisonnable pour la lecture/saisie,
   tout en gardant width:100% comme base donc le champ reste bien responsive
   et ne dépasse jamais son conteneur sur petit écran.
--------------------------------------------------------------------------- */
.ace-field select,
.ace-field input[type=text],
.ace-field input[type=password] {
    max-width: 380px;
}

/* Dans la modale (déjà étroite), on autorise le champ à occuper toute sa
   largeur disponible plutôt que de re-plafonner inutilement. */
.ace-modal .ace-field select,
.ace-modal .ace-field input[type=text],
.ace-modal .ace-field input[type=password],
.ace-login-card-body .ace-field select,
.ace-login-card-body .ace-field input[type=text],
.ace-login-card-body .ace-field input[type=password] {
    max-width: none;
}

/* ---------------------------------------------------------------------------
   BARRE DE NAVIGATION : reste entièrement visible/accessible même quand un
   menu (Listes / Comptabilité / Paie & RH) est déroulé et devient plus long
   que l'écran. On la rend "collante" avec son propre défilement vertical,
   indépendant du contenu principal, au lieu de laisser toute la page
   s'allonger et obliger à défiler très loin pour retrouver les autres liens.
   Ne s'applique qu'au-delà de 900px : en dessous, ace-responsive.css bascule
   déjà la sidebar en barre horizontale (comportement différent, non concerné).
--------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .ace-sidebar {
        position: sticky;
        top: 60px; /* hauteur de .ace-topbar */
        align-self: flex-start;
        height: calc(100vh - 60px);
        overflow-y: auto;
    }

        /* Petite scrollbar discrète plutôt que la barre large par défaut. */
        .ace-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .ace-sidebar::-webkit-scrollbar-thumb {
            background: var(--ace-border);
            border-radius: 3px;
        }
}

/* ---------------------------------------------------------------------------
   ICONES DE BOUTONS : pictogrammes simples en arrière-plan (les <input> de
   type submit générés par asp:Button ne supportent pas ::before/::after,
   d'où l'usage de background-image plutôt que d'un caractère injecté).
--------------------------------------------------------------------------- */
.ace-btn-icon {
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    padding-left: 38px !important;
    text-align: left;
}

/* Icônes blanches : boutons pleins (ace-btn-primary) */
.ace-ico-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='20' y1='20' x2='14.5' y2='14.5'/%3E%3C/svg%3E");
}

.ace-ico-add {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
}

.ace-ico-save {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 9 17 19 7'/%3E%3C/svg%3E");
}

.ace-ico-login {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}

/* Icônes bleu marine : boutons secondaires (ace-btn-secondary) */
.ace-ico-reset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 4 4 9 9 9'/%3E%3Cpath d='M4.5 9a8 8 0 1 0 2-5.3'/%3E%3C/svg%3E");
}

.ace-ico-export {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='9' x2='9' y2='20'/%3E%3C/svg%3E");
}

.ace-ico-print {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9V4h8v5'/%3E%3Crect x='6' y='9' width='12' height='7'/%3E%3Crect x='8' y='14' width='8' height='6'/%3E%3C/svg%3E");
}

.ace-ico-import {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16'/%3E%3Cpath d='M12 20V9'/%3E%3Cpath d='M8 13l4-4 4 4'/%3E%3C/svg%3E");
}

/* Icônes de liens d'action (colonne "Actions" du tableau) — plus petites,
   collées au texte plutôt qu'en padding de bouton pleine largeur. */
.ace-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .ace-link-icon::before {
        content: "";
        display: inline-block;
        width: 13px;
        height: 13px;
        background-repeat: no-repeat;
        background-size: 13px 13px;
    }

.ace-ico-edit::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l4-1L18 9l-3-3L4 17l-1 4z'/%3E%3Cline x1='14' y1='6' x2='17' y2='9'/%3E%3C/svg%3E");
}

.ace-ico-delete::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
}

.ace-ico-print::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9V4h8v5'/%3E%3Crect x='6' y='9' width='12' height='7'/%3E%3Crect x='8' y='14' width='8' height='6'/%3E%3C/svg%3E");
}

.ace-ico-approuver::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8E5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.ace-ico-rejeter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   BARRE D'ACTIONS (toolbar) et boutons inline (button HTML classique,
   à côté des asp:Button, doivent avoir le même rendu)
--------------------------------------------------------------------------- */
.ace-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 14px;
    overflow-x: auto;
}

    .ace-toolbar > * {
        flex: 0 0 auto;
        width: auto;
    }

.ace-toolbar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--ace-border);
    flex: 0 0 1px;
    margin: 0 2px;
}

.ace-btn-inline {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   LIGNE DE FILTRES : champs côte à côte sur desktop, empilés sur mobile
--------------------------------------------------------------------------- */
.ace-filtre-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 4px;
}

    /* Chaque champ se partage l'espace disponible sans jamais passer à la
       ligne suivante ; min-width:0 permet aux champs de se compresser plutôt
       que de forcer un débordement horizontal de la carte. */
    .ace-filtre-row > .ace-field {
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
    }

/* Sur très petits écrans, si les champs deviennent trop étroits pour être
       utilisables, on préfère un défilement horizontal contrôlé de la ligne
       de filtres plutôt qu'un retour à la ligne (demande explicite : les
       filtres restent sur une seule ligne). */
@media (max-width: 640px) {
    .ace-filtre-row {
        overflow-x: auto;
        padding-bottom: 4px;
    }

        .ace-filtre-row > .ace-field {
            flex: 0 0 200px;
        }
}

/* Boutons du bloc filtre : à côté des champs, sur la même ligne, sans
   s'étirer (contrairement aux champs qui se partagent l'espace restant). */
.ace-filtre-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
}

    .ace-filtre-actions .ace-btn-primary,
    .ace-filtre-actions .ace-btn-secondary {
        width: auto;
    }

/* ---------------------------------------------------------------------------
   LIGNE D'IMPORT CSV : bouton de fichier + bouton d'action alignés
--------------------------------------------------------------------------- */
.ace-import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ace-border);
}

    .ace-import-row .ace-btn-secondary {
        width: auto;
    }

/* ---------------------------------------------------------------------------
   IMPRESSION : masque tout élément marqué ace-no-print (boutons, filtres,
   colonne Actions, etc.) pour n'imprimer que le contenu utile.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   BOUTON MASQUER / AFFICHER LA NAVIGATION : disponible dans la topbar sur
   toutes les pages (Main.master), donc pour tout le projet. L'état est
   mémorisé en localStorage (clé aceSidebarHidden) et appliqué via la classe
   .ace-nav-hidden sur <html>. Cette classe est posée le plus tôt possible
   par un script inline en tête de <body> (voir Main.master) pour éviter un
   flash de la barre latérale avant qu'elle ne disparaisse au chargement.
--------------------------------------------------------------------------- */
.ace-nav-toggle {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 14px;
    flex-shrink: 0;
    padding: 0;
}

    .ace-nav-toggle:hover {
        background: var(--ace-gold);
        border-color: var(--ace-gold);
    }

        .ace-nav-toggle:hover .ace-nav-toggle-bars span {
            background: var(--ace-primary-dark);
        }

.ace-nav-toggle-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 16px;
}

    .ace-nav-toggle-bars span {
        display: block;
        height: 2px;
        border-radius: 1px;
        background: #fff;
    }

/* Etat masqué (voir script inline + fonction aceToggleNav() dans Main.master) */
html.ace-nav-hidden .ace-sidebar {
    display: none;
}

@media print {
    .ace-no-print {
        display: none !important;
    }

    .ace-sidebar,
    .ace-topbar,
    .ace-modal-overlay {
        display: none !important;
    }

    .ace-content {
        padding: 0;
    }

    .ace-card {
        box-shadow: none;
        border: none;
        padding: 0;
    }
}

/* ---------------------------------------------------------------------------
   MODALE SANS SCROLL INTERNE (ex : saisie d'un besoin de banque avec
   plusieurs lignes) : au lieu de plafonner .ace-modal-body en hauteur avec
   un scroll interne (obligeant l'utilisateur à agrandir la fenêtre du
   navigateur à chaque fois), la modale grandit avec son contenu. Seul cas de
   recours à un scroll : contenu qui dépasserait malgré tout la hauteur de
   l'écran (ex : pièce avec un très grand nombre de lignes) — dans ce cas
   c'est l'overlay entier qui défile (en-tête + lignes + pied ensemble),
   jamais uniquement le corps tout seul.
   A ajouter au balisage : .ace-modal-overlay-scroll sur l'overlay,
   .ace-modal-grow sur .ace-modal.
--------------------------------------------------------------------------- */
.ace-modal-overlay.ace-modal-overlay-scroll {
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 20px;
}

.ace-modal.ace-modal-grow {
    max-height: none;
}

    .ace-modal.ace-modal-grow .ace-modal-body {
        overflow-y: visible;
        max-height: none;
    }

/* ---------------------------------------------------------------------------
   LIGNE À AJOUTER : variante 3 colonnes de .ace-form-grid (ace-density.css),
   utilisée uniquement pour les champs d'une ligne de besoin de banque - la
   modale est assez large (1000px) pour que 10 champs tiennent en 3-4 rangées
   au lieu de 5, ce qui réduit d'autant la hauteur totale de la modale.
--------------------------------------------------------------------------- */
.ace-form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 760px) {
    .ace-form-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .ace-form-grid-3 {
        grid-template-columns: 1fr;
    }
}

.ace-ligne-entry-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

    .ace-ligne-entry-actions .ace-btn-secondary {
        width: auto;
    }

/* ---------------------------------------------------------------------------
   LISTE DES LIGNES DE LA PIÈCE : rendue avec la classe ace-table partagée par
   les GridViews du reste de l'appli (gvBesoins, gvImports...) pour un style
   strictement identique - aucune règle de mise en forme propre ici, sauf :
   - le total automatique, affiché comme une ligne de pied de tableau (tfoot) ;
   - la remise à zéro de l'apparence <button> pour que les liens Modifier /
     Supprimer construits en JS rendent exactement comme les asp:LinkButton
     ace-link-action / ace-link-danger utilisés ailleurs (qui, eux, stylent
     des <a>, sans les marges/bordures par défaut d'un <button>).
--------------------------------------------------------------------------- */
button.ace-link-action,
button.ace-link-danger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

table.ace-table tfoot tr.ace-lignes-total-row td {
    font-weight: 700;
    color: var(--ace-primary);
    background: var(--ace-bg);
    border-top: 2px solid var(--ace-border);
    border-bottom: none;
}