/**
 * OCR Review page styles.
 * Builds on styles.css (shared header / footer / .app-button).
 */

/* Header toolbar (page-size selector) */
.ocr-toolbar {
  display: flex;
  align-items: center;
}

.ocr-pagesize-label {
  color: white;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ocr-pagesize-label select {
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Active nav link */
.navigation .home-link.active {
  text-decoration: underline;
}

/* Content area — let the table use full viewport width */
.ocr-content {
  width: 95%;
  max-width: none;
}

/* Status / loading / error / empty messages */
.ocr-status {
  margin-bottom: 1rem;
}

.ocr-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #842029;
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.ocr-empty {
  text-align: center;
  color: #666;
  padding: 2rem;
}

/* Table */
.ocr-table-wrapper {
  overflow-x: auto;
}

.ocr-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.ocr-table thead th {
  background: #144267;
  color: white;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}

.ocr-table tbody td {
  border-bottom: 1px solid #e0e0e0;
  padding: 0.8rem;
  vertical-align: top;
}

.ocr-row:hover {
  background: #f4f9ff;
}

/* Column sizing */
.ocr-col-rma      { width: 14%; font-family: 'Courier New', monospace; font-size: 0.9rem; word-break: break-all; }
.ocr-col-image    { width: 170px; }
.ocr-col-filename { width: 12%; font-size: 0.85rem; word-break: break-all; }
.ocr-col-status   { width: 10%; font-size: 0.85rem; }
.ocr-col-updated  { width: 12%; font-size: 0.85rem; }
.ocr-col-values   { width: auto; }
.ocr-col-actions  { width: 120px; text-align: center; }

/* Image thumbnail — click opens the viewer modal */
.ocr-thumb {
  width: 150px;
  height: 100px;
  object-fit: cover;
  background: #eef0f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  transition: box-shadow 0.15s ease;
}

.ocr-thumb:hover {
  box-shadow: 0 0 0 2px #007bff;
}

/* Placeholder shown when there is no image, or it failed to load */
.ocr-image-placeholder {
  width: 150px;
  height: 100px;
  background: #eef0f3;
  border: 1px dashed #b9c0c9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #98a0aa;
  font-size: 0.8rem;
  padding: 0 0.4rem;
}

/* Editable value fields */
.ocr-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.ocr-field:last-child {
  margin-bottom: 0;
}

.ocr-field-label {
  flex: 0 0 110px;
  font-size: 0.82rem;
  color: #555;
}

.ocr-field-input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 0;
}

.ocr-field-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

/* Per-row raw-result read/parse error */
.ocr-row-error {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #842029;
}

/* Accept button */
.ocr-accept-btn {
  min-width: 84px;
}

.ocr-accept-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Load more */
.ocr-loadmore-container {
  text-align: center;
  margin: 1.2rem 0;
}

/* ── Viewer modal — input side panel ──────────────────────────────────────
   All rules below are scoped under .ocr-mode, which only the OCR Review
   viewer modal carries. The Browse file viewer never has .ocr-mode, so it
   is completely unaffected by these rules. */

/* Image area + panel sit side by side, filling the content below the header. */
.ocr-mode .ocr-viewer-main {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

/* The image body keeps flexing to fill the space left of the panel. */
.ocr-mode .ocr-viewer-main .file-viewer-body {
  flex: 1;
  min-width: 0;
}

/* Fixed-width input panel on the right. */
.ocr-viewer-panel {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #fff;
  border-left: 1px solid #e0e0e0;
  overflow-y: auto;
}

.ocr-viewer-fields {
  display: flex;
  flex-direction: column;
}

/* Stacked field variant (label above input) for the narrow panel. */
.ocr-field-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin-bottom: 0.9rem;
}

.ocr-field-stacked .ocr-field-label {
  flex: none;
}

/* Accept button pinned to the bottom of the panel. */
.ocr-viewer-panel .ocr-accept-btn {
  margin-top: auto;
  width: 100%;
}

/* Inline error inside the panel (invalid RMA, accept failure). */
.ocr-viewer-panel-error {
  color: #842029;
  font-size: 0.82rem;
  min-height: 1.1em;
  margin-bottom: 0.6rem;
}

/* ── Toast notification ───────────────────────────────────────────────────── */
.ocr-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}

.ocr-toast-hide {
  opacity: 0;
}