/* ============================================================================
   receipt-to-excel.css — redesigned in the app-shell workspace language.
   Self-contained (defines its own tokens) so it never fights ai-tools.css or
   app-shell.css. Loaded last, so it is authoritative for this page.
   ============================================================================ */
:root {
  --as-canvas: #f5f7fc;
  --as-surface: #ffffff;
  --as-surface-2: #f4f6fc;
  --as-ink: #12152b;
  --as-muted: #5c647d;
  --as-faint: #8b92a9;
  --as-line: #e2e6f2;
  --as-brand: #4f46e5;
  --as-brand-2: #8b5cf6;
  --as-brand-ink: #3730c9;
  --as-brand-soft: #e7e9ff;
  --as-grad: linear-gradient(120deg, #4f46e5, #8b5cf6);
  --as-radius: 16px;
  --as-radius-sm: 12px;
  --as-shadow-sm: 0 1px 2px rgba(18, 21, 43, .05), 0 8px 20px -14px rgba(40, 36, 120, .18);
  --as-shadow: 0 2px 6px rgba(18, 21, 43, .07), 0 20px 44px -22px rgba(40, 36, 120, .26);
  /* Semantic colours (Excel = green, review = amber) */
  --rx-green: #0e9f5d;
  --rx-green-dark: #0b7e49;
  --rx-green-soft: #e2f6ec;
  --rx-amber: #a05e00;
  --rx-amber-soft: #fff4e0;
  --rx-red: #dc2626;
  --rx-line: var(--as-line);
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button, input, select { font: inherit; }

body {
  background: var(--as-canvas) !important;
  color: var(--as-ink);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* ── Compact header (breadcrumb + left-aligned title) ────────────────────── */
.receipt-main {
  width: min(1200px, calc(100% - 2rem)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 1.4rem 0 4rem !important;
}
.rx-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--as-faint);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rx-crumb a { color: var(--as-muted); text-decoration: none; }
.rx-crumb a:hover { color: var(--as-ink); }
.rx-crumb i { font-size: 9px; opacity: .6; }
.rx-crumb span { color: var(--as-ink); font-weight: 600; }

.rx-head { margin-bottom: 1.4rem; }
.rx-head .badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--as-brand-ink);
  background: var(--as-brand-soft);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.rx-head h1 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--as-ink);
}
.rx-head h1 span {
  background: var(--as-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rx-head p { margin: 0 0 14px; max-width: 62ch; color: var(--as-muted); font-size: 15px; line-height: 1.6; }
.hero-pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.hero-pills span {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .45rem .8rem;
  border: 1px solid var(--as-line);
  border-radius: 999px;
  background: var(--as-surface);
  color: var(--as-muted);
  font-size: .8rem;
  font-weight: 600;
  box-shadow: var(--as-shadow-sm);
}
.hero-pills i { color: var(--as-brand); }
.hero-pills b { font-weight: 700; color: var(--as-ink); }

/* ── Workspace box ───────────────────────────────────────────────────────── */
.tool-card.receipt-workspace {
  max-width: none;
  margin: 0 0 20px;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow-sm);
}
.workspace-heading, .review-heading, .queue-toolbar, .export-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.workspace-heading { margin-bottom: 1.25rem; }
.workspace-heading h2, .review-heading h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 800; letter-spacing: -.01em; margin: .2rem 0 .35rem; color: var(--as-ink); }
.workspace-heading p:not(.step-label), .review-heading p:not(.step-label) { color: var(--as-muted); font-size: .92rem; line-height: 1.55; }
.step-label { color: var(--as-brand-ink); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .72rem 1.15rem; border: 0; border-radius: var(--as-radius-sm); cursor: pointer; font-weight: 800; transition: transform .15s, box-shadow .15s, opacity .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primary { color: #fff; background: var(--as-grad); box-shadow: 0 12px 26px -10px rgba(79, 70, 229, .55); }
.btn-ghost { flex: 0 0 auto; border: 1px solid var(--as-line); background: var(--as-surface); color: var(--as-ink); font-weight: 700; }
.btn-ghost:hover { border-color: var(--as-brand); color: var(--as-brand-ink); }
.btn-secondary { border: 1px solid var(--as-line); color: var(--as-ink); background: var(--as-surface); }
.btn-secondary:hover { border-color: var(--as-faint); }
.btn-excel { color: #fff; background: linear-gradient(135deg, var(--rx-green), var(--rx-green-dark)); box-shadow: 0 12px 26px -10px rgba(14, 159, 93, .5); }
.text-button, .queue-remove { border: 0; background: transparent; color: var(--as-muted); cursor: pointer; }
.text-button { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--as-ink); }

/* ── Upload zone (nested → off-white dashed) ─────────────────────────────── */
.upload-zone.receipt-upload {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .35rem;
  min-height: 220px;
  padding: 2rem 1.5rem;
  border: 2px dashed color-mix(in srgb, var(--as-brand) 42%, var(--as-line));
  border-radius: var(--as-radius);
  background: var(--as-surface-2);
  color: var(--as-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.receipt-upload:hover { border-color: var(--as-brand); background: var(--as-brand-soft); }
.receipt-upload input { display: none; }
.receipt-upload strong { font-size: 1.05rem; color: var(--as-ink); margin: .6rem 0 .3rem; }
.receipt-upload > span:last-child { color: var(--as-faint); font-size: .83rem; }
.receipt-upload.drag-over { border-color: var(--as-brand) !important; background: var(--as-brand-soft) !important; }
.upload-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: #fff; font-size: 1.5rem; background: var(--as-grad); box-shadow: 0 14px 30px -12px rgba(79, 70, 229, .5); }

/* ── File queue ──────────────────────────────────────────────────────────── */
.queue-section { margin-top: 1.3rem; }
.queue-toolbar { margin-bottom: .65rem; }
.queue-toolbar > div { display: flex; align-items: baseline; gap: .6rem; }
.queue-toolbar strong { color: var(--as-ink); font-weight: 700; }
.queue-toolbar span { color: var(--as-muted); font-size: .82rem; }
.file-queue { border: 1px solid var(--as-line); border-radius: var(--as-radius-sm); overflow: hidden; max-height: 280px; overflow-y: auto; background: var(--as-surface-2); }
.queue-item { display: grid; grid-template-columns: 40px minmax(0,1fr) auto 34px; align-items: center; gap: .75rem; padding: .8rem .9rem; border-bottom: 1px solid var(--as-line); }
.queue-item:last-child { border-bottom: 0; }
.queue-type { display: grid; place-items: center; width: 36px; height: 36px; color: var(--as-brand); background: var(--as-brand-soft); border-radius: 10px; }
.queue-item > div { min-width: 0; }
.queue-name, .queue-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-name { color: var(--as-ink); font-size: .88rem; font-weight: 600; }
.queue-meta { color: var(--as-faint); font-size: .75rem; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.queue-state { color: var(--as-muted); font-size: .76rem; font-weight: 700; }
.queue-state.done { color: var(--rx-green); }
.queue-state.error { color: var(--rx-red); }
.queue-remove:hover { color: var(--rx-red); }

/* ── Processing options (local / smart) ──────────────────────────────────── */
.processing-options { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-top: 1rem; }
.processing-option { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border: 1px solid var(--as-line); border-radius: var(--as-radius-sm); background: var(--as-surface-2); }
.processing-option.smart-option { border-color: color-mix(in srgb, var(--as-brand) 40%, var(--as-line)); background: var(--as-brand-soft); }
.processing-option p { flex: 1; margin: 0; color: var(--as-muted); font-size: .8rem; line-height: 1.5; }
.option-heading { display: flex; align-items: center; gap: .7rem; }
.option-heading > div { display: flex; flex-direction: column; gap: .15rem; }
.option-heading strong { color: var(--as-ink); font-size: .92rem; }
.option-heading span:not(.option-icon) { color: var(--as-muted); font-size: .7rem; font-weight: 750; }
.option-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--as-brand); background: var(--as-surface); }
.local-option .option-icon { color: var(--rx-green-dark); background: var(--rx-green-soft); }
.processing-option .btn { width: 100%; }
.privacy-note { display: flex; align-items: flex-start; gap: .55rem; margin-top: .8rem; color: var(--as-muted); font-size: .78rem; line-height: 1.5; }
.privacy-note i { color: var(--as-brand); margin-top: .1rem; }

.credit-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .8rem 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--as-brand) 40%, var(--as-line)); border-radius: var(--as-radius-sm); background: var(--as-brand-soft); }
.credit-quote { display: flex; align-items: center; gap: .75rem; }
.credit-quote .option-icon { background: var(--as-surface); }
.credit-quote strong { display: block; color: var(--as-ink); font-size: .9rem; }
.credit-quote p { margin: .2rem 0 0; color: var(--as-muted); font-size: .78rem; }
.credit-hint { grid-column: 1 / -1; margin: -.15rem 0 0; color: var(--as-muted); font-size: .76rem; }
.credit-hint a { color: var(--as-brand-ink); font-weight: 750; }

