/* InfoDrone — thèmes sombre (défaut) et clair via [data-theme] sur */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-tertiary: #1f2937; --bg-card: #161f2d; --bg-hover: #1e293b; /* Texte (dark) — contraste relevé pour WCAG AA / AAA sur tous les fonds */ --text-primary: #f8fafc; /* ex #f1f5f9 — AAA ~17:1 */ --text-secondary: #e2e8f0; /* ex #94a3b8 — AAA partout, y compris bg-tertiary (~13:1) */ --text-muted: #b6c2d3; /* ex #64748b — ~9:1 sur bg-primary, ~7:1 sur bg-tertiary */ --accent-primary: #06b6d4; --accent-secondary: #8b5cf6; --accent-success: #10b981; --accent-warning: #f59e0b; --accent-danger: #ef4444; /* Variantes "texte sur fond uni" — pour les textes en couleur d'accent qui doivent rester très lisibles sur le fond principal/secondaire */ --accent-primary-text: #22d3ee; /* cyan plus lumineux comme couleur de texte */ --accent-secondary-text: #a78bfa; /* violet plus lumineux comme couleur de texte */ --accent-success-text: #34d399; --accent-warning-text: #fbbf24; --accent-danger-text: #f87171; --border-color: #475569; /* ex #374151 — bordures plus visibles */ --border-light: #334155; /* ex #1f2937 — séparateurs internes plus visibles */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(6, 182, 212, 0.3); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; --header-height: 60px; --panel-width: 380px; /* Safe area insets for mobile devices with navigation bars/notches */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --app-immersive-height: 100dvh; --app-immersive-top: 0px; --login-gradient-top: rgba(6, 182, 212, 0.15); --login-gradient-bottom: rgba(139, 92, 246, 0.1); --surface-hover-subtle: rgba(255, 255, 255, 0.06); --surface-hover-muted: rgba(255, 255, 255, 0.05); --text-on-accent: #fff; --selection-overlay: rgba(0, 0, 0, 0.2); --selection-border: rgba(255, 255, 255, 0.25); --item-selected-text: #fff; --card-online-bg: rgba(16, 185, 129, 0.1); --card-online-border: rgba(16, 185, 129, 0.45); --card-offline-bg: rgba(100, 116, 139, 0.14); --card-offline-border: rgba(148, 163, 184, 0.4); --card-offline-accent: #94a3b8; --status-offline-dot: #94a3b8; --badge-online-bg: rgba(5, 150, 105, 0.55); --badge-online-color: #ecfdf5; --badge-online-border: rgba(52, 211, 153, 0.55); } html { color-scheme: dark; } [data-theme="light"] { --bg-primary: #f1f5f9; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0; --bg-card: #ffffff; --bg-hover: #e2e8f0; /* Texte (light) — contraste relevé : passe WCAG AAA sur tous les fonds clairs */ --text-primary: #0b1220; /* ex #0f172a — quasi noir, AAA ~18:1 */ --text-secondary: #1f2937; /* ex #475569 — AAA partout (~15:1 sur blanc, ~10:1 sur bg-tertiary) */ --text-muted: #334155; /* ex #64748b — AAA sur blanc (~10:1), AA+ sur bg-tertiary (~7.4:1) */ --border-color: #94a3b8; /* ex #cbd5e1 — bordures bien visibles (3:1 mini sur blanc) */ --border-light: #cbd5e1; /* ex #e2e8f0 — séparateurs plus marqués */ /* Variantes "texte sur fond clair" — couleurs d'accent assombries pour la lisibilité */ --accent-primary-text: #0e7490; /* cyan-700 — AA sur blanc (~5.1:1) */ --accent-secondary-text: #6d28d9; /* violet-700 — AA sur blanc (~6.5:1) */ --accent-success-text: #047857; /* emerald-700 — AAA sur blanc (~5.7:1) */ --accent-warning-text: #b45309; /* amber-700 — AA sur blanc (~4.9:1) */ --accent-danger-text: #b91c1c; /* red-700 — AAA sur blanc (~7.5:1) */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.1); --shadow-glow: 0 0 20px rgba(6, 182, 212, 0.2); --login-gradient-top: rgba(6, 182, 212, 0.12); --login-gradient-bottom: rgba(139, 92, 246, 0.08); --surface-hover-subtle: rgba(15, 23, 42, 0.06); --surface-hover-muted: rgba(15, 23, 42, 0.05); --text-on-accent: #fff; --selection-overlay: rgba(99, 102, 241, 0.08); --selection-border: rgba(99, 102, 241, 0.35); --item-selected-text: var(--text-primary); --card-online-bg: rgba(16, 185, 129, 0.12); --card-online-border: rgba(5, 150, 105, 0.5); --card-offline-bg: rgba(148, 163, 184, 0.18); --card-offline-border: rgba(100, 116, 139, 0.55); --card-offline-accent: #64748b; --status-offline-dot: #64748b; --badge-online-bg: rgba(16, 185, 129, 0.2); --badge-online-color: #065f46; --badge-online-border: rgba(5, 150, 105, 0.45); } html[data-theme="light"] { color-scheme: light; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow: hidden; } /* Screens */ .screen { width: 100vw; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile browsers */ } .screen.hidden { display: none !important; } /* Login Screen */ #login-screen { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, var(--login-gradient-top) 0%, transparent 50%), radial-gradient(ellipse at bottom right, var(--login-gradient-bottom) 0%, transparent 50%), var(--bg-primary); } .login-container { width: 100%; max-width: 420px; padding: 48px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .login-header { text-align: center; margin-bottom: 40px; } .logo { width: 80px; height: 80px; margin: 0 auto 20px; color: var(--accent-primary); animation: pulse 3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } .login-header h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; } .login-header p { color: var(--text-secondary); font-size: 0.95rem; } /* Contrôles discrets (thème + langue) sur la page de connexion */ #login-screen .login-locale-row { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 8px; } .profile-locale-section .profile-locale-select { width: 100%; max-width: 280px; } #settings-profile .profile-locale-section .form-hint { margin-top: 6px; } #login-screen .login-locale-row .locale-switcher { width: auto; min-width: 0; height: 28px; padding: 0 22px 0 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; font-family: var(--font-main); line-height: 1; background-color: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; appearance: none; -webkit-appearance: none; color-scheme: dark; opacity: 0.88; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 10px 10px; transition: border-color 0.2s, color 0.2s, opacity 0.2s; } #login-screen .login-locale-row .locale-switcher:hover { opacity: 1; color: var(--text-primary); border-color: var(--border-color); background-color: var(--bg-hover); } #login-screen .login-locale-row .locale-switcher:focus { outline: none; opacity: 1; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15); } #login-screen .login-locale-row .locale-switcher option { background: var(--bg-secondary); color: var(--text-primary); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; } .form-group input:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: var(--font-main); background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); transition: all 0.2s; } .form-group input:not([type="checkbox"]):not([type="radio"]):focus, .form-group select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); } .form-group select:not([multiple]) { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: var(--font-main); background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); transition: all 0.2s; cursor: pointer; appearance: none; -webkit-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' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .form-group select[multiple] { width: 100%; padding: 8px 10px; font-size: 0.9rem; font-family: var(--font-main); background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); min-height: 6rem; appearance: auto; -webkit-appearance: listbox; } .form-group select[multiple] option:checked { background: var(--accent-primary); color: #fff; } .form-group select option { background: var(--bg-secondary); color: var(--text-primary); } .form-hint { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--accent-warning, #f59e0b); } #profile-form { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; font-size: 1rem; font-weight: 500; font-family: var(--font-main); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; } .btn-primary { background: linear-gradient(135deg, var(--accent-primary), #0891b2); color: white; } .login-form .btn-primary, .form-actions:not(.form-actions-split) .btn-primary { width: 100%; } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } .btn-primary svg { width: 18px; height: 18px; } .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-warning { background: var(--accent-warning); color: #000; } .btn-danger { background: var(--accent-danger); color: white; } .btn-small { padding: 8px 16px; font-size: 0.875rem; } .error-message { margin-top: 16px; padding: 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-sm); color: var(--accent-danger); font-size: 0.875rem; text-align: center; display: none; } .error-message.visible { display: block; } /* Dashboard */ #dashboard { display: flex; flex-direction: column; background: var(--bg-primary); } /* Header */ .main-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); z-index: 100; } .header-left { display: flex; align-items: center; gap: 16px; } .logo-small { width: 36px; height: 36px; color: var(--accent-primary); } .main-header h1 { font-size: 1.25rem; font-weight: 600; } .connection-status { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-tertiary); border-radius: 20px; font-size: 0.8rem; color: var(--text-secondary); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-warning); animation: blink 1.5s infinite; } .connection-status.connected .status-dot { background: var(--accent-success); animation: none; } .connection-status.disconnected .status-dot { background: var(--accent-danger); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .header-right { display: flex; align-items: center; gap: 16px; } .user-info { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.875rem; } .user-role { font-size: 0.75rem; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.5px; } .user-role.role-danger { color: var(--accent-danger); } /* Sound Alert Toggle */ .sound-alert-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: default; transition: all 0.3s; } .sound-alert-toggle.active { border-color: var(--accent-danger); background: rgba(239, 68, 68, 0.1); } .sound-alert-toggle.ringing { animation: alert-pulse 0.6s ease-in-out infinite; } @keyframes alert-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.25); } } .sound-alert-icon { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; transition: color 0.3s; } .sound-alert-toggle.active .sound-alert-icon { color: var(--accent-danger); } .sound-alert-icon .sound-waves { opacity: 0; transition: opacity 0.3s; } .sound-alert-toggle.active .sound-alert-icon .sound-waves { opacity: 1; } .toggle-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 20px; cursor: pointer; transition: background 0.3s, border-color 0.3s; } .toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; bottom: 2px; background: var(--text-secondary); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.3s, background 0.3s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent-danger); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); background: #fff; } .icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-primary); } /* Lien stylé comme les autres icon-btn (évite :link / inherit body = blanc) */ a.icon-btn:any-link { color: var(--text-secondary); text-decoration: none; } a.icon-btn:any-link:hover { color: var(--text-primary); } .icon-btn svg { width: 20px; height: 20px; overflow: visible; } .icon-btn-small { width: 32px; height: 32px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); } .icon-btn-small:hover { background: var(--bg-tertiary); color: var(--text-primary); } .icon-btn-small svg { width: 18px; height: 18px; } /* Main Content */ .main-content { flex: 1; display: flex; height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); /* Dynamic viewport for mobile */ overflow: hidden; } /* Map */ #map-container { flex: 1; position: relative; } #map { width: 100%; height: 100%; background: var(--bg-primary); } .map-controls { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; } .map-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .map-btn:hover { background: var(--bg-hover); color: var(--accent-primary); border-color: var(--accent-primary); } .map-btn.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); } .map-btn.active:hover { background: var(--accent-secondary); border-color: var(--accent-secondary); } .map-btn.disabled, .map-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); } .map-btn svg { width: 22px; height: 22px; } /* Bouton unique : cycle aucune trace → actifs → toutes */ #toggle-tracks-mode .tracks-mode-icon { display: none; } #toggle-tracks-mode.tracks-mode-none .tracks-mode-icon-none, #toggle-tracks-mode.tracks-mode-active .tracks-mode-icon-active, #toggle-tracks-mode.tracks-mode-all .tracks-mode-icon-all { display: block; } #toggle-tracks-mode.tracks-mode-none { opacity: 0.65; } #toggle-tracks-mode.tracks-mode-none.active { opacity: 1; background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); } /* Side Panel */ #side-panel { width: var(--panel-width); background: var(--bg-secondary); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; min-height: 0; /* Allow flex child to shrink for scroll */ } .mobile-panel-resizer { display: none; } .panel-tabs { display: flex; border-bottom: 1px solid var(--border-color); padding: 0 12px; } .tab-btn { flex: 1; padding: 16px 8px; font-size: 0.8rem; font-weight: 500; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .tab-btn-icon { display: flex; align-items: center; justify-content: center; padding: 14px 6px; min-width: 44px; } .tab-btn-icon-svg { width: 20px; height: 20px; display: block; flex-shrink: 0; } .tab-btn-icon:hover .tab-btn-icon-svg, .tab-btn-icon.active .tab-btn-icon-svg { stroke-width: 2.25; } .tab-btn:hover { color: var(--text-secondary); } .tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .tab-content { display: none; flex: 1; overflow-y: auto; padding: 20px; scrollbar-gutter: stable; } .tab-content.active { display: block; } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .panel-header h3 { font-size: 1rem; font-weight: 600; } #tab-alerts .panel-header { flex-wrap: nowrap; gap: 6px; } #tab-alerts .panel-header h3 { flex-shrink: 0; } #tab-alerts .scanner-filters-row { flex: 1; min-width: 0; justify-content: flex-end; } #tab-alerts #ack-all-alerts { flex-shrink: 0; white-space: nowrap; font-size: 0.72rem; padding: 4px 8px; } /* Stats Grid */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; } .stat-card:hover { border-color: var(--accent-primary); background: var(--bg-hover); transform: translateY(-2px); } .stat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .stat-icon svg { width: 24px; height: 24px; } .stat-icon.scanners { background: rgba(6, 182, 212, 0.15); color: var(--accent-primary); } .stat-icon.drones { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary); } .stat-icon.detections { background: rgba(16, 185, 129, 0.15); color: var(--accent-success); } .stat-icon.alerts { background: rgba(245, 158, 11, 0.15); color: var(--accent-warning); } .stat-info { display: flex; flex-direction: column; } .stat-value { font-size: 1.5rem; font-weight: 600; font-family: var(--font-mono); line-height: 1; } .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; } /* Activity Feed */ .recent-activity h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary); } .activity-feed { display: flex; flex-direction: column; gap: 8px; } .activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--bg-card); border-radius: var(--radius-sm); font-size: 0.875rem; } .activity-item .activity-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .activity-item .activity-icon.drone { background: rgba(139, 92, 246, 0.2); color: var(--accent-secondary); } .activity-item .activity-icon.scanner { background: rgba(6, 182, 212, 0.2); color: var(--accent-primary); } .activity-item .activity-icon.alert { background: rgba(245, 158, 11, 0.2); color: var(--accent-warning); } .activity-item .activity-icon svg { width: 16px; height: 16px; } .activity-content { flex: 1; min-width: 0; } .activity-content p { color: var(--text-primary); line-height: 1.4; } .activity-content .activity-time { display: block; margin-top: 4px; font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); } /* Items List */ .items-list { display: flex; flex-direction: column; gap: 8px; } .list-placeholder { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.875rem; } /* Chargement liste drones (fenêtre temporelle, recherche ID) */ .drones-list-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 20px; min-height: 160px; } .drones-list-loading-logo { width: 56px; height: 56px; animation: drones-list-loading-spin 1.1s linear infinite; } .drones-list-loading-logo svg { display: block; width: 100%; height: 100%; } .drones-list-loading-text { margin: 0; font-size: 0.875rem; color: var(--text-muted); } @keyframes drones-list-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Scanner Sub-tabs (group filter) */ .scanner-filters-row { display: flex; align-items: center; gap: 6px; } .scanner-status-filter { display: flex; gap: 2px; background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 2px; } .scanner-status-btn { background: none; border: none; color: var(--text-muted); padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; transition: all 0.15s; } .scanner-status-btn:hover { color: var(--text-primary); background: var(--surface-hover-subtle); } .scanner-status-btn.active { background: var(--accent-primary); color: #fff; } .scanner-status-btn[data-status="online"].active { background: var(--status-online, #22c55e); } .scanner-status-btn[data-status="offline"].active { background: var(--status-offline, #ef4444); } .scanner-group-toggle-btn { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-muted); padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 0.72rem; transition: all 0.15s; white-space: nowrap; } .scanner-group-toggle-btn:hover { color: var(--text-primary); border-color: var(--text-muted); } .scanner-group-toggle-btn.active { border-color: var(--accent-primary); color: var(--accent-primary); } #scanner-group-label:empty { display: none; } .scanner-subtabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); } .scanner-subtab { background: none; border: 1px solid transparent; border-radius: 14px; padding: 3px 10px; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; } .scanner-subtab:hover { color: var(--text-primary); background: var(--surface-hover-muted); } .scanner-subtab.active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); } .scanner-group-actions { display: flex; gap: 6px; padding: 6px 12px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); align-items: center; } .btn-xs { padding: 3px 8px; font-size: 0.72rem; border-radius: 4px; } .scanner-item, .drone-item, .alert-item { padding: 14px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; } /* Carte d'identité du drone (depuis la base DSDB) */ .drone-identity { display: none; align-items: center; gap: 12px; padding: 8px; margin-top: 8px; border-radius: var(--radius-sm, 8px); background: var(--bg-hover, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-light, rgba(255, 255, 255, 0.06)); } .drone-identity[data-filled="1"] { display: flex; } .drone-identity-photo { width: 80px; height: 60px; flex-shrink: 0; object-fit: contain; border-radius: 6px; background: rgba(255, 255, 255, 0.06); } .drone-identity-photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-secondary, #888); } .drone-identity-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .drone-identity-facts { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; color: var(--text-secondary, #aaa); } .drone-identity-fact { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .drone-identity-fact-icon { opacity: 0.85; } /* Section import base drones (Système) */ .drone-db-status { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--text-secondary, #aaa); padding: 8px 10px; background: var(--bg-hover, rgba(255, 255, 255, 0.03)); border: 1px dashed var(--border-light, rgba(255, 255, 255, 0.08)); border-radius: var(--radius-sm, 6px); } .drone-db-status-empty { font-style: italic; } .drone-db-status-ok { color: var(--accent-primary, #6366f1); font-weight: 500; } .drone-db-status-date { color: var(--text-secondary, #888); } .scanner-item:hover, .drone-item:hover, .alert-item:hover { border-color: var(--accent-primary); background: var(--bg-hover); } .scanner-item.selected, .drone-item.selected { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.12); box-shadow: inset 3px 0 0 var(--accent-primary); } /* Contraste online / offline — cartes scanners */ .scanner-item.online:not(.selected) { background: var(--card-online-bg); border-color: var(--card-online-border); border-left: 3px solid var(--accent-success); } .scanner-item.offline:not(.selected) { background: var(--card-offline-bg); border-color: var(--card-offline-border); border-left: 3px solid var(--card-offline-accent); } .scanner-item.offline:not(.selected) .item-name { color: var(--text-secondary); } .scanner-inline-detail { margin-top: 10px; padding: 12px; background: var(--bg-main); border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-md) var(--radius-md); } .scanner-inline-detail .popup-content { min-width: unset; } .scanner-inline-detail .popup-content h4 { font-size: 0.9rem; margin-bottom: 6px; } .scanner-inline-detail .popup-content .popup-row { font-size: 0.8rem; padding: 3px 0; } .item-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; min-width: 0; } .item-name { font-weight: 500; display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; } .item-status { width: 10px; height: 10px; border-radius: 50%; } .item-status.online { background: var(--accent-success); box-shadow: 0 0 10px var(--accent-success); outline: 2px solid rgba(16, 185, 129, 0.35); } .item-status.offline { background: var(--status-offline-dot); box-shadow: none; outline: 2px solid rgba(148, 163, 184, 0.35); } .item-status.detected { background: var(--accent-secondary); box-shadow: 0 0 8px var(--accent-secondary); animation: pulse 2s infinite; } .item-meta { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-muted); } .item-meta span { display: flex; align-items: center; gap: 4px; } .scanner-name-info { margin-top: 6px; font-size: 0.75rem; color: var(--text-muted); font-style: italic; } .scanner-group-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .scanner-group-link { display: inline-block; padding: 1px 8px; font-size: 0.68rem; border-radius: 10px; background: rgba(99, 102, 241, 0.15); color: #818cf8; text-decoration: none; border: 1px solid rgba(99, 102, 241, 0.3); transition: background 0.15s, color 0.15s; } .scanner-group-link:hover { background: rgba(99, 102, 241, 0.35); color: #c7d2fe; } .scanner-settings-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 2px 6px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 0.8rem; line-height: 1; color: var(--text-secondary); transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; } .scanner-settings-btn svg { width: 0.95em; height: 0.95em; display: block; } .scanner-settings-btn:hover { background: var(--bg-hover); border-color: var(--accent-primary); color: var(--text-primary); box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2); } .scanner-settings-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .scanner-icons-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .scanner-icons-row .scanner-settings-btn { margin-left: auto; } .scanner-icon-badge { font-size: 0.72rem; padding: 2px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); white-space: nowrap; } .scanner-icon-badge.icon-off { opacity: 0.4; } /* Scanner status badge (same style as drone badge) */ .scanner-status-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; font-weight: 500; } .scanner-status-badge.online { background: var(--badge-online-bg); color: var(--badge-online-color); border: 1px solid var(--badge-online-border); font-weight: 600; } .scanner-status-badge.offline { background: rgba(148, 163, 184, 0.28); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); } html[data-theme="light"] .scanner-status-badge.offline { color: var(--card-offline-accent); } .drone-distance-row { font-size: 0.78rem; color: var(--text-secondary); gap: 12px; } .drone-distance { font-weight: 400; color: var(--text-secondary); } .drone-scanner-id { font-size: 0.72rem; opacity: 0.7; } .drone-scanners-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .drone-scanner-row { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-secondary); padding: 1px 0; } .drone-scanner-row .drone-scanner-id { font-size: 0.76rem; opacity: 0.85; } .drone-scanner-row .drone-distance { font-size: 0.76rem; font-weight: 400; color: inherit; } .drone-scanner-row .drone-rssi { font-size: 0.7rem; opacity: 0.6; } .popup-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); opacity: 0.7; margin-top: 4px; margin-bottom: 2px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 4px; } /* Drone ID row */ .drone-id-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); font-size: 0.75rem; color: var(--text-muted); font-family: 'Courier New', monospace; letter-spacing: 0.3px; } /* Drone location & operator info */ .drone-location { margin-top: 4px; font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-mono); } .drone-operator { margin-top: 8px; padding: 10px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius-sm); font-size: 0.8rem; } .drone-operator.clickable { cursor: pointer; transition: all 0.2s ease; } .drone-operator.clickable:hover { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.5); } .drone-operator.no-data { background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.3); } .drone-operator .operator-label { display: block; font-weight: 500; color: var(--accent-warning); margin-bottom: 4px; } .drone-operator.no-data .operator-label { color: var(--text-muted); } .drone-operator .operator-coords { display: block; font-family: var(--font-mono); color: var(--text-secondary); } .drone-operator .operator-id { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); } .drone-operator .operator-source { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); } /* v1.30: bloc point de décollage (thème bleu, distinct du bloc opérateur ambre) */ .drone-takeoff { margin-top: 8px; padding: 10px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: var(--radius-sm); font-size: 0.8rem; } .drone-takeoff.clickable { cursor: pointer; transition: all 0.2s ease; } .drone-takeoff.clickable:hover { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.5); } .drone-takeoff .operator-label { display: block; font-weight: 500; color: #38bdf8; margin-bottom: 4px; } .drone-takeoff .operator-coords { display: block; font-family: var(--font-mono); color: var(--text-secondary); } .drone-takeoff .operator-source { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); } /* Bloc pilote : entourage de sélection (même thème que .drone-item.selected) */ .drone-operator.clickable.operator-list-selected { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.15); box-shadow: inset 3px 0 0 var(--accent-primary); } .drone-operator.clickable.operator-list-selected .operator-label, .drone-operator.clickable.operator-list-selected .operator-coords, .drone-operator.clickable.operator-list-selected .operator-id { color: var(--item-selected-text); } .drone-operator.clickable.operator-list-selected:hover { background: rgba(99, 102, 241, 0.22); border-color: var(--accent-primary); } /* Trace orange + focus pilote : le bloc pilote garde la surbrillance violette */ .drone-item.showing-history .drone-operator.clickable.operator-list-selected { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.2); box-shadow: inset 3px 0 0 var(--accent-primary); } /* ═══════════════════════════════════════════ Flight Replay Controls ═══════════════════════════════════════════ */ .replay-segments-wrapper { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .replay-controls { padding: 10px 12px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 10px; } .replay-segment-label { font-size: 0.65rem; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(59, 130, 246, 0.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .replay-segments-close { width: 100%; padding: 6px 0; border: 1px solid rgba(100, 116, 139, 0.2); border-radius: 8px; background: rgba(100, 116, 139, 0.08); color: var(--text-muted); font-size: 0.7rem; cursor: pointer; transition: all 0.2s ease; } .replay-segments-close:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--accent-danger); } .replay-buttons { display: flex; gap: 8px; margin-bottom: 8px; justify-content: center; } .replay-btn { width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .replay-btn svg { width: 14px; height: 14px; } .replay-btn.replay-play { background: rgba(16, 185, 129, 0.25); color: var(--accent-success); } .replay-btn.replay-play:hover:not(:disabled) { background: rgba(16, 185, 129, 0.45); transform: scale(1.1); } .replay-btn.replay-pause { background: rgba(245, 158, 11, 0.25); color: var(--accent-warning); } .replay-btn.replay-pause:hover:not(:disabled) { background: rgba(245, 158, 11, 0.45); transform: scale(1.1); } .replay-btn.replay-stop { background: rgba(239, 68, 68, 0.2); color: var(--accent-danger); } .replay-btn.replay-stop:hover:not(:disabled) { background: rgba(239, 68, 68, 0.4); transform: scale(1.1); } .replay-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; } .replay-seekbar-container { display: flex; align-items: center; gap: 8px; } .replay-seekbar { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: rgba(100, 116, 139, 0.3); border-radius: 3px; outline: none; cursor: pointer; transition: background 0.2s; } .replay-seekbar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: 2px solid var(--bg-secondary); box-shadow: 0 0 4px rgba(59, 130, 246, 0.5); transition: transform 0.15s; } .replay-seekbar::-webkit-slider-thumb:hover { transform: scale(1.2); } .replay-seekbar::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: 2px solid var(--bg-secondary); box-shadow: 0 0 4px rgba(59, 130, 246, 0.5); } .replay-seekbar:disabled { opacity: 0.4; cursor: not-allowed; } .replay-seekbar:disabled::-webkit-slider-thumb { cursor: not-allowed; } .replay-time { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); min-width: 90px; text-align: right; white-space: nowrap; } /* Drone status badge */ .drone-status-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; font-weight: 500; } .drone-status-badge.active { background: var(--badge-online-bg); color: var(--badge-online-color); border: 1px solid var(--badge-online-border); font-weight: 600; } .drone-status-badge.historical { background: rgba(148, 163, 184, 0.28); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); } html[data-theme="light"] .drone-status-badge.historical { color: var(--card-offline-accent); } /* Protocol and Signal badges */ .protocol-badge, .signal-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.65rem; padding: 2px 6px; border-radius: 8px; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; margin-right: 4px; } .badges-container { display: inline-flex; flex-wrap: wrap; gap: 4px; } .popup-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } /* RSSI signal strength badge with SVG icon */ .rssi-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 4px; } .rssi-badge .rssi-icon { display: block; } /* Flag icons in signal badges */ .flag-icon { width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.3); } .lock-icon { flex-shrink: 0; vertical-align: middle; } /* Contraste actif / offline — cartes drones */ .drone-item:not(.inactive):not(.selected):not(.showing-history) { background: var(--card-online-bg); border-color: var(--card-online-border); border-left: 3px solid var(--accent-success); } /* Inactive drone item (offline / historique) */ .drone-item.inactive:not(.selected):not(.showing-history) { background: var(--card-offline-bg); border-color: var(--card-offline-border); border-left: 3px solid var(--card-offline-accent); } .drone-item.inactive:not(.selected):not(.showing-history) .item-name { color: var(--text-secondary); } .drone-item.inactive:hover { border-color: var(--card-offline-border); } /* Sélection / trace historique : même rendu de texte que les drones actifs (sans atténuation .inactive) */ .drone-item.inactive.selected, .drone-item.inactive.showing-history { opacity: 1; } /* Trace historique sur la carte (cadre orange) */ .drone-item.showing-history { border-color: #f97316; background: rgba(249, 115, 22, 0.1); } /* Liste : sélection (clic) ou trace affichée */ .drone-item:is(.selected, .showing-history) { color: var(--item-selected-text); } .drone-item:is(.selected, .showing-history) .item-name, .drone-item:is(.selected, .showing-history) .item-meta, .drone-item:is(.selected, .showing-history) .drone-id-row, .drone-item:is(.selected, .showing-history) .drone-location, .drone-item:is(.selected, .showing-history) .replay-segment-label, .drone-item:is(.selected, .showing-history) .replay-time, .drone-item:is(.selected, .showing-history) .drone-scanner-row, .drone-item:is(.selected, .showing-history) .drone-scanner-row .drone-scanner-id, .drone-item:is(.selected, .showing-history) .drone-scanner-row .drone-distance, .drone-item:is(.selected, .showing-history) .drone-scanner-row .drone-rssi { color: var(--item-selected-text); opacity: 1; } .drone-item:is(.selected, .showing-history) .drone-id-row { border-top-color: var(--selection-border); } .drone-item:is(.selected, .showing-history) .drone-operator .operator-label, .drone-item:is(.selected, .showing-history) .drone-operator .operator-coords, .drone-item:is(.selected, .showing-history) .drone-operator .operator-id, .drone-item:is(.selected, .showing-history) .drone-operator .operator-source, .drone-item:is(.selected, .showing-history) .drone-takeoff .operator-label, .drone-item:is(.selected, .showing-history) .drone-takeoff .operator-coords, .drone-item:is(.selected, .showing-history) .drone-takeoff .operator-source { color: var(--item-selected-text); } .drone-item:is(.selected, .showing-history) .drone-operator, .drone-item:is(.selected, .showing-history) .drone-takeoff { background: var(--selection-overlay); border-color: var(--selection-border); } .drone-item:is(.selected, .showing-history) .drone-operator.no-data { background: var(--selection-overlay); border-color: var(--selection-border); } .drone-item:is(.selected, .showing-history) .replay-segment-label { border-bottom-color: var(--selection-border); } /* Vol / segment en lecture (bordure orange) */ .replay-controls.replay-segment.replay-segment-active { border-color: #f97316; background: rgba(249, 115, 22, 0.12); color: var(--item-selected-text); } .replay-controls.replay-segment.replay-segment-active .replay-segment-label, .replay-controls.replay-segment.replay-segment-active .replay-time { color: var(--item-selected-text); } .replay-controls.replay-segment.replay-segment-active .replay-segment-label { border-bottom-color: var(--selection-border); } /* Flight time info */ .drone-flight-time { margin-top: 8px; padding: 6px 10px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--accent-success); font-weight: 500; } /* Alert Items */ .alert-item { border-left: 3px solid var(--accent-warning); overflow: hidden; } .alert-item > p, .alert-item .alert-summary { margin: 0 0 4px; font-size: 0.78rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alert-vuln-pkgs { display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 2px; scrollbar-width: thin; } .npm-vulnerability-alert .item-header .item-name { font-size: 0.8rem; } .alert-item.critical { border-left-color: var(--accent-danger); background: rgba(239, 68, 68, 0.1); } .alert-item.error { border-left-color: var(--accent-warning); } .alert-item.warning { border-left-color: #eab308; } .alert-item.info { border-left-color: var(--accent-primary); } .alert-item.acknowledged { opacity: 0.6; border-left-color: var(--text-muted); } .alert-vuln-pkg { display: inline-block; flex-shrink: 0; padding: 1px 5px; background: rgba(239, 68, 68, 0.2); border-radius: 4px; font-family: var(--font-mono); font-size: 0.68rem; white-space: nowrap; } .alert-severity { flex-shrink: 0; font-size: 0.62rem; padding: 2px 5px; border-radius: 4px; font-weight: 600; text-transform: uppercase; white-space: nowrap; } .alert-severity.critical { background: rgba(239, 68, 68, 0.2); color: var(--accent-danger); } .alert-severity.error { background: rgba(245, 158, 11, 0.2); color: var(--accent-warning); } .alert-severity.warning { background: rgba(234, 179, 8, 0.2); color: #eab308; } .alert-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-light); font-size: 0.7rem; flex-wrap: nowrap; min-width: 0; } .alert-footer .item-time, .alert-footer .alert-scanner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .alert-footer .alert-scanner { flex: 1; } .alert-scanner { color: var(--text-muted); font-family: var(--font-mono); } /* Filter Select */ .filter-select { padding: 6px 12px; font-size: 0.8rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; } .drones-filter-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: 1 1 100%; } .drones-filter-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .drones-filter-line .filter-select { flex: 0 0 auto; } .drones-search-wrapper { position: relative; flex: 1 1 220px; min-width: 200px; max-width: 340px; } .drones-search-input { width: 100%; padding: 6px 60px 6px 10px; font-size: 0.8rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); box-sizing: border-box; } .drones-search-input::-webkit-search-cancel-button { display: none; } .drones-search-input:focus { outline: none; border-color: var(--accent-primary, #3b82f6); } .drones-search-clear { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .drones-search-clear:hover { color: var(--text-primary); background: var(--bg-secondary); } .drones-search-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--accent-primary, #3b82f6); border: none; color: #fff; cursor: pointer; border-radius: var(--radius-sm); padding: 0; } .drones-search-btn:hover { filter: brightness(1.1); } .drones-search-btn:active { filter: brightness(0.95); } .drones-search-btn svg { display: block; } .drone-item.flight-result .drone-flight-period { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; } .drone-item.flight-result .drone-flight-period .flight-label { color: var(--text-muted); } .search-results-header { padding: 6px 10px; font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-secondary); border-radius: var(--radius-sm); margin-bottom: 6px; } .search-results-header.truncated { color: var(--warning-color, #f59e0b); } .drones-date-range { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .drones-date-range input[type="datetime-local"] { padding: 3px 4px; font-size: 0.72rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); color-scheme: dark; width: 135px; } .drones-date-sep { color: var(--text-secondary); font-size: 0.8rem; } .drones-date-range .btn-small { padding: 3px 8px; font-size: 0.72rem; } /* Modal */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal.hidden { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } .modal-content { position: relative; width: 94%; max-width: 600px; max-height: 90vh; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .modal-large { max-width: 800px; } .modal-wide { max-width: 900px; } .modal-fullscreen { width: 95%; max-width: 1200px; height: 85vh; max-height: 85vh; } .modal-header-actions { display: flex; align-items: center; gap: 12px; } /* MQTT Explorer */ .mqtt-live-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; } .mqtt-live-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-success); } .mqtt-export-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .mqtt-export-toolbar select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 0.82rem; } .mqtt-export-toolbar .btn { white-space: nowrap; } .mqtt-explorer-body { padding: 0 !important; display: flex; flex-direction: column; height: calc(85vh - 110px); overflow: hidden; } .mqtt-messages-container { flex: 1; overflow-y: auto; background: var(--bg-primary); } .mqtt-messages { font-family: var(--font-mono); font-size: 0.8rem; padding: 12px; } .mqtt-placeholder, .logs-placeholder { text-align: center; padding: 40px; color: var(--text-muted); } .mqtt-message { padding: 10px 12px; margin-bottom: 6px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left: 3px solid var(--accent-primary); } .mqtt-message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .mqtt-topic { color: var(--accent-primary); font-weight: 500; word-break: break-all; } .mqtt-time { font-size: 0.7rem; color: var(--text-muted); } .mqtt-payload { background: var(--bg-tertiary); padding: 8px; border-radius: var(--radius-sm); overflow-x: auto; white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); max-height: 200px; overflow-y: auto; } /* System Logs */ .logs-body { padding: 0 !important; display: flex; flex-direction: column; height: calc(85vh - 70px); overflow: hidden; } .logs-container { flex: 1; overflow-y: auto; background: var(--bg-primary); } .system-logs { font-family: var(--font-mono); font-size: 0.8rem; padding: 12px; } .log-entry { padding: 8px 12px; margin-bottom: 4px; background: var(--bg-secondary); border-radius: var(--radius-sm); display: flex; gap: 12px; align-items: flex-start; } .log-entry.error { border-left: 3px solid var(--accent-danger); } .log-entry.warning { border-left: 3px solid var(--accent-warning); } .log-time { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; min-width: 90px; } .log-service { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-weight: 500; min-width: 70px; text-align: center; } .log-service.backend { background: rgba(139, 92, 246, 0.2); color: var(--accent-secondary); } .log-service.mosquitto { background: rgba(6, 182, 212, 0.2); color: var(--accent-primary); } .log-service.nginx { background: rgba(16, 185, 129, 0.2); color: var(--accent-success); } .log-service.postgresql { background: rgba(245, 158, 11, 0.2); color: var(--accent-warning); } .log-level { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-weight: 600; min-width: 55px; text-align: center; } .log-level.error { background: rgba(239, 68, 68, 0.2); color: var(--accent-danger); } .log-level.warning { background: rgba(245, 158, 11, 0.2); color: var(--accent-warning); } .log-message { flex: 1; color: var(--text-primary); word-break: break-word; } /* Audit Log Viewer */ .audit-body { padding: 0 !important; display: flex; flex-direction: column; height: calc(85vh - 70px); overflow: hidden; } .audit-container { flex: 1; overflow-y: auto; background: var(--bg-primary); } .audit-entries { padding: 12px; } .audit-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .audit-table thead th { position: sticky; top: 0; background: var(--bg-tertiary); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); white-space: nowrap; } .audit-table tbody tr { border-bottom: 1px solid var(--border-color); } .audit-table tbody tr:hover { background: var(--bg-secondary); } .audit-table td { padding: 8px 12px; vertical-align: top; } .audit-date { white-space: nowrap; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; } .audit-user { font-weight: 500; } .audit-action-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .audit-auth { background: rgba(6, 182, 212, 0.15); color: var(--accent-primary); } .audit-create { background: rgba(16, 185, 129, 0.15); color: var(--accent-success); } .audit-update { background: rgba(245, 158, 11, 0.15); color: var(--accent-warning); } .audit-danger { background: rgba(239, 68, 68, 0.15); color: var(--accent-danger); } .audit-export { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary); } .audit-command { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .audit-other { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); } .audit-resource { color: var(--text-secondary); font-size: 0.78rem; } .audit-details { font-size: 0.75rem; color: var(--text-muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; } .audit-detail-key { color: var(--text-secondary); font-weight: 500; } .audit-ip { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-color); } .modal-header h2 { font-size: 1.25rem; font-weight: 600; } .modal-close, .modal-close-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); } .modal-close:hover, .modal-close-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); } .modal-body { padding: 24px; overflow-y: auto; } /* Settings Tabs */ .settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .settings-tab { padding: 7px 12px; font-size: 0.8rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .settings-tab:hover { background: var(--bg-hover); } .settings-tab.active { background: var(--accent-primary); border-color: var(--accent-primary); color: white; } .settings-tab.admin-only, .settings-tab.admin-full-only, .settings-tab.perm-manage-users, .settings-tab.perm-manage-roles, .settings-tab.perm-manage-mqtt, .settings-tab.perm-manage-backups, .settings-tab.perm-manage-system { display: none; } .admin .settings-tab.admin-only { display: inline-block; } .admin-full .settings-tab.admin-full-only { display: inline-block; } body.perm-manage_users .settings-tab.perm-manage-users { display: inline-block; } body.perm-manage_roles .settings-tab.perm-manage-roles { display: inline-block; } body.perm-manage_mqtt .settings-tab.perm-manage-mqtt { display: inline-block; } .settings-section.perm-manage-mqtt { display: none; } body.perm-manage_mqtt .settings-section.perm-manage-mqtt { display: block; } body.perm-manage_system .settings-tab.perm-manage-system { display: inline-block; } body.perm-manage_backups .settings-tab.perm-manage-backups { display: inline-block; } .perm-delete-scanners { display: none !important; } body.perm-delete_scanners .perm-delete-scanners { display: inline-flex !important; } .gnss-control { display: none !important; } body.perm-manage_gnss .gnss-control { display: inline-flex !important; } .admin-full-only-inline { display: none !important; } body.perm-manage_groups .admin-full-only-inline { display: inline-flex !important; } .settings-content { display: none; } .settings-content.active { display: block; } .settings-content h3 { font-size: 1rem; margin-bottom: 16px; } .sub-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); } .sub-tab { padding: 10px 20px; font-size: 0.85rem; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--text-secondary); cursor: pointer; transition: color 0.2s, border-color 0.2s; } .sub-tab:hover { color: var(--text-primary); } .sub-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .sub-tab-content { display: none; } .sub-tab-content.active { display: block; } /* Users Table */ .users-table { width: 100%; } .user-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg-card); border-radius: var(--radius-sm); margin-bottom: 8px; } .user-row .user-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .user-row .username { font-weight: 500; } .user-row .email { font-size: 0.8rem; color: var(--text-muted); } .role-badge { padding: 4px 10px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; } .role-badge.admin { background: rgba(239, 68, 68, 0.2); color: var(--accent-danger); } .role-badge.moderator { background: rgba(245, 158, 11, 0.2); color: #f59e0b; } .role-badge.user { background: rgba(6, 182, 212, 0.2); color: var(--accent-primary); } .user-actions { display: flex; align-items: center; gap: 6px; } .user-self-badge { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; padding: 4px 10px; } .badge-2fa { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; cursor: default; } .badge-2fa .badge-2fa-icon { flex-shrink: 0; } .badge-2fa.enabled { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .badge-2fa.disabled { background: rgba(239, 68, 68, 0.1); color: var(--text-muted); opacity: 0.6; } .user-row.inactive { opacity: 0.5; } .user-account-group-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .account-group-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; background: rgba(99, 102, 241, 0.15); color: #a5b4fc; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-group-badge.account-group-more { background: var(--bg-tertiary); color: var(--text-muted); } .account-groups-list { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px; background: var(--bg-primary); min-height: 48px; } .account-group-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; background: var(--bg-card); } .account-group-row:last-child { margin-bottom: 0; } .account-group-name { font-weight: 500; } .account-group-actions { display: flex; align-items: center; gap: 4px; } #user-edit-form { padding: 20px; } #user-edit-form .form-group { margin-bottom: 16px; } #user-edit-form .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .user-groups-checkboxes { max-height: 180px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; padding: 6px; background: var(--bg-primary); } .group-checkbox-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); } .group-checkbox-item:hover { background: rgba(255,255,255,0.05); } .group-checkbox-item.child { padding-left: 20px; font-size: 0.8rem; } .group-checkbox-item input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent-primary); } .form-hint { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--text-muted); } /* System Info */ .system-info { margin-bottom: 24px; } .system-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .system-item { padding: 12px; background: var(--bg-card); border-radius: var(--radius-sm); } .system-item label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .system-item .value { font-size: 1.1rem; font-family: var(--font-mono); color: var(--accent-primary); } .settings-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); } .settings-section h4 { font-size: 0.875rem; margin-bottom: 16px; color: var(--text-secondary); } .form-inline-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .form-inline-row input[type="text"] { flex: 1; max-width: 300px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem; } .form-row { display: flex; gap: 16px; } .form-row .form-group { flex: 1; } .form-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; } .form-actions-split { display: flex; gap: 10px; flex-wrap: wrap; } .form-actions-split .btn { flex: none; } .save-status { font-size: 0.85rem; color: var(--accent-success); } .save-status.error { color: var(--accent-danger); } .save-status.pending { color: var(--accent-warning); } /* SSL certificate info */ .ssl-info { margin: 12px 0; } .ssl-status { padding: 10px 14px; border-radius: 8px; font-size: 0.8rem; border: 1px solid; } .ssl-status.ssl-ok { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); } .ssl-status.ssl-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); } .ssl-status.ssl-none { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: var(--accent-danger); } .ssl-row { display: flex; justify-content: space-between; padding: 3px 0; } .ssl-label { color: var(--text-muted); } .ssl-value { font-family: var(--font-mono); color: var(--text-primary); } .ssl-value.ssl-valid { color: var(--accent-success); font-weight: 600; } .system-actions { margin-top: 20px; } .system-actions h4 { font-size: 0.875rem; margin-bottom: 12px; } .action-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .system-version { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 0.78rem; color: var(--text-secondary); opacity: 0.6; text-align: center; } /* Map Markers */ .scanner-marker-container, .drone-marker-container, .pilot-marker-container, .takeoff-marker-container { background: transparent !important; border: none !important; } /* Scanner marker - satellite dish icon */ .scanner-marker { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 2px solid var(--accent-primary); border-radius: 50%; box-shadow: var(--shadow-md), 0 0 10px rgba(6, 182, 212, 0.5); font-size: 18px; } .scanner-marker::after { content: "📡"; } .scanner-marker.offline { border-color: var(--text-muted); box-shadow: var(--shadow-md); opacity: 0.7; } /* Drone marker - airplane icon with heading rotation */ .drone-marker { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 2px solid var(--accent-secondary); border-radius: 50%; box-shadow: var(--shadow-md), 0 0 12px rgba(139, 92, 246, 0.6); font-size: 16px; animation: drone-pulse 2s infinite; transition: transform 0.3s ease; } .drone-marker::after { content: "✈️"; } .drone-marker.ground { border-color: #6b7280; box-shadow: var(--shadow-md), 0 0 8px rgba(107, 114, 128, 0.5); animation: none; } .drone-marker.ground::after { content: "🛬"; } @keyframes drone-pulse { 0%, 100% { box-shadow: var(--shadow-md), 0 0 12px rgba(139, 92, 246, 0.6); } 50% { box-shadow: var(--shadow-md), 0 0 20px rgba(139, 92, 246, 0.8); } } /* Pilot marker - person icon */ .pilot-marker { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 2px solid var(--accent-warning); border-radius: 50%; box-shadow: var(--shadow-md), 0 0 8px rgba(245, 158, 11, 0.5); font-size: 14px; } .pilot-marker::after { content: "🧑"; } /* v1.30: Takeoff marker - point de décollage du drone */ .takeoff-marker { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 2px solid #38bdf8; border-radius: 50%; box-shadow: var(--shadow-md), 0 0 8px rgba(56, 189, 248, 0.6); font-size: 13px; } /* Leaflet Customization */ .leaflet-popup-content-wrapper { background: var(--bg-secondary); color: var(--text-primary); border-radius: var(--radius-md); border: 1px solid var(--border-color); } .leaflet-popup-tip { background: var(--bg-secondary); border: 1px solid var(--border-color); } .leaflet-popup-content { margin: 12px 16px; } .leaflet-control-attribution { background: rgba(0,0,0,0.25) !important; color: rgba(255,255,255,0.35) !important; font-size: 9px !important; padding: 1px 5px !important; border-radius: 3px 3px 0 0; } .leaflet-control-attribution a { color: rgba(255,255,255,0.4) !important; text-decoration: none !important; } .leaflet-control-zoom { border: none !important; } .leaflet-control-zoom a { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } .leaflet-control-zoom a:hover { background: var(--bg-hover) !important; color: var(--accent-primary) !important; } .map-btn.locating { animation: locate-pulse 1s ease-in-out infinite; color: var(--accent-primary); border-color: var(--accent-primary); } .map-btn.located { color: #4285F4; border-color: #4285F4; } @keyframes locate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .leaflet-control-layers { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } .leaflet-control-layers-toggle { background-color: var(--bg-secondary) !important; border-radius: 8px !important; width: 34px !important; height: 34px !important; background-image: none !important; display: flex !important; align-items: center; justify-content: center; font-size: 20px; } .leaflet-control-layers-toggle::after { content: '🗺️'; } .leaflet-control-layers-expanded { padding: 8px 12px !important; } .leaflet-control-layers label { color: var(--text-primary) !important; font-size: 0.85rem; } .leaflet-control-layers-separator { border-top-color: var(--border-color) !important; } /* Popup Content */ .popup-content { min-width: 200px; } .popup-content h4 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; } .popup-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } /* Laisse la place au bouton fermer Leaflet (coin supérieur droit) */ .leaflet-popup-content .popup-title-row { padding-right: 26px; gap: 8px; } .leaflet-popup-content .popup-title-row h4 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaflet-popup-content .popup-flight-badge { flex-shrink: 0; } .popup-flight-badge { font-size: 0.8rem; font-weight: 600; background: var(--bg-tertiary); color: var(--accent-primary); padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .popup-last-seen { margin-top: 4px; opacity: 0.7; font-size: 0.8rem !important; } .popup-content .popup-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.85rem; border-bottom: 1px solid var(--border-light); } .popup-content .popup-row:last-child { border-bottom: none; } .popup-content .popup-label { color: var(--text-muted); } .popup-content .popup-value { font-family: var(--font-mono); color: var(--accent-primary); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Responsive */ @media (max-width: 1024px) { #side-panel { width: 320px; } .stats-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --header-height: 52px; --header-btn-size: 34px; } /* Header mobile — une seule ligne compacte */ .main-header { padding: 0 8px; height: var(--header-height); min-height: var(--header-height); flex-wrap: nowrap; gap: 4px; } .header-left { gap: 6px; flex: 0 1 auto; min-width: 0; } .header-left h1 { display: none; } .logo-small { width: 26px; height: 26px; flex-shrink: 0; } .connection-status { padding: 0; background: transparent; gap: 0; flex-shrink: 0; } .connection-status .status-text { display: none; } .connection-status .status-dot { width: 9px; height: 9px; } .header-right { gap: 4px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; flex-wrap: nowrap; } .user-info { display: none; } .sound-alert-toggle { height: var(--header-btn-size); min-height: var(--header-btn-size); padding: 0 6px; gap: 4px; flex-shrink: 0; box-sizing: border-box; } .sound-alert-toggle .toggle-switch { width: 32px; height: 20px; } .sound-alert-toggle .toggle-slider::before { width: 14px; height: 14px; } .sound-alert-toggle .toggle-switch input:checked + .toggle-slider::before { transform: translateX(12px); } .sound-alert-icon { width: 16px; height: 16px; } .icon-btn { width: var(--header-btn-size); height: var(--header-btn-size); flex-shrink: 0; } .icon-btn svg { width: 17px; height: 17px; } .theme-toggle-btn .theme-icon { width: 17px; height: 17px; } .fullscreen-toggle-btn .fullscreen-icon { width: 17px; height: 17px; } /* Main content mobile */ .main-content.mobile-panel-active { flex-direction: column; } .mobile-panel-resizer { display: flex; touch-action: none; cursor: row-resize; height: 24px; flex-shrink: 0; align-items: center; justify-content: center; background: var(--bg-secondary); border-top: 1px solid var(--border-color); user-select: none; -webkit-user-select: none; } .mobile-panel-resizer-grip { width: 44px; height: 4px; border-radius: 999px; background: var(--text-muted); opacity: 0.55; } .mobile-panel-resizer:active .mobile-panel-resizer-grip, .mobile-panel-resizer.is-dragging .mobile-panel-resizer-grip { opacity: 0.9; background: var(--accent-primary); } #side-panel { width: 100%; flex: 0 0 auto; min-height: 0; padding-bottom: var(--safe-area-bottom); border-left: none; display: flex; flex-direction: column; } #side-panel:not(.panel-collapsed) .tab-content.active { flex: 1; min-height: 0; } #map-container { flex: 1 1 auto; min-height: 0; height: auto !important; } #side-panel.panel-collapsed { height: 0 !important; min-height: 0 !important; padding: 0; border: none; overflow: visible; background: transparent; } #side-panel.panel-collapsed .panel-tabs, #side-panel.panel-collapsed .tab-content { display: none !important; } #side-panel.panel-collapsed .mobile-panel-resizer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; height: 32px; padding-bottom: var(--safe-area-bottom); background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.22); } .main-content.mobile-panel-active.panel-collapsed #map-container { flex: 1 1 auto; } /* Boutons carte : même taille que le sélecteur de fond (Layer) */ .map-controls { top: 10px; left: 10px; gap: 6px; } .map-btn { width: 34px; height: 34px; } .map-btn svg { width: 18px; height: 18px; } /* Popups carte (drones, pilotes, scanners) — plus compactes */ .leaflet-popup-content-wrapper { border-radius: var(--radius-sm); } .leaflet-popup-content { margin: 5px 7px; line-height: 1.25; } .leaflet-popup-content .popup-content { min-width: 0; max-width: 215px; } .leaflet-popup-content .popup-content h4 { font-size: 0.78rem; gap: 3px; } .leaflet-popup-content .popup-title-row { margin-bottom: 2px; gap: 4px; padding-right: 22px; } .leaflet-popup-content .popup-flight-badge { font-size: 0.62rem; padding: 0 4px; border-radius: 6px; } .leaflet-popup-content .popup-badges { gap: 2px; margin-bottom: 2px; } .leaflet-popup-content .protocol-badge, .leaflet-popup-content .signal-badge { font-size: 0.52rem; padding: 0 4px; gap: 1px; margin-right: 1px; border-radius: 5px; } .leaflet-popup-content .flag-icon { width: 10px; height: 7px; margin-right: 1px; } .leaflet-popup-content .rssi-icon { width: 12px; height: 10px; } .leaflet-popup-content .popup-row { padding: 1px 0; font-size: 0.66rem; gap: 4px; } .leaflet-popup-content .popup-label, .leaflet-popup-content .popup-value { font-size: 0.66rem !important; } .leaflet-popup-content .popup-section-label { font-size: 0.56rem; margin-top: 1px; margin-bottom: 0; padding-top: 2px; letter-spacing: 0.2px; } .leaflet-popup-content .drone-scanners-list { gap: 0; margin-top: 0; } .leaflet-popup-content .drone-scanner-row { gap: 3px; font-size: 0.62rem; padding: 0; } .leaflet-popup-content .drone-scanner-row .drone-scanner-id, .leaflet-popup-content .drone-scanner-row .drone-distance { font-size: 0.62rem; } .leaflet-popup-content .drone-scanner-row .drone-rssi { font-size: 0.58rem; } .leaflet-popup-content .popup-last-seen { margin-top: 1px; font-size: 0.62rem !important; } .leaflet-popup-close-button { width: 20px !important; height: 20px !important; font-size: 14px !important; padding: 1px !important; top: 2px !important; right: 2px !important; } /* Ensure tab content can scroll on mobile */ .tab-content { min-height: 0; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ padding-bottom: calc(20px + var(--safe-area-bottom)); /* Extra padding for bottom nav bar */ } /* Tabs mobile */ .panel-tabs { padding: 0 8px; } .tab-btn-icon { padding: 12px 4px; min-width: 40px; } .tab-btn-icon-svg { width: 18px; height: 18px; } /* Stats mobile */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .stat-card { padding: 12px; gap: 8px; } .stat-icon { width: 36px; height: 36px; } .stat-icon svg { width: 20px; height: 20px; } .stat-value { font-size: 1.25rem; } .stat-label { font-size: 0.65rem; } } @media (max-width: 480px) { :root { --header-btn-size: 32px; } .main-header { padding: 0 6px; gap: 3px; } .header-right { gap: 3px; } .icon-btn svg { width: 16px; height: 16px; } .sound-alert-toggle { padding: 0 5px; gap: 3px; } .sound-alert-toggle .toggle-switch { width: 30px; height: 18px; } .sound-alert-toggle .toggle-slider::before { width: 12px; height: 12px; } .sound-alert-toggle .toggle-switch input:checked + .toggle-slider::before { transform: translateX(12px); } .sound-alert-icon { width: 15px; height: 15px; } .theme-toggle-btn .theme-icon, .fullscreen-toggle-btn .fullscreen-icon { width: 16px; height: 16px; } .leaflet-popup-content { margin: 4px 6px; } .leaflet-popup-content .popup-content { max-width: 195px; } .leaflet-popup-content .popup-content h4 { font-size: 0.74rem; } .leaflet-popup-content .popup-row, .leaflet-popup-content .popup-label, .leaflet-popup-content .popup-value { font-size: 0.62rem !important; } .leaflet-popup-content .popup-flight-badge { font-size: 0.58rem; } .leaflet-popup-content .protocol-badge, .leaflet-popup-content .signal-badge { font-size: 0.48rem; } .leaflet-popup-content .popup-section-label { font-size: 0.52rem; } .leaflet-popup-content .drone-scanner-row, .leaflet-popup-content .drone-scanner-row .drone-scanner-id, .leaflet-popup-content .drone-scanner-row .drone-distance { font-size: 0.58rem; } .leaflet-popup-content .drone-scanner-row .drone-rssi { font-size: 0.54rem; } .leaflet-popup-content .popup-last-seen { font-size: 0.58rem !important; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .stat-card { padding: 10px; flex-direction: column; text-align: center; } .stat-label { font-size: 0.6rem; } /* Modal fullscreen on mobile */ .modal-fullscreen { width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; padding-bottom: var(--safe-area-bottom); } .modal-header-actions { flex-wrap: wrap; gap: 8px; } .log-entry { flex-direction: column; gap: 4px; } .log-time, .log-service, .log-level { display: inline-block; } } /* ═══════════════════════════════════════════════ Scanner Groups ═══════════════════════════════════════════════ */ .scanner-groups-section { margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); overflow: hidden; } .scanner-groups-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-color); } .scanner-groups-header h4 { margin: 0; font-size: 0.9rem; } .scanner-groups-tree { padding: 8px; } .group-node { border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--bg-primary); } .group-node.subgroup { margin-left: 24px; border-color: rgba(255,255,255,0.06); background: var(--bg-tertiary); } .group-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: default; } .group-toggle { cursor: pointer; font-size: 0.8rem; color: var(--text-muted); min-width: 14px; user-select: none; } .group-name { font-weight: 600; font-size: 0.85rem; flex: 1; } .group-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; } .group-header:hover .group-actions { opacity: 1; } .btn-icon { background: none; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; padding: 2px 8px; font-size: 0.75rem; white-space: nowrap; } .btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); } .group-body { padding: 0 10px 8px; } .group-node.collapsed > .group-body { display: none; } .group-members { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; } .group-member-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(6, 182, 212, 0.12); color: var(--accent-primary); border-radius: 12px; font-size: 0.78rem; font-weight: 500; } .group-member-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 2px; } .group-member-remove:hover { color: var(--accent-danger); } .group-add-scanner select { padding: 3px 6px; border-radius: var(--radius-sm); border: 1px dashed var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 0.78rem; cursor: pointer; } .group-add-scanner select:hover { border-color: var(--accent-primary); color: var(--text-primary); } .group-add-scanner select option { background: var(--bg-secondary); color: var(--text-primary); } .group-email-badge { font-size: 0.72rem; color: var(--text-muted); background: rgba(139, 92, 246, 0.1); padding: 1px 8px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .modal-small { max-width: 420px; width: 90%; } /* ═══════════════════════════════════════════════ Scanner Management (Admin) ═══════════════════════════════════════════════ */ .scanner-actions-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 8px; } .scanner-actions-bar span { font-size: 0.85rem; color: var(--text-secondary); margin-right: auto; } .scanner-mgmt-header { display: grid; grid-template-columns: 40px 2fr 90px 80px 1.5fr 60px 80px 50px; gap: 8px; align-items: center; padding: 8px 12px; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .scanner-mgmt-row { display: grid; grid-template-columns: 40px 2fr 90px 80px 1.5fr 60px 80px 50px; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.15s; } .scanner-mgmt-row:hover { background: rgba(255, 255, 255, 0.04); } .scanner-mgmt-row.offline { opacity: 0.55; } .scanner-check, .scanner-check-all { display: flex; align-items: center; justify-content: center; } .scanner-check input, .scanner-check-all input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } .col-name.clickable { cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .col-name.clickable:hover .scanner-mgmt-name { color: var(--primary); } .scanner-mgmt-name { font-weight: 600; font-size: 0.9rem; transition: color 0.15s; } .scanner-mgmt-id { font-size: 0.72rem; color: var(--text-secondary); font-family: var(--font-mono); } .col-status, .col-uptime, .col-conn, .col-gps, .col-battery, .col-firmware { font-size: 0.82rem; } .col-battery { font-size: 0.8rem; } .col-firmware { text-align: center; } .bat-ok { color: #22c55e; font-weight: 600; } .bat-warn { color: #f59e0b; font-weight: 600; } .bat-crit { color: #ef4444; font-weight: 600; } .col-conn { font-size: 0.78rem; } .col-conn small { color: var(--text-secondary); } .badge-online { color: #4ade80; font-weight: 600; } .badge-offline { color: #f87171; font-weight: 600; } .tls-badge { display: inline-block; font-size: 0.8rem; vertical-align: middle; margin-left: 4px; } .tls-verified { color: #4ade80; } .tls-on { color: #facc15; } .tls-off { color: #f87171; } /* Scanner Alerts Badges */ .scanner-alerts-badge { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; font-weight: 600; line-height: 1.4; } .scanner-alerts-badge.warning { background: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); } .scanner-alerts-badge.critical { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .scanner-fw-badge { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; vertical-align: middle; font-weight: 600; line-height: 1.4; } .scanner-fw-badge.available { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); } .scanner-fw-badge.updating { background: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); animation: locate-pulse 1.5s ease-in-out infinite; } /* Alert sections in scanner detail */ .detail-section.alerts-ok { border-left: 3px solid #22c55e; } .detail-section.alerts-warning { border-left: 3px solid #facc15; background: rgba(250, 204, 21, 0.05); } .detail-section.alerts-critical { border-left: 3px solid #ef4444; background: rgba(239, 68, 68, 0.05); } .detail-row.alert-warning { color: #fbbf24; } .detail-row.alert-critical { color: #f87171; font-weight: 600; } /* Scanner Detail Modal */ #scanner-detail-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1100; display: flex; align-items: center; justify-content: center; } #scanner-detail-modal .modal-dialog { background: var(--bg-card); border-radius: 12px; width: 90%; max-width: 900px; max-height: 85vh; display: flex; flex-direction: column; border: 1px solid var(--border-color); } #scanner-detail-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } #scanner-detail-modal .modal-header h3 { margin: 0; font-size: 1.1rem; } .scanner-detail-close-btn { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; line-height: 1; } .scanner-detail-close-btn:hover { color: var(--text-primary); } #scanner-detail-modal .modal-body { padding: 20px; overflow-y: auto; flex: 1; } #scanner-detail-modal .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border-color); } .scanner-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; transition: all 0.2s; } .btn-outline:hover { background: var(--bg-hover); border-color: var(--accent-primary); } .btn-outline:disabled { opacity: 0.5; cursor: not-allowed; } .btn-disabled { opacity: 1; cursor: not-allowed; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm); font-weight: 600; transition: background 0.3s ease; } .select-small { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); padding: 5px 8px; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; } .action-group-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .toggle-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.8rem; color: var(--text-primary); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); transition: background 0.15s; white-space: nowrap; } .toggle-inline:hover { background: var(--bg-hover); } .toggle-inline input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } #firmware-section .fw-version { font-weight: 600; } .fw-slot-state-hint { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; } .ui-tabs-config, .alert-levels-config { display: flex; gap: 20px; flex-wrap: wrap; } .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; user-select: none; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-primary); cursor: pointer; } .scanner-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .detail-section { background: var(--surface-hover-subtle); border-radius: 8px; padding: 14px; border: 1px solid var(--border-light); } .detail-section.detail-wide { grid-column: 1 / -1; } .detail-section h4 { margin: 0 0 10px 0; font-size: 0.85rem; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.5px; } .detail-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 4px 0; font-size: 0.85rem; color: var(--text-primary); border-bottom: 1px solid var(--border-light); } .detail-row > span:first-child { flex-shrink: 0; } .detail-row > [data-field] { flex: 1; min-width: 0; text-align: right; word-break: break-word; } .detail-row-features { flex-wrap: wrap; } .detail-row-features > span:first-child { margin-right: 0.25em; } .detail-row-features > [data-field] { flex: 1 1 100%; text-align: left; padding-left: 0; margin-top: 2px; } .license-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .license-filename { font-size: 0.8rem; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-row:last-child { border-bottom: none; } .detail-row span:first-child { color: var(--text-secondary); font-weight: 500; } .detail-row .mono { font-family: var(--font-mono); font-size: 0.8rem; } .detail-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .detail-table th { text-align: left; padding: 6px 8px; color: var(--text-secondary); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; border-bottom: 1px solid var(--border-color); } .detail-table td { padding: 5px 8px; color: var(--text-primary); border-bottom: 1px solid var(--border-light); } .detail-table .mono { font-family: var(--font-mono); font-size: 0.75rem; } /* Command log */ .cmd-log-list { max-height: 200px; overflow-y: auto; } .cmd-log-entry { display: flex; gap: 12px; align-items: center; padding: 6px 8px; font-size: 0.82rem; color: var(--text-primary); border-bottom: 1px solid var(--border-light); } .cmd-log-entry.pending { color: #facc15; } .cmd-log-entry.success { color: #4ade80; } .cmd-log-entry.error { color: #f87171; } .cmd-log-entry.timeout { color: #fb923c; } .cmd-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); min-width: 60px; } .cmd-action { font-weight: 600; min-width: 100px; } .cmd-status { flex: 1; } /* Small button variant */ .btn.btn-sm { padding: 5px 12px; font-size: 0.78rem; gap: 4px; } .btn-warning { background: #f59e0b; color: #000; border: none; font-weight: 600; } .btn-warning:hover { background: #d97706; } .btn-success { background: #22c55e; color: #000; border: none; font-weight: 600; } .btn-success:hover { background: #16a34a; } @media (max-width: 768px) { .scanner-mgmt-header, .scanner-mgmt-row { grid-template-columns: 30px 1fr 70px; font-size: 0.78rem; } .scanner-mgmt-header .col-uptime, .scanner-mgmt-header .col-conn, .scanner-mgmt-header .col-gps, .scanner-mgmt-header .col-battery, .scanner-mgmt-header .col-firmware, .scanner-mgmt-row .col-uptime, .scanner-mgmt-row .col-conn, .scanner-mgmt-row .col-gps, .scanner-mgmt-row .col-battery, .scanner-mgmt-row .col-firmware { display: none; } .scanner-detail-grid { grid-template-columns: 1fr; } } /* Toast notifications */ .toast-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 10px 24px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; z-index: 9999; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } .toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-success { background: #166534; color: #bbf7d0; } .toast-warning { background: #78350f; color: #fde68a; } .toast-error { background: #7f1d1d; color: #fecaca; } .toast-info { background: #1e3a5f; color: #bfdbfe; } /* ═══════════════════════════════════════════════ MQTT Users Management ═══════════════════════════════════════════════ */ .mqtt-port-config { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-color); } .mqtt-port-config label { font-weight: 600; font-size: 0.9rem; white-space: nowrap; } .mqtt-port-config input[type="number"] { width: 100px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem; text-align: center; } .mqtt-ca-config { margin-bottom: 16px; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-color); } .mqtt-ca-download { display: flex; align-items: center; gap: 12px; } .mqtt-ca-hint { color: var(--text-secondary); font-size: 0.82rem; font-style: italic; } .mqtt-hint { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 16px 0; line-height: 1.5; } .mqtt-hint strong { color: var(--text-primary); } .mqtt-tools { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; flex-wrap: wrap; } .mqtt-empty { text-align: center; color: var(--text-secondary); padding: 32px 16px; font-size: 0.9rem; } .mqtt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .mqtt-users-table { overflow-x: auto; } .mqtt-table thead th { text-align: left; padding: 8px 6px; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); white-space: nowrap; } .mqtt-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color 0.15s; } .mqtt-table tbody tr:hover { background-color: rgba(59, 130, 246, 0.05); } .mqtt-table tbody tr.inactive { opacity: 0.5; } .mqtt-table tbody td { padding: 8px 6px; vertical-align: middle; font-size: 0.82rem; } .mqtt-username-cell code { background: rgba(59, 130, 246, 0.1); color: var(--primary-color); padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; } .mqtt-password-cell { display: flex; align-items: center; gap: 6px; } .mqtt-pwd-masked { font-family: 'Courier New', monospace; font-size: 0.85rem; color: var(--text-secondary); user-select: all; } .mqtt-pwd-masked.revealed { color: var(--text-primary); background: rgba(34, 197, 94, 0.1); padding: 2px 6px; border-radius: 4px; } .mqtt-desc-cell { color: var(--text-secondary); font-size: 0.85rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mqtt-status-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; white-space: nowrap; } .mqtt-status-badge.active { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .mqtt-status-badge.disabled { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .mqtt-actions-cell { display: flex; gap: 2px; align-items: center; white-space: nowrap; } .btn-icon { background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 5px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .btn-icon:hover { color: var(--primary-color); border-color: var(--primary-color); background: rgba(59, 130, 246, 0.08); } .btn-delete-mqtt:hover { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.08); } .btn-toggle-mqtt.active svg { color: #22c55e; } .btn-reveal-pwd { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; opacity: 0.6; transition: opacity 0.15s; } .btn-reveal-pwd:hover { opacity: 1; } /* MQTT User Modal */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(2px); } .modal-dialog { background: var(--bg-primary); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; } .modal-dialog.modal-small { max-width: 420px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .modal-header h3 { margin: 0; font-size: 1.1rem; } .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); padding: 0 4px; line-height: 1; } .modal-close:hover { color: var(--text-primary); } #mqtt-user-form { padding: 20px; } #mqtt-user-form .form-group { margin-bottom: 16px; } #mqtt-user-form .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .password-input-group { position: relative; display: flex; align-items: center; } .password-input-group input { flex: 1; padding-right: 68px; } .btn-toggle-password { position: absolute; right: 8px; background: none; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 4px; opacity: 0.6; transition: opacity 0.15s; } .btn-toggle-password:hover, .btn-generate-pwd:hover { opacity: 1; } .btn-generate-pwd { position: absolute; right: 36px; background: none; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 4px; opacity: 0.6; transition: opacity 0.15s; } .btn-generate-pwd:hover { color: var(--accent-primary); } .btn.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); } .btn.btn-secondary:hover { background: var(--bg-primary); border-color: var(--text-secondary); } /* Responsive MQTT table */ @media (max-width: 768px) { .mqtt-table thead { display: none; } .mqtt-table tbody tr { display: flex; flex-direction: column; padding: 12px; gap: 6px; border-bottom: 1px solid var(--border-color); } .mqtt-table tbody td { padding: 2px 0; } .mqtt-username-cell::before { content: 'Utilisateur: '; color: var(--text-secondary); font-size: 0.75rem; } .mqtt-password-cell::before { content: 'Mot de passe: '; color: var(--text-secondary); font-size: 0.75rem; } .mqtt-desc-cell { max-width: none; } .mqtt-actions-cell { justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border-color); } } /* ═══════════════════════════════════ TOTP Two-Factor Authentication ═══════════════════════════════════ */ .forgot-password-link { display: block; text-align: center; margin-top: 12px; color: var(--text-secondary); font-size: 0.85rem; text-decoration: none; transition: color 0.2s; } .forgot-password-link:hover { color: var(--accent); } .forgot-step { text-align: center; padding: 10px 0; } .forgot-instruction { color: var(--text-secondary); margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5; } .forgot-step .form-group { margin-bottom: 16px; text-align: left; } .forgot-message { margin-top: 12px; font-size: 0.85rem; line-height: 1.4; padding: 10px; border-radius: 8px; } .forgot-message.success { color: #059669; background: rgba(5, 150, 105, 0.1); border: 1px solid rgba(5, 150, 105, 0.2); } .forgot-message.error { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); } .totp-step { text-align: center; padding: 10px 0; } .totp-icon { color: var(--accent-primary); margin-bottom: 12px; } .totp-instruction { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; } .totp-step .form-group { margin-bottom: 16px; } .totp-step input[type="text"] { text-align: center; font-size: 1.5rem; letter-spacing: 0.5em; font-family: 'JetBrains Mono', monospace; } .totp-step .btn-primary { width: 100%; margin-bottom: 8px; } .totp-step .btn-secondary { width: 100%; } .totp-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color); } .totp-description { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; } .totp-setup-body { padding: 20px; } .totp-setup-steps p { margin-bottom: 12px; color: var(--text-secondary); font-size: 0.9rem; } .totp-setup-steps p strong { color: var(--accent-primary); font-size: 1rem; } .totp-qr-container { text-align: center; padding: 20px; margin: 16px 0; background: white; border-radius: 12px; display: inline-block; } .totp-qr-container img { width: 200px; height: 200px; } .totp-manual-key { text-align: center; margin-bottom: 20px; } .totp-manual-key code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem; letter-spacing: 0.1em; user-select: all; } .totp-setup-steps .form-group input { text-align: center; font-size: 1.3rem; letter-spacing: 0.5em; font-family: 'JetBrains Mono', monospace; } /* ═══════════════════════════════════ Setup Password Screen ═══════════════════════════════════ */ #setup-password-screen { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, rgba(6, 182, 212, 0.15) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.1) 0%, transparent 50%), var(--bg-primary); } .password-input-row { display: flex; gap: 8px; } .password-input-row input { flex: 1; min-width: 0; } .btn-generate { display: flex; align-items: center; justify-content: center; width: 42px; flex-shrink: 0; background: var(--bg-tertiary, rgba(255,255,255,0.05)); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: var(--radius-md, 8px); color: var(--text-secondary, #94a3b8); cursor: pointer; transition: all 0.2s; } .btn-generate:hover { background: var(--accent-primary, #3b82f6); color: #fff; border-color: var(--accent-primary, #3b82f6); } .generated-password-display { margin-top: 8px; padding: 10px 12px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: var(--radius-md, 8px); font-family: 'Courier New', monospace; font-size: 0.95rem; letter-spacing: 0.5px; color: var(--text-primary, #f1f5f9); word-break: break-all; user-select: all; cursor: pointer; position: relative; } .generated-password-display .copy-hint { display: block; font-family: inherit; font-size: 0.7rem; color: var(--text-secondary, #94a3b8); margin-top: 4px; letter-spacing: 0; } .setup-success { text-align: center; padding: 20px 0; } .success-icon { color: #22c55e; margin-bottom: 16px; } .setup-success p { color: var(--text-secondary); margin-bottom: 20px; font-size: 1rem; } .setup-success .btn { width: 100%; } /* 2FA Prompt Modal */ .totp-prompt-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.3s ease; } .totp-prompt-overlay.hidden { display: none; } .totp-prompt-dialog { background: var(--bg-secondary, #1e293b); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 16px; padding: 32px; max-width: 400px; width: 90%; text-align: center; animation: slideUp 0.3s ease; } .totp-prompt-icon { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--accent-primary, #3b82f6); } .totp-prompt-dialog h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--text-primary, #f1f5f9); } .totp-prompt-dialog p { margin: 0 0 24px; font-size: 0.875rem; color: var(--text-secondary, #94a3b8); line-height: 1.5; } .totp-prompt-actions { display: flex; flex-direction: column; gap: 8px; } .totp-prompt-actions .btn-primary { width: 100%; padding: 10px; font-size: 0.9rem; } .btn-ghost { background: none; border: none; color: var(--text-secondary, #94a3b8); cursor: pointer; padding: 8px; font-size: 0.85rem; transition: color 0.2s; } .btn-ghost:hover { color: var(--text-primary, #f1f5f9); } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .totp-prompt-content .btn { flex-shrink: 0; } /* Password requirements live indicator */ .password-requirements { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .password-requirements .req { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; background: var(--bg-tertiary, #2a2a3e); color: var(--text-secondary); border: 1px solid var(--border-color); transition: all 0.2s; } .password-requirements .req.met { background: rgba(34, 197, 94, 0.15); color: #22c55e; border-color: #22c55e; } /* Pending setup badge in user list */ .badge-pending { display: inline-block; background: #f59e0b; color: #fff; font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.03em; } /* Scanner Enrollment Panel */ .enrollment-toolbar { margin-bottom: 12px; display: none; gap: 8px; align-items: center; } .admin .enrollment-toolbar { display: flex; } .enrollment-panel { background: var(--bg-secondary); border: 1px solid var(--accent-primary); border-radius: 8px; padding: 16px; margin-bottom: 16px; animation: enrollSlideIn 0.3s ease; } @keyframes enrollSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .enrollment-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .enrollment-panel-header h4 { margin: 0; font-size: 0.95rem; color: var(--text-primary); } .enrollment-panel-body { display: flex; flex-direction: column; gap: 12px; } .enrollment-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); } .enrollment-status-icon { font-size: 1.1rem; } .enrollment-timer { font-size: 0.82rem; color: var(--text-secondary); } .enrollment-timer strong { color: #f59e0b; font-variant-numeric: tabular-nums; } .enrollment-scanner-info { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px; padding: 12px; } .enrollment-scanner-card { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; } .enrollment-scanner-label { color: var(--text-secondary); } .enrollment-scanner-card strong { color: #22c55e; font-family: 'Courier New', monospace; } .enrollment-actions { display: flex; gap: 8px; } /* Roles management */ .role-card { padding: 14px 16px; background: var(--bg-secondary); border-radius: 10px; margin-bottom: 10px; border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; } .role-card:hover { border-color: rgba(255, 255, 255, 0.06); } .role-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .role-card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .role-card-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); } .role-card-badges { display: flex; align-items: center; gap: 5px; } .role-badge-sys { font-size: 0.65rem; padding: 2px 7px; border-radius: 4px; background: rgba(59, 130, 246, 0.12); color: var(--accent-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .role-badge-own { font-size: 0.65rem; padding: 2px 7px; border-radius: 4px; background: rgba(34, 197, 94, 0.12); color: #22c55e; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .role-badge-count { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); font-weight: 500; } .role-badge-count svg { opacity: 0.6; } .role-card-actions { display: flex; gap: 4px; flex-shrink: 0; } .role-card-actions .btn-icon { opacity: 0.4; transition: opacity 0.15s; } .role-card:hover .role-card-actions .btn-icon { opacity: 0.7; } .role-card-actions .btn-icon:hover { opacity: 1; } .role-card-perms { display: flex; flex-wrap: wrap; gap: 5px; } .role-perm-chip { display: inline-block; font-size: 0.72rem; padding: 3px 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.06); line-height: 1.3; } .role-perm-none { font-size: 0.78rem; color: var(--text-secondary); opacity: 0.5; font-style: italic; } /* Role edit modal */ .role-modal-overlay { z-index: 1100; } .role-modal-dialog { max-width: 500px; width: 90vw; } .role-modal-x { background: none; border: none; color: var(--text-secondary); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; transition: background 0.15s, color 0.15s; } .role-modal-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); } .role-modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 20px 24px; margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .role-modal-footer .btn { min-height: 42px; padding: 10px 20px; } .role-modal-footer .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.1); } .role-modal-footer .btn-ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .timeout-input-row { display: flex; align-items: center; gap: 8px; } .timeout-input-row input[type="number"] { width: 80px; } .timeout-unit { color: var(--text-secondary); font-size: 0.85rem; } .permissions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .permission-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: rgba(255, 255, 255, 0.03); border-radius: 7px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.05); transition: border-color 0.15s, background 0.15s; } .permission-item:hover { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); } .permission-item:has(input:checked) { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); } .permission-item input[type="checkbox"] { accent-color: var(--accent-primary); width: 15px; height: 15px; flex-shrink: 0; } .permission-item label { font-size: 0.8rem; cursor: pointer; flex: 1; line-height: 1.3; color: var(--text-secondary); } .permission-item:has(input:checked) label { color: var(--text-primary); } .permission-item.perm-locked { opacity: 0.4; cursor: not-allowed; } .permission-item.perm-locked label { cursor: not-allowed; } .info-notice { padding: 10px 12px; background: rgba(59, 130, 246, 0.08); border-radius: 6px; font-size: 0.82rem; color: var(--text-secondary); margin-top: 10px; border: 1px solid rgba(59, 130, 246, 0.1); } @media (max-width: 600px) { .permissions-grid { grid-template-columns: 1fr; } } /* ── Backup settings ─────────────────────────────────────────────────────── */ .backup-toggle-row { display: flex; align-items: center; gap: 10px; } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { display: none; } .toggle-slider { position: absolute; inset: 0; background: var(--bg-tertiary, #374151); border-radius: 24px; cursor: pointer; transition: background .2s; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent, #3b82f6); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } .backup-password-row { display: flex; gap: 6px; align-items: center; } .backup-password-row input[type="password"], .backup-password-row input[type="text"] { flex: 1; min-width: 0; } .pw-strength-bar { height: 4px; background: var(--bg-tertiary, #374151); border-radius: 2px; margin-top: 6px; overflow: hidden; } .pw-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width .3s, background .3s; background: #ef4444; } .pw-strength-fill.weak { background: #ef4444; } .pw-strength-fill.medium { background: #f59e0b; } .pw-strength-fill.strong { background: #10b981; } .backup-interval-row { display: flex; align-items: center; gap: 8px; } /* Ligne Paramètres sauvegardes : 4 colonnes égales, libellés sur 2 lignes max → hauteur réservée pour aligner les inputs */ .form-row.backup-settings-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: start; } .form-row.backup-settings-row .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: unset; /* annule .form-row .form-group { flex: 1 } */ } .form-row.backup-settings-row .form-group > label { display: block; line-height: 1.35; min-height: calc(1.35em * 2); font-size: 0.9rem; } input.backup-settings-num { width: 100%; max-width: 96px; box-sizing: border-box; } /* Champ heure : icône native du navigateur */ .form-row.backup-settings-row .form-group.backup-time-field { min-width: 0; } input.backup-time-input[type="time"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 12px; } @media (max-width: 900px) { .form-row.backup-settings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .backup-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .backup-upload-label { cursor: pointer; box-sizing: border-box; } .backup-actions-row .btn { height: 42px; box-sizing: border-box; } .backup-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .backup-table th, .backup-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color, #1f2937); } .backup-table th { font-weight: 600; color: var(--text-secondary, #9ca3af); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; } .backup-actions-cell { display: flex; gap: 4px; flex-wrap: wrap; } .backup-path-display { display: block; background: var(--bg-tertiary, #1a1a2e); padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 0.85em; word-break: break-all; margin-top: 4px; user-select: all; } .rsync-key-import-row { display: flex; gap: 10px; align-items: flex-start; } .rsync-key-import-row textarea { flex: 1; min-height: 60px; resize: vertical; font-family: monospace; font-size: 0.85em; background: var(--bg-tertiary, #1a1a2e); color: var(--text-primary); border: 1px solid var(--border-color, #374151); border-radius: 6px; padding: 8px 10px; } .rsync-key-import-row .btn { white-space: nowrap; height: 42px; align-self: flex-end; } .rsync-keys-list { display: flex; flex-direction: column; gap: 6px; } .rsync-key-item { display: flex; align-items: center; gap: 10px; background: var(--bg-tertiary, #1a1a2e); padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 0.82em; word-break: break-all; } .rsync-key-item .rsync-key-comment { flex: 1; color: var(--text-primary); } .rsync-key-item .rsync-key-type { color: var(--text-secondary, #9ca3af); font-size: 0.9em; } .rsync-key-item .btn-small { flex-shrink: 0; } .backup-pubkey-display { background: var(--bg-tertiary, #1a1a2e); padding: 10px 12px; border-radius: 6px; font-family: monospace; font-size: 0.8em; word-break: break-all; margin-top: 8px; user-select: all; max-height: 80px; overflow-y: auto; } .btn-danger { background: #ef4444; color: #fff; border: none; } .btn-danger:hover { background: #dc2626; } @media (max-width: 600px) { .backup-password-row { flex-wrap: wrap; } .backup-actions-cell { flex-direction: column; } } /* Plein écran Android : API sur #dashboard (garde la barre de notifications) */ #dashboard:fullscreen, #dashboard:-webkit-full-screen { display: flex !important; flex-direction: column; width: 100%; height: 100%; background: var(--bg-primary); } #dashboard:fullscreen .main-header, #dashboard:-webkit-full-screen .main-header { padding-top: var(--safe-area-top); min-height: calc(var(--header-height) + var(--safe-area-top)); flex-shrink: 0; } #dashboard:fullscreen .main-content, #dashboard:-webkit-full-screen .main-content { flex: 1; min-height: 0; height: auto !important; } /* Repli immersif Android si l'API Fullscreen échoue */ html.app-immersive body { overflow: hidden; } html.app-immersive #dashboard { position: fixed; top: var(--app-immersive-top); left: 0; right: 0; width: 100%; height: var(--app-immersive-height); max-height: var(--app-immersive-height); z-index: 5000; display: flex !important; flex-direction: column; background: var(--bg-primary); } html.app-immersive .main-header { padding-top: var(--safe-area-top); min-height: calc(var(--header-height) + var(--safe-area-top)); flex-shrink: 0; } html.app-immersive .main-content { flex: 1; min-height: 0; height: auto !important; } /* Plein écran (Android / desktop) */ .fullscreen-toggle-btn { flex-shrink: 0; } /* L'attribut hidden doit l'emporter sur .icon-btn { display:flex } (sinon le bouton reste visible en PWA installée / iOS). */ .fullscreen-toggle-btn[hidden] { display: none !important; } .fullscreen-toggle-btn .fullscreen-icon { width: 20px; height: 20px; } .fullscreen-toggle-btn .fullscreen-icon-exit { display: none; } .fullscreen-toggle-btn.is-fullscreen .fullscreen-icon-enter { display: none; } .fullscreen-toggle-btn.is-fullscreen .fullscreen-icon-exit { display: block; } /* Bascule thème clair / sombre */ .theme-toggle-btn { flex-shrink: 0; } .theme-toggle-btn .theme-icon { width: 20px; height: 20px; } .theme-toggle-btn .theme-icon-moon { display: none; } [data-theme="light"] .theme-toggle-btn .theme-icon-sun { display: none; } [data-theme="light"] .theme-toggle-btn .theme-icon-moon { display: block; } #login-screen .login-locale-row .theme-toggle-btn { width: 28px; height: 28px; padding: 0; opacity: 0.88; border-radius: var(--radius-sm); } #login-screen .login-locale-row .theme-toggle-btn:hover { opacity: 1; } #login-screen .login-locale-row .theme-toggle-btn .theme-icon { width: 14px; height: 14px; } /* Rapport de détections (onglet) */ #tab-report { padding: 16px; } .report-tab-panel { position: relative; min-height: 120px; } .report-tab-body { display: flex; flex-direction: column; gap: 4px; } .report-tab-panel.report-tab-busy .report-tab-body { pointer-events: none; opacity: 0.55; } .report-loading-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(4px); border-radius: var(--radius-md); pointer-events: all; } #map.report-zone-drawing, #map.report-zone-drawing .leaflet-grab { cursor: crosshair !important; } .report-loading-overlay.hidden { display: none; } .report-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 32px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); max-width: 90%; } .report-loading-text { margin: 0 0 4px; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); text-align: center; } .report-progress-track { width: 100%; min-width: 220px; height: 10px; border-radius: 999px; background: var(--bg-primary); border: 1px solid var(--border-color); overflow: hidden; } .report-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #0d9488, #06b6d4); transition: width 0.35s ease; } .report-progress-pct { margin: 8px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--accent-primary); text-align: center; font-variant-numeric: tabular-nums; } .report-banner { padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .report-banner-info { background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.35); color: var(--text-primary); } .report-banner-warn { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); color: var(--text-primary); } .report-banner-warn a { color: var(--accent-primary); text-decoration: underline; } .report-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 820px) { .report-layout { grid-template-columns: 1fr; } } .report-section { margin-bottom: 0; } .report-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .report-section-head h3, .report-section h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--text-primary); } .report-zone-tools { display: flex; gap: 8px; flex-wrap: wrap; } .report-zone-tool { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 0.82rem; font-weight: 500; line-height: 1; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .report-zone-tool-icon { flex-shrink: 0; display: block; } .report-zone-tool-draw { color: var(--accent-primary-text, #22d3ee); border-color: rgba(6, 182, 212, 0.55); } .report-zone-tool-draw:hover { background: rgba(6, 182, 212, 0.1); border-color: var(--accent-primary); color: var(--accent-primary); } .report-zone-tool-draw.active { background: rgba(6, 182, 212, 0.18); border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.25); } .report-zone-tool-clear { color: #f87171; border-color: rgba(248, 113, 113, 0.45); } .report-zone-tool-clear:hover { background: rgba(248, 113, 113, 0.1); border-color: #f87171; color: #fca5a5; } [data-theme="light"] .report-zone-tool-draw { color: #0e7490; border-color: rgba(14, 116, 144, 0.45); } [data-theme="light"] .report-zone-tool-draw:hover, [data-theme="light"] .report-zone-tool-draw.active { color: #0e7490; border-color: #0e7490; background: rgba(14, 116, 144, 0.08); } [data-theme="light"] .report-zone-tool-clear { color: #dc2626; border-color: rgba(220, 38, 38, 0.4); } [data-theme="light"] .report-zone-tool-clear:hover { color: #b91c1c; border-color: #dc2626; background: rgba(220, 38, 38, 0.06); } .report-zone-status { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-secondary); } .report-zone-hint { margin-top: 4px; } .report-preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .report-preset-btn { padding: 6px 12px; font-size: 0.82rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; } .report-preset-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); } .report-preset-btn.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; } .report-custom-range { display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; } .report-custom-range .form-group { margin-bottom: 0; min-width: 0; } .report-custom-range .form-group label { margin-bottom: 4px; font-size: 0.78rem; } .report-custom-range .form-group input[type="datetime-local"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; font-size: 0.8rem; } .report-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .report-preview-head h3 { margin: 0; } .report-stats-wrap { position: relative; } .report-preview-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(15, 23, 42, 0.55); border-radius: var(--radius-md); backdrop-filter: blur(2px); } .report-preview-loading.hidden { display: none; } .report-preview-loading-logo { width: 40px; height: 40px; animation: drones-list-loading-spin 1.1s linear infinite; } .report-preview-loading-logo svg { width: 100%; height: 100%; display: block; } .report-preview-loading-text { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); } .report-stats-wrap.report-stats-loading .report-stats { opacity: 0.35; pointer-events: none; } .report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .report-stat { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 8px; text-align: center; } .report-stat-value { display: block; font-size: 1.35rem; font-weight: 700; color: var(--accent-primary); } .report-stat-label { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-secondary); } .report-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .report-side .settings-section { padding: 12px 0; border-bottom: 1px solid var(--border-color); } .report-side .settings-section:last-of-type { border-bottom: none; } /* ════════════════════════════════════════════════════════════════════════════ PASSE DE CONTRASTE (v3.64) Étude WCAG appliquée sur les textes/icônes — NE TOUCHE PAS aux cartes (Leaflet, tuiles, contrôles de calques) ni aux fonds de cartes-fiches. ════════════════════════════════════════════════════════════════════════════ */ /* — Onglets latéraux : l'état inactif (--text-muted) est désormais plus net, mais on remonte l'état "hover" et on rend l'actif un peu plus visible. */ .tab-btn:hover { color: var(--text-primary); } .panel-tabs .tab-btn.active { font-weight: 600; } /* — Hints de formulaire : la valeur par défaut était en --accent-warning (illisible sur fond clair, ~2:1). On remet en texte muet de l'interface. */ .form-hint { color: var(--text-muted); } [data-theme="light"] .form-hint { color: var(--text-secondary); } /* — Icon buttons (header) : bordure plus présente, focus visible */ .icon-btn:focus-visible, .btn-icon:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } [data-theme="light"] .icon-btn { color: var(--text-secondary); } [data-theme="light"] .icon-btn:hover { color: var(--accent-primary-text); border-color: var(--accent-primary-text); } /* — Sound alert : labels et icônes désormais en --text-secondary (et bold) pour rester visibles même quand le toggle est OFF. Le rail du toggle utilise --bg-primary + bordure pour se détacher du fond du conteneur. */ /* — Anti "gris fantôme" : certains éléments empilent opacity + text-muted, ce qui ramenait le contraste en dessous d'AA. On normalise. */ .drone-scanner-id, .drone-scanner-row .drone-scanner-id, .drone-scanner-row .drone-rssi, .popup-section-label { opacity: 1 !important; color: var(--text-secondary); } .popup-section-label { font-weight: 600; } /* — Form labels : la couleur var(--text-secondary) est maintenant assez foncée en clair / claire en sombre — on s'assure du poids 500 partout. */ .form-group label, .settings-section h4, .recent-activity h3, .mqtt-table thead th { font-weight: 600; } /* — Hints, métadonnées : on remonte de --text-muted à --text-secondary pour les rendre nettement lisibles tout en gardant la hiérarchie via la taille. */ .stat-label, .alert-scanner, .system-item label, .drone-id-row, .scanner-icon-badge { color: var(--text-secondary); } /* ──────────────────────────────────────────────────────────────────────────── MODE CLAIR : remappage des couleurs codées en dur (originellement choisies pour fond sombre). On passe à des teintes -700 → contraste AA/AAA sur blanc. ──────────────────────────────────────────────────────────────────────────── */ /* Liens / badges indigo */ [data-theme="light"] .scanner-group-link { background: rgba(67, 56, 202, 0.10); color: #4338ca; border-color: rgba(67, 56, 202, 0.35); } [data-theme="light"] .scanner-group-link:hover { background: rgba(67, 56, 202, 0.18); color: #312e81; } [data-theme="light"] .account-group-badge { background: rgba(67, 56, 202, 0.10); color: #4338ca; } /* Badges offline (drone / scanner) */ [data-theme="light"] .scanner-status-badge.offline, [data-theme="light"] .drone-status-badge.historical { color: #334155; background: rgba(100, 116, 139, 0.18); border-color: rgba(100, 116, 139, 0.45); } /* Rôle modérateur (texte) */ [data-theme="light"] .role-badge.moderator { background: rgba(180, 83, 9, 0.15); color: var(--accent-warning-text); } /* 2FA : "enabled" doit rester reconnaissable en vert mais lisible */ [data-theme="light"] .badge-2fa.enabled { background: rgba(4, 120, 87, 0.12); color: var(--accent-success-text); } /* Batterie, statuts, badges textuels */ [data-theme="light"] .bat-ok, [data-theme="light"] .badge-online, [data-theme="light"] .tls-verified, [data-theme="light"] .cmd-log-entry.success { color: var(--accent-success-text); } [data-theme="light"] .bat-warn, [data-theme="light"] .tls-on, [data-theme="light"] .cmd-log-entry.pending, [data-theme="light"] .detail-row.alert-warning { color: var(--accent-warning-text); } [data-theme="light"] .bat-crit, [data-theme="light"] .badge-offline, [data-theme="light"] .tls-off, [data-theme="light"] .cmd-log-entry.error, [data-theme="light"] .cmd-log-entry.timeout, [data-theme="light"] .detail-row.alert-critical { color: var(--accent-danger-text); } /* Badges d'alertes scanner (texte+bordure) */ [data-theme="light"] .scanner-alerts-badge.warning { background: rgba(180, 83, 9, 0.12); color: var(--accent-warning-text); border-color: rgba(180, 83, 9, 0.35); } [data-theme="light"] .scanner-alerts-badge.critical { background: rgba(185, 28, 28, 0.10); color: var(--accent-danger-text); border-color: rgba(185, 28, 28, 0.35); } /* Badge "Mise à jour firmware disponible" / en cours */ [data-theme="light"] .scanner-fw-badge.available { background: rgba(3, 105, 161, 0.12); color: #0369a1; border-color: rgba(3, 105, 161, 0.35); } [data-theme="light"] .scanner-fw-badge.updating { background: rgba(180, 83, 9, 0.12); color: var(--accent-warning-text); border-color: rgba(180, 83, 9, 0.35); } /* Sévérité des alertes (texte) */ [data-theme="light"] .alert-severity.critical { background: rgba(185, 28, 28, 0.12); color: var(--accent-danger-text); } [data-theme="light"] .alert-severity.error, [data-theme="light"] .alert-severity.warning { background: rgba(180, 83, 9, 0.15); color: var(--accent-warning-text); } /* Mot de passe oublié — succès / erreur */ [data-theme="light"] .forgot-message.success { color: var(--accent-success-text); background: rgba(4, 120, 87, 0.10); border-color: rgba(4, 120, 87, 0.30); } [data-theme="light"] .forgot-message.error { color: var(--accent-danger-text); background: rgba(185, 28, 28, 0.08); border-color: rgba(185, 28, 28, 0.30); } /* Liens utilisateurs (audit log etc.) */ [data-theme="light"] .audit-command { background: rgba(29, 78, 216, 0.10); color: #1d4ed8; } /* Status mqtt actif/desactivé */ [data-theme="light"] .mqtt-status-badge.active { background: rgba(4, 120, 87, 0.12); color: var(--accent-success-text); } [data-theme="light"] .mqtt-status-badge.disabled { background: rgba(185, 28, 28, 0.10); color: var(--accent-danger-text); } /* Bouton "delete" icon hover */ [data-theme="light"] .btn-delete-mqtt:hover { color: var(--accent-danger-text); border-color: var(--accent-danger-text); background: rgba(185, 28, 28, 0.08); } [data-theme="light"] .btn-toggle-mqtt.active svg { color: var(--accent-success-text); } /* Toasts : versions plus contrastées en mode clair (texte foncé sur fond pastel) */ [data-theme="light"] .toast-success { background: #d1fae5; color: #064e3b; border: 1px solid rgba(4, 120, 87, 0.4); } [data-theme="light"] .toast-warning { background: #fef3c7; color: #78350f; border: 1px solid rgba(180, 83, 9, 0.4); } [data-theme="light"] .toast-error { background: #fee2e2; color: #7f1d1d; border: 1px solid rgba(185, 28, 28, 0.4); } [data-theme="light"] .toast-info { background: #dbeafe; color: #1e3a8a; border: 1px solid rgba(29, 78, 216, 0.4); } /* Texte courant en accent (rôle utilisateur, valeurs système, etc.) : en mode clair, var(--accent-primary) ≈ #06b6d4 a un contraste ≈ 2.4:1 sur blanc. On bascule sur la variante "-text" plus foncée. */ [data-theme="light"] .user-role:not(.role-danger), [data-theme="light"] .stat-icon.scanners, [data-theme="light"] .system-item .value, [data-theme="light"] .report-stat-value, [data-theme="light"] .report-progress-pct, [data-theme="light"] .role-badge.user, [data-theme="light"] .totp-icon { color: var(--accent-primary-text); } [data-theme="light"] .stat-icon.drones { color: var(--accent-secondary-text); } [data-theme="light"] .stat-icon.detections { color: var(--accent-success-text); } [data-theme="light"] .stat-icon.alerts { color: var(--accent-warning-text); } /* Onglet panneau actif en mode clair : couleur plus foncée pour lisibilité */ [data-theme="light"] .tab-btn.active { color: var(--accent-primary-text); border-bottom-color: var(--accent-primary-text); } /* Couleur d'icône "drone activity feed" (--accent-success utilisé comme bordure ou texte sur fond clair) */ [data-theme="light"] .drone-flight-time { color: var(--accent-success-text); background: rgba(4, 120, 87, 0.10); border-color: rgba(4, 120, 87, 0.35); } /* Bouton primary (focus visible plus contrasté en mode clair) */ [data-theme="light"] .btn-primary:focus-visible { outline: 2px solid var(--accent-primary-text); outline-offset: 2px; } /* Forgot password link en mode clair */ [data-theme="light"] .forgot-password-link { color: var(--accent-primary-text); } [data-theme="light"] .forgot-password-link:hover { color: #155e75; } /* Bandeau de rapport "warning" : on garde le lien lisible */ [data-theme="light"] .report-banner-warn a, [data-theme="light"] .report-preset-btn:hover { color: var(--accent-primary-text); } /* — DARK MODE : quelques rappels où text-secondary apporte un boost notable (popup-section-label affichait opacity 0.7 → texte gris très clair, donc OK désormais ; on s'assure que les drones offline gardent leur nuance) */ /* — Bordure des onglets en focus (les deux modes) */ .tab-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; } /* — Selects (langue + filtres) : la flèche SVG est codée en #94a3b8. En mode clair, on la rend plus visible via un filtre de teinte. */ [data-theme="light"] #login-screen .login-locale-row .locale-switcher, [data-theme="light"] .form-group select:not([multiple]), [data-theme="light"] .filter-select { color-scheme: light; } [data-theme="light"] .form-group select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); } [data-theme="light"] #login-screen .login-locale-row .locale-switcher { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); } /* ════════════════════════════════════════════════════════════════════════════ MAINTENANCE SCANNERS — mode clair (modale détail) ════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] #scanner-detail-modal { background: rgba(15, 23, 42, 0.45); } [data-theme="light"] #scanner-detail-modal .modal-dialog { background: var(--bg-secondary); border-color: var(--border-color); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); } [data-theme="light"] .detail-section { background: var(--bg-tertiary); border-color: var(--border-color); } [data-theme="light"] .detail-section h4 { color: var(--accent-primary-text); } [data-theme="light"] .detail-row span:first-child { color: var(--text-secondary); } [data-theme="light"] .fw-slot-state-hint { color: var(--text-muted); } [data-theme="light"] .action-group-label { color: var(--text-secondary); } /* Bouton MAJ firmware en cours : texte sombre sur dégradé clair (plus de blanc invisible) */ [data-theme="light"] #scanner-detail-modal .btn-disabled, [data-theme="light"] #scanner-cmd-fw-upgrade.btn-disabled { color: var(--text-primary) !important; border-color: var(--border-color) !important; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); } /* Boutons outline du pied de modale (Réinstaller, Télécharger, etc.) */ [data-theme="light"] #scanner-detail-modal .btn-outline { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); font-weight: 500; } [data-theme="light"] #scanner-detail-modal .btn-outline:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent-primary-text); color: var(--accent-primary-text); } [data-theme="light"] #scanner-detail-modal .btn-outline:disabled { color: var(--text-muted); background: var(--bg-tertiary); } [data-theme="light"] #scanner-detail-modal .btn-primary { color: #fff; } [data-theme="light"] #scanner-detail-modal .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); } [data-theme="light"] #scanner-detail-modal .toggle-inline { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } [data-theme="light"] #scanner-detail-modal .select-small { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="light"] #scanner-detail-modal .detail-section .btn-sm.btn-outline { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="light"] .cmd-log-entry.pending { color: var(--accent-warning-text); } [data-theme="light"] .cmd-log-entry.success { color: var(--accent-success-text); } [data-theme="light"] .cmd-log-entry.error { color: var(--accent-danger-text); } [data-theme="light"] .cmd-log-entry.timeout { color: #c2410c; } /* Bouton paramètres sur les cartes scanners — fond blanc = invisible sans contraste fort */ [data-theme="light"] .scanner-settings-btn { background: #cbd5e1; border: 1.5px solid #475569; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14); } [data-theme="light"] .scanner-item.online:not(.selected) .scanner-settings-btn { background: #e2e8f0; border-color: #334155; color: #0f172a; } [data-theme="light"] .scanner-item.offline:not(.selected) .scanner-settings-btn { background: #cbd5e1; border-color: #475569; color: #1e293b; } [data-theme="light"] .scanner-settings-btn:hover { background: #94a3b8; border-color: var(--accent-primary-text); color: #fff; box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.28); } /* ─────────────────────────────────────────────────────────── Alarmes de détection ─────────────────────────────────────────────────────────── */ /* Bandeau supérieur non bloquant (sur la carte) */ .alarm-banner-stack { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 8px; width: min(640px, calc(100% - 24px)); pointer-events: none; } .alarm-banner { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 29, 29, 0.96); color: #fff; border: 1px solid rgba(248, 113, 113, 0.65); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); animation: alarmBannerIn 0.2s ease-out; } @keyframes alarmBannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .alarm-banner-icon { font-size: 20px; line-height: 1; } .alarm-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .alarm-banner-text strong { font-size: 0.95rem; } .alarm-banner-text span { font-size: 0.82rem; opacity: 0.92; } .alarm-banner-recenter { background: #fff; color: #7f1d1d; border: none; font-weight: 600; white-space: nowrap; } .alarm-banner-recenter:hover { background: #fee2e2; } .alarm-banner-close { background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.8; padding: 0 4px; } .alarm-banner-close:hover { opacity: 1; } /* Onglet Alarmes : liste */ .alarms-intro { margin: 4px 0 10px; } /* Bascule Alarmes / Listes blanches */ .alarms-section-switcher { display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; background: var(--bg-tertiary); border: 1px solid var(--border-color, #334155); border-radius: 8px; } .alarms-section-tab { flex: 1; padding: 6px 10px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .alarms-section-tab:hover { color: var(--text-primary); } .alarms-section-tab.active { background: var(--accent-primary, #2563eb); color: #fff; } /* Éditeur de liste blanche : saisie des identifiants de drones */ .whitelist-drones-input { width: 100%; resize: vertical; min-height: 6rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.82rem; } .alarm-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .alarm-card-off { opacity: 0.62; } .alarm-card-main { flex: 1; min-width: 0; } .alarm-card-title { display: flex; align-items: center; gap: 8px; } .alarm-status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .alarm-status-dot.alarm-on { background: var(--accent-success, #10b981); box-shadow: 0 0 6px rgba(16,185,129,0.6); } .alarm-status-dot.alarm-off { background: var(--text-muted, #64748b); } .alarm-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); } .alarm-card-meta .alarm-cap, .alarm-card-meta .alarm-zone-type { background: var(--bg-tertiary); border-radius: 6px; padding: 1px 7px; } .alarm-card-meta .alarm-secure-rid { color: #16a34a; } .alarm-owner { font-style: italic; } .alarm-targets { display: block; margin-top: 5px; font-size: 0.78rem; color: var(--text-secondary); } .alarm-card-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .alarm-readonly { font-size: 16px; opacity: 0.7; } /* Éditeur d'alarme */ .alarm-editor-header { display: flex; align-items: center; gap: 10px; } .alarm-form .settings-section { margin-top: 14px; } /* Listes de destinataires (cases à cocher) — évite les