/* flow_flat.css — 4.282.0. The queue's look, everywhere: no more bubbles.
 *
 * Kevin, over the sales-order builder in Classic view: "can we remove the
 * bubble UI from the classic view as well as any other view that has it". The
 * customer and vendor records already read this way (flow_party_record.css,
 * 4.258): flat panels on hairlines, corners that are corners, no glow, no
 * gloss, small upper-case heads, tabs underlined rather than pilled. This
 * carries that look to every staff page and every view of it — Classic,
 * Dossier, Command Center, Work Queues, Grid — without touching what a page
 * means: colours that say something (a red hold, a green paid, a tile's
 * stripe) stay; only the puff goes.
 *
 * Loaded on every staff page by the server, after flow_buttons.css. Never on
 * the customer's portal, and never inside a printed document (.tpl-sheet /
 * .tp-sheet / the print dialog), which have their own design.
 *
 * Specificity: :not(#flat-x) lends each rule an id's weight, and the rules are
 * !important, because the older layers set their radii with !important too.
 */
:root{
  --flat-r:6px;          /* a panel, a card, a tile */
  --flat-r-ctl:6px;      /* a button, an input */
  --flat-line:rgba(148,180,220,.16);
  --flat-line-strong:rgba(148,180,220,.26);
  --flat-panel:#0f1a2b;
  --flat-panel-2:#0c1624;
  --flat-accent:#4aa3ff;
}
html[data-flow-theme="light"]{--flat-line:#dde4ee;--flat-line-strong:#ccd6e3;--flat-panel:#ffffff;--flat-panel-2:#f6f8fb;--flat-accent:#2563eb}

/* ---------------------------------------------------------------- panels */
/* The corners themselves are capped by scripts/flow_flat.js, which reads what
   each box actually drew: CSS cannot say "at most 6px", only "exactly", and
   "exactly" would round what is square today and square what is round on
   purpose (a status pill, a dot, an avatar, a switch). */
/* the glossy two-tone fills of the builder's own cards go flat */
html body :is(.transaction-builder-card,.atlas-319-address-card,.atlas-320-summary-card,.atlas-320-confirmation-card,.transaction-top,.atlas-318-form-toolbar,.line-row,.summary-box,.atlas-320-line-payload):not(#flat-x){
  background-image:none!important;
  border-color:var(--flat-line)!important;
}
html body :is(.transaction-builder-card,.atlas-319-address-card,.atlas-320-summary-card,.atlas-320-confirmation-card,.atlas-320-line-payload):not(#flat-x){background-color:var(--flat-panel)!important}
html body .line-row:not(#flat-x){background-color:var(--flat-panel-2)!important}
/* an element inside a card is not a card of its own */
html body :is(.atlas-320-confirmation-card,.atlas-320-summary-card) :is([class*="card"],[class*="box"]):not(#flat-x){border-radius:6px!important}

/* ---------------------------------------------------------------- controls */
html body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus-visible:not(#flat-x){outline:2px solid var(--flat-accent)!important;outline-offset:1px}

/* ---------------------------------------------------------------- tabs */
/* pills in a row become underline tabs, as on the customer record */
html body .atlas-318-tabs:not(#flat-x){
  display:flex!important;gap:2px!important;padding:0!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--flat-line-strong)!important;border-radius:0!important;
}
html body .atlas-318-tabs > button:not(#flat-x):not(#flow-btn-x){
  background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;
  min-height:38px!important;padding:0 14px!important;margin:0 0 -1px!important;color:inherit;opacity:.72;box-shadow:none!important;
}
html body .atlas-318-tabs > button:hover:not(#flat-x):not(#flow-btn-x){opacity:1;background:transparent!important}
html body .atlas-318-tabs > button:is(.active,[aria-selected="true"]):not(#flat-x):not(#flow-btn-x){opacity:1;border-bottom-color:var(--flat-accent)!important;background:transparent!important}

/* ---------------------------------------------------------------- tiles */
/* KPI tiles keep their colour stripe; they lose the puff.
   4.322.0 — EXCEPT A LIVE ONE. Kevin: "I want them to pulse and glow and they
   weren't." The Ship Floor's Ship Today / Next Day Air / Approved to Partial
   tiles (and the Hold-for-payment tile) pulse by animating their box-shadow,
   and an !important box-shadow:none beats an animation — this rule had been
   holding every live tile flat since 4.282. A tile that is .live keeps its
   glow; the flat look is for tiles at rest. */
html body :is(.flow-tile,[class*="aging"] [class*="tile"],[class*="aging"] > div > div):not(#flat-x):not(.live){box-shadow:none!important}

/* ---------------------------------------------------------------- the view switcher and other pill rows */
html body :is([class*="view-switch"],[class*="views-bar"],[class*="segmented"]) :is(button,a):not(#flat-x):not(#flow-btn-x){border-radius:6px!important}