/* ============================================================================
   ACE Comptabilité & RH — Densité et style "compact" (inspiré Fluxa)
   ----------------------------------------------------------------------------
   Ne redéfinit AUCUNE couleur : réutilise uniquement les variables --ace-*
   déjà définies dans ace-site.css. Vient uniquement resserrer la typographie,
   les espacements et réorganiser les champs (sections, colonnes), pour un
   rendu plus dense et plus professionnel, sur TOUT le projet.

   A charger en dernier, 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" />
     <link rel="stylesheet" href="Content/ace-density.css" />
============================================================================ */

/* ---------------------------------------------------------------------------
   BASE : légèrement plus dense que le défaut navigateur
--------------------------------------------------------------------------- */
body {
    font-size: 13.5px;
}

.ace-page-title {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ace-page-title .ace-nav-icon {
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
    }

/* ---------------------------------------------------------------------------
   CHAMPS DE FORMULAIRE : libellés en majuscules, plus petits, avec repère
   visuel pour les champs obligatoires. Champs eux-mêmes plus compacts.
--------------------------------------------------------------------------- */
.ace-field label {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--ace-text-muted);
    margin-bottom: 5px;
}

.ace-field .ace-required {
    color: var(--ace-danger);
    margin-left: 2px;
}

.ace-field select,
.ace-field input[type=text],
.ace-field input[type=password] {
    padding: 4px 5px;
    font-size: 12px;
    border-radius: 6px;
}

/* Petite note d'aide sous un champ (ex : "Non modifiable après création"),
   à ne pas confondre avec .ace-hint utilisé pour des blocs plus larges. */
.ace-field-note {
    display: block;
    font-size: 11px;
    color: var(--ace-text-muted);
    margin-top: 4px;
}

/* Suffixe/unité collée à un champ (ex : montant + devise) */
.ace-field-suffix {
    display: flex;
}

    .ace-field-suffix input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ace-field-suffix .ace-suffix-tag {
        display: flex;
        align-items: center;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ace-text-muted);
        background: var(--ace-bg);
        border: 1px solid var(--ace-border);
        border-left: none;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        white-space: nowrap;
    }

/* ---------------------------------------------------------------------------
   BLOC FILTRER + ACTIONS FUSIONNÉ : une seule rangée flex (champs de filtre,
   séparateur, boutons d'action, séparateur, import). Passe à la ligne
   uniquement si l'écran est trop étroit pour tout contenir.
--------------------------------------------------------------------------- */
.ace-filtre-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 10px;
    column-gap: 12px;
    padding-bottom: 2px;
}

    /* Champs flexibles à taille lisible : ils se compressent un peu si besoin
       (min-width) mais gardent assez de place pour afficher leur placeholder
       en entier ("Ex : Cameroun"), et la ligne entière passe à la ligne
       plutôt que de forcer des champs illisibles ou un bouton tronqué en
       bord de carte. */
    .ace-filtre-toolbar-row .ace-field {
        margin-bottom: 0;
        flex: 1 1 130px;
        min-width: 120px;
        max-width: 170px;
    }

    /* ace-site.css definit .ace-btn-primary { width:100%; } pour le bouton
       de connexion (pleine largeur de sa carte). Ici les boutons sont dans
       une rangée flex partagée avec d'autres controles : on revient a une
       largeur naturelle et on empeche tout retrecissement/etirement. */
    .ace-filtre-toolbar-row .ace-btn-primary,
    .ace-filtre-toolbar-row .ace-btn-secondary,
    .ace-filtre-toolbar-row input[type="file"] {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ace-filtre-toolbar-row .ace-toolbar-sep {
        align-self: stretch;
        width: 1px;
        min-height: 34px;
        background: var(--ace-border);
        flex: 0 0 auto;
    }

    /* ---------------------------------------------------------------------------
   VARIANTE COMPACTE (ex : Tiers, qui a un champ de filtre de plus que
   Banques/Categories) : ne s'applique qu'aux éléments portant AUSSI
   .ace-filtre-toolbar-row-compact, donc sans effet sur les autres pages qui
   utilisent .ace-filtre-toolbar-row seul. Force tout sur une seule ligne
   (pas de retour à la ligne) en réduisant légèrement champs et boutons ;
   si l'écran est vraiment trop étroit pour tout contenir, la rangée défile
   horizontalement plutôt que de repasser à la ligne.
--------------------------------------------------------------------------- */
    .ace-filtre-toolbar-row.ace-filtre-toolbar-row-compact {
        flex-wrap: nowrap !important;
        column-gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
    }

.ace-filtre-toolbar-row-compact .ace-field {
    flex: 0 1 100px;
    min-width: 85px;
    max-width: 130px;
}

    .ace-filtre-toolbar-row-compact .ace-field label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ace-filtre-toolbar-row-compact .ace-field select,
    .ace-filtre-toolbar-row-compact .ace-field input[type=text],
    .ace-filtre-toolbar-row-compact .ace-field input[type=password] {
        padding: 7px 8px;
        font-size: 12px;
    }

.ace-filtre-toolbar-row-compact .ace-btn-primary,
.ace-filtre-toolbar-row-compact .ace-btn-secondary {
    padding: 8px 10px;
    font-size: 12px;
}

.ace-filtre-toolbar-row-compact .ace-btn-icon {
    background-position: 10px center;
    background-size: 13px 13px;
    padding-left: 28px !important;
}

.ace-filtre-toolbar-row-compact .ace-toolbar-sep {
    min-height: 28px;
}

/* Petite scrollbar discrète si jamais le défilement horizontal se
       déclenche (cohérent avec .ace-sidebar dans ace-modal.css). */
.ace-filtre-toolbar-row-compact::-webkit-scrollbar {
    height: 6px;
}

.ace-filtre-toolbar-row-compact::-webkit-scrollbar-thumb {
    background: var(--ace-border);
    border-radius: 3px;
}


/* ---------------------------------------------------------------------------
   SECTIONS GROUPÉES (dans la modale ou une carte) : titre en majuscules
   suivi d'un séparateur, à la manière de "IDENTIFICATION",
   "PARAMÈTRES FINANCIERS" chez Fluxa.
--------------------------------------------------------------------------- */
.ace-form-section {
    margin-bottom: 10px;
}

    .ace-form-section:last-child {
        margin-bottom: 0;
    }

.ace-form-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ace-primary);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ace-border);
}

