@charset "utf-8"; /* ══════════════════════════════════════════════════════════════════════ CMO — Design tokens (charte graphique clinique médicale) Palette sombre (charbon) pour la barre de notification ; teal iManage (#39B54A) comme accent. ══════════════════════════════════════════════════════════════════════ */ :root { /* ─── Notification bar brand ─── */ --notification-bg: linear-gradient(135deg, #1d1d1f 0%, #2d2d30 100%); /* ─── Design tokens (utilisés par menu.css, list-view.css, etc.) ─── */ --paper: #ffffff; --canvas: #f8fafc; --ink-soft: #334155; --muted: #64748b; --line: #e2e8f0; --line-soft: #f1f5f9; /* Accent = vert du logo CMO (#39B54A). Ces valeurs sont des fallbacks ; index.php injecte --accent + dérivés (color-mix) depuis la palette DB. */ --accent-dark: #2e9e41; --accent-soft: rgba(57, 181, 74, 0.10); --accent-light: #6fd07f; /* Rayons + ombres : hérités du système canonique iManage (imanage.css). Plus d'override local — échelle radius 6/10/14 + élévation neutre partagées. */ /* ─── Tokens motion (harmonisation animations) ─── */ --motion-instant: 80ms; --motion-fast: 160ms; --motion-normal: 260ms; --motion-slow: 380ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decel: cubic-bezier(0, 0, 0.2, 1); --ease-accel: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Bootstrap overrides ─── */ --bs-primary: #39B54A; --bs-primary-rgb: 31, 180, 197; --bs-link-color: var(--accent-dark); --bs-link-hover-color: var(--accent-dark); } /* ─── Couleur unifiée pour tous les boutons d'action ───────────────────── --btn-color est injecté dynamiquement depuis index.php (config DB). Fallback sur var(--accent) si la variable n'est pas définie. Les boutons .btn-danger gardent leur rouge (action destructive = signal visuel essentiel à la sécurité UX). */ :root { --btn-color: var(--accent, #39B54A); } /* fallback si index.php ne l'injecte pas */ .btn-primary, .btn-primary:focus { background-color: var(--btn-color) !important; border-color: var(--btn-color) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary:focus-visible { background-color: var(--btn-color-hover, color-mix(in srgb, var(--btn-color) 85%, #000)) !important; border-color: var(--btn-color-hover, color-mix(in srgb, var(--btn-color) 85%, #000)) !important; color: #fff !important; } .btn-success, .btn-success:focus { background-color: var(--btn-color) !important; border-color: var(--btn-color) !important; color: #fff !important; } .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success:focus-visible { background-color: var(--btn-color-hover, color-mix(in srgb, var(--btn-color) 85%, #000)) !important; border-color: var(--btn-color-hover, color-mix(in srgb, var(--btn-color) 85%, #000)) !important; color: #fff !important; } .btn-outline-primary { color: var(--btn-color) !important; border-color: var(--btn-color) !important; } .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--btn-color) !important; border-color: var(--btn-color) !important; color: #fff !important; } /* Note : le fond est porté par iManage/css/imanage.css (light : var(--bg-surface), dark : var(--bg-primary) via theme-toggle.css). On ne le surcharge plus ici pour laisser le 2-tons du body::after visible. */ /* ─── Barre de notification principale — dark mode ─────────────────────── */ [data-theme="dark"] #notification_main_bar { background: var(--bg-navbar); } /* (Retiré 2026-06-01) Les règles #notification_message_bar.bg-* étaient du CSS MORT ET un override du composant toast : ce dernier applique ses propres classes .nt-* (jamais .bg-*) et gère ses couleurs sémantiques lui-même. CMO hérite du toast tel quel. */ /* ─── Ordre des contrôles de session : [thème] [print] [reload] ─────────── */ #imanage_theme_toggle { order: 1; } #expand_content { order: 2; } #reload_content { order: 3; } .table th { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .login-brand-col { background: linear-gradient(135deg, #1d1d1f 0%, #2d2d30 100%); } .login-brand-logo { width: 80px; height: auto; filter: brightness(0) invert(1); opacity: 0.9; } #page { margin-top: 0; } .content-title { margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .content-title-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; /* espacement entre boutons indépendants (sans btn-group) */ } /* Widget de navigation mensuelle injecté dans .content-title : poussé à droite (margin-left:auto), collé avant les actions. */ .content-title .content-title-month-nav { margin-left: auto; } /* Les actions restent collées au widget (pas d'auto entre eux) */ .content-title:has(.content-title-month-nav) .content-title-actions { margin-left: 0; } /* Force la visibilité + taille des icônes Font Awesome dans les boutons d'action du content-title. Sans ces règles, les icônes (.fa-solid .fa-plus, .fa-file-csv, etc.) sont rendues mais imperceptibles à cause d'un héritage de styles trop restrictif quand les boutons sont déplacés depuis le card list-view. */ .content-title-actions button { display: inline-flex !important; align-items: center; gap: 7px; } .content-title-actions button .fa-solid, .content-title-actions button .fa-regular, .content-title-actions button .fa-brands, .content-title-actions button .fa-light { display: inline-block !important; font-size: 14px; line-height: 1; } /* ─── Calendrier RDV : navigation semaine ─────────────────────────── Boutons "← Sem. préc." à GAUCHE, titre centré au milieu, "Sem. suiv. →" à DROITE. Marge en bas pour séparer du calendrier. */ .g-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 4px 0; } .g-cal-nav .g-cal-title { flex: 1 1 auto; text-align: center; font-weight: 600; font-size: var(--font-size-lg); color: var(--text-primary, #0f172a); letter-spacing: -0.01em; } .g-cal-nav .btn-prev-week, .g-cal-nav .btn-next-week { flex: 0 0 auto; white-space: nowrap; } /* ─── Calendrier RDV : tableau hebdomadaire ───────────────────────── Table pleine largeur, colonnes équirésorbées (1 créneau + 7 jours), contenu centré, header avec fond contrasté. */ .g-cal-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; background: var(--bg-surface, #fff); } .g-cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--font-size-base); } .g-cal-table thead th { background: var(--bg-primary, #f8fafc); color: var(--text-primary, #0f172a); font-weight: 600; font-size: 12.5px; padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line, #e2e8f0); letter-spacing: -0.01em; text-transform: capitalize; } .g-cal-table thead th:first-child { width: 110px; background: var(--bg-primary, #f8fafc); color: var(--text-secondary, #64748b); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.04em; } .g-cal-table tbody td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line, #e2e8f0); vertical-align: middle; } .g-cal-table tbody td:first-child { background: var(--bg-primary, #f8fafc); color: var(--text-secondary, #64748b); font-weight: 600; font-size: 12px; } .g-cal-table tbody tr:last-child td { border-bottom: 0; } .g-cal-table tbody tr:hover td { background: var(--bg-soft, #f1f5f9); } .g-cal-table .text-muted { font-style: italic; color: var(--text-muted, #94a3b8); } /* ---- Print: surcharges cmo (imanage-print.css fournit la base) ---- */ .invoice_row { height: 28px; } .table-ticket { border-collapse: collapse; } .table-ticket td { padding: 2px 0; } .table-ticket tfoot td { padding-top: 8px; border-top: 1px solid var(--border); } /* ─── Composant MÉTIER CMO : omnibox de recherche patient ───────────────── Recherche patient dans frm_new_consultation / frm_new_rendez_vous. Rapatrié depuis iManage/form-container.css (2026-06-01) : concept purement CMO (médical), le framework form-container n'en a pas connaissance → il n'a pas à porter ce CSS. Dark-aware via les variables (--bg-surface/--line…). */ .patient-omnibox { position: relative; z-index: 4; width: 100%; max-width: 360px; margin-left: auto; margin-bottom: 16px; } .patient-omnibox #patient_search_results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 320px; overflow-y: auto; background: var(--bg-surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 8px; box-shadow: var(--shadow-md, 0 6px 24px rgba(15, 23, 42, .08)); padding: 0; display: none; } .patient-omnibox #patient_search_results.show { display: block; } .patient-omnibox .registered_patient { display: block; width: 100%; text-align: left; white-space: normal; border: 0; border-bottom: 1px solid var(--line, #e2e8f0); background: transparent; cursor: pointer; transition: background .12s; } .patient-omnibox .registered_patient:last-child { border-bottom: 0; } .patient-omnibox .registered_patient:hover, .patient-omnibox .registered_patient:focus { background: var(--bg-primary, #f8fafc); outline: none; } @media (max-width: 575.98px) { .patient-omnibox { max-width: none; } } #new_consultation .subpanel { background: var(--bg-surface, #fff); border: 1px solid var(--border-color, #e3e6eb); border-radius: 8px; padding: 12px; } #new_consultation .payment-total-row { background: var(--bg-surface, #fff); border: 1px solid var(--border-color, #e3e6eb); border-radius: 8px; padding: 8px 12px; } #new_consultation .payment-total-spacer { border-top: 1px dashed var(--border-color, #d7dae0); height: 1px; } #new_consultation #consultation_fares { line-height: 1; } #selected_acts .selected-act { background: var(--bg-surface, #fff); border: 1px solid var(--border-color, #e3e6eb); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); } #selected_acts .selected-act:hover { background: var(--bg-subtle, #f5f7fa); } #selected_acts .selected-act:last-child { margin-bottom: 0; } @media (max-width: 767.98px) { .content-title > .content-title-actions { flex-wrap: wrap; } .patient-omnibox { width: 100%; max-width: 100%; order: 10; } /* ─── Mobile : calendrier APRÈS le fil d'Ariane ──────────────────── Sur desktop, #page_header (date-picker) est au-dessus du breadcrumb. Sur mobile, on réordonne avec flex order : 1. Breadcrumb 2. Calendrier (.date-picker) 3. Contenu principal Avantage : le breadcrumb (info de contexte) prime, la zone de saisie du contenu reste atteignable rapidement, et le calendrier n'avale plus l'espace utile en haut. */ #page { display: flex; flex-direction: column; } #breadcrumb_bar { order: 1; } #page_header { order: 2; } #page_content { order: 3; } /* Plus de marge négative entre page_header et page_content quand le calendrier est en mode .visible (le style "+ #page_content" du framework n'est plus pertinent puisqu'ils sont séparés par le breadcrumb). */ #page_header.visible + #page_content { padding-top: 16px; } /* Sur mobile, on rend le calendrier toujours visible quand il est activé (pas d'animation max-height qui peut cacher partiellement). */ #page_header.visible, #page_header.always-visible { max-height: none; } /* Le date-picker tient sur 2 lignes quand l'écran est étroit. */ .date-container { flex-wrap: wrap; justify-content: center; gap: 6px; } } /* ─── Mobile : tableaux groupés par clinique ↔ réception ──────────────── Les pages Consultations rendent plusieurs sous-tableaux (1 par clinique × 1 par réception). En mode mobile (list-view bascule en cartes à 640px), on rétrécit aussi les en-têtes de section pour qu'ils ne mangent pas tout l'écran. */ @media (max-width: 640px) { .clinic-section-header { padding: 8px 4px; margin-top: 12px; } .clinic-section-header h5 { font-size: var(--font-size-lg); } .consultations-layout { display: flex; flex-direction: column; } .consultations-main, .consultations-sidebar { width: 100%; } .consultations-sidebar { order: 2; } /* synthèse + calendrier sous le tableau */ } /* ════════════════════════════════════════════════════════════════════════ Dashboard épuré — v4.0 Principe : hero minimaliste, KPIs en rangée plate, 2 sections max par rôle. ════════════════════════════════════════════════════════════════════════ */ .dashboard-v3 { --ink: #0f172a; --mute: #64748b; --line: #e2e8f0; --surf: #ffffff; --soft: #f8fafc; --softer: #f1f5f9; --ok: #059669; --warn: #d97706; --bad: #dc2626; --cyan: #00B4D8; --green: #10B981; color: var(--ink); font-feature-settings: "tnum" 1, "ss01" 1; padding-bottom: 32px; } .dashboard-v3 h4 { font-size: var(--font-size-lg); font-weight: 600; margin: 0; } /* ─── Hero ────────────────────────────────────────────────────────── Design canonique porté par iManage/css/imanage.css. Pas d'override ici pour conserver une présentation cohérente avec les autres projets. */ /* ─── KPIs ──────────────────────────────────────────────────────── Le design canonique des KPIs (.g-kpis / .g-kpi-card / .g-kpi-head / .g-kpi-value / .g-kpi-box-unit) est porté par iManage/css/imanage.css. Cette section ne contient que d'éventuelles surcharges spécifiques à CMO (couleurs métier, badges, etc.). Aucun override de layout pour rester cohérent avec les 8 autres projets utilisant le même framework. */ /* ─── Cartes / tableaux / état vide ────────────────────────────── Design canonique entièrement porté par iManage/css/imanage.css. (.g-card, .g-card-head, .g-pill-sm, .g-table, .g-card-empty, .g-empty-ico + hover ligne table) Utilitaires CMO-only : */ .dashboard-v3 .g-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--mute); } .dashboard-v3 .g-kvp-title { font-weight: 500; } /* ─── Clinic selector / badge ───────────────────────────────────── */ .dashboard-v3 .g-clinic-selector { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .dashboard-v3 .g-clinic-ico { color: var(--mute); font-size: 14px; } .dashboard-v3 .g-clinic-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); font-size: 12px; font-weight: 500; flex-shrink: 0; } /* ─── Résumé multi-cliniques (ligne compacte) ───────────────────── */ .dashboard-v3 .g-clinic-summary { margin-bottom: 16px; } .dashboard-v3 .g-clinic-row { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: var(--font-size-base); } .dashboard-v3 .g-clinic-row:last-child { border-bottom: 0; } .dashboard-v3 .g-clinic-row-name { flex: 1; min-width: 0; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-v3 .g-clinic-row-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 80px; } .dashboard-v3 .g-clinic-row-val { font-weight: 600; color: var(--ink); font-size: var(--font-size-base); line-height: 1.1; } .dashboard-v3 .g-clinic-row-lbl { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; } /* ─── Grid 2 colonnes ───────────────────────────────────────────── */ .dashboard-v3 .g-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; } /* ─── Barres de progression (top doctors / spécialités) ─────────── */ .dashboard-v3 .g-bar { width: 100%; height: 5px; background: var(--softer); border-radius: 3px; overflow: hidden; margin-top: 6px; } .dashboard-v3 .g-bar-fill { height: 100%; border-radius: 3px; background: var(--cyan); transition: width 600ms cubic-bezier(.2,.8,.2,1); } /* ─── Badge (taux de présence) ──────────────────────────────────── */ .dashboard-v3 .g-badge-ok { color: var(--ok); font-weight: 600; } .dashboard-v3 .g-badge-warn { color: var(--warn); font-weight: 600; } /* ─── Responsive KPIs ───────────────────────────────────────────── Le layout grid `repeat(auto-fit, minmax(200px, 1fr))` défini dans iManage/css/imanage.css gère déjà naturellement le wrap et l'empilement sur mobile. Aucune surcharge nécessaire ici. */ /* ═══════════════════════════════════════════════════════════════════ PWA — bandeau update + indicateur offline ═══════════════════════════════════════════════════════════════════ */ #pwa_update_banner { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1050; background: var(--ink, #0f172a); color: #fff; padding: 10px 14px 10px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); display: inline-flex; align-items: center; gap: 12px; font-size: var(--font-size-menu); font-weight: 500; animation: pwa-slide-in .25s ease; } #pwa_update_banner button { background: var(--accent, #39B54A); color: #fff; border: 0; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; } #pwa_update_banner button:hover { opacity: 0.9; } #pwa_offline_indicator { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 1040; background: #ef4444; color: #fff; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; animation: pwa-slide-in .25s ease; max-width: 90vw; } #pwa_offline_indicator .fa-solid { font-size: 11px; } @keyframes pwa-slide-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Bouton "Installer l'app" dans le user-account menu — caché par défaut, révélé par pwa.js si beforeinstallprompt est capté */ #install_app[hidden] { display: none !important; } /* ── Badge compteur outbox sur l'avatar utilisateur ────────────── */ #user_account_trigger { position: relative; } #ua_outbox_badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg-surface, #ffffff); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35); z-index: 1; pointer-events: none; font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════════ PWA — Page de gestion outbox (rprt_outbox.php) ════════════════════════════════════════════════════════════════════ */ #outbox_page { padding-bottom: 32px; } .outbox-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; } .outbox-summary-item { background: var(--bg-surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; } .outbox-summary-label { font-size: 11px; color: var(--text-secondary, #64748b); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 4px; } .outbox-summary-value { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary, #0f172a); line-height: 1.1; } .outbox-status-online { color: #10b981 !important; } .outbox-status-offline { color: #ef4444 !important; } .outbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .outbox-card { background: var(--bg-surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .outbox-card-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .outbox-card-label { font-weight: 600; font-size: var(--font-size-base); color: var(--text-primary, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .outbox-badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; } .outbox-badge-pending { background: rgba(245,158,11,.12); color: #b45309; } .outbox-badge-syncing { background: rgba(59,130,246,.12); color: #2563eb; } .outbox-badge-failed { background: rgba(239,68,68,.12); color: #b91c1c; } .outbox-badge-done { background: rgba(16,185,129,.12); color: #059669; } .outbox-card-body { font-size: 12px; color: var(--text-secondary, #64748b); } .outbox-meta-row { display: flex; flex-wrap: wrap; gap: 12px; } .outbox-meta { display: inline-flex; align-items: center; gap: 5px; } .outbox-meta .fa-solid { font-size: 10px; opacity: .7; } .outbox-meta code { background: var(--bg-content, #f1f5f9); padding: 1px 6px; border-radius: 4px; font-size: 11px; } .outbox-error { margin-top: 6px; padding: 6px 10px; background: rgba(239,68,68,.06); border-left: 2px solid #ef4444; border-radius: 0 4px 4px 0; color: #b91c1c; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.4; word-break: break-word; } .outbox-card-actions { display: flex; gap: 8px; margin-top: 4px; } .outbox-card-actions .btn { font-size: 12px; } .outbox-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary, #64748b); background: var(--bg-surface, #fff); border: 1px dashed var(--border, #e2e8f0); border-radius: 12px; } .outbox-empty .fa-solid { font-size: 38px; color: #10b981; margin-bottom: 14px; opacity: .9; } .outbox-empty p { margin: 0; font-size: var(--font-size-base); } /* ── Modal de reconnexion (PWA — session expirée pendant sync) ── */ #pwa_relogin_modal { position: fixed; inset: 0; z-index: 1080; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: pwa-fade-in .2s ease; } #pwa_relogin_modal .pwa-modal-card { background: var(--bg-surface, #fff); border-radius: 14px; padding: 28px 28px 24px; max-width: 380px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.25); } #pwa_relogin_modal .pwa-modal-icon { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #39B54A) 12%, transparent); color: var(--accent, #39B54A); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 18px; } #pwa_relogin_modal h3 { margin: 0 0 6px; font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary, #0f172a); } #pwa_relogin_modal p { margin: 0 0 18px; font-size: var(--font-size-base); color: var(--text-secondary, #64748b); line-height: 1.5; } #pwa_relogin_modal label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, #64748b); margin: 12px 0 4px; } #pwa_relogin_modal input[type="password"], #pwa_relogin_modal input[type="text"] { width: 100%; padding: 9px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: var(--font-size-base); font-family: inherit; background: var(--bg-surface, #fff); color: var(--text-primary, #0f172a); } #pwa_relogin_modal input:focus { outline: none; border-color: var(--accent, #39B54A); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #39B54A) 20%, transparent); } #pwa_relogin_modal .pwa-modal-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; } #pwa_relogin_modal button { padding: 9px 16px; border-radius: 6px; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; font-family: inherit; border: 0; } #pwa_relogin_modal .pwa-btn-primary { background: var(--accent, #39B54A); color: #fff; } #pwa_relogin_modal .pwa-btn-ghost { background: transparent; color: var(--text-secondary, #64748b); } #pwa_relogin_modal .pwa-error { color: #b91c1c; font-size: 12px; margin-top: 8px; min-height: 16px; } @keyframes pwa-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ── Badge outbox cliquable ── */ #ua_outbox_badge { pointer-events: auto !important; cursor: pointer; transition: transform .12s ease; } #ua_outbox_badge:hover { transform: scale(1.1); } /* ─── Modal backdrop — grille perforée (dots 2 px noirs, opacité 0.65) ── Remplace le fond uni de Bootstrap par un motif de points noirs sur fond transparent, cohérent avec les backdrops form-container / record-detail. */ .modal-backdrop, .modal-backdrop.show { background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px) !important; background-size: 3px 3px !important; background-color: transparent !important; --bs-backdrop-opacity: 0.35; opacity: 0.35 !important; } /* ═══════════════════════════════════════════════════════════════════ Dashboard — Hero ligne 3 (nom utilisateur) + tuiles clinique + graphe ═══════════════════════════════════════════════════════════════════ */ /* Ligne 3 du hero : nom de l'utilisateur */ .dashboard-v3 .g-hero-name { margin-top: 6px; font-size: var(--font-size-base); font-weight: 500; color: var(--text-secondary, var(--mute, #64748b)); letter-spacing: 0; } /* Grille rangée consolidation : tuiles cliniques + graphe (1/3 dernière colonne) */ .dashboard-v3 .g-clinic-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } /* ── Rangée tuiles clinique + graphe côte à côte, même hauteur ── Ratio 5/12 — 7/12 (au lieu de 4/12 — 8/12) : la colonne de gauche est passée en onglets (1 tuile visible à la fois) → besoin d'un peu plus de largeur, le graphe garde l'essentiel pour rester lisible. */ .dashboard-v3 .g-tile-chart-row { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: stretch; margin-bottom: 16px; } .dashboard-v3 .g-clinic-tiles-col { display: flex; flex-direction: column; gap: 12px; } /* Onglets cliniques (apparaît quand >= 2 cliniques) */ .dashboard-v3 .g-clinic-tabbed { gap: 0; } .dashboard-v3 .g-clinic-tab-nav { display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,0.04); border-radius: 10px 10px 0 0; border: 1px solid var(--border, #e2e8f0); border-bottom: 0; flex-wrap: wrap; } .dashboard-v3 .g-clinic-tab-btn { appearance: none; background: transparent; border: 0; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--mute, #64748b); border-radius: 6px; cursor: pointer; transition: background-color .15s ease, color .15s ease; text-transform: uppercase; letter-spacing: .04em; flex: 1; min-width: 60px; text-align: center; } .dashboard-v3 .g-clinic-tab-btn:hover { background: rgba(0,0,0,0.06); color: var(--text, #1e293b); } .dashboard-v3 .g-clinic-tab-btn.is-active { background: var(--bg-surface, #fff); color: var(--accent, #39B54A); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .dashboard-v3 .g-clinic-tab-panels { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--border, #e2e8f0); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg-surface, #fff); padding: 0; } .dashboard-v3 .g-clinic-tab-panel { display: none; flex: 1; } .dashboard-v3 .g-clinic-tab-panel.is-active { display: flex; flex-direction: column; } /* Quand la tuile est dans un onglet, on enlève sa propre bordure (gérée par le panel) */ .dashboard-v3 .g-clinic-tab-panel > .g-clinic-tile { border: 0; border-radius: 0 0 9px 9px; box-shadow: none; margin: 0; flex: 1; } /* Adaptation mobile (< 576px) : tabs cliniques compactes pour éviter le wrap sur 3 cliniques (KIN/BRZ/PNR) côte à côte. */ @media (max-width: 575.98px) { .dashboard-v3 .g-clinic-tab-btn { padding: 6px 8px; font-size: 11px; letter-spacing: 0; min-width: 50px; } .dashboard-v3 .g-clinic-tab-nav { padding: 3px; } } /* Mode sombre */ @media (prefers-color-scheme: dark) { .dashboard-v3 .g-clinic-tab-nav { background: rgba(255,255,255,0.06); } .dashboard-v3 .g-clinic-tab-btn:hover { background: rgba(255,255,255,0.08); } .dashboard-v3 .g-clinic-tab-btn.is-active { background: rgba(255,255,255,0.1); color: #5ee5f5; } } /* Graphe dans la rangée mixte — fond sombre, contenu contrasté */ .dashboard-v3 .g-tile-chart-row .g-chart-card { margin: 0; height: 100%; background: #0f172a; border-color: #1e2d40; color: #e2e8f0; } .dashboard-v3 .g-tile-chart-row .g-chart-card .g-card-head { border-bottom-color: rgba(255,255,255,.09); } .dashboard-v3 .g-tile-chart-row .g-chart-card .g-card-head h4 { color: #e2e8f0; } .dashboard-v3 .g-tile-chart-row .g-chart-card .g-chart-subtitle { color: #7ea4b8; } .dashboard-v3 .g-tile-chart-row .g-chart-legend { border-top-color: rgba(255,255,255,.09); color: #7ea4b8; } .dashboard-v3 .g-tile-chart-row .g-chart-legend-rate { background: rgba(255,255,255,.07); color: #94a3b8; } .dashboard-v3 .g-tile-chart-row .g-chart-body { flex: 1; } /* Note XAF sous les tuiles cliniques */ .dashboard-v3 .g-xaf-note { font-size: 11px; color: var(--text-secondary, #64748b); margin: 4px 0 0; display: flex; align-items: flex-start; gap: 5px; line-height: 1.4; } .dashboard-v3 .g-xaf-note .fa-solid { color: var(--accent, #39B54A); flex-shrink: 0; margin-top: 1px; font-size: 10px; } @media (max-width: 900px) { .dashboard-v3 .g-tile-chart-row { grid-template-columns: 1fr; } } /* Tuile clinique — carte compact avec stats 2x2 */ .dashboard-v3 .g-clinic-tile { background: var(--bg-surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .dashboard-v3 .g-clinic-tile:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .06); border-color: var(--accent, #39B54A); transform: translateY(-1px); } .dashboard-v3 .g-clinic-tile-head { display: flex; align-items: center; gap: 10px; } .dashboard-v3 .g-clinic-tile-ico { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--accent, #39B54A) 12%, transparent); color: var(--accent, #39B54A); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .dashboard-v3 .g-clinic-tile-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary, var(--ink, #0f172a)); line-height: 1.2; } .dashboard-v3 .g-clinic-tile-code { font-size: 10px; color: var(--text-secondary, var(--mute, #64748b)); font-family: ui-monospace, Menlo, monospace; } .dashboard-v3 .g-clinic-tile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 2px; } .dashboard-v3 .g-clinic-tile-stat--wide { grid-column: span 2; } .dashboard-v3 .g-clinic-tile-stat-val { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary, var(--ink, #0f172a)); line-height: 1.1; font-variant-numeric: tabular-nums; } .dashboard-v3 .g-clinic-tile-stat-val small { font-size: 10px; font-weight: 500; opacity: .65; margin-left: 2px; } .dashboard-v3 .g-clinic-tile-stat-lbl { font-size: 10px; color: var(--text-secondary, var(--mute, #64748b)); font-weight: 600; margin-bottom: 2px; } /* Accent pour chiffres importants (ex. RDV en attente > 0) */ .dashboard-v3 .g-tile-accent { color: var(--warn, #f97316); } /* Graphe SVG d'évolution — bloc compact avec mini chart */ .dashboard-v3 .g-chart-card { display: flex; flex-direction: column; } /* Variante "wide" : graphe pleine largeur sous la rangée des cliniques */ .dashboard-v3 .g-chart-card-wide { margin-top: 16px; margin-bottom: 16px; } .dashboard-v3 .g-chart-subtitle { font-size: 11.5px; font-weight: 400; color: var(--text-muted, #94a3b8); margin-left: 8px; letter-spacing: 0; text-transform: lowercase; } .dashboard-v3 .g-chart-body { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 8px; } .dashboard-v3 .g-chart-svg { width: 100%; height: 180px; display: block; } /* Chart.js — wrapper à hauteur fixe (le canvas se redimensionne dedans) */ .dashboard-v3 .g-chartjs-wrap { position: relative; height: 200px; width: 100%; } /* Légende sous le graphe — taux de conversion + portée */ .dashboard-v3 .g-chart-legend { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line, #e2e8f0); font-size: 11.5px; color: var(--text-muted, #94a3b8); line-height: 1.5; } .dashboard-v3 .g-chart-legend strong { color: var(--text-secondary, #64748b); font-weight: 600; } .dashboard-v3 .g-chart-legend-rate { display: inline-block; margin-left: 4px; padding: 1px 6px; background: var(--bg-soft, #f1f5f9); border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--text-secondary, #64748b); } .dashboard-v3 .g-chart-legend-series { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-right: 8px; } .dashboard-v3 .g-chart-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; flex-shrink: 0; vertical-align: middle; } .dashboard-v3 .g-chart-area { fill: color-mix(in srgb, var(--accent, #39B54A) 14%, transparent); } .dashboard-v3 .g-chart-line { stroke: var(--accent, #39B54A); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dashboard-v3 .g-chart-dot { fill: var(--accent, #39B54A); stroke: var(--bg-surface, #fff); stroke-width: 1.5; } .dashboard-v3 .g-chart-xlabel { font-size: 9px; fill: var(--text-secondary, var(--mute, #64748b)); font-family: -apple-system, "SF Pro Text", sans-serif; } .dashboard-v3 .g-chart-footer { display: flex; align-items: baseline; justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--border, #e2e8f0); } .dashboard-v3 .g-chart-current { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary, var(--ink, #0f172a)); font-variant-numeric: tabular-nums; } .dashboard-v3 .g-chart-current small { font-size: 11px; font-weight: 500; opacity: .65; margin-left: 3px; } .dashboard-v3 .g-chart-footer-lbl { font-size: 11px; color: var(--text-secondary, var(--mute, #64748b)); } .dashboard-v3 .g-chart-delta { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; } .dashboard-v3 .g-chart-delta .fa-solid { font-size: 9px; } .dashboard-v3 .g-chart-delta.is-up { background: rgba(16,185,129,.12); color: #059669; } .dashboard-v3 .g-chart-delta.is-down { background: rgba(239,68,68,.12); color: #dc2626; } /* ─── Dashboard — hauteurs uniformes dans les rangées (grilles) ────── Les enfants directs des grilles `.g-grid-2` et `.g-clinic-row-grid` s'étirent à 100% pour que toutes les cartes d'une même rangée aient la même hauteur, quel que soit leur contenu. Les cartes basculent en flex column pour distribuer leur contenu interne proprement. */ .dashboard-v3 .g-grid-2, .dashboard-v3 .g-clinic-row-grid { align-items: stretch; } .dashboard-v3 .g-grid-2 > .g-card, .dashboard-v3 .g-clinic-row-grid > .g-card, .dashboard-v3 .g-clinic-row-grid > .g-clinic-tile { height: 100%; margin-bottom: 0; /* le gap du parent gère l'espacement */ display: flex; flex-direction: column; } /* Le corps de la carte (table, body, chart) s'étire pour pousser le footer en bas si présent. Header (g-card-head) garde sa taille intrinsèque. */ .dashboard-v3 .g-grid-2 > .g-card > .g-table, .dashboard-v3 .g-grid-2 > .g-card > .g-chart-body { flex: 1; } /* La table interne d'une card prend toute la hauteur disponible et aligne ses lignes en haut (pas d'étirement vertical des td) */ .dashboard-v3 .g-grid-2 > .g-card > .g-table tbody { vertical-align: top; } /* ─── Dashboard — toolbar sélecteur clinique (au-dessus du hero) ──────── */ .dashboard-v3 .g-clinic-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 12px; background: var(--bg-surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 12.5px; } .dashboard-v3 .g-clinic-toolbar .g-clinic-ico { color: var(--accent, #39B54A); font-size: 13px; flex-shrink: 0; } .dashboard-v3 .g-clinic-toolbar-label { color: var(--text-secondary, #64748b); text-transform: uppercase; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; flex-shrink: 0; } .dashboard-v3 .g-clinic-toolbar select.form-select-sm { max-width: 280px; width: auto; flex: 0 1 auto; font-size: var(--font-size-base); border-color: var(--border, #e2e8f0); } /* ─── Navigation mensuelle (style calendrier) ────────────────────────── < Mai 2026 > [Aujourd'hui] Boutons flèche pour naviguer mois précédent/suivant + label central. Le bouton "Aujourd'hui" n'apparaît que quand on n'est PAS sur le mois courant — permet un retour rapide. Le bouton "suivant" est désactivé quand on est déjà sur le mois courant (pas de futur). */ /* Navigation mensuelle — widget réutilisable, styles indépendants du dashboard-v3 pour fonctionner aussi bien dans .content-title que dans le dashboard lui-même. */ .g-month-nav { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .g-month-btn { width: 26px; height: 26px; border: 1px solid var(--border, #e2e8f0); background: var(--bg-surface, #fff); border-radius: 6px; cursor: pointer; color: var(--text-secondary, #64748b); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; padding: 0; line-height: 1; } .g-month-btn:hover:not(:disabled) { background: var(--bg-primary, #f8fafc); border-color: var(--accent, #39B54A); color: var(--accent, #39B54A); } .g-month-btn:disabled { opacity: .3; cursor: not-allowed; } .g-month-label { min-width: 88px; text-align: center; font-weight: 600; font-size: var(--font-size-base); color: var(--text-primary, #0f172a); user-select: none; letter-spacing: -.01em; } .g-month-today { padding: 3px 9px; border: 1px solid var(--accent, #39B54A); background: transparent; color: var(--accent, #39B54A); border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s; line-height: 1.4; } .g-month-today:hover { background: var(--accent, #39B54A); color: #fff; } /* Mobile */ @media (max-width: 575.98px) { .dashboard-v3 .g-clinic-toolbar { flex-wrap: wrap; } .content-title .content-title-month-nav { margin-left: 0; order: 3; } } /* Hero remis au layout 2 lignes : nom gros + date — la 3e ligne (.g-hero-name) a été retirée, son sélecteur reste inerte si jamais présente dans du DOM legacy. */ .dashboard-v3 .g-hero-name { display: none; } /* ─── Bande "Nouveaux patients récents" (rprt_patients) ────────────── Apparaît au-dessus de la liste principale après création d'un patient. Vide à chaque chargement de la page (RAM uniquement). Max 12 entrées en file FIFO (4 cards × 3 lignes). Fermeture via le X en haut à droite. */ .recent-strip { position: relative; margin-bottom: 16px; padding: 14px 16px 16px; background: color-mix(in srgb, var(--accent, #39B54A) 9%, var(--bg-surface, #fff)); border: 1px solid color-mix(in srgb, var(--accent, #39B54A) 35%, var(--border, #e2e8f0)); border-radius: 12px; animation: recent-strip-in .22s ease-out; } @keyframes recent-strip-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .recent-strip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .recent-strip-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--accent, #39B54A); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .recent-strip-title { margin: 0; font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary, var(--ink, #0f172a)); flex: 1; } .recent-strip-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border, #e2e8f0); background: var(--bg-surface, #fff); color: var(--text-secondary, var(--mute, #64748b)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: color .12s ease, background-color .12s ease, border-color .12s ease; flex-shrink: 0; } .recent-strip-close:hover { color: #dc2626; border-color: #dc2626; background: rgba(220, 38, 38, 0.06); } .recent-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1199.98px) { .recent-strip-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 899.98px) { .recent-strip-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .recent-strip-grid { grid-template-columns: 1fr; } } /* N° dossier en proéminence — les tiles dans la bande sont identiques aux autres MAIS leur footer-ref-value (le n° de dossier) est mis en avant visuellement pour que la réceptionniste le repère du premier coup d'œil. */ .recent-tile-wrap .tv-card { border-color: var(--accent, #39B54A); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #39B54A) 18%, transparent); } .recent-tile-wrap .tv-card-ref { background: color-mix(in srgb, var(--accent, #39B54A) 12%, transparent); border-top: 1px solid color-mix(in srgb, var(--accent, #39B54A) 30%, var(--border, #e2e8f0)); border-radius: 0 0 11px 11px; margin: 4px -16px -12px; /* recouvre les paddings de .tv-card */ padding: 8px 16px; } .recent-tile-wrap .tv-card-ref-label { color: var(--accent, #39B54A); font-weight: 700; } .recent-tile-wrap .tv-card-ref-value { font-size: var(--font-size-base) !important; /* écrase la taille normale */ font-weight: 800; color: var(--text-primary, var(--ink, #0f172a)); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* Tuile employé (vue tile-view « comme les patients ») : badge statut Actif/Inactif épinglé en haut-droite de l'en-tête de la carte. */ .tv-card-head .tv-emp-status { align-self: flex-start; flex-shrink: 0; } /* Badge clinique sur tuile patient (vue globale / super-admin) — distingue Kin / Brazza / Pointe-Noire dans une liste multi-clinique. Épinglé haut-droite. */ .tv-card-head .tv-clinic-badge { align-self: flex-start; flex-shrink: 0; margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; line-height: 1.45; border: 1px solid transparent; white-space: nowrap; } /* Couleurs assombries pour un contraste ≥4.5:1 du texte (petit, gras) sur les tints clairs. */ .tv-clinic-badge--kin { background: rgba(59,130,246,.14); color: #1d4ed8; border-color: rgba(59,130,246,.30); } .tv-clinic-badge--bzv { background: rgba(57,181,74,.16); color: #1c6e2d; border-color: rgba(57,181,74,.32); } .tv-clinic-badge--pnr { background: rgba(217,119,6,.15); color: #92400e; border-color: rgba(217,119,6,.30); } [data-theme="dark"] .tv-clinic-badge--kin { color: #93c5fd; } [data-theme="dark"] .tv-clinic-badge--bzv { color: #86efac; } [data-theme="dark"] .tv-clinic-badge--pnr { color: #fcd34d; } /* ── Drawer édition patient (frm_update_patient) ────────────────────────── */ .up-section-label { font-weight: 700; font-size: var(--font-size-menu); color: var(--text-primary, var(--ink, #0f172a)); margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color, rgba(0,0,0,.1)); display: flex; align-items: center; gap: 8px; } .up-section-label .fa-solid { color: var(--accent, #39B54A); } .up-section-label--ins { margin-top: 18px; } .up-ins-help { margin-top: -2px; } .up-folder { border: 1px solid var(--border-color, rgba(0,0,0,.1)); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: rgba(0,0,0,.015); } .up-folder-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .up-folder-meta { font-size: 12px; color: var(--text-secondary, #64748b); } [data-theme="dark"] .up-folder { background: rgba(255,255,255,.03); } /* Badge clinique réutilisé hors en-tête de tuile (drawer) → réinitialise le push à droite. */ .up-folder-head .tv-clinic-badge { margin-left: 0; } /* Hauteur HARMONISÉE des champs du drawer : en Bootstrap 5, .form-control-sm a un min-height explicite mais PAS .form-select-sm (sa hauteur vient des seuls padding/ line-height) → les dropdowns rendaient plus courts que les input boxes. On force la MÊME hauteur pour tous les selects + inputs simples (box-sizing:border-box → hauteur totale garantie). Le textarea (adresse) est exclu (multi-lignes). */ #update_patient .form-select, #update_patient .form-select-sm, #update_patient input.form-control, #update_patient input.form-control-sm { height: 40px; min-height: 40px; } /* ── Actions de page en style « btn-link » (refonte IA 2026-06-10) ────────── Les boutons d'action d'en-tête (ouvrir un formulaire, exporter…) adoptent un style lien accentué : léger, cohérent, moins de « gros boutons ». Scope CMO uniquement (.content-title-actions est injecté par les pages CMO). */ .content-title-actions .btn { background: transparent; border: 1px solid transparent; color: var(--accent, #39B54A); font-weight: 600; text-decoration: none; } .content-title-actions .btn:hover, .content-title-actions .btn:focus-visible { background: rgba(57,181,74,.10); border-color: rgba(57,181,74,.25); color: var(--accent-dark, #2c9c3c); } .content-title-actions .btn .fa-solid, .content-title-actions .btn .fa-regular { margin-right: 4px; } [data-theme="dark"] .content-title-actions .btn { color: #86efac; } [data-theme="dark"] .content-title-actions .btn:hover { background: rgba(57,181,74,.16); color: #a7f3c0; } /* ── Compagnies d'assurance en tile-view (redevance mensuelle par clinique) ── */ /* Nav mensuelle (style dashboard) injectée dans la colonne de recherche : on rend .lv-actions flex pour aligner [nav mois] [recherche] [+ nouvelle]. */ #insurances_list_mount .lv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ins-month-nav { flex-shrink: 0; } .insurance-tile .ins-avatar { background: rgba(57,181,74,.14); color: var(--accent, #39B54A); display: flex; align-items: center; justify-content: center; } /* Aligné à gauche (cohérent avec l'en-tête avatar+nom de la tuile). */ .insurance-tile .ins-redev { text-align: left; padding: 12px 2px 4px; } .insurance-tile .ins-redev-val { font-size: var(--font-size-xl); font-weight: 800; line-height: 1.1; color: var(--text-primary, var(--ink, #0f172a)); font-variant-numeric: tabular-nums; } .insurance-tile .ins-redev-val small { font-size: var(--font-size-base); font-weight: 600; color: var(--text-secondary, #64748b); } .insurance-tile .ins-redev-lbl { font-size: 11.5px; color: var(--text-secondary, #64748b); margin-top: 4px; } .insurance-tile .ins-redev-lbl .fa-solid { color: var(--accent, #39B54A); margin-right: 3px; } /* État zéro : montant muet « — », libellé italique, tuile légèrement atténuée. */ .insurance-tile .ins-redev-val.ins-redev-zero { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-secondary, #94a3b8); } .insurance-tile .ins-redev-lbl-zero { font-style: italic; } .insurance-tile--zero { opacity: .82; } /* Input search en état désactivé (quand bande visible) */ #patients_search:disabled, #patients_search_clear:disabled { background: var(--bg-content, #f1f5f9); cursor: not-allowed; opacity: 0.65; } /* ─── Menus déroulants — titres de section masqués ──────────────────────── */ #user_menu .dropdown-header { display: none; } /* Badge "500 / 74 891" — taille normale, pas tronqué */ .content-title .lv-count { white-space: nowrap; font-size: 12px; } /* ════════════════════════════════════════════════ Consultations — layout 2 colonnes 1/4 sidebar sticky (synthèse + mini-cal) 3/4 contenu défilant (liste des consultations) ════════════════════════════════════════════════ */ .consultations-layout { display: grid; grid-template-columns: 3fr 1fr; /* main à gauche, sidebar à droite */ gap: 20px; align-items: start; /* max-width retiré : hérite du cap global --app-max-w (1400px) sur #requested_content. Avant : cap dur 1100px qui créait une discordance visuelle avec les autres pages (plus étroit que dashboard, patients…). */ } /* Sidebar collée sous le menu (48 px) + 20 px de marge */ .consultations-sidebar { position: sticky; top: 68px; } /* Barre de synthèse — dans la sidebar, layout vertical */ .consultations-synthesis-bar { margin-top: 4px; margin-bottom: 16px; } .consultations-synthesis-bar h6 { color: var(--text-secondary, #475569); font-weight: 600; text-transform: capitalize; margin-bottom: 0; } /* ─── Mini calendrier flatpickr inline ────────────────────────── */ /* Container global — overrides .panel-section : pas de bg, pas de bordure */ .consultations-cal-panel { background: transparent; border: none; border-radius: 0; padding: 0; } /* Supprime box-shadow/border du calendar flottant — intégré */ .consultations-cal-panel .flatpickr-calendar { box-shadow: none !important; border: none !important; background: transparent !important; width: 100% !important; margin: 0; } /* ── Bloc 1 : sélecteur mois/année ── */ .consultations-cal-panel .flatpickr-months.cal-row-month { background: transparent !important; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; height: auto; display: flex; align-items: center; justify-content: center; position: static; } .consultations-cal-panel .flatpickr-month { background: transparent !important; color: #1e293b; position: static; width: 100%; height: auto; line-height: normal; display: flex; align-items: center; justify-content: center; } .consultations-cal-panel .flatpickr-current-month { position: static; width: 100%; font-size: var(--font-size-base); font-weight: 600; padding: 0; color: #1e293b; } /* Layout : [⟨] [ stack mois/année ] [⟩] Flèches centrées verticalement sur la hauteur totale du bloc */ .consultations-cal-panel .flatpickr-current-month.cal-stacked { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; height: auto !important; } .cal-date-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; /* 10px entre mois et année */ flex: 1; } .cal-month-wrap { width: 100%; text-align: center; } .cal-month-wrap .flatpickr-monthDropdown-months { text-align: center; text-align-last: center; /* centre l'option affichée */ text-transform: capitalize; /* "mai" → "Mai" */ background: transparent; border: none; color: #1e293b !important; font-weight: 600; font-size: var(--font-size-base); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background var(--motion-fast) var(--ease-standard); } .cal-month-wrap .flatpickr-monthDropdown-months:hover { background: #f1f5f9; } .cal-year-row { text-align: center; } .cal-year-row .numInputWrapper { display: inline-block; cursor: pointer; border-radius: 4px; } .cal-year-row .numInputWrapper:hover { background: #f1f5f9; } .cal-year-row .cur-year { text-align: center; background: transparent; border: none; color: #1e293b !important; font-weight: 600; font-size: var(--font-size-base); width: 60px; cursor: pointer; } .cal-year-row .numInputWrapper span { border-color: transparent; } /* Flèches prev/next jour — boutons circulaires */ .cal-day-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line, #e2e8f0); background: #ffffff; color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; transition: all var(--motion-fast) var(--ease-standard); } .cal-day-arrow:hover:not(:disabled) { background: #1e293b; color: #ffffff; border-color: #1e293b; } .cal-day-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .cal-day-arrow .fa-solid { font-size: 10px; } /* ── Bloc 2 : grille des jours ── */ .cal-row-days { position: relative; /* ancre pour .cal-scan-band et .cal-today-cursor */ border: 1px solid var(--line, #e2e8f0); border-radius: 8px; padding: 8px 6px 6px; overflow: hidden; } /* ── Bande/rail horizontal sur la rangée du jour sélectionné ── */ /* Fin rail translucide qui traverse la rangée comme une glissière physique sur un calendrier mural. Glisse verticalement (top) en ease-in-out quand l'utilisateur change de date. */ .cal-scan-band { position: absolute; left: -8px; right: -8px; /* déborde légèrement pour effet rail */ height: 0; /* fixée par JS = hauteur d'une rangée */ pointer-events: none; background: rgba(255, 255, 255, 0.35); border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.04); opacity: 0; transition: top 600ms cubic-bezier(0.4, 0, 0.2, 1), height 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; z-index: 0; } .cal-scan-band.cal-ready { opacity: 1; } [data-theme="dark"] .cal-scan-band.cal-ready { opacity: 0.2; } /* ── Curseur "marqueur calendrier" — cadre rouge plat ── */ /* Bordure rouge 3px, coins arrondis 4px, sans ombre. Glisse en ease-in-out quand on change de jour. */ .cal-today-cursor { position: absolute; width: 0; height: 0; /* dimensions fixées par JS */ border-radius: 4px; border: 3px solid #d62828; /* rouge vif */ background: transparent; pointer-events: none; opacity: 0; transition: top 600ms cubic-bezier(0.4, 0, 0.2, 1), left 600ms cubic-bezier(0.4, 0, 0.2, 1), width 600ms cubic-bezier(0.4, 0, 0.2, 1), height 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; z-index: 1; } .cal-today-cursor.cal-ready { opacity: 1; } /* Empilement : - bande/rail (z-index: 0) au fond - grille des jours + chiffres (z-index: 2) au milieu - curseur rouge (z-index: 10) AU-DESSUS de tout */ .consultations-cal-panel .flatpickr-rContainer { position: relative; z-index: 2; } .cal-today-cursor { z-index: 10 !important; } .consultations-cal-panel .flatpickr-rContainer { width: 100%; } .consultations-cal-panel .flatpickr-days, .consultations-cal-panel .dayContainer { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Jours : étirement uniforme + transition hover */ .consultations-cal-panel .flatpickr-day { max-width: none; flex: 1 1 14%; border-radius: 6px; transition: background-color 130ms ease, color 130ms ease, transform 130ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Palette noir/gris — supprime tout le teal ── */ /* Le jour sélectionné reste neutre : c'est le cadre rouge (.cal-today-cursor) qui le marque visuellement. Aucun fond sombre. */ .consultations-cal-panel .flatpickr-day.selected, .consultations-cal-panel .flatpickr-day.selected:hover, .consultations-cal-panel .flatpickr-day.selected:focus { background: transparent !important; border-color: transparent !important; color: #1e293b !important; font-weight: 700; font-size: 1.08em; } /* « Aujourd'hui » : petite pastille via ::before, chiffre blanc au-dessus */ .consultations-cal-panel .flatpickr-day.today, .consultations-cal-panel .flatpickr-day.today:hover, .consultations-cal-panel .flatpickr-day.today:focus { background: transparent !important; border-color: transparent !important; color: #ffffff !important; font-weight: 700; position: relative; z-index: 0; } .consultations-cal-panel .flatpickr-day.today::before { content: ''; position: absolute; inset: 5px; background: #1e293b; border-radius: 4px; z-index: -1; } /* Hover sur jour normal : léger scale + fond doux */ .consultations-cal-panel .flatpickr-day:hover:not(.selected):not(.today):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) { background: #f1f5f9 !important; border-color: #f1f5f9 !important; color: #1e293b !important; transform: scale(1.1); } /* Today garde son fond même au hover */ .consultations-cal-panel .flatpickr-day.today:hover { background: transparent !important; color: #ffffff !important; } /* Selected : légère amplification au hover */ .consultations-cal-panel .flatpickr-day.selected:hover { transform: scale(1.12); } /* Jours d'autres mois ne réagissent pas au hover */ .consultations-cal-panel .flatpickr-day.prevMonthDay:hover, .consultations-cal-panel .flatpickr-day.nextMonthDay:hover, .consultations-cal-panel .flatpickr-day.flatpickr-disabled:hover { background: transparent !important; cursor: default; } .consultations-cal-panel .flatpickr-weekday { color: #94a3b8 !important; font-weight: 600; font-size: 11px; letter-spacing: 0.02em; } .consultations-cal-panel .flatpickr-day.prevMonthDay, .consultations-cal-panel .flatpickr-day.nextMonthDay { color: #cbd5e1 !important; } .consultations-cal-panel .flatpickr-day.disabled, .consultations-cal-panel .flatpickr-day.disabled:hover { color: #e2e8f0 !important; } .cal-nav-row .flatpickr-prev-month:hover svg, .cal-nav-row .flatpickr-next-month:hover svg { fill: #1e293b; } /* ══ Dark mode — calendrier consultations ══════════════════════════════ */ /* Flèches prev/next jour */ [data-theme="dark"] .cal-day-arrow { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(232,234,255,0.55); } [data-theme="dark"] .cal-day-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: var(--text-primary, #e8eaff); } /* Jours normaux — hover */ [data-theme="dark"] .consultations-cal-panel .flatpickr-day:hover:not(.selected):not(.today):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) { background: rgba(255,255,255,0.07) !important; border-color: transparent !important; color: var(--text-primary, #e8eaff) !important; } /* Jour sélectionné — texte lisible en dark */ [data-theme="dark"] .consultations-cal-panel .flatpickr-day.selected, [data-theme="dark"] .consultations-cal-panel .flatpickr-day.selected:hover { color: var(--text-primary, #e8eaff) !important; } /* Aujourd'hui — pastille claire sur fond sombre + texte primaire */ [data-theme="dark"] .consultations-cal-panel .flatpickr-day.today, [data-theme="dark"] .consultations-cal-panel .flatpickr-day.today:hover, [data-theme="dark"] .consultations-cal-panel .flatpickr-day.today:focus { color: var(--text-primary, #e8eaff) !important; } [data-theme="dark"] .consultations-cal-panel .flatpickr-day.today::before { background: rgba(232,234,255,0.12); border: 1px solid rgba(232,234,255,0.22); } /* Curseur rouge — halo en dark pour le faire ressortir */ [data-theme="dark"] .cal-today-cursor { border-color: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.35), 0 0 3px rgba(239,68,68,0.2); } /* Entêtes jours + jours hors mois */ [data-theme="dark"] .consultations-cal-panel .flatpickr-weekday { color: rgba(232,234,255,0.3) !important; } [data-theme="dark"] .consultations-cal-panel .flatpickr-day.prevMonthDay, [data-theme="dark"] .consultations-cal-panel .flatpickr-day.nextMonthDay { color: rgba(232,234,255,0.18) !important; } [data-theme="dark"] .consultations-cal-panel .flatpickr-day.disabled { color: rgba(232,234,255,0.12) !important; } /* Conteneur jours — bordure et bg adaptés */ [data-theme="dark"] .cal-row-days { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } /* En-tête mois */ [data-theme="dark"] .cal-row-month { border-color: rgba(255,255,255,0.08) !important; } /* Responsive : sur mobile, la sidebar passe au-dessus (stacking) */ @media (max-width: 767.98px) { .consultations-layout { grid-template-columns: 1fr; } .consultations-sidebar { position: static; } } /* ════════════════════════════════════════════════ Patients — barre de progression de l'index Injectée à droite du champ de recherche du tile-view (.lv-actions > .lv-search + #plp_wrap) ════════════════════════════════════════════════ */ .plp-wrap { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; flex-shrink: 0; margin-left: auto; /* pousse la barre à droite dans .lv-actions */ } .plp-track { width: 72px; height: 3px; background: var(--line, #e2e8f0); border-radius: 2px; overflow: hidden; flex-shrink: 0; } .plp-fill { height: 100%; background: var(--btn-color, var(--accent, #39B54A)); border-radius: 2px; transition: width 0.5s ease; } .plp-text { font-size: 10.5px; color: var(--muted, #64748b); white-space: nowrap; font-variant-numeric: tabular-nums; } /* État "chargement terminé" — affiché 4s pour confirmer visuellement à l'utilisateur que tous ses patients sont prêts (surtout pour les petites cliniques où le load dure < 1s et la barre flashait sans être vue). */ .plp-wrap--done .plp-fill { background: #10b981; } .plp-wrap--done .plp-text { color: #10b981; font-weight: 600; } .plp-wrap--done .plp-text .fa-check { margin-right: 2px; } /* ── Barre d'outils du tableau patients ─────────────────────────────── Disposition en 3 zones : [clinique + compteur] à gauche, [chargement] au milieu, [recherche] à droite. La .lv-header du tile-view est déjà flex space-between ; on ré-affiche son titre interne (masqué par défaut car un titre de page existe au-dessus) pour porter le nom de clinique + compteur. */ #patients_list_mount .lv-title-wrap { display: flex !important; order: 0; } #patients_list_mount .lv-header > #plp_wrap { order: 1; flex: 1 1 auto; justify-content: center; margin: 0; } /* .lv-actions est flex:1 (list-view.css) → il prendrait toute la largeur et la recherche resterait collée à gauche. On l'empêche de grandir pour que le space-between de .lv-header la pousse à DROITE. */ #patients_list_mount .lv-actions { order: 2; flex: 0 0 auto; } /* Le compteur synchronisé dans le titre de PAGE devient redondant (il vit maintenant à gauche du tableau) → masqué uniquement sur la page patients. */ #requested_content:has(#patients_page) .content-title > [data-role="title-count"] { display: none; } /* ── Sélecteur de clinique EN LIGNE dans le titre de page ───────────── « Liste des patients [KIN ▾] » — codes courts, posé juste après le titre. */ .content-title .clinic-inline-picker { display: inline-flex; align-items: center; margin: 0 2px 0 10px; vertical-align: middle; } .content-title .clinic-inline-select { width: auto; min-width: 86px; padding-block: 2px; } /* ── Omnibox — recherche de dossier dans la BARRE SUPÉRIEURE (toast) ───── Une loupe parmi les contrôles (thème/recharger/imprimer) ; au clic, un champ se déroule EN LIGNE — la hauteur de la barre (48px) ne bouge pas. Les résultats tombent dans un panneau FIXE sous la barre : le toast est en overflow:hidden, donc le panneau est posé sur (et non dans la barre). */ .omni-shell { display: inline-flex; align-items: center; } /* Largeur ouverte pilotée en JS (inline px) — voir open_field/close_field. flex:0 0 auto → le champ ne rétrécit JAMAIS (sinon, item flex à min-width:auto ramené à 0 par overflow:hidden, il se faisait écraser à 0 quand la barre est serrée) ; c'est le titre central (flex:1) qui cède la place. ⚠ PAS de transition sur `width` ici : animer la largeur d'un item flex dont la base dépend de cette largeur la bloquait à 0. On ouvre net et on anime plutôt l'apparition du champ (opacity + glissement) — fiable. */ .omni-field { width: 0; flex: 0 0 auto; overflow: hidden; display: inline-flex; align-items: center; } .omni-input { width: 100%; height: 30px; line-height: 30px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: var(--text-on-dark, #fff); border-radius: 999px; padding: 0 12px; font-size: .85rem; outline: none; margin-right: 6px; } .omni-input::placeholder { color: rgba(255,255,255,.6); } .omni-input:focus { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.16); } #omni_toggle { cursor: pointer; } .omni-shell.omni-open #omni_toggle { color: var(--accent, #39B54A); } .omni-results { position: fixed; top: 52px; right: 16px; left: auto; width: 360px; max-width: 86vw; background: var(--paper, var(--bg-surface, #fff)); border: 1px solid var(--border, var(--line, #e2e8f0)); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.18); max-height: 64vh; overflow: auto; z-index: 1095; padding: .35rem; } .omni-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #94a3b8); padding: .45rem .6rem .2rem; font-weight: 600; } .omni-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px; color: var(--text-primary, var(--ink, #0f172a)); text-decoration: none; cursor: pointer; } .omni-item:hover, .omni-item:focus { background: var(--accent-soft, rgba(57,181,74,.08)); } .omni-item > .fa-folder-open { color: var(--accent, #39B54A); width: 18px; text-align: center; flex-shrink: 0; } .omni-main { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; } .omni-main strong { font-size: .9rem; color: var(--text-primary, var(--ink, #0f172a)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .omni-sub { font-size: .78rem; color: var(--text-secondary, var(--muted, #64748b)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .omni-badge { flex-shrink: 0; font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft, rgba(57,181,74,.12)); color: var(--accent, #39B54A); } .omni-empty { padding: .7rem; color: var(--muted, #64748b); font-size: .85rem; text-align: center; } @media (max-width: 575.98px) { .omni-results { top: 44px; right: 8px; width: calc(100vw - 16px); } } /* ── Enregistrements annulés / désactivés (status='0') ─────────────── */ tr.record-cancelled { opacity: 0.5; } tr.record-cancelled td { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); } tr.record-cancelled td:first-child { text-decoration: none; } /* N° reste lisible */ tr.record-cancelled .badge { text-decoration: none; } tr.record-cancelled .record_tools { text-decoration: none; } tr.record-cancelled .delete_data { text-decoration: none; opacity: 1; } /* ─── Dashboard — Cartes à onglets (Top spé / Top médecins) ────────────── Utilisé dans rprt_dashboard.php → build_tabbed_card(). Nav d'onglets dans le .g-card-head ; panels masqués via [hidden]. */ .dashboard-v3 .g-card-tabbed .g-card-head { flex-wrap: wrap; gap: 8px; row-gap: 6px; } .dashboard-v3 .g-tab-nav { display: inline-flex; gap: 2px; flex-wrap: wrap; background: rgba(0, 0, 0, 0.04); border-radius: 7px; padding: 2px; } .dashboard-v3 .g-tab-btn { appearance: none; background: transparent; border: 0; padding: 4px 10px; font-size: 11.5px; font-weight: 500; color: var(--mute, #64748b); border-radius: 5px; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; white-space: nowrap; line-height: 1.4; } .dashboard-v3 .g-tab-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text, #1e293b); } .dashboard-v3 .g-tab-btn.is-active { background: var(--bg-surface, #fff); color: var(--accent, #39B54A); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .dashboard-v3 .g-tab-panels { flex: 1; display: flex; flex-direction: column; } .dashboard-v3 .g-tab-panel { display: none; flex: 1; flex-direction: column; } .dashboard-v3 .g-tab-panel.is-active { display: flex; } .dashboard-v3 .g-tab-panel > .g-table { flex: 1; } .dashboard-v3 .g-tab-panel > .g-card-empty { flex: 1; } /* Mode sombre */ @media (prefers-color-scheme: dark) { .dashboard-v3 .g-tab-nav { background: rgba(255, 255, 255, 0.06); } .dashboard-v3 .g-tab-btn:hover { background: rgba(255, 255, 255, 0.08); } .dashboard-v3 .g-tab-btn.is-active { background: rgba(255, 255, 255, 0.1); color: #5ee5f5; } } /* ─── Sélecteur clinique multi-pages + mention dans le titre ───────────── Réutilise le style .g-clinic-toolbar du dashboard. Ajoute une mention discrète "(— Clinique X)" dans le titre de la page pour éviter à l'utilisateur global de se perdre quand il a filtré. */ .clinic-page-picker { margin-bottom: 12px; flex-wrap: wrap; /* sur mobile : label + select sur 2 lignes */ max-width: 100%; } .clinic-page-picker select { max-width: 100% !important; flex: 1; } @media (max-width: 575.98px) { .clinic-page-picker { gap: 4px; font-size: 12px; } .clinic-page-picker .g-clinic-toolbar-label { flex-basis: 100%; } } .clinic-title-suffix { font-size: 0.7em; font-weight: 500; color: var(--text-secondary, #64748b); margin-left: 6px; text-transform: none; letter-spacing: 0; } /* ─── Header de clinique dans la liste des consultations ──────────────── */ .clinic-section-header h5 { margin: 0; font-size: var(--font-size-lg); font-weight: 600; } .clinic-section { margin-bottom: 18px; } /* ─── Validation des champs requis (politique "bouton toujours actif") ──── Renforce le visuel Bootstrap .is-invalid pour les input-group des formulaires CMO (frm_new_*). Le bouton "Enregistrer" reste activé ; au clic, les champs manquants sont surlignés et un toast liste les erreurs (cf cmo_dev.js validate_form_fields). La classe est retirée dès saisie. */ .is-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.18) !important; animation: cmo-shake 0.32s ease-in-out; } .input-group:has(> .is-invalid) .input-group-text { border-color: #dc3545; color: #dc3545; } @keyframes cmo-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ─── Accessibilité : focus visible global (WCAG 2.4.7) ────────────────── Audit 2026-05-28 : seuls quelques boutons avaient un :focus-visible. On ajoute un anneau cohérent sur TOUS les éléments interactifs pour la navigation clavier. :focus-visible (pas :focus) → l'anneau n'apparaît qu'au clavier, pas au clic souris, donc pas de régression visuelle. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .lv-sortable:focus-visible, .g-tab-btn:focus-visible, .g-clinic-tab-btn:focus-visible, .registered_patient:focus-visible, .demo-user-row:focus-visible { outline: 2px solid var(--accent, #39B54A) !important; outline-offset: 2px !important; border-radius: 3px; } /* Ne jamais supprimer le focus sans alternative — annule les outline:none éparpillés (ex. #pwa_relogin_modal input) en rétablissant l'anneau clavier. */ input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px rgba(31, 180, 197, 0.18) !important; } /* ─── Dashboard : barre de chargement (convention iManage v3.4.7) ──────── Fixée en bas de page, visible tant que les données ne sont pas arrivées. Pas affichée pendant les auto-refresh silencieux (le JS ne l'appelle que sur chargement explicite). */ .dashboard-loader { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px 16px; background: linear-gradient(to top, var(--bg-surface, #fff) 78%, transparent); text-align: center; z-index: 1090; transition: opacity .25s ease, transform .25s ease; } .dashboard-loader[hidden] { opacity: 0; transform: translateY(8px); pointer-events: none; display: block; /* override [hidden]{display:none} pour animer le fade */ visibility: hidden; } .dashboard-loader-bar { height: 3px; background: rgba(0,0,0,.06); border-radius: 999px; overflow: hidden; max-width: 480px; margin: 0 auto 8px; } .dashboard-loader-fill { height: 100%; width: 40%; background: var(--accent, #39B54A); border-radius: 999px; animation: dashboard-loader-slide 1.4s ease-in-out infinite; } .dashboard-loader.is-error .dashboard-loader-fill { animation: none; width: 100%; background: var(--bad, #dc2626); } .dashboard-loader.is-error .dashboard-loader-msg { color: var(--bad, #dc2626); } @keyframes dashboard-loader-slide { 0% { margin-left: 0; width: 15%; } 50% { margin-left: 42%; width: 58%; } 100% { margin-left: 100%; width: 15%; } } .dashboard-loader-msg { font-size: 12px; color: var(--mute, #64748b); margin: 0; letter-spacing: .02em; } @media (prefers-reduced-motion: reduce) { /* Umbrella WCAG 2.3.3 (Animation from Interactions) : neutralise TOUTES les animations/transitions/défilement animé pour les utilisateurs qui le demandent (vestibulaire). Durée ~0 (et non 0) pour que les évènements transitionend/animationend continuent de se déclencher — certains composants JS (drawers, modales) les attendent pour enchaîner. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .dashboard-loader-fill { animation-duration: 0s; width: 100%; margin-left: 0; } } @media (prefers-color-scheme: dark) { .dashboard-loader { background: linear-gradient(to top, #0f172a 78%, transparent); } .dashboard-loader-bar { background: rgba(255,255,255,.08); } } /* ─── Cibles tactiles ≥44px sur mobile (WCAG 2.5.5 / a11y) ─────────────── Les icônes d'action (modifier/annuler/supprimer/facture) et les onglets font <44px → difficiles à toucher sur mobile. On agrandit leur zone cliquable uniquement sur écrans tactiles étroits, sans gonfler le desktop. */ @media (max-width: 768px) { .record_tools .update_data, .record_tools .cancel_data, .record_tools .delete_data, .record_tools .print_invoice, .lv-table .update_data, .lv-table .cancel_data, .lv-table .delete_data { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin: 0 1px; } /* Onglets (top spé/médecins, cliniques) : hauteur tactile confortable */ .g-tab-btn, .g-clinic-tab-btn, .clinic-page-picker .form-select { min-height: 40px; } /* Boutons d'action de titre : pleine hauteur tactile */ .content-title-actions .btn-sm { min-height: 40px; display: inline-flex; align-items: center; } } /* ─── Colonne "Actions" dédiée (fin de tableau) ────────────────────────── Les icônes d'action vivent dans leur propre colonne (plus dans le N°). Espacement régulier + zone cliquable confortable. Icônes 100% Font Awesome. */ .lv-actions-cell { display: inline-flex; align-items: center; justify-content: center; gap: 14px; } .lv-actions-cell .update_data, .lv-actions-cell .cancel_data, .lv-actions-cell .delete_data, .lv-actions-cell .print_invoice, .lv-actions-cell .btn-notify-rdv { cursor: pointer; font-size: 15px; color: var(--text-secondary, #64748b); transition: color .15s, transform .12s; padding: 4px; border-radius: 4px; } .lv-actions-cell .update_data:hover { color: var(--accent, #39B54A); transform: translateY(-1px); } .lv-actions-cell .print_invoice:hover { color: var(--accent, #39B54A); transform: translateY(-1px); } .lv-actions-cell .btn-notify-rdv:hover { color: var(--accent, #39B54A); transform: translateY(-1px); } .lv-actions-cell .cancel_data { color: var(--warn, #d97706); } /* désactiver = orange (réversible) */ .lv-actions-cell .cancel_data:hover { color: #b45309; transform: translateY(-1px); } .lv-actions-cell .delete_data { color: var(--bad, #dc2626); } /* supprimer = rouge (définitif) */ .lv-actions-cell .delete_data:hover { color: #991b1b; transform: translateY(-1px); } /* ════════════════════════════════════════════════════════════════════ Fiche patient (composant MÉTIER CMO) — rendu pleine page dans le container, avec fil d'Ariane. Regroupe identité, dossiers (multi- clinique) et activité. Dark-aware via tokens (--paper/--ink/--accent…). ════════════════════════════════════════════════════════════════════ */ /* Alignement global : AUCUNE page ne se recadre elle-même. Tout le monde hérite du cap commun --app-max-w + --app-px posé par .container-fluid (imanage.css) → bords toujours alignés avec le menu, zéro marge interne supplémentaire. (Avant : cap 1080px centré → la fiche patient était plus étroite que le menu.) */ .patient-page { max-width: none; margin: 0; } /* ── Footer aligné sur toute la largeur de l'app (CMO) ────────────────── Le composant page-footer pose un padding externe de 16px sur #page_footer. La navbar / le header, eux, n'ont AUCUN padding externe : leur seul espacement vient du .container-fluid (--app-px). On annule donc ce 16px en CMO pour que le .container-fluid du footer (activé via init.js) se centre exactement comme la navbar → bord gauche du logo Digits = bord gauche du menu, rien ne déborde du cadre. (Override d'alignement, non reproductible via variables de thème.) */ #page_footer { padding-inline: 0; } /* Logo Digits TOUJOURS visible pour TOUS les utilisateurs (branding CMO). Le composant demo-switch (partagé) masque son déclencheur via set_enabled(false) (display:none inline) dès que la cible n'est pas demo-admin — ce qui faisait disparaître le logo après une bascule (ex. vers Ismail). On force l'affichage ; la cliquabilité reste, elle, réservée aux sessions démo via .no-demo. */ #page_footer #demo_switch_trigger.footer-brand { display: flex !important; } /* ── Bandeau utilisateur : rôle + clinique sur une seule ligne ────────── « Gérant(e) - CMO Brazzaville » — la clinique en petit/atténué APRÈS le rôle, séparée par un tiret. #ua_clinic est un élément propre à CMO (ajouté dans index.php), donc stylé ici (le composant partagé n'en sait rien). */ .ua-jobline { display: block; line-height: 1.3; } .ua-jobline .ua-job { display: inline; } #ua_clinic.ua-clinic { display: inline; font-size: var(--font-size-xs); color: var(--muted); opacity: .8; } #ua_clinic.ua-clinic:not(:empty)::before { content: " - "; color: var(--muted); opacity: .8; } /* Champ de recherche verrouillé pendant le chargement des patients : visuel neutre + curseur d'attente (le placeholder boucle « Patientez svp … »). */ #patients_list_mount .tv-search-input:disabled { cursor: wait; opacity: .75; font-style: italic; } .pp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .pp-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; background: var(--accent-soft, rgba(57,181,74,.12)); color: var(--accent, #39B54A); flex-shrink: 0; } .pp-avatar.tv-card-avatar--m { background: rgba(59,130,246,.14); color: #2563eb; } .pp-avatar.tv-card-avatar--f { background: rgba(236,72,153,.14); color: #db2777; } .pp-head-main { flex: 1; min-width: 0; } .pp-name { font-size: var(--font-size-xl); font-weight: 700; margin: 0; color: var(--text-primary, var(--ink, #0f172a)); } .pp-head-sub { color: var(--text-secondary, var(--muted, #64748b)); font-size: var(--font-size-base); margin-top: 3px; } .pp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; } .pp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .pp-kpi { background: var(--paper, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .pp-kpi-ico { font-size: 15px; color: var(--accent, #39B54A); margin-bottom: 4px; } .pp-kpi-val { font-size: var(--font-size-xl); font-weight: 700; line-height: 1; color: var(--text-primary, var(--ink, #0f172a)); } .pp-kpi-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, var(--muted, #64748b)); } .pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .pp-card { background: var(--paper, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 18px 20px; } .pp-card--wide { grid-column: 1 / -1; } .pp-card-title { font-size: var(--font-size-menu); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, var(--muted, #64748b)); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .pp-card-title .fa-solid { color: var(--accent, #39B54A); } .pp-rows { display: flex; flex-direction: column; gap: 10px; } .pp-row { display: flex; align-items: baseline; gap: 10px; font-size: var(--font-size-base); } .pp-row-ico { width: 16px; text-align: center; color: var(--text-light, var(--muted, #94a3b8)); font-size: 12px; flex-shrink: 0; } .pp-row-lbl { color: var(--text-secondary, var(--muted, #64748b)); min-width: 92px; flex-shrink: 0; } .pp-row-val { color: var(--text-primary, var(--ink, #0f172a)); font-weight: 500; } .pp-row-val a { color: var(--accent, #39B54A); text-decoration: none; } .pp-folders { display: flex; flex-direction: column; gap: 12px; } .pp-folder { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 12px 14px; } .pp-folder-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .pp-clinic-badge { background: var(--accent, #39B54A); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: .03em; } .pp-folder-num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, var(--ink, #0f172a)); } .pp-folder-archive { font-size: 12px; color: var(--text-secondary, var(--muted, #64748b)); } .pp-folder-line { font-size: var(--font-size-base); color: var(--text-secondary, var(--ink-soft, #475569)); margin-top: 3px; } .pp-folder-line .fa-solid { color: var(--text-light, var(--muted, #94a3b8)); width: 14px; text-align: center; } .pp-folder-foot { font-size: 12.5px; color: var(--text-secondary, var(--muted, #64748b)); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft, var(--line, #f1f5f9)); } .pp-badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 600; margin-left: 8px; } .pp-badge--warn { background: rgba(234,179,8,.18); color: #a16207; } .pp-chart-wrap { position: relative; height: 200px; margin-bottom: 14px; } .pp-table-wrap { overflow-x: auto; } .pp-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); } .pp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary, var(--muted, #64748b)); padding: 6px 10px; border-bottom: 1px solid var(--line, #e2e8f0); } .pp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft, var(--line, #f1f5f9)); color: var(--text-primary, var(--ink, #0f172a)); } .pp-table tbody tr:last-child td { border-bottom: none; } .pp-table .pp-mono { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-secondary, var(--muted, #64748b)); } @media (max-width: 760px) { .pp-grid { grid-template-columns: 1fr; } .pp-kpis { grid-template-columns: 1fr 1fr; } } /* ════════════════════════════════════════════════════════════════════ Imprimante VIRTUELLE — aperçu ticket 80mm (composant métier CMO). Permet de tester l'impression sans matériel ni QZ Tray : le ticket décodé s'affiche comme un reçu (papier blanc/noir, réaliste) puis peut être imprimé vers n'importe quelle imprimante / PDF. ════════════════════════════════════════════════════════════════════ */ .vt-overlay { position: fixed; inset: 0; z-index: 20000; background: rgba(8,9,15,.66); display: flex; align-items: center; justify-content: center; padding: 20px; } .vt-modal { background: var(--paper, #fff); color: var(--text-primary, var(--ink, #0f172a)); border-radius: 14px; width: 440px; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.4)); overflow: hidden; } .vt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line, #e2e8f0); } .vt-title { font-weight: 600; font-size: var(--font-size-lg); } .vt-title .fa-solid { color: var(--accent, #39B54A); margin-right: 6px; } .vt-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-secondary, var(--muted, #64748b)); padding: 0 4px; } .vt-paper-wrap { padding: 18px; overflow-y: auto; background: var(--canvas, #0d0e17); display: flex; justify-content: center; } .vt-paper { background: #fff; color: #111; font: 12px/1.4 'Courier New', Courier, monospace; white-space: pre-wrap; word-break: break-word; width: 300px; max-width: 100%; margin: 0; padding: 16px 14px; border-radius: 4px; box-shadow: 0 2px 14px rgba(0,0,0,.25); } .vt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line, #e2e8f0); flex-wrap: wrap; } .vt-note { font-size: 11.5px; color: var(--text-secondary, var(--muted, #64748b)); flex: 1; min-width: 180px; } .vt-note .fa-solid { color: var(--accent, #39B54A); } .vt-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } /* Le bouton « Fermer » héritait d'une police trop grande → on force une taille normale et cohérente sur les boutons du pied de la modale. */ .vt-foot .btn, .vt-actions .btn { font-size: var(--font-size-base) !important; line-height: 1.4; padding: 6px 14px; } /* ── Diagnostic QZ Tray (réutilise la coque .vt-overlay/.vt-modal) ──── */ .qzd-modal { width: 460px; } .qzd-body { padding: 16px 18px; overflow-y: auto; } .qzd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .qzd-step { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-base); color: var(--text-primary, var(--ink, #0f172a)); } .qzd-ico { width: 18px; text-align: center; color: var(--text-light, var(--muted, #94a3b8)); flex-shrink: 0; } .qzd-step.is-ok .qzd-ico { color: #22c55e; } .qzd-step.is-fail .qzd-ico { color: #ef4444; } .qzd-step.is-warn .qzd-ico { color: #eab308; } .qzd-step.is-run .qzd-ico { color: var(--accent, #39B54A); } .qzd-label { flex: 1; min-width: 0; } .qzd-detail { font-size: 12px; color: var(--text-secondary, var(--muted, #64748b)); text-align: right; flex-shrink: 0; max-width: 45%; } .qzd-download { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e2e8f0); } .qzd-dl-title { font-weight: 600; margin: 0 0 6px; } .qzd-dl-title .fa-solid { color: var(--accent, #39B54A); } .qzd-dl-help { font-size: 12.5px; color: var(--text-secondary, var(--muted, #64748b)); margin: 0 0 10px; line-height: 1.45; } .qzd-dl-btns { display: flex; gap: 8px; flex-wrap: wrap; } .qzd-dl-alt { margin-top: 9px; font-size: 11.5px; color: var(--text-secondary, var(--muted, #64748b)); } .qzd-dl-alt a { color: var(--accent, #39B54A); } #qzd_summary .fa-solid { margin-right: 4px; } #qzd_summary .text-success { color: #22c55e; } #qzd_summary .text-danger { color: #ef4444; } /* ── Schéma corporel cliquable — historique patient (localisation pathologie) ── Composant métier CMO. Dark-aware via tokens (--accent, --bs-*). Layout 1/3–2/3 géré côté markup (colonnes Bootstrap). */ .body-map { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; } .body-map-figure { width: 100%; max-width: 260px; margin: 0 auto; } .body-map-svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; max-height: 56vh; } /* trait du corps (dessin original vectorisé) — dark-aware */ .body-map-svg .body-reference, .body-map-svg .body-reference * { pointer-events: none; } .body-map-svg .body-reference path { fill: var(--text-secondary, #5f6f80); } /* zones cliquables (transparentes, surlignées au survol/sélection ; clip silhouette) */ .body-map-svg .zone { fill: rgba(57, 181, 74, 0.001); stroke: transparent; stroke-width: 1.6; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .1s ease; } .body-map-svg .zone:hover, .body-map-svg .zone:focus { fill: rgba(57, 181, 74, 0.22); stroke: var(--accent-dark, #2c9c3c); outline: none; } .body-map-svg .zone.selected { fill: rgba(57, 181, 74, 0.42); stroke: var(--accent-dark, #2c9c3c); } .body-map-svg .zone.selected:hover { fill: rgba(57, 181, 74, 0.55); } .body-map-legend { text-align: center; } /* Sélecteurs segmentés (Sexe / Vue) */ .bm-seg { display: inline-flex; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 9px; overflow: hidden; background: var(--paper, #fff); } .bm-seg button { border: 0; background: transparent; padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #6b7280); cursor: pointer; } .bm-seg button.on { background: var(--accent, #39B54A); color: #fff; } .bm-seg button:not(.on):hover { background: var(--accent-soft, #e3f5e6); color: var(--accent-dark, #2c9c3c); } /* Puces des zones sélectionnées (sous le schéma + récap des entrées) */ .bz-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft, #e3f5e6); color: var(--accent-dark, #2c9c3c); border: 1px solid var(--accent, #39B54A); border-radius: 999px; padding: 1px 9px; font-size: 12px; margin: 0 4px 4px 0; white-space: nowrap; } .bz-chip .fa-solid { font-size: 10px; } /* Liste des entrées d'historique de localisation */ .bh-entry { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--paper, #fff); } .bh-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .bh-entry-report { white-space: pre-wrap; font-size: var(--font-size-base); color: var(--text-primary, var(--ink, #222)); margin: 4px 0 0; } .bh-model-badge { font-size: 11px; }