/* ============================================================
   UDR semantic action buttons
   ------------------------------------------------------------
   Commit/share actions always use the UDR success-green standard.
   Supporting colors, radii, and surfaces use OnlineStore theme tokens.

   btn-commit       Save / submit / pay / confirm
   btn-share        Share
   btn-utility      Search / validate / refresh / preview / edit
   btn-export-icon  Excel / PDF icon-only export
   btn-comm         SMS / email
   btn-cancel       Cancel / back / close
   btn-destructive  Delete / void / remove / reverse
   ============================================================ */

:root {
    --udr-success: #28a745;
    --udr-success-hover: #218838;
    --udr-success-border: #1e7e34;
    --udr-success-ring: rgba(40, 167, 69, .5);
}

/*
   Final website-wide success-action contract. OnlineStore themes are rendered
   inside individual views after the layout styles and may otherwise replace a
   modal button's green background or white foreground. Keep these selectors
   specific enough to preserve the UDR standard regardless of load order.
*/
html body .btn.btn-commit,
html body .btn.btn-success,
html body .btn.btn-topup,
html body .btn.search-btn,
html body .btn.btn-report-search,
html body .btn.btn-bp-search,
html body .btn.btn-find-client,
html body .btn.btn-sc-search,
html body .btn.btn-pin-phone,
html body .btn.btn-rtr-phone {
    background: var(--udr-success, #28a745) !important;
    background-color: var(--udr-success, #28a745) !important;
    border-color: var(--udr-success, #28a745) !important;
    color: #fff !important;
}

html body .btn.btn-commit *,
html body .btn.btn-success *,
html body .btn.btn-topup *,
html body .btn.search-btn *,
html body .btn.btn-report-search *,
html body .btn.btn-bp-search *,
html body .btn.btn-find-client *,
html body .btn.btn-sc-search *,
html body .btn.btn-pin-phone *,
html body .btn.btn-rtr-phone * {
    color: #fff !important;
}

html body .btn.btn-commit:hover,
html body .btn.btn-commit:focus,
html body .btn.btn-commit:active,
html body .btn.btn-success:hover,
html body .btn.btn-success:focus,
html body .btn.btn-success:active,
html body .btn.btn-topup:hover,
html body .btn.btn-topup:focus,
html body .btn.btn-topup:active,
html body .btn.search-btn:hover,
html body .btn.search-btn:focus,
html body .btn.search-btn:active,
html body .btn.btn-report-search:hover,
html body .btn.btn-report-search:focus,
html body .btn.btn-report-search:active,
html body .btn.btn-bp-search:hover,
html body .btn.btn-bp-search:focus,
html body .btn.btn-bp-search:active,
html body .btn.btn-find-client:hover,
html body .btn.btn-find-client:focus,
html body .btn.btn-find-client:active,
html body .btn.btn-sc-search:hover,
html body .btn.btn-sc-search:focus,
html body .btn.btn-sc-search:active,
html body .btn.btn-pin-phone:hover,
html body .btn.btn-pin-phone:focus,
html body .btn.btn-pin-phone:active,
html body .btn.btn-rtr-phone:hover,
html body .btn.btn-rtr-phone:focus,
html body .btn.btn-rtr-phone:active {
    background: var(--udr-success-hover, #218838) !important;
    background-color: var(--udr-success-hover, #218838) !important;
    border-color: var(--udr-success-border, #1e7e34) !important;
    color: #fff !important;
}

html body .btn.btn-commit:hover *,
html body .btn.btn-commit:focus *,
html body .btn.btn-commit:active *,
html body .btn.btn-success:hover *,
html body .btn.btn-success:focus *,
html body .btn.btn-success:active *,
html body .btn.btn-topup:hover *,
html body .btn.btn-topup:focus *,
html body .btn.btn-topup:active *,
html body .btn.search-btn:hover *,
html body .btn.search-btn:focus *,
html body .btn.search-btn:active *,
html body .btn.btn-report-search:hover *,
html body .btn.btn-report-search:focus *,
html body .btn.btn-report-search:active *,
html body .btn.btn-bp-search:hover *,
html body .btn.btn-bp-search:focus *,
html body .btn.btn-bp-search:active *,
html body .btn.btn-find-client:hover *,
html body .btn.btn-find-client:focus *,
html body .btn.btn-find-client:active *,
html body .btn.btn-sc-search:hover *,
html body .btn.btn-sc-search:focus *,
html body .btn.btn-sc-search:active *,
html body .btn.btn-pin-phone:hover *,
html body .btn.btn-pin-phone:focus *,
html body .btn.btn-pin-phone:active *,
html body .btn.btn-rtr-phone:hover *,
html body .btn.btn-rtr-phone:focus *,
html body .btn.btn-rtr-phone:active * {
    color: #fff !important;
}

html body .btn.btn-commit svg,
html body .btn.btn-commit svg *,
html body .btn.btn-success svg,
html body .btn.btn-success svg *,
html body .btn.btn-topup svg,
html body .btn.btn-topup svg *,
html body .btn.search-btn svg,
html body .btn.search-btn svg *,
html body .btn.btn-report-search svg,
html body .btn.btn-report-search svg *,
html body .btn.btn-bp-search svg,
html body .btn.btn-bp-search svg *,
html body .btn.btn-find-client svg,
html body .btn.btn-find-client svg *,
html body .btn.btn-sc-search svg,
html body .btn.btn-sc-search svg *,
html body .btn.btn-pin-phone svg,
html body .btn.btn-pin-phone svg *,
html body .btn.btn-rtr-phone svg,
html body .btn.btn-rtr-phone svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.btn-commit,
.btn-share,
.btn-utility,
.btn-export-icon,
.btn-comm,
.btn-cancel,
.btn-destructive {
    border-radius: var(--r-md, 14px);
    font-weight: 700;
    transition: background-color .18s ease, border-color .18s ease,
        color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Search actions attached to a text input are square on the joined edge. */
html body .btn.btn-report-search {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--r-md, 14px) !important;
    border-bottom-right-radius: var(--r-md, 14px) !important;
}

.btn-commit {
    color: #fff;
    background-color: var(--udr-success, #28a745);
    border-color: var(--udr-success, #28a745);
}
.btn-commit:hover,
.btn-commit:focus,
.btn-commit.focus {
    color: #fff;
    background-color: var(--udr-success-hover, #218838);
    border-color: var(--udr-success-border, #1e7e34);
}
.btn-commit:focus,
.btn-commit.focus {
    box-shadow: 0 0 0 .2rem var(--udr-success-ring, rgba(40, 167, 69, .5));
}
.btn-commit:disabled,
.btn-commit.disabled {
    color: #fff;
    background-color: var(--udr-success, #28a745);
    border-color: var(--udr-success, #28a745);
    opacity: .65;
}

/* Solid success buttons always have white labels and icons. */
.btn.btn-commit,
.btn.btn-commit *,
.btn.btn-success,
.btn.btn-success * {
    color: #fff !important;
}

/* Beat view-level card rules that set every descendant to black. */
body .content-wrapper .btn.btn-commit,
body .content-wrapper .btn.btn-commit *,
body .content-wrapper .btn.btn-success,
body .content-wrapper .btn.btn-success *,
body .modal .btn.btn-commit,
body .modal .btn.btn-commit *,
body .modal .btn.btn-success,
body .modal .btn.btn-success * {
    color: #fff !important;
}
.btn.btn-commit svg,
.btn.btn-commit svg *,
.btn.btn-success svg,
.btn.btn-success svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.btn-share {
    color: var(--udr-success, #28a745);
    background-color: transparent;
    border-color: var(--udr-success, #28a745);
}
.btn-share:hover,
.btn-share:focus {
    color: #fff;
    background-color: var(--udr-success, #28a745);
    border-color: var(--udr-success, #28a745);
}
.btn-share:focus,
.btn-share.focus {
    box-shadow: 0 0 0 .2rem var(--udr-success-ring, rgba(40, 167, 69, .5));
}
.btn-share:hover,
.btn-share:hover *,
.btn-share:focus,
.btn-share:focus *,
.btn-outline-success:hover,
.btn-outline-success:hover *,
.btn-outline-success:focus,
.btn-outline-success:focus * {
    color: #fff !important;
}
body .modal .btn.btn-share:hover,
body .modal .btn.btn-share:hover *,
body .modal .btn.btn-share:focus,
body .modal .btn.btn-share:focus * {
    color: #fff !important;
}

/* Success receipt headers are green in every OnlineStore variant. */
.online-sale-success-header,
.online-sale-success-header .modal-title,
.online-sale-success-header .receipt-host-response,
.online-sale-success-header .close,
.online-sale-success-header .close *,
#receiptModal .modal-header,
#receiptModal .modal-header .modal-title,
#receiptModal .modal-header .receipt-host-response,
#receiptModal .modal-header .close,
#receiptModal .modal-header .close * {
    color: #fff !important;
}

.online-sale-success-header,
#receiptModal .modal-header {
    background: #28a745 !important;
    background-color: #28a745 !important;
    border-bottom: 1px solid #218838 !important;
}
.btn-share:hover svg,
.btn-share:hover svg *,
.btn-share:focus svg,
.btn-share:focus svg *,
.btn-outline-success:hover svg,
.btn-outline-success:hover svg *,
.btn-outline-success:focus svg,
.btn-outline-success:focus svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.btn-utility {
    color: var(--info, #2f6fb0);
    background-color: transparent;
    border-color: var(--info, #2f6fb0);
}
.btn-utility:hover,
.btn-utility:focus {
    color: #fff;
    background-color: var(--info, #2f6fb0);
    border-color: var(--info, #2f6fb0);
}
.btn-utility:focus,
.btn-utility.focus {
    box-shadow: 0 0 0 .2rem var(--accent-ring, rgba(47, 111, 176, .2));
}
.btn-utility:disabled,
.btn-utility.disabled {
    color: var(--info, #2f6fb0);
    background-color: transparent;
    border-color: var(--info, #2f6fb0);
    opacity: .65;
}

.btn.btn-export-icon,
.btn-comm,
.btn-cancel {
    color: var(--ink, #1a1316);
    background-color: var(--surface, #fff);
    border-color: var(--line, #ced4da);
}
.btn.btn-export-icon:hover,
.btn.btn-export-icon:focus,
.btn-comm:hover,
.btn-comm:focus,
.btn-cancel:hover,
.btn-cancel:focus {
    color: var(--ink, #1a1316);
    background-color: var(--surface-sunk, #f8f9fa);
    border-color: var(--ink-soft, #6e646a);
}
.btn.btn-export-icon:focus,
.btn.btn-export-icon.focus,
.btn-comm:focus,
.btn-comm.focus,
.btn-cancel:focus,
.btn-cancel.focus {
    box-shadow: 0 0 0 .2rem var(--accent-ring, rgba(108, 117, 125, .25));
}
.btn-export-icon img {
    background-color: #fff;
}

/* Excel/PDF controls are document utilities, never success actions. Some
   legacy views also carry btn-commit, so this explicit exception must win. */
html body .btn.btn-export-icon,
html body .btn.btn-export-icon:hover,
html body .btn.btn-export-icon:focus,
html body .btn.btn-export-icon:active,
html body .btn.btn-export-icon.disabled,
html body .btn.btn-export-icon:disabled {
    color: #212529 !important;
    background: #fff !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

html body .btn.btn-export-icon:hover,
html body .btn.btn-export-icon:focus,
html body .btn.btn-export-icon:active {
    border-color: #adb5bd !important;
}

html body .btn.btn-export-icon:focus,
html body .btn.btn-export-icon.focus {
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .25) !important;
}

html body .btn.btn-export-icon img {
    background: #fff !important;
    background-color: #fff !important;
}

.btn-destructive {
    color: #fff;
    background-color: var(--bad, #c0473a);
    border-color: var(--bad, #c0473a);
}
.btn-destructive:hover,
.btn-destructive:focus,
.btn-destructive.focus {
    color: #fff;
    background-color: #9f3027;
    border-color: #9f3027;
}
.btn-destructive:focus,
.btn-destructive.focus {
    box-shadow: 0 0 0 .2rem rgba(192, 71, 58, .25);
}

/* AdminLTE card toggles are utility controls, not commit actions. */
.btn.btn-outline-success[data-card-widget="collapse"] {
    color: var(--info, #2f6fb0);
    background-color: transparent;
    border-color: var(--info, #2f6fb0);
    border-radius: var(--r-md, 14px);
}
.btn.btn-outline-success[data-card-widget="collapse"]:hover,
.btn.btn-outline-success[data-card-widget="collapse"]:focus {
    color: #fff;
    background-color: var(--info, #2f6fb0);
    border-color: var(--info, #2f6fb0);
    box-shadow: 0 0 0 .2rem var(--accent-ring, rgba(47, 111, 176, .2));
}

/*
   Authoritative semantic colors. View-specific stylesheets are loaded after
   the shared layout in parts of OnlineStore, so these rules intentionally use
   a stronger selector and !important to keep every action consistent.
*/
html body .btn.btn-share {
    color: var(--udr-success, #28a745) !important;
    background: transparent !important;
    border-color: var(--udr-success, #28a745) !important;
}
html body .btn.btn-share:hover,
html body .btn.btn-share:focus,
html body .btn.btn-share:active {
    color: #fff !important;
    background: var(--udr-success, #28a745) !important;
    border-color: var(--udr-success, #28a745) !important;
}

html body .btn.btn-utility {
    color: var(--info, #2f6fb0) !important;
    background: transparent !important;
    border-color: var(--info, #2f6fb0) !important;
}
html body .btn.btn-utility:hover,
html body .btn.btn-utility:focus,
html body .btn.btn-utility:active {
    color: #fff !important;
    background: var(--info, #2f6fb0) !important;
    border-color: var(--info, #2f6fb0) !important;
}

html body .btn.btn-comm,
html body .btn.btn-cancel {
    color: var(--ink, #1a1316) !important;
    background: var(--surface, #fff) !important;
    border-color: var(--line, #ced4da) !important;
}
html body .btn.btn-comm:hover,
html body .btn.btn-comm:focus,
html body .btn.btn-comm:active,
html body .btn.btn-cancel:hover,
html body .btn.btn-cancel:focus,
html body .btn.btn-cancel:active {
    color: var(--ink, #1a1316) !important;
    background: var(--surface-sunk, #f8f9fa) !important;
    border-color: var(--ink-soft, #6e646a) !important;
}

html body .btn.btn-destructive {
    color: #fff !important;
    background: var(--bad, #c0473a) !important;
    border-color: var(--bad, #c0473a) !important;
}
html body .btn.btn-destructive:hover,
html body .btn.btn-destructive:focus,
html body .btn.btn-destructive:active {
    color: #fff !important;
    background: #9f3027 !important;
    border-color: #9f3027 !important;
}

html body .btn.btn-share *,
html body .btn.btn-utility:hover *,
html body .btn.btn-utility:focus *,
html body .btn.btn-utility:active *,
html body .btn.btn-destructive * {
    color: inherit !important;
}

/* Standard green/white header for UDR informational and success modals. */
.udr-modal-header,
.online-sale-success-header,
#receiptModal .modal-header {
    color: #fff !important;
    background: var(--udr-success, #28a745) !important;
    border-bottom: 1px solid var(--udr-success-hover, #218838) !important;
}
.udr-modal-header .modal-title,
.udr-modal-header .close,
.udr-modal-header .close *,
.online-sale-success-header .modal-title,
.online-sale-success-header .close,
.online-sale-success-header .close * {
    color: #fff !important;
}