/* Grille 3 colonnes pour regrouper des champs liés (ex : Code + Intitulé + ...).
   Passe à 2 colonnes sur tablette et 1 seule sur mobile, même palier que la
   variante .ace-form-grid-3 historique (ace-modal.css), désormais identique
   à ce gabarit par défaut. */
.ace-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 16px;
}

    .ace-form-grid > .ace-field {
        margin-bottom: 12px;
    }

    /* Un champ qui doit occuper toute la largeur de la grille malgré les
       colonnes (ex : un champ Email seul dans sa section). */
    .ace-form-grid > .ace-field-full {
        grid-column: 1 / -1;
    }

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

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

/* ---------------------------------------------------------------------------
   LIBELLÉS À GAUCHE DES CHAMPS (au lieu d'au-dessus) : ne concerne que les
   champs de .ace-form-grid (modale de saisie, cartes groupées) — les champs
   de filtre (.ace-filtre-row, .ace-filtre-toolbar-row) et de connexion
   (.ace-login-card-body) gardent leur mise en page dédiée existante.
   Grille imbriquée à 2 colonnes (libellé de largeur fixe + champ extensible)
   dans chaque .ace-field. Le champ et sa note d'aide (.ace-field-note, ou le
   champ lecture seule .ace-field-readonly pour N° pièce) sont placés
   explicitement en 2e colonne, sous le champ et non sous le libellé, plutôt
   que de dépendre de l'ordre du DOM (qui alternerait naturellement les
   colonnes avec une grille à 2 colonnes non contrainte).

   CORRIGÉ (13/09/2026), signalé par l'utilisateur : "le modal categorie
   n'affiche pas bien les champs" (Categories.aspx, modale 520px standard,
   dans .ace-form-grid par défaut à 3 colonnes). Cette mise en page réservait
   140px FIXES au libellé quelle que soit la largeur disponible : elle n'avait
   été pensée/testée que pour une modale LARGE (1000px, ex. "Ajouter une
   ligne" des journaux Coffres/Diverses/Banques/Monnaie électronique — voir
   .ace-form-grid-3 dans ace-modal.css), où chaque colonne de la grille garde
   largement assez de place même après avoir retiré 140px. Appliquée SANS
   CONDITION à toute .ace-form-grid, elle cassait aussi les modales standard :
   sur une colonne d'environ 160px (520px de modale / 3 colonnes, moins le
   padding), il ne restait quasiment plus rien pour le champ une fois les
   140px du libellé retirés — les champs (y compris de simples zones de texte
   comme Code/Intitulé, sans classe particulière) se retrouvaient réduits à
   une pastille.
   Corrigé avec une "container query" : le libellé ne passe à gauche du champ
   QUE si la modale qui le contient est elle-même assez large (700px et
   plus) pour l'accueillir confortablement ; en dessous de ce seuil, chaque
   champ garde la mise en page par défaut (libellé au-dessus, champ en
   pleine largeur) qui fonctionne pour Categories.aspx et toutes les fiches
   Ajouter/Modifier de largeur standard. La bascule se fait automatiquement
   selon la largeur réellement rendue par le navigateur : aucune modale
   existante (large ou standard) n'a besoin d'être modifiée pour bénéficier
   de ce correctif, y compris les modales larges à 1000px qui continuent
   d'afficher les libellés à gauche comme avant. Nécessite un navigateur
   compatible avec les "container queries" CSS (tous les navigateurs
   courants depuis 2022/2023 - Chrome, Edge, Firefox, Safari).
--------------------------------------------------------------------------- */
.ace-modal {
    container-type: inline-size;
    container-name: ace-modal;
}

