/* STYLE CSS — FM Construction Temps PRO */ /* --- RESET --- */ * { box-sizing: border-box; } body { font-family: Arial, sans-serif; /* On laisse Tailwind gérer le fond + marges via les classes sur */ /* background: #f8fafc; */ /* margin: 0; */ /* padding: 0; */ } /* --- LAYOUT --- */ #app-container { display: flex; min-height: 100vh; } /* --- CONTENT --- */ #main-content { flex: 1; padding: 24px; } h1 { font-size: 20px; margin-bottom: 16px; } /* --- LOGIN --- */ #loginView { max-width: 380px; margin: 60px auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.08); } #loginView label { font-size: 14px; margin-top: 10px; display: block; } #loginView input { width: 100%; padding: 10px; margin-top: 4px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; } #loginError { color: red; font-size: 13px; margin-top: 10px; } /* --- BUTTONS --- */ .btn-primary { background: #0ea5e9; color: white; padding: 10px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; transition: background 0.15s; } .btn-primary:hover { background: #0284c7; } .btn-secondary { background: #e2e8f0; color: var(--fm-dark-hover, #1e293b); padding: 10px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; } .btn-danger { background: #ef4444; color: white; padding: 10px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; } .btn-danger:hover { background: #dc2626; } /* --- TABLES --- */ th { background: #f1f5f9; color: #475569; font-weight: 600; } /* --- FORMS --- */ .input { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; margin-top: 4px; font-size: 14px; } label { font-size: 13px; font-weight: 600; } /* --- MODAL --- */ #modalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; padding: 20px; } #modalOverlay.hidden { display: none; } #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 selon la palette */ 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é selon la palette */ 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 selon la palette */ 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: #0b1120 !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; } /* --- 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, #tsAddBtn:hover, #tsAddBtn:focus, #settingsSaveBtn:hover, #settingsSaveBtn:focus { background-color: #f0f9ff; /* sky-50 */ } /* Effet "pressé" quand on clique */ #refreshDashboardBtn:active, #userAddBtn:active, #projectAddBtn:active, #directiveAddBtn:active, #tsAddBtn: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 #tsAddBtn, .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 #tsAddBtn:hover, .dark #tsAddBtn: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 #tsAddBtn: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-input, #0b1220) !important; /* fond champ selon la palette */ color: #e5e7eb; /* texte clair */ border-color: var(--fm-dark-border, #334155) !important; /* bordure selon la palette */ } /* Pour éviter le texte gris par défaut dans les placeholders */ .dark #timesheetView ::placeholder, .dark #managerTimesheetView ::placeholder { color: #9ca3af; /* gris clair */ } /* 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); } /* Boutons dans Dashboard Tableau 1 */ body:not(.dark) #dbAddEmployeeBtn, body:not(.dark) #dbExtraEmployeesResetBtn, body:not(.dark) .dash-t1-controls button { color: var(--fm-dark-surface, #0f172a) !important; /* Noir (slate-900) en mode clair */ background-color: #e2e8f0 !important; /* Fond un peu plus foncé pour plus de contraste */ } body:not(.dark) #dbAddEmployeeBtn:hover, body:not(.dark) #dbExtraEmployeesResetBtn:hover, body:not(.dark) .dash-t1-controls button:hover { background-color: #cbd5e1 !important; /* Un peu plus foncé au survol */ } body:not(.dark) #dbAddEmployeeBtn:active, body:not(.dark) #dbExtraEmployeesResetBtn:active, body:not(.dark) .dash-t1-controls button:active { background-color: #94a3b8 !important; /* Fond encore plus sombre quand on clique */ color: #ffffff !important; /* Texte clair lors du clic */ } /* En mode sombre : améliorer la lisibilité */ .dark #dbAddEmployeeBtn, .dark #dbExtraEmployeesResetBtn, .dark .dash-t1-controls button { color: #f9fafb !important; /* Blanc très clair */ background-color: var(--fm-dark-border, #334155) !important; /* Fond foncé mais lisible */ } .dark #dbAddEmployeeBtn:hover, .dark #dbExtraEmployeesResetBtn:hover, .dark .dash-t1-controls button:hover { background-color: #475569 !important; /* Un ton plus clair au survol */ } .dark #dbAddEmployeeBtn:active, .dark #dbExtraEmployeesResetBtn:active, .dark .dash-t1-controls button:active { background-color: #94a3b8 !important; /* Un peu plus sombre au clic */ color: #000000 !important; /* Texte noir lors du clic */ } /* --- Dashboard: en-tête de projet (tableau "Heures par projet") --- */ .pm-proj-header { background: #f8fafc; /* slate-50 */ border-top: 1px solid #cbd5e1; /* slate-300 */ border-bottom: 1px solid #cbd5e1; /* slate-300 */ } .pm-proj-header-cell { color: var(--fm-dark-surface, #0f172a); /* slate-900 (texte noir) */ } /* Dark mode */ .dark .pm-proj-header { background: #0b1220; /* proche slate-900 */ border-top-color: var(--fm-dark-border, #334155); /* slate-600 */ border-bottom-color: var(--fm-dark-border, #334155); } .dark .pm-proj-header-cell { color: #f8fafc; /* slate-50 */ } /* --- Mobile UX (Dashboard) --- */ @media (max-width: 640px) { /* Évite le zoom iOS sur focus */ #dbWeekSelect, .db-paid-input { font-size: 16px !important; } /* Empêche les