/* Cross-page UI normalization.
   - Every primary/secondary/outline button lands on the same height (38px)
     with the same padding, radius, and font weight — regardless of which
     Bootstrap variant a page happens to use.
   - Icon buttons stay their existing square size (34/36px controls).
   - `.btn-sm` and `.btn-lg` still work — they override height as usual.
   - Applies to the admin/merchant/rider/staff layouts through the shared
     base layout, so a new page inherits it automatically. */

.btn.sg-btn-primary,
.btn.sg-btn-secondary,
.btn.sg-btn-outline,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-light,
.btn.btn-dark,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-danger,
.btn.btn-outline-warning,
.btn.btn-outline-info {
    min-height: 38px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 80ms ease;
}
.btn.btn-sm,
.btn-sm.sg-btn-primary,
.btn-sm.sg-btn-outline {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
}
.btn.btn-lg {
    min-height: 46px;
    padding: 10px 22px;
    font-size: 15px;
    border-radius: 10px;
}

/* Table row action buttons — keep the compact 30px circle look consistent so
   every list page shows the same actions column height (no jumping between
   32/34/36 across templates). */
.action-card .btn,
.action-card a.btn {
    min-height: 30px;
    padding: 4px 10px;
}
.pt-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* Focus ring — one consistent look everywhere (Bootstrap ships variants with
   different alphas per color, which reads as inconsistent). */
.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 31, 85, 0.18);
}
.btn:active {
    transform: translateY(1px);
}

/* Dropdown menu items — every list page's action dropdown should render items
   the same (Sticker print was rendering oversized because it skipped
   pt-dropdown-item; belt-and-braces here). */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.3;
}
.dropdown-menu .dropdown-item > i,
.dropdown-menu .dropdown-item > .icon {
    font-size: 15px;
    width: 16px;
    text-align: center;
}
.dropdown-menu .dropdown-item > span {
    flex: 1;
}

/* A <form> wrapping header/body/footer inside a scrollable modal becomes the
   only child of .modal-content, which Bootstrap clips (overflow:hidden) — the
   body never scrolls and the submit falls off-screen. Make the form the flex
   column so .modal-body is the scroll region, on every viewport. A form with
   no .modal-body scrolls itself instead of clipping its fields and submit. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden auto;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}

.cbp_tmtimeline > li .cbp_tmlabel {
    overflow-wrap: anywhere;
}