/* Kwartz GSTR-2B Reconciliation — Styles */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #F8F9FA; color: #1F1F1F; line-height: 1.5;
}
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; color: #1F1F1F; }
.subtitle { color: #71717A; margin-bottom: 24px; font-size: 0.9rem; }

/* Auth */
#auth-loading { text-align: center; padding: 60px; color: #71717A; }
#sign-in-container { display: flex; justify-content: center; padding: 60px 0; }
.header-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.header-bar h1 { margin-bottom: 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; }
#user-button-container { display: inline-block; }

/* Upload area */
.upload-area {
  border: 2px dashed #E5E7EB; border-radius: 12px; padding: 40px;
  text-align: center; cursor: pointer; transition: all 0.2s;
  background: #fff; margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.upload-area.compact {
  padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.upload-area.compact .icon { display: none; }
.upload-area.compact p:last-child { display: none; }

/* Collapsed file summary */
.files-collapsed {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding: 8px 14px; background: #fff; border: 1px solid #E5E7EB;
  border-radius: 8px; font-size: 0.8rem; color: #52525B;
}
.files-collapsed .fc-label { font-weight: 500; color: #1F1F1F; }
.files-collapsed .fc-stat {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 4px;
  font-weight: 500;
}
.files-collapsed .fc-gstr2b { background: #E0F7FA; color: #00838F; }
.files-collapsed .fc-books { background: #E8F8F0; color: #1B7A43; }
.upload-area:hover, .upload-area.dragover {
  border-color: #00BCD4; background: #E0F7FA;
}
.upload-area input { display: none; }
.upload-area p { color: #71717A; font-size: 0.9rem; }
.upload-area .icon { font-size: 2rem; margin-bottom: 8px; }

/* File list */
.file-list {
  margin-bottom: 16px; background: #fff; border: 1px solid #E5E7EB;
  border-radius: 8px; overflow: hidden;
}
.file-list:empty { display: none; }
.file-item {
  padding: 6px 12px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #F1F3F5; font-size: 0.8rem;
}
.file-item:last-child { border-bottom: none; }
.file-item .name { font-weight: 500; font-size: 0.8rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .info { color: #9CA3AF; font-size: 0.7rem; flex-shrink: 0; }
.file-item .tag {
  font-size: 0.65rem; padding: 1px 6px; border-radius: 3px;
  font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.file-item .upload-progress {
  height: 3px; background: #E5E7EB; border-radius: 2px;
  margin-top: 4px; overflow: hidden;
}
.file-item .upload-progress-fill {
  height: 100%; background: #00BCD4; border-radius: 2px;
  transition: width 0.2s ease;
}
.file-item.uploading { opacity: 0.7; }
.file-item.done { opacity: 1; }
.tag-gstr2b { background: #E0F7FA; color: #00838F; }
.tag-books { background: #E8F8F0; color: #1B7A43; }
.tag-error { background: #FDEDEC; color: #922B21; }
.file-item .upload-progress {
  width: 60px; height: 3px; background: #E5E7EB; border-radius: 2px;
  overflow: hidden; flex-shrink: 0;
}
.file-item .upload-progress-fill {
  height: 100%; background: #00BCD4; border-radius: 2px;
  transition: width 0.2s ease;
}
.file-item.uploading { color: #9CA3AF; }

/* Buttons */
.btn {
  display: inline-block; padding: 12px 32px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none;
  transition: all 0.2s;
}
.btn-primary { background: #00BCD4; color: #fff; }
.btn-primary:hover { background: #00ACC1; }
.btn-primary:disabled { background: #80DEEA; cursor: not-allowed; }
.btn-secondary { background: #E5E7EB; color: #3F3F46; }
.btn-secondary:hover { background: #D1D5DB; }
.btn-row { display: flex; gap: 12px; margin-bottom: 24px; }

/* Status */
.status-panel {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 24px; margin-bottom: 24px; display: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.status-panel.active { display: block; }
.status-panel h3 { margin-bottom: 12px; font-size: 1rem; }
.progress-bar {
  background: #E5E7EB; border-radius: 4px; height: 8px;
  margin-bottom: 16px; overflow: hidden;
}
.progress-fill {
  background: #00BCD4; height: 100%; border-radius: 4px;
  transition: width 0.5s ease;
}
.progress-fill.error { background: #E74C3C; }
.step-log { list-style: none; padding: 0; }
.step-log li {
  padding: 6px 0; font-size: 0.8rem; color: #52525B;
  display: flex; align-items: flex-start; gap: 8px;
  border-bottom: 1px solid #F1F3F5;
}
.step-log li:last-child { border-bottom: none; }
.step-icon { flex-shrink: 0; width: 20px; text-align: center; }
.step-done .step-icon { color: #2ECC71; }
.step-active .step-icon { color: #00BCD4; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.step-active { color: #1F1F1F; font-weight: 500; }
.step-pending { color: #D1D5DB; }
.step-error .step-icon { color: #E74C3C; }
.step-msg { font-size: 0.75rem; color: #9CA3AF; margin-top: 2px; }
.activity-log {
  margin-top: 8px; padding: 8px 12px; background: #F8F9FA;
  border-radius: 6px; max-height: 200px; overflow-y: auto;
  font-size: 0.7rem; color: #71717A; font-family: 'Inter', monospace;
}
.activity-log div { padding: 2px 0; border-bottom: 1px solid #F1F3F5; }
.activity-log div:last-child { border-bottom: none; }
.activity-log .at { color: #9CA3AF; margin-right: 6px; }

/* Results */
.results-panel {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 24px; margin-bottom: 24px; display: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.results-panel.active { display: block; }
.results-panel h3 { margin-bottom: 12px; font-size: 1rem; }
.download-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; background: #2ECC71; color: #fff;
  border-radius: 8px; text-decoration: none; font-weight: 500;
  margin: 4px 4px 4px 0; transition: background 0.2s; font-size: 0.9rem;
}
.download-link:hover { background: #27AE60; }
.summary { white-space: pre-wrap; font-family: 'Inter', monospace; font-size: 0.8rem; margin-bottom: 16px; color: #52525B; }

/* Review */
.review-panel { display: none; }
.review-panel.active { display: block; }
.review-section {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.review-section h3 { font-size: 0.95rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.review-hint { font-size: 0.75rem; color: #9CA3AF; margin-bottom: 12px; }
.badge {
  font-size: 0.7rem; background: #E5E7EB; color: #52525B;
  padding: 1px 8px; border-radius: 10px; font-weight: 500;
}
.review-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.review-table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem;
}
.review-table th {
  background: #F8F9FA; padding: 6px 8px; text-align: left;
  border-bottom: 2px solid #E5E7EB; font-weight: 600; color: #52525B;
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.review-table td {
  padding: 4px 8px; border-bottom: 1px solid #F1F3F5; color: #3F3F46;
}
.review-table tr:hover { background: #F8F9FA; }
.review-table .amt { text-align: right; font-variant-numeric: tabular-nums; }
.review-table .diff-ok { color: #2ECC71; }
.review-table .diff-warn { color: #F1C40F; }
.review-table .diff-bad { color: #E74C3C; }
.review-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #00BCD4; }
.review-table select {
  font-size: 0.7rem; padding: 3px 6px; border: 1px solid #E5E7EB;
  border-radius: 4px; background: #fff; width: 100%;
}
.review-table input[type="text"] {
  font-size: 0.7rem; padding: 3px 6px; border: 1px solid #E5E7EB;
  border-radius: 4px; width: 100%;
}
.review-table td:has(select) { min-width: 160px; }
.review-table td:has(input[type="text"]) { min-width: 120px; }
.accepted-row { background: #E8F8F0 !important; }

/* Summary */
.summary-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.summary-table td, .summary-table th {
  padding: 5px 6px; border-bottom: 1px solid #F1F3F5;
}
.summary-table td:first-child { white-space: nowrap; }
.summary-table th { text-align: left; color: #71717A; font-weight: 500; }
.summary-table td:nth-child(2), .summary-table td:nth-child(3), .summary-table td:nth-child(4) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.summary-table th:nth-child(2), .summary-table th:nth-child(3), .summary-table th:nth-child(4) {
  text-align: right;
}
.summary-table .cat-exact { color: #2ECC71; }
.summary-table .cat-fuzzy { color: #00BCD4; }
.summary-table .cat-agent { color: #9B59B6; }
.summary-table .cat-diff { color: #F1C40F; }
.summary-table .cat-unmatched { color: #E74C3C; }
.summary-table .total-row { font-weight: 600; border-top: 2px solid #E5E7EB; }
.summary-bar { height: 24px; border-radius: 4px; display: flex; overflow: hidden; margin: 12px 0; }
.summary-bar div { height: 100%; transition: width 0.3s ease; }
.bar-exact { background: #2ECC71; }
.bar-fuzzy { background: #00BCD4; }
.bar-agent { background: #9B59B6; }
.bar-diff { background: #F1C40F; }
.bar-unmatched { background: #E5E7EB; }

/* Collapsible */
.collapsible { cursor: pointer; user-select: none; }
.collapsible:hover { color: #00BCD4; }
.toggle-icon { font-size: 0.7rem; transition: transform 0.2s; display: inline-block; margin-left: 4px; }
.toggle-icon.open { transform: rotate(90deg); }

/* Badge variants */
.badge-warn { background: #FEF9E7; color: #7D6608; }

/* Supplier groups */
.supplier-group { }
.supplier-header td {
  padding: 8px 8px; cursor: pointer;
  font-size: 0.8rem; color: #3F3F46;
  background: #FAFAFA; border-bottom: 1px solid #E5E7EB;
}
.supplier-header:hover td { background: #F1F3F5; }
.supplier-header .supplier-name { font-weight: 600; }
.supplier-header .supplier-meta {
  color: #9CA3AF; font-weight: 400; font-size: 0.7rem; margin-left: 8px;
}
.supplier-header .toggle-icon { color: #9CA3AF; font-size: 0.6rem; }
.supplier-rows { display: none; }
.supplier-rows.open { display: table-row-group; }
.supplier-rows td { padding-left: 32px; }

/* Bulk bar */
.bulk-bar {
  padding: 8px 12px; background: #E0F7FA; border-radius: 6px;
  margin-bottom: 8px; font-size: 0.8rem; display: flex;
  align-items: center; gap: 8px;
}
.bulk-bar select { font-size: 0.75rem; padding: 3px 6px; border: 1px solid #00BCD4; border-radius: 4px; }
.btn-sm { padding: 4px 12px; font-size: 0.75rem; }

/* Deep match running state */
.deep-running {
  border-color: #00BCD4; animation: pulse-border 2s ease-in-out infinite;
}
@keyframes pulse-border {
  0%, 100% { border-color: #00BCD4; box-shadow: 0 0 0 0 rgba(0,188,212,0.1); }
  50% { border-color: #00ACC1; box-shadow: 0 0 8px 2px rgba(0,188,212,0.15); }
}
.deep-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: #00838F; font-weight: 500;
}
.deep-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #00BCD4;
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }