/* ==========================================================================
   VITEFIX — CSS
   ----------------------------------------------------------------------------
   Logique de gouvernance couleur :
   1) 6 couleurs principales uniquement :
      --vf-blue-main
      --vf-red-main
      --vf-yellow-main
      --vf-green-main
      --vf-black-main
      --vf-white-main

   2) Toutes les autres couleurs sont des variables dérivées de ces 6 familles.
      Chaque variable couleur porte donc un préfixe de famille :
      --vf-blue-...
      --vf-red-...
      --vf-yellow-...
      --vf-green-...
      --vf-black-...
      --vf-white-...

   Note :
   - La famille "black" regroupe tous les neutres d’interface
     (fonds, bordures, textes, ombres), même très clairs,
     afin de garder un préfixe stable entre thème clair et thème sombre.
   - Aucune couleur n’est codée en dur dans les règles de composants.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS / VARIABLES GLOBALES
   ========================================================================== */

html {
    font-size: 100%;
}

:root {
    /* ----------------------------------------------------------------------
       Couleurs principales VITEFIX
       ---------------------------------------------------------------------- */
    --vf-blue-main: #3B71CA;
    --vf-red-main: #EF4444;
    --vf-yellow-main: #F59E0B;
    --vf-green-main: #10B981;
    --vf-black-main: #000000;
    --vf-white-main: #FFFFFF;

    /* ----------------------------------------------------------------------
       Typographies
       ---------------------------------------------------------------------- */
    --font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* ----------------------------------------------------------------------
       Famille BLUE — dérivés
       ---------------------------------------------------------------------- */
    --vf-blue-primary: var(--vf-blue-main);
    --vf-blue-primary-hover: #2D5DAA;
    --vf-blue-user-plan-bg-alpha-10: rgba(59, 113, 202, 0.10);
    --vf-blue-user-plan-border-alpha-20: rgba(59, 113, 202, 0.20);
    --vf-blue-focus-ring-alpha-10: rgba(59, 113, 202, 0.10);
    --vf-blue-score-7-9: var(--vf-blue-main);
    --vf-blue-chat-user-bg: var(--vf-blue-main);

    /* ----------------------------------------------------------------------
       Famille RED — dérivés
       ---------------------------------------------------------------------- */
    --vf-red-module-warning-bg: #FEE2E2;
    --vf-red-module-warning-border: #FECACA;
    --vf-red-module-warning-text: var(--vf-red-main);
    --vf-red-status-idle: var(--vf-red-main);
    --vf-red-job-ring-alpha-20: rgba(239, 68, 68, 0.20);
    --vf-red-danger-hover: var(--vf-red-main);
    --vf-red-score-0-3: var(--vf-red-main);
    --vf-red-close-game-hover: var(--vf-red-main);

    /* ----------------------------------------------------------------------
       Famille YELLOW — dérivés
       ---------------------------------------------------------------------- */
    --vf-yellow-status-running: var(--vf-yellow-main);
    --vf-yellow-job-ring-alpha-20: rgba(245, 158, 11, 0.20);
    --vf-yellow-upgrade-text: #D97706;
    --vf-yellow-upgrade-text-hover: #B45309;
    --vf-yellow-upgrade-bg-hover: #FEF3C7;
    --vf-yellow-score-3-5: var(--vf-yellow-main);
    /* Joseph : repères des dashboards, dérivés de la palette VITEFIX existante. */
    --vf-yellow-dashboard-orange: color-mix(in srgb, var(--vf-yellow-main) 65%, var(--vf-red-main));
    --vf-red-dashboard-orange: color-mix(in srgb, var(--vf-red-main) 65%, var(--vf-yellow-main));
    --vf-blue-dashboard-alternate: color-mix(in srgb, var(--vf-blue-primary) 65%, var(--vf-red-main));
    --vf-blue-dashboard-teal: color-mix(in srgb, var(--vf-blue-primary) 50%, var(--vf-green-main));

    /* ----------------------------------------------------------------------
       Famille GREEN — dérivés
       ---------------------------------------------------------------------- */
    --vf-green-module-completed-bg: #F0FDF4;
    --vf-green-module-completed-border: #BBF7D0;
    --vf-green-module-completed-accent: #16A34A;
    --vf-green-status-done: var(--vf-green-main);
    --vf-green-job-ring-alpha-20: rgba(16, 185, 129, 0.20);
    --vf-green-score-5-7: var(--vf-green-main);

    /* ----------------------------------------------------------------------
       Famille WHITE — dérivés
       ---------------------------------------------------------------------- */
    --vf-white-chat-user-text: var(--vf-white-main);

    /* ----------------------------------------------------------------------
       Famille BLACK — dérivés / neutres UI
       ---------------------------------------------------------------------- */
    --vf-black-bg-app: #F4F7F9;
    --vf-black-bg-surface: #FFFFFF;
    --vf-black-text-main: #2D3748;
    --vf-black-text-muted: #718096;
    --vf-black-border-default: #E2E8F0;

    --vf-black-module-neutral-bg: #F8FAFC;
    --vf-black-module-disabled-bg: #F1F5F9;

    --vf-black-chat-bot-bg: #E2E8F0;
    --vf-black-chat-bot-text: #2D3748;

    --vf-black-score-9-10: var(--vf-black-main);

    --vf-black-scroll-indicator-bg-alpha-95: rgba(255, 255, 255, 0.95);

    --vf-black-shadow-soft-05: rgba(0, 0, 0, 0.05);
    --vf-black-shadow-soft-02: rgba(0, 0, 0, 0.02);
    --vf-black-shadow-soft-03: rgba(0, 0, 0, 0.03);
    --vf-black-shadow-soft-10: rgba(0, 0, 0, 0.10);
    --vf-black-shadow-soft-15: rgba(0, 0, 0, 0.15);
    --vf-black-shadow-soft-20: rgba(0, 0, 0, 0.20);
    --vf-black-shadow-soft-30: rgba(0, 0, 0, 0.30);
    --vf-black-overlay-alpha-50: rgba(0, 0, 0, 0.50);

    --vf-black-border-transparent: transparent;
    --vf-black-game-surface-bg: #000000;
    --vf-black-game-surface-text: #FFFFFF;

    /* ----------------------------------------------------------------------
       Ombres / surfaces encapsulées en variables
       ---------------------------------------------------------------------- */
    --vf-black-shadow-header: 0 2px 10px var(--vf-black-shadow-soft-05);
    --vf-black-shadow-panel: 0 2px 10px var(--vf-black-shadow-soft-02);
    --vf-black-shadow-card: 0 2px 5px var(--vf-black-shadow-soft-02);
    --vf-black-shadow-card-hover: 0 4px 12px var(--vf-black-shadow-soft-05);
    --vf-black-shadow-dropdown: 0 10px 25px var(--vf-black-shadow-soft-10);
    --vf-black-shadow-scroll-indicator: 0 4px 10px var(--vf-black-shadow-soft-15);
    --vf-black-shadow-bug: 0 4px 15px var(--vf-black-shadow-soft-15);
    --vf-black-shadow-bug-hover: 0 6px 20px var(--vf-black-shadow-soft-20);
    --vf-black-shadow-profile-card: 0 4px 20px var(--vf-black-shadow-soft-03);
    --vf-black-shadow-game-panel: 0 20px 50px var(--vf-black-shadow-soft-30);
    --vf-black-shadow-sidebar-mobile: 5px 0 15px var(--vf-black-shadow-soft-10);

    /* ----------------------------------------------------------------------
       Assets UI (thème clair)
       ---------------------------------------------------------------------- */
    --brand-logo-url: url('/images/logos/vitefix_logo_light.png');
    --icon-theme-url: url('/images/ui/themelight_icon.png');
    --icon-game-url: url('/images/ui/gamelight_icon.png');
    --icon-help-url: url('/images/ui/helplight_icon.png');
    --icon-report-url: url('/images/ui/reportlight_icon.png');
    --icon-bug-url: url('/images/ui/buglight_icon.png');

    --icon-rep-execfr-url: url('/images/reports/reportexeclight_icon.png');
    --icon-rep-roadmapfr-url: url('/images/reports/reportroadmaplight_icon.png');
    --icon-rep-dashboardsfr-url: url('/images/reports/reportdashboardslight_icon.png');
    --icon-rep-quickwinsfr-url: url('/images/reports/reportquickwinslight_icon.png');
    --icon-rep-synthesefr-url: url('/images/reports/reportsyntheselight_icon.png');


    /* ----------------------------------------------------------------------
       Assets domaines / modules (thème clair)
       ---------------------------------------------------------------------- */
    --icon-mod-generalcontext-url: url('/images/domains/generalcontextlight_icon.png');
    --icon-mod-iaas-url: url('/images/domains/iaaslight_icon.png');
    --icon-mod-recovery-url: url('/images/domains/bcpdrplight_icon.png');
    --icon-mod-noc-url: url('/images/domains/noclight_icon.png');
    --icon-mod-support-url: url('/images/domains/itservicedesklight_icon.png');
    --icon-mod-soc-url: url('/images/domains/soclight_icon.png');
    --icon-mod-gdpr-url: url('/images/domains/gdprlight_icon.png');
}

/* ==========================================================================
   02. THÈME SOMBRE
   ========================================================================== */

[data-theme="dark"] {
    --vf-blue-primary: #60A5FA;
    --vf-blue-primary-hover: #93C5FD;
    --vf-blue-user-plan-bg-alpha-10: rgba(96, 165, 250, 0.10);
    --vf-blue-user-plan-border-alpha-20: rgba(96, 165, 250, 0.20);
    --vf-blue-focus-ring-alpha-10: rgba(96, 165, 250, 0.10);
    --vf-blue-chat-user-bg: #60A5FA;

    --vf-green-module-completed-bg: #064E3B;
    --vf-green-module-completed-border: #065F46;
    --vf-green-module-completed-accent: #34D399;

    --vf-black-bg-app: #0F172A;
    --vf-black-bg-surface: #1E293B;
    --vf-black-text-main: #F8FAFC;
    --vf-black-text-muted: #94A3B8;
    --vf-black-border-default: #334155;

    --vf-black-module-neutral-bg: #0F172A;
    --vf-black-module-disabled-bg: #1E293B;

    --vf-black-chat-bot-bg: #334155;
    --vf-black-chat-bot-text: #F8FAFC;

    --vf-black-score-9-10: #F8FAFC;
    --vf-black-scroll-indicator-bg-alpha-95: rgba(30, 41, 59, 0.95);

    --vf-yellow-upgrade-text: #F59E0B;
    --vf-yellow-upgrade-text-hover: #FCD34D;
    --vf-yellow-upgrade-bg-hover: #334155;

    --brand-logo-url: url('/images/logos/vitefix_logo_dark.png');
    --icon-theme-url: url('/images/ui/themedark_icon.png');
    --icon-game-url: url('/images/ui/gamedark_icon.png');
    --icon-help-url: url('/images/ui/helpdark_icon.png');
    --icon-bug-url: url('/images/ui/bugdark_icon.png');
    --icon-report-url: url('/images/ui/reportdark_icon.png');

    --icon-rep-execfr-url: url('/images/reports/reportexecdark_icon.png');
    --icon-rep-roadmapfr-url: url('/images/reports/reportroadmapdark_icon.png');
    --icon-rep-dashboardsfr-url: url('/images/reports/reportdashboardsdark_icon.png');
    --icon-rep-quickwinsfr-url: url('/images/reports/reportquickwinsdark_icon.png');
    --icon-rep-synthesefr-url: url('/images/reports/reportsynthesedark_icon.png');

    --icon-mod-generalcontext-url: url('/images/domains/generalcontextdark_icon.png');
    --icon-mod-iaas-url: url('/images/domains/iaasdark_icon.png');
    --icon-mod-recovery-url: url('/images/domains/bcpdrpdark_icon.png');
    --icon-mod-noc-url: url('/images/domains/nocdark_icon.png');
    --icon-mod-support-url: url('/images/domains/itservicedeskdark_icon.png');
    --icon-mod-soc-url: url('/images/domains/socdark_icon.png');
    --icon-mod-gdpr-url: url('/images/domains/gdprdark_icon.png');
}

.icon-rep-execfr {
    background-image: var(--icon-rep-execfr-url);
}

.icon-rep-roadmapfr {
    background-image: var(--icon-rep-roadmapfr-url);
}

.icon-rep-dashboardsfr {
    background-image: var(--icon-rep-dashboardsfr-url);
}

.icon-rep-quickwinsfr {
    background-image: var(--icon-rep-quickwinsfr-url);
}

.icon-rep-synthesefr {
    background-image: var(--icon-rep-synthesefr-url);
}

/* ==========================================================================
   03. RESET / BASE GLOBALE
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ui);
    background-color: var(--vf-black-bg-app);
    color: var(--vf-black-text-main);
    overflow: hidden;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.mobile-menu-btn,
.close-sidebar-btn,
.mobile-overlay {
    display: none;
}

/* ==========================================================================
   04. HEADER / NAVBAR
   ========================================================================== */

.header-wrapper {
    width: 100%;
    z-index: 10;
    background-color: var(--vf-black-bg-surface);
    box-shadow: var(--vf-black-shadow-header);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: var(--vf-black-bg-surface);
    box-shadow: var(--vf-black-shadow-header);
}