/* ── Progress + errors ───────────────────────────────────────────────────── */
.progress-panel { margin-top: 1.2rem; padding: 1.1rem; border-radius: var(--as-radius-sm); background: var(--as-surface-2); border: 1px solid var(--as-line); }
.progress-copy { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: .88rem; }
.progress-copy strong { color: var(--as-ink); }
.progress-copy span { color: var(--as-muted); font-variant-numeric: tabular-nums; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--as-line); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--as-grad); transition: width .25s; }
.progress-panel p { color: var(--as-faint); font-size: .76rem; margin: .6rem 0 0; }
.error-banner { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid #fecaca; border-radius: var(--as-radius-sm); color: #991b1b; background: #fff1f2; font-size: .86rem; }

/* ── Review section ──────────────────────────────────────────────────────── */
.review-section {
  margin: 20px 0;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow-sm);
}
.review-heading { align-items: flex-end; margin-bottom: 1rem; }
.summary-cards { display: grid; grid-template-columns: repeat(3, minmax(105px, 1fr)); gap: .55rem; }
.summary-cards div { min-width: 110px; padding: .72rem .85rem; border: 1px solid var(--as-line); border-radius: var(--as-radius-sm); background: var(--as-surface-2); }
.summary-cards span, .summary-cards strong { display: block; }
.summary-cards span { color: var(--as-faint); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.summary-cards strong { margin-top: .2rem; color: var(--as-ink); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.table-shell { overflow-x: auto; border: 1px solid var(--as-line); border-radius: var(--as-radius-sm); background: var(--as-surface); }
#resultsTable { width: 100%; border-collapse: collapse; min-width: 1120px; }
#resultsTable th { position: sticky; top: 0; z-index: 1; padding: .75rem .62rem; color: var(--as-muted); background: var(--as-surface-2); border-bottom: 1px solid var(--as-line); text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
#resultsTable td { padding: .55rem .42rem; border-bottom: 1px solid var(--as-line); vertical-align: middle; }
#resultsTable tr:last-child td { border-bottom: 0; }
#resultsTable tr.needs-review { background: var(--rx-amber-soft); }
#resultsTable input, #resultsTable select { width: 100%; min-width: 85px; padding: .48rem .5rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--as-ink); font-size: .78rem; }
#resultsTable input:focus, #resultsTable select:focus { outline: 2px solid var(--as-brand-soft); border-color: var(--as-brand); background: var(--as-surface); }
#resultsTable .merchant-input { min-width: 145px; }
#resultsTable .source-cell { max-width: 140px; color: var(--as-faint); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .5rem; border-radius: 999px; color: var(--rx-green-dark); background: var(--rx-green-soft); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.needs-review .status-chip { color: var(--rx-amber); background: #ffe8bf; }
.row-actions { display: flex; gap: .15rem; }
.row-actions button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--as-muted); cursor: pointer; }
.row-actions button:hover { background: var(--as-surface-2); color: var(--as-ink); }
.export-bar { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--rx-green) 30%, var(--as-line)); border-radius: var(--as-radius-sm); background: var(--rx-green-soft); }
.export-bar strong { display: block; margin-top: .2rem; color: var(--rx-green-dark); font-size: .88rem; }
.export-actions { display: flex; gap: .55rem; }

