/* flow_buttons.css — 4.259.0. One button, everywhere.
 *
 * Kevin, with the purchase order's header row (Transaction Center · Customers ·
 * Sync Queue · Save As Draft · Print · PDF · Email · Save · Make a copy): "can
 * you make sure all the buttons on the transaction pages and site wide are this
 * size and clean them up and make sure we still have the colors and pulsing
 * where needed".
 *
 * Read from production on 29 Sep, a .btn was anything from 24px to 46px tall
 * (the Sync Queue's row buttons 46px at 16px type, the builders' 38–39px, the
 * To Be Billed filters 999px pills), and every page's own button family
 * (.k-btn, .tc-btn, .cf-btn, …) had its own idea. This is the header row's
 * button, measured: 36px, 14px at weight 760, 0 14px, 10px corners.
 *
 * Only size and shape are set here — never background, border colour, shadow
 * or animation — so each button keeps the colour it has, and anything that
 * pulses (the ship floor's Shipped button, say) still pulses. The one colour
 * section below puts back what an older dark-theme rule flattened: that rule
 * painted every button the same dark blue, so a red Delete, a green Approve or
 * an amber warning read like any other button.
 *
 * Specificity: :not(#flow-btn-x) lends each rule an id's weight, so a page's own
 * `.something .btn{padding:…!important}` no longer wins the size back.
 * Loaded on every page by the server, last in <head>.
 */