.brand-logo {
    width: 260px;
    height: 100px;
    aspect-ratio: unset;
    cursor: pointer;
    background-image: var(--brand-logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.header-system-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px;
}

.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.header-icon-btn:hover {
    background-color: var(--vf-black-bg-app);
}

.header-icon-btn .icon-img {
    width: 32px;
    height: 32px;
    background-size: cover;
    transition: background-image 0.2s;
}

.theme-switcher .icon-img { background-image: var(--icon-theme-url); }
.game-trigger .icon-img { background-image: var(--icon-game-url); }
.help-trigger .icon-img { background-image: var(--icon-help-url); }
.bug-trigger .icon-img {  background-image: var(--icon-bug-url); }

/* ==========================================================================
   05. SÉLECTEUR DE LANGUE
   ========================================================================== */

.language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--vf-black-text-muted);
    background: var(--vf-black-bg-app);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    transition: border-color 0.2s;
}

.language-selector:hover {
    border-color: var(--vf-blue-primary);
}

.language-selector select {
    border: none;
    outline: none;
    cursor: pointer;
    background: var(--vf-black-border-transparent);
    color: var(--vf-black-text-main);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ==========================================================================
   06. MENU UTILISATEUR / PROFIL
   ========================================================================== */

.user-profile-wrapper {
    position: relative;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 18px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-profile:hover {
    background-color: var(--vf-black-bg-app);
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.user-plan {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    color: var(--vf-blue-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--vf-blue-user-plan-bg-alpha-10);
    border: 1px solid var(--vf-blue-user-plan-border-alpha-20);
    border-radius: 12px;
}

/* Existing server protection, shown only after confirmation. */
.connection-protection {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    position: relative;
    overflow: hidden;
    padding: .5rem .75rem .5rem .9rem;
    border-radius: .5rem;
    background: var(--vf-blue-user-plan-bg-alpha-10);
    color: var(--vf-black-text-main);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
}
.connection-protection::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .1875rem;
    background: linear-gradient(to bottom,
        var(--vf-blue-main) 0 25%, var(--vf-green-main) 25% 50%,
        var(--vf-yellow-main) 50% 75%, var(--vf-red-main) 75% 100%);
}
.connection-protection-icon { color: var(--vf-blue-primary); flex-shrink: 0; width: .875rem; height: .875rem; }
.connection-protection--login { display: flex; margin: .75rem 0; }
.connection-protection--compact {
    flex-shrink: 0;
    min-height: 1.375rem;
    padding: .1875rem .5rem .1875rem .65rem;
    border-radius: .4rem;
    font-size: .7rem;
    white-space: nowrap;
}
.user-status-row { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; }
.user-status-row .user-plan { margin-top: 0; flex-shrink: 0; }
@media (max-width: 1250px) {
    .connection-protection--compact .connection-protection-label { display: none; }
}
@media (max-width: 600px) {
    .navbar .user-profile .user-info { display: flex; }
    .navbar .user-status-row { margin-top: 0; }
    .navbar .user-status-row .user-plan { display: none; }
}

.profile-chevron {
    margin-left: 5px;
    color: var(--vf-black-text-muted);
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.profile-dropdown {
    position: absolute;
    top: 110%;
    right: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    min-width: 200px;
    overflow: hidden;
    background: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-dropdown);
}

.profile-dropdown.show {
    display: flex;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    background: none;
    border: none;
    color: var(--vf-black-text-main);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.dropdown-item i {
    color: var(--vf-black-text-muted);
    font-size: 1.1rem;
}

.dropdown-item:hover {
    color: var(--vf-blue-primary);
    background: var(--vf-black-bg-app);
}

.dropdown-item:hover i {
    color: var(--vf-blue-primary);
}

.dropdown-item.danger:hover,
.dropdown-item.danger:hover i {
    color: var(--vf-red-danger-hover);
}

.dropdown-divider {
    width: 100%;
    height: 1px;
    background: var(--vf-black-border-default);
}

.dropdown-item.upgrade-btn {
    color: var(--vf-yellow-upgrade-text);
    font-weight: 600;
}

.dropdown-item.upgrade-btn i {
    color: var(--vf-yellow-upgrade-text);
}

.dropdown-item.upgrade-btn:hover {
    color: var(--vf-yellow-upgrade-text-hover);
    background: var(--vf-yellow-upgrade-bg-hover);
}

.dropdown-item.upgrade-btn:hover i {
    color: var(--vf-yellow-upgrade-text-hover);
}

/* ==========================================================================
   07. LAYOUT PRINCIPAL
   ========================================================================== */

.main-layout {
    display: flex;
    flex: 1;
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
}

/* ==========================================================================
   08. SIDEBAR / PANELS LATÉRAUX
   ========================================================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 350px;
    overflow-y: auto;
}

.sidebar-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-panel);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 10px;
}

.panel-title {
    color: var(--vf-black-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.refresh-btn {
    padding: 5px;
    background: none;
    border: none;
    color: var(--vf-black-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.refresh-btn:hover {
    color: var(--vf-blue-primary);
    transform: rotate(90deg);
}

.scrollable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 10px 10px;
}

.scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vf-blue-primary);
    font-size: 0.9rem;
    background: var(--vf-black-scroll-indicator-bg-alpha-95);
    border-radius: 50%;
    box-shadow: var(--vf-black-shadow-scroll-indicator);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.3s, visibility 0.3s;
    animation: bounce 2s infinite;
}

.sidebar-panel.can-scroll .scroll-indicator {
    opacity: 1;
    visibility: visible;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -6px); }
    60% { transform: translate(-50%, -3px); }
}

/* ==========================================================================
   09. CARTES MODULES
   ========================================================================== */

/* Joseph : liste continue ; les éléments non activés gardent un fond neutre et un bouton +. */
.module-card.catalog-option, .report-card.catalog-option {
    background-color: var(--vf-black-module-neutral-bg);
    border: 1px solid var(--vf-black-border-default);
}
.catalog-option .module-icon, .catalog-option .report-icon { opacity: .65; }
.catalog-option-label { display: block; font-size: .72rem; color: var(--vf-black-text-muted); margin-top: 3px; }
.catalog-add-link { display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; border-radius: 50%;
    color: var(--vf-black-text-muted); font-size: 1.2rem; text-decoration: none; }
.catalog-add-link:hover { color: var(--vf-blue-primary); }
.catalog-add-link:focus-visible { outline: 2px solid var(--vf-blue-primary); outline-offset: 3px; }
.catalog-loading { text-align: center; padding: 20px; color: var(--vf-black-text-muted); }
.catalog-option .module-info, .catalog-option .report-info { min-width: 0; }
.module-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-transparent);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-card);
    transition: all 0.2s ease;
}

.module-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.module-name {
    color: var(--vf-black-text-main);
    /* Joseph : libellés compacts (14 px avec la taille racine standard). */
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 700;
}

.module-date {
    color: var(--vf-black-text-muted);
    font-size: 0.75rem;
}

.module-score {
    font-size: 1.375rem;
    font-weight: 700;
}

.module-score.score-0-3 { color: var(--vf-red-score-0-3); }
.module-score.score-3-5 { color: var(--vf-yellow-score-3-5); }
.module-score.score-5-7 { color: var(--vf-green-score-5-7); }
.module-score.score-7-9 { color: var(--vf-blue-score-7-9); }
.module-score.score-9-10 { color: var(--vf-black-score-9-10); }

/* Domain maturity: publication status and summaries are provided by Core. */
.sidebar-maturity { --vf-blue-score-7-9:var(--vf-blue-primary); }
.sidebar-maturity .manager-panel { background:var(--vf-black-module-neutral-bg); }
.sidebar-maturity .manager-select { background:var(--vf-black-bg-surface); color:var(--vf-black-text-main); }
.sidebar-maturity .modules-panel .scrollable-list,
.sidebar-maturity .reports-panel .scrollable-list { gap:0; padding:0 12px 10px; }
.sidebar-maturity .domain-card { display:block; padding:0; border:0; border-bottom:1px solid var(--vf-black-border-default); border-radius:0; box-shadow:none; background:var(--vf-black-bg-surface); transition:none; }
.sidebar-maturity .domain-card:last-child { border-bottom:0; }
.sidebar-maturity .domain-overview { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:6px 10px; width:100%; padding:12px 2px; color:var(--vf-black-text-main); }
.sidebar-maturity .domain-toggle { border:0; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.sidebar-maturity .domain-toggle:hover { background:var(--vf-black-bg-app); }
.sidebar-maturity .domain-overview:focus-visible { outline:2px solid var(--vf-blue-primary); outline-offset:-2px; border-radius:5px; }
.sidebar-maturity .module-icon { width:30px; height:30px; }
.sidebar-maturity .module-info { min-width:0; gap:3px; }
.sidebar-maturity .module-name { font-weight:600; font-size:.8125rem; overflow-wrap:anywhere; }
.sidebar-maturity .domain-state { display:block; font-size:.6875rem; font-weight:400; color:var(--vf-black-text-muted); }
.sidebar-maturity .domain-state-finalized i { color:var(--vf-green-module-completed-accent); }
.sidebar-maturity .domain-actions { display:flex; align-items:center; gap:6px; }
.sidebar-maturity .module-score { font-size:1.0625rem; font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap; }
.sidebar-maturity .module-score small { font-size:.625rem; font-weight:400; margin-left:2px; color:var(--vf-black-text-muted); }
.sidebar-maturity .domain-chevron { font-size:.625rem; color:var(--vf-black-text-muted); }
.sidebar-maturity .domain-meter { grid-column:2/-1; display:block; height:4px; overflow:hidden; border-radius:4px; background:var(--vf-black-bg-app); }
.sidebar-maturity .domain-meter span { display:block; height:100%; border-radius:4px; background:currentColor; }
.sidebar-maturity .domain-meter.score-0-3 { color:var(--vf-red-score-0-3); }
.sidebar-maturity .domain-meter.score-3-5 { color:var(--vf-yellow-score-3-5); }
.sidebar-maturity .domain-meter.score-5-7 { color:var(--vf-green-score-5-7); }
.sidebar-maturity .domain-meter.score-7-9 { color:var(--vf-blue-score-7-9); }
.sidebar-maturity .domain-meter.score-9-10 { color:var(--vf-black-score-9-10); }
.sidebar-maturity .domain-card.catalog-option { border:1px solid var(--vf-black-border-default); background:var(--vf-black-module-neutral-bg); border-radius:7px; margin-top:6px; padding:0 7px; }
.sidebar-maturity .domain-quickwins { padding:10px 12px; margin:0 0 10px 40px; border-radius:6px; background:var(--vf-black-bg-app); color:var(--vf-black-text-main); font-size:.75rem; line-height:1.55; overflow-wrap:anywhere; }
.sidebar-maturity .domain-quickwins h3 { margin:0 0 6px; font-size:.75rem; font-weight:600; }
.sidebar-maturity .domain-quickwins p,.domain-risk-tooltip p { margin:0; white-space:pre-line; }
.domain-summary-reference { color:var(--vf-black-text-muted); font-size:.6875rem; margin-bottom:6px!important; }
.domain-risk-tooltip { position:fixed; z-index:1600; box-sizing:border-box; width:360px; max-width:calc(100vw - 24px); max-height:min(420px,65vh); overflow:auto; padding:14px 16px; border:1px solid var(--vf-black-border-default); border-radius:9px; background:var(--vf-black-bg-surface); color:var(--vf-black-text-main); box-shadow:var(--vf-black-shadow-panel); font-family:var(--font-ui); font-size:.8125rem; line-height:1.55; overflow-wrap:anywhere; }
.domain-risk-tooltip strong { display:block; font-size:.8125rem; margin-bottom:8px; }
.sidebar-maturity .report-card { padding:11px 2px; border:0; border-bottom:1px solid var(--vf-black-border-default); border-radius:0; background:var(--vf-black-bg-surface); box-shadow:none; }
.sidebar-maturity .report-card:last-child { border-bottom:0; }
.sidebar-maturity .report-card:hover { box-shadow:none; background:var(--vf-black-bg-app); }
.sidebar-maturity .report-card.catalog-option { border:1px solid var(--vf-black-border-default); border-radius:7px; background:var(--vf-black-module-neutral-bg); padding:10px 7px; margin-top:6px; }
.sidebar-maturity .report-info { min-width:0; gap:0; }
.sidebar-maturity .report-name { font-size:.8125rem; font-weight:600; overflow-wrap:anywhere; }
.sidebar-maturity .catalog-option-label { font-size:.6875rem; }
@media (pointer:coarse) { .sidebar-maturity .download-btn,.sidebar-maturity .catalog-add-link { min-width:44px; min-height:44px; } }

.module-completed {
    background-color: var(--vf-green-module-completed-bg);
    border: 1px solid var(--vf-green-module-completed-border);
    border-left: 5px solid var(--vf-green-module-completed-accent);
}

.module-neutral {
    background-color: var(--vf-black-module-neutral-bg);
    border: 1px solid var(--vf-black-border-default);
}

.module-disabled {
    background-color: var(--vf-black-module-disabled-bg);
    border: 1px solid var(--vf-black-border-default);
    opacity: 0.5;
    filter: grayscale(100%);
    pointer-events: none;
}

.module-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.icon-mod-generalcontext { background-image: var(--icon-mod-generalcontext-url); }
.icon-mod-iaas { background-image: var(--icon-mod-iaas-url); }
.icon-mod-recovery { background-image: var(--icon-mod-recovery-url); }
.icon-mod-noc { background-image: var(--icon-mod-noc-url); }
.icon-mod-support { background-image: var(--icon-mod-support-url); }
.icon-mod-soc { background-image: var(--icon-mod-soc-url); }
.icon-mod-gdpr { background-image: var(--icon-mod-gdpr-url); }

/* ==========================================================================
   10. CARTES RAPPORTS / DOCUMENTS
   ========================================================================== */

.report-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-card);
    transition: all 0.2s ease;
    cursor: help;
}

