* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background: #f5f6fa; color: #333; }

/* Login */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-card { background: #fff; border-radius: 12px; padding: 48px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.login-card h1 { font-size: 24px; margin-bottom: 8px; color: #1a1a2e; }
.login-card p { color: #666; margin-bottom: 24px; }

/* Buttons */
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.15s; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-sm { padding: 6px 14px; font-size: 13px; background: #e5e7eb; color: #374151; }
.btn-sm:hover { background: #d1d5db; }
.btn-danger { background: #ef4444; color: #fff; padding: 6px 14px; font-size: 13px; }
.btn-danger:hover { background: #dc2626; }

/* Header */
header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-left h1 { font-size: 18px; color: #1a1a2e; }
.stats { font-size: 13px; color: #6b7280; }
.header-right { display: flex; align-items: center; gap: 12px; }
.user-name { font-size: 13px; color: #6b7280; }

/* Top Nav */
.top-nav { display: flex; gap: 2px; padding: 8px 24px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.nav-btn { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: #6b7280; background: transparent; transition: all 0.15s; }
.nav-btn:hover { background: #f3f4f6; color: #374151; }
.nav-btn.active { background: #4f46e5; color: #fff; }

/* Search */
.search-bar { display: flex; gap: 8px; padding: 16px 24px; background: #fff; border-bottom: 1px solid #e5e7eb; align-items: center; }
.search-bar input[type="text"] { flex: 1; padding: 10px 16px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; outline: none; }
.search-bar input[type="text"]:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.search-bar select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; background: #fff; }
.deep-search-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; cursor: pointer; white-space: nowrap; }
.deep-search-toggle input { cursor: pointer; }

/* Tabs */
.tabs-row { display: flex; align-items: center; padding: 12px 24px; background: #fff; border-bottom: 1px solid #e5e7eb; gap: 12px; }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tab { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #6b7280; transition: all 0.15s; white-space: nowrap; }
.tab:hover { background: #f3f4f6; color: #374151; }
.tab.active { background: #4f46e5; color: #fff; }
.tab .count { font-weight: 400; opacity: 0.7; margin-left: 4px; }

/* Results — FIX #2: horizontal scroll for many columns */
.results { padding: 16px 24px; }
.results-header { font-size: 14px; color: #6b7280; margin-bottom: 12px; }
.table-wrapper { overflow-x: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
table { width: 100%; border-collapse: collapse; background: #fff; min-width: max-content; }
th { text-align: left; padding: 10px 14px; background: #f9fafb; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #f3f4f6; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr:hover { background: #f9fafb; cursor: pointer; }
.empty-state { text-align: center; padding: 60px; color: #9ca3af; }

/* Pagination — FIX #1: sticky at bottom */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 16px; position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e5e7eb; z-index: 10; box-shadow: 0 -2px 6px rgba(0,0,0,0.05); }
.pagination button { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; font-size: 13px; }
.pagination button:hover { background: #f3f4f6; }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .page-info { font-size: 13px; color: #6b7280; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; border-radius: 12px; width: 90%; max-width: 900px; max-height: 85vh; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
.modal-header h2 { font-size: 16px; }
.json-view { flex: 1; overflow: auto; padding: 16px 20px; font-size: 12px; line-height: 1.6; background: #1e1e2e; color: #cdd6f4; border-radius: 0 0 12px 12px; white-space: pre-wrap; word-break: break-all; }

/* Loading */
.loading { text-align: center; padding: 40px; color: #6b7280; }

/* ── Sync Monitor ────────────────────────────────────────────── */
.sync-container { padding: 24px; max-width: 1200px; margin: 0 auto; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h2 { font-size: 16px; font-weight: 600; color: #1a1a2e; }

.sync-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; }
.sync-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; transition: box-shadow 0.15s; }
.sync-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.sync-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sync-card-header h3 { font-size: 15px; font-weight: 600; color: #1a1a2e; text-transform: capitalize; }
.sync-card-stat { font-size: 28px; font-weight: 700; color: #4f46e5; line-height: 1; }
.sync-card-detail { font-size: 12px; color: #9ca3af; margin-top: 6px; line-height: 1.6; }
.sync-card-detail span { color: #374151; font-weight: 500; }

.sync-section { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; margin-bottom: 24px; }
.sync-section h3 { font-size: 14px; font-weight: 600; color: #1a1a2e; margin-bottom: 12px; }
.sync-section table { box-shadow: none; border-radius: 0; min-width: auto; }
.sync-section table th { background: #f9fafb; }
.sync-section table tr { cursor: default; }

.status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.status-completed { background: #d1fae5; color: #065f46; }
.status-in_progress, .status-in-progress { background: #dbeafe; color: #1e40af; }
.status-paused { background: #fef3c7; color: #92400e; }
.status-failed { background: #fee2e2; color: #991b1b; }

/* ── Column Chooser ──────────────────────────────────────────── */
.column-chooser-modal { max-width: 600px; max-height: 80vh; }
.column-chooser-body { display: flex; flex-direction: column; max-height: calc(80vh - 60px); }
.column-search { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.column-search input { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; }
.column-search input:focus { border-color: #4f46e5; }
.column-list { flex: 1; overflow-y: auto; padding: 8px 16px; max-height: 400px; }
.column-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.column-item:hover { background: #f3f4f6; }
.column-item input[type="checkbox"] { cursor: pointer; }
.column-item.hidden { display: none; }
.column-status { padding: 10px 16px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #6b7280; }
.column-warn { color: #d97706; font-weight: 500; }

/* ── Data Quality ────────────────────────────────────────────── */
.quality-container { padding: 24px; max-width: 1200px; margin: 0 auto; }
.quality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.quality-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; }
.quality-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.quality-card-header h3 { font-size: 15px; font-weight: 600; text-transform: capitalize; color: #1a1a2e; }
.quality-grade { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 16px; font-weight: 700; }
.grade-A { background: #d1fae5; color: #065f46; }
.grade-B { background: #dbeafe; color: #1e40af; }
.grade-C { background: #fef3c7; color: #92400e; }
.grade-D { background: #fee2e2; color: #991b1b; }
.grade-F { background: #fecaca; color: #7f1d1d; }
.quality-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.quality-row:last-child { border-bottom: none; }
.quality-label { color: #6b7280; }
.quality-value { font-weight: 500; color: #1a1a2e; }
.quality-value.good { color: #059669; }
.quality-value.warn { color: #d97706; }
.quality-value.bad { color: #dc2626; }
.quality-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.quality-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.quality-overall { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.quality-overall .score { font-size: 28px; font-weight: 700; }

.spot-check-card { background: #f9fafb; border-radius: 8px; padding: 14px; margin-bottom: 10px; border: 1px solid #e5e7eb; }
.spot-check-card .sc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.spot-check-card .sc-id { font-family: monospace; font-size: 13px; font-weight: 600; }
.spot-check-card .sc-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: #6b7280; }
.spot-check-card .sc-row span:last-child { font-weight: 500; color: #374151; }

/* ── User Management ─────────────────────────────────────────── */
.users-container { padding: 24px; max-width: 900px; margin: 0 auto; }
.users-container table tr { cursor: default; }
.users-container table { min-width: auto; }
.users-section { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; }
.users-section table { box-shadow: none; border-radius: 0; min-width: auto; }