:root {
  --maroon: #7b1728;
  --maroon-dark: #5a1020;
  --teal: #5baa8a;
  --teal-dark: #43856a;
  --navy: #1a3a5c;
  --navy-light: #2a5080;
  --light: #f5f6f8;
  --white: #ffffff;
  --border: #e0e4ea;
  --text: #222;
  --muted: #6b7280;
  --radius: 6px;
  --shadow: 0 2px 8px rgba(0,0,0,0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--light); color: var(--text); font-size: 15px; }
a { color: var(--maroon); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── SIDEBAR NAV ── */
body { display: flex; min-height: 100vh; }

.topbar {
  background: var(--maroon);
  color: white;
  display: flex;
  flex-direction: column;
  width: 200px;
  min-width: 200px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 100;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  padding: 24px 0 16px;
  overflow-y: auto;
}
.topbar-brand {
  font-size: 1.1em; font-weight: 700; color: white;
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 12px;
}
.topbar-brand svg { margin-bottom: 4px; }
.topbar-brand .brand-logo { width: 100%; max-width: 150px; height: auto; margin-bottom: 6px; }
.login-header .brand-logo { width: 100%; max-width: 210px; height: auto; margin: 0 auto 2px; display: block; }
.topbar-brand .tagline { font-size: 0.92em; color: #ffffff; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.topbar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 0 10px; }
.topbar-nav a {
  color: rgba(255,255,255,0.85); padding: 9px 12px;
  border-radius: var(--radius); font-size: 0.9em;
  transition: background 0.15s; display: block;
}
.topbar-nav a:hover, .topbar-nav a.active { background: rgba(255,255,255,0.15); color: white; text-decoration: none; }
.topbar-right {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 18px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 12px;
  color: rgba(255,255,255,0.7); font-size: 0.82em;
}
.topbar-right span { color: rgba(255,255,255,0.9); font-weight: 500; }
.topbar-right a { color: rgba(255,255,255,0.65); }
.topbar-right a:hover { color: white; text-decoration: none; }

/* ── LAYOUT ── */
.main-content { flex: 1; min-width: 0; }
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 1.5em; color: var(--navy); }
.page-header p { color: var(--muted); margin-top: 4px; }

/* ── CARDS ── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-header h2 { font-size: 1em; font-weight: 600; color: var(--navy); }
.card-body { padding: 20px; }

/* ── STATS ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); }
/* The dashboard tiles are links through to the matching Documents list.
   Anchors bring their own underline and colour, so reset both, and give a
   clear hover so it's discoverable that the numbers are clickable. */
a.stat-card { display: block; text-decoration: none; color: inherit;
              transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s; }
a.stat-card:hover { border-color: var(--maroon); box-shadow: 0 3px 10px rgba(0,0,0,0.12);
                    transform: translateY(-2px); }
a.stat-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
a.stat-card:hover .stat-label { color: var(--navy); }
.stat-card .stat-num { font-size: 2.2em; font-weight: 700; color: var(--maroon); line-height: 1; }
.stat-card .stat-label { color: var(--muted); font-size: 0.85em; margin-top: 6px; }
.stat-card.teal .stat-num { color: var(--teal-dark); }
.stat-card.navy .stat-num { color: var(--navy); }
.stat-card.gray .stat-num { color: var(--muted); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius);
  font-size: 0.9em; font-weight: 500; cursor: pointer;
  border: none; transition: filter 0.15s, transform 0.1s;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--maroon); color: white; }
