/* ===== Global Action Button & Dropdown Style =====
   Unifies every row-level "Action" dropdown button/menu app-wide: a plain
   sky-blue outline button (no fill) with the arrow caret, and a dropdown
   menu where every item shares the same icon+label style with no
   active/preselected highlighting - only a hover state.
   Scoped to .btn-group so it only targets table action dropdowns, not
   navbar/profile menus or other unrelated dropdowns. */

.btn-group > .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    float: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid #0ea5e9 !important;
    border-radius: 4px !important;
    height: auto !important;
    min-height: auto !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .02em !important;
    color: #0369a1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all .15s !important;
}

.btn-group > .dropdown-toggle:hover,
.btn-group > .dropdown-toggle:focus,
.btn-group.open > .dropdown-toggle {
    background: #f0f9ff !important;
    background-image: none !important;
    border-color: #0284c7 !important;
    color: #075985 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-group > .dropdown-toggle .caret {
    border-top-color: #0369a1 !important;
    margin-left: 2px;
}

.btn-group .dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .13) !important;
    min-width: 195px !important;
    padding: 6px !important;
}

.btn-group .dropdown-menu > li > a,
.btn-group .dropdown-menu > li > button,
.btn-group .dropdown-menu > li:first-child > a,
.btn-group .dropdown-menu > li:first-child > button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    color: #374151 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background .1s !important;
}

.btn-group .dropdown-menu > li > a:hover,
.btn-group .dropdown-menu > li > button:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* No item should look pre-selected/active on open - every item shares the
   same plain style (icon + label) until the user actually hovers it. */
.btn-group .dropdown-menu > li > a:focus,
.btn-group .dropdown-menu > li > button:focus,
.btn-group .dropdown-menu > li.active > a,
.btn-group .dropdown-menu > li.active > button,
.btn-group .dropdown-menu > li.active > a:hover,
.btn-group .dropdown-menu > li.active > a:focus {
    background: transparent !important;
    color: #374151 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Several dropdown items (View, Edit Shipping, New Sale Notification, etc.)
   use the shared .btn-modal class to trigger their AJAX modal. Elsewhere in
   the app .btn-modal gets a solid brand-gradient "primary action" look
   (see ui-consistency-fixes.css), which made those specific items look
   highlighted/pre-selected next to their plain siblings. Override it here
   with a selector specific enough to win regardless of stylesheet order,
   so every dropdown item - .btn-modal or not - looks identical. */
.btn-group .dropdown-menu > li > a.btn-modal,
.btn-group .dropdown-menu > li > button.btn-modal {
    background: transparent !important;
    background-image: none !important;
    color: #374151 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.btn-group .dropdown-menu > li > a.btn-modal:hover,
.btn-group .dropdown-menu > li > button.btn-modal:hover {
    background: #f3f4f6 !important;
    background-image: none !important;
    color: #111827 !important;
}

.btn-group .dropdown-menu > li > a.btn-modal:focus,
.btn-group .dropdown-menu > li > button.btn-modal:focus {
    background: transparent !important;
    background-image: none !important;
    color: #374151 !important;
    box-shadow: none !important;
}

/* Lock the icon column to a fixed width so every item's label starts at
   the same x position - without this, icons with different intrinsic
   glyph widths (fa-eye vs fa-edit vs the older "fa fa-envelope" prefix)
   shift their following label left/right by a few pixels, which read as
   the menu items being misaligned with each other. */
.btn-group .dropdown-menu > li > a i,
.btn-group .dropdown-menu > li > button i {
    flex: 0 0 16px !important;
    width: 16px !important;
    max-width: 16px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-group .dropdown-menu > li > a {
    white-space: nowrap !important;
}

.btn-group .dropdown-menu > li.divider {
    margin: 4px 0 !important;
}