@container ace-modal (min-width: 700px) {
    .ace-form-grid > .ace-field {
        display: grid;
        grid-template-columns: 140px 1fr;
        column-gap: 6px;
        align-items: center;
        margin-bottom: 8px;
    }

        .ace-form-grid > .ace-field > label {
            grid-column: 1;
            grid-row: 1;
            margin-bottom: 0;
        }

        .ace-form-grid > .ace-field > select,
        .ace-form-grid > .ace-field > input,
        .ace-form-grid > .ace-field > .ace-field-readonly {
            grid-column: 2;
            grid-row: 1;
        }

        .ace-form-grid > .ace-field > .ace-field-note {
            grid-column: 2;
            grid-row: 2;
            margin-top: 2px;
        }
}

/* ---------------------------------------------------------------------------
   BANDE DE TITRE (TOPBAR) : resserrée, cohérente avec la densité du reste
   du projet (logo plus petit, textes plus petits, chip utilisateur compact).
   Commune à Login et Main (cf. ace-site.css), donc l'effet s'applique aux
   deux. IMPORTANT : ace-site.css fixe une "height: 60px" explicite et cible
   les sous-éléments via ".ace-topbar .xxx" (2 classes) ; il faut donc ici
   1) fixer une nouvelle height explicite (le padding seul ne suffit pas)
   2) reprendre le même niveau de spécificité ".ace-topbar .xxx" pour que
      la surcharge s'applique bien.
--------------------------------------------------------------------------- */
.ace-topbar {
    height: 48px;
    padding: 0 20px;
}

    /* La taille de base (img + svg) est désormais définie dans ace-site.css ;
   on ne fait ici que la resserrer pour la densité. */
    .ace-topbar .ace-logo img,
    .ace-topbar .ace-logo svg {
        width: 26px;
        height: 26px;
    }

    .ace-topbar .ace-app-name {
        font-size: 14.5px;
        line-height: 1.2;
    }

    .ace-topbar .ace-app-tagline {
        font-size: 10.5px;
        line-height: 1.2;
        margin-top: -1px;
    }

    .ace-topbar .ace-topbar-right {
        gap: 14px;
        font-size: 12px;
    }

    .ace-topbar .ace-user-chip .nom {
        font-size: 12px;
    }

    .ace-topbar .ace-user-chip .dossier {
        font-size: 10px;
    }

    .ace-topbar .ace-logout-link {
        font-size: 12px;
        padding: 5px 10px;
    }

/* ace-site.css calcule le reste de la page en calc(100vh - 60px) : puisque
   la bande fait maintenant 48px, on aligne ces deux hauteurs pour éviter un
   espace vide ou une barre de scroll résiduelle en bas de page. */
.ace-login-wrap {
    min-height: calc(100vh - 48px);
}

.ace-app-shell {
    min-height: calc(100vh - 48px);
}

/* ace-modal.css fixe .ace-sidebar en position:sticky avec top:60px et
   height:calc(100vh - 60px), calé sur la topbar de 60px d'origine
   (ace-site.css). Cette feuille réduit la topbar à 48px juste au-dessus :
   sans cette resynchronisation, la sidebar restait décalée de 12px et
   pouvait sortir de l'écran au défilement (barre de navigation qui
   "disparaît"). */
@media (min-width: 901px) {
    .ace-sidebar {
        top: 48px;
        height: calc(100vh - 48px);
    }
}