/* ── How-it-works + limitations ──────────────────────────────────────────── */
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 20px 0 1.3rem; }
.workflow-grid article { position: relative; min-height: 180px; padding: 1.35rem; overflow: hidden; border: 1px solid var(--as-line); border-radius: var(--as-radius); background: var(--as-surface); box-shadow: var(--as-shadow-sm); }
.workflow-grid article > span { position: absolute; right: 1rem; top: .65rem; color: var(--as-brand-soft); font-size: 2.6rem; font-weight: 900; }
.workflow-grid i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--as-brand); background: var(--as-brand-soft); }
.workflow-grid h3 { margin: 1rem 0 .45rem; font-size: 1rem; font-weight: 800; color: var(--as-ink); }
.workflow-grid p { color: var(--as-muted); font-size: .84rem; line-height: 1.55; }
.limitations { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem; border: 1px solid color-mix(in srgb, var(--rx-amber) 25%, var(--as-line)); border-radius: var(--as-radius); background: var(--rx-amber-soft); }
.limitations > div:first-child { display: grid; place-items: center; width: 42px; height: 42px; color: var(--rx-amber); background: #ffe8bf; border-radius: 12px; }
.limitations h2 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 800; color: var(--as-ink); }
.limitations p { margin: 0; color: var(--as-muted); font-size: .84rem; line-height: 1.55; }

/* ── Raw-text dialog + footer ────────────────────────────────────────────── */
.raw-dialog { width: min(720px,calc(100% - 2rem)); max-height: 80vh; border: 0; border-radius: var(--as-radius); padding: 0; box-shadow: 0 30px 90px rgba(15,23,42,.25); }
.raw-dialog::backdrop { background: rgba(15,23,42,.5); }
.raw-dialog header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.15rem; border-bottom: 1px solid var(--as-line); }
.raw-dialog pre { margin: 0; padding: 1rem 1.15rem; max-height: 60vh; overflow: auto; white-space: pre-wrap; color: var(--as-ink); background: var(--as-surface-2); font: .8rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.raw-dialog button { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; }
footer { text-align: center; padding: 2rem 1rem; color: var(--as-faint); font-size: .82rem; }
footer a { color: inherit; }

@media (max-width: 800px) {
  .workspace-heading, .review-heading, .export-bar { align-items: stretch; flex-direction: column; }
  .summary-cards { width: 100%; }
  .workflow-grid { grid-template-columns: 1fr; }
  .processing-options { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .receipt-main { padding-inline: .1rem !important; }
  .workspace-heading .btn { width: 100%; }
  .credit-panel { grid-template-columns: 1fr; }
  .credit-panel .btn { width: 100%; }
  .credit-hint { grid-column: auto; }
  .summary-cards { grid-template-columns: repeat(3,1fr); overflow-x: auto; }
  .summary-cards div { min-width: 96px; }
  .export-actions { width: 100%; }
  .export-actions .btn { flex: 1; }
}