/* Jetons de design (direction "SaaS premium" façon Linear/Stripe/Vercel, décidée le 2026-09-01 — accent indigo/violet façon Stripe, voir gt-card-accent). Remplace l'accent terracotta du 2026-08-15 : décision explicitement révisée par l'utilisateur pour cette refonte visuelle. */ :root { /* Accent principal (boutons, liens, anneau de focus) — même ton que --gt-card-accent et les avatars. Violet/indigo façon Stripe (#635bff), remplace le terracotta #d97757 du 2026-08-15 — décision révisée le 2026-09-01 pour la refonte "SaaS premium". */ --gt-primary: #635bff; --gt-primary-dark: #4f3fe0; --gt-primary-ring: rgba(99, 91, 255, .35); /* Dégradé utilisé sur les boutons primaires et les avatars pour un rendu plus "premium" qu'un simple aplat — mêmes deux tons que --gt-primary/--gt-primary-dark. */ --gt-primary-gradient: linear-gradient(135deg, #7c6bff 0%, #4f3fe0 100%); --gt-surface: #ffffff; --gt-page-bg: #ffffff; --gt-border: #e5e7eb; /* En-tête sombre des tableaux — indigo profond (#1e1b4b), assez sombre pour porter du texte blanc, cohérent avec le dégradé de la sidebar (MainLayout.razor.css, déjà indigo/violet). */ --gt-header-bg: #1e1b4b; --gt-header-color: #ffffff; /* Bordure des cartes gt-carnet-card (mobile + grille Carnets) et fond des avatars — --gt-primary et --gt-header-bg en sont dérivés/harmonisés. */ --gt-card-accent: #635bff; --gt-row-hover-bg: #f5f3ff; --gt-text-muted: #6b7280; /* Texte principal / titres — variabilisés (2026-08-21) pour que le mode sombre puisse les éclaircir ; avant ça c'était des #1f2937/#111827 codés en dur un peu partout. */ --gt-text: #1f2937; --gt-heading: #111827; /* Piste de la barre de classement (Tableau de bord) — dérivée de --gt-card-accent, trop claire pour rester lisible telle quelle en sombre. */ --gt-track-bg: #ece9fc; /* Pied de carte carnet (frais payé / non payé), voir .gt-carnet-card-footer. */ --gt-success-bg: #ecfdf5; --gt-success-text: #15803d; --gt-neutral-bg: #f3f4f6; --gt-neutral-text: #4b5563; /* Couleur de statut "à vérifier" (Tableau de bord) — réservée aux alertes, distincte de l'accent indigo pour ne pas se confondre avec une simple donnée métier. */ --gt-warning-bg: #fff7ed; --gt-warning-border: #fdba74; --gt-warning-text: #9a3412; /* Variante "plus grave" de l'alerte ci-dessus (Tableau de bord, frais non payés) — distincte de l'ambre réservé aux écarts de niveau, pour ne pas confondre les deux natures d'alerte. */ --gt-danger-bg: #fef2f2; --gt-danger-border: #fca5a5; --gt-danger-text: #b91c1c; --gt-radius: .75rem; --gt-radius-sm: .5rem; /* Ombres teintées (violet très désaturé plutôt que gris neutre) et une variante -lg pour les éléments élevés au survol (cartes, modals) — plus "premium" que l'ombre plate d'origine. */ --gt-shadow-sm: 0 1px 2px rgba(30, 27, 75, .06), 0 1px 1px rgba(30, 27, 75, .04); --gt-shadow: 0 8px 24px -8px rgba(30, 27, 75, .16), 0 2px 8px -2px rgba(30, 27, 75, .08); --gt-shadow-lg: 0 24px 48px -16px rgba(30, 27, 75, .28), 0 8px 16px -8px rgba(30, 27, 75, .16); /* Coins arrondis un peu plus doux pour tous les composants Bootstrap (boutons, champs, cartes, modals). */ --bs-border-radius: var(--gt-radius-sm); --bs-border-radius-sm: .375rem; --bs-border-radius-lg: var(--gt-radius); } /* Mode sombre (2026-08-21) — piloté par [data-bs-theme] plutôt qu'un attribut maison : un seul attribut sur déclenche à la fois le dark mode natif de Bootstrap 5.3 (formulaires, modals, badges...) et ces jetons --gt-*. Appliqué avant le premier rendu par le script bloquant de App.razor (localStorage 'gt-theme', ou prefers-color-scheme si rien n'est stocké) ; basculé par le bouton ThemeToggle (wwwroot/js/theme.js). --gt-primary/--gt-card-accent/--gt-header-bg ne sont volontairement pas redéfinis : l'accent indigo/violet et l'en-tête indigo profond restent lisibles tels quels sur fond sombre. */ :root[data-bs-theme="dark"] { --gt-surface: #1c1f26; --gt-page-bg: #14161b; --gt-border: #2e323c; --gt-row-hover-bg: #221f3a; --gt-text-muted: #9aa1ac; --gt-text: #e5e7eb; --gt-heading: #f3f4f6; --gt-track-bg: #2f2b57; --gt-success-bg: #103322; --gt-success-text: #4ade80; --gt-neutral-bg: #262a32; --gt-neutral-text: #b0b6c0; --gt-warning-bg: #2b2116; --gt-warning-border: #7c4a1d; --gt-warning-text: #fb923c; --gt-danger-bg: #2b1616; --gt-danger-border: #7c2d2d; --gt-danger-text: #f87171; --gt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --gt-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5), 0 2px 8px -2px rgba(0, 0, 0, .35); --gt-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6), 0 8px 16px -8px rgba(0, 0, 0, .4); } html, body { /* Pas de police custom chargée (le projet évite les CDN, voir Bootstrap déjà vendorisé) — pile système qui se rapproche du rendu Inter/SF utilisé par Linear/Stripe/Vercel. */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--gt-page-bg); } a, .btn-link { color: var(--gt-primary); } a:not(.btn) { transition: color .12s ease; } .btn-primary { color: #fff; background-image: var(--gt-primary-gradient); background-color: var(--gt-primary); border-color: var(--gt-primary-dark); box-shadow: 0 2px 8px -2px rgba(99, 91, 255, .45); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--gt-primary-dark) !important; border-color: var(--gt-primary-dark) !important; } .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px -2px rgba(99, 91, 255, .55); } .btn-primary:active { transform: translateY(1px); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--gt-primary-ring); } .content { padding-top: 1.1rem; } h1 { font-weight: 600; font-size: 1.75rem; color: var(--gt-heading); margin-bottom: 1.25rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Convention tableau standard (toutes les pages) : lignes de 48-56px, alignement vertical centré. */ .table-standard > :not(caption) > * > th, .table-standard > :not(caption) > * > td { padding: 14px 16px; vertical-align: middle; } .table-standard td.actions { text-align: end; white-space: nowrap; } .table-standard td.actions .btn { padding: 0.25rem 0.5rem; line-height: 1; } /* Look "SaaS" du tableau desktop : carte blanche, bordure fine, ombre légère, en-tête discret, survol de ligne. Remplace le zèbre Bootstrap classique par un style plus épuré. */ .table-responsive.table-scroll-desktop { background-color: var(--gt-surface); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow-sm); } .table-standard { margin-bottom: 0; } .table-standard thead th { background-color: var(--gt-header-bg); color: var(--gt-header-color); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--gt-header-bg); } .table-standard tbody td { border-color: var(--gt-border); color: var(--gt-text); } .table-standard tbody tr td { transition: background-color .12s ease; } .table-standard tbody tr:hover td { background-color: var(--gt-row-hover-bg); } .table-standard tbody tr:last-child td { border-bottom: none; } /* État vide (aucune donnée) : carte discrète à bordure pointillée plutôt qu'un simple texte italique. */ .gt-empty-state { background-color: var(--gt-surface); border: 1px dashed var(--gt-border); border-radius: var(--gt-radius); padding: 3rem 1.5rem; text-align: center; color: var(--gt-text-muted); } /* Pastille avatar (initiales) devant un nom, dans un tableau ou une carte mobile. */ .gt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; /* Même dégradé que les boutons primaires — cohérence entre tableau et carte. */ background-image: var(--gt-primary-gradient); background-color: var(--gt-card-accent); color: #fff; font-size: .7rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 6px -1px rgba(99, 91, 255, .4); } /* Pastille signalant l'utilisateur connecté dans la barre du haut (même accent que le reste). */ .gt-status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background-color: var(--gt-primary); box-shadow: 0 0 0 2px rgba(99, 91, 255, .25); flex-shrink: 0; } /* Formulaires (popups Ajouter/Modifier) : libellés en gras, champs plus spacieux, titre de popup plus marqué — convention par défaut pour tous les formulaires. */ .form-label { font-weight: 600; color: var(--gt-text); margin-bottom: .4rem; } .form-control, .form-select { padding: .55rem .85rem; } .modal-title { font-weight: 700; font-size: 1.35rem; } :root { --bs-modal-padding: 1.5rem; } /* Modal flottant plus "premium" : ombre marquée plutôt que la bordure/ombre plate de Bootstrap. */ .modal-content { border: none; box-shadow: var(--gt-shadow-lg); } /* Cartes gt-carnet-card (grille Carnets + vue mobile de toutes les pages liste). Pas de bandeau de couleur en en-tête (retiré le 2026-08-15) : la distinction entre cartes vient uniquement de l'ombre portée et de cette bordure colorée, pas d'un fond plein sur l'identité de la ligne. */ .gt-carnet-card { border: 1.5px solid var(--gt-card-accent); /* Ombre plus marquée qu'un simple shadow-sm Bootstrap, pour bien séparer les cartes entre elles maintenant que l'en-tête n'a plus de fond de couleur propre. */ box-shadow: 6px 6px 16px -6px rgba(30, 27, 75, .22); transition: transform .15s ease, box-shadow .15s ease; } /* Léger effet de survol (souris uniquement — @media (hover:hover) évite l'état "collé" sur un simple tap tactile) : cohérent avec la demande de micro-interactions "SaaS premium". */ @media (hover: hover) and (pointer: fine) { .gt-carnet-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(30, 27, 75, .3); } } /* Signale un écart entre le niveau saisi par le commercial (CarnetNiveau) et le niveau calculé (Niveau2, "1/0" par défaut tant qu'aucune mise n'est enregistrée — même valeur par défaut que CarnetNiveau à la création, donc pas de fausse alerte sur un carnet neuf). Le cadre + le fond de la carte passent en rouge ; le pied de carte (déjà coloré pour son propre usage : frais payé) reste inchangé au-dessus de ce fond. */ .gt-carnet-card-alerte { border-color: #dc2626; background-color: #dc2626; box-shadow: 6px 4px 14px -6px rgba(220, 38, 38, .45); } .gt-carnet-card-alerte .card-body, .gt-carnet-card-alerte .card-body .text-muted, .gt-carnet-card-alerte .card-body .fw-semibold, .gt-carnet-card-alerte .gt-carnet-details dt, .gt-carnet-card-alerte .gt-carnet-details dd, .gt-carnet-card-alerte .gt-field-icon, .gt-carnet-card-alerte .gt-amount-primary, .gt-carnet-card-alerte .gt-carnet-card-header, .gt-carnet-card-alerte .gt-carnet-num, .gt-carnet-card-alerte .text-success, .gt-carnet-card-alerte .text-dark { color: #fff !important; } .gt-carnet-card-alerte .gt-carnet-card-header { border-bottom-color: rgba(255, 255, 255, .3); } /* Les boutons d'action (outline-*) deviennent illisibles sur le fond rouge de l'alerte : chaque bouton reçoit son propre fond blanc individuel (un peu plus grand que le bouton, avec une ombre légère pour bien le détacher), plutôt qu'un bandeau plein largeur commun. Actif en permanence (pas seulement en alerte) — sans effet visible sur une carte normale déjà à fond blanc. */ .gt-action-chip { display: inline-flex; background-color: #fff; border-radius: calc(var(--bs-border-radius, .5rem) + 3px); padding: 3px; box-shadow: var(--gt-shadow-sm); } /* Boutons d'action (icônes) : léger effet de levée au survol, cohérent avec le reste des micro-interactions de la refonte "SaaS premium". */ .table-standard td.actions .btn, .gt-action-chip .btn { transition: transform .12s ease, box-shadow .12s ease; } @media (hover: hover) and (pointer: fine) { .table-standard td.actions .btn:hover:not(:disabled), .gt-action-chip .btn:hover:not(:disabled) { transform: translateY(-1px); } } .gt-carnet-card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--gt-border); color: var(--gt-text); } .gt-carnet-num { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; letter-spacing: .03em; } .gt-carnet-details dt { display: flex; align-items: center; gap: .4rem; color: var(--gt-text-muted); font-weight: 400; } /* Icône décorative devant un champ de la carte carnet (SVG à la main, pas de librairie d'icônes). */ .gt-field-icon { flex-shrink: 0; color: var(--gt-text-muted); } .gt-amount-primary { color: var(--gt-primary); } /* Pied de carte carnet : bandeau plein largeur (remplace le badge) signalant l'état des frais. */ .gt-carnet-card-footer { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1rem; font-weight: 600; font-size: .85rem; border-top: none; } .gt-carnet-footer-paye { background-color: var(--gt-success-bg); color: var(--gt-success-text); } .gt-carnet-footer-non-paye { background-color: var(--gt-neutral-bg); color: var(--gt-neutral-text); } /* Tableau de bord (Home.razor). */ .gt-dashboard-heading { margin-bottom: .35rem; } .gt-dashboard-heading h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .gt-dashboard-statistics { border: 1px solid #aeb6c0; border-radius: 1rem; padding: 1.25rem 1rem 1.15rem; background-color: var(--gt-surface); } .gt-dashboard-section-title { margin: 0 0 .9rem; color: var(--gt-heading); font-size: 1.05rem; font-weight: 700; } .gt-dashboard-filter { display: flex; align-items: end; gap: .75rem; margin-bottom: 1rem; } .gt-dashboard-filter > div { width: 17rem; } .gt-dashboard-filter .form-label { font-size: .78rem; font-weight: 600; color: var(--gt-text-muted); } .gt-dashboard-filter .form-control { min-height: 2.7rem; background-color: var(--gt-surface); } .gt-dashboard-filter .btn { min-height: 2.7rem; white-space: nowrap; } .gt-dashboard-statistics .gt-hero-figure { min-height: 6.1rem; padding: .85rem 1rem; border-width: 1px; border-radius: .65rem; box-shadow: 0 2px 5px rgba(31, 41, 55, .16); display: flex; flex-direction: column; justify-content: center; } .gt-dashboard-statistics .gt-hero-label { display: flex; align-items: center; gap: .55rem; color: #111827; font-size: .9rem; font-weight: 700; } .gt-dashboard-statistics .gt-hero-label svg { flex-shrink: 0; width: 1.75rem; height: 1.75rem; padding: .35rem; border-radius: 50%; stroke: currentColor; } .gt-dashboard-statistics .gt-hero-value { margin: .2rem 0 0 3.05rem; color: #111827; font-size: 1.55rem; font-weight: 800; } .gt-dashboard-statistics .col:nth-child(1) .gt-hero-figure { background-color: #fce7fb; border-color: #e9a7e5; } .gt-dashboard-statistics .col:nth-child(1) .gt-hero-label svg { background-color: #a000bd; color: #fff; } .gt-dashboard-statistics .col:nth-child(2) .gt-hero-figure { background-color: #e8f0ff; border-color: #9bbcff; } .gt-dashboard-statistics .col:nth-child(2) .gt-hero-label svg { background-color: #2563eb; color: #fff; } .gt-dashboard-statistics .col:nth-child(3) .gt-hero-figure { background-color: #fff1e7; border-color: #ffc38f; } .gt-dashboard-statistics .col:nth-child(3) .gt-hero-label svg { background-color: #ed760c; color: #111827; } @media (max-width: 575.98px) { .gt-dashboard-statistics { padding: 1rem .75rem .85rem; } .gt-dashboard-filter { align-items: stretch; flex-direction: column; } .gt-dashboard-filter > div, .gt-dashboard-filter .btn { width: 100%; } } /* Le chiffre que la page met en avant (montant collecté aujourd'hui) — un seul par page. */ .gt-hero-figure { background-color: var(--gt-surface); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow); padding: 1.75rem 2rem; /* Sans ça, les 3 cartes n'ont pas la même hauteur dès qu'un libellé passe sur deux lignes (période affichée plus longue que "Carnets créés") — .col Bootstrap s'étire déjà à la hauteur de la ligne, mais son contenu direct doit explicitement suivre pour en profiter. Même correctif que .gt-stat-tile/.gt-activity-panel un peu plus bas dans ce fichier. */ height: 100%; } .gt-hero-label { color: var(--gt-text-muted); font-size: .95rem; font-weight: 600; } .gt-hero-value { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--gt-primary); margin-top: .25rem; } /* Tuile KPI (compteur/montant secondaire) — plus discrète que le hero figure. */ .gt-stat-tile { background-color: var(--gt-surface); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow-sm); padding: 1.1rem 1.25rem; height: 100%; display: flex; flex-direction: column; gap: .35rem; } .gt-stat-tile-header { display: flex; align-items: center; gap: .5rem; color: var(--gt-text-muted); } .gt-stat-tile-icon { flex-shrink: 0; color: var(--gt-card-accent); } .gt-stat-tile-label { font-size: .85rem; font-weight: 600; } .gt-stat-tile-value { font-size: 1.5rem; font-weight: 700; color: var(--gt-text); } .gt-stat-tile-value.gt-amount-primary { color: var(--gt-primary); } /* Tuiles KPI du tableau de bord (Carnets en cours/livrés, Montant total cotisé, Prêts en cours) — reprennent le même traitement que les 3 tuiles "hero" juste au-dessus (badge d'icône en cercle coloré + fond pastel assorti), pour unifier les deux blocs de la page plutôt que de retomber sur un style neutre. Couleurs non variabilisées et non adaptées au mode sombre, par cohérence volontaire avec .gt-dashboard-statistics .gt-hero-figure (même limitation assumée là-bas). */ .gt-dashboard-kpis .gt-stat-tile-header { color: #111827; } .gt-dashboard-kpis .gt-stat-tile-icon { width: 1.75rem; height: 1.75rem; padding: .35rem; border-radius: 50%; stroke: currentColor; } .gt-dashboard-kpis .gt-stat-tile-value, .gt-dashboard-kpis .gt-stat-tile-value.gt-amount-primary { color: #111827; } .gt-dashboard-kpis .col:nth-child(1) .gt-stat-tile { background-color: #e8f0ff; border-color: #9bbcff; } .gt-dashboard-kpis .col:nth-child(1) .gt-stat-tile-icon { background-color: #2563eb; color: #fff; } .gt-dashboard-kpis .col:nth-child(2) .gt-stat-tile { background-color: #e6f9ef; border-color: #86efac; } .gt-dashboard-kpis .col:nth-child(2) .gt-stat-tile-icon { background-color: #15803d; color: #fff; } .gt-dashboard-kpis .col:nth-child(3) .gt-stat-tile { background-color: #fce7fb; border-color: #e9a7e5; } .gt-dashboard-kpis .col:nth-child(3) .gt-stat-tile-icon { background-color: #a000bd; color: #fff; } .gt-dashboard-kpis .col:nth-child(4) .gt-stat-tile { background-color: #fff1e7; border-color: #ffc38f; } .gt-dashboard-kpis .col:nth-child(4) .gt-stat-tile-icon { background-color: #ed760c; color: #111827; } /* Tuile "point de vigilance" — statut réservé, jamais utilisé pour une donnée métier neutre. */ .gt-alert-tile { background-color: var(--gt-warning-bg); border: 1px solid var(--gt-warning-border); border-radius: var(--gt-radius); padding: 1rem 1.25rem; height: 100%; display: flex; align-items: center; gap: .85rem; } .gt-alert-tile-icon { flex-shrink: 0; color: var(--gt-warning-text); } .gt-alert-tile-value { font-size: 1.4rem; font-weight: 700; color: var(--gt-warning-text); line-height: 1.15; } .gt-alert-tile-label { font-size: .82rem; color: var(--gt-warning-text); opacity: .85; } .gt-alert-tile-link { margin-left: auto; flex-shrink: 0; font-size: .8rem; font-weight: 600; color: var(--gt-warning-text); white-space: nowrap; } /* Variante "frais non payés" — plus grave qu'un simple écart de niveau, voir --gt-danger-*. */ .gt-alert-tile-danger { background-color: var(--gt-danger-bg); border-color: var(--gt-danger-border); } .gt-alert-tile-danger .gt-alert-tile-icon, .gt-alert-tile-danger .gt-alert-tile-value, .gt-alert-tile-danger .gt-alert-tile-label, .gt-alert-tile-danger .gt-alert-tile-link { color: var(--gt-danger-text); } /* Classement des commerciaux (Administrateur/Super Administrateur uniquement). */ .gt-ranking-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--gt-border); } .gt-ranking-row:last-child { border-bottom: none; } .gt-ranking-position { flex-shrink: 0; width: 1.5rem; text-align: center; font-weight: 700; color: var(--gt-text-muted); font-size: .9rem; } .gt-ranking-info { flex: 1; min-width: 0; } .gt-ranking-name { font-weight: 600; color: var(--gt-text); margin-bottom: .25rem; } .gt-ranking-bar-track { background-color: var(--gt-track-bg); border-radius: 999px; height: .4rem; overflow: hidden; } .gt-ranking-bar-fill { background-color: var(--gt-card-accent); height: 100%; border-radius: 999px; } .gt-ranking-amount { flex-shrink: 0; font-weight: 700; color: var(--gt-primary); white-space: nowrap; } /* Listes de détail (mises / carnets créés / frais encaissés) sous les tuiles KPI. */ .gt-activity-panel { background-color: var(--gt-surface); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow-sm); height: 100%; display: flex; flex-direction: column; } .gt-activity-panel-title { padding: .85rem 1rem; border-bottom: 1px solid var(--gt-border); font-size: .85rem; font-weight: 600; color: var(--gt-text-muted); } .gt-activity-panel-list { max-height: 280px; overflow-y: auto; } /* Montants dont la taille de police s'ajuste (gtFitAmounts, wwwroot/js/dashboard.js) pour ne jamais déborder de leur conteneur, quelle que soit la longueur du chiffre affiché — la mesure se fait sur le conteneur parent direct (carte/ligne), pas sur l'élément lui-même, pour rester compatible avec les lignes flex (classement, listes d'activité) sans casser leur mise en page. */ .gt-fit-text { white-space: nowrap; } /* Bouton clair/sombre (ThemeToggle.razor), présent dans MainLayout et LoginLayout. */ .gt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--gt-border); background-color: var(--gt-surface); color: var(--gt-text-muted); cursor: pointer; flex-shrink: 0; padding: 0; } .gt-theme-toggle:hover { border-color: var(--gt-primary); color: var(--gt-primary); } .gt-theme-icon { width: 1.1rem; height: 1.1rem; } .gt-theme-icon-moon { display: none; } :root[data-bs-theme="dark"] .gt-theme-icon-sun { display: none; } :root[data-bs-theme="dark"] .gt-theme-icon-moon { display: block; }