/* MedRec DeDup - Client-side styles */

body { background-color: #f8f9fa; }
.hero {
  background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
  color: white; padding: 2rem 0; margin-bottom: 2rem;
}
.hero .subtitle { opacity: 0.75; }
.hero .privacy-badge {
  display: inline-block; background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 20px;
  padding: 4px 14px; font-size: 0.8rem; margin-top: 0.5rem;
}

.card { border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Drop zones */
.drop-zone {
  border: 3px dashed #ccc; border-radius: 12px;
  padding: 3rem 1.5rem; text-align: center;
  transition: all 0.3s; cursor: pointer;
  min-height: 200px; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: #2980b9; background-color: #ebf5fb;
}
.drop-zone .icon { font-size: 3rem; color: #bbb; }
.drop-zone.has-file { border-color: #27ae60; background-color: #eafaf1; }
.drop-zone.has-file .icon { color: #27ae60; }

/* Action cards */
.action-card { border-left: 5px solid; border-radius: 8px; }
.action-card.action-new { border-left-color: #e74c3c; }
.action-card.action-skip { border-left-color: #27ae60; }
.action-card.action-review { border-left-color: #f39c12; }
.action-header { display: flex; align-items: center; gap: 12px; margin-bottom: 0.75rem; }
.action-icon { font-size: 2rem; line-height: 1; }
.action-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.action-subtitle { color: #666; font-size: 0.9rem; margin: 0; }
.action-body { padding-left: 3rem; }

/* Page map */
.page-map { display: flex; flex-wrap: wrap; gap: 4px; }
.page-cell {
  width: 44px; height: 56px; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.1s;
}
.page-cell:hover { transform: scale(1.15); z-index: 1; }
.page-cell .pg { font-size: 13px; font-weight: 700; }
.page-cell.matched { background: #d4efdf; border-color: #27ae60; color: #1e8449; }
.page-cell.unique  { background: #fadbd8; border-color: #e74c3c; color: #c0392b; }
.page-cell.review  { background: #fdebd0; border-color: #f39c12; color: #d68910; }
.page-cell.unknown { background: #eee; border-color: #ccc; color: #999; }
.page-legend { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.page-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.page-legend-swatch { width: 16px; height: 16px; border-radius: 3px; }

/* Duplicate table */
.dupe-row { background-color: #f0faf3; }
.dupe-row:hover { background-color: #d5f5e3 !important; }
.dupe-row td { vertical-align: middle; }
.page-badge-a { background-color: #2980b9; font-size: 0.85rem; }
.page-badge-b { background-color: #8e44ad; font-size: 0.85rem; }
.badge-tier1 { background-color: #27ae60; }
.badge-tier2 { background-color: #2ecc71; }
.badge-tier3 { background-color: #f39c12; }

/* Buttons */
.btn-download { font-size: 1.1rem; padding: 0.6rem 1.5rem; }
.btn-download-new { background-color: #e74c3c; border-color: #e74c3c; color: #fff; }
.btn-download-new:hover { background-color: #c0392b; border-color: #c0392b; color: #fff; }
.btn-download-review { background-color: #f39c12; border-color: #f39c12; color: #fff; }
.btn-download-review:hover { background-color: #d68910; border-color: #d68910; color: #fff; }

/* Viewer */
.viewer-frame {
  width: 100%; height: 800px;
  border-radius: 6px;
}
.viewer-frame-a { border: 2px solid #2980b9; }
.viewer-frame-b { border: 2px solid #8e44ad; }

/* Progress */
.progress-container { max-width: 600px; margin: 0 auto; }