/* ======================================== Raise'Watch - Application Styles Version 5.0 — Phase 5 UI ======================================== */ /* === CSS VARIABLES === */ :root { /* Brand */ --rw-primary: #cc3f2d; --rw-primary-dark: #b33627; --rw-primary-light: #fdf4e4; --rw-primary-shadow: rgba(204, 63, 45, 0.3); --rw-primary-hover-shadow: rgba(204, 63, 45, 0.4); /* Neutrals */ --rw-text: #212121; --rw-text-secondary: #757575; /* WCAG AA: #6b6b6b ≈ 4.9:1 sur fond blanc (ancien #969696 ≈ 2.7:1, sous le seuil). */ --rw-text-light: #6b6b6b; --rw-bg: #fafafa; --rw-white: #ffffff; --rw-surface: #ffffff; --rw-surface-alt: #f5f5f5; --rw-border: #e0e0e0; --rw-border-light: #f5f5f5; --rw-dark: #212121; /* Status */ --rw-success: #4caf50; --rw-success-bg: #e8f5e9; --rw-warning: #ff9800; --rw-warning-rgb: 255, 152, 0; --rw-warning-bg: #fff3e0; --rw-danger: #f44336; --rw-danger-bg: #fdecea; --rw-info: #2196f3; --rw-info-bg: #e3f2fd; /* Shadows */ --rw-shadow: 0 4px 20px rgba(0,0,0,0.08); --rw-shadow-hover: 0 8px 30px rgba(204,63,45,0.15); --rw-shadow-sm: 0 2px 8px rgba(0,0,0,0.05); /* Radius */ --rw-radius: 16px; --rw-radius-sm: 10px; --rw-radius-xs: 6px; --rw-radius-pill: 1000px; /* Typography */ --rw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --rw-font-heading: 'Unbounded', sans-serif; /* Transitions */ --rw-transition: 0.3s ease; /* Safe-area insets (encoche / barre gestuelle iOS) — actifs grâce à viewport-fit=cover dans base.html. Fallback 0px sur les appareils sans encoche. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); } /* === DARK MODE TOKENS === */ /* Activé via [data-theme="dark"] sur (voir app.js). On redéfinit uniquement les variables : tout le CSS qui utilise les tokens suit. */ [data-theme="dark"] { --rw-primary-light: #3a241f; --rw-text: #ececec; --rw-text-secondary: #b5b5b5; --rw-text-light: #9a9a9a; --rw-bg: #16181c; --rw-white: #21242b; --rw-surface: #21242b; --rw-surface-alt: #2a2e36; --rw-border: #3a3f48; --rw-border-light: #2a2e36; --rw-dark: #0f1115; --rw-success-bg: #14301a; --rw-warning-bg: #3a2c12; --rw-danger-bg: #3a1c1a; --rw-info-bg: #10283a; --rw-shadow: 0 4px 20px rgba(0,0,0,0.45); --rw-shadow-hover: 0 8px 30px rgba(0,0,0,0.55); --rw-shadow-sm: 0 2px 8px rgba(0,0,0,0.35); } /* Le header en verre translucide doit s'assombrir en dark mode. */ [data-theme="dark"] header { background: rgba(33, 36, 43, 0.7); border-bottom-color: rgba(58, 63, 72, 0.5); } /* Le select utilise une flèche SVG grise codée en dur : l'éclaircir en dark. */ [data-theme="dark"] select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b5b5b5' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } /* Barres du hamburger (couleur codée via token — ok) et overlay nav mobile (blanc codé en dur). */ [data-theme="dark"] #mobile-nav-dropdown.mobile-nav-open { background: var(--rw-bg); } [data-theme="dark"] .mobile-nav-link { color: var(--rw-text); border-bottom-color: var(--rw-border-light); } [data-theme="dark"] .mobile-nav-link:active { background: var(--rw-surface-alt); } /* === RESET === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* === BASE === */ body { font-family: var(--rw-font-body); background: var(--rw-bg); min-height: 100vh; color: var(--rw-text); line-height: 1.5; } a { color: var(--rw-primary); text-decoration: none; transition: color var(--rw-transition); } a:hover { color: var(--rw-primary-dark); } /* === ACCESSIBILITY: SKIP LINK === */ /* Hidden off-screen until focused, then slides into view at the top-left. */ .skip-link { position: absolute; top: -60px; left: 12px; z-index: 100001; padding: 10px 18px; background: var(--rw-primary); color: var(--rw-white); font-weight: 600; border-radius: var(--rw-radius-sm); box-shadow: var(--rw-shadow); transition: top var(--rw-transition); } .skip-link:focus { top: 12px; color: var(--rw-white); } /* === ACCESSIBILITY: KEYBOARD FOCUS === */ /* Visible focus ring on every interactive element for keyboard users. Uses :focus-visible so mouse clicks don't show the ring, only keyboard nav. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [contenteditable="true"]:focus-visible, .btn:focus-visible, .page-btn:focus-visible, .queue-tab:focus-visible, .queue-item:focus-visible, .pdf-btn:focus-visible, .data-table th.sortable:focus-visible { outline: 3px solid var(--rw-primary); outline-offset: 2px; border-radius: var(--rw-radius-xs); } /* Inputs/selects already draw a colored border on focus — keep the ring subtle and inside so it doesn't clash with the 2px border. */ .form-control:focus-visible { outline: 2px solid var(--rw-primary); outline-offset: 0; } /* === ACCESSIBILITY: REDUCED MOTION === */ /* Respect users who prefer reduced motion: neutralise animations & transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* === HEADER === */ header { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); padding: 16px 40px; box-shadow: var(--rw-shadow-sm); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(224, 224, 224, 0.3); } .header-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--rw-font-heading); font-size: 1.4em; font-weight: 600; color: var(--rw-text); text-decoration: none; } .logo span { color: var(--rw-primary); } .header-controls { display: flex; align-items: center; gap: 8px; } .nav-links { display: flex; gap: 8px; align-items: center; } .nav-links a { display: inline-flex; align-items: center; color: var(--rw-text-secondary); text-decoration: none; font-size: 0.9em; font-weight: 500; padding: 8px 14px; border-radius: var(--rw-radius-sm); transition: all var(--rw-transition); white-space: nowrap; } /* Theme toggle button (dark mode) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--rw-border); border-radius: var(--rw-radius-pill); background: var(--rw-surface); color: var(--rw-text); font-size: 1.1em; line-height: 1; cursor: pointer; transition: background var(--rw-transition), border-color var(--rw-transition); flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--rw-surface-alt); border-color: var(--rw-text-secondary); } .nav-links a:hover { color: var(--rw-primary); background: var(--rw-primary-light); } .nav-links a.active { color: var(--rw-primary); background: var(--rw-primary-light); font-weight: 600; } .nav-links .nav-logout { color: var(--rw-text-light); margin-left: 8px; border-left: 1px solid var(--rw-border); padding-left: 16px; } /* === LAYOUT === */ .container { max-width: 1400px; margin: 0 auto; padding: 30px 40px; } /* Container élargi pour les pages avec tableaux larges (ex: Données Livrées) */ .container-wide { max-width: 95vw; margin: 0 auto; padding: 30px 24px; } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .page-title { font-family: var(--rw-font-heading); font-size: 1.6em; font-weight: 400; color: var(--rw-text); } .page-subtitle { color: var(--rw-text-secondary); font-size: 0.95em; margin-top: 4px; } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: 2px solid transparent; border-radius: var(--rw-radius-pill); font-size: 0.95em; font-weight: 600; font-family: var(--rw-font-body); cursor: pointer; transition: all var(--rw-transition); text-decoration: none; line-height: 1.4; white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .btn-primary { background: var(--rw-primary); color: var(--rw-white); box-shadow: 0 4px 15px var(--rw-primary-shadow); } .btn-primary:hover:not(:disabled) { background: var(--rw-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 25px var(--rw-primary-hover-shadow); } .btn-secondary { background: var(--rw-white); color: var(--rw-primary); border-color: var(--rw-primary); } .btn-secondary:hover:not(:disabled) { background: var(--rw-primary-light); transform: translateY(-1px); } .btn-success { background: var(--rw-success); color: var(--rw-white); } .btn-success:hover:not(:disabled) { background: #43a047; transform: translateY(-1px); } .btn-danger { background: var(--rw-danger); color: var(--rw-white); } .btn-danger:hover:not(:disabled) { background: #e53935; transform: translateY(-1px); } .btn-warning { background: var(--rw-warning); color: var(--rw-white); } .btn-warning:hover:not(:disabled) { background: #f57c00; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--rw-text-secondary); border-color: var(--rw-border); } .btn-ghost:hover:not(:disabled) { color: var(--rw-text); border-color: var(--rw-text-secondary); } .btn-sm { padding: 6px 16px; font-size: 0.85em; } .btn-lg { padding: 14px 36px; font-size: 1.05em; } .btn-icon { padding: 8px; border-radius: var(--rw-radius-sm); min-width: 36px; justify-content: center; } /* === FORMS === */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 0.85em; font-weight: 600; color: var(--rw-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .form-control { width: 100%; padding: 10px 14px; border: 2px solid var(--rw-border); border-radius: var(--rw-radius-sm); font-size: 0.95em; font-family: var(--rw-font-body); color: var(--rw-text); background: var(--rw-white); transition: border-color var(--rw-transition); outline: none; } .form-control:focus { border-color: var(--rw-primary); } .form-control:disabled, .form-control[readonly] { background: var(--rw-bg); color: var(--rw-text-secondary); } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } textarea.form-control { resize: vertical; min-height: 80px; } .form-inline { display: flex; gap: 12px; align-items: flex-end; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* === SEARCH === */ .search-box { position: relative; } .search-box input { padding-left: 40px; } .search-box::before { content: "\1F50D"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 0.9em; opacity: 0.5; } /* === CARDS === */ .card { background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); overflow: hidden; } .card-header { padding: 20px 24px; border-bottom: 2px solid var(--rw-border-light); display: flex; justify-content: space-between; align-items: center; } .card-header h3 { font-family: var(--rw-font-heading); font-size: 1.1em; font-weight: 400; } .card-body { padding: 24px; } .card-footer { padding: 16px 24px; border-top: 2px solid var(--rw-border-light); display: flex; justify-content: flex-end; gap: 12px; } /* === DATA TABLE === */ .table-wrapper { overflow-x: auto; background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .data-table th { background: var(--rw-bg); padding: 14px 16px; text-align: left; font-weight: 600; color: var(--rw-text-secondary); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; border-bottom: 2px solid var(--rw-border); user-select: none; } .data-table th.sortable { cursor: pointer; transition: color var(--rw-transition); } .data-table th.sortable:hover { color: var(--rw-primary); } .data-table th.sorted-asc::after { content: " \2191"; color: var(--rw-primary); } .data-table th.sorted-desc::after { content: " \2193"; color: var(--rw-primary); } .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--rw-border-light); vertical-align: middle; } .data-table tbody tr { transition: background var(--rw-transition); } .data-table tbody tr:hover { background: rgba(204, 63, 45, 0.03); } .data-table tbody tr.clickable { cursor: pointer; } .data-table tbody tr.clickable:hover { background: rgba(204, 63, 45, 0.06); } .data-table .cell-name { font-weight: 600; color: var(--rw-text); } .data-table .cell-secondary { color: var(--rw-text-secondary); font-size: 0.9em; } .data-table .cell-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.85em; letter-spacing: 0.5px; } /* Variante compacte pour tableaux à nombreuses colonnes */ .data-table-compact th { padding: 10px 10px; font-size: 0.8em; } .data-table-compact td { padding: 9px 10px; font-size: 0.88em; } /* Colonnes sticky à droite (Scan, Actions) */ .data-table .col-sticky-right { position: sticky; right: 0; background: var(--rw-white); z-index: 2; box-shadow: -2px 0 4px rgba(0, 0, 0, 0.04); } .data-table .col-sticky-right-2 { position: sticky; right: 0; background: var(--rw-white); z-index: 2; } .data-table .col-sticky-right-1 { position: sticky; right: 48px; background: var(--rw-white); z-index: 2; box-shadow: -2px 0 4px rgba(0, 0, 0, 0.04); } .data-table thead .col-sticky-right, .data-table thead .col-sticky-right-1, .data-table thead .col-sticky-right-2 { background: var(--rw-bg); z-index: 3; } .data-table tbody tr:hover .col-sticky-right, .data-table tbody tr:hover .col-sticky-right-1, .data-table tbody tr:hover .col-sticky-right-2 { background: #fef7f6; } .table-empty { text-align: center; padding: 60px 20px; color: var(--rw-text-secondary); } .table-empty-icon { font-size: 3em; margin-bottom: 12px; display: block; opacity: 0.5; } /* === UNIFIED EMPTY STATE === */ /* Composant d'état vide réutilisable : icône + titre + sous-texte + CTA optionnel. */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; color: var(--rw-text-secondary); } .empty-state-icon { font-size: 3.5em; line-height: 1; margin-bottom: 16px; opacity: 0.5; } .empty-state-title { font-family: var(--rw-font-heading); font-weight: 400; font-size: 1.2em; color: var(--rw-text); margin-bottom: 8px; } .empty-state-text { font-size: 0.95em; color: var(--rw-text-secondary); max-width: 420px; } .empty-state-cta { margin-top: 20px; } /* === STATUS BADGES === */ .badge { display: inline-block; padding: 4px 12px; border-radius: var(--rw-radius-pill); font-size: 0.8em; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; } .badge-valid, .badge-approved { background: var(--rw-success-bg); color: var(--rw-success); } .badge-pending, .badge-processing { background: var(--rw-warning-bg); color: var(--rw-warning); } .badge-rejected, .badge-error { background: var(--rw-danger-bg); color: var(--rw-danger); } .badge-flagged { background: #fff3e0; color: #e65100; } .badge-incomplete { background: var(--rw-info-bg); color: var(--rw-info); } .badge-signed { background: var(--rw-success-bg); color: var(--rw-success); } .badge-unsigned { background: var(--rw-danger-bg); color: var(--rw-danger); } .badge-to-verify { background: var(--rw-warning-bg); color: var(--rw-warning); } .badge-new { background: var(--rw-info-bg); color: var(--rw-info); } .badge-confirmed { background: var(--rw-success-bg); color: var(--rw-success); } .badge-conflict { background: var(--rw-danger-bg); color: var(--rw-danger); } .badge-duplicate { background: var(--rw-text-secondary); color: var(--rw-white); } .badge-neutral { background: var(--rw-border-light); color: var(--rw-text-secondary); } .badge-success { background: var(--rw-success-bg); color: var(--rw-success); } .badge-info { background: var(--rw-info-bg); color: var(--rw-info); } /* === FILTER BAR === */ .filter-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; padding: 16px 20px; background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); } .filter-bar .form-control { width: auto; min-width: 160px; } .filter-bar .search-input { flex: 1; min-width: 200px; } .filter-count { margin-left: auto; color: var(--rw-text-secondary); font-size: 0.9em; font-weight: 500; } /* === PAGINATION === */ .pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 24px; } .pagination .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border: 2px solid var(--rw-border); border-radius: var(--rw-radius-sm); background: var(--rw-white); color: var(--rw-text-secondary); font-size: 0.85em; font-weight: 500; cursor: pointer; transition: all var(--rw-transition); font-family: var(--rw-font-body); } .pagination .page-btn:hover:not(:disabled):not(.active) { border-color: var(--rw-primary); color: var(--rw-primary); } .pagination .page-btn.active { background: var(--rw-primary); border-color: var(--rw-primary); color: var(--rw-white); } .pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .pagination .page-info { padding: 0 12px; color: var(--rw-text-secondary); font-size: 0.85em; } /* === UPLOAD ZONE === */ .upload-zone { border: 3px dashed var(--rw-border); border-radius: var(--rw-radius); padding: 60px 40px; text-align: center; cursor: pointer; transition: all var(--rw-transition); background: var(--rw-white); } .upload-zone:hover { border-color: var(--rw-primary); background: rgba(204, 63, 45, 0.02); } .upload-zone.dragover { border-color: var(--rw-primary); background: var(--rw-primary-light); transform: scale(1.01); } .upload-zone-icon { font-size: 4em; margin-bottom: 16px; display: block; opacity: 0.6; } .upload-zone-title { font-family: var(--rw-font-heading); font-size: 1.3em; font-weight: 400; color: var(--rw-text); margin-bottom: 8px; } .upload-zone-subtitle { color: var(--rw-text-secondary); font-size: 0.95em; } .upload-zone input[type="file"] { display: none; } /* File queue */ .file-queue { margin-top: 24px; } .file-item { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--rw-white); border-radius: var(--rw-radius-sm); box-shadow: var(--rw-shadow-sm); margin-bottom: 8px; animation: slideIn 0.3s ease; } .file-item-icon { font-size: 1.5em; flex-shrink: 0; } .file-item-info { flex: 1; min-width: 0; } .file-item-name { font-weight: 600; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item-meta { font-size: 0.8em; color: var(--rw-text-secondary); margin-top: 2px; } .file-item-status { flex-shrink: 0; font-size: 0.85em; font-weight: 600; } .file-item-status.success { color: var(--rw-success); } .file-item-status.error { color: var(--rw-danger); } .file-item-status.processing { color: var(--rw-warning); } .file-item-status.duplicate { color: var(--rw-text-secondary); } /* Progress bar */ .progress-bar { width: 120px; height: 6px; background: var(--rw-border-light); border-radius: 3px; overflow: hidden; flex-shrink: 0; } .progress-fill { height: 100%; background: var(--rw-primary); border-radius: 3px; transition: width 0.5s ease; } .progress-fill.complete { background: var(--rw-success); } .progress-fill.error { background: var(--rw-danger); } /* --- Pipeline tracker (Phase 8) --- */ .pipeline-tracker { margin-top: 8px; transition: opacity 0.6s ease, max-height 0.6s ease; max-height: 200px; overflow: hidden; } .pipeline-tracker.pipeline-done { opacity: 0.4; max-height: 40px; } .pipeline-steps { display: flex; gap: 4px; margin-bottom: 6px; } .pipeline-step { display: flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; font-size: 11px; color: var(--rw-text-secondary); background: var(--rw-border-light); transition: all 0.3s ease; white-space: nowrap; } .pipeline-step.active { color: var(--rw-primary); background: rgba(99, 102, 241, 0.12); font-weight: 600; animation: stepPulse 1.5s ease-in-out infinite; } .pipeline-step.completed { color: var(--rw-success); background: rgba(34, 197, 94, 0.08); } .pipeline-step.error-step { color: var(--rw-danger); background: rgba(239, 68, 68, 0.1); } .pipeline-step-icon { font-size: 12px; } .pipeline-step-label { font-size: 10px; } .pipeline-progress-bar { width: 100%; height: 4px; background: var(--rw-border-light); border-radius: 2px; overflow: hidden; } .pipeline-progress-fill { height: 100%; background: var(--rw-primary); border-radius: 2px; transition: width 0.6s ease; } .pipeline-progress-fill.complete { background: var(--rw-success); } .pipeline-progress-fill.error { background: var(--rw-danger); } @keyframes stepPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Warning status (needs_validation) */ .file-item-status.warning { color: var(--rw-warning); } /* Upload summary */ .upload-summary { display: flex; gap: 20px; justify-content: center; margin-top: 24px; padding: 20px; background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); } .upload-summary-item { text-align: center; } .upload-summary-value { font-family: var(--rw-font-heading); font-size: 1.8em; font-weight: 600; } .upload-summary-label { font-size: 0.8em; color: var(--rw-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* === SPLIT VIEW (Detail page) === */ .split-view { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-height: calc(100vh - 200px); } .split-left { position: sticky; top: 80px; height: calc(100vh - 120px); } .split-right { overflow-y: auto; padding-bottom: 40px; } /* PDF Viewer */ .pdf-viewer { width: 100%; height: 100%; border-radius: var(--rw-radius); overflow: hidden; background: #525659; box-shadow: var(--rw-shadow); display: flex; flex-direction: column; } .pdf-viewer embed, .pdf-viewer iframe, .pdf-viewer object { width: 100%; height: 100%; border: none; } .pdf-viewer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--rw-text-light); } .pdf-viewer-empty-icon { font-size: 4em; margin-bottom: 16px; opacity: 0.5; } /* Field groups (editable data) */ .field-group { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rw-border-light); } .field-group:last-child { border-bottom: none; } .field-label { font-size: 0.85em; color: var(--rw-text-secondary); font-weight: 500; min-width: 120px; } .field-value { font-weight: 600; color: var(--rw-text); text-align: right; flex: 1; } .field-value.editable { cursor: pointer; padding: 4px 8px; border-radius: var(--rw-radius-xs); transition: background var(--rw-transition); } .field-value.editable:hover { background: var(--rw-primary-light); } .field-input { padding: 6px 10px; border: 2px solid var(--rw-primary); border-radius: var(--rw-radius-xs); font-size: 0.95em; font-family: var(--rw-font-body); width: 100%; max-width: 250px; text-align: right; outline: none; } /* Association dropdown field */ .field-group-association { flex-wrap: wrap; gap: 8px; } .field-group-association select { padding: 6px 10px; border: 1px solid var(--rw-border); border-radius: var(--rw-radius-xs); font-size: 0.9em; font-family: var(--rw-font-body); background: var(--rw-bg); min-width: 200px; cursor: pointer; } .field-group-association select:focus { border-color: var(--rw-primary); outline: none; } .field-hint { font-size: 0.8em; margin-left: auto; } /* Matching info */ .matching-card { margin-top: 16px; } .match-score { font-family: var(--rw-font-heading); font-size: 2em; font-weight: 600; color: var(--rw-primary); } .match-method { font-size: 0.85em; color: var(--rw-text-secondary); } /* Signature zone */ .signature-zone { margin-top: 16px; text-align: center; } .signature-image { max-width: 100%; max-height: 200px; border-radius: var(--rw-radius-sm); border: 2px solid var(--rw-border); background: var(--rw-white); padding: 8px; } .signature-placeholder { padding: 40px; color: var(--rw-text-light); font-size: 0.9em; } /* === VALIDATION LAYOUT === */ .validation-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: calc(100vh - 200px); } /* Queue sidebar */ .queue-sidebar { background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); display: flex; flex-direction: column; max-height: calc(100vh - 120px); position: sticky; top: 80px; } .queue-header { padding: 20px; border-bottom: 2px solid var(--rw-border-light); } .queue-header h3 { font-family: var(--rw-font-heading); font-size: 1em; font-weight: 400; } .queue-count { font-size: 0.85em; color: var(--rw-text-secondary); margin-top: 4px; } /* Queue tabs */ .queue-tabs { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 2px solid var(--rw-border-light); padding-bottom: 0; flex-wrap: nowrap; overflow: hidden; } .queue-tab { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border: none; background: transparent; color: var(--rw-text-secondary); font-size: 0.82em; font-weight: 500; font-family: var(--rw-font-body); cursor: pointer; transition: all var(--rw-transition); border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: var(--rw-radius-xs) var(--rw-radius-xs) 0 0; white-space: nowrap; flex-shrink: 0; } .queue-tab:hover { color: var(--rw-primary); background: var(--rw-primary-light); } .queue-tab.active { color: var(--rw-primary); border-bottom-color: var(--rw-primary); font-weight: 600; } .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--rw-border-light); border-radius: var(--rw-radius-pill); font-size: 0.75em; font-weight: 600; color: var(--rw-text-secondary); } .queue-tab.active .tab-count { background: var(--rw-primary); color: var(--rw-white); } /* Rejected info in action bar */ .rejection-info { flex: 1; font-size: 0.9em; text-align: right; } .queue-list { flex: 1; overflow-y: auto; padding: 8px; } .queue-item { display: block; padding: 14px 16px; border-radius: var(--rw-radius-sm); cursor: pointer; transition: all var(--rw-transition); margin-bottom: 4px; border: 2px solid transparent; } .queue-item:hover { background: var(--rw-bg); } .queue-item.active { background: var(--rw-primary-light); border-color: var(--rw-primary); } .queue-item-name { font-weight: 600; font-size: 0.9em; color: var(--rw-text); margin-bottom: 4px; } .queue-item-meta { font-size: 0.8em; color: var(--rw-text-secondary); display: flex; gap: 8px; align-items: center; } .queue-item-reason { font-size: 0.72em; font-weight: 500; color: var(--rw-warning, #d97706); margin-top: 2px; line-height: 1.3; } .queue-item-date { font-size: 0.75em; color: var(--rw-text-light); margin-top: 4px; } .queue-pagination { padding: 12px 20px; border-top: 2px solid var(--rw-border-light); display: flex; justify-content: center; gap: 8px; } /* Validation detail panel */ .validation-detail { display: flex; flex-direction: column; gap: 20px; } /* Action bar */ .action-bar { display: flex; gap: 12px; padding: 20px 24px; background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); align-items: center; flex-wrap: wrap; } .action-bar .btn { flex: 1; justify-content: center; min-width: 120px; } .action-bar-notes { width: 100%; margin-top: 8px; } /* Boutons mobile-only (nav liste↔détail + accordéon PDF) — masqués sur desktop. Ils ne s'affichent que sous le breakpoint mobile (voir @media max-width:768px). */ .btn-mobile-back, .pdf-accordion-toggle { display: none; } /* Keyboard hints */ .kbd { display: inline-block; padding: 2px 8px; background: var(--rw-bg); border: 1px solid var(--rw-border); border-radius: 4px; font-size: 0.75em; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--rw-text-secondary); font-weight: 600; line-height: 1.6; vertical-align: middle; margin-left: 4px; } .shortcuts-hint { display: flex; gap: 16px; justify-content: center; padding: 12px; color: var(--rw-text-secondary); font-size: 0.8em; } .shortcuts-hint span { display: inline-flex; align-items: center; gap: 4px; } /* === KPI CARDS (Dashboard) === */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; } .kpi-card { background: var(--rw-white); padding: 28px 24px; border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); text-align: center; transition: transform var(--rw-transition), box-shadow var(--rw-transition); animation: fadeInUp 0.8s ease; } .kpi-card:hover { transform: translateY(-4px); box-shadow: var(--rw-shadow-hover); } .kpi-icon { font-size: 2em; margin-bottom: 10px; display: block; } .kpi-value { font-family: var(--rw-font-heading); font-size: 2.2em; font-weight: 600; color: var(--rw-primary); margin-bottom: 4px; } .kpi-label { font-size: 0.85em; color: var(--rw-text-secondary); font-weight: 500; } .kpi-card.compact { padding: 16px 20px; transition: background var(--rw-transition); cursor: pointer; } .kpi-card.compact:hover { background: var(--rw-primary-light); } .kpi-card.compact .kpi-value { font-size: 1.8em; margin-bottom: 2px; } .kpi-card.compact:hover .kpi-value { color: var(--rw-primary); } /* KPI Card Link wrapper */ .kpi-card-link { display: block; text-decoration: none; color: inherit; } .kpi-card-link:hover { color: inherit; } /* Detail stats grid (Dashboard) */ .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .detail-card { background: var(--rw-white); padding: 24px; border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); } .detail-card h3 { font-family: var(--rw-font-heading); font-size: 1em; font-weight: 400; color: var(--rw-text); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--rw-border-light); } /* Association stats table */ .assoc-stats-card { position: relative; z-index: 1; margin-bottom: 32px; clear: both; } .assoc-stats-table-wrapper { overflow-x: auto; } .assoc-stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .assoc-stats-table th { padding: 8px 10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rw-text-secondary, #6b7280); border-bottom: 2px solid var(--rw-border-light, #e5e7eb); background: var(--rw-bg-secondary, #f9fafb); white-space: nowrap; } .assoc-stats-table td { padding: 8px 10px; border-bottom: 1px solid var(--rw-border-light, #e5e7eb); color: var(--rw-text, #1f2937); } .assoc-stats-table tbody tr:hover { background: var(--rw-bg-secondary, #f9fafb); } .assoc-stats-table .assoc-code-cell { min-width: 100px; } .assoc-stats-table .cell-warning { color: var(--rw-warning, #d97706); font-weight: 600; } .assoc-stats-table .cell-processing { color: var(--rw-primary, #2563eb); font-weight: 600; } .assoc-totals-row { background: var(--rw-bg-secondary, #f9fafb); } .assoc-totals-row td { border-top: 2px solid var(--rw-border-light, #e5e7eb); border-bottom: none; } .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rw-border-light); } .stat-row:last-child { border-bottom: none; } .stat-label { color: var(--rw-text-secondary); font-size: 0.9em; } .stat-value { font-weight: 600; color: var(--rw-text); } .stat-value.accent { color: var(--rw-primary); } /* Hero section (Dashboard landing) */ .hero { text-align: center; margin-bottom: 60px; } .status-badge-hero { display: inline-block; background: var(--rw-primary-light); color: var(--rw-primary); padding: 8px 20px; border-radius: var(--rw-radius-pill); font-weight: 600; font-size: 0.9em; margin-bottom: 24px; border: 2px solid var(--rw-primary); } .hero h1 { font-family: var(--rw-font-heading); font-size: 3em; color: var(--rw-text); margin-bottom: 16px; font-weight: 600; line-height: 1.2; } .hero h1 .accent { color: var(--rw-primary); } .hero .tagline { font-size: 1.2em; color: var(--rw-text-secondary); font-weight: 400; } /* Section title (Dashboard) */ .section-title { font-family: var(--rw-font-heading); font-size: 1.4em; font-weight: 400; color: var(--rw-text); margin-bottom: 24px; text-align: center; } /* Features grid (Dashboard) */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 40px; } .feature-card { background: var(--rw-white); padding: 32px 24px; border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); text-align: center; transition: transform var(--rw-transition), box-shadow var(--rw-transition); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--rw-shadow-hover); } .feature-icon { font-size: 2.5em; margin-bottom: 16px; display: block; } .feature-card h3 { font-family: var(--rw-font-heading); color: var(--rw-text); margin-bottom: 12px; font-size: 1.1em; font-weight: 400; } .feature-card p { color: var(--rw-text-secondary); font-size: 0.9em; line-height: 1.6; } /* CTA container (Dashboard) */ .cta-container { text-align: center; margin-top: 40px; } /* Login card */ .login-card { max-width: 420px; margin: 0 auto 40px; background: var(--rw-white); padding: 40px; border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); } .login-card h2 { font-family: var(--rw-font-heading); font-size: 1.3em; font-weight: 400; color: var(--rw-text); margin-bottom: 24px; text-align: center; } .login-error { display: none; background: var(--rw-danger-bg); color: var(--rw-danger); padding: 10px 16px; border-radius: var(--rw-radius-xs); font-size: 0.9em; margin-bottom: 16px; } /* Password field with show/hide toggle */ .password-field { position: relative; } .password-field .form-control { padding-right: 44px; } .password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; border-radius: var(--rw-radius-xs); opacity: 0.55; transition: opacity var(--rw-transition), background var(--rw-transition); } .password-toggle:hover { opacity: 1; background: var(--rw-surface-alt); } .password-toggle[aria-pressed="true"] { opacity: 1; } .btn-login { width: 100%; background: var(--rw-primary); color: var(--rw-white); padding: 14px; border: none; border-radius: var(--rw-radius-pill); font-size: 1em; font-weight: 600; font-family: var(--rw-font-body); cursor: pointer; transition: all var(--rw-transition); box-shadow: 0 4px 15px var(--rw-primary-shadow); } .btn-login:hover { background: var(--rw-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 25px var(--rw-primary-hover-shadow); } /* === TOAST NOTIFICATIONS === */ .toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 400px; /* CRITICAL: prevent empty container from intercepting touches on iOS Safari */ pointer-events: none; } .toast { pointer-events: auto; /* Re-enable on actual toast children */ } .toast { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--rw-radius-sm); box-shadow: 0 4px 20px rgba(0,0,0,0.15); animation: slideIn 0.3s ease; font-size: 0.9em; font-weight: 500; cursor: pointer; } .toast-success { background: var(--rw-success); color: var(--rw-white); } .toast-error { background: var(--rw-danger); color: var(--rw-white); } .toast-warning { background: var(--rw-warning); color: var(--rw-white); } .toast-info { background: var(--rw-info); color: var(--rw-white); } .toast-icon { font-size: 1.2em; flex-shrink: 0; } .toast-message { flex: 1; } /* === MODAL === */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; } .modal { background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 500px; width: 90%; animation: scaleIn 0.3s ease; } .modal-header { padding: 20px 24px; border-bottom: 2px solid var(--rw-border-light); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-family: var(--rw-font-heading); font-size: 1.1em; font-weight: 400; } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 2px solid var(--rw-border-light); display: flex; justify-content: flex-end; gap: 12px; } /* === LOADING STATES === */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--rw-border); border-top-color: var(--rw-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .loading-spinner.lg { width: 40px; height: 40px; border-width: 4px; } .skeleton { background: linear-gradient(90deg, var(--rw-border-light) 25%, var(--rw-border) 50%, var(--rw-border-light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--rw-radius-xs); } /* Skeleton line placeholder (dans les cellules de tableau pendant le chargement). */ .skeleton-line { display: block; height: 12px; width: 100%; background: linear-gradient(90deg, var(--rw-border-light) 25%, var(--rw-border) 50%, var(--rw-border-light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--rw-radius-xs); } /* Variantes de largeur pour un rendu moins uniforme. */ .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; } .skeleton-row td { padding: 12px 16px; } .page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; color: var(--rw-text-secondary); gap: 16px; } /* === UTILITY CLASSES === */ /* Layout grid helpers (remplacent les style="grid-template-columns..." inline) */ .grid-2 { grid-template-columns: 1fr 1fr; } .col-span-2 { grid-column: span 2; } /* Typo helpers */ .text-sm { font-size: 0.9em; } .text-xs { font-size: 0.85em; } /* Sizing helpers */ .w-auto { width: auto; } .min-w-70 { min-width: 70px; } /* Flex helper */ .flex-wrap { flex-wrap: wrap; } .text-center { text-align: center; } .text-right { text-align: right; } .text-secondary { color: var(--rw-text-secondary); } .text-success { color: var(--rw-success); } .text-danger { color: var(--rw-danger); } .text-warning { color: var(--rw-warning); } .text-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em; } .font-heading { font-family: var(--rw-font-heading); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .hidden { display: none !important; } /* Visible only to screen readers (captions, contextual labels). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === ANIMATIONS === */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* === FOOTER === */ footer { background: var(--rw-dark); color: var(--rw-text-light); text-align: center; padding: 30px 20px; margin-top: 60px; font-size: 0.9em; } footer a { color: var(--rw-primary); text-decoration: none; } footer a:hover { text-decoration: underline; } /* === PDF.js VIEWER (Phase 9) === */ .pdf-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #3b3b3b; border-bottom: 1px solid #555; flex-shrink: 0; flex-wrap: wrap; } .pdf-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--rw-radius-xs); background: rgba(255,255,255,0.1); color: #e0e0e0; font-size: 1em; cursor: pointer; transition: background 0.15s; } .pdf-btn:hover { background: rgba(255,255,255,0.2); } .pdf-btn:active { background: rgba(255,255,255,0.3); } .pdf-page-info, .pdf-zoom-info { color: #ccc; font-size: 0.8em; font-family: var(--rw-font-body); white-space: nowrap; user-select: none; } .pdf-separator { width: 1px; height: 20px; background: #555; margin: 0 4px; } .pdf-canvas-container { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 12px; background: #525659; } .pdf-canvas-container canvas { box-shadow: 0 2px 12px rgba(0,0,0,0.4); max-width: 100%; height: auto; } /* === VALIDATION SPLIT VIEW (Phase 9) === */ .validation-split { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; min-height: calc(100vh - 200px); } .validation-pdf { position: sticky; top: 80px; height: calc(100vh - 120px); } .validation-pdf .pdf-viewer { height: 100%; } /* Bordure rouge si IGLOO sans IBAN */ .validation-pdf.igloo-missing-iban .pdf-viewer { border: 3px solid var(--rw-danger); box-shadow: 0 0 20px rgba(244, 67, 54, 0.3); } /* Bordure verte si IGLOO avec IBAN */ .validation-pdf.igloo-has-iban .pdf-viewer { border: 3px solid var(--rw-success); box-shadow: 0 0 20px rgba(76, 175, 80, 0.3); } .validation-data { overflow-y: auto; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; } /* === FIELD CONFIDENCE INDICATORS (Phase 10) === */ .field-confidence { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .confidence-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .confidence-dot.high { background: var(--rw-success); } .confidence-dot.medium { background: var(--rw-warning); } .confidence-dot.low { background: var(--rw-danger); } .confidence-label { font-size: 0.7em; color: var(--rw-text-light); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Low/medium confidence field highlighting */ .field-value.low-confidence { color: var(--rw-danger); position: relative; } .field-value.low-confidence::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--rw-danger); border-radius: 1px; opacity: 0.5; } .field-value.medium-confidence { color: var(--rw-warning); } /* IBAN invalid highlight */ .field-value.iban-invalid { color: var(--rw-danger); font-weight: 700; } /* === EXPORT: ASSOCIATION BUTTONS === */ /* Boutons de choix d'association (remplacent les style="background/color/border" inline). Chaque association garde sa couleur identitaire via un token dédié. */ .btn-assoc { border-width: 2px; border-style: solid; } /* Selected association: stronger ring so the active choice is obvious. */ .btn-assoc.active { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12), var(--rw-shadow-sm); font-weight: 700; } .btn-assoc-msf { background: rgba(220, 53, 69, 0.25); color: #8f1520; border-color: #a71d2a; } .btn-assoc-patouch { background: rgba(255, 193, 7, 0.3); color: #6d5100; border-color: #d39e00; } .btn-assoc-fsd { background: rgba(23, 162, 184, 0.25); color: #0a4650; border-color: #117a8b; } .btn-assoc-fsd-fr { background: rgba(135, 206, 235, 0.35); color: #1b5f8a; border-color: #5ba3c8; } .btn-assoc-fsd-de { background: rgba(255, 215, 0, 0.3); color: #6f5310; border-color: #d4a017; } .btn-assoc-mdm { background: rgba(0, 31, 92, 0.2); color: #001f5c; border-color: #001f5c; } .btn-assoc-helpcode { background: rgba(255, 140, 0, 0.25); color: #a34600; border-color: #e67300; } /* === EXPORT PROGRESS (Phase 11) === */ .export-progress-section { margin-top: 16px; } .export-progress-bar { width: 100%; height: 24px; background: var(--rw-surface-alt); border-radius: 12px; overflow: hidden; position: relative; } .export-progress-fill { height: 100%; background: var(--rw-primary); border-radius: 12px; transition: width 0.4s ease; min-width: 0; } .export-progress-fill.complete { background: var(--rw-success); } .export-progress-fill.error { background: var(--rw-danger); } .export-progress-info { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 0.85em; color: var(--rw-text-secondary); } /* === PREVIEW FULLSCREEN === */ .preview-fullscreen { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; margin: 0 !important; border-radius: 0 !important; background: var(--rw-bg); overflow: hidden; display: flex; flex-direction: column; } .preview-fullscreen > .card { flex: 1; display: flex; flex-direction: column; border-radius: 0 !important; border: none !important; height: 100%; } .preview-fullscreen > .card > .card-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .preview-fullscreen #preview-sheet-content { max-height: none !important; flex: 1; overflow: auto; } /* === PREVIEW EDITABLE CELLS === */ .preview-table td[contenteditable="true"] { cursor: text; outline: none; transition: background 0.15s; } .preview-table td[contenteditable="true"]:hover { background: rgba(99,102,241, 0.08); } .preview-table td[contenteditable="true"]:focus { background: rgba(99,102,241, 0.15); box-shadow: inset 0 0 0 2px var(--rw-primary); } /* === VALIDATION COUNTER (Phase 12) === */ .validation-counter { display: flex; gap: 16px; flex-wrap: wrap; } .counter-item { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 8px; background: var(--rw-surface); border: 1px solid var(--rw-border); min-width: 80px; } .counter-value { font-size: 1.5em; font-weight: 700; font-family: var(--rw-font-heading); line-height: 1.2; } .counter-label { font-size: 0.75em; color: var(--rw-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .counter-validated .counter-value { color: var(--rw-primary); } .counter-pending .counter-value { color: var(--rw-warning); } .counter-approved .counter-value { color: var(--rw-success); } .counter-rejected .counter-value { color: var(--rw-danger); } .counter-deleted .counter-value { color: var(--text-muted, #9ca3af); } /* === QUEUE SORT TOGGLE (Phase 12) === */ .queue-sort-toggle { display: flex; gap: 4px; } .queue-sort-toggle .btn { padding: 4px 10px; font-size: 0.75em; border-radius: 6px; } .queue-sort-toggle .btn.active { background: var(--rw-primary); color: #fff; } /* === BATCH VALIDATION BAR (Phase 12) === */ .batch-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--rw-surface-alt); border-radius: 8px; margin-top: 8px; flex-wrap: wrap; } .batch-select-all { display: flex; align-items: center; gap: 6px; font-size: 0.85em; cursor: pointer; white-space: nowrap; } .batch-select-all input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .batch-actions { display: flex; gap: 6px; margin-left: auto; } /* === IGLOO COMPARISON TABLE (Phase 12) === */ .igloo-comparison-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .igloo-comparison-table th, .igloo-comparison-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--rw-border); } .igloo-comparison-table th { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--rw-text-secondary); font-weight: 600; } .igloo-comparison-table tr:last-child td { border-bottom: none; } .igloo-mismatch { background: rgba(var(--rw-warning-rgb, 245, 166, 35), 0.08); } .igloo-mismatch td { color: var(--rw-warning); font-weight: 500; } .igloo-match-icon { text-align: center; font-size: 1.1em; } /* === QUEUE ITEM CHECKBOX (Phase 12) === */ .queue-item-check { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } /* === HAMBURGER MENU BUTTON === */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 100000; position: relative; -webkit-tap-highlight-color: transparent; } .hamburger span { display: block; width: 24px; height: 2.5px; background: var(--rw-text); border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile nav panel — display:none by default, JS shows/hides */ .nav-mobile { display: none; } .nav-mobile a { color: #757575; text-decoration: none; font-size: 1em; font-weight: 500; padding: 14px 18px; border-radius: 10px; min-height: 48px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.1); } /* Server-rendered mobile nav — styles only applied when OPEN via .mobile-nav-open class. CRITICAL: Do NOT put position/z-index/dimensions on #mobile-nav-dropdown by default. iOS Safari creates ghost compositing layers for position:fixed elements even when display:none, which intercepts ALL touch events on the page. */ #mobile-nav-dropdown { display: none; /* CRITICAL: No position/z-index/dimensions here. iOS Safari creates ghost compositing layers for position:fixed elements even with display:none. */ } #mobile-nav-dropdown.mobile-nav-open { display: block !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; background: #ffffff; z-index: 99999; padding: 80px 24px 40px; overflow-y: auto; } .mobile-nav-link { display: block; padding: 16px 12px; color: #212121; font-weight: 500; font-size: 1.15em; text-decoration: none; border-bottom: 1px solid #f0f0f0; } .mobile-nav-link:active { background: #f0f0f0; } .mobile-nav-link.active { color: #cc3f2d; font-weight: 600; } .mobile-nav-logout { color: #6b6b6b !important; margin-top: 16px; border-top: 2px solid #e0e0e0; border-bottom: none; } .nav-mobile a.active { color: #cc3f2d; background: #fdf4e4; font-weight: 600; } .nav-mobile .nav-logout { color: #6b6b6b; margin-top: 16px; padding-top: 20px; border-top: 1px solid #e0e0e0; } /* Mobile nav overlay — display:none by default */ .nav-overlay { display: none; } /* === RESPONSIVE === */ /* -- Large desktop -- */ @media (max-width: 1200px) { .validation-layout { grid-template-columns: 300px 1fr; } } /* -- Tablet landscape / small desktop -- */ @media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .detail-grid { grid-template-columns: 1fr; } .split-view { grid-template-columns: 1fr; } .split-left { position: static; height: 500px; } .validation-layout { grid-template-columns: 1fr; } .queue-sidebar { position: static; max-height: 300px; } .validation-split { grid-template-columns: 1fr; } .validation-pdf { position: static; height: 500px; } /* Show hamburger, hide desktop nav */ .hamburger { display: flex; } .nav-desktop { display: none !important; } /* CRITICAL iOS Safari fix: position:sticky + backdrop-filter creates a GPU compositing layer that intercepts ALL touch events on the page below it. Remove sticky + backdrop-filter on mobile to fix touch interactions. */ header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } } /* -- Tablet portrait / large mobile -- */ @media (max-width: 768px) { /* Responsive typography */ .page-title { font-size: clamp(1.1em, 4vw, 1.6em); } .section-title { font-size: clamp(1em, 3.5vw, 1.3em); } .kpi-value { font-size: clamp(1.3em, 5vw, 2em); } .hero h1 { font-size: clamp(1.5em, 5vw, 2.5em); } /* Layout */ .container { padding: 16px; } .container-wide { padding: 16px 12px; } header { padding: 12px 16px; } /* Filter bar stacked */ .filter-bar { flex-direction: column; gap: 10px; } .filter-bar .form-control { width: 100%; min-width: unset; } .filter-bar .search-input { min-width: unset; } /* Action bar stacked */ .action-bar { flex-direction: column; gap: 8px; } .action-bar .btn { width: 100%; justify-content: center; } /* Forms single column */ .form-row { grid-template-columns: 1fr; } /* Touch-friendly form controls */ .form-control { padding: 12px 14px; font-size: 16px; /* Prevents iOS zoom on focus */ } select.form-control { padding: 12px 36px 12px 14px; } /* Touch-friendly buttons — minimum 44px tap target */ .btn { padding: 12px 24px; min-height: 44px; } .btn-sm { padding: 10px 16px; min-height: 44px; } .btn-icon { min-width: 44px; min-height: 44px; } /* Touch-friendly checkboxes */ input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; } /* Tables: horizontal scroll on mobile — NO position:relative, NO ::after pseudo, NO -webkit-overflow-scrolling. iOS Safari creates GPU compositing layers that intercept ALL touch events when these are combined. */ /* Table cells: better touch & readability */ .data-table th, .data-table td { padding: 10px 8px; font-size: 0.85em; } .data-table-compact th, .data-table-compact td { padding: 8px 6px; font-size: 0.8em; } /* KPI grid 2 columns */ .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; } /* Modal: full width on mobile */ .modal { width: 95%; max-width: none; max-height: 90vh; max-height: 90dvh; overflow-y: auto; } .modal-body { padding: 16px; } .modal-header { padding: 16px; } .modal-footer { padding: 12px 16px; flex-direction: column; } .modal-footer .btn { width: 100%; justify-content: center; } /* Page header stacked */ .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } /* Tabs: scrollable */ .queue-tabs, .tab-nav { overflow-x: auto; flex-wrap: nowrap; gap: 4px; } .queue-tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none; } /* Pagination: larger touch targets */ .page-btn { min-width: 40px; min-height: 40px; padding: 8px 12px; } /* Toast: full width on mobile */ .toast-container { left: 12px; right: 12px; bottom: 12px; } .toast { width: 100%; } } /* -- Wide tables: framed, contained horizontal scroll on tablet & below -- PAS de -webkit-overflow-scrolling:touch, PAS de ::after ni position:sticky sur le wrapper (pièges iOS Safari documentés dans CLAUDE.md). */ @media (max-width: 768px) { .table-wrapper, .assoc-stats-table-wrapper, .purge-history-container { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--rw-border); border-radius: var(--rw-radius-sm); } /* Empêche l'écrasement des colonnes : la table garde une largeur lisible et scrolle. */ .table-wrapper .data-table { min-width: 720px; } .assoc-stats-table-wrapper .assoc-stats-table { min-width: 640px; } /* Report recruteur : cartes résumé empilées proprement */ #summary-cards { grid-template-columns: 1fr 1fr !important; max-width: 100% !important; } } /* ============================================================ VALIDATION MOBILE — navigation liste↔détail (Refonte mobile) Un seul écran à la fois : la file OU le détail plein écran. La classe .master-detail--show-detail est posée par validation.js (inoffensive sur desktop : lue uniquement sous ce breakpoint). ============================================================ */ @media (max-width: 768px) { /* La page pleine largeur pour cette vue */ .validation-layout { display: block; gap: 0; min-height: 0; } /* Vue LISTE (par défaut) : file visible, détail masqué */ .validation-layout .validation-detail { display: none; } .validation-layout .queue-sidebar { display: flex; } /* Vue DÉTAIL : file masquée, détail plein écran */ .validation-layout.master-detail--show-detail .queue-sidebar { display: none; } .validation-layout.master-detail--show-detail .validation-detail { display: flex; } /* File : pleine hauteur utile (fini le cap à 300px), scroll de page */ .queue-sidebar { position: static; max-height: none; height: auto; box-shadow: var(--rw-shadow-sm); } .queue-list { overflow: visible; flex: none; } /* Cibles tactiles confortables dans la file */ .queue-item { padding: 16px; min-height: 44px; } /* Bouton « ← Retour à la liste » : visible uniquement en vue détail mobile */ .btn-mobile-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px 16px; min-height: 44px; border: 1px solid var(--rw-border); border-radius: var(--rw-radius-sm); background: var(--rw-white); color: var(--rw-text); font-family: var(--rw-font-body); font-size: 0.95em; font-weight: 600; cursor: pointer; } .btn-mobile-back span[aria-hidden] { font-size: 1.2em; line-height: 1; } /* Détail : flux naturel, la page scrolle (pas de scroll imbriqué → iOS OK) */ .validation-detail { gap: 12px; } .validation-split { display: block; min-height: 0; } .validation-data { overflow: visible; padding-bottom: 12px; } /* Accordéon scan PDF : les champs + actions d'abord, le scan à la demande. Le PDF de 500px ne doit plus pousser les données hors écran. */ .pdf-accordion-toggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-bottom: 12px; padding: 12px 16px; min-height: 44px; border: 1px solid var(--rw-border); border-radius: var(--rw-radius-sm); background: var(--rw-surface-alt); color: var(--rw-text); font-family: var(--rw-font-body); font-size: 0.95em; font-weight: 600; cursor: pointer; } /* Scan replié par défaut sur mobile */ .validation-pdf { display: none; position: static; height: auto; margin-bottom: 12px; } .validation-pdf.pdf-open { display: block; height: 70vh; } .validation-pdf.pdf-open .pdf-viewer { height: 100%; } /* Barre d'action COLLANTE au bas de l'écran (à portée du pouce). En dernier dans le flux flex (order) pour que sticky bottom la pinne de manière fiable. Fond opaque, ombre haute, PAS de backdrop-filter (piège iOS documenté dans CLAUDE.md). */ .action-bar { order: 10; position: sticky; bottom: 0; z-index: 20; flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px; padding-bottom: max(12px, var(--safe-bottom)); margin: 0 -4px; background: var(--rw-white); border-top: 1px solid var(--rw-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); border-radius: 0; } /* Les 3 décisions se partagent la rangée, cibles ≥ 44px */ .action-bar .btn { flex: 1 1 0; min-width: 0; width: auto; min-height: 48px; padding: 12px 8px; } /* Notes optionnelles : masquées dans la barre collante pour rester compact et éviter le conflit clavier virtuel ↔ barre sticky sur iOS. */ .action-bar-notes { display: none; } /* Les raccourcis clavier dans la barre n'ont pas de sens sur mobile */ .action-bar .kbd { display: none; } /* Barres d'action rejeté/supprimé : même traitement collant */ .action-bar#action-bar-rejected, .action-bar#action-bar-deleted { flex-direction: column; align-items: stretch; } .action-bar#action-bar-rejected .btn, .action-bar#action-bar-deleted .btn { flex: none; width: 100%; } .rejection-info, .deletion-info { flex-basis: 100%; text-align: center; font-size: 0.82em; } /* Compteurs centrés et compacts, sans débordement horizontal */ .validation-counter { width: 100%; justify-content: center; gap: 8px; } .counter-item { flex: 1 1 auto; min-width: 0; padding: 6px 8px; } .counter-value { font-size: 1.15em; } .counter-label { font-size: 0.62em; letter-spacing: 0.3px; } /* Raccourcis clavier : inutiles sans clavier physique */ .shortcuts-hint { display: none; } /* --- Confort de saisie (Phase 2) --- */ /* Champ éditable : cible tactile généreuse */ .field-value.editable { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; padding: 8px; } /* Le champ en édition : pleine largeur, 16px (évite le zoom iOS), et marge de scroll pour ne pas être masqué par le clavier / la barre collante */ .field-input { max-width: none; width: 100%; font-size: 16px; text-align: left; } .field-value.editable, .field-input, .field-group-association select { scroll-margin-top: 80px; scroll-margin-bottom: 160px; } /* Select association pleine largeur */ .field-group-association select { width: 100%; min-width: 0; font-size: 16px; } /* Cible tactile confortable pour « Tout sélectionner » */ .batch-select-all { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; } } /* -- Small mobile -- */ @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } .container { padding: 12px; } .container-wide { padding: 12px 8px; } .logo { font-size: 1.2em; } /* Tables encore plus étroites : scroll horizontal maintenu, largeur min réduite */ .table-wrapper .data-table { min-width: 640px; } /* Table: smaller text for phone screens */ .data-table th, .data-table td { padding: 8px 6px; font-size: 0.78em; } /* Cards on phone */ .card, .kpi-card { padding: 16px; } /* Full-screen modal on phone */ .modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; animation: slideUp 0.3s ease; } /* Filter bar: tighter */ .filter-bar { gap: 8px; } } /* Slide-up animation for phone modals */ @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Safe area (notch) support */ @supports (padding-bottom: env(safe-area-inset-bottom)) { footer { padding-bottom: env(safe-area-inset-bottom); } .nav-links { padding-bottom: env(safe-area-inset-bottom); } .modal { padding-bottom: env(safe-area-inset-bottom); } } /* === DASHBOARD ENHANCED (Phase 14) === */ /* Dashboard header with refresh indicator */ .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .dashboard-header .section-title { margin-bottom: 0; } .refresh-indicator { display: flex; align-items: center; gap: 8px; color: var(--rw-text-secondary); font-size: 0.85em; padding: 6px 14px; background: var(--rw-white); border-radius: var(--rw-radius-pill); box-shadow: var(--rw-shadow-sm); cursor: default; user-select: none; } .refresh-icon { font-size: 1.2em; display: inline-block; transition: transform 0.3s ease; } .refresh-icon.spinning { animation: spin 0.8s linear infinite; } /* Alerts panel */ .alerts-panel { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; animation: fadeInUp 0.4s ease; } .alert-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: var(--rw-radius-sm); font-size: 0.9em; font-weight: 500; animation: slideIn 0.3s ease; } .alert-error { background: var(--rw-danger-bg); color: var(--rw-danger); border-left: 4px solid var(--rw-danger); } .alert-warning { background: var(--rw-warning-bg); color: #e65100; border-left: 4px solid var(--rw-warning); } .alert-icon { font-size: 1.2em; flex-shrink: 0; } .alert-message { flex: 1; } .alert-count { font-family: var(--rw-font-heading); font-weight: 600; font-size: 1.1em; min-width: 30px; text-align: center; } /* Queue indicator row */ .queue-indicator-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } .queue-indicator-item { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--rw-white); border-radius: var(--rw-radius-sm); box-shadow: var(--rw-shadow-sm); transition: all var(--rw-transition); border: 2px solid transparent; } .queue-indicator-item.has-alert { border-color: var(--rw-danger); background: var(--rw-danger-bg); animation: alertPulse 2s ease-in-out infinite; } .queue-indicator-item.processing .queue-indicator-icon { color: var(--rw-info); } .queue-indicator-item.pending .queue-indicator-icon { color: var(--rw-warning); } .queue-indicator-item.errors .queue-indicator-icon { color: var(--rw-danger); } .queue-indicator-icon { font-size: 1.5em; flex-shrink: 0; } .queue-indicator-value { font-family: var(--rw-font-heading); font-size: 1.6em; font-weight: 600; color: var(--rw-text); line-height: 1; } .queue-indicator-label { font-size: 0.8em; color: var(--rw-text-secondary); font-weight: 500; } @keyframes alertPulse { 0%, 100% { border-color: var(--rw-danger); } 50% { border-color: rgba(244, 67, 54, 0.3); } } /* Processing Progress Bar */ .processing-progress-container { max-width: 600px; margin: 0 auto 32px auto; padding: 16px 24px; background: var(--rw-white); border-radius: var(--rw-radius-sm); box-shadow: var(--rw-shadow-sm); transition: background var(--rw-transition); cursor: default; } .processing-progress-container:hover { background: var(--rw-primary-light); } .processing-progress-bar { height: 12px; background: var(--rw-border); border-radius: var(--rw-radius-pill); overflow: hidden; margin-bottom: 8px; } .processing-progress-fill { height: 100%; background: var(--rw-primary); border-radius: var(--rw-radius-pill); transition: width 0.5s ease; width: 0%; } .processing-progress-text { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; color: var(--rw-text-secondary); } .processing-progress-container:hover .processing-progress-text { color: var(--rw-primary); } /* Chart section */ .chart-section { margin-bottom: 32px; } .chart-container { position: relative; height: 320px; width: 100%; } /* Matching rates section */ .matching-rates-section { margin-bottom: 32px; } .matching-rates-grid { display: flex; flex-direction: column; gap: 16px; } .matching-rate-item { display: flex; flex-direction: column; gap: 6px; } .matching-rate-bar-container { width: 100%; height: 24px; background: var(--rw-surface-alt); border-radius: 12px; overflow: hidden; } .matching-rate-bar { height: 100%; border-radius: 12px; transition: width 0.8s ease; min-width: 0; } .matching-rate-item.confirmed .matching-rate-bar { background: var(--rw-success); } .matching-rate-item.to-verify .matching-rate-bar { background: var(--rw-warning); } .matching-rate-item.new .matching-rate-bar { background: var(--rw-info); } .matching-rate-item.conflict .matching-rate-bar { background: var(--rw-danger); } .matching-rate-info { display: flex; justify-content: space-between; align-items: center; } .matching-rate-label { font-size: 0.85em; color: var(--rw-text-secondary); font-weight: 500; } .matching-rate-value { font-size: 0.9em; font-weight: 600; color: var(--rw-text); } .matching-rates-total { font-size: 0.9em; padding-top: 12px; border-top: 1px solid var(--rw-border-light); } /* Responsive adjustments for Phase 14 */ @media (max-width: 768px) { .dashboard-header { flex-direction: column; gap: 12px; text-align: center; } .queue-indicator-row { grid-template-columns: 1fr; } .chart-container { height: 240px; } } /* ======================================== IGLOO Autocomplete Dropdown ======================================== */ .igloo-autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: var(--rw-white); border: 1px solid var(--rw-border); border-radius: var(--rw-radius-sm); box-shadow: var(--rw-shadow); max-height: 280px; overflow-y: auto; margin-top: 4px; } .autocomplete-empty { padding: 16px; text-align: center; color: var(--rw-text-secondary); font-size: 0.9em; } .autocomplete-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--rw-border-light); transition: background var(--rw-transition); } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover, .autocomplete-item.selected { background: var(--rw-primary-light); } .autocomplete-item.selected { border-left: 3px solid var(--rw-primary); } .autocomplete-item-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .autocomplete-name { font-weight: 600; color: var(--rw-text); font-size: 0.95em; } .autocomplete-dob { font-size: 0.85em; color: var(--rw-text-secondary); background: var(--rw-surface-alt); padding: 2px 8px; border-radius: var(--rw-radius-xs); white-space: nowrap; } .autocomplete-item-sub { font-size: 0.8em; color: var(--rw-text-light); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* === ASSOCIATION BADGE (autocomplete) === */ .autocomplete-assoc { font-size: 0.7em; font-weight: 600; padding: 2px 6px; border-radius: 3px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.3px; } .autocomplete-assoc-msf { background: #e8f5e9; color: #2e7d32; } .autocomplete-assoc-mdm { background: #e3f2fd; color: #1565c0; } .autocomplete-assoc-patouch { background: #fff3e0; color: #e65100; } .autocomplete-assoc-fsd, .autocomplete-assoc-fsd_fr { background: #fce4ec; color: #c2185b; } .autocomplete-assoc-helpcode { background: #f3e5f5; color: #7b1fa2; } .autocomplete-assoc-default { background: #e0e0e0; color: #424242; } /* === IGLOO REQUIRED WARNING === */ .igloo-warning { background: var(--rw-warning-bg); border: 1px solid var(--rw-warning); border-radius: var(--rw-radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: 0.9em; color: #7a5100; display: flex; align-items: center; gap: 10px; } .igloo-warning .warning-icon { font-size: 1.2em; color: var(--rw-warning); } .btn-disabled-igloo { opacity: 0.5 !important; cursor: not-allowed !important; } .btn-disabled-igloo:hover { transform: none !important; box-shadow: none !important; } /* === UNDO TOAST (Approbation avec delai) === */ .undo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #323232; color: white; border-radius: var(--rw-radius-md); box-shadow: 0 4px 20px rgba(0,0,0,0.25); z-index: 10000; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; overflow: hidden; min-width: 320px; max-width: 90vw; } .undo-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .undo-toast-content { display: flex; align-items: center; gap: 12px; padding: 14px 20px; } .undo-toast-icon { color: var(--rw-success); font-size: 1.2em; font-weight: bold; } .undo-toast-text { flex: 1; font-size: 0.95em; } .undo-toast-btn { background: transparent; border: none; color: var(--rw-primary); font-weight: 600; font-size: 0.9em; cursor: pointer; padding: 6px 12px; border-radius: var(--rw-radius-sm); transition: background 0.15s ease; text-transform: uppercase; letter-spacing: 0.5px; } .undo-toast-btn:hover { background: rgba(255,255,255,0.1); } .undo-toast-progress { height: 4px; background: rgba(255,255,255,0.1); overflow: hidden; } .undo-toast-progress-bar { height: 100%; background: var(--rw-primary); width: 100%; animation: undo-progress 4s linear forwards; } @keyframes undo-progress { from { width: 100%; } to { width: 0%; } } /* ======================================== PURGE RGPD - Alert Banner & History ======================================== */ /* Alert Banner */ .purge-alert-banner { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); border-radius: var(--rw-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(238, 90, 82, 0.3); animation: purge-alert-pulse 2s ease-in-out infinite; } @keyframes purge-alert-pulse { 0%, 100% { box-shadow: 0 4px 20px rgba(238, 90, 82, 0.3); } 50% { box-shadow: 0 4px 30px rgba(238, 90, 82, 0.5); } } .purge-alert-content { display: flex; align-items: center; gap: 1.25rem; color: white; } .purge-alert-icon { font-size: 2rem; flex-shrink: 0; } .purge-alert-info { flex: 1; } .purge-alert-title { font-family: var(--rw-font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; } .purge-alert-details { font-size: 0.95rem; opacity: 0.95; } .purge-alert-breakdown { font-size: 0.85rem; opacity: 0.8; margin-top: 0.35rem; } .purge-alert-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .purge-alert-actions .btn { padding: 0.5rem 1rem; font-size: 0.9rem; border: none; cursor: pointer; border-radius: var(--rw-radius-sm); font-weight: 600; transition: all 0.2s ease; } .purge-alert-actions .btn-success { background: white; color: #4caf50; } .purge-alert-actions .btn-success:hover { background: #e8f5e9; transform: translateY(-1px); } .purge-alert-actions .btn-outline { background: rgba(255, 255, 255, 0.15); color: white; border: 1px solid rgba(255, 255, 255, 0.4); } .purge-alert-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.25); } /* Purge History Table */ .purge-history-container { overflow-x: auto; } .purge-history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .purge-history-table th, .purge-history-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--rw-border-light); } .purge-history-table th { font-weight: 600; color: var(--rw-text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; background: var(--rw-surface-alt); } .purge-history-table tbody tr { transition: background 0.15s ease; } .purge-history-table tbody tr:hover { background: var(--rw-surface-alt); } .purge-row.purge-status-alert { background: rgba(244, 67, 54, 0.05); } .purge-row.purge-status-executed td:first-child { color: var(--rw-text-secondary); } /* Badges */ .badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: var(--rw-radius-pill); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .badge-success { background: var(--rw-success-bg); color: var(--rw-success); } .badge-warning { background: var(--rw-warning-bg); color: var(--rw-warning); } .badge-error { background: var(--rw-danger-bg); color: var(--rw-danger); } .badge-info { background: var(--rw-info-bg); color: var(--rw-info); } .badge-secondary { background: var(--rw-surface-alt); color: var(--rw-text-secondary); } /* Manual Purge Section */ .purge-manual-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rw-border-light); } .purge-manual-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .purge-manual-icon { font-size: 1.1rem; } .purge-manual-title { font-weight: 600; color: var(--rw-text); } .purge-manual-form { display: flex; flex-direction: column; gap: 1rem; } .purge-manual-inputs { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .form-group-inline { display: flex; flex-direction: column; gap: 0.25rem; } .form-group-inline label { font-size: 0.8rem; color: var(--rw-text-secondary); font-weight: 500; } .form-group-inline .form-control { width: 100px; padding: 0.5rem 0.75rem; border: 1px solid var(--rw-border); border-radius: var(--rw-radius-sm); font-size: 0.9rem; text-align: center; } .form-group-inline .form-control:focus { outline: none; border-color: var(--rw-primary); box-shadow: 0 0 0 3px var(--rw-primary-shadow); } /* Preview Result */ .purge-preview-result { background: var(--rw-surface-alt); border-radius: var(--rw-radius-sm); padding: 1rem; } .purge-preview-summary { display: flex; flex-direction: column; gap: 0.75rem; } .purge-preview-week { font-family: var(--rw-font-heading); font-size: 1.1rem; font-weight: 600; } .purge-preview-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; } .purge-preview-stats span { color: var(--rw-text-secondary); } .purge-preview-stats strong { color: var(--rw-text); } .purge-preview-actions { margin-top: 0.5rem; } .text-warning { color: var(--rw-warning); } .text-error { color: var(--rw-danger); } /* Responsive */ @media (max-width: 768px) { .purge-alert-content { flex-direction: column; text-align: center; gap: 1rem; } .purge-alert-actions { width: 100%; justify-content: center; } .purge-history-table { font-size: 0.8rem; } .purge-history-table th, .purge-history-table td { padding: 0.5rem; } .purge-manual-inputs { flex-direction: column; align-items: stretch; } .form-group-inline .form-control { width: 100%; } }