.report-card:hover {
    border-color: var(--vf-blue-primary);
    box-shadow: var(--vf-black-shadow-card-hover);
}

.report-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-image: var(--icon-report-url);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.report-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.report-name {
    color: var(--vf-black-text-main);
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 700;
}

.report-date {
    color: var(--vf-black-text-muted);
    font-size: 0.75rem;
}

.report-completed {
    background-color: var(--vf-green-module-completed-bg);
    border: 1px solid var(--vf-green-module-completed-border);
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: none;
    border: none;
    color: var(--vf-black-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.download-btn:hover {
    color: var(--vf-blue-primary);
    transform: translateY(-2px);
}

/* ==========================================================================
   11. ZONE CHAT / CONVERSATION
   ========================================================================== */

.chat-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-panel);
}

.chat-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px 20px 20px;
}

.job-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-card);
}

.job-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.job-dot-idle {
    background-color: var(--vf-red-status-idle);
    box-shadow: 0 0 0 2px var(--vf-red-job-ring-alpha-20);
}

.job-dot-running {
    background-color: var(--vf-yellow-status-running);
    box-shadow: 0 0 0 2px var(--vf-yellow-job-ring-alpha-20);
}

.job-dot-done {
    background-color: var(--vf-green-status-done);
    box-shadow: 0 0 0 2px var(--vf-green-job-ring-alpha-20);
}

.job-text,
.job-text-container {
    display: flex;
    flex-direction: column;
}

.job-status,
.job-status-title {
    color: var(--vf-black-text-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.job-status-info {
    font-size: 0.6rem;
}

.chat-history {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
}

.message-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 80%;
	padding: 10px 10px;
}

.message-wrapper.user { align-self: flex-end; }
.message-wrapper.bot { align-self: flex-start; gap: 18px; }

.bot-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--vf-blue-primary);
    font-size: 0.8rem;
    font-weight: 700;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 50%;
}

.message-bubble {
    padding: 12px 14px;
    /* Joseph : même taille de texte pour les échanges et la saisie. */
    font-size: 0.75rem;
    line-height: 1.5;
    min-width: 0;
    white-space: pre-wrap;
    border-radius: 17px;
}

.user .message-bubble {
    color: var(--vf-white-chat-user-text);
    background-color: var(--vf-blue-chat-user-bg);
    border-bottom-right-radius: 4px;
}

.bot .message-bubble {
    color: var(--vf-black-chat-bot-text);
    background-color: var(--vf-black-chat-bot-bg);
    border-bottom-left-radius: 4px;
}

/* Joseph : le reset global retire le retrait natif des listes. Réserver ici
   la place des puces/numéros dans la bulle, à chaque niveau de liste. */
.bot .message-bubble ul,
.bot .message-bubble ol {
    padding-inline-start: 1.75em;
    margin-block: 0.5em;
    list-style-position: outside;
    white-space: normal;
}

.bot .message-bubble li + li {
    margin-block-start: 0.35em;
}

.chat-input-area {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--vf-black-bg-surface);
    border-top: 1px solid var(--vf-black-border-default);
}

.chat-input {
    flex: 1;
    min-width: 0;
    padding: 12px 20px; 
    color: var(--vf-black-text-main);
    font-size: 0.75rem;
    font-family: var(--font-ui);
    line-height: 1.5;
    outline: none;
    background-color: var(--vf-black-bg-app);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 24px;
    transition: border-color 0.2s;
    
    resize: none; 
    overflow-y: hidden;
    min-height: 64px;
    max-height: 150px;
}

.chat-input::-webkit-scrollbar {
    width: 6px;
}
.chat-input::-webkit-scrollbar-thumb {
    background-color: var(--vf-black-border-default);
    border-radius: 10px;
}

.chat-input:focus {
    border-color: var(--vf-blue-primary);
}

.send-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--vf-white-main);
    font-size: 1.2rem;
    background-color: var(--vf-blue-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.send-btn:hover {
    background-color: var(--vf-blue-primary-hover);
    transform: scale(1.05);
}

/* L'avatar reste fixe ; seule la phase réelle du Core est animée à côté. */
.chat-bot-avatar {
    position: relative;
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-block: 7px;
}

.chat-bot-avatar .bot-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quatre points, un libellé traduit et le détail du traitement à la demande. */
.thinking-wrapper {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.thinking-wrapper .chat-bot-avatar {
    margin-block: 6px;
}

.thinking-bubble {
    position: relative;
    min-width: 0;
    max-width: 460px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--vf-black-chat-bot-text);
    overflow-wrap: anywhere;
    box-sizing: border-box;
    padding: 4px 12px;
    white-space: normal;
}

.thinking-line {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 10px;
}

.thinking-phase {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.thinking-details-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--vf-black-text-muted);
    background: transparent;
    cursor: pointer;
}

.thinking-details-toggle:hover {
    background: var(--vf-black-bg-app);
    color: var(--vf-blue-primary);
}

.thinking-details-toggle:focus-visible {
    outline: 2px solid var(--vf-blue-primary);
    outline-offset: 2px;
}

.thinking-details-toggle svg {
    transition: transform .2s;
}

.thinking-details-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.thinking-message {
    padding: 0 0 8px;
    color: var(--vf-black-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.thinking-progress {
    /* Valeur réelle lisible par les technologies d'assistance seulement. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.thinking-phase-track {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
}

.thinking-phase-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-phase-color);
    opacity: .45;
    transition: opacity .2s, transform .2s;
}

.thinking-phase-dot[data-active="true"] {
    opacity: 1;
    transform: scale(1.5);
    animation: thinking-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes thinking-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

.thinking-phase-dot[data-phase="initializing"] {
    --chat-phase-color: var(--vf-blue-main);
}
.thinking-phase-dot[data-phase="analyzing"] {
    --chat-phase-color: var(--vf-red-main);
}
.thinking-phase-dot[data-phase="generating"] {
    --chat-phase-color: var(--vf-yellow-main);
}
.thinking-phase-dot[data-phase="finalizing"] {
    --chat-phase-color: var(--vf-green-main);
}

@media (max-width: 480px) {
    .message-wrapper.bot { gap: 14px; }
    .chat-bot-avatar { flex-basis: 36px; width: 36px; height: 36px; }
}

@media (pointer: coarse) {
    .thinking-details-toggle { flex-basis: 44px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .thinking-phase-dot,
    .thinking-phase-dot[data-active="true"],
    .thinking-details-toggle svg {
        animation: none;
        transition: none;
    }
}


/* ==========================================================================
   12. PAGE DE LOGIN
   ========================================================================== */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: var(--vf-black-bg-app);
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 10px;
}

.login-card {
    padding: 20px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-header);
}

.login-header {
    margin-bottom: 30px;
    text-align: center;
}

.login-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 100px;
    margin: 0 auto 15px auto;
    color: var(--vf-blue-primary);
    font-size: 1.8rem;
	
    background-image: var(--brand-logo-url);
    background-repeat: no-repeat;
    background-position: center;
	background-size: contain;
}

.login-title {
    margin-bottom: 8px;
    color: var(--vf-black-text-main);
    font-size: 1.5rem;
    font-weight: 700;
	display: none;
}

.login-subtitle {
    color: var(--vf-black-text-muted);
    font-size: 0.95rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group label {
    color: var(--vf-black-text-main);
    font-size: 0.9rem;
    font-weight: 600;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--vf-black-text-muted);
}

.input-wrapper input {
    width: 100%;
    padding: 10px 10px 10px 40px;
    color: var(--vf-black-text-main);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrapper input:focus {
    border-color: var(--vf-blue-primary);
    box-shadow: 0 0 0 3px var(--vf-blue-focus-ring-alpha-10);
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    color: var(--vf-white-main);
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--vf-blue-primary);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.login-btn:hover {
    background-color: var(--vf-blue-primary-hover);
}

.login-btn:active {
    transform: scale(0.98);
}

.login-btn:disabled {
    background-color: var(--vf-blue-primary-hover);
    cursor: not-allowed;
    transform: none;
}

.login-error {
    margin-bottom: 20px;
    padding: 12px;
    color: var(--vf-red-module-warning-text);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    background-color: var(--vf-red-module-warning-bg);
    border: 1px solid var(--vf-red-module-warning-border);
    border-radius: 9px;
}

.forgot-password-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.forgot-password-link {
    background: none;
    border: none;
    color: var(--vf-blue-primary);
    font-size: 0.85rem;
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    padding: 2px 0;
}

.forgot-password-link:hover {
    color: var(--vf-blue-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   13. BOUTON BUG REPORT
   ========================================================================== */

.bug-report-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: var(--vf-black-shadow-bug);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.bug-report-btn:hover {
    background-color: var(--vf-black-border-transparent);
    box-shadow: var(--vf-black-shadow-bug-hover);
    transform: translateY(-3px) scale(1.05);
}

.bug-report-icon {
    width: 32px;
    height: 32px;
    background-image: var(--icon-bug-url);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   14. PAGE PROFIL
   ========================================================================== */

.profile-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 10px;
    overflow-y: auto;
}

.profile-top-bar {
    display: flex;
    align-items: center;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: var(--vf-black-text-muted);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.back-btn:hover {
    color: var(--vf-blue-primary);
    transform: translateX(-5px);
}

.profile-card {
    padding: 20px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-profile-card);
}

.profile-title {
    margin-bottom: 5px;
    color: var(--vf-black-text-main);
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-subtitle {
    margin-bottom: 30px;
    color: var(--vf-black-text-muted);
    font-size: 0.95rem;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-form-row {
    display: flex;
    gap: 20px;
}

.profile-form-row .profile-form-group {
    flex: 1;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-form-group label {
    color: var(--vf-black-text-main);
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-form-group input {
    padding: 10px 10px;
    color: var(--vf-black-text-main);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-form-group input:focus:not(:disabled) {
    border-color: var(--vf-blue-primary);
    box-shadow: 0 0 0 3px var(--vf-blue-focus-ring-alpha-10);
}

.profile-form-group input:disabled {
    color: var(--vf-black-text-muted);
    background-color: var(--vf-black-bg-app);
    border-color: var(--vf-black-border-default);
    cursor: not-allowed;
    opacity: 0.8;
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.save-profile-btn {
    padding: 12px 24px;
    color: var(--vf-white-main);
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--vf-blue-primary);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.save-profile-btn:hover {
    background-color: var(--vf-blue-primary-hover);
}

.save-profile-btn:active {
    transform: scale(0.98);
}

.change-password-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: var(--vf-black-text-main);
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--vf-black-bg-app);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
}

.change-password-btn i {
    color: var(--vf-black-text-muted);
    font-size: 1rem;
}

.change-password-btn:hover {
    color: var(--vf-blue-primary);
    background-color: var(--vf-black-bg-surface);
    border-color: var(--vf-blue-primary);
}

.change-password-btn:hover i {
    color: var(--vf-blue-primary);
}

.change-password-btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   15. GAME PANEL / MODALE DE PAUSE
   ========================================================================== */

.game-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: 85%;
    max-width: 800px;
    height: 70vh;
    overflow: hidden;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-game-panel);
    transform: translate(-50%, -50%);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.game-panel__bar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--vf-black-bg-app);
    border-bottom: 1px solid var(--vf-black-border-default);
}

.game-panel__title {
    color: var(--vf-black-text-main);
    font-size: 1.1rem;
    font-weight: 700;
}

.close-game-btn {
    color: var(--vf-black-text-muted);
    font-size: 1.2rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.close-game-btn:hover {
    color: var(--vf-red-close-game-hover);
    transform: scale(1.1);
}

.game-mount {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--vf-black-game-surface-text);
    background-color: var(--vf-black-game-surface-bg);
}

.game-mount .muted {
    opacity: 0.5;
    font-family: var(--font-mono);
}

/* ==========================================================================
   16. RESPONSIVE — TABLET / MOBILE
   ========================================================================== */

@media (max-width: 900px) {
    .main-layout {
        flex-direction: column;
        padding: 10px;
    }

    .mobile-menu-btn {
        display: block;
        color: var(--vf-black-text-main);
        font-size: 1.4rem;
        background: none;
        border: none;
        cursor: pointer;
    }

    .close-sidebar-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
        display: block;
        color: var(--vf-black-text-muted);
        font-size: 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
    }

    .mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 99;
        display: block;
        background-color: var(--vf-black-overlay-alpha-50);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
    }

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 100;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        padding: 20px 10px 10px 10px;
        overflow-y: auto;
        background-color: var(--vf-black-bg-app);
        border-radius: 0;
        box-shadow: var(--vf-black-shadow-sidebar-mobile);
        transition: left 0.3s ease-in-out;
    }

    .sidebar.open {
        left: 0;
    }

    .modules-panel,
    .reports-panel {
        max-height: none;
        flex: none;
    }

    .chat-section {
        height: 100%;
        border-radius: 9px;
    }

    .navbar {
        padding: 10px 10px;
    }

    .brand-logo {
        width: 220px;
        height: 72px;
    }

    .user-name,
    .user-time {
        display: none;
    }
}

@media (max-width: 600px) {
    .profile-form-row {
        flex-direction: column;
        gap: 20px;
    }

    .profile-card {
        padding: 20px;
    }

    .profile-page {
        padding: 10px;
    }

    .profile-form-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .save-profile-btn,
    .change-password-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   17. PAGE AGREEMENTS & IFRAME MODAL
   ========================================================================== */

.agreements-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}

.agreement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--vf-black-bg-app);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    transition: border-color 0.2s;
}

