body { font-family: "Instrument Sans", Arial, sans-serif; font-size: 12px; margin: 30px; color: #e8ecf0; background: #0d0f12; } h1 { font-size: 18px; color: #c17f3e; margin-bottom: 4px; } .sub { font-size: 12px; color: #7a8694; margin-bottom: 20px; } table { width: 100%; border-collapse: collapse; } thead tr { background: #c17f3e; color: #0d0f12; } th { padding: 8px 6px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing:.5px; } td { font-size: 12px; vertical-align: top; } tr:nth-child(even) { background: #f5f0e8; } @media print { body { margin: 15px; } } :root { --primary-color: #c17f3e; --secondary-color: #a66b2c; --accent-color: #e8a04e; } /* ═══════════════════════════════════════════ HEADER USER BADGE & BUTTONS ═══════════════════════════════════════════ */ /* Badge utilisateur dans le header */ #userBadge, .user-badge { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .hdr-user-name { font-size: 13px; font-weight: 600; color: var(--text2); white-space: nowrap; font-family: var(--sans); } /* Boutons header — neutralise les vieux styles inline */ .hdr-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 11px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: all var(--t); white-space: nowrap; height: 26px; background: var(--surface3); color: var(--text2); } .hdr-btn:hover { background: var(--surface4); border-color: var(--border2); color: var(--text); } /* Bouton mot de passe */ .hdr-btn-key { background: rgba(193,127,62,0.1); color: var(--primary); border-color: rgba(193,127,62,0.25); } .hdr-btn-key:hover { background: var(--primary); color: #0d0f12; border-color: var(--primary); } /* Bouton déconnexion */ .hdr-btn-logout { background: rgba(224,82,82,0.08); color: var(--error); border-color: rgba(224,82,82,0.2); } .hdr-btn-logout:hover { background: var(--error); color: #fff; border-color: var(--error); } /* Bouton gérer utilisateurs */ .hdr-btn-users { background: rgba(160,132,232,0.1) !important; color: #a084e8 !important; border-color: rgba(160,132,232,0.25) !important; } .hdr-btn-users:hover { background: #a084e8 !important; color: #0d0f12 !important; } /* Neutralise les inline styles hérités sur les boutons dans .actions */ .header .actions button[style*="background"], .header-row-top .actions button[style*="background"] { background: var(--surface3) !important; color: var(--text2) !important; border: 1px solid var(--border) !important; padding: 5px 11px !important; font-size: 11px !important; height: 26px !important; border-radius: var(--r-md) !important; } /* ═══════════════════════════════════════════ OVERRIDE GLOBAL — Modales générées dynamiquement par JS Force le thème Ivory & Copper sur tous les contenus inline ═══════════════════════════════════════════ */ .modal-content, .modal-content > div, .modal-content > form, [id$="Modal"] > div, [id*="Modal"] .modal-content { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } .modal-header, .modal-content > div[style*="padding"][style*="border"] { background: var(--surface3) !important; color: var(--text) !important; border-color: var(--border) !important; } .modal-header h2, .modal-header h3, .modal-content h2, .modal-content h3, .modal-content h4 { color: var(--text) !important; font-family: var(--display) !important; } .modal-content table { background: transparent !important; } .modal-content th { background: var(--surface3) !important; color: var(--muted) !important; border-color: var(--border2) !important; font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: 1px !important; } .modal-content td { background: transparent !important; color: var(--text2) !important; border-color: var(--border) !important; } .modal-content tr:hover td { background: var(--surface3) !important; } .modal-content input, .modal-content select, .modal-content textarea { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; } .modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(176,106,40,0.12) !important; outline: none !important; } .modal-content label { color: var(--muted) !important; font-family: var(--mono) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; } .modal-content [style*="background: #"], .modal-content [style*="background:#"], .modal-content [style*="background-color"] { background: var(--surface3) !important; border-color: var(--border) !important; color: var(--text) !important; } .modal-content .toggle-slider { background: var(--border2) !important; } .modal-content input:checked + .toggle-slider { background: var(--success) !important; } .modal-content [style*="background: #FEF3C7"], .modal-content [style*="background:#FEF3C7"], .modal-content [style*="background:#fbbf24"], .modal-content [style*="background: #fbbf24"] { background: rgba(176,106,40,0.10) !important; color: var(--primary) !important; border-color: rgba(176,106,40,0.2) !important; } .modal-content button:not(.close):not(.toggle-switch):not([class*="toggle"]) { font-family: var(--sans) !important; border-radius: var(--r-md) !important; font-size: 12px !important; cursor: pointer !important; } .modal-content button[style*="#3B82F6"], .modal-content button[style*="background: #c17f3e"], .modal-content button[style*="background:#c17f3e"], .modal-content button[style*="background: linear-gradient(135deg, #c17f3e"], .modal-content button[style*="background: linear-gradient(135deg, #b06a28"] { background: var(--primary) !important; color: #ffffff !important; border: none !important; } .modal-content button[style*="#EF4444"], .modal-content button[style*="#DC2626"] { background: rgba(192,57,43,0.08) !important; color: var(--error) !important; border: 1px solid rgba(192,57,43,0.2) !important; } .modal-content button[style*="#10B981"], .modal-content button[style*="#059669"], .modal-content button[style*="#4caf82"] { background: rgba(46,125,85,0.08) !important; color: var(--success) !important; border: 1px solid rgba(46,125,85,0.2) !important; } .modal-content [style*="background: #FEF9C3"], .modal-content [style*="background:#fef9c3"] { background: rgba(176,106,40,0.08) !important; color: var(--primary) !important; border: 1px solid rgba(176,106,40,0.2) !important; } .modal-content a { color: var(--primary) !important; } .modal-content a:hover { color: var(--primary-light) !important; } .modal-content small, .modal-content [style*="color: #6"], .modal-content [style*="color: #9"] { color: var(--muted) !important; } .modal-content hr { border-color: var(--border) !important; } .modal-content ::-webkit-scrollbar { width: 4px; } .modal-content ::-webkit-scrollbar-track { background: var(--surface3); } .modal-content ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }