/* Status tags — flat, low-contrast labels that read as tags, not buttons.
   Modifiers keep the Bootstrap colour names (success/danger/...) so the existing
   $badgeColors / $pmColors arrays in the views keep working unchanged. */
.bh-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #f8fafc;
    color: #475569;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.bh-tag--success   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.bh-tag--danger    { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.bh-tag--warning   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.bh-tag--info      { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.bh-tag--primary   { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.bh-tag--secondary { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.bh-tag--dark      { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }

/* Outline only — the border carries the colour, nothing fills. For counts and
   stock levels that must stay readable without shouting. */
.bh-tag--outline                    { background: transparent; }
.bh-tag--outline.bh-tag--success    { border-color: #34d399; }
.bh-tag--outline.bh-tag--warning    { border-color: #fbbf24; }
.bh-tag--outline.bh-tag--danger     { border-color: #fb7185; }
.bh-tag--outline.bh-tag--info       { border-color: #38bdf8; }
.bh-tag--outline.bh-tag--primary    { border-color: #c084fc; }
.bh-tag--pill                       { border-radius: 999px; }

/* Soft UI sets .form-select padding-right to 1rem, but its chevron sits 0.75rem from the
   right edge and is 1rem wide — so the label runs underneath the arrow. Full-width selects
   hide it (plenty of slack); a w-auto select shrinks to its text and shows it. Stock
   Bootstrap uses 2.25rem here; scoped to .w-auto so every other form keeps its own spacing. */
.form-select.w-auto { padding-right: 2.25rem; }

/* Order progress stepper. Soft UI's .timeline is hard-wired vertical (full-height :before,
   absolutely positioned steps, margin-left on content), so going horizontal by overriding it
   costs more than this. One markup — the media query flips direction, phone keeps the stack. */
.bh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.bh-steps__item { position: relative; display: flex; gap: .85rem; }
.bh-steps__item:not(:last-child)::before {
    content: ""; position: absolute; left: 12px; top: 26px; bottom: -1.25rem;
    width: 2px; background: #dee2e6;
}
.bh-steps__item--done:not(:last-child)::before { background: #82d616; }
.bh-steps__dot {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e9ecef; color: #8392ab; font-size: .7rem; z-index: 1;
}
.bh-steps__item--done      .bh-steps__dot { background: #82d616; color: #fff; }
.bh-steps__item--next      .bh-steps__dot { background: #17c1e8; color: #fff; }
.bh-steps__item--cancelled .bh-steps__dot { background: #344767; color: #fff; }
.bh-steps__label { font-size: .875rem; font-weight: 700; color: #344767; line-height: 1.3; }
.bh-steps__meta  { font-size: .7rem; color: #8392ab; line-height: 1.5; }

@media (min-width: 992px) {
    .bh-steps { flex-direction: row; gap: 0; }
    .bh-steps__item { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
    /* Connector spans from this dot's centre to the next one's. */
    .bh-steps__item:not(:last-child)::before {
        left: 50%; right: -50%; top: 12px; bottom: auto; width: auto; height: 2px;
    }
}

/* Tag-styled <select> — same palette as the static tags, so an editable type reads exactly
   like the one shown on the receipt list. The modifiers use a `background` shorthand that
   wipes the dropdown chevron, so it is restored here (higher specificity, declared later). */
select.bh-tag {
    display: inline-block;
    padding-right: 1.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .4rem center;
    background-size: .6rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Buttons that keep their own look but line up with a .bh-tag in the same row.
   Metrics mirror .bh-tag above — change both together. */
.btn.bh-tag-size {
    padding: .15rem .5rem;
    font-size: .65rem;
    line-height: 1.5;
    margin-bottom: 0;
    /* Soft UI drops the border on filled buttons, which then sit 2px shorter than
       an outlined one. Keep it transparent so every variant measures the same. */
    border: 1px solid transparent;
}