/* Customer ticket tabs — anchored to the paper order, not floating wood signs. */
.order > .customer-name {
  position:absolute;top:-28px;left:16px;right:auto;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  width:max-content;min-width:0;max-width:calc(100% - 79px);height:37px;
  padding:4px 12px 5px 5px;border:2px solid #ad7442;
  border-radius:14px 14px 12px 10px;
  background:linear-gradient(180deg,#fffcf2 0%,#fff1d5 44%,#f3d9ae 100%);
  box-shadow:inset 0 1px 0 #fffef9,0 3px 0 #a46b38,0 6px 11px #54321c30;
  color:#59351e;text-shadow:0 1px 0 #fff9e9;
  font-family:var(--font-body,'Segoe UI',sans-serif);font-size:20px;
  font-weight:800;line-height:1.15;letter-spacing:0;text-align:left;white-space:nowrap;
  transform:none;pointer-events:none;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.order > .customer-name::before{content:none}
.order > .customer-name::after{
  content:'';position:absolute;left:18px;bottom:-7px;width:15px;height:7px;
  border-left:2px solid #ad7442;background:#f3d9ae;
  transform:skewX(-28deg);border-radius:0 0 0 3px;
}
.customer-name-number{
  flex:0 0 26px;display:grid;place-items:center;height:25px;
  border:1px solid #b98e55;border-radius:8px;
  background:linear-gradient(180deg,#e6c68e,#d3ab6c);
  box-shadow:inset 0 1px #fff3cf;color:#68401e;
  font:800 12px/1.25 'Segoe UI',sans-serif;text-shadow:none;letter-spacing:.3px;
}
.customer-name-label{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font:inherit;
}
.order > .customer-name.selected{
  border-color:#8b9d52;
  background:linear-gradient(180deg,#fffef0 0%,#fff2cb 45%,#efda9a 100%);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #81924e,0 0 0 3px #cbe09c84,0 6px 13px #54321c2e;
  color:#4f351b;
}
.order > .customer-name.selected::after{background:#efda9a;border-left-color:#8b9d52}
.order > .customer-name.selected .customer-name-number{
  border-color:#5a743a;background:linear-gradient(180deg,#96b46d,#6e924b);
  box-shadow:inset 0 1px #c8e3a0;color:#fffdf2;
}
/* Active-order status is its own small ticket, separate from the name. */
.order.selected::after,.expanded .order.selected::after{
  content:'● ĐANG PHA';display:block;position:absolute;
  top:-18px;left:auto;right:7px;padding:5px 7px 4px;
  border:1.5px solid #779246;border-radius:9px;background:#ebf1d6;
  box-shadow:0 2px 0 #83a355,0 3px 8px #48311a1c;
  color:#527133;font:800 12px/1.25 'Segoe UI',sans-serif;
  letter-spacing:.15px;text-shadow:none;pointer-events:none;
}
.expanded .order > .customer-name{top:-28px;max-width:calc(100% - 75px)}
@media(max-height:600px){.order > .customer-name{font-size:20px;height:37px;padding:4px 12px 5px 5px}}
@media(prefers-reduced-motion:reduce){.order > .customer-name{transition:none}}