/* Small layer on top of Tailwind CDN for tab + table styling. */
.tab {
  padding: 0.5rem 0.9rem;
  border-bottom: 2px solid transparent;
  color: #475569;
  white-space: nowrap;
  font-weight: 500;
}
.tab:hover { color: #1e293b; }
.tab-active {
  color: #4338ca;
  border-bottom-color: #4338ca;
}
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.grid th {
  text-align: left;
  font-weight: 600;
  color: #64748b;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
table.grid td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
table.grid tr:hover td { background: #f8fafc; }
.badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
.badge-A { background: #dcfce7; color: #166534; }
.badge-B { background: #fef9c3; color: #854d0e; }
.badge-C { background: #f1f5f9; color: #475569; }
.badge-low { background: #fee2e2; color: #991b1b; }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-draft { background: #e0e7ff; color: #3730a3; }
.badge-sent { background: #cffafe; color: #155e75; }
.badge-received { background: #dcfce7; color: #166534; }
.badge-cancelled { background: #f1f5f9; color: #64748b; }
.btn { padding: 0.3rem 0.7rem; border-radius: 0.4rem; font-size: 0.78rem; font-weight: 500; cursor: pointer; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-ghost { background: #f1f5f9; color: #334155; }
.btn-ghost:hover { background: #e2e8f0; }
.btn-danger { background: #fee2e2; color: #991b1b; }
.input { width: 100%; padding: 0.4rem 0.55rem; border: 1px solid #cbd5e1; border-radius: 0.4rem; font-size: 0.8rem; background: #fff; }
.label { font-size: 0.72rem; font-weight: 600; color: #475569; margin-bottom: 0.15rem; display: block; }
.spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 22px; }
.spark span { width: 3px; background: #818cf8; border-radius: 1px; }
.toast-item { background: #1e293b; color: #fff; padding: 0.6rem 0.9rem; border-radius: 0.5rem; font-size: 0.8rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); }