.btn-teal { background: var(--teal); color: white; }
.btn-navy { background: var(--navy); color: white; }
.btn-outline { background: white; color: var(--maroon); border: 1px solid var(--maroon); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-danger { background: #dc2626; color: white; }
.btn-sm { padding: 5px 12px; font-size: 0.82em; }
.btn-lg { padding: 12px 28px; font-size: 1.05em; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ── FORMS ── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 5px; font-size: 0.9em; color: var(--navy); }
.form-control {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.92em; line-height: 1.4;
  background: white; transition: border-color 0.15s;
}
.form-control:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(123,23,40,0.12); }
select.form-control { cursor: pointer; }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
/* Fixed layout keeps column widths from stretching to fit content. Without it
   one very long document name widens its column and pushes the Actions column
   off the right edge, where it can only be reached by scrolling sideways. */
.table-fixed { table-layout: fixed; }
.cell-wrap { overflow-wrap: break-word; word-break: break-word; }
/* Clamp very long names to a couple of lines so one 130-character filename
   can't make its row tower over the rest. Full text stays in the title
   tooltip, and on the document's own pages. */
.clamp-2, .clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-1 { -webkit-line-clamp: 1; }
th { padding: 10px 14px; text-align: left; font-size: 0.82em; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--border); }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:hover td { background: #fafbfc; }
tr:last-child td { border-bottom: none; }

/* ── STATUS BADGES ── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-draft { background: #f3f4f6; color: #6b7280; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-partial { background: #dbeafe; color: #1d4ed8; }
.badge-completed { background: #d1fae5; color: #065f46; }
.badge-void { background: #fee2e2; color: #991b1b; }
.badge-signed { background: #d1fae5; color: #065f46; }
.badge-declined { background: #fee2e2; color: #991b1b; }
.badge-viewed { background: #e0e7ff; color: #3730a3; }
.badge-uploaded { background: #f0f9ff; color: #0369a1; }
.badge-sent { background: #fef3c7; color: #92400e; }
.badge-downloaded { background: #f3f4f6; color: #374151; }
/* Amazon SES delivery feedback (audit trail actions) */
.badge-email_bounce { background: #fee2e2; color: #991b1b; }
.badge-email_complaint { background: #fee2e2; color: #991b1b; }
.badge-email_reject { background: #fee2e2; color: #991b1b; }
/* Reminders gave up after 30 days and the sender was told to phone instead */
.badge-reminders_expired { background: #fef3c7; color: #92400e; }
/* Staff opened the document to look at it (distinct from a signer viewing it) */
.badge-previewed { background: #f0f9ff; color: #0369a1; }

/* ── Radio buttons on the signing page ──
   Sized in % of the placed box so it stays centred whatever box the preparer
   drew, and looks like the printed circle it usually sits on top of. */
.radio-dot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid #7b1728;
  background: rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
}
.radio-dot .radio-inner {
  width: 52%; height: 52%; border-radius: 50%;
  background: transparent;
  transition: background 0.1s;
}
.radio-dot.chosen { border-color: #1a3a5c; background: white; }
.radio-dot.chosen .radio-inner { background: #1a3a5c; }
.sign-field:hover .radio-dot { border-color: #1a3a5c; }

/* Document name in the Documents and Dashboard lists — opens the document.
   Underlines only on hover so a long list of filenames stays readable. */
.doc-link { text-decoration: none; color: var(--navy); display: block; }
.doc-link:hover { text-decoration: underline; color: var(--maroon); }

/* Per-signer mail status shown beside the signer's name */
.mail-flag {
  display: inline-block;
  font-size: 0.86em;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: help;
}
.mail-flag-bad  { background: #fee2e2; color: #991b1b; }
.mail-flag-warn { background: #fef3c7; color: #92400e; }
.mail-flag-ok   { background: #d1fae5; color: #065f46; }
.badge-voided { background: #fee2e2; color: #991b1b; }
.badge-completed { background: #d1fae5; color: #065f46; }

/* ── ALERTS ── */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9em; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ── UPLOAD DROP ZONE ── */
.drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 48px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--maroon); background: rgba(123,23,40,0.04); }
.drop-zone .drop-icon { font-size: 3em; margin-bottom: 12px; }
.drop-zone p { color: var(--muted); }
.drop-zone p strong { color: var(--maroon); }
#file-input { display: none; }

/* ── PREPARE / SIGN PAGE ── */
.prepare-layout { display: flex; gap: 20px; align-items: flex-start; }
.prepare-sidebar {
  width: 280px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
  position: sticky; top: 70px;
}
.prepare-sidebar h3 { font-size: 0.9em; color: var(--navy); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.prepare-main { flex: 1; min-width: 0; }

.page-container { position: relative; margin-bottom: 16px; display: block; width: fit-content; border: 1px solid var(--border); box-shadow: var(--shadow); line-height: 0; }
.page-image { display: block; max-width: 100%; height: auto; }
.page-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; z-index: 10; }

.field-box {
  position: absolute; border: 2px solid; border-radius: 3px;
  /* pointer-events: none lets mouse events pass through to the drawing overlay */
  pointer-events: none;
  user-select: none;
}
.field-label {
  position: absolute; top: -1px; left: -1px;
  font-size: 10px; color: white; padding: 1px 5px; border-radius: 3px 0 3px 0;
  white-space: nowrap; pointer-events: none;
}
.delete-field {
  position: absolute; top: 0; right: 0;
  background: rgba(220,38,38,0.85); color: white;
  border: none; cursor: pointer; width: 20px; height: 20px;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  border-radius: 0 3px 0 3px;
  /* Re-enable pointer events only on the delete button */
  pointer-events: all;
  z-index: 20;
}
.selection-box {
  position: absolute; border: 2px dashed; pointer-events: none;
  background: rgba(123,23,40,0.08); z-index: 15;
}

/* ── SIGN PAGE ── */
.sign-field {
  position: absolute; border: 2px solid var(--maroon);
  border-radius: 3px; background: rgba(123,23,40,0.06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.sign-field:hover { background: rgba(123,23,40,0.12); }
.sign-field.signed { border-color: var(--teal); background: rgba(91,170,138,0.08); cursor: default; }
.sign-field.auto-filled { border-color: var(--navy); background: rgba(26,58,92,0.06); cursor: default; }
.sign-prompt { font-size: 11px; line-height: 1; color: var(--maroon); font-weight: 600; text-align: center; pointer-events: none; padding: 0 2px; }
/* Completed value shown inside a field box — must fit short boxes without clipping */
.field-value {
  font-size: 11px; line-height: 1; padding: 0 3px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.sign-field.guide-pulse { animation: guidePulse 0.8s ease-in-out 3; }
@keyframes guidePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,23,40,0); }
  50%      { box-shadow: 0 0 0 6px rgba(123,23,40,0.35); }
}
.date-value { font-size: 11px; line-height: 1; color: var(--navy); pointer-events: none; }

/* ── PROGRESS BAR ── */
.progress-bar-wrap { background: var(--border); border-radius: 20px; height: 8px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--teal); border-radius: 20px; transition: width 0.3s; }

/* ── MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 500;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: white; border-radius: 8px; width: 560px; max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25); overflow: hidden;
}
.modal-header {
  background: var(--maroon); color: white;
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: 1em; }
.modal-close { background: none; border: none; color: white; font-size: 1.3em; cursor: pointer; padding: 0 4px; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
#tab-draw.active, #tab-type.active { background: #7b1728 !important; color: white !important; }

#sig-canvas {
  border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; height: 180px; touch-action: none; cursor: crosshair;
  background: white;
}

/* ── SIGNER ROW ── */
.signer-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding: 12px; background: var(--light); border-radius: var(--radius); }
.signer-row .signer-color { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

/* ── FIELD TYPE PILLS ── */
.field-type-group { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.field-type-btn {
  padding: 6px 12px; border-radius: 20px; font-size: 0.82em; font-weight: 500;
  border: 1px solid var(--border); background: white; cursor: pointer; color: var(--text);
  transition: all 0.15s;
}
.field-type-btn.active { background: var(--maroon); color: white; border-color: var(--maroon); }

/* ── LOGIN ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--light); }
.login-card { width: 380px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden; }
.login-header { background: white; padding: 28px 30px 20px; text-align: center; border-bottom: 1px solid #eef0f3; }
.login-header h1 { color: var(--maroon); font-size: 1.3em; }
.login-header p { color: var(--navy); font-size: 0.85em; font-weight: 500; margin-top: 6px; }
.login-header p.app-name {
  font-family: Georgia, 'Times New Roman', serif; font-size: 1.45em; font-weight: 700;
  color: var(--navy); letter-spacing: 0.5px; margin-top: 10px;
}
.login-body { background: white; padding: 28px 30px; }

/* ── COMPLETE PAGE ── */
.complete-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--light); }
.complete-card { width: 480px; max-width: 95vw; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.12); background: white; text-align: center; }
.complete-icon { font-size: 4em; margin: 30px 0 10px; }
.complete-card h2 { color: var(--navy); margin-bottom: 12px; }
.complete-card p { color: var(--muted); padding: 0 30px 24px; }

/* ── AUDIT ── */
.audit-row-uploaded { color: #0369a1; }
.audit-row-signed { color: #065f46; }
.audit-row-completed { color: #065f46; font-weight: 600; }
.audit-row-voided { color: #991b1b; }
.audit-row-declined { color: #dc2626; }

/* ── MISC ── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty-state .empty-icon { font-size: 3em; margin-bottom: 12px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.text-muted { color: var(--muted); }
.text-small { font-size: 0.85em; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .prepare-layout { flex-direction: column; }
  .prepare-sidebar { width: 100%; position: static; }
}

/* Guidance for the selected field type in the prepare sidebar. Always visible
   rather than a hover tooltip: the person who needs it is the one confident
   they already know what the button does, and hover doesn't exist on a tablet. */
.field-hint {
  margin-top: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 0.79em;
  line-height: 1.55;
  color: #92400e;
}
.field-hint strong { color: #7c2d12; }