﻿/* fqm-munipro.css */

:root {
    
    /* Design tokens scrollbar */
    --sb-size: 10px;
    --sb-radius: 8px;
    --sb-padding: 2px;

    --sb-track: var(--rz-base-100);
    --sb-thumb: var(--rz-base-300);
    --sb-thumb-hover: var(--rz-primary);

    /**************/
    /* TOKENS FQM */
    /**************/

    /* Couleurs FQM */
    --fqm-jaune:#ADC836;
    --fqm-violet:#ADC836;
    --fqm-bleu-1:#1D4593;/* Marian blue */
    --fqm-bleu-2:#1275BB;
    --fqm-bleu-3:#1E9CD8;
    --fqm-vert:#ADC836;
    --fqm-orange:#F05A28;
    --fqm-gris1:#A3A5A7;
    --fqm-gris2:#58585B;
    /* Couleurs Munipro */
    --munipro-primary-900: var(--fqm-bleu-1);
    --munipro-primary-700: #2557BB;
    --munipro-primary-500: #5582DD;
    --munipro-primary-300: #BBCDF2;
    --munipro-primary-100: #EFF3FC;
    --munipro-secondary-900: var(--fqm-vert);
    --munipro-secondary-500: #CFDE8F;
    --munipro-secondary-100: #EAF0CF;
    
    /*******************/
    /* TOKENS MATERIAL */
    /*******************/

    /* Couleurs bases de gris */
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #eeeeee;
    --rz-base-50: #fafafa;
    --rz-base-100: #f5f5f5;
    --rz-base-200: #eeeeee;
    --rz-base-300: #e0e0e0;
    --rz-base-400: #bdbdbd;
    --rz-base-500: #9e9e9e;
    --rz-base-600: #757575;
    --rz-base-700: #616161;
    --rz-base-800: #424242;
    --rz-base-900: #212121;
    --rz-base-light: #f5f5f5;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #757575;
    --rz-base-darker: #212121;
    /* Couleurs principales */
    --rz-primary: var(--munipro-primary-500);
    --rz-primary-light: var(--munipro-primary-300);
    --rz-primary-lighter: var(--munipro-primary-100);
    --rz-primary-dark: var(--munipro-primary-700);
    --rz-primary-darker: var(--munipro-primary-900); 
    --rz-on-primary-lighter: var(--munipro-primary-700);
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    /* couleurs secondaires */
    --rz-secondary: var(--munipro-secondary-900);
    --rz-secondary-light: var(--munipro-secondary-300);
    --rz-secondary-lighter: var(--munipro-secondary-100);
    --rz-secondary-dark: var(--munipro-secondary-900);
    --rz-secondary-darker: var(--munipro-secondary-900);
    --rz-on-secondary-lighter: #8bc34a;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    /* couleurs info */
    --rz-info: var(--munipro-primary-100);
    --rz-info-light:var(--munipro-primary-100);
    --rz-info-lighter:var(--munipro-primary-100);
    --rz-info-dark:var(--munipro-primary-100);
    --rz-info-darker:var(--munipro-primary-100);
    --rz-on-info: var(--munipro-primary-900);
    --rz-on-info-lighter: var(--munipro-primary-500);
    --rz-on-info-light: #ffffff;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #ffffff;
    /* couleurs succes */
    --rz-success: "#4caf50";
    --rz-success-light: "#81c784";
    --rz-success-lighter: "#c8e6c9";
    --rz-success-dark: "#388e3c";
    --rz-success-darker: "#2e7d32";
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #4caf50;
    --rz-on-success-light: #ffffff;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #ffffff;
    /* couleurs warning */
    --rz-warning: "#ff9800";
    --rz-warning-light: "#ffb74d";
    --rz-warning-lighter: "#ffe0b2";        
    --rz-warning-dark: "#f57c00";
    --rz-warning-darker: "#ef6c00";
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #ff9800;
    --rz-on-warning-light: #ffffff;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #ffffff;
    /* couleurs danger */
    --rz-danger: "#f44336";
    --rz-danger-light: "#e57373";            
    --rz-danger-lighter: "#ffcdd2";        
    --rz-danger-dark: "#d32f2f";
    --rz-danger-darker: "#c62828";
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #f44336;
    --rz-on-danger-light: #ffffff;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;  

    /* Couleurs app bar */
    --rz-sidebar-background-color: var(--rz-base-100);
    --rz-header-background-color: var(--rz-base-100);
    --rz-layout-body-background-color: var(--rz-white);
    --rz-header-color: var(--rz-on-base);
    --rz-sidebar-toggle-color: var(--rz-on-base);

    /* Couleurs sidebar navigation */
    --rz-panel-menu-item-background-color: var(--rz-base-100);
    --rz-panel-menu-item-hover-background-color: var(--rz-base-200);
    --rz-panel-menu-item-active-background-color: var(--rz-primary);
    --rz-panel-menu-item-color: var(--rz-on-base);
    --rz-panel-menu-item-hover-color: var(--rz-on-base);
    --rz-panel-menu-item-active-color: var(--rz-on-base);    
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-100);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-200);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-2nd-level-color: var(--rz-on-base);
    --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-100);
    --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-200);
    --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-3rd-level-color: var(--rz-on-base);
    --rz-sidebar-border-inline-end:none !important;
    --rz-panel-menu-item-border:none !important;
    

    /* Cards */
    --rz-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Ombre par défaut (subtile) */
    --rz-card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15); /* Ombre au survol (plus marquée) */
    --rz-card-transform-hover: translateY(-2px); /* Déplacement vertical */
    --rz-card-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Courbe d'accélération fluide */
    --rz-card-border-hover: 1px solid rgba(var(--rz-primary-rgb), 0.2); /* Bordure légère colorée */
    
    /* Typographie */

    /* Appliquer la font à tout */

    /* Titres */

    /* Surface Radzen */

    /***************************/
    /* STYLES PERSONNALISATION */
    /***************************/

    /* Appliquer à tous les .rz-card sauf ceux dans un .Toolbox */
    :not(.Toolbox) .rz-card {
        border-radius: var(--rz-border-radius);
        background-color: var(--rz-surface);
        border: 1px solid var(--rz-border);
        box-shadow: var(--rz-card-shadow);
        transition: var(--rz-card-transition);
        overflow: hidden;
        backface-visibility: hidden;
    }

    /* Hover uniquement pour les .rz-card qui ne sont PAS dans un .Toolbox */
    :not(.Toolbox) .rz-card:hover {
        transform: var(--rz-card-transform-hover);
        box-shadow: var(--rz-card-shadow-hover);
        border: var(--rz-card-border-hover);
        pointer-events: auto;
    }

    /* Styles FQM dégradé*/
    .fqm-background-color-primary-degrade{
        background: linear-gradient(270deg, var(--munipro-primary-700) 0%, var(--munipro-primary-900) 100%);
        .rz-text-body1, .rz-text-display-h3, .rz-text-display-h2, .rz-text-display-h1, .rz-label, .rz-text-display-h3-color {
            color: var(--rz-on-primary-dark) !important;
        }
    }

    /* Styles natifs personnalisés */
    .rz-header a, .rz-header a:hover, .rz-header a:focus {
        color: var(--rz-on-base);
    }

    .rz-body{
        border-radius: 16px 0 0 0 !important;
        border-left: 1px solid var(--rz-base-200) !important;
        border-top: 1px solid var(--rz-base-200) !important;
    }

    .rz-panel-menu{
        padding-right: 10px !important;
    }

    .rz-dark{
        background-color: var(--munipro-primary-900) !important;
    }

    /* Taille globale */
    ::-webkit-scrollbar {
        width: var(--sb-size);
        height: var(--sb-size);
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: var(--sb-track);
    }

    /* Thumb */
    ::-webkit-scrollbar-thumb {
        background-color: var(--sb-thumb);
        border-radius: var(--sb-radius);

        /* "Padding" visuel */
        border: var(--sb-padding) solid transparent;
        background-clip: padding-box;

        transition: background-color 0.2s ease;
    }

    /* Hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--sb-thumb-hover);
    }

}