/* Zoodiag-shared — design patterns extracted from vet field-entry & consultation Reusable across all roles (inseminateur, equinevet, osteo, marechal, etc.). Class prefix: .zd-* (Zoodiag). Depends on tokens.css + tokens-premium.css. */ /* ────────────────────────────────────────────────────────────── */ /* 1. Fullscreen workspace mode */ /* Add class `{role}-mode` to to hide app chrome. */ /* ────────────────────────────────────────────────────────────── */ body.inseminateur-mode .app-sidebar, body.equinevet-mode .app-sidebar, body.osteo-mode .app-sidebar, body.marechal-mode .app-sidebar { display: none !important; } body.inseminateur-mode .app-topbar, body.equinevet-mode .app-topbar, body.osteo-mode .app-topbar, body.marechal-mode .app-topbar { display: none !important; } body.inseminateur-mode .app-bottom-nav, body.equinevet-mode .app-bottom-nav, body.osteo-mode .app-bottom-nav, body.marechal-mode .app-bottom-nav { display: none !important; } body.inseminateur-mode .app-main, body.equinevet-mode .app-main, body.osteo-mode .app-main, body.marechal-mode .app-main { margin-left: 0 !important; max-width: 100% !important; width: 100% !important; } body.inseminateur-mode .app-content, body.equinevet-mode .app-content, body.osteo-mode .app-content, body.marechal-mode .app-content { padding: 0 !important; max-width: 100% !important; } body.inseminateur-mode, body.equinevet-mode, body.osteo-mode, body.marechal-mode { overflow: hidden; } .zd-workspace { display: flex; flex-direction: column; height: 100vh; background: var(--color-background); } .zd-topbar { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--space-4); padding: 0 var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle, var(--color-neutral-200)); min-height: 60px; flex-shrink: 0; } .zd-back-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--color-text-secondary, var(--text-secondary)); text-decoration: none; background: transparent; border: none; cursor: pointer; transition: all var(--transition-fast); } .zd-back-btn:hover { background: var(--color-neutral-100); color: var(--color-text-primary, var(--text-primary)); } .zd-tabs { display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .zd-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); height: 60px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--color-text-secondary, var(--text-secondary)); font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .zd-tab:hover { color: var(--color-text-primary, var(--text-primary)); } .zd-tab.active { color: var(--color-primary); font-weight: var(--font-semibold); border-bottom-color: var(--color-primary); } .zd-tab.completed { color: var(--color-text-primary, var(--text-primary)); } .zd-tab i[data-lucide] { width: 16px; height: 16px; } .zd-topbar-actions { display: inline-flex; align-items: center; gap: var(--space-2); } .zd-topbar-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--color-neutral-100); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-secondary, var(--text-secondary)); font-variant-numeric: tabular-nums; } .zd-topbar-pill.primary { color: var(--color-primary); background: var(--color-primary-50); } .zd-topbar-pill.warn { background: var(--color-warning-light); color: #92400e; } .zd-topbar-pill.danger { background: var(--color-error-light); color: var(--color-error-dark); } .zd-body { flex: 1; display: grid; grid-template-columns: 260px 1fr; min-height: 0; } .zd-rail { background: var(--color-surface); border-right: 1px solid var(--color-border-subtle, var(--color-neutral-200)); padding: var(--space-5) var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); } .zd-rail-title { font-family: var(--font-display, var(--font-primary)); font-size: var(--text-md); font-weight: var(--font-semibold); letter-spacing: -0.01em; color: var(--color-text-primary, var(--text-primary)); } .zd-rail-date { font-size: var(--text-xs); color: var(--color-text-secondary, var(--text-secondary)); font-variant-numeric: tabular-nums; } .zd-rail-section { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle, var(--color-neutral-200)); display: flex; flex-direction: column; gap: 6px; } .zd-rail-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-semibold); color: var(--color-text-secondary, var(--text-secondary)); margin-bottom: 2px; } .zd-rail-attrs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .zd-rail-attrs li { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-primary, var(--text-primary)); } .zd-rail-attrs .label { color: var(--color-text-secondary, var(--text-secondary)); } .zd-canvas { overflow-y: auto; padding: var(--space-6) var(--space-8); min-width: 0; -webkit-overflow-scrolling: touch; } .zd-canvas-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } /* ────────────────────────────────────────────────────────────── */ /* 2. Section cards (Zoodiag consult-section parity) */ /* ────────────────────────────────────────────────────────────── */ .zd-section { background: white; border: 1px solid var(--color-border-subtle, #ECEAE3); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(15, 23, 33, 0.04), 0 4px 12px -4px rgba(15, 23, 33, 0.05), var(--inset-highlight, inset 0 1px 0 rgba(255,255,255,0.6)); padding: var(--space-5) var(--space-6); transition: box-shadow var(--transition-base, 250ms ease); } .zd-section:hover { box-shadow: 0 1px 2px rgba(15, 23, 33, 0.04), 0 8px 20px -6px rgba(15, 23, 33, 0.08), var(--inset-highlight, inset 0 1px 0 rgba(255,255,255,0.6)); } .zd-section-h { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle, #ECEAE3); } .zd-section-h.clickable { cursor: pointer; } .zd-section.collapsed .zd-section-body { display: none; } .zd-section.collapsed .zd-section-h { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .zd-section-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display, var(--font-primary)); font-size: var(--text-md); font-weight: 700; color: #1B7A4A; margin: 0; letter-spacing: -0.015em; } .zd-section-title i[data-lucide] { width: 20px; height: 20px; color: #1B7A4A; stroke-width: 2.2; } .zd-section-count { padding: 4px 12px; background: var(--color-primary-50); color: var(--color-primary); border: 1px solid var(--color-primary-100); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; } .zd-section-body { padding: 0; } .zd-subsection-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: var(--space-2); } /* ────────────────────────────────────────────────────────────── */ /* 3. Filter pills (species, category, etc.) */ /* ────────────────────────────────────────────────────────────── */ .zd-filter-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); } .zd-filter-pill { padding: 8px 14px; background: white; border: 1.5px solid var(--color-border-default, var(--color-neutral-300)); border-radius: var(--radius-lg); font-family: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .zd-filter-pill:hover { border-color: var(--color-primary); color: var(--color-primary); } .zd-filter-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: white; } /* ────────────────────────────────────────────────────────────── */ /* 4. Hero search (ChatGPT-style autocomplete) */ /* ────────────────────────────────────────────────────────────── */ .zd-hero { position: relative; display: flex; align-items: center; background: white; border: 1px solid #e5e7eb; border-radius: 28px; padding: 10px 14px 10px 20px; transition: border-color .15s, box-shadow .15s; } .zd-hero:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(27,122,74,.10), 0 12px 32px -10px rgba(27,122,74,.18); } .zd-hero-ico { width: 18px; height: 18px; color: var(--text-secondary); margin-right: 12px; flex-shrink: 0; } .zd-hero-input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 18px; font-weight: 600; background: transparent; color: var(--text-primary); min-height: 36px; } .zd-hero-input::placeholder { color: var(--color-neutral-400); font-weight: 500; } .zd-hero-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: white; border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-lg); box-shadow: 0 12px 32px -8px rgba(15, 23, 33, 0.18); z-index: 10; display: none; overflow: hidden; max-height: 320px; overflow-y: auto; } .zd-hero-dropdown.visible { display: block; } .zd-hero-dropdown-item { padding: 12px var(--space-4); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 1px solid #f3f4f6; } .zd-hero-dropdown-item:last-child { border-bottom: none; } .zd-hero-dropdown-item:hover { background: var(--color-primary-50); color: var(--color-primary); } /* ────────────────────────────────────────────────────────────── */ /* 5. Vital input groups (label / box / unit) */ /* ────────────────────────────────────────────────────────────── */ .zd-vitals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .zd-vital { display: flex; flex-direction: column; gap: 4px; padding: 0; border: none; background: transparent; cursor: pointer; font-family: inherit; text-align: center; } .zd-vital-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .zd-vital-value { padding: var(--space-2) var(--space-3); border: 1px solid #d1d5db; border-radius: var(--radius-md); background: white; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); text-align: center; min-height: 40px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transition: border-color var(--transition-fast); } .zd-vital:hover .zd-vital-value { border-color: var(--color-primary); } .zd-vital.filled .zd-vital-value { border-color: var(--color-primary); background: var(--color-primary-50); } .zd-vital:not(.filled) .zd-vital-value { color: var(--color-neutral-400); font-weight: 500; } /* ────────────────────────────────────────────────────────────── */ /* 6. FAB (sticky bottom-right action) */ /* ────────────────────────────────────────────────────────────── */ .zd-fab { position: fixed; bottom: 24px; right: 24px; min-width: 80px; height: 80px; padding: 0 20px; border-radius: var(--radius-circle); background: linear-gradient(180deg, #22C55E, var(--color-success) 35%, #15803d); color: white; border: none; box-shadow: 0 1px 2px rgba(15, 23, 33, 0.12), 0 12px 28px -6px rgba(22, 163, 74, 0.45), 0 0 0 4px var(--color-background, rgba(255,255,255,0.95)), var(--inset-highlight-strong, inset 0 1px 0 rgba(255,255,255,0.85)); font-family: inherit; font-size: 12px; font-weight: var(--font-semibold); letter-spacing: 0.02em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; z-index: calc(var(--z-sticky) + 10); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .zd-fab.primary { background: linear-gradient(180deg, var(--color-primary-light, #4CAF7D), var(--color-primary) 35%, var(--color-primary-hover, #166440)); box-shadow: 0 1px 2px rgba(15, 23, 33, 0.12), 0 12px 28px -6px var(--color-primary-glow, rgba(27, 122, 74, 0.4)), 0 0 0 4px var(--color-background, rgba(255,255,255,0.95)), var(--inset-highlight-strong, inset 0 1px 0 rgba(255,255,255,0.85)); } .zd-fab:active { transform: scale(0.96); } .zd-fab i[data-lucide] { width: 24px; height: 24px; } .zd-fab-label { letter-spacing: 0.04em; } /* Blocked FAB — shows a hint instead of validating */ .zd-fab.zd-fab-blocked { background: linear-gradient(180deg, #fb923c, #ea580c 35%, #c2410c); box-shadow: 0 1px 2px rgba(15, 23, 33, 0.12), 0 12px 28px -6px rgba(234, 88, 12, 0.4), 0 0 0 4px var(--color-background, rgba(255,255,255,0.95)); padding: 0 22px; min-width: auto; } .zd-fab.zd-fab-blocked .zd-fab-label { display: inline-block; font-size: 11px; text-transform: none; letter-spacing: 0; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Progress indicator (top of canvas) */ .zd-progress { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-neutral-100); border-radius: var(--radius-pill); margin-bottom: var(--space-3); flex-wrap: wrap; } .zd-progress-step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); } .zd-progress-step.done { color: var(--color-primary); } .zd-progress-dot { width: 22px; height: 22px; border-radius: 50%; background: white; border: 1.5px solid var(--color-neutral-300); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); transition: all var(--transition-fast); } .zd-progress-step.done .zd-progress-dot { background: var(--color-primary); border-color: var(--color-primary); color: white; } .zd-progress-connector { flex: 0 0 24px; height: 2px; background: var(--color-neutral-300); border-radius: var(--radius-pill); } /* Accordion (progressive disclosure of advanced fields) */ .zd-accordion { border-top: 1px solid var(--color-border-subtle, var(--color-neutral-200)); padding-top: var(--space-3); } .zd-accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); user-select: none; } .zd-accordion > summary::-webkit-details-marker { display: none; } .zd-accordion[open] > summary { color: var(--color-primary); } .zd-accordion[open] .zd-accordion-chev { transform: rotate(90deg); } .zd-accordion-chev { width: 16px; height: 16px; transition: transform var(--transition-fast); color: currentColor; } .zd-accordion-meta { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-secondary); font-style: italic; } /* Section marked as complete — subtle green check on title */ .zd-section.zd-section-complete .zd-section-title::after { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--color-primary); color: white; border-radius: 50%; font-size: 11px; font-weight: 700; margin-left: 6px; } /* ────────────────────────────────────────────────────────────── */ /* 7. Bottom sheets (numpad, picker, search) */ /* ────────────────────────────────────────────────────────────── */ .zd-sheet { position: fixed; inset: 0; z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .zd-sheet.on { opacity: 1; pointer-events: auto; } .zd-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 33, 0.55); } .zd-sheet-card { position: absolute; bottom: 0; left: 0; right: 0; max-height: 80vh; background: white; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-3) var(--space-4) var(--space-5); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2); transform: translateY(40px); transition: transform 250ms ease; display: flex; flex-direction: column; gap: var(--space-3); } .zd-sheet.on .zd-sheet-card { transform: translateY(0); } @media (min-width: 720px) { .zd-sheet-card { left: 50%; right: auto; transform: translate(-50%, 40px); width: 440px; max-width: 92vw; bottom: 24px; border-radius: var(--radius-xl); } .zd-sheet.on .zd-sheet-card { transform: translate(-50%, 0); } } .zd-sheet-handle { width: 40px; height: 4px; background: var(--color-neutral-300); border-radius: var(--radius-pill); margin: 0 auto var(--space-2); } .zd-sheet-title { font-size: var(--text-md); font-weight: var(--font-semibold); text-align: center; } .zd-sheet-actions { display: flex; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-neutral-200); } .zd-sheet-actions .btn { flex: 1; } /* ────────────────────────────────────────────────────────────── */ /* 8. Patient/subject rail elements (shared with vet) */ /* ────────────────────────────────────────────────────────────── */ .zd-rail-subject { display: flex; align-items: center; gap: var(--space-3); } .zd-rail-subject-emoji { font-size: 28px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-50); color: var(--color-primary); border-radius: var(--radius-md); flex-shrink: 0; } .zd-rail-subject-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary, var(--text-primary)); line-height: 1.2; } .zd-rail-subject-meta { font-size: var(--text-xs); color: var(--color-text-secondary, var(--text-secondary)); margin-top: 2px; } .zd-rail-pills { display: flex; flex-wrap: wrap; gap: 4px; } .zd-rail-pill { padding: 3px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--font-semibold); background: var(--color-neutral-100); color: var(--color-text-secondary, var(--text-secondary)); border: 1px solid var(--color-border-subtle, var(--color-neutral-200)); } .zd-rail-pill.warn { background: var(--color-warning-light); color: #92400e; border-color: #fde68a; } .zd-rail-pill.ok { background: var(--color-primary-50); color: var(--color-primary); border-color: var(--color-primary-100); } .zd-rail-pill.info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } /* ────────────────────────────────────────────────────────────── */ /* 9. Responsive — collapse rail on small screens */ /* ────────────────────────────────────────────────────────────── */ @media (max-width: 880px) { .zd-body { grid-template-columns: 1fr; } .zd-rail { position: fixed; top: 60px; left: 0; bottom: 0; width: 280px; max-width: 85vw; z-index: calc(var(--z-sticky) + 5); transform: translateX(-100%); transition: transform 250ms ease; box-shadow: 0 10px 30px rgba(15, 23, 33, 0.18); display: flex; } .zd-rail.open { transform: translateX(0); } .zd-rail-backdrop { position: fixed; inset: 60px 0 0 0; background: rgba(15, 23, 33, 0.4); z-index: calc(var(--z-sticky) + 4); opacity: 0; pointer-events: none; transition: opacity 250ms ease; } .zd-rail-backdrop.open { opacity: 1; pointer-events: auto; } .zd-topbar { grid-template-columns: 40px 40px 1fr auto; gap: var(--space-2); padding: 0 var(--space-3); } .zd-rail-toggle { display: inline-flex !important; } .zd-tab { padding: 0 var(--space-2); font-size: var(--text-xs); } .zd-canvas { padding: var(--space-3); } .zd-section { padding: var(--space-4); border-radius: var(--radius-lg); } } @media (max-width: 600px) { .zd-tab span { display: none; } .zd-tab { padding: 0 10px; } .zd-fab { width: 68px; height: 68px; bottom: 16px; right: 16px; padding: 0; } .zd-fab .zd-fab-label { display: none; } } /* The rail-toggle button is only visible on mobile */ .zd-rail-toggle { display: none; } /* ────────────────────────────────────────────────────────────── */ /* Role-specific helpers used in osteo/marechal/inseminateur */ /* ────────────────────────────────────────────────────────────── */ .os-zone, .ia-intervention-pick { display: block; padding: 12px; background: white; border: 1.5px solid var(--color-border-default, var(--color-neutral-300)); border-radius: var(--radius-md); transition: border-color var(--transition-fast), background var(--transition-fast); cursor: pointer; width: 100%; font-family: inherit; text-align: left; } .os-zone:hover, .ia-intervention-pick:hover { border-color: var(--color-primary); } .os-zone.on, .ia-intervention-pick.on { border-color: var(--color-primary); background: var(--color-primary-50); } .ia-intervention-pick { display: block; } .mr-photo-slot { width: 100%; background: white; border: 1.5px dashed var(--color-border-default, var(--color-neutral-300)); border-radius: var(--radius-md); padding: 14px; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-height: 110px; justify-content: center; transition: border-color var(--transition-fast), background var(--transition-fast); } .mr-photo-slot:hover { border-color: var(--color-primary); } .mr-photo-slot.filled { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-50); padding: 8px; } .mr-photo-slot.filled > div:first-child { width: 100%; height: 80px; }