/* * ESS Platform — design system, porté depuis les prototypes HTML validés * (ess-manager-lotm1.html, ess-consolide-c1.html, ess-facturation-fournisseurs.html). * Fichier statique, aucun build requis — chargé après Tailwind CDN dans * layouts/app.blade.php et layouts/guest.blade.php. * * Normalisation : les prototypes utilisaient des noms de variable d'accent * incohérents selon le rôle (--manager-accent, --dfc-accent, --director-accent, * --dg-accent...). Ici une seule variable --role-accent, définie par une * classe .role-* posée sur selon le rôle de l'utilisateur connecté. */ :root { --ess-primary: #1e40af; --ess-primary-dark: #1e3a8a; --ess-primary-light: #dbeafe; --ess-accent: #ea580c; --ess-success: #16a34a; --ess-warning: #f59e0b; --ess-danger: #dc2626; --ess-neutral-50: #f8fafc; --ess-neutral-100: #f1f5f9; --ess-neutral-200: #e2e8f0; --ess-neutral-300: #cbd5e1; --ess-neutral-500: #64748b; --ess-neutral-700: #334155; --ess-neutral-900: #0f172a; /* Repli par défaut si aucune classe .role-* n'est posée */ --role-accent: var(--ess-primary); } /* Accent par rôle (cf. RoleSeeder.php pour la liste exacte des 10 rôles) */ .role-agent { --role-accent: #1e40af; } .role-manager-ess { --role-accent: #7c3aed; } .role-manager-pole { --role-accent: #0891b2; } .role-lead-manager { --role-accent: #c026d3; } .role-directeur { --role-accent: #b45309; } .role-dfc { --role-accent: #166534; } .role-assistante { --role-accent: #be185d; } .role-admin { --role-accent: #0f172a; } .role-support { --role-accent: #475569; } .role-lecture-seule { --role-accent: #64748b; } * { box-sizing: border-box; } [x-cloak] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; background: var(--ess-neutral-100); color: var(--ess-neutral-900); font-size: 14px; line-height: 1.5; } /* ---------- Layout applicatif ---------- */ .app-header { background: linear-gradient(90deg, var(--ess-primary), var(--role-accent)); color: white; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; } .app-header-left { display: flex; align-items: center; gap: 12px; } .app-logo { font-weight: 700; font-size: 15px; } .app-logo-sub { font-size: 11px; opacity: 0.85; } .role-tag-header { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .app-header-right { display: flex; align-items: center; gap: 16px; } .lang-selector { background: rgba(255,255,255,0.15); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; color: white; } .bell-wrapper { position: relative; cursor: pointer; text-decoration: none; color: white; } .bell-badge { position: absolute; top: -4px; right: -6px; background: var(--ess-accent); color: white; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 10px; min-width: 16px; text-align: center; } .user-chip { display: flex; align-items: center; gap: 8px; text-decoration: none; color: white; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ess-accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; } .app-shell { display: flex; min-height: calc(100vh - 56px); } .app-sidebar { width: 240px; background: white; border-right: 1px solid var(--ess-neutral-200); padding: 16px 0; flex-shrink: 0; } .app-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--ess-neutral-700); border-left: 3px solid transparent; text-decoration: none; } .app-sidebar-item:hover { background: var(--ess-neutral-50); } .app-sidebar-item.active { background: var(--ess-neutral-100); color: var(--role-accent); border-left-color: var(--role-accent); font-weight: 600; } .app-sidebar-icon { width: 18px; text-align: center; } .app-sidebar-badge { background: var(--ess-danger); color: white; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; margin-left: auto; } .app-content { flex: 1; padding: 24px; background: var(--ess-neutral-50); overflow-y: auto; } .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--ess-neutral-200); padding: 8px 0; justify-content: space-around; } .mobile-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--ess-neutral-500); text-decoration: none; } .mobile-bottom-nav-item.active { color: var(--role-accent); } @media (max-width: 768px) { .app-sidebar { display: none; } .app-content { padding: 16px; padding-bottom: 72px; } .mobile-bottom-nav { display: flex; } .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .stats-row-6 { grid-template-columns: repeat(2, 1fr); } .ecart-body { grid-template-columns: 1fr; } } /* ---------- Composants généraux ---------- */ .card { background: white; border: 1px solid var(--ess-neutral-200); border-radius: 8px; padding: 16px; } .card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--ess-neutral-900); } .card-subtitle { font-size: 12px; color: var(--ess-neutral-500); margin-bottom: 12px; } .kpi-card { background: white; border: 1px solid var(--ess-neutral-200); border-radius: 8px; padding: 14px; } .kpi-card.alert { border-left: 4px solid var(--ess-danger); } .kpi-card.warning { border-left: 4px solid var(--ess-warning); } .kpi-card.success { border-left: 4px solid var(--ess-success); } .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--ess-neutral-500); letter-spacing: 0.4px; } .kpi-value { font-size: 24px; font-weight: 700; margin: 4px 0; } .kpi-delta { font-size: 11px; font-weight: 600; } .kpi-delta.pos { color: var(--ess-success); } .kpi-delta.neg { color: var(--ess-danger); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; } .badge-success { background: #dcfce7; color: #166534; } .badge-warning { background: #fef3c7; color: #92400e; } .badge-danger { background: #fee2e2; color: #991b1b; } .badge-info { background: #dbeafe; color: #1e3a8a; } .badge-neutral { background: var(--ess-neutral-100); color: var(--ess-neutral-700); } .badge-role { background: var(--ess-neutral-100); color: var(--role-accent); } .btn { padding: 8px 14px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .btn-primary { background: var(--ess-primary); color: white; } .btn-secondary { background: white; color: var(--ess-neutral-700); border-color: var(--ess-neutral-300); } .btn-accent { background: var(--ess-accent); color: white; } .btn-success { background: var(--ess-success); color: white; } .btn-danger { background: var(--ess-danger); color: white; } .btn-role { background: var(--role-accent); color: white; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .input, select.input, textarea.input { width: 100%; padding: 8px 12px; border: 1px solid var(--ess-neutral-300); border-radius: 6px; font-size: 13px; background: white; font-family: inherit; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ess-neutral-700); margin-bottom: 4px; } .form-required { color: var(--ess-danger); } .form-row { margin-bottom: 14px; } .form-help { font-size: 11px; color: var(--ess-neutral-500); margin-top: 4px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .form-error { color: var(--ess-danger); font-size: 11px; margin-top: 4px; } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; padding: 10px 12px; background: var(--ess-neutral-50); font-weight: 600; color: var(--ess-neutral-700); border-bottom: 1px solid var(--ess-neutral-200); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .table td { padding: 10px 12px; border-bottom: 1px solid var(--ess-neutral-100); } .table tr:hover td { background: var(--ess-neutral-50); } .table-wrap { overflow-x: auto; } .alert { padding: 12px 14px; border-radius: 6px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; } .alert-warning { background: #fef3c7; border-left: 4px solid var(--ess-warning); color: #78350f; } .alert-danger { background: #fee2e2; border-left: 4px solid var(--ess-danger); color: #7f1d1d; } .alert-info { background: #dbeafe; border-left: 4px solid var(--ess-primary); color: #1e3a8a; } .alert-success { background: #dcfce7; border-left: 4px solid var(--ess-success); color: #14532d; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .stats-row-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; } .filter-pill-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .filter-pill { padding: 4px 12px; border-radius: 14px; font-size: 12px; cursor: pointer; border: 1px solid var(--ess-neutral-200); background: white; text-decoration: none; color: inherit; } .filter-pill.active { background: var(--role-accent); color: white; border-color: var(--role-accent); } .upload-zone { border: 2px dashed var(--ess-neutral-300); border-radius: 8px; padding: 24px; text-align: center; background: var(--ess-neutral-50); cursor: pointer; } .upload-zone:hover { border-color: var(--role-accent); } .channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .channel-option { border: 1px solid var(--ess-neutral-200); border-radius: 8px; padding: 14px; text-align: center; cursor: pointer; background: white; } .channel-option.selected { border-color: var(--role-accent); background: var(--ess-neutral-50); } .channel-option input[type="radio"] { display: none; } .heatmap-network { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .heatmap-cell { border-radius: 8px; padding: 10px; text-align: center; color: white; font-size: 11px; } .hc-ok { background: #15803d; } .hc-j7 { background: #f59e0b; } .hc-j3 { background: #f97316; } .hc-j1 { background: #dc2626; } .hc-j0 { background: #7f1d1d; } .hc-none { background: var(--ess-neutral-200); color: var(--ess-neutral-500); } .ecart-row { background: white; border: 1px solid var(--ess-neutral-200); border-left: 4px solid; border-radius: 6px; padding: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } .ecart-row.critical { border-left-color: var(--ess-danger); background: #fef2f2; } .ecart-row.significant { border-left-color: var(--ess-warning); background: #fffbeb; } .ecart-row.minor { border-left-color: var(--ess-neutral-500); } .ecart-level-icon { font-size: 18px; } .ecart-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center; } /* ---------- Écrans d'authentification ---------- */ .login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ess-primary), var(--ess-primary-dark)); padding: 20px; } .login-card { background: white; border-radius: 12px; padding: 32px; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .login-logo { text-align: center; margin-bottom: 24px; font-weight: 700; font-size: 18px; color: var(--ess-primary); }