# Signature Overlay - Visual Layout Guide

## 📐 How the Overlay Works

### Layer Structure (Z-Index)

```
┌─────────────────────────────────────────┐
│  Layer 2 (z-index: 2) - TOP             │
│  ┌───────────────────────────┐          │
│  │                           │          │
│  │   Signature Image         │          │ ← Floats on top
│  │   (position: absolute)    │          │
│  └───────────────────────────┘          │
├─────────────────────────────────────────┤
│  Layer 1 (z-index: 1) - BOTTOM          │
│  ┌───────────────────────────┐          │
│  │  Dr. James Wilson, MD     │          │ ← Behind signature
│  │  ─────────────────────    │          │
│  │  (position: relative)     │          │
│  └───────────────────────────┘          │
└─────────────────────────────────────────┘
```

## 🎨 Visual Representation

### Complete Signature Block

```
Electronically Signed By:

┌─────────────────────────────────────┐
│                                     │
│         J. Wilson  ← Signature      │
│        ___________                  │
│       /                             │
│      /  (overlays the name below)   │
│     /___________________________    │
│  ──────────────────────────────     │ ← Signature line
│  Dr. James Wilson, MD               │ ← Printed name (partially under signature)
│  ──────────────────────────────     │
│                                     │
│  January 20, 2026 at 1:14 PM       │ ← Date below
└─────────────────────────────────────┘
```

## 📏 Dimensions & Spacing

```
    ↓ top: -15px (signature floats up)
    ┌──────────────────┐
    │                  │
    │  [Signature]     │  ← 70px max height
    │                  │     250px max width
    └──────────────────┘
         ↓ 
    ─────────────────────  ← 1px border line
    Dr. James Wilson, MD   ← Name text
    ─────────────────────
         ↓ margin-top: 8px
    Jan 20, 2026 1:14 PM   ← Date text
```

## 🖼️ Side-by-Side Comparison

### OLD LAYOUT (Stacked)
```
┌────────────────────┐
│ Signed By:         │
│ Dr. James Wilson   │
│ Jan 20, 2026       │
│                    │
│ ┌────────────────┐ │
│ │                │ │
│ │  [Signature]   │ │
│ │                │ │
│ └────────────────┘ │
└────────────────────┘
   ↑ Signature below
```

### NEW LAYOUT (Overlaid) ✅
```
┌────────────────────┐
│ Signed By:         │
│    [Signature]     │ ← Overlays
│  ───────────────   │    the name
│ Dr. James Wilson   │
│  ───────────────   │
│ Jan 20, 2026       │
└────────────────────┘
   ↑ Professional look
```

## 💻 HTML DOM Structure

```
<div class="signature-overlay-container">     ← Container (relative)
    │
    ├── <div class="signature-overlay">       ← Layer 2 (absolute)
    │      └── <img class="signature-image-overlay">
    │
    └── <div class="prescriber-name-line">    ← Layer 1 (relative)
           ├── <div class="prescriber-name-text">
           │      Dr. James Wilson, MD
           │
           └── <div class="signature-line">
                  ─────────────────
</div>
```

## 🎯 CSS Positioning Breakdown

### Container
```css
.signature-overlay-container {
    position: relative;      /* Establishes positioning context */
    min-width: 300px;       /* Ensures enough space */
    margin-top: 0.5rem;     /* Space from "Signed By:" label */
}
```

### Signature (Top Layer)
```css
.signature-overlay {
    position: absolute;      /* Removes from flow, floats */
    top: -15px;             /* Positions above name */
    left: 0;                /* Aligns to left */
    z-index: 2;             /* On top */
}
```

### Name Block (Bottom Layer)
```css
.prescriber-name-line {
    position: relative;      /* Stays in flow */
    z-index: 1;             /* Behind signature */
    padding-top: 35px;      /* Space for signature above */
}
```

## 📱 Responsive Behavior

### Desktop (1920px)
```
Electronically Signed By:
       [Wide Signature - 250px]
    ────────────────────────────
    Dr. James Wilson, MD
    ────────────────────────────
```

### Tablet (768px)
```
Electronically Signed By:
    [Medium Signature - 250px]
   ──────────────────────────
   Dr. James Wilson, MD
   ──────────────────────────
```

### Mobile (375px)
```
Electronically Signed By:
  [Scaled Signature]
 ────────────────────
 Dr. James Wilson, MD
 ────────────────────
```

## 🖨️ Print Appearance

When printed, the signature will appear **exactly as shown on screen**:

```
═══════════════════════════════════════

ELECTRONICALLY SIGNED BY:

      [Handwritten signature]
    ──────────────────────────
    Dr. James Wilson, MD
    ──────────────────────────

    January 20, 2026 at 1:14 PM

═══════════════════════════════════════
```

## ✅ Visual Checklist

When viewing a prescription, you should see:

- [x] "Electronically Signed By:" label at top
- [x] Signature image overlaying the name area
- [x] Signature line (underline) visible
- [x] Prescriber name readable below/through signature
- [x] Date below the signature block
- [x] Professional, document-like appearance

## 🎨 Color & Styling

```
┌────────────────────────────────────┐
│ Electronically Signed By:          │ ← #6c757d (muted gray)
│                                    │
│      J. Wilson                     │ ← Signature (actual image)
│ ────────────────────────────────   │ ← #6c757d (1px border)
│ Dr. James Wilson, MD               │ ← #212529 (dark text)
│ ────────────────────────────────   │
│                                    │
│ January 20, 2026 at 1:14 PM       │ ← #6c757d (muted gray)
└────────────────────────────────────┘
```

## 🔄 Flow Visualization

```
User uploads signature → Session stores path → Doctor approves Rx
                                                     ↓
                                           Prescription created
                                                     ↓
                                           User views eRX
                                                     ↓
                                    ┌────────────────────────┐
                                    │ Signature overlay HTML │
                                    │ renders with CSS       │
                                    └────────────────────────┘
                                                     ↓
                                    ┌────────────────────────┐
                                    │ Signature appears ON   │
                                    │ top of printed name    │
                                    └────────────────────────┘
```

## 🆚 Fallback (No Signature)

When no signature is uploaded:

```
┌────────────────────────────────────┐
│ Electronically Signed By:          │
│                                    │
│ Dr. James Wilson, MD               │
│ ──────────────────────────────     │ ← Empty line
│ Digital signature on file          │ ← Fallback text
│                                    │
│ January 20, 2026 at 1:14 PM       │
└────────────────────────────────────┘
```

## 📐 Technical Measurements

| Property | Value | Purpose |
|----------|-------|---------|
| Container min-width | 300px | Ensures space for signature |
| Signature max-width | 250px | Prevents oversized signatures |
| Signature max-height | 70px | Keeps reasonable size |
| Signature top offset | -15px | Floats signature up |
| Name padding-top | 35px | Creates space for signature |
| Z-index (signature) | 2 | Ensures overlay |
| Z-index (name) | 1 | Stays behind |

## 🎭 Real-World Analogy

Think of it like signing a physical document:

1. **Print the name** → Prescriber name with line
2. **Sign over the name** → Signature image positioned on top
3. **Date below** → Date and time

Just like you would sign a paper prescription! ✍️

---

**Last Updated**: January 20, 2026  
**Feature Version**: 1.1.0  
**Layout Type**: Overlay (CSS Positioned)