.agreement-item:hover {
    border-color: var(--vf-blue-primary);
}

.agreement-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--vf-black-text-main);
    font-size: 0.95rem;
    cursor: pointer;
}

.agreement-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--vf-blue-primary);
    cursor: pointer;
}

.required-asterisk {
    color: var(--vf-red-main);
    font-weight: bold;
}

.read-doc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: var(--vf-blue-primary);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--vf-blue-focus-ring-alpha-10);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.read-doc-btn:hover {
    background-color: var(--vf-blue-user-plan-border-alpha-20);
}

.doc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--vf-black-overlay-alpha-50);
    padding: 20px;
    animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.doc-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    height: 85vh;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 12px;
    box-shadow: var(--vf-black-shadow-game-panel);
    overflow: hidden;
}

.doc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--vf-black-bg-app);
    border-bottom: 1px solid var(--vf-black-border-default);
}

.doc-modal-header h3 {
    color: var(--vf-black-text-main);
    font-size: 1.1rem;
    font-weight: 700;
}

.doc-modal-close {
    color: var(--vf-black-text-muted);
    font-size: 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.doc-modal-close:hover {
    color: var(--vf-red-main);
    transform: scale(1.1);
}

.doc-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background-color: var(--vf-white-main);
}

/* ==========================================================================
   18. EDITEUR D'AVATAR (PROFILE)
   ========================================================================== */

.avatar-editor-container {
    padding: 15px;
    background-color: var(--vf-black-bg-app);
    border: 1px dashed var(--vf-black-border-default);
    border-radius: 9px;
    margin-bottom: 25px;
}

.avatar-view-mode {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-preview-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--vf-blue-primary);
    box-shadow: var(--vf-black-shadow-card);
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.avatar-hint {
    color: var(--vf-black-text-muted);
    font-size: 0.8rem;
}

.avatar-edit-mode {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.avatar-preview-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--vf-black-bg-surface);
    overflow: hidden;
}

.avatar-processing {
    color: var(--vf-blue-primary);
    font-size: 1.5rem;
}

.avatar-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
}

.avatar-crop-layout { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.avatar-crop-frame { width: min(256px, 100%); height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--vf-blue-primary); background: var(--vf-black-bg-surface); cursor: grab; touch-action: none; }
.avatar-crop-frame:active { cursor: grabbing; }
.avatar-crop-frame:focus-visible { outline: 3px solid var(--vf-blue-primary); outline-offset: 4px; }
.avatar-output-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar-zoom-controls { display: flex; align-items: center; gap: 12px; max-width: 460px; width: 100%; margin: auto; }
.avatar-zoom-controls input[type=range] { flex: 1; min-width: 40px; accent-color: var(--vf-blue-primary); }
.avatar-zoom-controls output { min-width: 48px; font-variant-numeric: tabular-nums; }
.avatar-fit-controls { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.avatar-fit-controls label { display: inline-flex; gap: 8px; align-items: center; }
.avatar-fit-controls input { accent-color: var(--vf-blue-primary); }
.avatar-error { color: var(--vf-red-main); font-size: .9rem; }

.thinking-text {
    animation: pulseText 1.5s infinite;
}

@keyframes pulseText {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}



/* ==========================================================================
   19. KPI / DASHBOARD CARDS (Colonne de droite)
   ========================================================================== */

/* Les cartes de KPI */
.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 15px;
    background-color: var(--vf-black-bg-surface);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
    box-shadow: var(--vf-black-shadow-card);
    transition: all 0.2s ease;
}

.kpi-card:hover {
    border-color: var(--vf-blue-primary);
    box-shadow: var(--vf-black-shadow-card-hover);
}

/* En-tête de la carte */
.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-title {
    color: var(--vf-black-text-muted);
    font-size: 0.80rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-icon {
    color: var(--vf-black-text-muted);
    font-size: 1.2rem;
    opacity: 0.7;
}

/* Valeurs numériques */
.kpi-value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.kpi-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vf-black-text-muted);
    margin-left: 4px;
}

/* Tendances (Évolutions) */
.kpi-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 4px;
}

.kpi-trend.positive { color: var(--vf-green-main); }
.kpi-trend.negative { color: var(--vf-red-main); }

/* Barre de progression optionnelle */
.kpi-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--vf-black-bg-app);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.kpi-progress-fill {
    height: 100%;
    background-color: var(--vf-blue-primary);
    border-radius: 4px;
    transition: width 0.5s ease;
}

@media (max-width: 900px) {
    .right-sidebar {
        display: none !important; /* Masqué sur tablette/mobile pour laisser la place au chat */
    }
}

.panel-action-btn {
    padding: 5px;
    background: none;
    border: none;
    color: var(--vf-black-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.panel-action-btn:hover {
    color: var(--vf-blue-primary);
    transform: scale(1.15); /* Petit effet de pop au survol */
}

/* =========================================
   20. SÉLECTEUR MANAGER
   ========================================= */

.manager-panel {
    padding: 15px;
    background-color: var(--vf-black-module-neutral-bg); 
    border-bottom: 1px solid var(--vf-black-border-default);
}

.manager-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vf-black-text-muted);
    margin-bottom: 10px;
    display: block;
    letter-spacing: 0.05em;
}

.manager-select-wrapper {
    position: relative;
    width: 100%;
}

.manager-select {
    width: 100%;
    padding: 10px 35px 10px 15px; 
    border-radius: 8px;
    border: 1px solid var(--vf-black-border-default);
    background-color: var(--vf-black-bg-surface);
    color: var(--vf-black-text-main);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    
    transition: all 0.2s ease;
}

/* Effets interactifs */
.manager-select:hover {
    border-color: var(--vf-blue-primary);
}

.manager-select:focus {
    outline: none;
    border-color: var(--vf-blue-primary);
    box-shadow: 0 0 0 3px var(--vf-blue-focus-ring-alpha-10); 
}

.manager-select-wrapper .select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vf-black-text-muted);
    pointer-events: none;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}

.manager-select-wrapper:hover .select-icon {
    color: var(--vf-blue-primary);
}

/* Joseph (2026-10-05) : repli personnel des dashboards et sélecteur de jeux. */
.kpi-toggle { width: 100%; padding: 0; border: 0; background: transparent;
    color: var(--vf-black-text-muted); text-align: left; cursor: pointer; gap: 10px; font: inherit; }
.kpi-toggle:focus-visible { outline: 2px solid var(--vf-blue-primary); outline-offset: 5px; }
.kpi-toggle:disabled { cursor: wait; }
.kpi-card--collapsed { gap: 0; min-height: 0; }
.kpi-card [hidden], .game-frame[hidden] { display: none !important; }
.game-panel { width: min(800px, calc(100vw - 24px)); height: min(740px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); }
.game-panel__bar { flex-shrink: 0; justify-content: space-between; }
.game-panel__title { font-size: 1rem; }
.game-selector { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-shrink: 0; font-size: 0.875rem; }
.game-selector select { font: inherit; padding: 7px 10px; background: var(--vf-black-bg-app);
    color: var(--vf-black-text-main); border: 1px solid var(--vf-black-border-default); border-radius: 8px; }
.game-frames { flex: 1; min-height: 0; display: flex; }
.game-frame { flex: 1; width: 100%; height: 100%; min-width: 0; border: 0; }
.game-error { margin: 0 16px 8px; font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .game-panel { animation: none; } }

