/* PDF Tools by eTop Technology - Client-side styles */

/* Newtown-like heading font (Nunito is a close web-safe match) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

body { background-color: #f8f9fa; }

h1, h2, h3, h4, h5, h6, .card-title {
  font-family: 'Nunito', sans-serif;
}

.hero {
  background: linear-gradient(135deg, #00548B 0%, #4A7628 100%);
  color: white; padding: 2rem 0; margin-bottom: 2rem;
}
.hero h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
.hero .subtitle { opacity: 0.85; font-size: 1.1rem; }
.hero-logo {
  height: 56px; width: auto;
  filter: brightness(0) invert(1);
}
.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.75rem;
}

.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: #00548B; background-color: #e8f0f7;
}
.drop-zone .icon { font-size: 3rem; color: #bbb; }
.drop-zone.has-file { border-color: #77BC1F; background-color: #f2fbe6; }
.drop-zone.has-file .icon { color: #77BC1F; }

/* 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: #00548B; 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; }

/* Primary buttons - eTop blue */
.btn-primary {
  background-color: #00548B; border-color: #00548B;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #003d66; border-color: #003d66;
}
.btn-outline-primary {
  color: #00548B; border-color: #00548B;
}
.btn-outline-primary:hover {
  background-color: #00548B; border-color: #00548B; color: #fff;
}

/* 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 #00548B; }
.viewer-frame-b { border: 2px solid #8e44ad; }

/* Progress */
.progress-container { max-width: 600px; margin: 0 auto; }
.progress-bar.bg-primary { background-color: #00548B !important; }

/* Mode tabs - eTop green accent */
.mode-tabs .nav-link {
  color: #00548B; font-weight: 600; font-size: 1.05rem;
  border: none; padding: 0.6rem 1.5rem;
}
.mode-tabs .nav-link.active {
  color: #4A7628; border-bottom: 3px solid #77BC1F; background: transparent;
}
.mode-tabs .nav-link:hover:not(.active) { color: #4A7628; }

/* Split mode */
.quick-pick-group { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-pick-btn {
  border: 2px solid #dee2e6; border-radius: 8px; padding: 0.4rem 1rem;
  background: #fff; cursor: pointer; font-weight: 600; transition: all 0.2s;
}
.quick-pick-btn:hover { border-color: #00548B; color: #00548B; }
.quick-pick-btn.active { border-color: #00548B; background: #e8f0f7; color: #00548B; }

.chunk-table tbody tr { transition: background 0.15s; }
.chunk-table tbody tr:hover { background-color: #e8f0f7; }
.chunk-table .badge { font-size: 0.8rem; }

.split-info-badge {
  display: inline-block; background: #f0f4f8; border-radius: 6px;
  padding: 2px 10px; font-size: 0.85rem; color: #555;
}

.zip-progress { max-width: 400px; }

/* ============================================================ */
/* Combine mode                                                  */
/* ============================================================ */

.combine-file-list {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 600px; margin: 0 auto;
}
.combine-file-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
  padding: 0.6rem 1rem; transition: background 0.15s;
}
.combine-file-item:hover { background: #f8f9fa; }
.combine-file-num {
  font-weight: 700; color: #00548B; min-width: 28px; text-align: center;
}
.combine-file-name {
  flex: 1; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.combine-file-size {
  color: #888; font-size: 0.85rem; min-width: 70px; text-align: right;
}
.combine-file-actions {
  display: flex; gap: 4px;
}
.combine-file-actions button {
  border: 1px solid #dee2e6; background: #fff; border-radius: 4px;
  width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 14px;
  transition: all 0.15s; padding: 0;
}
.combine-file-actions button:hover {
  border-color: #00548B; color: #00548B; background: #e8f0f7;
}
.combine-file-actions button.remove-btn:hover {
  border-color: #e74c3c; color: #e74c3c; background: #fef0ef;
}

/* ============================================================ */
/* Footer                                                        */
/* ============================================================ */

.site-footer {
  background: #f0f0f0; border-top: 1px solid #ddd;
  padding: 1.25rem 0; margin-top: 3rem;
  color: #555; font-size: 0.9rem;
}
.footer-logo {
  height: 28px; width: auto; opacity: 0.8;
}