enfant de #modalOverlay) */ #modalOverlay > div { max-height: calc(100vh - 2rem); display: flex; flex-direction: column; } /* Support mobile moderne (barre d'adresse): dvh */ @supports (height: 100dvh) { #modalOverlay > div { max-height: calc(100dvh - 2rem); } } /* Le corps prend l'espace et devient scrollable */ #modalBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #modalBox { width: 90%; max-width: 360px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0,0,0,0.20); } #modalBox h3 { margin: 0; font-size: 16px; font-weight: bold; margin-bottom: 10px; } /* --- MOBILE --- */ @media (max-width: 768px) { #sidebar { width: 190px; padding-top: 14px; } .nav-btn { font-size: 13px; padding: 10px 14px; } #main-content { padding: 16px; } } /* --- MODE SOMBRE GLOBAL (piloté par .dark sur ) --- */ /* Fond général + texte */ .dark body { background-color: var(--fm-dark-page, #020617); /* très foncé */ color: #e5e7eb; } /* Toutes les cartes blanches deviennent des cartes foncées */ .dark .bg-white { background-color: var(--fm-dark-surface, #0f172a) !important; } /* Textes principaux */ .dark .text-slate-700, .dark .text-slate-800, .dark .text-slate-900 { color: #e5e7eb !important; } /* Bordures plus foncées */ .dark .border-slate-200, .dark .border-slate-300 { border-color: var(--fm-dark-border, #1f2937) !important; } /* Sidebar en sombre */ .dark #sidebar { background-color: var(--fm-dark-page, #020617); } /* Texte du menu en clair */ .dark #sidebar .nav-btn { color: #e5e7eb; } .dark #sidebar .nav-btn:hover { background-color: var(--fm-dark-hover, #1e293b); } .dark #sidebar .nav-btn.bg-slate-100 { background-color: var(--fm-dark-hover, #1e293b); } /* --- LOGIN EN MODE SOMBRE --- */ .dark #loginView { background-color: var(--fm-dark-page, #020617) !important; /* carte très foncée */ color: #e5e7eb !important; } .dark #loginView h1 { color: #e5e7eb !important; } .dark #loginView p { color: #cbd5f5 !important; /* petit texte un peu plus pâle mais lisible */ } .dark #loginView label { color: #e5e7eb !important; } .dark #loginView input { background-color: var(--fm-dark-input, #0b1220) !important; /* fond input foncé */ color: #e5e7eb !important; /* texte clair */ border-color: var(--fm-dark-border, #1f2937) !important; /* bordure foncée */ } .dark #loginView #loginError { color: #fecaca !important; /* rouge pâle lisible sur fond foncé */ } /* --- ENTÊTES & TEXTES EN MODE SOMBRE (TABLEAUX) --- */ /* Toutes les zones avec bg-slate-50 (souvent les en-têtes) deviennent foncées */ .dark .bg-slate-50 { background-color: var(--fm-dark-page, #020617) !important; /* fond très foncé */ } /* Les cellules d'entête () des tableaux : fond foncé + texte blanc */ .dark table thead th { background-color: var(--fm-dark-page, #020617) !important; color: #f9fafb !important; /* blanc quasi pur */ border-bottom-color: var(--fm-dark-border, #1f2937) !important; /* bordure foncée */ } /* Tous les textes en text-slate-500 deviennent vraiment lisibles en mode sombre */ .dark .text-slate-500 { color: #e5e7eb !important; /* gris très clair (presque blanc) */ } /* --- LIGNES "TOTAL PROJET" DU DASHBOARD EN MODE SOMBRE --- */ /* Tableau 2 (par projet) et tableau 3 (par employé) utilisent bg-slate-200 pour les totaux */ .dark #dbProjectSummary tr.bg-slate-200, .dark #dbEmployeeSummary tr.bg-slate-200 { background-color: var(--fm-dark-page, #020617) !important; /* même fond sombre que le reste */ } /* Texte des cellules de ces lignes : blanc + bordure foncée */ .dark #dbProjectSummary tr.bg-slate-200 td, .dark #dbEmployeeSummary tr.bg-slate-200 td { color: #f9fafb !important; border-top-color: var(--fm-dark-border, #1f2937) !important; border-bottom-color: var(--fm-dark-border, #1f2937) !important; } /* --- LIGNES "NOM D'EMPLOYÉ" DU TABLEAU 3 EN MODE SOMBRE --- */ /* Ligne d'entête par employé dans le tableau de détail (dashboard) */ .dark #employeeTimesheetDetails tr.bg-slate-100, .dark #employeeTimesheetTableBody tr.bg-slate-100 { background-color: var(--fm-dark-page, #020617) !important; /* même fond sombre que le reste */ } /* Texte de ces lignes : blanc + bordure foncée */ .dark #employeeTimesheetDetails tr.bg-slate-100 td, .dark #employeeTimesheetTableBody tr.bg-slate-100 td { color: #f9fafb !important; border-top-color: var(--fm-dark-border, #1f2937) !important; border-bottom-color: var(--fm-dark-border, #1f2937) !important; } /* --- SWITCH MODE SOMBRE DANS PARAMÈTRES --- */ .dark #settingsView #themeToggle { background-color: #4b5563 !important; /* gris moyen, bien visible sur fond sombre */ } /* Le petit rond du switch reste clair en mode sombre */ .dark #settingsView #themeToggleThumb { background-color: #f9fafb !important; /* presque blanc */ box-shadow: 0 0 0 1px rgba(15,23,42,0.8); /* léger contour pour le détacher */ } /* --- CHAMPS DU FORMULAIRE FEUILLE DE TEMPS EN MODE SOMBRE --- */ .dark #timesheetView input, .dark #timesheetView textarea { background-color: var(--fm-dark-input, #0b1220) !important; /* fond foncé pour les champs */ color: #f9fafb !important; /* texte bien clair */ border-color: var(--fm-dark-border, #1f2937) !important; /* bordure foncée */ } /* Couleur du placeholder (texte grisé à l'intérieur) */ .dark #timesheetView input::placeholder, .dark #timesheetView textarea::placeholder { color: #9ca3af !important; /* gris moyen, lisible sur fond foncé */ } /* --- LISTES DÉROULANTES EN MODE SOMBRE (STYLE GLOBAL) --- */ .dark select { background-color: var(--fm-dark-input, #0b1220) !important; /* même ton que les champs de la feuille de temps */ color: #f9fafb !important; /* texte clair */ border-color: var(--fm-dark-border, #1f2937) !important; /* bordure foncée */ } /* Les options du menu déroulant */ .dark select option { background-color: var(--fm-dark-page, #020617) !important; /* fond très foncé */ color: #e5e7eb !important; /* texte gris très clair */ } /* --- ICÔNES DES CHAMPS DATE / HEURE EN MODE SOMBRE (FEUILLE DE TEMPS) --- */ /* Icône calendrier / horloge dans les champs date & time (Chrome, Edge, etc.) */ .dark #timesheetView input[type="date"]::-webkit-calendar-picker-indicator, .dark #timesheetView input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.8); /* on inverse et on éclaircit → l’icône devient clair */ } /* Petites flèches de défilement dans les champs time / number */ .dark #timesheetView input[type="time"]::-webkit-inner-spin-button, .dark #timesheetView input[type="number"]::-webkit-inner-spin-button { filter: invert(1) brightness(1.8); } /* Switch dans l'en-tête de la feuille de temps (mode sombre) */ .dark #timesheetView #themeToggleHeader { background-color: #4b5563 !important; /* gris moyen */ } .dark #timesheetView #themeToggleHeaderThumb { background-color: #f9fafb !important; /* rond très clair */ } /* --- MODALE (ajout employé / projet / directive) EN MODE SOMBRE --- */ .dark #modalOverlay .bg-white { /* La carte du modal devient foncée */ background-color: var(--fm-dark-surface, #0f172a) !important; } .dark #modalOverlay { /* Texte général de la modale en clair */ color: #e5e7eb !important; } /* Champs de formulaire dans la modale */ .dark #modalOverlay input, .dark #modalOverlay select, .dark #modalOverlay textarea { background-color: var(--fm-dark-input, #0b1220) !important; /* fond foncé */ color: #f9fafb !important; /* texte blanc cassé */ border-color: var(--fm-dark-border, #1f2937) !important; /* bordure foncée */ } /* Placeholder (texte gris dans les champs vides) */ .dark #modalOverlay input::placeholder, .dark #modalOverlay textarea::placeholder { color: #9ca3af !important; /* gris moyen, lisible sur fond foncé */ } /* Bouton "Annuler" plus lisible en sombre */ .dark #modalOverlay #modalCancel { border-color: var(--fm-dark-border, #1f2937) !important; color: #e5e7eb !important; background-color: transparent; } .dark #modalOverlay #modalCancel:hover { background-color: var(--fm-dark-surface-2, #111827) !important; } /* Bouton close (X) plus visible */ .dark #modalOverlay #modalClose { color: #9ca3af !important; } /* --- Bons de commande : modales en mode sombre --- */ .dark #poDetailsOverlay > div, .dark #poSupplierSearchOverlay > div { background-color: var(--fm-dark-surface, #0f172a) !important; border-color: var(--fm-dark-border, #1f2937) !important; color: #e5e7eb !important; } .dark #poDetailsOverlay .bg-white, .dark #poSupplierSearchOverlay .bg-white { background-color: var(--fm-dark-surface, #0f172a) !important; } .dark #poDetailsOverlay .bg-slate-50, .dark #poSupplierSearchOverlay .bg-slate-50 { background-color: var(--fm-dark-surface-2, #111827) !important; } .dark #poDetailsOverlay .border-slate-200, .dark #poSupplierSearchOverlay .border-slate-200, .dark #poSupplierSearchOverlay input, .dark #poSupplierSearchOverlay select, .dark #poSupplierSearchOverlay textarea { border-color: var(--fm-dark-border, #1f2937) !important; } .dark #poDetailsOverlay .border-slate-100, .dark #poSupplierSearchOverlay .border-slate-100 { border-color: rgba(51, 65, 85, 0.65) !important; } .dark #poDetailsOverlay .text-slate-800, .dark #poDetailsOverlay .text-slate-700, .dark #poSupplierSearchOverlay .text-slate-800, .dark #poSupplierSearchOverlay .text-slate-700 { color: #f8fafc !important; } .dark #poDetailsOverlay .text-slate-600, .dark #poDetailsOverlay .text-slate-500, .dark #poSupplierSearchOverlay .text-slate-600, .dark #poSupplierSearchOverlay .text-slate-500 { color: #cbd5e1 !important; } .dark #poDetailsOverlay .text-slate-400, .dark #poSupplierSearchOverlay .text-slate-400 { color: #94a3b8 !important; } .dark #poDetailsOverlay .bg-slate-100, .dark #poSupplierSearchOverlay .bg-slate-100 { background-color: rgba(30, 41, 59, 0.95) !important; } .dark #poDetailsOverlay button.border, .dark #poSupplierSearchOverlay button.border, .dark #poSupplierSearchOverlay input, .dark #poSupplierSearchOverlay select, .dark #poSupplierSearchOverlay textarea { background-color: var(--fm-dark-surface-2, #111827) !important; color: #f8fafc !important; } .dark #poDetailsOverlay button:hover, .dark #poSupplierSearchOverlay button:hover { background-color: var(--fm-dark-hover, #1e293b) !important; } .dark #poDetailsOverlay .hover\:bg-slate-50:hover, .dark #poSupplierSearchOverlay .hover\:bg-slate-50:hover, .dark #poDetailsOverlay .hover\:bg-slate-100:hover, .dark #poSupplierSearchOverlay .hover\:bg-slate-100:hover { background-color: var(--fm-dark-hover, #1e293b) !important; } .dark #poSupplierSearchOverlay thead { background-color: var(--fm-dark-surface-2, #111827) !important; } /* --- Inputs heures initiales & heures payées en mode sombre --- */ /* On garde les cases blanches avec texte foncé, même en dark mode */ /* Paramètres : banque d'heures initiale */ .dark #settingsHourBankTable input.settings-bank-input, .dark #settingsHourBankTable input.settings-bank-input:focus { background-color: #ffffff !important; /* fond blanc */ color: var(--fm-dark-surface, #0f172a) !important; /* texte presque noir */ border-color: #cbd5f5 !important; /* bordure gris/bleu pâle */ } /* Dashboard tableau 1 : heures payées */ .dark #dbEmployeeSummary input.db-paid-input, .dark #dbEmployeeSummary input.db-paid-input:focus { background-color: #ffffff !important; /* fond blanc */ color: var(--fm-dark-surface, #0f172a) !important; /* texte presque noir */ border-color: #cbd5f5 !important; } /* Placeholders (texte dans les cases vides) */ .dark #settingsHourBankTable input.settings-bank-input::placeholder, .dark #dbEmployeeSummary input.db-paid-input::placeholder { color: #6b7280 !important; /* gris moyen, bien lisible sur blanc */ } /* --- Style compact pour les petites cases heures --- */ /* Paramètres : heures initiales */ #settingsHourBankTable input.settings-bank-input { padding: 2px 4px; /* peu de padding = plus compact */ font-size: 11px; line-height: 1.1; height: 22px; /* petite hauteur */ border-radius: 4px; } /* Dashboard tableau 1 : heures payées */ #dbEmployeeSummary input.db-paid-input { padding: 2px 4px; font-size: 11px; line-height: 1.1; height: 22px; border-radius: 4px; } /* Boutons en mode sombre : texte un peu plus foncé au clic/survol */ .dark #tsDirectiveClearBtn:hover, .dark #tsDirectiveClearBtn:active, .dark #tsDirectiveClearBtn:focus, .dark #dbExportCsv:hover, .dark #dbExportCsv:active, .dark #dbExportCsv:focus, .dark #dbPrint:hover, .dark #dbPrint:active, .dark #dbPrint:focus { color: #9ca3af !important; /* gris un peu plus foncé, plus lisible sur fond clair */ } /* Survol / focus – effet de couleur léger comme "Ajouter directive" */ #refreshDashboardBtn:hover, #refreshDashboardBtn:focus, #userAddBtn:hover, #userAddBtn:focus, #projectAddBtn:hover, #projectAddBtn:focus, #directiveAddBtn:hover, #directiveAddBtn:focus, #settingsSaveBtn:hover, #settingsSaveBtn:focus { background-color: #f0f9ff; /* sky-50 */ } /* Effet "pressé" quand on clique */ #refreshDashboardBtn:active, #userAddBtn:active, #projectAddBtn:active, #directiveAddBtn:active, #settingsSaveBtn:active { background-color: #e0f2fe; /* un peu plus foncé */ transform: translateY(1px); } /* Variante en mode sombre : même look, juste un fond léger au survol */ .dark #refreshDashboardBtn, .dark #userAddBtn, .dark #projectAddBtn, .dark #directiveAddBtn, .dark #settingsSaveBtn { background-color: transparent; color: #0ea5e9; border-color: #0ea5e9; } /* Survol / focus en mode sombre */ .dark #refreshDashboardBtn:hover, .dark #refreshDashboardBtn:focus, .dark #userAddBtn:hover, .dark #userAddBtn:focus, .dark #projectAddBtn:hover, .dark #projectAddBtn:focus, .dark #directiveAddBtn:hover, .dark #directiveAddBtn:focus, .dark #settingsSaveBtn:hover, .dark #settingsSaveBtn:focus { background-color: rgba(56, 189, 248, 0.15); /* bleu très léger sur fond sombre */ } /* Clic en mode sombre */ .dark #refreshDashboardBtn:active, .dark #userAddBtn:active, .dark #projectAddBtn:active, .dark #directiveAddBtn:active, .dark #settingsSaveBtn:active { background-color: rgba(56, 189, 248, 0.25); transform: translateY(1px); } /* ================================ Feuilles de temps : employé + gestionnaire Même look pour les "cases" (tableaux) ================================ */ /* Style général des tableaux (mode clair) */ #tsList table, #mtList table { border-collapse: collapse; width: 100%; } #tsList thead tr, #mtList thead tr { background-color: #f8fafc; /* équivalent tailwind bg-slate-50 */ color: #64748b; /* text-slate-500 */ } #tsList tbody tr, #mtList tbody tr { background-color: #ffffff; border-bottom: 1px solid #e2e8f0; /* border-slate-200 */ } #tsList th, #mtList th, #tsList td, #mtList td { padding: 0.25rem 0.5rem; /* px-2 py-1 */ font-size: 0.75rem; /* text-xs */ } /* MODE SOMBRE : même rendu pour employé & gestionnaire */ .dark #tsList thead tr, .dark #mtList thead tr { background-color: var(--fm-dark-page, #020617); /* slate-950 */ color: #e5e7eb; /* slate-200 */ } .dark #tsList tbody tr, .dark #mtList tbody tr { background-color: var(--fm-dark-page, #020617); /* fond foncé pour les lignes */ border-color: var(--fm-dark-border, #1f2937); /* slate-800 */ color: #e5e7eb; /* texte clair */ } .dark #tsList td, .dark #mtList td { /* pour éviter un blanc "flashy" en mode sombre si jamais */ background-color: transparent; } /* ================================ Feuilles de temps - champs communs (employé + gestionnaire) en mode sombre ================================ */ /* Inputs + select + textarea dans les deux vues */ .dark #timesheetView input, .dark #timesheetView select, .dark #timesheetView textarea, .dark #managerTimesheetView input, .dark #managerTimesheetView select, .dark #managerTimesheetView textarea { background-color: var(--fm-dark-page, #020617); /* fond foncé */ color: #e5e7eb; /* texte clair */ border-color: #475569; /* bordure un peu plus foncée */ } /* Pour éviter le texte gris par défaut dans les placeholders */ .dark #timesheetView ::placeholder, .dark #managerTimesheetView ::placeholder { color: #9ca3af; /* gris clair */ } /* Phases */ .pm-color-swatch{ width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,0.15); display:inline-block; } /* ========================================================== Correctifs MODE SOMBRE (Gestion de projet) - Inputs de recherche (chronologie / plans / utilisateurs) - Boutons "outline" (hover:bg-...) qui devenaient blancs ========================================================== */ /* Inputs texte: garder un fond foncé + texte clair */ .dark input[type="text"], .dark input[type="search"], .dark input[type="email"], .dark input[type="password"], .dark input[type="number"], .dark input[type="date"], .dark input[type="time"], .dark textarea { background-color: var(--fm-dark-input, #0b1220) !important; color: #e5e7eb !important; border-color: var(--fm-dark-border, #1f2937) !important; } .dark input[type="text"]::placeholder, .dark input[type="search"]::placeholder, .dark input[type="email"]::placeholder, .dark input[type="password"]::placeholder, .dark input[type="number"]::placeholder, .dark input[type="date"]::placeholder, .dark input[type="time"]::placeholder, .dark textarea::placeholder { color: #94a3b8 !important; } /* Texte intermédiaire souvent utilisé dans l'app */ .dark .text-slate-600 { color: #cbd5e1 !important; } /* Tailwind "hover:bg-..." : en sombre, on évite le blanc */ .dark .hover\:bg-slate-50:hover, .dark .hover\:bg-slate-100:hover { background-color: var(--fm-dark-hover, #1e293b) !important; } .dark .hover\:bg-sky-50:hover { background-color: rgba(56, 189, 248, 0.14) !important; } .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.14) !important; } /* Etats sélectionnés (ex: bg-slate-100) en sombre */ .dark .bg-slate-100 { background-color: var(--fm-dark-hover, #1e293b) !important; } /* ✅ Fix lisibilité des BARRES DE RECHERCHE en mode sombre (sans toucher aux selects) */ .dark #timelineSearch, .dark #planSearch, .dark #usersSearch { background-color: var(--fm-dark-input, #0b1220) !important; color: #e5e7eb !important; border-color: var(--fm-dark-border, #334155) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fm-dark-border, #334155) 35%, transparent) !important; } .dark #timelineSearch::placeholder, .dark #planSearch::placeholder, .dark #usersSearch::placeholder { color: #94a3b8 !important; opacity: 1 !important; } .dark #timelineSearch:focus, .dark #planSearch:focus, .dark #usersSearch:focus { outline: none !important; border-color: color-mix(in srgb, var(--fm-dark-border, #334155) 55%, #ffffff 10%) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fm-dark-hover, #1e293b) 70%, transparent) !important; } /* ================================ Plans (mobile + desktop) Aperçu PDF plein écran (iframe) ================================ */ .pm-plan-preview { width: 100%; min-height: 52vh; border: 1px solid #e2e8f0; /* slate-200 */ border-radius: 16px; overflow: hidden; background: #ffffff; } .pm-plan-preview iframe { width: 100%; height: 70vh; border: 0; display: block; } .dark .pm-plan-preview { background: rgba(15, 23, 42, 0.35); border-color: rgba(148, 163, 184, 0.25); } /* ================================ UI – Archivés (projets / directives) Petit cercle orange + séparateurs ================================ */ .fm-archived-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: #f59e0b; /* orange/amber */ margin-right: 8px; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); transform: translateY(1px); } .fm-archived-sep { background: transparent; } .fm-archived-sep td { padding-top: 14px; padding-bottom: 6px; } .fm-archived-sep .fm-archived-label { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #475569; /* slate-600 */ } .dark .fm-archived-sep .fm-archived-label { color: #cbd5e1; /* slate-300 */ } /* Variables couleurs scrollbar */ :root{ --sb-track: #f3f4f6; /* clair */ --sb-thumb: #cbd5e1; --sb-thumb-hover: #94a3b8; } /* Si ton mode sombre met la class "dark" sur (ou sur ) */ html.dark, body.dark, .dark{ --sb-track: #0b1220; /* sombre */ --sb-thumb: var(--fm-dark-border, #334155); --sb-thumb-hover: #475569; } /* Firefox */ *{ scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); } /* Chrome / Edge / Safari */ *::-webkit-scrollbar{ width: 10px; height: 10px; } *::-webkit-scrollbar-track{ background: var(--sb-track); } *::-webkit-scrollbar-thumb{ background: var(--sb-thumb); border-radius: 999px; border: 2px solid var(--sb-track); } *::-webkit-scrollbar-thumb:hover{ background: var(--sb-thumb-hover); } /* --- Sous-traitant: menu en bas (style mobile) --- */ .pm-subcontractor #sidebar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; border-radius: 0 !important; box-shadow: 0 -6px 20px rgba(0,0,0,.08) !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-around !important; padding: 10px 10px !important; z-index: 50 !important; } /* nav horizontal */ .pm-subcontractor #sidebarNav { width: 100%; display: flex; flex-direction: row; gap: 8px; justify-content: space-around; } /* boutons compact */ .pm-subcontractor .nav-btn { width: auto !important; flex: 1 1 0; justify-content: center !important; text-align: center !important; padding: 10px 8px !important; } /* icône + libellé petit */ .pm-subcontractor .nav-btn i { width: auto !important; } .pm-subcontractor .nav-btn span { font-size: 11px !important; } /* laisser de la place en bas */ .pm-subcontractor main, .pm-subcontractor #mainContent, .pm-subcontractor #content, .pm-subcontractor .pm-content { padding-bottom: 90px !important; } /* ================================ Rapport (Timesheets) : filtres plus propres sur mobile - Empêche l'étiquette seule sur une ligne et le select sur une autre ================================ */ /* Base: garder les libellés lisibles */ .ts-filters .ts-filter label { white-space: nowrap; } @media (max-width: 640px) { /* Empile les filtres proprement */ .ts-filters { flex-direction: column; align-items: stretch; } .ts-filters .ts-filter { width: 100%; display: flex; align-items: center; gap: 10px; } /* Libellé à gauche, champ à droite */ .ts-filters .ts-filter label { min-width: 92px; } .ts-filters .ts-filter select { flex: 1 1 auto; width: 100%; min-width: 0; } .ts-filters .ts-actions { width: 100%; } #tsLoadBtn { width: 100%; } } /* iOS: empêcher le zoom auto au focus (font-size < 16px) */ @media (max-width: 768px) { #invSupplierSearch { font-size: 16px !important; } } /* ================================ Badges géo (distance siège social) - Ne dépend pas de Tailwind (car ces badges sont générés en JS) ================================ */ .geo-badge{ display:inline-flex; align-items:center; padding:2px 6px; border-radius:4px; border:1px solid transparent; font-size:10px; font-weight:600; line-height:1.1; white-space:nowrap; } /* +120 km */ .geo-badge-far{ background:#fff1f2; /* rose-50 */ border-color:#fecdd3; /* rose-200 */ color:#9f1239 !important; /* rose-800 */ } .dark .geo-badge-far{ background:rgba(136,19,55,0.30); border-color:#9f1239; color:#fda4af !important; /* rose-300 */ } /* Erreur adresse / géocodage indisponible */ .geo-badge-bad{ background:#fffbeb; /* amber-50 */ border-color:#fde68a; /* amber-200 */ color:#92400e !important; /* amber-800 */ } .dark .geo-badge-bad{ background:rgba(120,53,15,0.30); border-color:#92400e; color:#fcd34d !important; /* amber-300 */ } /* Introuvable */ .geo-badge-nf{ background:#f8fafc; /* slate-50 */ border-color:#e2e8f0; /* slate-200 */ color:#475569 !important; /* slate-600 */ } .dark .geo-badge-nf{ background:rgba(15,23,42,0.35); border-color:var(--fm-dark-border, #334155); color:#e2e8f0 !important; /* slate-200 */ } /* OK */ .geo-badge-ok{ background:#ecfdf5; /* emerald-50 */ border-color:#a7f3d0; /* emerald-200 */ color:#047857 !important; /* emerald-700 */ } .dark .geo-badge-ok{ background:rgba(6,78,59,0.30); border-color:#065f46; color:#a7f3d0 !important; /* emerald-200 */ } /* Chronologie: en-têtes de colonnes suivent aussi la palette sombre choisie */ .dark #timelineHeader .pm-left-sticky, .dark #timelineHeader .pm-header-cell { background-color: var(--fm-dark-surface-2, #111827) !important; border-color: var(--fm-dark-border, #1f2937) !important; } .dark #timelineHeader .pm-left-sticky { color: #e5e7eb !important; } .dark #timelineHeader .pm-header-cell { color: #cbd5e1 !important; } /* ================================ Soumissions — liste de gauche Correctifs lisibilité + bouton repli ================================ */ #quotesView #quotesList .quote-no, #quotesView #quotesList .quote-title, #quotesView #quotesList .quote-open-btn, #quotesView #quotesList button[data-quote-open] { color: #0f172a !important; } #quotesView #quotesList .quote-meta { color: #475569 !important; } .dark #quotesView #quotesList .quote-no, .dark #quotesView #quotesList .quote-title, .dark #quotesView #quotesList .quote-open-btn, .dark #quotesView #quotesList button[data-quote-open] { color: #f8fafc !important; } .dark #quotesView #quotesList .quote-meta { color: #94a3b8 !important; } #quotesListCollapseBtn.quote-collapse-btn { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } #quotesListCollapseBtn.quote-collapse-btn:hover { background: #f8fafc !important; color: #0f172a !important; } #quotesListCollapseBtn.quote-collapse-btn { background-position: center !important; background-repeat: no-repeat !important; background-size: 15px 15px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' d='M16.5 3a1 1 0 0 1 .707.293l3.5 3.5a1 1 0 0 1 0 1.414l-3.086 3.086.824 4.12a1 1 0 0 1-1.664.93l-2.574-2.34-5.5 5.5a1 1 0 1 1-1.414-1.414l5.5-5.5-2.34-2.574a1 1 0 0 1 .93-1.664l4.12.824 3.086-3.086A1 1 0 0 1 16.5 3Z'/%3E%3C/svg%3E") !important; } #quotesListCollapseBtn.quote-collapse-btn .quote-collapse-glyph { display: none !important; } .dark #quotesListCollapseBtn.quote-collapse-btn { background: #0f172a !important; border: 1px solid #334155 !important; color: #60a5fa !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2360a5fa' d='M16.5 3a1 1 0 0 1 .707.293l3.5 3.5a1 1 0 0 1 0 1.414l-3.086 3.086.824 4.12a1 1 0 0 1-1.664.93l-2.574-2.34-5.5 5.5a1 1 0 1 1-1.414-1.414l5.5-5.5-2.34-2.574a1 1 0 0 1 .93-1.664l4.12.824 3.086-3.086A1 1 0 0 1 16.5 3Z'/%3E%3C/svg%3E") !important; } .dark #quotesListCollapseBtn.quote-collapse-btn:hover { background: #1e293b !important; color: #ffffff !important; } #quotesView.quote-list-collapsed #quotesList > div { padding-left: 0.375rem !important; padding-right: 0.375rem !important; } #quotesView.quote-list-collapsed #quotesList button[data-quote-open] { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }