/* ============================================================ assets/css/app.css — Feuille de style principale ============================================================ Ce fichier contient TOUT le CSS de l'application. Organisation : 1. Variables CSS (palette de couleurs, tailles...) 2. Reset / base 3. Layout (sidebar + zone principale) 4. Boutons 5. Cartes 6. Formulaires 7. Badges 8. Lignes de transport 9. Cartes partenaires 10. Modals 11. Tableaux 12. Alertes 13. Onglets (tabs) 14. Utilitaires (classes helper) 15. En-tête de page 16. État vide (empty state) 17. Toasts 18. Login 19. Toggle switch 20. Scrollbar 21. Responsive mobile 22. Spinner 23. Bouton Envoyer 24. Sélecteur de couleur 25. Planning 26. Mode sombre (dark mode) CONCEPT CLÉ — Variables CSS (custom properties) : Les "var(--nom)" sont des variables. On les définit une fois dans :root et on les réutilise partout. Pour changer tout le thème de couleurs, il suffit de modifier les valeurs dans :root ou [data-theme="dark"]. ============================================================ */ /* ============================================================ 1. VARIABLES CSS — Palette et dimensions ============================================================ */ /* Importation des polices Google : Inter (UI) et DM Mono (texte monospace) */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap'); /* :root = pseudo-classe qui représente l'élément racine . Les variables définies ici sont accessibles dans tout le document. */ :root { /* Arrière-plans : du plus clair au plus foncé */ --bg: #f8f7f5; /* Fond de page principal (beige très clair) */ --bg2: #ffffff; /* Fond des cartes et sidebar (blanc pur) */ --bg3: #f3f2ef; /* Fond des zones secondaires (survol, en-têtes de table...) */ /* Bordures */ --border: #e5e3de; /* Bordure légère */ --border2: #ccc9c2; /* Bordure plus visible (inputs, hover) */ /* Textes : du plus contrasté au plus estompé */ --text: #18171a; /* Texte principal (quasi-noir) */ --text2: #6b6760; /* Texte secondaire (gris moyen) */ --text3: #a09c95; /* Texte tertiaire (gris clair, labels, placeholders) */ /* Couleur d'accentuation : bleu indigo */ --accent: #2a5bd7; /* Bleu principal (boutons, liens actifs) */ --accent2: #1e49c4; /* Bleu plus foncé (hover des boutons) */ --accent-bg: rgba(42, 91, 215, 0.07); /* Bleu très transparent (fond des éléments actifs) */ /* Couleurs sémantiques (signification métier) */ --export: #15803d; /* Vert pour "Export" */ --import: #c2410c; /* Orange pour "Import" */ /* Couleurs de statut */ --danger: #dc2626; /* Rouge pour erreurs et suppressions */ --info: #2563eb; /* Bleu pour informations */ --success: #15803d; /* Vert pour succès */ --warning: #b45309; /* Orange pour avertissements */ /* Rayons de bordure (arrondi des coins) */ --radius: 5px; /* Arrondi standard (boutons, inputs) */ --radius2: 8px; /* Arrondi plus grand (cartes, modals) */ /* Ombres */ --shadow: 0 4px 20px rgba(0,0,0,.07); /* Ombre pour modals et cartes importantes */ --shadow-sm: 0 1px 4px rgba(0,0,0,.05); /* Ombre légère */ /* Familles de polices */ --font-ui: 'Inter', sans-serif; /* Police principale (tous les textes) */ --font-mono: 'DM Mono', monospace; /* Police monospace (lignes de transport) */ /* Dimensions du layout */ --sidebar-w: 228px; /* Largeur de la sidebar étendue */ --topbar-h: 52px; /* Hauteur de la barre supérieure */ } /* ============================================================ 2. RESET / BASE ============================================================ */ /* Reset universel : supprime les marges/paddings par défaut du navigateur et utilise border-box (taille inclut padding et border). */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; /* Taille de base : 1rem = 14px */ scroll-behavior: smooth; /* Défilement fluide pour les ancres # */ } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); min-height: 100vh; /* Au moins toute la hauteur de l'écran */ line-height: 1.55; /* Interlignage pour la lisibilité */ -webkit-font-smoothing: antialiased; /* Rendu de police plus net sur MacOS/Chrome */ } /* Liens visités : même couleur que non-visités pour éviter l'effet "déjà cliqué" */ a:visited { color: inherit; } /* ============================================================ 3. LAYOUT — Structure sidebar + zone principale ============================================================ */ /* Conteneur principal : sidebar à gauche, contenu à droite (flexbox) */ .layout { display: flex; min-height: 100vh; } /* ---- SIDEBAR ---- */ .sidebar { width: var(--sidebar-w); /* Largeur fixe définie en variable */ background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; /* Contenu empilé verticalement */ position: fixed; /* Fixée à gauche, ne scrolle pas avec la page */ top: 0; left: 0; bottom: 0; z-index: 100; /* Au-dessus du contenu principal */ transition: width .22s ease, transform .22s ease; /* Animation fluide pour collapse/mobile */ overflow: hidden; /* Cache les textes qui dépassent en mode réduit */ } /* État "réduit" de la sidebar (mode icônes seulement) */ .sidebar.collapsed { width: 52px; /* Juste assez pour les icônes */ } /* En mode réduit, on masque tous les textes (étiquettes, sections...) */ .sidebar.collapsed .logo-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-section-text, .sidebar.collapsed .user-info, .sidebar.collapsed .sidebar-footer a[href="/logout.php"] { display: none; } /* Centre les icônes des liens quand les étiquettes sont masquées */ .sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; } /* Retourne la flèche du bouton collapse quand la sidebar est réduite */ .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } /* Centre l'avatar en mode réduit */ .sidebar.collapsed .avatar { margin: 0 auto; } .sidebar.collapsed .sidebar-footer .sidebar-user { justify-content: center; } .sidebar.collapsed .sidebar-footer .sidebar-user > a:first-child { flex: none; /* Ne prend plus tout l'espace disponible */ } /* En-tête de la sidebar : logo + bouton collapse */ .sidebar-header { padding: 14px 16px 12px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; /* Ne se rétrécit pas si le contenu est trop grand */ } /* Bouton pour réduire/agrandir la sidebar */ .sidebar-collapse-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 5px; cursor: pointer; color: var(--text3); display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; flex-shrink: 0; } .sidebar-collapse-btn:hover { background: var(--bg3); color: var(--text2); } .sidebar.collapsed .sidebar-header { justify-content: center; /* Centre le contenu quand la sidebar est réduite */ } /* Logo "AutoFreight" dans la sidebar */ .sidebar-logo { display: flex; align-items: center; gap: 10px; } /* Carré bleu avec "AF" */ .sidebar-logo .logo-mark { width: 30px; height: 30px; background: var(--accent); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .5px; color: #fff; flex-shrink: 0; } /* Texte "AutoFreight" à côté du logo */ .sidebar-logo .logo-text { font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--text); letter-spacing: -.2px; } /* La partie "Freight" en bleu */ .sidebar-logo .logo-text span { color: var(--accent); } /* Zone de navigation (les liens) */ .sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; } /* flex:1 = prend l'espace restant */ /* Titre de section (ex: "PRINCIPAL", "ADMINISTRATION") */ .nav-section { padding: 12px 16px 4px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); white-space: nowrap; overflow: hidden; } /* Lien de navigation individuel */ .nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; color: var(--text2); text-decoration: none; font-size: 13.5px; font-weight: 400; transition: color .12s, background .12s; position: relative; cursor: pointer; border: none; background: none; width: 100%; text-align: left; border-radius: 0; } .nav-item:hover { background: var(--bg3); color: var(--text); } /* Lien actif : fond bleu transparent + texte bleu */ .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; } /* Barre verticale bleue à gauche du lien actif */ .nav-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2.5px; background: var(--accent); border-radius: 0 2px 2px 0; } /* Icônes dans les liens de navigation */ .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; } .nav-item.active svg, .nav-item:hover svg { opacity: 1; } /* Pied de sidebar : infos utilisateur */ .sidebar-footer { padding: 12px 16px; } .sidebar-user { display: flex; align-items: center; gap: 8px; } /* Avatar circulaire avec les initiales */ .sidebar-user .avatar { width: 28px; height: 28px; background: var(--accent-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--accent); border: 1px solid var(--border); flex-shrink: 0; } .sidebar-user .user-info { flex: 1; min-width: 0; } /* overflow:hidden + text-overflow:ellipsis = "..." si le nom est trop long */ .sidebar-user .user-name { color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .user-role { color: var(--text3); font-size: 11px; } /* ---- ZONE PRINCIPALE ---- */ /* margin-left égal à la largeur de la sidebar pour ne pas être dessous */ .main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .22s ease; } /* Quand la sidebar est réduite, on réduit aussi la marge */ #app-layout.sidebar-collapsed .main { margin-left: 52px; } /* Barre supérieure (topbar) : titre + actions */ .topbar { height: var(--topbar-h); background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 12px; position: sticky; /* Reste visible même en scrollant */ top: 0; z-index: 50; } .topbar-title { font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--text); flex: 1; /* Prend tout l'espace disponible */ } .topbar-actions { display: flex; gap: 8px; align-items: center; } /* Zone de contenu : padding et flex pour occuper l'espace restant */ .content { padding: 24px; flex: 1; } /* ============================================================ 4. BOUTONS ============================================================ */ /* Style de base commun à tous les boutons */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid transparent; font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s, opacity .12s; text-decoration: none; white-space: nowrap; /* Le texte ne passe pas à la ligne */ line-height: 1.4; } /* Bouton principal : fond bleu */ .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent2); border-color: var(--accent2); } /* Bouton secondaire : fond blanc avec bordure */ .btn-secondary { background: var(--bg2); color: var(--text); border-color: var(--border2); } .btn-secondary:hover { background: var(--bg3); border-color: var(--border2); } /* Bouton danger : rouge transparent */ .btn-danger { background: rgba(220,38,38,.07); color: var(--danger); border-color: rgba(220,38,38,.2); } .btn-danger:hover { background: rgba(220,38,38,.14); } /* Bouton fantôme : sans bordure ni fond */ .btn-ghost { background: transparent; color: var(--text2); border-color: transparent; } .btn-ghost:hover { background: var(--bg3); color: var(--text); } /* Tailles */ .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-lg { padding: 10px 20px; font-size: 14px; } /* Désactivé : semi-transparent, non cliquable */ .btn[disabled] { opacity: .4; pointer-events: none; } /* Icônes dans les boutons */ .btn svg { width: 14px; height: 14px; } /* ============================================================ 5. CARTES ============================================================ */ /* Conteneur carte : fond blanc, bordure, coins arrondis, ombre légère */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 20px; box-shadow: var(--shadow-sm); } /* En-tête de carte : titre à gauche, actions à droite */ .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .card-title { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; } /* ============================================================ 6. FORMULAIRES ============================================================ */ .form-group { margin-bottom: 16px; } /* Étiquette au-dessus de l'input */ .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 5px; letter-spacing: .2px; } /* Style commun : input, select, textarea */ .form-input, .form-select, .form-textarea { width: 100%; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 8px 11px; color: var(--text); font-family: var(--font-ui); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; outline: none; /* On gère l'outline nous-mêmes via box-shadow */ } /* État focus : bordure bleue + halo bleu translucide */ .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,91,215,.1); } .form-input::placeholder { color: var(--text3); } .form-textarea { resize: vertical; min-height: 100px; } /* Redimensionnable en hauteur seulement */ /* Ligne de formulaire à 2 colonnes */ .form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } /* Texte d'aide sous un champ */ .form-hint { font-size: 11.5px; color: var(--text3); margin-top: 4px; } /* ============================================================ 7. BADGES ============================================================ */ /* Petit étiquette colorée (ex: "Export", "Import", "Actif") */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 500; letter-spacing: .2px; } /* Couleurs selon le type de badge */ .badge-export { background: rgba(21,128,61,.1); color: var(--export); } .badge-import { background: rgba(194,65,12,.1); color: var(--import); } .badge-active { background: rgba(21,128,61,.1); color: var(--success); } .badge-pending { background: rgba(180,83,9,.1); color: var(--warning); } .badge-disabled{ background: var(--bg3); color: var(--text3); } .badge-info { background: rgba(37,99,235,.1); color: var(--info); } /* ============================================================ 8. LIGNES DE TRANSPORT ============================================================ */ /* Conteneur d'une ligne de transport (dashboard) */ .transport-line { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg2); transition: border-color .12s, background .12s; cursor: pointer; margin-bottom: 4px; width: 100%; } .transport-line:hover { border-color: var(--border2); background: var(--bg3); } /* Ligne sélectionnée : fond et bordure bleus */ .transport-line.checked { border-color: rgba(42,91,215,.35); background: rgba(42,91,215,.04); } /* La vraie case à cocher est masquée (remplacée par la .transport-checkbox stylisée) */ .transport-line input[type=checkbox] { display: none; } /* Case à cocher stylisée */ .transport-checkbox { width: 17px; height: 17px; border: 1.5px solid var(--border2); border-radius: 3px; background: var(--bg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; } /* Case cochée : fond bleu */ .transport-line.checked .transport-checkbox { background: var(--accent); border-color: var(--accent); } /* Coche (✓) : cachée par défaut, visible si sélectionné */ .transport-checkbox svg { display: none; stroke: #fff; } .transport-line.checked .transport-checkbox svg { display: block; } /* Texte de la ligne en police monospace (pour l'alignement des colonnes) */ .transport-text { font-family: var(--font-mono); font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 0; } /* Parties colorées du texte de transport */ .transport-text .size-type { color: var(--accent); font-weight: 500; } /* "40HC" en bleu */ .transport-text .carrier { color: var(--text); } .transport-text .extra { color: var(--warning); font-size: 12px; margin-left: 6px; } /* GENSET en orange */ /* ============================================================ 9. CARTES PARTENAIRES ============================================================ */ /* Grille flexible de cartes partenaires */ .kanban-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } /* Carte partenaire individuelle */ .partner-card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius2); padding: 13px 15px; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; user-select: none; } .partner-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); } /* Carte sélectionnée : bordure bleue + halo */ .partner-card.checked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(42,91,215,.15); } /* Point de couleur à côté du nom du partenaire */ .partner-color-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; } .partner-name { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text); } /* Email du partenaire avec troncature si trop long */ .partner-email { font-size: 11px; color: var(--text3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cercle de sélection en haut à droite de la carte */ .partner-check { position: absolute; top: 10px; right: 10px; width: 17px; height: 17px; border: 1.5px solid var(--border2); border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; transition: all .12s; } /* Cercle de sélection : fond bleu si sélectionné */ .partner-card.checked .partner-check { background: var(--accent); border-color: var(--accent); } /* Coche blanche si sélectionné */ .partner-card.checked .partner-check svg { stroke: #fff; } /* ============================================================ 10. MODALS — Fenêtres superposées ============================================================ */ /* Overlay sombre derrière le modal */ .modal-overlay { position: fixed; inset: 0; /* inset: 0 = top:0; right:0; bottom:0; left:0 */ background: rgba(0,0,0,.35); backdrop-filter: blur(3px); /* Flou derrière le modal */ z-index: 1000; /* Au-dessus de tout */ display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; /* Invisible et non-interactif par défaut */ transition: opacity .18s; } /* Quand le modal est ouvert : visible et interactif */ .modal-overlay.open { opacity: 1; pointer-events: all; } /* Boîte du modal */ .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 24px; width: 100%; max-width: 680px; max-height: 90vh; /* Ne dépasse pas 90% de la hauteur de l'écran */ overflow-y: auto; /* Scroll si le contenu dépasse */ transform: translateY(12px); /* Légèrement vers le bas = invisible (animation) */ transition: transform .22s; box-shadow: var(--shadow); } /* Animation d'entrée : le modal monte à sa position finale */ .modal-overlay.open .modal { transform: translateY(0); } /* En-tête du modal */ .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font-family: var(--font-ui); font-weight: 600; font-size: 15px; } /* Bouton de fermeture (×) */ .modal-close { width: 28px; height: 28px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 14px; transition: background .12s; } .modal-close:hover { background: var(--border); color: var(--text); } /* Pied de modal : boutons d'action alignés à droite */ .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } /* ============================================================ 11. TABLEAUX ============================================================ */ /* Conteneur avec scroll horizontal sur petits écrans */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } /* En-tête de tableau : fond gris, texte en majuscules */ th { background: var(--bg3); padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--border); } /* Cellule de données */ td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } /* Surbrillance au survol */ tr:hover td { background: var(--bg3); } /* Supprime la bordure de la dernière ligne */ tr:last-child td { border-bottom: none; } /* ============================================================ 12. ALERTES ============================================================ */ /* Boîte d'alerte colorée (succès, erreur, avertissement, info) */ .alert { padding: 11px 14px; border-radius: var(--radius); border: 1px solid; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } /* Couleurs selon le type */ .alert-success { background: rgba(21,128,61,.07); border-color: rgba(21,128,61,.25); color: var(--success); } .alert-error { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.25); color: var(--danger); } .alert-warning { background: rgba(180,83,9,.07); border-color: rgba(180,83,9,.25); color: var(--warning); } .alert-info { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.25); color: var(--info); } /* ============================================================ 13. ONGLETS (TABS) ============================================================ */ /* Rangée d'onglets : ligne grise en bas */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; } /* Bouton d'onglet individuel */ .tab-btn { padding: 9px 16px; background: none; border: none; color: var(--text3); font-family: var(--font-ui); font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; /* Soulignement bleu = actif */ margin-bottom: -1px; /* Chevauche légèrement la ligne de base pour un rendu propre */ transition: color .12s; font-weight: 500; } .tab-btn:hover { color: var(--text2); } /* Onglet actif : texte bleu + soulignement bleu */ .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } /* Panneau de contenu : masqué par défaut */ .tab-pane { display: none; } .tab-pane.active { display: block; } /* ============================================================ 14. CLASSES UTILITAIRES (HELPERS) ============================================================ */ /* Grilles */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* 2 colonnes égales */ .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } /* 3 colonnes égales */ /* Flexbox */ .flex { display: flex; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } /* Marges */ .mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 20px; } /* Textes */ .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .text-muted { color: var(--text3); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-accent { color: var(--accent); } .fw-bold { font-weight: 600; } /* Divers */ .w-full { width: 100%; } .hidden { display: none !important; } /* !important = priorité maximale */ /* ============================================================ 15. EN-TÊTE DE PAGE ============================================================ */ /* Titre + description en haut d'une page */ .page-header { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .page-header-left h1 { font-family: var(--font-ui); font-weight: 700; font-size: 22px; letter-spacing: -.3px; } .page-header-left p { color: var(--text2); font-size: 13px; margin-top: 3px; } /* ============================================================ 16. ÉTAT VIDE (EMPTY STATE) ============================================================ */ /* Affiché quand une liste est vide (ex: "Aucun transport importé") */ .empty-state { padding: 56px 20px; text-align: center; color: var(--text3); } .empty-state svg { width: 40px; height: 40px; margin: 0 auto 14px; opacity: .25; } .empty-state p { font-size: 13.5px; } /* ============================================================ 17. TOASTS — Notifications temporaires ============================================================ */ /* Conteneur : fixé en bas à droite de l'écran */ #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; /* Au-dessus de tout, même les modals */ display: flex; flex-direction: column; gap: 6px; } /* Toast individuel */ .toast { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 15px; font-size: 13px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; animation: slideIn .18s ease; /* Animation d'entrée */ min-width: 250px; color: var(--text); } /* Barre colorée à gauche selon le type */ .toast.success { border-left: 3px solid var(--success); } .toast.error { border-left: 3px solid var(--danger); } .toast.warning { border-left: 3px solid var(--warning); } /* Animation : le toast glisse depuis la droite */ @keyframes slideIn { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================ 18. PAGE DE CONNEXION ============================================================ */ /* Page entière centrée verticalement */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; } /* Boîte blanche de login */ .login-box { width: 100%; max-width: 400px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 40px; box-shadow: var(--shadow); } /* Logo dans la page de login */ .login-logo { text-align: center; margin-bottom: 32px; } /* Grand carré bleu "AF" */ .login-logo .mark { width: 46px; height: 46px; background: var(--accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: .5px; color: #fff; margin: 0 auto 12px; } .login-logo h1 { font-family: var(--font-ui); font-weight: 700; font-size: 22px; letter-spacing: -.3px; } .login-logo p { color: var(--text3); font-size: 13px; margin-top: 4px; } /* ============================================================ 19. TOGGLE SWITCH — Interrupteur ON/OFF ============================================================ */ /* Conteneur : interrupteur + étiquette côte à côte */ .toggle-wrap { display: flex; align-items: center; gap: 10px; } /* Zone de l'interrupteur */ .toggle { position: relative; width: 34px; height: 18px; } /* Cache la vraie case à cocher (remplacée par le design custom) */ .toggle input { opacity: 0; width: 0; height: 0; } /* La "piste" de l'interrupteur */ .toggle-slider { position: absolute; inset: 0; background: var(--bg3); border: 1px solid var(--border2); border-radius: 18px; /* Complètement arrondi = pilule */ cursor: pointer; transition: all .18s; } /* Le "bouton" circulaire de l'interrupteur */ .toggle-slider::before { content: ''; position: absolute; width: 12px; height: 12px; background: var(--text3); border-radius: 50%; left: 2px; top: 2px; transition: all .18s; } /* État "ON" : fond bleu + bouton glissé à droite */ .toggle input:checked + .toggle-slider { background: rgba(42,91,215,.15); border-color: var(--accent); } .toggle input:checked + .toggle-slider::before { transform: translateX(16px); background: var(--accent); } /* ============================================================ 20. SCROLLBAR PERSONNALISÉE ============================================================ */ /* Largeur de la scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } /* Piste (fond de la scrollbar) : transparent */ ::-webkit-scrollbar-track { background: transparent; } /* Curseur de la scrollbar */ ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); } /* ============================================================ 21. RESPONSIVE MOBILE ============================================================ */ /* Bouton hamburger pour ouvrir la sidebar sur mobile */ .sidebar-toggle { display: none; /* Caché sur desktop */ background: none; border: none; color: var(--text2); cursor: pointer; padding: 4px; } /* Sur les écrans de moins de 860px (tablettes/mobiles) */ @media (max-width: 860px) { /* La sidebar est cachée à gauche par défaut */ .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; } /* Quand on clique sur le hamburger, elle glisse vers la droite (classe "open" ajoutée par JS) */ .sidebar.open { transform: translateX(0); } /* Le contenu prend tout l'espace (plus de marge pour la sidebar) */ .main { margin-left: 0 !important; } /* Affiche le bouton hamburger */ .sidebar-toggle { display: flex; } /* Cache le bouton collapse (inutile sur mobile) */ .sidebar-collapse-btn { display: none; } /* Les formulaires à 2 colonnes passent à 1 colonne */ .form-row { grid-template-columns: 1fr; } /* Les grilles passent en colonne unique */ .grid-2, .grid-3 { grid-template-columns: 1fr; } /* L'en-tête de page s'empile verticalement */ .page-header { flex-direction: column; } } /* ============================================================ 22. SPINNER — Indicateur de chargement ============================================================ */ /* Cercle animé qui tourne indéfiniment */ .spinner { width: 16px; height: 16px; border: 2px solid var(--border2); border-top-color: var(--accent); /* Seul le quart du haut est coloré = effet rotation */ border-radius: 50%; animation: spin .6s linear infinite; } /* Animation de rotation */ @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ 23. BOUTON ENVOYER ============================================================ */ /* Style spécifique pour le bouton "Envoyer" du dashboard */ #send-btn { background: var(--accent); color: #fff; font-weight: 600; border-color: var(--accent); } #send-btn:hover { background: var(--accent2); border-color: var(--accent2); } #send-btn:disabled { opacity: .35; } /* Grisé quand désactivé */ /* ============================================================ 24. SÉLECTEUR DE COULEUR ============================================================ */ /* Grille de cercles de couleur */ .color-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } /* Cercle de couleur individuel */ .color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; /* Bordure invisible par défaut */ transition: all .15s; } /* Couleur sélectionnée : bordure sombre + agrandissement */ .color-swatch.selected { border-color: var(--text); transform: scale(1.2); } /* Séparateurs */ hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; } /* ============================================================ 25. PLANNING — Module de planification ============================================================ */ /* Barre de navigation en haut du planning */ .planning-topnav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } /* Barre d'importation de transports vers le planning */ .planning-import-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius2); margin-bottom: 12px; } /* Pile de blocs journaliers (un bloc par jour) */ .planning-days-stack { display: flex; flex-direction: column; gap: 10px; } /* Bloc d'un jour */ .planning-day-block { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius2); overflow: hidden; } /* Bloc du jour actuel : bordure bleue */ .planning-day-today { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(42,91,215,.08); } /* En-tête du bloc jour */ .planning-day-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--bg3); border-bottom: 1px solid var(--border); gap: 8px; } /* Bouton tri */ .sort-btn { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 12px; } /* Menu tri flottant : accroché au bouton, fermé par défaut */ .sort-menu-floating { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 500; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.18); min-width: 220px; padding: 4px 0; } .sort-menu-floating.open { display: block; } /* Items du menu tri */ .sort-menu-item { display: block; width: 100%; padding: 8px 14px; text-align: left; font-size: 13px; color: var(--text); background: none; border: none; cursor: pointer; white-space: nowrap; } .sort-menu-item:hover { background: var(--bg3); color: var(--accent); } /* En-tête du jour actuel : légèrement bleue */ .planning-day-today .planning-day-header { background: rgba(42,91,215,.06); } .planning-day-title { font-weight: 600; font-size: 13.5px; color: var(--text); } /* Message quand un jour est vide */ .planning-empty { padding: 18px 14px; color: var(--text3); font-size: 12px; font-style: italic; } /* Corps du bloc jour : entrées à gauche, chauffeurs à droite */ .planning-day-body { display: flex; align-items: stretch; } /* Liste des entrées (transports) */ .planning-entries-list { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); /* Séparation avec le panneau chauffeurs */ } /* Ligne de transport dans le planning */ .planning-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); transition: background .1s; } .planning-row:last-child { border-bottom: none; } .planning-row:hover { background: var(--bg3); } /* Ligne "encodée" : fond bleu (travail confirmé) */ .planning-row-encoded { background: rgba(42,91,215,.14) !important; } /* Ligne avec chauffeur verrouillé : fond vert */ .planning-row-locked { background: rgba(21,128,61,.14) !important; } /* Ligne non encodée (ni encodée, ni verrouillée) : fond rouge clair pour signaler l'absence de confirmation */ .planning-row-unencoded { background: rgba(220,38,38,.07) !important; } /* Remarque inline : texte gris italique sur la ligne de transport */ .prow-remark { font-size:11px; color:var(--text3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; } /* Zone de dépôt pour drag&drop de lignes de planning */ .planning-entries-drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius); } /* Zone de dépôt lors d'un drag-and-drop d'un chauffeur */ .planning-row-drag-over { background: var(--accent-bg) !important; outline: 2px dashed var(--accent); outline-offset: -2px; } .planning-row-check { flex-shrink: 0; } /* Contenu textuel de la ligne du planning */ .planning-row-line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.3; overflow: hidden; } /* Différentes parties de l'affichage d'une ligne planning */ .prow-size { font-weight: 700; color: var(--accent); white-space: nowrap; } .prow-carrier { font-size: 11px; color: var(--text3); white-space: nowrap; } .prow-cnum { font-size: 11px; font-family: monospace; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; white-space: nowrap; } .prow-city { font-weight: 500; white-space: nowrap; } .prow-time { color: var(--text2); font-size: 11px; } /* Références (numéros de dossier) */ .prow-refs { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text2); background: var(--bg3); padding: 1px 6px; border-radius: 3px; white-space: nowrap; } .prow-ref-label { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: var(--text3); text-transform: uppercase; } .prow-sep { color: var(--text3); } /* Nom du client (dans le planning) */ .prow-client { font-size: 11px; color: var(--text2); background: var(--bg3); padding: 1px 5px; border-radius: 3px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } /* Remarque inline sur la ligne de transport */ .prow-remark { font-size: 11px; color: var(--text3); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } /* Tag chauffeur dans une ligne (draggable) */ .prow-driver-wrap { flex-shrink: 0; } .prow-driver-tag { cursor: grab; } /* Curseur "main ouverte" */ .prow-driver-tag:active { cursor: grabbing; } /* Curseur "main fermée" pendant le drag */ /* Boutons d'action sur une ligne planning (GENSET, ADR, éditer...) */ .planning-row-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; } /* Petits boutons de toggle (GENSET, ADR, encodé...) */ .toggle-btn { padding: 2px 6px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.5; min-width: 22px; } /* Couleurs des états des boutons toggle */ .toggle-active-orange { background: #d97706 !important; color: #fff !important; border-color: #d97706 !important; } .toggle-active-red { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; } .toggle-active-green { background: #15803d !important; color: #fff !important; border-color: #15803d !important; } /* Étiquettes de signalement (GENSET, ADR, encodé) */ .flag-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .3px; } .flag-genset { background: rgba(217,119,6,.12); color: #d97706; } /* Orange = GENSET requis */ .flag-adr { background: rgba(220,38,38,.12); color: #dc2626; } /* Rouge = matière dangereuse */ .flag-encoded { background: rgba(21,128,61,.12); color: #15803d; } /* Vert = travail encodé */ /* Tag chauffeur dans une ligne */ .driver-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); font-size: 11px; font-weight: 500; border: 1px solid rgba(42,91,215,.2); } /* Tag chauffeur vide (pas encore assigné) */ .driver-tag-empty { background: var(--bg3); color: var(--text3); border-color: var(--border); border-style: dashed; } /* Tag chauffeur verrouillé (ne peut plus être déplacé par drag) */ .driver-tag-locked { background: rgba(21,128,61,.12); color: #15803d; border-color: rgba(21,128,61,.3); cursor: pointer; /* Cliquable pour déverrouiller */ } /* Curseurs pour les tags draggables */ .driver-tag:not(.driver-tag-empty):not(.driver-tag-locked) { cursor: grab; } /* ---- Panneau chauffeurs (à droite de chaque bloc jour) ---- */ .planning-day-drivers { width: 180px; flex-shrink: 0; padding: 8px 10px; background: var(--bg3); display: flex; flex-direction: column; gap: 6px; } /* Sur mobile : le panneau chauffeurs passe sous les entrées */ @media (max-width: 820px) { .planning-day-body { flex-direction: column; } .planning-day-drivers { width: 100%; border-top: 1px solid var(--border); } .planning-entries-list { border-right: none; } } /* Étiquette en haut du panneau chauffeurs */ .drivers-day-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .4px; } .drivers-day-label svg { width: 12px; height: 12px; } /* Liste de chips chauffeurs (zone de drop pour retourner un chauffeur) */ .drivers-chip-list { display: flex; flex-direction: column; gap: 4px; min-height: 24px; border-radius: var(--radius); padding: 2px; transition: background .1s; } /* Style de la liste quand on survole avec un drag */ .chip-list-drag-over { background: var(--accent-bg); outline: 2px dashed var(--accent); outline-offset: -2px; } /* Chip chauffeur (draggable) */ .driver-chip { display: flex; align-items: center; padding: 4px 9px; border-radius: 8px; background: var(--bg2); color: var(--accent); font-size: 12px; font-weight: 500; border: 1px solid rgba(42,91,215,.2); cursor: grab; user-select: none; transition: background .12s, box-shadow .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .driver-chip:hover { background: rgba(42,91,215,.1); box-shadow: var(--shadow-sm); } .driver-chip:active { cursor: grabbing; } /* Texte indicatif quand il n'y a pas encore de chauffeurs */ .drivers-empty-hint { font-size: 11px; color: var(--text3); font-style: italic; padding: 2px 4px; } /* Input pour ajouter rapidement un chauffeur */ .drivers-quick-add { display: flex; gap: 4px; } .drivers-quick-add .form-input { flex: 1; min-width: 0; } .drivers-edit-area { margin-top: 4px; } /* ============================================================ 26. MODE SOMBRE (DARK MODE) ============================================================ */ /* Quand l'attribut data-theme="dark" est présent sur , toutes les variables CSS sont écrasées par les valeurs sombres. Le JS dans layout.php applique/retire cet attribut selon le choix de l'utilisateur stocké dans localStorage. */ [data-theme="dark"] { --bg: #0f1117; /* Fond très sombre (quasi-noir bleuté) */ --bg2: #1a1d27; /* Fond des cartes */ --bg3: #22263a; /* Fond secondaire */ --border: #2d3250; /* Bordure subtile */ --border2: #3d4270; /* Bordure plus visible */ --text: #e8e9f0; /* Texte principal (blanc cassé) */ --text2: #9499b8; /* Texte secondaire */ --text3: #636884; /* Texte tertiaire */ --accent: #4f7ef8; /* Bleu plus vif (meilleur contraste sur fond sombre) */ --accent2: #3d6ef0; --accent-bg: rgba(79,126,248,0.12); --export: #4ade80; /* Vert plus vif pour le mode sombre */ --import: #fb923c; /* Orange plus vif */ --danger: #f87171; /* Rouge plus vif */ --info: #60a5fa; --success: #4ade80; --warning: #fbbf24; --shadow: 0 4px 20px rgba(0,0,0,.4); /* Ombres plus prononcées */ --shadow-sm: 0 1px 4px rgba(0,0,0,.3); } /* Ajustements spécifiques au mode sombre pour le planning */ [data-theme="dark"] .planning-row-encoded { background: rgba(79,126,248,.2) !important; } [data-theme="dark"] .planning-row-locked { background: rgba(74,222,128,.14) !important; } [data-theme="dark"] .planning-row-unencoded { background: rgba(248,113,113,.10) !important; } [data-theme="dark"] .driver-tag-locked { background: rgba(74,222,128,.18); color: #4ade80; border-color: rgba(74,222,128,.35); } [data-theme="dark"] .planning-row:hover { background: var(--bg3); } /* Cartes et modals : la couleur de bordure vient de la variable, mais on le répète ici pour s'assurer que les overrides fonctionnent */ [data-theme="dark"] .card { border-color: var(--border); } [data-theme="dark"] .modal { border-color: var(--border); } /* Champs de formulaire en mode sombre */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg3); color: var(--text); border-color: var(--border); } /* Boutons en mode sombre */ [data-theme="dark"] .btn-secondary { background: var(--bg3); color: var(--text); border-color: var(--border); } [data-theme="dark"] .btn-ghost { color: var(--text2); } [data-theme="dark"] .btn-ghost:hover { background: var(--bg3); } /* Tableaux en mode sombre */ [data-theme="dark"] table { color: var(--text); } [data-theme="dark"] th { background: var(--bg3); color: var(--text2); } [data-theme="dark"] tr:hover td { background: var(--bg3); }