/* CIVO CATALOGUE — BEGIN (generated by Manager) */
/* Joseph : mêmes cartes, icônes par élément ; clair/sombre obligatoires. */
.module-icon.catalog-icon-domains-gen-context { background-image: url("/images/domains/generalcontextlight_icon.png?v=7a9383c0b469"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-gen-context { background-image: url("/images/domains/generalcontextdark_icon.png?v=5db01b285ec1"); }
.module-icon.catalog-icon-domains-inf-iaas { background-image: url("/images/domains/iaaslight_icon.png?v=9ade42915652"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-inf-iaas { background-image: url("/images/domains/iaasdark_icon.png?v=1b0bd2387988"); }
.module-icon.catalog-icon-domains-inf-bcpdrp { background-image: url("/images/domains/bcpdrplight_icon.png?v=e132b1bcd4e7"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-inf-bcpdrp { background-image: url("/images/domains/bcpdrpdark_icon.png?v=694e811f498a"); }
.module-icon.catalog-icon-domains-inf-noc { background-image: url("/images/domains/noclight_icon.png?v=c15f710ab855"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-inf-noc { background-image: url("/images/domains/nocdark_icon.png?v=0a037190c195"); }
.module-icon.catalog-icon-domains-wrkspc-itservicedesk { background-image: url("/images/domains/itservicedesklight_icon.png?v=7d6990e35d76"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-wrkspc-itservicedesk { background-image: url("/images/domains/itservicedeskdark_icon.png?v=2aa2f8acbae4"); }
.module-icon.catalog-icon-domains-secconf-soc { background-image: url("/images/domains/soclight_icon.png?v=db55d29cab0b"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-secconf-soc { background-image: url("/images/domains/socdark_icon.png?v=42611bbe1884"); }
.module-icon.catalog-icon-domains-secconf-rgpd { background-image: url("/images/domains/gdprlight_icon.png?v=df79214db9bc"); }
[data-theme="dark"] .module-icon.catalog-icon-domains-secconf-rgpd { background-image: url("/images/domains/gdprdark_icon.png?v=7654720af9ad"); }
.report-icon.catalog-icon-reports-execfr { background-image: url("/images/ui/reportexeclight_icon.png?v=ddd31ad9e7d2"); }
[data-theme="dark"] .report-icon.catalog-icon-reports-execfr { background-image: url("/images/ui/reportexecdark_icon.png?v=f3f4ddceb018"); }
.report-icon.catalog-icon-reports-roadmapfr { background-image: url("/images/ui/reportroadmaplight_icon.png?v=e93886a991b3"); }
[data-theme="dark"] .report-icon.catalog-icon-reports-roadmapfr { background-image: url("/images/ui/reportroadmapdark_icon.png?v=62d06d5b7d56"); }
.report-icon.catalog-icon-reports-dashboardsfr { background-image: url("/images/ui/reportdashboardslight_icon.png?v=8928a2ef8592"); }
[data-theme="dark"] .report-icon.catalog-icon-reports-dashboardsfr { background-image: url("/images/ui/reportdashboardsdark_icon.png?v=709468933906"); }
.report-icon.catalog-icon-reports-quickwinsfr { background-image: url("/images/ui/reportquickwinslight_icon.png?v=b806ef59f78c"); }
[data-theme="dark"] .report-icon.catalog-icon-reports-quickwinsfr { background-image: url("/images/ui/reportquickwinsdark_icon.png?v=f17d6f805965"); }
.report-icon.catalog-icon-reports-synthesefr { background-image: url("/images/ui/reportsyntheselight_icon.png?v=dc0e3916629d"); }
[data-theme="dark"] .report-icon.catalog-icon-reports-synthesefr { background-image: url("/images/ui/reportsynthesedark_icon.png?v=b39e1ce688a4"); }
.report-icon.catalog-icon-reports-adminfr { background-image: url("/images/ui/reportadminlight_icon.png?v=a5ecd75a037a"); }
[data-theme="dark"] .report-icon.catalog-icon-reports-adminfr { background-image: url("/images/ui/reportadmindark_icon.png?v=10669fe3e931"); }
/* CIVO CATALOGUE — END */
/* Joseph : les iframes Core chargent ce même fichier. Garder les règles
   limitées aux dashboards afin de préserver le chat et les panneaux. */
html body.vf-dashboard-document { margin: 0; padding: 0; background: var(--vf-black-bg-surface); }
.vf-dashboard-indicators, .vf-dashboard-indicators * { box-sizing: border-box; }
.vf-dashboard-indicators {
    width: 100%; min-width: 0; padding: 2px 2px 6px;
    color: var(--vf-black-text-main); background: transparent;
    font: 0.8125rem/1.45 var(--font-ui); font-variant-numeric: tabular-nums;
}
.vf-dashboard-indicators [data-role="indicators"] { display: grid; gap: 24px; }
.vf-dashboard-indicators .vfi-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.vf-dashboard-indicators .vfi-label { font-weight: 600; }
.vf-dashboard-indicators .vfi-value { font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.vf-dashboard-indicators .vfi-period { color: var(--vf-black-text-muted); margin-top: 2px; }
.vf-dashboard-indicators .vfi-track { height: 9px; margin-top: 10px; background: var(--vf-black-border-default); border-radius: 8px; overflow: hidden; }
.vf-dashboard-indicators .vfi-fill { height: 100%; border-radius: inherit; }
.vf-dashboard-indicators .vfi-references { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.vf-dashboard-indicators .vfi-reference { border-top: 3px solid var(--vfi-reference-color); padding-top: 4px; text-align: center; color: var(--vf-black-text-muted); font-size: 0.625rem; white-space: nowrap; }
.vf-dashboard-indicators .vfi-consequence { margin: 12px 0 0; font-size: 0.9375rem; font-weight: 650; }
.vf-dashboard-indicators .vfi-history { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--vf-black-border-default); }
.vf-dashboard-indicators .vfi-history-title { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.vf-dashboard-indicators .vfi-chart-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.vf-dashboard-indicators .vfi-chart-button { font: inherit; font-size: 0.75rem; cursor: pointer; padding: 5px 10px; border: 1px solid var(--vf-black-border-default); border-radius: 6px; color: var(--vf-black-text-muted); background: var(--vf-black-bg-surface); }
.vf-dashboard-indicators .vfi-chart-button[aria-pressed="true"] { color: var(--vf-blue-primary); background: var(--vf-blue-user-plan-bg-alpha-10); border-color: var(--vf-blue-primary); }
.vf-dashboard-indicators .vfi-chart-button:focus-visible { outline: 2px solid var(--vf-blue-primary); outline-offset: 2px; }
.vf-dashboard-indicators .vfi-chart-button:disabled { opacity: .5; cursor: default; }
.vf-dashboard-indicators .vfi-bar:focus { outline: none; stroke: var(--vf-blue-primary); stroke-width: 2; }
.vf-dashboard-indicators .vfi-month-value { min-height: 19px; margin: 6px 0 8px; color: var(--vf-black-text-muted); font-size: 0.75rem; }
.vf-dashboard-indicators .vfi-history-chart { display: block; width: 100%; height: auto; overflow: visible; }
.vf-dashboard-indicators .vfi-axis { fill: var(--vf-black-text-muted); font: 0.625rem var(--font-ui); }
.vf-dashboard-indicators .vfi-grid { stroke: var(--vf-black-border-default); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; }
.vf-dashboard-indicators .vfi-series { stroke: var(--vf-blue-primary); stroke-width: 2; }
.vf-dashboard-indicators .vfi-point { stroke: var(--vf-black-bg-surface); stroke-width: 1.5; }
.vf-dashboard-indicators .vfi-point:focus { outline: none; stroke: var(--vf-blue-primary); stroke-width: 3; }

/* Joseph 2026-10-07: shared dashboard semantics, full palette and compact controls. */
.kpi-toolbar { display:flex; align-items:center; gap:8px; min-height:32px; }
/* The list scrolls; cards and their toolbar must never shrink into one another. */
.dashboard-panel > .scrollable-list { min-height:0; }
.dashboard-panel > .scrollable-list > .kpi-card { flex:0 0 auto; }
.kpi-toolbar { flex-shrink:0; }
.kpi-toolbar .kpi-toggle { flex:1; min-width:0; min-height:32px; margin:0; align-items:center; line-height:1.25; }
.kpi-toolbar .kpi-title { margin:0; padding:0; line-height:1.25; }
.kpi-hide { display:grid; place-items:center; width:28px; height:32px; flex-shrink:0; padding:0; border:0; background:transparent; color:var(--vf-black-text-muted); font-size:1.3125rem; cursor:pointer; }
.kpi-hide:hover { color:var(--vf-red-main); }
.kpi-hide:focus-visible { outline:2px solid var(--vf-blue-primary); border-radius:4px; }
.kpi-card--collapsed { padding-block:8px; }
.vf-dashboard-indicators .vfi-history-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vf-dashboard-indicators .vfi-chart-controls { flex-wrap:nowrap; margin:0; gap:3px; }
.vf-dashboard-indicators .vfi-chart-button { display:grid; place-items:center; padding:5px; width:30px; height:30px; }
.vf-dashboard-indicators .vfi-consequence--risk,
.vf-dashboard-indicators .vfi-consequence--clear { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:8px; font-size:1.375rem; font-weight:750; line-height:1.3; }
.vf-dashboard-indicators .vfi-consequence--risk { color:var(--vf-red-main); background:var(--vf-red-job-ring-alpha-20); }
.vf-dashboard-indicators .vfi-consequence--clear { color:var(--vf-green-main); background:var(--vf-green-job-ring-alpha-20); }
.vf-dashboard-indicators .vfi-consequence svg { width:24px; height:24px; flex-shrink:0; }
.vf-dashboard-widgets, .vf-dashboard-widgets * { box-sizing:border-box; }
.vf-dashboard-widgets { --vfw-color:var(--vf-blue-primary); display:grid; align-content:start; gap:16px; padding:2px; font:0.8125rem/1.45 var(--font-ui); color:var(--vf-black-text-main); max-height:520px; overflow:auto; scrollbar-width:thin; }
.vf-dashboard-widgets.vf-dashboard-maturity { max-height:none; overflow:visible; }
.vf-dashboard-widgets [hidden] { display:none !important; }
.vf-dashboard-widgets .initial { --vfw-color:var(--vf-red-score-0-3); }
.vf-dashboard-widgets .basic { --vfw-color:var(--vf-yellow-score-3-5); }
.vf-dashboard-widgets .standard { --vfw-color:var(--vf-green-score-5-7); }
.vf-dashboard-widgets .managed { --vfw-color:var(--vf-blue-score-7-9); }
.vf-dashboard-widgets .excellence { --vfw-color:var(--vf-black-score-9-10); }
.vf-dashboard-widgets .done, .vf-dashboard-widgets .criticality-comfort { --vfw-color:var(--vf-green-status-done); }
.vf-dashboard-widgets .running, .vf-dashboard-widgets .open, .vf-dashboard-widgets .criticality-low { --vfw-color:var(--vf-blue-primary); }
.vf-dashboard-widgets .planned, .vf-dashboard-widgets .criticality-medium { --vfw-color:var(--vf-yellow-main); }
.vf-dashboard-widgets .blocked, .vf-dashboard-widgets .criticality-critical { --vfw-color:var(--vf-red-main); }
.vf-dashboard-widgets .criticality-high { --vfw-color:var(--vf-yellow-dashboard-orange); }
.vf-dashboard-widgets .unknown, .vf-dashboard-widgets .neutral, .vf-dashboard-widgets .criticality-unknown { --vfw-color:var(--vf-black-text-muted); }
.vfw-row { display:grid; gap:6px; min-width:0; }
.vfw-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.vfw-top>strong { flex-shrink:0; }
.vfw-progress-top { align-items:center; }
.vfw-progress-meta { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.vfw-status { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:1.125rem; line-height:1; color:var(--vfw-color); border-radius:50%; position:relative; }
.vfw-status:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.vfw-status:hover::after, .vfw-status:focus-visible::after { content:attr(aria-label); position:absolute; right:0; bottom:calc(100% + 5px); z-index:2; white-space:nowrap; padding:5px 8px; font:0.75rem var(--font-ui); background:var(--vf-black-bg-surface); color:var(--vf-black-text-main); border:1px solid var(--vf-black-border-default); border-radius:6px; box-shadow:var(--vf-black-shadow-card); }
.vfw-track { position:relative; height:8px; background:var(--vf-black-border-default); border-radius:8px; }
.vfw-fill { display:block; height:100%; border-radius:inherit; background:var(--vfw-color); }
.vfw-target { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--vf-black-text-muted); transform:translateX(-2px); z-index:1; }
.vfw-note { color:var(--vf-black-text-muted); font-size:0.75rem; margin:0; }
.vfw-score, .vfw-value { color:var(--vfw-color); }
.vfw-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.vfw-tile { display:grid; gap:5px; padding:12px; background:var(--vf-black-bg-app); border:1px solid var(--vf-black-border-default); border-radius:9px; }
.vfw-value { font-size:1.6875rem; }
.vfw-ids { margin:3px 0 0; padding:0; list-style:none; font-size:0.75rem; overflow-wrap:anywhere; }
.vfw-ids li { margin-block:4px; }
.vfw-qw-toggle, .vfw-domain-toggle { border:0; padding:3px 0; background:transparent; color:inherit; font:inherit; cursor:pointer; min-height:28px; text-align:left; }
.vfw-qw-toggle { display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.vfw-qw-toggle:hover, .vfw-domain-toggle:hover { color:var(--vf-blue-primary); }
.vfw-qw-toggle:focus-visible, .vfw-domain-toggle:focus-visible { outline:2px solid var(--vf-blue-primary); outline-offset:2px; border-radius:3px; }
.vfw-chevron { display:inline-block; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); flex-shrink:0; margin:0 3px 3px; }
[aria-expanded="true"] > .vfw-chevron { transform:rotate(225deg); margin-top:5px; }
.vfw-ids .vfw-description { padding:4px 0 6px 10px; border-left:2px solid var(--vf-black-border-default); }
.vf-dashboard-domain-breakdown { container-type:inline-size; }
.vfw-domain-chart { display:grid; grid-template-columns:134px minmax(0,1fr); align-items:start; gap:18px; }
.vfw-donut { width:134px; height:134px; border-radius:50%; position:relative; justify-self:center; }
.vfw-donut::after { content:""; position:absolute; inset:28px; border-radius:50%; background:var(--vf-black-bg-surface); }
.vfw-total { position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center; font-size:1.6875rem; }
.vfw-total small { font-size:0.6875rem; color:var(--vf-black-text-muted); }
.vfw-domain-legend { display:grid; gap:7px; min-width:0; }
.vfw-domain-toggle { display:grid; grid-template-columns:8px minmax(0,1fr) auto 10px; align-items:center; gap:8px; width:100%; }
.vfw-domain-dot { width:8px; height:8px; border-radius:50%; }
.vfw-domain-label { overflow-wrap:anywhere; }
.vfw-domain-items { margin:3px 0 6px 16px; }
@container (max-width:360px) { .vfw-domain-chart { grid-template-columns:minmax(0,1fr); gap:14px; } }
.vfw-domain { margin:0 0 8px; font-size:0.8125rem; }
.vfw-group { display:grid; gap:12px; }
.vfw-description { margin:0; font-size:0.75rem; overflow-wrap:anywhere; }

/* Macro-planning: share the full VITEFIX palette with the other dashboards. */
.vfp-controls { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.vfp-controls select { min-width:0; max-width:100%; flex:1 1 120px; border:1px solid var(--vf-black-border-default); border-radius:6px; background:var(--vf-black-bg-surface); color:var(--vf-black-text-main); padding:5px; font:inherit; font-size:0.6875rem; }
.vfp-body { display:grid; gap:10px; }
.vfp-axis { display:flex; justify-content:space-between; color:var(--vf-black-text-muted); font-size:0.6875rem; }
.vfp-row summary { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:0.6875rem; cursor:pointer; min-height:28px; }
.vfp-row summary strong { color:var(--vf-blue-primary); }
.vfp-row details p { margin:4px 0; }
.vfp-track { height:14px; position:relative; background:var(--vf-black-bg-app); border-radius:4px; }
.vfp-bar { position:absolute; height:100%; background:var(--vf-blue-primary); opacity:.6; min-width:3px; border-radius:3px; overflow:hidden; }
.vfp-fill { display:block; height:100%; background:var(--vf-green-main); }
.vfp-late .vfp-bar { background:var(--vf-red-main); }
.vfp-today { position:absolute; height:20px; top:-3px; border-left:2px dashed var(--vf-red-main); transform:translateX(-1px); z-index:1; pointer-events:none; }
.vfp-warning { font-size:0.6875rem; color:var(--vf-red-main); }
[data-theme="dark"] { --vf-black-score-9-10:var(--vf-white-main); }

.chat-attach-btn { display:flex; align-items:center; justify-content:center; width:48px; height:64px; flex-shrink:0; border:0; border-radius:50%; background:transparent; color:var(--vf-blue-primary); padding:8px; font-size:1.625rem; cursor:pointer; align-self:center; transition:transform .2s,color .2s; }
.chat-attach-btn:hover:not(:disabled) { color:var(--vf-blue-primary-hover); transform:scale(1.05); }
.chat-attach-btn:focus-visible { outline:2px solid var(--vf-blue-primary); outline-offset:2px; }
.chat-attach-btn:disabled { opacity:.45; cursor:default; }
.chat-file-chip { display:flex; align-items:center; gap:8px; margin:8px 20px 0; padding:6px 10px; border:1px solid var(--vf-black-border-default); border-radius:8px; font-size:0.8125rem; }
.chat-file-chip span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-file-chip button { background:transparent; border:0; color:var(--vf-black-text-muted); font-size:1.25rem; cursor:pointer; }
.chat-attachment { font-size:0.75rem; margin-bottom:5px; overflow-wrap:anywhere; }
/* Shared HTML / Office calendar and indicator components. */
.vfp-body { display:block; }
.vfp-legend { display:flex;flex-wrap:wrap;gap:8px 14px;font-size:0.6875rem;margin-bottom:16px;color:var(--vf-black-text-main); }
.vfp-legend span { display:inline-flex;align-items:center;gap:5px; }
.vfp-legend i { width:8px;height:8px;border-radius:2px;background:var(--vf-blue-primary); }
.vfp-legend i.progress { background:var(--vf-green-main); }
.vfp-legend i.late { background:var(--vf-red-main); }
.vfp-legend i.today { width:0;height:13px;border-left:2px dashed var(--vf-red-main);border-radius:0;background:transparent; }
.vfp-gantt,.vfp-tracking { position:relative; }
.vfp-gantt-row { display:grid;grid-template-columns:minmax(300px,38%) minmax(0,1fr);gap:12px;align-items:center;min-height:50px; }
.vfp-header { min-height:60px;margin-bottom:8px; }
.vfp-axis { display:block;position:relative;height:60px;font-size:0.6875rem; }
.vfp-year,.vfp-month { position:absolute;display:block;text-align:center;white-space:nowrap; }
.vfp-year { top:0;border-bottom:1px solid var(--vf-black-border-default);padding-bottom:4px;color:var(--vf-black-text-main); }
.vfp-month { top:28px; }
.vfp-axis-title { font-size:0.6875rem;color:var(--vf-black-text-muted); }
.vfp-group { margin:20px 0 9px!important;font-size:0.875rem!important;font-weight:700!important;color:var(--vf-black-text-main)!important; }
.vfp-row { margin-bottom:18px; }
.vfp-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px; }
.vfp-id { border:0;background:transparent;color:var(--vf-blue-primary);padding:0;font:inherit;font-weight:600;font-size:0.75rem;cursor:pointer;overflow-wrap:anywhere;text-align:left; }
.vfp-state { display:inline-flex;align-items:center;gap:5px;font-size:0.75rem;white-space:nowrap;color:var(--vf-black-text-main); }
.vfp-state svg { flex-shrink:0; }
.vfp-dates { display:inline-block;font-size:0.6875rem;color:var(--vf-black-text-muted);white-space:nowrap;flex-shrink:0; }
.vfp-info { min-width:0; }
.vfp-head .vfp-id { min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.vfp-timeline { display:flex;align-items:center;gap:10px; }
.vfp-timeline .vfp-track { flex:1;min-width:0; }
.vfp-timeline .vfp-state { font-size:0.6875rem;flex:0 0 110px;justify-content:flex-end; }
.vfp-tracking .vfp-axis { margin-right:120px; }
.vf-dashboard { container-type:inline-size; }
@container (max-width:600px) {
  .vfp-gantt-row { grid-template-columns:minmax(0,1fr);gap:3px;padding-bottom:14px; }
  .vfp-header .vfp-axis-title { display:none; }
}
.kpi-copy { display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border:0;background:transparent;color:var(--vf-blue-primary);cursor:pointer;transition:transform .15s; }
.kpi-copy:hover { transform:scale(1.12); }
.kpi-copy:disabled { opacity:.5;cursor:wait; }
.kpi-copy-feedback { margin:0 12px 8px;font-size:0.6875rem;color:var(--vf-black-text-main); }
.vfp-track { height:15px;background:var(--vf-black-bg-app);position:relative; }
.vfp-gridline { position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--vf-black-border-default); }
.vfp-bar { opacity:1;background:color-mix(in srgb,var(--vf-blue-primary) 27%,transparent); }
.vfp-overdue { background:color-mix(in srgb,var(--vf-red-main) 35%,transparent); }
.vfp-fill { background:var(--vf-green-main); }
/* The date label stays inside the timeline; its pointer keeps the exact position. */
.vfp-axis.vfp-axis-with-today { height:86px; }
.vfg-axis.vfp-axis-with-today { height:58px; }
.vfp-today-rail { position:absolute; bottom:0; left:0; right:0; height:29px; color:var(--vf-red-main); }
.vfp-today-label { position:absolute; top:0; box-sizing:border-box; max-width:100%; padding:2px 6px; border:1px solid currentColor; border-radius:4px; background:var(--vf-black-bg-surface); color:var(--vf-red-main); font-size:0.6875rem; font-weight:700; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vfp-today-pointer { position:absolute; top:23px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--vf-red-main); transform:translateX(-50%); }
.vfg-track .vfp-today { top:0; bottom:8px; height:auto; }
.vfg-compact .vfg-track .vfp-today { bottom:12px; }
.vfp-progress-label { position:absolute;top:19px;left:0;right:0;text-align:center;font-size:0.6875rem;color:var(--vf-black-text-main); }
.vfp-links { position:absolute;inset:0;pointer-events:none;overflow:visible; }
.vfp-detail { margin:10px 0 16px;padding:12px;border:1px solid var(--vf-black-border-default);border-radius:8px;background:var(--vf-black-bg-surface);font-size:0.75rem; }
.vfp-detail p { margin:6px 0 0; }
/* Density is shared by live dashboards and transparent Office images. */
.vfp-gantt-row { grid-template-columns:minmax(270px,calc(100% - var(--vfp-timeline-width,62%) - 12px)) minmax(0,1fr); }
.vfp-tracking .vfp-track { flex:0 1 var(--vfp-timeline-width,calc(100% - 120px)); }
.vfp-tracking .vfp-axis { width:var(--vfp-timeline-width,calc(100% - 120px)); margin-right:0; }
.vf-dashboard[data-compact="true"] .vfp-group { margin:10px 0 5px!important; }
.vf-dashboard[data-compact="true"] { gap:8px; }
.vf-dashboard[data-compact="true"] .vfp-row { margin-bottom:8px; }
.vf-dashboard[data-compact="true"] .vfp-gantt-row { min-height:38px; }
.vf-dashboard[data-compact="true"] .vfp-head { margin-bottom:3px; }
.vf-dashboard[data-compact="true"] .vfp-legend { margin-bottom:8px; gap:4px 10px; }
.vf-dashboard[data-compact="true"] .vfw-body,
.vf-dashboard[data-compact="true"] .vfw-group { gap:6px; }
.vf-dashboard[data-compact="true"] .vfw-row { gap:3px; margin-block:3px; }
.vf-dashboard[data-compact="true"] .vfw-domain { margin-bottom:4px; }
.vf-dashboard[data-compact="true"] .vfw-tile { padding:7px; }
.vf-dashboard[data-compact="true"] .vfw-ids li { margin-block:1px; }
.vf-dashboard[data-compact="true"] .vfw-qw-toggle { min-height:24px; padding-block:1px; }
.vf-dashboard[data-compact="true"] .vfw-track { height:6px; }
.vf-dashboard[data-compact="true"] .vfe-title { margin-bottom:10px; }

/* Calendar action lists: shared Web/Office palette and compact layout. */
.vf-dashboard-action-window { padding:2px; min-width:0; color:var(--vf-black-text-main); font:0.8125rem/1.4 var(--font-ui,system-ui,sans-serif); background:transparent; }
.vfa-heading { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-bottom:14px; }
.vfa-range { font-size:0.6875rem; color:var(--vf-black-text-muted); font-variant-numeric:tabular-nums; }
.vfa-count { font-size:0.6875rem; color:var(--vf-black-text-muted); margin-left:auto; }
.vfa-period-controls { display:flex; gap:4px; margin-left:auto; }
.vfa-period { display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:4px 6px; border:1px solid transparent; border-radius:6px; color:var(--vf-black-text-muted); background:transparent; font:600 0.6875rem var(--font-ui,system-ui,sans-serif); cursor:pointer; }
.vfa-period[aria-pressed="true"] { color:var(--vf-blue-primary); border-color:var(--vf-blue-primary); background:var(--vf-black-bg-surface); }
.vfa-period:hover { color:var(--vf-blue-primary); transform:scale(1.05); }
.vfa-period:focus-visible,.vfa-id:focus-visible { outline:2px solid var(--vf-blue-primary); outline-offset:2px; }
.vfa-list { display:grid; gap:15px; }
.vfa-item { min-width:0; border-left:3px solid var(--vf-blue-primary); padding-left:10px; }
.vfa-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; }
.vfa-id { border:0; padding:3px 0; background:transparent; color:var(--vf-blue-primary); font:700 0.8125rem var(--font-ui,system-ui,sans-serif); cursor:pointer; overflow-wrap:anywhere; text-align:left; }
.vfa-date { font-size:0.6875rem; font-variant-numeric:tabular-nums; color:var(--vf-black-text-main); white-space:nowrap; }
.vfa-domain { color:var(--vf-black-text-main); font-size:0.75rem; }
.vfa-progress { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:0.6875rem; }
.vfa-progress progress { appearance:none; display:block; flex:1; min-width:0; height:5px; overflow:hidden; border:0; border-radius:5px; background:var(--vf-black-border-default); --vfa-fill:var(--vf-blue-primary); }
.vfa-progress progress[data-complete="true"] { --vfa-fill:var(--vf-green-main); }
.vfa-progress progress::-webkit-progress-bar { background:var(--vf-black-border-default); }
.vfa-progress progress::-webkit-progress-value { background:var(--vfa-fill); }
.vfa-progress progress::-moz-progress-bar { background:var(--vfa-fill); }
.vfa-details { font-size:0.75rem; }
.vfa-details p { margin:5px 0; }
.vfa-details ul { margin:5px 0; padding-left:18px; }
.vfa-author,.vfa-closed { font-size:0.6875rem; color:var(--vf-black-text-muted); }
.vfa-empty { text-align:center; color:var(--vf-black-text-muted); padding:18px 8px; }
.vf-dashboard[data-compact="true"] .vfa-list { gap:7px; }
.vf-dashboard[data-compact="true"] .vfa-heading { margin-bottom:8px; }
.vf-dashboard[data-compact="true"] .vfa-id { padding:0; font-size:0.75rem; }
.vf-dashboard[data-compact="true"] .vfa-domain { font-size:0.6875rem; }

.kpi-copy[aria-pressed="true"] { background:var(--vf-blue-focus-ring-alpha-10); border-radius:5px; }
@container (max-width:580px) { .vfp-gantt-row { grid-template-columns:minmax(0,1fr); } }
.vfv-body svg { display:block;width:100%;overflow:visible; }
.vfv-body svg text { fill:var(--vf-black-text-main);font:0.75rem var(--font-ui,Arial,sans-serif); }
.vfv-value { display:block;font-size:1.875rem;margin:10px 0; }
.vfv-score-values { display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; }
.vfv-score-values span { display:block;font-size:0.75rem; }
.vfv-score-values strong { display:block;font-size:1.625rem; }

.login-sso-btn { display:block; margin-top:16px; text-align:center; text-decoration:none; }

/* Shared presentation: WebZone / Core Office images. Palette stays in style.css. */
.vfx-is-extended{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;display:block!important}
.vfx-overview{min-width:0;display:contents}.vfx-is-extended .vfx-overview{display:block;margin:0 0 20px;max-height:none;overflow:visible}
.vfx-is-extended .vfx-overview:empty{display:none}
.vfx-overview[hidden]{display:none!important}
.vfx-controls{font:0.8125rem/1.4 var(--font-ui);margin-bottom:18px;color:var(--vf-black-text-main)}
.vfx-controls[hidden],.vfx-detail-view[hidden]{display:none!important}
.vfx-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:8px 0}
.vfx-field{display:grid;gap:4px}.vfx-field select,.vfx-field input{font:inherit;color:var(--vf-black-text-main);background:var(--vf-black-bg-app);border:1px solid var(--vf-black-border-default);border-radius:7px;padding:7px 10px;max-width:280px;color-scheme:light}
[data-theme=dark] .vfx-field input{color-scheme:dark}
.vfx-score-chart,.vfx-distribution{display:grid;gap:18px;margin:18px 0 24px}
.vfx-score-chart .initial{--vfw-color:var(--vf-red-score-0-3)}.vfx-score-chart .basic{--vfw-color:var(--vf-yellow-score-3-5)}.vfx-score-chart .standard{--vfw-color:var(--vf-green-score-5-7)}.vfx-score-chart .managed{--vfw-color:var(--vf-blue-score-7-9)}.vfx-score-chart .excellence{--vfw-color:var(--vf-black-score-9-10)}
.vfx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.vfx-domain{padding:10px 0;border-bottom:1px solid var(--vf-black-border-default)}.vfx-domain>summary{cursor:pointer;font-weight:600}
.vfx-is-extended.vf-dashboard-indicators [data-role=indicators]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.vfx-is-extended .vfi-history-chart{width:100%;max-height:420px}
.vfx-settings summary{cursor:pointer;color:var(--vf-blue-primary);font-weight:600;padding:6px 0}
.vfx-check{display:flex;align-items:center;gap:6px;white-space:nowrap}.vfx-check input{accent-color:var(--vf-blue-primary)}
.vfx-detail-view{font:0.8125rem/1.5 var(--font-ui);color:var(--vf-black-text-main)}
.vfx-detail-view h4{font-size:0.875rem;margin:18px 0 10px}
.vfx-table-wrap{overflow-x:auto;margin:10px 0 20px}.vfx-table{width:100%;border-collapse:collapse;text-align:left}
.vfx-table th{background:var(--vf-black-bg-app);font-weight:600;color:var(--vf-black-text-muted);white-space:nowrap}
.vfx-table td,.vfx-table th{padding:10px 12px;border-bottom:1px solid var(--vf-black-border-default);vertical-align:top}
.vfx-table td:first-child{min-width:110px}.vfx-table td{max-width:420px;overflow-wrap:anywhere}
.vfx-table .vfx-date{white-space:nowrap;overflow-wrap:normal}
.vfx-description summary{cursor:pointer;color:var(--vf-blue-primary);font-weight:600;white-space:nowrap}
.vfx-description>div{font-size:0.8125rem;font-weight:400;max-width:580px;white-space:normal;overflow-wrap:anywhere}
.vfx-description p{margin:8px 0}.vfx-progress{display:flex;align-items:center;gap:8px;white-space:nowrap}
.vfx-progress progress{width:95px;height:7px;accent-color:var(--vf-green-main)}
.vfx-pagination{display:flex;gap:12px;align-items:center;justify-content:flex-end}
.vfx-pagination button{background:var(--vf-black-bg-app);border:1px solid var(--vf-black-border-default);border-radius:7px;padding:8px;color:var(--vf-blue-primary);cursor:pointer}
.vfx-pagination button:disabled{opacity:.4;cursor:default}
.vfx-series svg{width:100%;height:auto;max-height:300px;overflow:visible;color:var(--vf-black-text-muted)}
.vfx-series svg text{fill:currentColor;font:0.75rem var(--font-ui)}
.vfx-history-line{stroke:var(--vf-blue-primary);stroke-width:2;fill:none}.vfx-history-point{fill:var(--vf-green-main)}
.vfg-grid{position:relative;font:0.8125rem/1.45 var(--font-ui);color:var(--vf-black-text-main)}
.vfg-row{display:grid;grid-template-columns:minmax(110px,calc(100% - var(--vfp-timeline-width,62%))) minmax(0,1fr);align-items:start;border-bottom:1px solid var(--vf-black-border-default);min-height:42px;padding:8px 0;gap:0}
.vfg-info{padding-right:14px;min-width:0}.vfg-dates,.vfg-dependencies{display:block;font-size:0.6875rem;color:var(--vf-black-text-muted);margin-top:4px;overflow-wrap:anywhere}
.vfg-group{padding:12px 8px 8px;background:var(--vf-black-bg-app);color:var(--vf-black-text-main);border-bottom:1px solid var(--vf-black-border-default)}
.vfg-group button{font:600 0.8125rem var(--font-ui);background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer}
.vfg-group button::before{content:'⌄';margin-right:7px}.vfg-group button[aria-expanded=false]::before{content:'›'}
.vfg-header{min-height:35px;font-size:0.6875rem;color:var(--vf-black-text-muted)}
.vfg-axis{position:relative;height:30px}.vfg-axis span{position:absolute;top:0;box-sizing:border-box;border-left:1px solid var(--vf-black-border-default);padding-left:4px;white-space:nowrap;overflow:hidden}
.vfg-track{position:relative;min-height:36px}.vfg-bar{position:absolute;top:10px;height:16px;border-radius:4px;background:var(--vf-blue-primary);overflow:hidden}
.vfg-bar.late{background:var(--vf-red-main)}.vfg-bar.done,.vfg-fill{background:var(--vf-green-main)}
.vfg-fill{display:block;height:100%;opacity:.85}.vfg-progress{position:absolute;top:29px;right:0;font-size:0.625rem;color:var(--vf-black-text-muted)}
.vfg-milestone{position:absolute;top:7px;transform:translateX(-50%);color:var(--vf-green-main)}
.vfg-unplanned{display:block;font-size:0.6875rem;color:var(--vf-black-text-muted);padding:8px}
.vfp-legend .done{background:var(--vf-green-main)}
.vf-dashboard[data-compact=true] .vfg-row{min-height:34px;padding:4px 0}
.vfx-is-extended .vfi-history{max-height:none}.vfx-is-extended .vfw-row{max-height:none}
.dashboard-expanded-dialog{box-sizing:border-box;inset:0;margin:auto;width:calc(100vw - 32px);max-width:1600px;height:calc(100dvh - 32px);max-height:none;padding:0;border:1px solid var(--vf-black-border-default);border-radius:14px;background:var(--vf-black-bg-surface);color:var(--vf-black-text-main)}
.dashboard-expanded-dialog::backdrop{background:color-mix(in srgb,var(--vf-black-text-main) 45%,transparent)}
.dashboard-expanded-dialog[open]{display:flex;flex-direction:column}
.dashboard-expanded-toolbar{display:flex;align-items:center;gap:8px;padding:16px 22px;border-bottom:1px solid var(--vf-black-border-default);flex-shrink:0}
.dashboard-expanded-toolbar h2{font:600 1.125rem var(--font-ui);margin:0 auto 0 0}
.dashboard-expanded-body{padding:16px 24px;overflow:auto;min-height:0;flex:1}
@media(max-width:600px){.dashboard-expanded-dialog{width:100vw;height:100dvh;border-radius:0}.dashboard-expanded-body{padding:12px}.vfx-table td,.vfx-table th{padding:8px}.dashboard-expanded-toolbar{padding:12px}}

/* Shared Quickwin titles and portfolio roadmap, including exported templates. */
.vf-dashboard[data-compact="true"] .vfw-short-title{display:none}
.vfw-qw-label{min-width:0;overflow-wrap:anywhere}
.vfw-qw-toggle{min-width:0;max-width:100%}
.vfw-qw-toggle .vfw-chevron{flex-shrink:0}
.vfw-progress-top{display:grid;grid-template-columns:minmax(0,1fr) 74px;align-items:center;gap:10px}
.vfw-progress-meta{display:grid;grid-template-columns:20px 46px;align-items:center;gap:8px;justify-content:end;font-variant-numeric:tabular-nums}
.vfw-progress-meta>strong{text-align:right}
.vfx-description summary{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.vfx-action-table{table-layout:fixed;min-width:700px}
.vfx-action-table .vfx-progress{display:grid;grid-template-columns:minmax(30px,1fr) 48px;align-items:center;gap:8px}
.vfx-action-table .vfx-progress progress{width:100%;min-width:0}
.vfx-action-table .vfx-progress span{text-align:right;font-variant-numeric:tabular-nums}
.vfg-info{min-width:0}
.vfg-bar{min-width:8px;max-width:100%}
.vfg-portfolio .vfg-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 0}
.vfg-portfolio .vfg-header{min-height:28px;padding:0;border-bottom:0}
.vfg-portfolio .vfg-info{padding-right:0}
.vfg-portfolio .vfg-track{min-height:40px}
.vfg-portfolio .vfg-group{padding:8px 6px;margin-top:6px}
.vfg-portfolio .vfg-group button{line-height:1.35;text-align:left;overflow-wrap:anywhere}
.vfg-portfolio .vfg-dates{font-size:0.625rem;margin-top:3px}
.vfg-portfolio .vfg-axis{min-height:26px}
.vfg-portfolio .vfp-legend{gap:6px 12px;font-size:0.625rem;margin-bottom:10px}
.vfg-compact .vfg-row{gap:0;padding:4px 0;min-height:0}
.vfg-compact .vfg-track{min-height:34px}
.vfg-compact .vfg-bar{top:5px;height:12px}
.vfg-compact .vfg-progress{top:19px;font-size:0.5625rem}
.vfg-compact .vfg-axis{min-height:22px;font-size:0.5625rem}
.vfg-duration-unknown{display:block;background:var(--vf-black-bg-app);border:1px dashed var(--vf-black-border-default);border-radius:5px;padding:2px 6px;top:6px;color:var(--vf-black-text-muted);font-size:0.625rem}
/* Public narrative fields: preserve paragraphs and lists without interpreting HTML. */
.vfx-content-field { margin:10px 0; min-width:0; }
.vfx-content-field>strong { display:block; color:var(--vf-black-text-main); }
.vfx-preserve-lines,.vfx-description p,.vfw-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.vfx-content-field p { margin:5px 0 12px; }
.vfx-content-choice { border:1px solid var(--vf-black-border-default); border-radius:8px; margin:12px 0; padding:10px; }
.vfx-content-choice legend { font-weight:600; padding:0 6px; }
.vfx-content-choice-row { display:flex; gap:6px; align-items:center; padding:4px 0; }
.vfx-content-choice-row label { flex:1; white-space:normal; }
.vfx-field-move { border:0; background:transparent; color:var(--vf-blue-primary); padding:6px; cursor:pointer; }
.vfx-field-move:disabled { opacity:.3; cursor:default; }
.vfx-domain-summary { border-top:1px solid var(--vf-black-border-default); margin-top:16px; padding-top:12px; }
.vfx-domain-summary summary { cursor:pointer; color:var(--vf-blue-primary); font-weight:600; }
.vfx-description summary { white-space:normal; overflow-wrap:anywhere; }
.vfx-qw-caption{color:var(--vf-blue-primary);font-weight:700;overflow-wrap:anywhere}
.vfx-content-settings>summary{list-style:none;text-align:right;color:var(--vf-blue-primary);cursor:pointer}
.vfx-content-settings>summary::-webkit-details-marker{display:none}
.vfx-content-settings{margin-bottom:8px}

/* Cockpit insights: shared VITEFIX palette and semantic table fallback. */
.vfi-insight{min-width:0}.vfi-domain{padding:10px 0;border-bottom:1px solid var(--vf-black-border-default)}
.vfi-domain svg{width:100%;max-height:240px}.vfi-domain svg text{fill:var(--vf-black-text-main);font-size:0.75rem}
.vfi-grid{stroke:var(--vf-black-border-default);fill:none}.vfi-history-line{stroke:var(--vf-blue-primary);stroke-width:2;fill:none}
.vfi-level-initial{fill:var(--vf-red-main)}.vfi-level-basic{fill:var(--vf-yellow-main)}.vfi-level-standard{fill:var(--vf-green-main)}.vfi-level-managed{fill:var(--vf-blue-primary)}.vfi-level-excellence{fill:var(--vf-black-text-main)}
.vfi-matrix{display:grid;grid-template-columns:minmax(64px,110px) repeat(var(--columns),minmax(74px,1fr));gap:4px;overflow-x:auto;padding:4px}
.vfi-axis{padding:8px;font-size:0.6875rem}.vfi-cell{min-height:48px;padding:6px;border:1px solid var(--vf-black-border-default);border-radius:6px;border-top:3px solid var(--vf-blue-primary)}
.vfi-rank-0{border-top-color:var(--vf-red-main)}.vfi-rank-1{border-top-color:var(--vf-yellow-dashboard-orange)}.vfi-rank-2{border-top-color:var(--vf-yellow-main)}.vfi-rank-4{border-top-color:var(--vf-green-main)}
.vfi-priority,.vfi-next-step button{display:block;border:0;border-radius:5px;background:var(--vf-black-bg-app);color:var(--vf-blue-primary);cursor:pointer;text-align:left;padding:7px;margin:3px 0;font:inherit;font-size:0.75rem;overflow-wrap:anywhere}
.vfi-next-step{display:grid;gap:7px;border-bottom:1px solid var(--vf-black-border-default);padding:12px 0}.vfi-next-step>small{color:var(--vf-black-text-muted)}
.vfg-baseline{position:absolute;top:34px;height:5px;border:1px dashed var(--vf-black-text-muted);border-radius:2px}
.vfg-focus{border:0;background:transparent;color:var(--vf-blue-primary);padding:7px;cursor:pointer;float:right}
.vfg-unfocused{opacity:.25}.vfg-focused{background:var(--vf-black-bg-app)}
[data-quickwin-id][role=button]{cursor:pointer}[data-quickwin-id]:focus-visible,.vfg-focus:focus-visible,.vfi-priority:focus-visible{outline:2px solid var(--vf-blue-primary);outline-offset:3px}

/* Connexion adaptée au compte et gestion Microsoft depuis le profil. */
.login-change-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 20px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--vf-blue-primary);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.login-change-email:disabled { opacity: .6; cursor: wait; }
.login-sso-panel, .profile-sso-panel {
    padding: 16px;
    margin-bottom: 20px;
    color: var(--vf-black-text-main);
    background: var(--vf-black-bg-app);
    border: 1px solid var(--vf-black-border-default);
    border-radius: 9px;
}
.login-sso-panel { text-align: center; }
.login-sso-panel > i { color: var(--vf-blue-primary); font-size: 1.3rem; }
.login-sso-panel p, .profile-sso-panel p { margin: 8px 0 0; line-height: 1.5; }
.login-sso-panel p { font-size: .9rem; }
.profile-sso-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; }
.profile-sso-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; }
.profile-sso-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--vf-blue-primary); text-decoration: underline; text-underline-offset: 3px; }
.profile-sso-links a > i:last-child { font-size: .75em; }
.profile-sso-hint { color: var(--vf-black-text-muted); font-size: .85rem; }
.login-change-email:focus-visible, .login-sso-btn:focus-visible, .profile-sso-links a:focus-visible {
    outline: 2px solid var(--vf-blue-primary);
    outline-offset: 4px;
}
.login-body { min-height: 100vh; height: auto; padding: 72px 0 24px; box-sizing: border-box; }

/* Compact dashboards: one composition per family, shared by Web and Office. */
.vf-dashboard[data-compact=true] { gap:.35rem; font-size:.75rem; line-height:1.35; }
.vf-dashboard[data-compact=true] [hidden] { display:none!important; }
.vfc-body { display:grid; gap:.3rem; min-width:0; color:var(--vf-black-text-main); font:.75rem/1.4 var(--font-ui,system-ui,sans-serif); }
.vfc-body *, .vfc-native-toolbar * { box-sizing:border-box; }
.vfc-body p { margin:.3rem 0; }
.vfc-body button,.vfc-body summary,.vfc-native-toolbar button,.vfc-native-toolbar summary { font:inherit; color:inherit; }
.vfc-body summary,.vfc-native-toolbar summary { cursor:pointer; }
.vfc-body summary:focus-visible,.vfc-body button:focus-visible,.vfc-native-toolbar summary:focus-visible { outline:2px solid var(--vf-blue-primary); outline-offset:2px; }
.vfc-button { background:transparent; border:1px solid var(--vf-black-border-default); border-radius:.3rem; padding:.2rem .4rem; cursor:pointer; }
.vfc-button[aria-pressed=true] { border-color:var(--vf-blue-primary); color:var(--vf-blue-primary); font-weight:700; }
.vfc-toolbar,.vfc-limit { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .5rem; font-size:.75rem; color:var(--vf-black-text-muted); }
.vfc-toolbar { margin-bottom:.25rem; }
.vfc-selection { flex:1; }
.vfc-filters { margin-left:auto; }
.vfc-filters[open] { flex-basis:100%; }
.vfc-filters>.vfx-filters { margin:.3rem 0; }
.vfc-filters summary { text-align:right; }
.vfc-limit { justify-content:flex-end; margin-top:.3rem; }
.vfc-group { min-width:0; }
.vfc-group-title { margin:.2rem 0; padding:.15rem .3rem; background:var(--vf-black-bg-app); color:var(--vf-black-text-main); font-size:.75rem; font-weight:600; }
.vfc-action { padding:.25rem 0; border-bottom:1px solid var(--vf-black-border-default); min-width:0; }
.vfc-action-line { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem .5rem; min-width:0; }
.vfc-detail { flex:1; min-width:7rem; }
.vfc-detail>summary { list-style:none; color:var(--vf-blue-primary); }
.vfc-detail>summary::-webkit-details-marker { display:none; }
.vfc-caption { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.vfc-detail[open] .vfc-caption { display:block; overflow:visible; }
.vfc-detail-content { padding:.35rem; color:var(--vf-black-text-main); border-left:2px solid var(--vf-blue-primary); overflow-wrap:anywhere; }
.vfc-event-text { color:var(--vf-black-text-main); }
.vfc-date { font-variant-numeric:tabular-nums; white-space:nowrap; }
.vfc-progress { display:inline-flex; flex-shrink:0; align-items:center; gap:.3rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vfc-progress progress,.vfc-distribution progress { width:3.5rem; height:.35rem; border:0; border-radius:1rem; overflow:hidden; appearance:none; background:var(--vf-black-border-default); }
.vfc-progress progress::-webkit-progress-bar,.vfc-distribution progress::-webkit-progress-bar { background:var(--vf-black-border-default); }
.vfc-progress progress::-webkit-progress-value,.vfc-distribution progress::-webkit-progress-value { background:var(--vf-blue-primary); }
.vfc-progress progress::-moz-progress-bar,.vfc-distribution progress::-moz-progress-bar { background:var(--vf-blue-primary); }
.vfc-progress[data-complete=true] progress::-webkit-progress-value { background:var(--vf-green-main); }
.vfc-complete { color:var(--vf-green-main); }
.vfc-meta { display:flex; flex-wrap:wrap; gap:.2rem .6rem; color:var(--vf-black-text-muted); font-size:.75rem; }
.vfc-alert { color:var(--vf-red-main); font-weight:600; }
.vfc-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.35rem .7rem; }
.vfc-metric { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.15rem .4rem; padding:.25rem 0; border-bottom:1px solid var(--vf-black-border-default); min-width:0; }
.vfc-metric>span { flex:1; color:var(--vf-black-text-muted); }
.vfc-metric>strong { font-size:.875rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vfc-metric>small { flex-basis:100%; font-size:.75rem; color:var(--vf-black-text-muted); }
.vfc-flags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem .75rem; }
.vfc-flag { display:flex; align-items:baseline; justify-content:space-between; gap:.35rem; min-width:0; }
.vfc-flag>span { overflow-wrap:anywhere; }
.vfc-flag strong { font-size:.75rem; white-space:nowrap; }
.vfc-flag[data-state=yes] strong { color:var(--vf-green-main); }
.vfc-flag[data-state=no] strong { color:var(--vf-red-main); }
.vfc-flag[data-state=unknown] { color:var(--vf-black-text-muted); }
.vfc-segments { display:flex; gap:2px; height:.5rem; border-radius:.3rem; overflow:hidden; }
.vfc-segments span { background:var(--vf-black-text-muted); }
.vfc-segments [data-tone="0"] { background:var(--vf-red-main); }
.vfc-segments [data-tone="1"] { background:var(--vf-yellow-dashboard-orange); }
.vfc-segments [data-tone="2"] { background:var(--vf-yellow-main); }
.vfc-segments [data-tone="3"] { background:var(--vf-blue-primary); }
.vfc-segments [data-tone="4"],.vfc-segments [data-tone=done] { background:var(--vf-green-main); }
.vfc-distribution { display:grid; gap:.15rem; }
.vfc-distribution-inline { display:flex; flex-wrap:wrap; gap:.25rem .75rem; }
.vfc-distribution-group>summary { display:flex; align-items:center; gap:.5rem; padding:.2rem 0; }
.vfc-distribution-group>summary>span { flex:1; }
.vfc-distribution-group>summary>strong { min-width:1rem; text-align:right; }
.vfc-distribution-group[open] { flex-basis:100%; }
.vfc-distribution-detail { padding:.3rem .5rem; border-left:2px solid var(--vf-blue-primary); }
.vfc-budget-domain>summary { display:flex; justify-content:space-between; gap:.5rem; padding:.2rem 0; }
.vfc-score-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(3rem,.5fr) auto; align-items:center; gap:.5rem; padding:.25rem 0; }
.vfc-score-track { display:block; position:relative; height:.4rem; border-radius:.3rem; background:var(--vf-black-border-default); }
.vfc-score-track .vfw-fill { display:block; height:100%; border-radius:inherit; }
.vfc-score-row>strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.vfc-evolution { display:grid; grid-template-columns:minmax(0,1fr) minmax(6rem,1fr); gap:.5rem; align-items:center; border-bottom:1px solid var(--vf-black-border-default); padding:.2rem 0; }
.vfc-evolution>span { display:grid; gap:.15rem; }
.vfc-evolution svg { display:block; width:100%; height:3rem; }
.vfc-period { color:var(--vf-black-text-muted); }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-row { grid-template-columns:minmax(7rem,calc(100% - var(--vfp-timeline-width,62%))) minmax(0,1fr); gap:0; align-items:center; min-height:2rem; padding:.2rem 0; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-info { padding-right:.4rem; font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-group { padding:.15rem .3rem; margin-top:.2rem; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-group button { font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-track { min-height:1.6rem; margin-right:2.6rem; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-bar { top:.5rem; height:.5rem; min-width:2px; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-progress { top:.25rem; right:-2.6rem; font-size:.75rem; color:var(--vf-black-text-main); }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-axis { margin-right:2.6rem; min-height:1.5rem; font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-axis.vfp-axis-with-today { height:3.4rem; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-focus { display:none; }
.vf-dashboard[data-compact=true] .vfg-compact .vfx-qw-caption { font-size:.75rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vf-dashboard[data-compact=true] .vfg-compact .vfg-unplanned { font-size:.75rem; padding:.1rem; }
.vf-dashboard[data-compact=true] .vfp-legend { font-size:.75rem; gap:.25rem .5rem; margin-bottom:.2rem; }
.vf-dashboard[data-compact=true] .vfp-today-label { font-size:.75rem; padding:.1rem .25rem; }
.vf-dashboard[data-compact=true] .vfi-indicator { margin:0; padding:.2rem 0; gap:.2rem; }
.vf-dashboard[data-compact=true] .vfi-head { align-items:baseline; }
.vf-dashboard[data-compact=true] .vfi-value { font-size:1rem; }
.vf-dashboard[data-compact=true] .vfi-track { height:.35rem; }
.vf-dashboard[data-compact=true] .vfi-references { margin:.1rem 0; gap:.25rem; }
.vf-dashboard[data-compact=true] .vfi-reference { font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfi-period,.vf-dashboard[data-compact=true] .vfi-consequence { margin:.15rem 0; font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfi-history-toolbar { margin:.15rem 0; gap:.25rem; }
.vf-dashboard[data-compact=true] .vfi-history-title,.vf-dashboard[data-compact=true] .vfi-month-value { font-size:.75rem; margin:.15rem 0; }
.vf-dashboard[data-compact=true] .vfi-history-chart { width:100%; height:var(--vfc-chart-height,9rem); max-height:none; }
.vf-dashboard[data-compact=true] .vfv-value { display:inline-block; font-size:1rem; margin:.2rem 0; }
.vf-dashboard[data-compact=true] .vfv-score-values { gap:.5rem; }
.vf-dashboard[data-compact=true] .vfv-score-values>div { display:flex; gap:.4rem; align-items:baseline; }
.vf-dashboard[data-compact=true] .vfv-score-values strong { font-size:1rem; }
.vf-dashboard[data-compact=true] .vfv-score-values span { font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfv-body svg text { font-size:.75rem; }
.vf-dashboard[data-compact=true] .vfi-chart-controls { gap:.2rem; }
.vf-dashboard[data-compact=true] .vfc-chart-value { font-size:.875rem; margin:.15rem 0; }

.vf-dashboard[data-compact=true]:not([data-image-export=true]) { min-height:0; max-height:20rem; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.vf-dashboard[data-compact=true] .vfg-header>strong { font-size:.75rem; }
/* Financial dashboards use the shared VITEFIX palette and relative typography. */
.vff-finance { display:flex; flex-direction:column; gap:.75rem; color:var(--vf-black-text-main); font-size:.875rem; }
.vff-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.65rem; }
.vff-tile { display:flex; flex-direction:column; gap:.3rem; padding:.75rem; border:1px solid var(--vf-black-border-default); border-radius:.65rem; }
.vff-tile > strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.vff-tile[data-field=capex_budget] { border-top:3px solid var(--vf-blue-main); }
.vff-tile[data-field=capex_consumed] { border-top:3px solid var(--vf-green-main); }
.vff-tile[data-field=capex_balance] { border-top:3px solid var(--vf-yellow-main); }
.vff-tile[data-field^=opex] { border-top:3px solid var(--vf-yellow-main); }
.vff-line { display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.vff-group { display:flex; flex-direction:column; gap:.4rem; padding:.5rem 0; border-bottom:1px solid var(--vf-black-border-default); }
.vff-track { height:.5rem; background:var(--vf-black-module-neutral-bg); border-radius:.25rem; overflow:hidden; }
.vff-budget-fill { display:block; height:100%; background:var(--vf-blue-main); border-radius:inherit; }
.vff-alert { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; border-left:3px solid var(--vf-red-main); padding:.4rem .65rem; }
.vff-alert > strong,.vff-warning { color:var(--vf-red-main); }
.vff-qid { color:var(--vf-blue-primary); font-weight:600; }
.vff-finance h4 { font-size:.95rem; margin:.25rem 0; }
.vff-finance .vfx-table { font-size:.8rem; }
.vff-finance .vfx-table td { overflow-wrap:anywhere; }
.vff-finance .vfw-note { font-size:.75rem; }
.vf-dashboard[data-view=COMPACT] .vff-finance { gap:.35rem; font-size:.75rem; }
.vf-dashboard[data-view=COMPACT] .vff-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem; }
.vf-dashboard[data-view=COMPACT] .vff-tile { padding:.35rem .5rem; gap:.1rem; border-radius:.35rem; }
.vf-dashboard[data-view=COMPACT] .vff-tile > strong { font-size:.9rem; }
.vf-dashboard[data-view=COMPACT] .vff-group { padding:.25rem 0; gap:.2rem; }
.vf-dashboard[data-view=COMPACT] .vff-finance .vfx-table { font-size:.7rem; }
.vf-dashboard[data-view=COMPACT] .vff-finance .vfx-table td,.vf-dashboard[data-view=COMPACT] .vff-finance .vfx-table th { padding:.3rem .4rem; }