/* ---------------------------------------------------------------------------
   SELECT AVEC ICONE (ex : sélecteurs de contexte façon page de connexion) :
   composant réutilisable, icône à gauche, chevron personnalisé à droite.
--------------------------------------------------------------------------- */
.ace-select-icon {
    position: relative;
}

    .ace-select-icon select {
        width: 100%;
        padding: 10px 12px 10px 38px;
        background-color: #fff;
        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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 12px center;
        background-size: 16px 16px;
        border: 1px solid var(--ace-border);
        border-radius: 7px;
        font-size: 14px;
        color: var(--ace-text);
    }

    .ace-select-icon .ace-select-icon-glyph {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

/* ---------------------------------------------------------------------------
   BARRE LATERALE : conserve la structure actuelle (menus dépliables), mais
   plus dense — lignes plus resserrées, police plus petite.
--------------------------------------------------------------------------- */
/* BUG CORRIGÉ : .ace-sidebar (width:220px, ace-site.css) n'avait pas de
   flex-shrink:0. Dans .ace-app-shell (display:flex), .ace-content (flex:1)
   contient une rangée de boutons en white-space:nowrap (.ace-filtre-toolbar-row)
   dont le "min-content" est très large. Par défaut, un flex-item ne rétrécit
   jamais sous son propre min-content : c'est donc la sidebar (sans protection)
   qui était écrasée jusqu'à 0px pour compenser, alors que le tableau, lui,
   gardait toute la largeur qu'il réclamait — d'où une sidebar invisible et un
   contenu qui semblait mal proportionné plutôt que d'occuper l'espace prévu. */
.ace-sidebar {
    flex-shrink: 0;
}

.ace-content {
    min-width: 0;
}

.ace-sidebar a {
    padding: 9px 20px;
    font-size: 12.5px;
}

.ace-nav-group summary {
    padding: 9px 20px;
    font-size: 12.5px;
}

.ace-nav-group a {
    padding: 7px 20px 7px 32px;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   CARTES ET TABLEAU : espacements resserrés, cohérents avec le reste.
--------------------------------------------------------------------------- */
.ace-card {
    padding: 18px;
}

.ace-section-label {
    font-size: 10.5px;
    margin-bottom: 10px;
}

/* Conteneur de défilement horizontal du tableau : c'est ce <div>, et non le
   <table> lui-même, qui porte overflow-x. Avec 16 colonnes en white-space:
   nowrap, laisser overflow-x directement sur <table> pousse .ace-card (et
   parfois toute la page) à s'élargir au lieu de scroller proprement — d'où
   la colonne "Catégorie" tronquée en bord d'écran sans barre de défilement.
   Le tableau garde sa largeur naturelle (somme des colonnes) à l'intérieur
   de ce conteneur, qui lui reste contraint à 100% de la carte. */
.ace-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .ace-table-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .ace-table-scroll::-webkit-scrollbar-thumb {
        background: var(--ace-border);
        border-radius: 4px;
    }

table.ace-table {
    /* Remplace le width:100%/max-width:100%/overflow-x:auto posés sur
       <table> dans ace-responsive.css : la largeur à 100% et le scroll
       sont désormais gérés par .ace-table-scroll ci-dessus. Le tableau
       prend la largeur nécessaire à ses colonnes (au moins 100% de son
       conteneur pour qu'il ne soit jamais artificiellement resserré). */
    width: max-content;
    min-width: 100%;
    max-width: none;
}

    table.ace-table th {
        font-size: 9.5px;
        padding: 6px 7px;
        background: var(--ace-bg);
        color: var(--ace-primary);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 2px solid var(--ace-gold);
        text-align: left;
        /* Comme les <td> (voir règle suivante), l'en-tête ne doit jamais passer
       à la ligne : sans cela, un intitulé un peu long combiné au lien de tri
       (ex. "Date opération" + flèche ▼) retombe sur 2 lignes alors que les
       autres en-têtes restent sur 1 ligne, ce qui rend la ligne d'en-tête
       plus haute par endroits et donne une impression de colonnes décalées /
       mal alignées avec les lignes de données en dessous. */
        white-space: nowrap;
    }

        /* Le lien de tri (texte + flèche ▲/▼) doit lui aussi rester compact et
       sur une seule ligne, sans espace excessif avant la flèche. */
        table.ace-table th a {
            white-space: nowrap;
            color: inherit;
        }

    table.ace-table td {
        padding: 4px 7px;
        font-size: 11.5px;
        /* Demande explicite de l'utilisateur, le 09/09/2026 : plus aucune colonne ne doit
       être tronquée dans les journaux, quelle que soit la longueur du texte — chaque
       colonne s'élargit désormais automatiquement pour montrer son contenu en entier
       (comportement natif d'un tableau HTML en table-layout: auto, la valeur par défaut,
       dès lors qu'on ne plafonne plus la largeur des cellules). Remplace l'ancien
       plafond de 130px (100px pour certaines colonnes) combiné à overflow: hidden /
       text-overflow: ellipsis, qui coupait le texte avec "…".
       white-space: nowrap reste nécessaire : sans lui, un texte long repasserait à la
       ligne À L'INTÉRIEUR de sa cellule au lieu d'élargir la colonne, ce qui déformerait
       la hauteur des lignes. Le défilement horizontal de .ace-table-scroll
       (overflow-x: auto, voir plus haut) prend le relais si la somme des colonnes dépasse
       la largeur de l'écran, exactement comme prévu pour ce conteneur.
       aceBesInitInfobullesTronquees() (voir script de chaque journal) reste en place sans
       risque : elle ne pose désormais plus jamais de title, puisqu'aucune cellule n'est
       plus jamais tronquée (scrollWidth n'excède plus clientWidth). */
        white-space: nowrap;
    }

    table.ace-table tr:hover td {
        background: var(--ace-bg);
    }

/* Actions du tableau (Modifier / Supprimer) : forcées sur une seule ligne,
   quelle que soit la façon dont .ace-link-icon gère l'affichage, et alignées
   à la fin du tableau plutôt que collées à gauche de la colonne (qui peut
   être large quand les autres colonnes sont peu remplies). */
.ace-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

table.ace-table th:last-child,
table.ace-table td:last-child {
    text-align: right;
}

/* ---------------------------------------------------------------------------
   BOUTONS : légèrement plus compacts
--------------------------------------------------------------------------- */
.ace-btn-primary,
.ace-btn-secondary {
    padding: 8px 14px;
    font-size: 13px;
}

.ace-btn-icon {
    padding-left: 34px !important;
}

/* ---------------------------------------------------------------------------
   PAGE DE CONNEXION : libellés en casse normale (pas majuscules), plus
   proches du gabarit de référence, contrairement au reste du projet où les
   libellés en majuscules restent la norme retenue.
--------------------------------------------------------------------------- */
.ace-login-card-body .ace-field label {
    text-transform: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: normal;
    color: var(--ace-text);
    margin-bottom: 6px;
}

.ace-login-card-body .ace-field {
    margin-bottom: 14px;
}

    /* Les champs eux-mêmes (pas seulement leurs libellés ci-dessus) : la règle
   compacte .ace-field select/input[type=text]/input[type=password] plus haut
   (padding 4px 5px, font-size 12px) s'appliquait aussi ici et rendait les
   champs de connexion trop petits (retour utilisateur du 09/09/2026) — on les
   ramène à la taille confortable d'origine de la page de connexion (celle de
   .ace-select-icon select juste en dessous, pour que le sélecteur de dossier
   et les champs Utilisateur/Mot de passe soient visuellement cohérents). */
    .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] {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 7px;
    }

/* ace-responsive.css impose 470px à .ace-login-card ; on revient à la largeur
   plus resserrée de la référence (~400px), chargée en dernier donc prioritaire. */
.ace-login-card {
    max-width: 400px;
}
/* ---------------------------------------------------------------------------
   ICONES DE NAVIGATION (barre lateree) : meme convention que .ace-select-icon,
   SVG en background-image, couleur fixe #5B6B79 (var(--ace-text-muted)).
   .ace-sidebar a / .ace-nav-group summary / a sont deja en display:flex avec
   gap (voir ace-site.css), donc ces spans s'inserent nativement en 1er enfant.
--------------------------------------------------------------------------- */
.ace-nav-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.ace-nav-group a .ace-nav-icon,
.ace-nav-group summary .ace-nav-icon {
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    vertical-align: -3px;
}

.ace-nav-icon-home {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011.5%2012%204l8%207.5%22/%3E%3Cpath%20d%3D%22M6%2010v9h12v-9%22/%3E%3Cpath%20d%3D%22M10%2019v-5h4v5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-list {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%229%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2212%22%20x2%3D%2220%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22/%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%226%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2218%22%20r%3D%221%22/%3E%3C/svg%3E");
}

.ace-nav-icon-calculator {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%227%22%20x2%3D%2216%22%20y2%3D%227%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%228%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2212%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2216%22%20x2%3D%228%22%20y2%3D%2216%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2212%22%20y2%3D%2216%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2216%22%20x2%3D%2216%22%20y2%3D%2216%22/%3E%3C/svg%3E");
}

.ace-nav-icon-users {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M3%2020c0-3.3%202.7-6%206-6s6%202.7%206%206%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M15.5%2014.2c2.4.4%204.5%202.4%204.5%205.8%22/%3E%3C/svg%3E");
}

.ace-nav-icon-trending-down {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%224%2C6%2010%2C14%2014%2C10%2020%2C18%22/%3E%3Cpolyline%20points%3D%2214%2C18%2020%2C18%2020%2C12%22/%3E%3C/svg%3E");
}

.ace-nav-icon-bar-chart-2 {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%226%22%20y1%3D%2220%22%20x2%3D%226%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2220%22%20x2%3D%2212%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%2218%22%20y1%3D%2220%22%20x2%3D%2218%22%20y2%3D%2215%22/%3E%3C/svg%3E");
}

.ace-nav-icon-settings {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M12%203v2.2M12%2018.8V21M21%2012h-2.2M5.2%2012H3M18.4%205.6l-1.6%201.6M7.2%2016.8l-1.6%201.6M18.4%2018.4l-1.6-1.6M7.2%207.2%205.6%205.6%22/%3E%3C/svg%3E");
}

.ace-nav-icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%207.5-7%209-4-1.5-7-4.5-7-9V6l7-3z%22/%3E%3C/svg%3E");
}

.ace-nav-icon-help-circle {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M9.3%209.5a2.7%202.7%200%201%201%203.9%202.4c-1%20.5-1.2%201-1.2%201.9%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%220.4%22%20fill%3D%22%235B6B79%22/%3E%3C/svg%3E");
}

.ace-nav-icon-globe {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%223.6%22%20ry%3D%228.5%22/%3E%3Cline%20x1%3D%223.7%22%20y1%3D%2212%22%20x2%3D%2220.3%22%20y2%3D%2212%22/%3E%3C/svg%3E");
}

.ace-nav-icon-briefcase {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%227.5%22%20width%3D%2217%22%20height%3D%2211%22%20rx%3D%221.6%22/%3E%3Cpath%20d%3D%22M8.5%207.5V6a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v1.5%22/%3E%3Cline%20x1%3D%223.5%22%20y1%3D%2212.5%22%20x2%3D%2220.5%22%20y2%3D%2212.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-flag {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203v18%22/%3E%3Cpath%20d%3D%22M6%204h11l-2.2%203.5L17%2011H6%22/%3E%3C/svg%3E");
}

.ace-nav-icon-landmark {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2220%22%20x2%3D%2220%22%20y2%3D%2220%22/%3E%3Cline%20x1%3D%225.5%22%20y1%3D%2220%22%20x2%3D%225.5%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%229.5%22%20y1%3D%2220%22%20x2%3D%229.5%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%2214.5%22%20y1%3D%2220%22%20x2%3D%2214.5%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%2218.5%22%20y1%3D%2220%22%20x2%3D%2218.5%22%20y2%3D%2211%22/%3E%3Cpolygon%20points%3D%2212%2C3%2021%2C8.5%203%2C8.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.5%22%20y%3D%2210.5%22%20width%3D%2215%22%20height%3D%2210%22%20rx%3D%221.6%22/%3E%3Cpath%20d%3D%22M7.5%2010.5V7a4.5%204.5%200%200%201%209%200v3.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-credit-card {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%221.8%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%2215%22%20x2%3D%2210%22%20y2%3D%2215%22/%3E%3C/svg%3E");
}

.ace-nav-icon-shuffle {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2216%2C3%2021%2C3%2021%2C8%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2220%22%20x2%3D%2221%22%20y2%3D%223%22/%3E%3Cpolyline%20points%3D%2221%2C16%2021%2C21%2016%2C21%22/%3E%3Cpath%20d%3D%22M4%204l4.5%204.5%22/%3E%3Cpath%20d%3D%22M15%2015l6%206%22/%3E%3C/svg%3E");
}

.ace-nav-icon-folder {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%206.5A1.5%201.5%200%200%201%205%205h4.5l2%202.5H19a1.5%201.5%200%200%201%201.5%201.5v9A1.5%201.5%200%200%201%2019%2019.5H5A1.5%201.5%200%200%201%203.5%2018v-11.5z%22/%3E%3C/svg%3E");
}

.ace-nav-icon-folder-open {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%208V6.5A1.5%201.5%200%200%201%205%205h4.5l2%202.5H19a1.5%201.5%200%200%201%201.5%201.5v.3%22/%3E%3Cpath%20d%3D%22M3.6%208.7h16l-1.7%209.3a1.6%201.6%200%200%201-1.6%201.3H6.9a1.6%201.6%200%200%201-1.6-1.3z%22/%3E%3C/svg%3E");
}

.ace-nav-icon-tag {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.5%203.5H5A1.5%201.5%200%200%200%203.5%205v6.5a1.5%201.5%200%200%200%20.44%201.06l8.5%208.5a1.5%201.5%200%200%200%202.12%200l6.5-6.5a1.5%201.5%200%200%200%200-2.12l-8.5-8.5a1.5%201.5%200%200%200-1.06-.44z%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.1%22%20fill%3D%22%235B6B79%22/%3E%3C/svg%3E");
}

.ace-nav-icon-user-check {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M3.5%2020c0-3.6%202.7-6.5%206-6.5s6%202.9%206%206.5%22/%3E%3Cpolyline%20points%3D%2216.5%2C12%2018.3%2C13.8%2021.5%2C10%22/%3E%3C/svg%3E");
}

.ace-nav-icon-user {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M5%2020c0-3.9%203.1-7%207-7s7%203.1%207%207%22/%3E%3C/svg%3E");
}

.ace-nav-icon-link-2 {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%2014.5l5-5%22/%3E%3Cpath%20d%3D%22M8%2016.5%205.6%2018.9a3%203%200%201%201-4.2-4.2L4.4%2012%22/%3E%3Cpath%20d%3D%22M16%207.5l2.4-2.4a3%203%200%201%201%204.2%204.2L20.2%2011.7%22/%3E%3C/svg%3E");
}

.ace-nav-icon-bookmark {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203.5h12v17l-6-4-6%204z%22/%3E%3C/svg%3E");
}

.ace-nav-icon-wallet {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%207.5A2%202%200%200%201%205.5%205.5h11a2%202%200%200%201%202%202V8h-13z%22/%3E%3Cpath%20d%3D%22M3.5%208h15a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202h-13a2%202%200%200%201-2-2z%22/%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2213.5%22%20r%3D%221.2%22%20fill%3D%22%235B6B79%22/%3E%3C/svg%3E");
}

.ace-nav-icon-file-text {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203.5h7l4%204v13a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1v-16a1%201%200%200%201%201-1z%22/%3E%3Cpath%20d%3D%22M14%203.5V8h4%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2212.5%22%20x2%3D%2215%22%20y2%3D%2212.5%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2216%22%20x2%3D%2215%22%20y2%3D%2216%22/%3E%3C/svg%3E");
}

.ace-nav-icon-trash-2 {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%224%2C7%2020%2C7%22/%3E%3Cpath%20d%3D%22M9%207V5a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2%22/%3E%3Cpath%20d%3D%22M6.5%207%207.3%2019.5a1.5%201.5%200%200%200%201.5%201.4h6.4a1.5%201.5%200%200%200%201.5-1.4L17.5%207%22/%3E%3Cline%20x1%3D%2210.3%22%20y1%3D%2211%22%20x2%3D%2210.6%22%20y2%3D%2216.5%22/%3E%3Cline%20x1%3D%2213.7%22%20y1%3D%2211%22%20x2%3D%2213.4%22%20y2%3D%2216.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-layers {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%2C3%2021%2C8%2012%2C13%203%2C8%22/%3E%3Cpolyline%20points%3D%223%2C13%2012%2C18%2021%2C13%22/%3E%3Cpolyline%20points%3D%223%2C17.5%2012%2C22%2021%2C17.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpolyline%20points%3D%2212%2C7%2012%2C12%2016%2C14.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-check-square {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%2217%22%20height%3D%2217%22%20rx%3D%222%22/%3E%3Cpolyline%20points%3D%227.5%2C12.5%2010.5%2C15.5%2016.5%2C9%22/%3E%3C/svg%3E");
}

.ace-nav-icon-sliders {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%224%22%20x2%3D%225%22%20y2%3D%2220%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%224%22%20x2%3D%2212%22%20y2%3D%2220%22/%3E%3Cline%20x1%3D%2219%22%20y1%3D%224%22%20x2%3D%2219%22%20y2%3D%2220%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%229%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
}

.ace-nav-icon-book-open {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206.5c-2-1.5-4.5-2-7.5-1.5v13c3%20-.5%205.5%200%207.5%201.5%22/%3E%3Cpath%20d%3D%22M12%206.5c2-1.5%204.5-2%207.5-1.5v13c-3%20-.5%20-5.5%200%20-7.5%201.5%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%226.5%22%20x2%3D%2212%22%20y2%3D%2219.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%221.8%22/%3E%3Cline%20x1%3D%223.5%22%20y1%3D%229.5%22%20x2%3D%2220.5%22%20y2%3D%229.5%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%223%22%20x2%3D%228%22%20y2%3D%226.8%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%223%22%20x2%3D%2216%22%20y2%3D%226.8%22/%3E%3C/svg%3E");
}

.ace-nav-icon-refresh-cw {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%208.5A8%208%200%200%200%206%206.3L4%208.5%22/%3E%3Cpolyline%20points%3D%224%2C3.5%204%2C8.5%209%2C8.5%22/%3E%3Cpath%20d%3D%22M4%2015.5a8%208%200%200%200%2014%202.2l2-2.2%22/%3E%3Cpolyline%20points%3D%2220%2C20.5%2020%2C15.5%2015%2C15.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-gift {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%229%22%20width%3D%2217%22%20height%3D%224%22%20rx%3D%220.8%22/%3E%3Crect%20x%3D%224.5%22%20y%3D%2213%22%20width%3D%2215%22%20height%3D%227.5%22%20rx%3D%220.8%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2220.5%22/%3E%3Cpath%20d%3D%22M12%209C10.5%205.5%206.5%206%206.5%208.2%206.5%209.6%208.5%209%2012%209z%22/%3E%3Cpath%20d%3D%22M12%209c1.5-3.5%205.5-3%205.5-.8C17.5%209.6%2015.5%209%2012%209z%22/%3E%3C/svg%3E");
}

.ace-nav-icon-clipboard {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224.5%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%221.6%22/%3E%3Crect%20x%3D%228.5%22%20y%3D%223%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2211%22%20x2%3D%2216%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2215%22%20x2%3D%2216%22%20y2%3D%2215%22/%3E%3C/svg%3E");
}

.ace-nav-icon-package {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%207.8%2012%203.5l8.5%204.3v8.4L12%2020.5l-8.5-4.3z%22/%3E%3Cpolyline%20points%3D%223.5%2C7.8%2012%2C12%2020.5%2C7.8%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2212%22%20y2%3D%2220.5%22/%3E%3Cline%20x1%3D%227.7%22%20y1%3D%225.6%22%20x2%3D%2216.2%22%20y2%3D%2210%22/%3E%3C/svg%3E");
}

.ace-nav-icon-user-x {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M3.5%2020c0-3.9%202.9-7%206.5-7s6.5%203.1%206.5%207%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%229%22%20x2%3D%2220.5%22%20y2%3D%2213.5%22/%3E%3Cline%20x1%3D%2220.5%22%20y1%3D%229%22%20x2%3D%2216%22%20y2%3D%2213.5%22/%3E%3C/svg%3E");
}

.ace-nav-icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.2S3.5%2015%203.5%209.1C3.5%205.9%206%204%208.5%204c1.6%200%203%20.8%203.5%202.2C12.5%204.8%2013.9%204%2015.5%204c2.5%200%204.5%201.9%204.5%205.1%200%205.9-8%2011.1-8%2011.1z%22/%3E%3C/svg%3E");
}

.ace-nav-icon-dollar-sign {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B79%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22/%3E%3Cpath%20d%3D%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22/%3E%3C/svg%3E");
}

/* ============================================================================
   AJOUT — JournalBesoinsBanques.aspx (et pages similaires à venir) :
   support des champs input[type=date] / input[type=number], case à cocher
   alignée sur un label, et bloc lecture seule (solde calculé). Reprend
   exactement le même gabarit que les champs texte déjà stylés ci-dessus
   (mêmes variables --ace-*, même padding/rayon) pour rester cohérent.
============================================================================ */
.ace-field select,
.ace-field input[type=text],
.ace-field input[type=password],
.ace-field input[type=date],
.ace-field input[type=number],
.ace-field input[type=email] {
    padding: 4px 5px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--ace-border);
    color: var(--ace-text);
    background: #fff;
    width: 100%;
}

    .ace-field input[type=date]:focus,
    .ace-field input[type=number]:focus,
    .ace-field input[type=email]:focus {
        outline: none;
        border-color: var(--ace-gold);
        box-shadow: 0 0 0 3px rgba(201,162,39,0.18);
    }

/* ----------------------------------------------------------------------
   UNIFORMISATION DES CASES À COCHER ET BOUTONS RADIO (tout le projet)
   ----------------------------------------------------------------------
   1) Règle de base : toute case à cocher / bouton radio, où qu'il soit,
      a la même taille et la même couleur d'accentuation.
   2) .ace-field-checkbox : un champ formulaire à case unique avec son
      libellé sur la même ligne (ex : "Compte actif"), au lieu du libellé
      empilé au-dessus utilisé pour les autres champs de .ace-form-grid.
   3) .ace-checkbox-row et .ace-col-picker-menu label : ligne case à
      cocher/bouton radio + texte utilisée pour les listes d'options
      (colonnes à imprimer, groupes de choix à l'import, menu "Colonnes"
      des journaux). Définitions centralisées ici : ne pas les redéfinir
      localement dans le <style> d'une page, sous peine de rendre le
      projet à nouveau non uniforme. */
input[type=checkbox],
input[type=radio] {
    accent-color: var(--ace-primary);
}

.ace-field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .ace-field-checkbox input[type=checkbox],
    .ace-field-checkbox input[type=radio] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .ace-field-checkbox label {
        margin-bottom: 0;
        text-transform: none;
        font-size: 13px;
        font-weight: 600;
        color: var(--ace-text);
        letter-spacing: normal;
    }

.ace-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ace-text);
    padding: 5px 0;
    cursor: pointer;
    white-space: nowrap;
}

    .ace-checkbox-row input[type=checkbox],
    .ace-checkbox-row input[type=radio] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 0;
    }

.ace-col-picker-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 5px 0;
    cursor: pointer;
    white-space: nowrap;
}

    .ace-col-picker-menu label input[type=checkbox],
    .ace-col-picker-menu label input[type=radio] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 0;
    }

/* Champ non saisissable, affiché à titre indicatif (ex : solde recalculé
   automatiquement à l'enregistrement, exercice comptable en cours). */
.ace-field-readonly {
    padding: 4px 5px;
    border-radius: 6px;
    border: 1px dashed var(--ace-border);
    background: var(--ace-bg);
    color: var(--ace-text-muted);
    font-size: 12px;
}

/* Colonnes Retrait/Versement/Solde alignées à droite dans le tableau,
   plus lisibles pour des montants. */
table.ace-table td.ace-col-montant {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ace-montant-negatif {
    color: var(--ace-danger);
}

.ace-montant-positif {
    color: var(--ace-success);
}