/*
 * IMGEDIT Buttons — themable button styles
 * =========================================
 *
 * This stylesheet defines ONLY the imgedit-specific button classes
 * (imgedit-btn-action, imgedit-btn-subaction) and intentionally does NOT
 * touch any Bootstrap default button (btn-primary, btn-warning, btn-default,
 * etc.). The goal is consistent IEW button styling across client portal,
 * admin order views, dashboard widgets and CPB widgets - without affecting
 * other Perfex modules or the Perfex core UI.
 *
 * Theming
 * -------
 * All colors come from CSS custom properties that are written into the
 * page <head> by imgedit_button_styles_inline() in imgedit_helper.php at
 * render time, based on the admin-configured options:
 *   --imgedit-btn-action-bg
 *   --imgedit-btn-action-fg     (auto-computed contrast color)
 *   --imgedit-btn-subaction-bg
 *   --imgedit-btn-subaction-fg  (auto-computed contrast color)
 *
 * If the inline <style> block is missing for any reason, the variables
 * fall back to a neutral grey scheme so buttons remain readable rather
 * than displaying as transparent/black-on-black.
 *
 * !important is necessary throughout because Bootstrap's .btn rules and
 * Perfex theme overrides come with high specificity. Without !important,
 * the customer portal's CSS wins on color and the configured theme
 * variables get overridden.
 *
 * No hover effect on purpose: the operator wants buttons that look
 * identical at rest and on hover. Adding a transition or color shift here
 * would override that decision; cursor:pointer is the only hover signal.
 */

a.imgedit-btn-action,
button.imgedit-btn-action,
.btn.imgedit-btn-action,
.imgedit-btn-action,
a.imgedit-btn-action:focus,
button.imgedit-btn-action:focus,
.btn.imgedit-btn-action:focus,
.imgedit-btn-action:focus,
a.imgedit-btn-action:active,
button.imgedit-btn-action:active,
.btn.imgedit-btn-action:active,
.imgedit-btn-action:active,
a.imgedit-btn-action:hover,
button.imgedit-btn-action:hover,
.btn.imgedit-btn-action:hover,
.imgedit-btn-action:hover {
    background: var(--imgedit-btn-action-bg, #575757) !important;
    background-color: var(--imgedit-btn-action-bg, #575757) !important;
    border: 1px solid var(--imgedit-btn-action-bg, #575757) !important;
    border-color: var(--imgedit-btn-action-bg, #575757) !important;
    color: var(--imgedit-btn-action-fg, #ffffff) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
}

a.imgedit-btn-subaction,
button.imgedit-btn-subaction,
.btn.imgedit-btn-subaction,
.imgedit-btn-subaction,
a.imgedit-btn-subaction:focus,
button.imgedit-btn-subaction:focus,
.btn.imgedit-btn-subaction:focus,
.imgedit-btn-subaction:focus,
a.imgedit-btn-subaction:active,
button.imgedit-btn-subaction:active,
.btn.imgedit-btn-subaction:active,
.imgedit-btn-subaction:active,
a.imgedit-btn-subaction:hover,
button.imgedit-btn-subaction:hover,
.btn.imgedit-btn-subaction:hover,
.imgedit-btn-subaction:hover {
    background: var(--imgedit-btn-subaction-bg, #e5e5e5) !important;
    background-color: var(--imgedit-btn-subaction-bg, #e5e5e5) !important;
    border: 1px solid var(--imgedit-btn-subaction-bg, #e5e5e5) !important;
    border-color: var(--imgedit-btn-subaction-bg, #e5e5e5) !important;
    color: var(--imgedit-btn-subaction-fg, #1a1a1a) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
}

/* Disabled state. Bootstrap adds .disabled or [disabled]; we honour both
   so disabled action buttons look obviously inactive instead of just
   being click-dead. The disabled look does not depend on theme colors,
   on purpose - operators reading "this is disabled" should not have to
   parse a particular brand color. */
.imgedit-btn-action.disabled,
.imgedit-btn-action[disabled],
.imgedit-btn-subaction.disabled,
.imgedit-btn-subaction[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Size variants. We don't override Bootstrap's btn-lg / btn-sm / btn-xs
   so when a button has both .imgedit-btn-action and .btn-sm classes
   it still picks up the size from Bootstrap. The classes below only
   exist for the admin settings preview where we want size control
   without depending on Bootstrap markup at all. */
.imgedit-btn-preview {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 3px;
    font-weight: 500;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid transparent;
    cursor: default;
}
