/* ═══════════════════════════════════════════════════════════════ _top-nav-v511.css Patch complétant le top-nav pour V5.11 : les classes brand-logo, brand-text, lang-switcher, lang-menu, user-name-link, user-role, app-version, btn-logout n'avaient pas de styles dans app.css après le passage à V5.11. À inclure dans index.volt APRÈS app.css : OU à concaténer à la fin de app.css (équivalent). ═══════════════════════════════════════════════════════════════ */ /* ─── Brand : logo + sous-titre "FEI Stables" ─── */ .top-nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand-logo { height: 36px; width: auto; display: block; flex-shrink: 0; } .brand-text { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } /* V5.x : logo FEI intégré dans le titre, à la place du mot "FEI" */ .brand-fei-logo { height: 28px; width: auto; display: block; filter: brightness(1.4); } /* ─── Liens de la nav : pas de retour à la ligne ─── */ .top-nav-links { flex: 1; min-width: 0; overflow: visible; /* le sous-menu Administration doit pouvoir déborder */ } .top-nav-links a { white-space: nowrap; } /* ─── Bloc utilisateur à droite ─── */ .top-nav-user { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; white-space: nowrap; } .top-nav-user-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; white-space: nowrap; max-width: 240px; overflow: hidden; } /* Lien sur le nom : clic = /my-account */ .user-name-link { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px; transition: background 0.15s; line-height: 1; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-name-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; } .user-name-link .fa { color: #5dade2; font-size: 14px; flex-shrink: 0; } .user-name { font-size: 13px; font-weight: 500; color: #fff; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Badge rôle (super_admin / company_admin / user) ─── */ .user-role { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; margin-left: 22px; /* aligné avec le texte du nom, après l'icône user-circle */ } .user-role.role-super_admin { background: #e74c3c; color: #fff; } .user-role.role-company_admin { background: #3498db; color: #fff; } .user-role.role-user { background: #7f8c8d; color: #fff; } /* ─── Sous-menu "Administration" (dropdown nav, ouverture au survol) ─── */ .nav-dropdown { position: relative; display: inline-flex; align-items: center; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 6px 8px; border-radius: 4px; white-space: nowrap; transition: background 0.15s; } .nav-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.1); } .nav-dropdown-caret { font-size: 11px; opacity: 0.8; } .nav-dropdown.active > .nav-dropdown-toggle { background: rgba(255, 255, 255, 0.12); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid #d6dde5; border-radius: 5px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); min-width: 190px; padding: 4px 0; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s; } /* Pseudo-élément qui comble le gap toggle↔menu pour ne pas refermer au survol */ .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; pointer-events: none; } .nav-dropdown:hover::after { pointer-events: auto; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 14px; color: #2c3e50; text-decoration: none; font-size: 13px; white-space: nowrap; transition: background 0.1s; } .nav-dropdown-menu a:hover { background: #f5f8fb; color: #1f4e79; } .nav-dropdown-menu a.active { background: #e8f4fd; color: #1f4e79; font-weight: 600; } .nav-dropdown-menu a .fa { color: #5dade2; width: 16px; text-align: center; } .nav-dropdown-sep { height: 1px; background: #e1e4e8; margin: 4px 0; } /* ─── Switcher de langue (FR / EN) ─── */ .lang-switcher { position: relative; display: inline-block; } /* Pseudo-élément qui comble le gap entre .lang-current et .lang-menu pour empêcher la fermeture du menu quand on glisse la souris vers le bas. */ .lang-switcher::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 10px; pointer-events: none; } .lang-switcher:hover::after { pointer-events: auto; } .lang-current { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .lang-current:hover { background: rgba(255, 255, 255, 0.18); } .lang-current .fa { color: #5dade2; font-size: 12px; } /* Menu déroulant : caché par défaut, visible au hover/focus */ .lang-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: #fff; border: 1px solid #d6dde5; border-radius: 5px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); min-width: 150px; padding: 4px 0; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s; } /* Fallback "click-to-toggle" : si .lang-switcher a la classe .open, le menu reste visible. Ajoutée par le JS du layout pour les périphériques tactiles ou si :hover ne marche pas. */ .lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Ouverture au hover ou au focus-within (accessibilité clavier) */ .lang-switcher:hover .lang-menu, .lang-switcher:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: block; width: 100%; padding: 7px 14px; background: transparent; color: #2c3e50; border: 0; text-align: left; font-size: 12.5px; cursor: pointer; transition: background 0.1s; } .lang-option:hover { background: #f5f8fb; } .lang-option.active { background: #e8f4fd; color: #1f4e79; font-weight: 600; } /* ─── Bouton "Quitter" ─── */ .btn-logout { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s; } /* V5.x : "Quitter" iconifié — texte masqué (tooltip via title="…") */ .btn-logout { gap: 0; padding: 6px 10px; } .btn-logout-text { display: none; } /* V5.x : sélecteur de langue iconifié — globe seul (code masqué) */ .lang-current .lang-code { display: none; } .lang-current { gap: 0; padding: 6px 10px; } /* V5.x : icône Journal d'audit — même rendu "bouton" que langue / Quitter */ .top-nav-audit { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; font-size: 14px; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .top-nav-audit:hover { background: rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; } .top-nav-audit.active { background: rgba(93, 173, 226, 0.25); border-color: #5dade2; } .top-nav-audit .fa { color: #5dade2; } .btn-logout:hover { background: #e74c3c; border-color: #e74c3c; color: #fff; text-decoration: none; } .btn-logout .fa { color: #fff; font-size: 12px; } /* ─── Numéro de version (petit, discret) ─── */ .app-version { font-size: 10.5px; color: rgba(255, 255, 255, 0.45); font-weight: 500; letter-spacing: 0.3px; padding-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.15); margin-left: 2px; } /* ─── Responsive : sur petit écran, compresser ─── */ @media (max-width: 1100px) { .brand-text { display: none; /* on garde juste le logo */ } .user-role { display: none; /* on cache le badge rôle */ } } @media (max-width: 900px) { .top-nav-user { gap: 8px; } .app-version { display: none; } .btn-logout span, .lang-current { font-size: 11px; } } /* ═══════════════════════════════════════════════════════════════ Colonne BOXES : affichage par semaine, codes empilés verticalement ═══════════════════════════════════════════════════════════════ */ .cell-boxes { text-align: left !important; padding: 4px 8px !important; vertical-align: top !important; width: 70px; min-width: 60px; max-width: 90px; font-size: 10.5px; white-space: normal; word-break: break-word; } .col-boxes { width: 70px; min-width: 60px; max-width: 90px; } /* V5.x : rétrécir les colonnes TOT et BOX (ne contiennent qu'un petit nombre) */ .riders-recap-table .total-header, .riders-recap-table .nch-total-cell, .riders-recap-table .nch-box-cell { width: 42px !important; min-width: 42px !important; max-width: 48px !important; text-align: center !important; } /* V5.x : drapeau de nationalité dans le récap riders */ .cell-nation .fi { font-size: 15px; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .cell-nation .nation-code { margin-left: 5px; font-size: 11px; color: #555; vertical-align: middle; } /* V5.x : barre de défilement horizontale collée en bas de l'écran (récap) */ .recap-sticky-scrollbar { position: fixed; bottom: 0; z-index: 900; height: 16px; overflow-x: auto; overflow-y: hidden; background: rgba(245, 247, 250, 0.95); border-top: 1px solid #d0d6dd; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08); display: none; } .recap-sticky-scrollbar-inner { height: 1px; } .cell-boxes-week { margin-bottom: 4px; } .cell-boxes-week:last-child { margin-bottom: 0; } .cell-boxes-week-label { display: inline-block; background: #34495e; color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 3px; line-height: 1.3; } .cell-boxes-code { display: block; background: #ecf0f1; color: #2c3e50; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-family: monospace; font-weight: 600; margin-top: 2px; width: fit-content; } /* ═══════════════════════════════════════════════════════════════ Cellule NOTE compactée : bouton ⚠ qui ouvre un popover (override des règles avec !important dans app.css) ═══════════════════════════════════════════════════════════════ */ .riders-recap-table .cell-note { text-align: center !important; padding: 4px 6px !important; width: 50px !important; max-width: 50px !important; white-space: nowrap !important; font-size: 12px !important; } .note-auto-trigger { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: #fff3cd; color: #856404; border: 1px solid #f5d99a; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.3; white-space: nowrap; transition: background 0.12s, border-color 0.12s; } .note-auto-trigger:hover { background: #ffe69c; border-color: #e6a932; } .note-auto-trigger:active { transform: translateY(1px); } .note-auto-trigger small { font-size: 10px; color: #b35900; font-weight: 600; } /* ─── Popover notes (positionné dynamiquement par JS) ─── */ .notes-popover { position: fixed; z-index: 9500; min-width: 260px; max-width: 420px; background: #fff; border: 1px solid #d6dde5; border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); padding: 10px 14px 12px; opacity: 0; visibility: hidden; transition: opacity 0.12s, visibility 0.12s; pointer-events: none; } .notes-popover.open { opacity: 1; visibility: visible; pointer-events: auto; } .notes-popover-close { position: absolute; top: 4px; right: 6px; background: transparent; border: 0; font-size: 18px; line-height: 1; color: #95a5a6; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color 0.12s, background 0.12s; } .notes-popover-close:hover { color: #2c3e50; background: #f5f8fb; } .notes-popover-list { list-style: none; margin: 0; padding: 4px 18px 0 0; } .notes-popover-list li { position: relative; padding: 6px 0 6px 18px; font-size: 12.5px; color: #2c3e50; line-height: 1.4; border-bottom: 1px dashed #eef1f4; } .notes-popover-list li:last-child { border-bottom: none; } .notes-popover-list li::before { content: "⚠"; position: absolute; left: 0; top: 6px; color: #b35900; font-size: 11px; } /* ═══════════ V5.x : Colonnes options dans le récap ═══════════ */ .riders-recap-table th.option-col-header { width: 40px; font-size: 10px; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; } .riders-recap-table td.option-cell, .riders-recap-table th.option-cell { width: 40px; text-align: center; font-size: 12px; background: #faf7fd; } .riders-recap-table .option-cab { background: #f3eafa; } .riders-recap-table th.option-col-header.option-cab { color: #8e44ad; } .riders-recap-table .option-cell.option-cab { font-weight: 600; color: #8e44ad; }