
        /* Affichage horizontal des icones du header */
        .sys-header-tools {
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch;
            float: left;
            margin: 0 !important;
            padding: 0 !important;
        }

            .sys-header-tools > li {
                display: block;
                float: none !important;
            }

                .sys-header-tools > li > a {
                    display: flex !important;
                    align-items: center;
                    justify-content: center;
                    height: 50px;
                    min-width: 38px;
                    padding: 0 12px !important;
                }

        /* Menus deroulants */
        .sys-theme-dropdown,
        .sys-profile-dropdown {
            position: absolute !important;
            top: 100%;
            left: 0;
            padding: 10px;
            background-color: #10192a;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0 0 10px 10px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        }

        .sys-theme-dropdown {
            min-width: 235px;
        }

        .sys-profile-dropdown {
            min-width: 220px;
        }

        .skin-sysimple-soft .sys-theme-dropdown,
        .skin-blue-light .sys-theme-dropdown {
            background-color: #f8fbff;
            border-color: rgba(34, 48, 66, 0.14);
            color: #223042;
            box-shadow: 0 10px 24px rgba(34, 48, 66, 0.16);
        }

        .skin-sysimple-soft .sys-theme-dropdown .form-control,
        .skin-blue-light .sys-theme-dropdown .form-control {
            background-color: #ffffff !important;
            border-color: rgba(34, 48, 66, 0.20) !important;
            color: #223042 !important;
        }

        .skin-sysimple-vs .sys-theme-dropdown,
        .skin-sysimple-midnight .sys-theme-dropdown {
            background-color: #10192a;
            border-color: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.92);
        }

        .skin-sysimple-vs .sys-theme-dropdown .form-control,
        .skin-sysimple-midnight .sys-theme-dropdown .form-control {
            background-color: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.18) !important;
            color: #ffffff !important;
        }

        .sys-dropdown-title {
            display: block;
            margin: 0 0 6px 0;
            font-weight: 600;
            color: inherit;
        }

        .sys-theme-help {
            display: block;
            margin-top: 6px;
            opacity: 0.75;
        }

        .sys-logout-button {
            margin-top: 8px;
        }

        /* Bootstrap applique normalement un affichage vertical en mobile.
        Cette regle garde les icones cote a cote. */
        @media (max-width: 767px) {
            .navbar-nav.sys-header-tools {
                display: flex !important;
                flex-direction: row !important;
                margin: 0 !important;
            }

                .navbar-nav.sys-header-tools > li {
                    float: none !important;
                }

                .navbar-nav.sys-header-tools .dropdown-menu {
                    position: absolute !important;
                    float: left !important;
                }
        }
    

        .sys-theme-dropdown .dropdown-menu {
            right: 0;
            left: auto;
        }

        .navbar-custom-menu {
            max-width: calc(100vw - 700px);
            overflow: visible;
        }

            /* Barre droite compacte : aucun retour a la ligne sous le contenu. */
            .navbar-custom-menu > .navbar-nav {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                align-items: stretch !important;
                margin: 0 !important;
                white-space: nowrap;
            }

                .navbar-custom-menu > .navbar-nav > li {
                    float: none !important;
                }

            .navbar-custom-menu .user-menu > a {
                display: flex !important;
                align-items: center;
                height: 50px;
                max-width: min(360px, 32vw);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

                .navbar-custom-menu .user-menu > a .hidden-xs,
                #ViewModelHeaderForm-UserName {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

        /* Etat de la connexion et activite des appels serveur. */
        .sys-server-runtime-items {
            display: flex !important;
            align-items: center;
            gap: 8px;
            height: 50px;
            padding: 0 10px;
        }

        .sys-server-user-name {
            display: inline-block;
            max-width: 230px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(255, 255, 255, .92);
            font-size: 13px;
            font-weight: 600;
        }

            .sys-server-user-name[hidden] {
                display: none !important;
            }

        .sys-server-connection,
        .sys-server-activity {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 28px;
            padding: 4px 9px;
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 14px;
            color: rgba(255, 255, 255, .82);
            background: rgba(0, 0, 0, .12);
            font-size: 11px;
            font-weight: 500;
            line-height: 1;
            white-space: nowrap;
        }

        .sys-server-connection-dot {
            width: 8px;
            height: 8px;
            flex: 0 0 8px;
            border-radius: 50%;
            background: #f0ad4e;
            box-shadow: 0 0 0 3px rgba(240, 173, 78, .13);
        }

        .sys-server-connection.is-connected .sys-server-connection-dot {
            background: #39d98a;
            box-shadow: 0 0 0 3px rgba(57, 217, 138, .13);
        }

        .sys-server-connection.is-disconnected .sys-server-connection-dot {
            background: #ff6b6b;
            box-shadow: 0 0 0 3px rgba(255, 107, 107, .13);
        }

        .sys-server-connection.is-checking .sys-server-connection-dot {
            background: #f0ad4e;
            box-shadow: 0 0 0 3px rgba(240, 173, 78, .13);
            animation: sys-server-pulse 1.1s ease-in-out infinite;
        }

        .sys-server-activity {
            color: #ffd38a;
        }

            .sys-server-activity.is-complete {
                color: #74e6aa;
            }

            .sys-server-activity.is-error {
                color: #ff8d8d;
            }

            .sys-server-activity[hidden] {
                display: none !important;
            }

        @keyframes sys-server-pulse {
            0%, 100% {
                opacity: .55;
                transform: scale(.88);
            }

            50% {
                opacity: 1;
                transform: scale(1.08);
            }
        }

        .sys-public-config-backdrop {
            position: fixed;
            inset: 0;
            z-index: 10080;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(0, 0, 0, .58);
        }

            .sys-public-config-backdrop.is-open {
                display: flex;
            }

        .sys-public-config-dialog {
            width: min(920px, calc(100vw - 42px));
            max-height: min(720px, calc(100vh - 42px));
            display: grid;
            grid-template-rows: auto 1fr auto;
            border: 1px solid rgba(255, 255, 255, .14);
            background: #182230;
            color: rgba(255, 255, 255, .92);
            box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
        }

        .sys-public-config-head,
        .sys-public-config-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, .10);
            background: #111a27;
        }

        .sys-public-config-footer {
            border-top: 1px solid rgba(255, 255, 255, .10);
            border-bottom: 0;
            justify-content: flex-end;
        }

        .sys-public-config-title {
            display: flex;
            align-items: center;
            gap: 11px;
        }

            .sys-public-config-title > span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border: 1px solid rgba(58, 160, 255, .40);
                background: rgba(58, 160, 255, .14);
                color: #58b7ff;
            }

            .sys-public-config-title strong {
                display: block;
                font-size: 18px;
                line-height: 1.15;
            }

            .sys-public-config-title small {
                display: block;
                margin-top: 3px;
                color: rgba(255, 255, 255, .62);
                font-size: 12px;
            }

        .sys-public-config-close,
        .sys-public-config-save,
        .sys-public-config-footer button {
            min-height: 34px;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .04);
            color: rgba(255, 255, 255, .92);
            padding: 0 12px;
        }

        .sys-public-config-save {
            border-color: rgba(255, 255, 255, .16);
            background: rgba(255, 255, 255, .04);
            color: rgba(255, 255, 255, .72);
        }

        .sys-public-config-body {
            position: relative;
            overflow: auto;
            padding: 16px;
        }

        .sys-public-config-loading {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(17, 26, 39, .88);
            backdrop-filter: blur(1px);
        }

            .sys-public-config-loading[hidden] {
                display: none !important;
            }

        .sys-public-config-loading-box {
            min-width: min(360px, 100%);
            padding: 18px 20px;
            border: 1px solid rgba(58, 160, 255, .32);
            background: #111a27;
            color: rgba(255, 255, 255, .90);
            box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
        }

            .sys-public-config-loading-box strong {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 15px;
            }

        .sys-public-config-loading-title {
            color: rgba(255, 255, 255, .90);
        }

        .sys-public-config-loading-detail {
            display: block;
            margin-top: 8px;
            color: rgba(255, 255, 255, .64);
            font-size: 12px;
        }

        .sys-public-config-loading-box i {
            color: #58b7ff;
        }

        .sys-public-config-status {
            min-height: 18px;
            margin-bottom: 10px;
            color: #92d2ff;
            font-size: 12px;
        }

        .sys-public-config-summary {
            display: grid;
            gap: 4px;
            margin-bottom: 12px;
            padding: 11px 12px;
            border: 1px solid rgba(58, 160, 255, .32);
            background: rgba(58, 160, 255, .10);
        }

            .sys-public-config-summary:empty {
                display: none;
                margin: 0;
                padding: 0;
                border: 0;
            }

            .sys-public-config-summary strong {
                font-size: 13px;
            }

            .sys-public-config-summary span {
                color: rgba(255, 255, 255, .68);
                font-size: 12px;
            }

        .sys-public-config-list {
            display: grid;
            gap: 8px;
        }

        .sys-public-config-source {
            border: 1px solid rgba(88, 183, 255, .22);
            background: rgba(255, 255, 255, .025);
        }

            .sys-public-config-source.is-open {
                border-color: rgba(88, 183, 255, .38);
                background: rgba(88, 183, 255, .045);
            }

        .sys-public-config-source-head {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr) auto 42px;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-height: 48px;
            border: 0;
            background: rgba(88, 183, 255, .08);
            color: #92d2ff;
            padding: 0 12px;
            text-align: left;
        }

            .sys-public-config-source-head:hover {
                background: rgba(88, 183, 255, .13);
            }

            .sys-public-config-source-head strong {
                min-width: 0;
                overflow: hidden;
                color: #a8dcff;
                font-size: 13px;
                font-weight: 800;
                letter-spacing: .06em;
                text-overflow: ellipsis;
                text-transform: uppercase;
                white-space: nowrap;
            }

            .sys-public-config-source-head small {
                color: rgba(255, 255, 255, .56);
                font-family: Consolas, Monaco, monospace;
                font-size: 11px;
            }

            .sys-public-config-source-head em {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 28px;
                height: 24px;
                border: 1px solid rgba(255, 255, 255, .12);
                background: rgba(0, 0, 0, .12);
                color: rgba(255, 255, 255, .72);
                font-style: normal;
                font-size: 11px;
                font-weight: 800;
            }

        .sys-public-config-source-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            color: #58b7ff;
        }

        .sys-public-config-source-body {
            display: grid;
            gap: 8px;
            padding: 10px;
        }

        .sys-public-config-grid-head,
        .sys-public-config-row {
            display: grid;
            grid-template-columns: minmax(300px, 1fr) minmax(260px, 330px) 42px;
            align-items: center;
            gap: 10px;
        }

        .sys-public-config-grid-head {
            padding: 0 10px 4px;
            color: rgba(255, 255, 255, .58);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .sys-public-config-row {
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .035);
        }

            .sys-public-config-row.is-dirty {
                border-color: rgba(245, 171, 53, .55);
                background: rgba(245, 171, 53, .07);
            }

                .sys-public-config-row.is-dirty .sys-public-config-save {
                    border-color: rgba(245, 171, 53, .70);
                    background: rgba(245, 171, 53, .20);
                    color: #ffd48a;
                }

            .sys-public-config-row.is-saving .sys-public-config-save {
                border-color: rgba(58, 160, 255, .70);
                background: rgba(58, 160, 255, .22);
                color: #92d2ff;
            }

            .sys-public-config-row.is-saved {
                border-color: rgba(0, 166, 90, .58);
            }

                .sys-public-config-row.is-saved .sys-public-config-save {
                    border-color: rgba(0, 166, 90, .72);
                    background: rgba(0, 166, 90, .22);
                    color: #71f0ad;
                }

            .sys-public-config-row.is-error {
                border-color: rgba(221, 75, 57, .65);
            }

                .sys-public-config-row.is-error .sys-public-config-save {
                    border-color: rgba(221, 75, 57, .75);
                    background: rgba(221, 75, 57, .22);
                    color: #ff9b8c;
                }

            .sys-public-config-row.is-structured {
                grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
            }

            .sys-public-config-key,
            .sys-public-config-row small {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .sys-public-config-key {
            color: rgba(255, 255, 255, .42);
            font-family: Consolas, Monaco, monospace;
            font-size: 11px;
            white-space: nowrap;
        }

        .sys-public-config-row small {
            color: rgba(255, 255, 255, .88);
            font-size: 13px;
            line-height: 1.35;
            white-space: normal;
        }

        .sys-public-config-label {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .sys-public-config-row input,
        .sys-public-config-row select,
        .sys-public-config-row textarea {
            width: 100%;
            min-width: 0;
            min-height: 34px;
            border: 1px solid rgba(255, 255, 255, .16);
            background: #0c1421;
            color: #ffffff;
            padding: 0 9px;
            outline: 0;
        }

        .sys-public-config-row .bootstrap-select {
            min-width: 0;
            width: 100% !important;
        }

            .sys-public-config-row .bootstrap-select > .dropdown-toggle {
                min-height: 34px;
                border: 1px solid rgba(255, 255, 255, .16);
                background: #0c1421;
                color: #ffffff;
                padding: 0 9px;
            }

            .sys-public-config-row .bootstrap-select .dropdown-menu {
                background: #10192a;
                border-color: rgba(255, 255, 255, .16);
            }

            .sys-public-config-row .bootstrap-select .bs-searchbox input {
                min-height: 32px;
                background: #0c1421;
                color: #ffffff;
            }

        .sys-public-config-row textarea {
            min-height: 72px;
            padding: 8px 9px;
            resize: vertical;
        }

        .sys-public-config-structured-editor {
            display: grid;
            gap: 8px;
            min-width: 0;
        }

        .sys-public-config-pair-head,
        .sys-public-config-pair-row {
            display: grid;
            grid-template-columns: minmax(96px, .7fr) minmax(140px, 1.3fr) 38px;
            gap: 8px;
            align-items: center;
        }

            .sys-public-config-pair-head.is-holiday,
            .sys-public-config-pair-row.is-holiday {
                grid-template-columns: 54px 54px 72px minmax(140px, 1fr) 38px;
            }

        .sys-public-config-pair-head {
            color: rgba(255, 255, 255, .72);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .sys-public-config-pair-row input {
            min-width: 0;
        }

        .sys-public-config-structured-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sys-public-config-add-row,
        .sys-public-config-row-remove {
            min-height: 34px;
            border: 1px solid rgba(88, 183, 255, .34);
            background: rgba(88, 183, 255, .12);
            color: #ffffff;
            font-weight: 800;
            line-height: 1;
        }

        .sys-public-config-add-row {
            justify-self: start;
            padding: 0 12px;
        }

        .sys-public-config-structured-actions .sys-public-config-save {
            min-width: 38px;
            padding: 0 11px;
        }

        .sys-public-config-row-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            min-width: 38px;
            border-color: rgba(255, 115, 115, .34);
            background: rgba(255, 115, 115, .13);
            color: #ffd6d6;
            padding: 0;
        }

            .sys-public-config-row-remove:hover {
                border-color: rgba(255, 115, 115, .62);
                background: rgba(255, 115, 115, .22);
                color: #ffffff;
            }

        .sys-public-config-weekdays {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

            .sys-public-config-weekdays label {
                display: flex;
                align-items: center;
                gap: 7px;
                flex: 1 1 116px;
                min-width: 116px;
                min-height: 36px;
                margin: 0;
                border: 1px solid rgba(255, 255, 255, .16);
                background: rgba(12, 20, 33, .92);
                color: #ffffff;
                padding: 0 10px;
                font-size: 12px;
                font-weight: 600;
                line-height: 1;
                cursor: pointer;
                transition: border-color .15s ease, background .15s ease, color .15s ease;
            }

                .sys-public-config-weekdays label span {
                    color: #f4f8fb !important;
                    opacity: 1;
                }

                .sys-public-config-weekdays label.is-selected,
                .sys-public-config-weekdays label:has(input:checked) {
                    border-color: rgba(88, 183, 255, .65);
                    background: rgba(22, 72, 105, .76);
                    color: #eaf7ff;
                }

                    .sys-public-config-weekdays label.is-selected span,
                    .sys-public-config-weekdays label:has(input:checked) span {
                        color: #ffffff !important;
                    }

            .sys-public-config-weekdays input {
                width: 15px;
                height: 15px;
                min-height: 0;
                margin: 0;
                accent-color: #2f9fe0;
                flex: 0 0 auto;
            }

        .sys-public-config-group {
            display: none;
            margin-top: 10px;
            padding: 8px 10px;
            border: 1px solid rgba(88, 183, 255, .22);
            background: rgba(88, 183, 255, .08);
            color: #92d2ff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .sys-public-config-row .sys-public-config-save {
            width: 38px;
            min-width: 38px;
            padding: 0;
        }

        .sys-public-config-row input:focus,
        .sys-public-config-row select:focus,
        .sys-public-config-row textarea:focus {
            border-color: #58b7ff;
        }

        @media (max-width: 980px) {
            .sys-public-config-grid-head {
                display: none;
            }

            .sys-public-config-row {
                grid-template-columns: 1fr;
                align-items: stretch;
            }
        }

        @media (max-width: 900px) {
            .sys-server-connection-text,
            .sys-server-activity-text {
                display: none;
            }

            .sys-server-connection,
            .sys-server-activity {
                justify-content: center;
                width: 28px;
                padding: 4px;
            }
        }

        .sys-header-runtime-state {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }

        /* Ajustement header Dashboard : le statut reste lisible et le nom utilisateur reste visible. */
        .main-header .navbar {
            display: flex;
            align-items: stretch;
        }

        .main-header .navbar-custom-menu {
            margin-left: auto;
            flex: 0 0 auto;
            max-width: calc(100vw - 560px);
            min-width: 430px;
        }

            .main-header .navbar-custom-menu > .navbar-nav {
                justify-content: flex-end;
                width: 100%;
            }

            .main-header .navbar-custom-menu .sys-server-runtime-items {
                order: 1;
                flex: 0 0 auto;
                padding: 0 8px;
            }

            .main-header .navbar-custom-menu .user-menu {
                order: 2;
                flex: 0 0 auto;
                min-width: 120px;
            }

                .main-header .navbar-custom-menu .user-menu > a {
                    max-width: 260px;
                    padding-left: 8px;
                    padding-right: 10px;
                }

                    .main-header .navbar-custom-menu .user-menu > a .hidden-xs,
                    .main-header #ViewModelHeaderForm-UserName {
                        display: inline-block !important;
                        max-width: 230px;
                        min-width: 0;
                    }

                    .main-header .navbar-custom-menu .user-menu > a .sys-user-name-source,
                    .main-header .navbar-custom-menu .user-menu > a .sys-user-name-source #ViewModelHeaderForm-UserName {
                        display: none !important;
                    }

        @media (max-width: 1200px) {
            .main-header .navbar-custom-menu {
                max-width: calc(100vw - 520px);
                min-width: 180px;
            }

                .main-header .navbar-custom-menu .user-menu > a {
                    max-width: 170px;
                }
        }
    
/* Keep translation helpers within the value column, never in the save column. */
.sys-public-config-grid-head,.sys-public-config-row{grid-template-columns:minmax(220px,1fr) minmax(320px,1.3fr) 42px;align-items:start}
.sys-public-config-editor{min-width:0;width:100%;box-sizing:border-box}
.sys-public-config-editor>input,.sys-public-config-editor>select,.sys-public-config-editor>textarea{box-sizing:border-box;width:100%!important;max-width:100%}
.sys-public-config-editor textarea{min-height:90px;padding:8px 10px;resize:vertical}
.sys-public-config-row .sys-public-config-save{align-self:start;margin-top:0}
.sys-public-config-row.is-structured{grid-template-columns:minmax(220px,1fr) minmax(320px,1.3fr)}
@media(max-width:980px){.sys-public-config-row,.sys-public-config-row.is-structured{grid-template-columns:minmax(0,1fr) 42px}.sys-public-config-label{grid-column:1/-1}.sys-public-config-editor{grid-column:1}.sys-public-config-row.is-structured .sys-public-config-editor{grid-column:1/-1}}
