/* ============================================================
   AUTO CATEGORIZATION — animated demo (Spend-taxonomy surface)
   Scenario: uncategorized transactions → Atlas categorizes them
   (KPIs + category breadcrumbs + confidence scores animate in) →
   a supplier auto-expands to reveal the per-transaction reasons.
   Mounts into [data-auto-cat]. Product colorway, MUI-flat look.
   ============================================================ */

.auto-cat {
  --act-ink: #1f2733;
  --act-muted: #6b7280;
  --act-border: #E7E9F0;
  --act-blue: #2f72d4;
  --act-red: #D32F2F;
  --act-green: #2e9456;
  position: relative;
  display: flex; flex-direction: column;
  height: 100%; width: 100%;
  background: #fff;
  font-family: var(--font-body);
  color: var(--act-ink);
  overflow: hidden;
}

/* ---- header ---- */
.acat-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px 14px;
}
.acat-title { font-family: var(--font-head, inherit); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.acat-actions { margin-left: auto; display: flex; gap: 9px; }
.acat-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 8px 13px; border-radius: 8px; border: 1px solid var(--act-border);
  background: #fff; color: var(--act-ink); white-space: nowrap;
}
.acat-btn svg { width: 15px; height: 15px; }
.acat-btn.primary { border-color: var(--act-blue); color: var(--act-blue); }
.acat-btn.primary .acat-spin { display: none; }
.acat-btn.primary.running { color: var(--act-blue); }
.acat-btn.primary.running .acat-cloud { display: none; }
.acat-btn.primary.running .acat-spin { display: inline-flex; animation: acatSpin .8s linear infinite; }
@keyframes acatSpin { to { transform: rotate(360deg); } }

/* ---- KPI cards ---- */
.acat-kpis {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 0 22px 16px;
}
.acat-kpi {
  background: #F2F3FA; border-radius: 12px; padding: 16px 18px;
}
.acat-kpi-l { font-weight: 700; font-size: 15px; color: var(--act-ink); }
.acat-kpi-n { margin-top: 8px; font-family: var(--font-head, inherit); font-weight: 700; font-size: 30px; letter-spacing: -.02em; }
.acat-kpi.cat .acat-kpi-n, .acat-kpi.recat .acat-kpi-n { color: var(--act-ink); }
.acat-kpi.uncat .acat-kpi-n { color: var(--act-red); }
.acat-kpi.uncat.clear .acat-kpi-n { color: var(--act-green); }

/* ---- table ---- */
.acat-tablewrap { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; border-top: 1px solid var(--act-border); }
.acat-tablewrap::-webkit-scrollbar { width: 8px; }
.acat-tablewrap::-webkit-scrollbar-thumb { background: #d9dce6; border-radius: 8px; }

.acat-toolbar {
  position: sticky; top: 0; z-index: 3; background: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-bottom: 1px solid var(--act-border);
  font-size: 12.5px; color: var(--act-muted); font-weight: 600;
}
.acat-toolbar .acat-grp { display: inline-flex; align-items: center; gap: 8px; color: var(--act-blue); }
.acat-toggle { width: 30px; height: 17px; border-radius: 100px; background: var(--act-blue); position: relative; }
.acat-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }

.acat-head, .acat-sup {
  display: grid;
  grid-template-columns: 22px minmax(150px, 1.4fr) 86px minmax(210px, 1.8fr) 52px;
  align-items: center; gap: 10px;
  padding: 0 22px;
}
.acat-head {
  position: sticky; top: 45px; z-index: 2; background: #FAFAFD;
  height: 40px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--act-muted); border-bottom: 1px solid var(--act-border);
}
.acat-head .r { text-align: right; }

.acat-sup {
  min-height: 52px; border-bottom: 1px solid var(--act-border);
  cursor: default;
}
.acat-sup .acat-chev {
  width: 18px; height: 18px; color: var(--act-muted);
  transition: transform .28s var(--ease);
}
.acat-sup.open .acat-chev { transform: rotate(90deg); }
.acat-sup-name { font-weight: 600; font-size: 13.5px; }
.acat-sup-name .acat-count { color: var(--act-muted); font-weight: 500; }
.acat-spend { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.acat-score { text-align: right; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--act-green); }
.acat-score.blank { color: transparent; }

/* category breadcrumb */
.acat-bc { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.acat-chip {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  border: 1px solid #cfd4e2; background: #fff; font-size: 11.5px; font-weight: 600; color: var(--act-ink);
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.acat-sep { color: #b5bac8; font-size: 12px; flex: 0 0 auto; }
.acat-uncat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 100px; background: #FBEAEA; color: var(--act-red);
  font-size: 11.5px; font-weight: 700;
}

/* category cell reveal (uncat → breadcrumb) */
.acat-cat-cell { min-width: 0; }
.acat-cat-cell .acat-bc { opacity: 0; transform: translateY(3px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.acat-cat-cell.done .acat-bc { opacity: 1; transform: none; }
.acat-cat-cell.done .acat-uncat { display: none; }
html.anim-off .acat-cat-cell .acat-bc { opacity: 1; transform: none; transition: none; }

/* row "just categorized" flash */
@keyframes acatFlash { 0% { background: rgba(47,114,212,.12); } 100% { background: transparent; } }
.acat-sup.flash { animation: acatFlash .8s var(--ease); }

/* ---- expanded transaction rows (aligned to the supplier column grid) ---- */
.acat-txns { overflow: hidden; }
.acat-txn {
  display: grid;
  grid-template-columns: 22px minmax(150px, 1.4fr) 86px minmax(210px, 1.8fr) 52px;
  gap: 10px; align-items: start;
  padding: 13px 22px;
  border-bottom: 1px solid var(--act-border);
  background: #FBFBFE;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.acat-txn.in { opacity: 1; transform: none; }
html.anim-off .acat-txn { opacity: 1; transform: none; transition: none; }
.acat-txn-c2 { grid-column: 2; min-width: 0; }
.acat-txn-reason { font-size: 12px; line-height: 1.5; color: #3a4150; }
.acat-txn-reason b { color: var(--act-ink); font-weight: 600; }
.acat-txn .acat-spend { align-self: start; padding-top: 1px; }
.acat-txn .acat-score { align-self: start; padding-top: 1px; }
.acat-cat-cell2 { min-width: 0; }
.acat-txn-prev { margin-top: 7px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--act-muted); }
.acat-txn-prev .acat-chip { font-weight: 500; background: #f2f3f7; border-color: #e2e5ee; padding: 2px 7px; }
.acat-txn-prev .acat-sep { font-size: 11px; }

/* word streaming for reasons */
.acat-w { display: inline-block; opacity: 0; filter: blur(4px); animation: acatWord .4s var(--ease) forwards; }
@keyframes acatWord { to { opacity: 1; filter: blur(0); } }
html.anim-off .acat-w { opacity: 1; filter: none; animation: none; }

@media (max-width: 720px) {
  .acat-kpis { grid-template-columns: 1fr; gap: 8px; }
  .acat-head, .acat-sup { grid-template-columns: 20px 1fr 70px 46px; }
  .acat-head .h-cat, .acat-sup .acat-cat-cell { display: none; }
}