/* Expense product page (/expense-management) — the mock-ups only; the layout is product.css. */
.ex-scan { display: flex; align-items: center; gap: 14px; }
.ex-receipt { position: relative; width: 140px; padding: 14px 12px 18px; background: #fff; font-family: ui-monospace, Consolas, monospace; font-size: .62rem; color: #4b5568;
  box-shadow: 0 12px 26px rgba(16, 24, 40, .12); overflow: hidden;
  -webkit-mask: radial-gradient(5px at 50% 100%, transparent 98%, #000) 0 0 / 12px 100% repeat-x; mask: radial-gradient(5px at 50% 100%, transparent 98%, #000) 0 0 / 12px 100% repeat-x; }
.ex-receipt b { display: block; text-align: center; font-size: .72rem; color: #1d2433; }
.ex-receipt small { display: block; text-align: center; color: #8a93a4; margin-bottom: 8px; }
.ex-r-line, .ex-r-total { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
.ex-r-total { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #c8cdd8; font-weight: 700; color: #1d2433; }
.ex-beam { position: absolute; left: 0; right: 0; height: 26px; top: -30px; background: linear-gradient(180deg, rgba(91, 91, 214, 0), rgba(91, 91, 214, .28), rgba(91, 91, 214, 0));
  animation: exBeam 3.2s ease-in-out infinite; }
@keyframes exBeam { 0% { top: -30px; } 55%, 100% { top: 110%; } }
.ex-fields { display: grid; gap: 7px; width: 132px; }
.ex-field { background: #fff; border-radius: 8px; padding: 6px 9px; box-shadow: 0 4px 12px rgba(16, 24, 40, .07); opacity: 0; transform: translateX(-8px);
  transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * .3s + .6s); }
.ex-field small { display: block; font-size: .58rem; color: #8a93a4; font-weight: 600; }
.ex-field span { font-size: .72rem; font-weight: 600; color: #1d2433; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pp-card.in .ex-field { opacity: 1; transform: none; }

.ex-items { width: 280px; background: #fff; border-radius: 12px; padding: 8px 14px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .76rem; }
.ex-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid #f1f2f6; }
.ex-item:last-child { border-bottom: 0; }
.ex-item b { text-align: right; }
.ex-flag { grid-column: 1 / -1; justify-self: start; font-style: normal; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  opacity: 0; transform: scale(.8); transition: opacity .35s, transform .35s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(var(--i) * .25s + .5s); }
.ex-flag.warn { background: #fff4e0; color: #b45309; } .ex-flag.bad { background: #fde8e8; color: #b91c1c; } .ex-flag.ok { background: #e7f8ee; color: #15803d; }
.pp-card.in .ex-flag { opacity: 1; transform: none; }

.ex-cats { width: 270px; display: grid; gap: 8px; }
.ex-cat { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 4px 8px; padding: 10px 12px; background: #fff; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .06); font-size: .76rem; font-weight: 600; }
.ex-cat i { color: #0c64ae; --fa-primary-color: #0c64ae; --fa-secondary-color: #0c64ae; }
.ex-cat small { color: #8a93a4; font-weight: 500; font-size: .66rem; }
.ex-cat-bar { grid-column: 2 / -1; height: 5px; border-radius: 3px; background: #edf0f5; overflow: hidden; }
.ex-cat-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #14b8a6, #0c64ae);
  transition: width 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .15s + .4s); }
.pp-card.in .ex-cat-bar span { width: var(--w); }

.ex-status { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ex-pill { padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--c); font-weight: 700; font-size: .8rem; box-shadow: inset 0 0 0 2px var(--c), 0 4px 12px rgba(16, 24, 40, .06);
  animation: exPill 6s infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes exPill { 0%, 30%, 100% { background: #fff; color: var(--c); transform: none; } 5%, 22% { background: var(--c); color: #fff; transform: scale(1.06); } }
.ex-status-who { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .74rem; color: #6b7487; }

.ex-paid { width: 240px; background: #fff; border-radius: 14px; padding: 20px 18px 14px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); text-align: center; font-size: .78rem; }
.ex-paid-ico { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 1.05rem;
  box-shadow: 0 0 0 8px #e7f8ee; transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.6, .4, 1) .4s; }
.pp-card.in .ex-paid-ico { transform: scale(1); }
.ex-paid > b { display: block; font-size: 1rem; margin-bottom: 10px; }
.ex-paid-row { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid #f1f2f6; }
.ex-paid-row small { color: #8a93a4; }
.ex-paid-row span { font-weight: 600; }

.ex-flow { grid-template-columns: auto 1fr auto; }
.ex-flow .pp-flow-lines path:nth-child(1) { animation-direction: normal; }

.ex-attach { margin-top: 14px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed #c9d2e3; border-radius: 10px; font-size: .78rem; color: #4b5568; }
.ex-attach span { margin-left: auto; color: #5b5bd6; font-weight: 600; white-space: nowrap; }
.ex-checks { margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: #ecfdf3; color: #15803d; font-size: .78rem; }

.ex-ai .pp-window-body { display: flex; flex-direction: column; gap: 16px; }
.ex-ai-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.ex-receipt-lg { width: 170px; font-size: .68rem; }
.ex-ai-form { display: grid; gap: 9px; }
.ex-ai-form label { display: flex; flex-direction: column; gap: 4px; font-size: .68rem; font-weight: 600; color: #8a93a4; }
.ex-ai-form span { font-size: .82rem; font-weight: 500; color: #1d2433; border: 1px solid #e3e7ee; border-radius: 8px; padding: 7px 10px; background: #fafbfd;
  color: transparent; transition: color .3s, background .6s, border-color .6s; transition-delay: calc(var(--i) * .35s + 1.2s); }
.ex-ai.in .ex-ai-form span { color: #1d2433; background: #f3f0ff; border-color: #d9d1fb; }
@media (max-width: 640px) {
  .ex-ai-grid { grid-template-columns: minmax(0, 1fr); }
  .ex-receipt-lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-field, .ex-flag, .ex-cat-bar span, .ex-paid-ico, .ex-ai-form span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ex-cat-bar span { width: var(--w); } .ex-ai-form span { color: #1d2433; }
  .ex-beam, .ex-pill { animation: none; }
}