/* ---------------------------------------------------------------- the size */
html body :is(.btn,.k-btn,.tc-btn,.te-btn,.trq-btn,.flow-btn,.flow-top-button,.flow-header-btn,.fsu-btn,.nsg-btn,.cnn-btn,.csr-btn,.cs-btn,.sb-btn,.edi-btn,.bp-btn,.ca-btn,.cf-btn,.al-btn,.um-btn,.pa-btn,.fe-btn,.cc-btn,.rq-btn,.rb-btn):not(.flow-tile):not(.flow-row):not(.atlas-321-icon-btn):not(.atlas-321-edit-customer):not(.mini-action-btn):not([data-flow-btn="free"]):not(#flow-btn-x){
  min-height:36px!important;height:auto!important;padding:0 14px!important;
  font-size:14px!important;font-weight:760!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;
  border-radius:10px!important;border-width:1px!important;border-style:solid!important;
  gap:6px;white-space:nowrap;text-decoration:none!important;vertical-align:middle;cursor:pointer;box-sizing:border-box
}
html body a:is(.btn,.k-btn,.tc-btn,.te-btn,.flow-btn,.flow-top-button):not(#flow-btn-x){align-items:center;justify-content:center}
html body :is(.btn,.k-btn,.tc-btn,.te-btn,.trq-btn,.flow-btn,.flow-top-button,.cs-btn,.sb-btn,.edi-btn,.bp-btn,.ca-btn,.cf-btn,.al-btn,.um-btn,.pa-btn,.fe-btn,.cc-btn,.rq-btn,.rb-btn) svg{flex:none;width:15px;height:15px;vertical-align:-2px}

/* the small ones inside a section head or a row: the same button, a step down */
html body :is(.mini-action-btn,.bo-add-btn):not(#flow-btn-x){
  min-height:30px!important;height:auto!important;padding:0 10px!important;font-size:12.5px!important;font-weight:700!important;line-height:1.2!important;
  border-radius:8px!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap
}

/* a button that cannot be pressed looks it, and does not lift */
html body :is(.btn,.k-btn,.tc-btn,.te-btn,.trq-btn,.flow-btn,.flow-top-button,.cs-btn,.sb-btn,.edi-btn,.bp-btn,.ca-btn,.cf-btn,.al-btn,.um-btn,.pa-btn,.fe-btn,.cc-btn,.rq-btn,.rb-btn,.fsu-btn,.nsg-btn,.cnn-btn,.csr-btn,.mini-action-btn):is(:disabled,[aria-disabled="true"]):not(#flow-btn-x){opacity:.5!important;cursor:not-allowed!important;transform:none!important;filter:none!important}

/* ---------------------------------------------------------------- the colours (dark theme) */
/* primary — the one to press */
html:not([data-flow-theme="light"]) body :is(.btn,button):is(.primary,.pri,.go):not(:disabled):not(#flow-btn-x){background:linear-gradient(180deg,#0f6fb8,#075a94)!important;border-color:#2e93d6!important;color:#fff!important}
/* danger — Delete, Void, Disconnect */
html:not([data-flow-theme="light"]) body :is(.btn,button).danger:not(#flow-btn-x){background:linear-gradient(180deg,rgba(255,107,107,.16),rgba(255,107,107,.07))!important;border-color:rgba(255,120,120,.6)!important;color:#ffb3ba!important}
html:not([data-flow-theme="light"]) body :is(.btn,button).danger:not(:disabled):hover:not(#flow-btn-x){background:rgba(255,107,107,.26)!important;border-color:#ff8a8a!important;color:#fff!important}
/* good — Approve, Release, Mark paid */
html:not([data-flow-theme="light"]) body :is(.btn,button):is(.ok,.success,.good):not(#flow-btn-x){background:linear-gradient(180deg,rgba(40,192,127,.2),rgba(40,192,127,.08))!important;border-color:rgba(60,210,140,.6)!important;color:#9ff5c9!important}
html:not([data-flow-theme="light"]) body :is(.btn,button):is(.ok,.success,.good):not(:disabled):hover:not(#flow-btn-x){background:rgba(40,192,127,.3)!important;color:#fff!important}
/* warning — needs a look before it is pressed */
html:not([data-flow-theme="light"]) body :is(.btn,button).warn:not(#flow-btn-x){background:linear-gradient(180deg,rgba(245,181,61,.18),rgba(245,181,61,.07))!important;border-color:rgba(245,181,61,.6)!important;color:#ffd98a!important}
/* ghost — quiet */
html:not([data-flow-theme="light"]) body :is(.btn,button).ghost:not(#flow-btn-x){background:transparent!important}

/* light theme: the same meaning on white */
html[data-flow-theme="light"] body :is(.btn,button).danger:not(#flow-btn-x){color:#b4232f!important;border-color:rgba(192,38,52,.45)!important;background:rgba(192,38,52,.06)!important}
html[data-flow-theme="light"] body :is(.btn,button):is(.ok,.success,.good):not(#flow-btn-x){color:#0f7a4f!important;border-color:rgba(21,147,95,.45)!important;background:rgba(21,147,95,.07)!important}
html[data-flow-theme="light"] body :is(.btn,button).warn:not(#flow-btn-x){color:#8a5a00!important;border-color:rgba(183,121,31,.5)!important;background:rgba(183,121,31,.08)!important}

/* ---------------------------------------------------------------- what pulses, pulses */
/* The ship floor's Shipped button: its amber and its glow (atlas_3_40 /
   atlas_so_shipments.js) had lost the amber to the flattening rule. */
html:not([data-flow-theme="light"]) body .ful-shipped-btn:not(#flow-btn-x){border-color:rgba(255,190,120,.6)!important;background:linear-gradient(180deg,rgba(255,180,90,.2),rgba(255,140,60,.12))!important;color:#ffd9ad!important}
html:not([data-flow-theme="light"]) body .ful-shipped-btn:not(:disabled):hover:not(#flow-btn-x){border-color:rgba(255,200,140,.95)!important;color:#fff!important}
/* A button a page marks as waiting on you — unsaved changes, say — breathes.
   Any page can use it: class="btn primary flow-attn". */
html body :is(.btn,button).flow-attn:not(:disabled):not(#flow-btn-x){animation:flowBtnAttn 2.2s ease-in-out infinite}
@keyframes flowBtnAttn{0%,100%{box-shadow:0 0 0 0 rgba(46,147,214,.55)}50%{box-shadow:0 0 0 5px rgba(46,147,214,0),0 0 16px 2px rgba(46,147,214,.35)}}
@media (prefers-reduced-motion:reduce){html body :is(.btn,button).flow-attn:not(#flow-btn-x){animation:none;box-shadow:0 0 0 2px rgba(46,147,214,.45)}}

/* keyboard focus is visible on every one of them */
html body :is(.btn,.k-btn,.tc-btn,.te-btn,.trq-btn,.flow-btn,.flow-top-button,.cs-btn,.sb-btn,.edi-btn,.bp-btn,.ca-btn,.cf-btn,.al-btn,.um-btn,.pa-btn,.fe-btn,.cc-btn,.rq-btn,.rb-btn,.fsu-btn,.nsg-btn,.cnn-btn,.csr-btn,.mini-action-btn):focus-visible:not(#flow-btn-x){outline:2px solid #4aa3ff!important;outline-offset:2px!important}

/* a phone keeps a thumb-sized target */
@media (max-width:640px){
  html body :is(.btn,.k-btn,.tc-btn,.te-btn,.flow-btn,.flow-top-button):not(.flow-tile):not(.flow-row):not(#flow-btn-x){min-height:40px!important}
}