/* burble-core.css / core-feedback.css: Banner, toast, empty state, result.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Banner ───────────────────────────────────────────────────
   A standing note inside a card: what a setting will do, or what is missing
   before it can be used. Not a flash message — nothing dismisses it and it is
   part of the form, so it is written into the markup rather than raised by a
   script. For the transient kind see #ba-toast-container.

   Usage: <div class="bc-banner bc-banner--info"><i …></i> Text</div>

   The icon keeps its size while the text wraps beside it, and rides 1px down
   so it sits on the first line rather than above it. Both element names are
   listed because the two pages this came from disagreed. */
.bc-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.bc-banner > svg,
.bc-banner > i {
  flex-shrink: 0;
  margin-top: 1px;
}
.bc-banner--info {
  background: var(--blue-bg);
  border-color: var(--blue-light);
  color: var(--blue);
}
.bc-banner--warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-strong);
}
/* Something is set up and working. */
.bc-banner--success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-strong);
}
/* Something is off or failing: a disabled safeguard, a failed connection. */
.bc-banner--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-strong);
}
/* A link in a banner is the usual teal link (burble-core.css), set in
   the banner's weight so it holds its own against the tinted text; code is
   set on white so it stands off the tint. */
.bc-banner a {
  font-weight: 600;
}
/* In a .bc-stack the stack spaces the blocks, so a banner adds none of its own. */
.bc-stack > .bc-banner {
  margin-bottom: 0;
}
.bc-banner code {
  padding: 1px 4px;
  color: inherit;
  background: var(--white);
  border-radius: 4px;
}
/* A longer note: a small caps heading over a numbered list, both in the
   banner's own colour. The icon sits beside them as it does beside plain text.
   Usage: <div class="bc-banner bc-banner--info"><i …></i>
            <div><div class="bc-banner-title">How this works</div>
                 <ol class="bc-banner-list"><li>…</li></ol></div></div>
   Folded in from .ms-intro (Membership Settings). */
.bc-banner-title {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bc-banner-list {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  font-size: 13px;
  line-height: 1.65;
}
.bc-banner-list strong {
  font-weight: 600;
}

/* ── Toast ────────────────────────────────────────────────────
   Transient notices, raised with window.rdShowToast(message, type) into
   #ba-toast-container: by burble-admin.js in the admin shell, and by
   extensions/ba-toast.js on the login pages, which don't load that script.
   type is success | danger | warning | info, shown as the left border.

   Here rather than in burble-admin.css so every layout that loads the core
   gets it. It used to be restated in extensions/ba-toast.css, a copy that
   the login pages loaded on top of this one and that had drifted to raw hex. */
/* Top centre of the content: just below the admin topbar and right of the
   sidebar (--header-h, --sidebar-w, burble-admin.css, which also moves it for
   the collapsed sidebar and the phone drawer); the window's top centre on the
   pages without them. It spans the content so the stack centres without a
   transform; pointer-events let clicks through around the toasts. */
#ba-toast-container {
  position: fixed;
  top: calc(var(--header-h, 0px) + 16px);
  left: var(--sidebar-w, 0px);
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
@keyframes ba-toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Out in two steps: fade and lift away (to 60%), then close the gap it leaves,
   so the toasts below move up only once it has gone. */
@keyframes ba-toast-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 200px;
  }
  60% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    max-height: 200px;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -10px;
  }
}
.bc-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 300px;
  max-width: 380px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--white);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
  font-size: 13.5px;
  line-height: 1.5;
  animation: ba-toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bc-toast--hiding {
  animation: ba-toast-out 0.4s ease forwards;
  pointer-events: none;
}
/* min-width: 0 lets the body shrink below its longest word, and overflow-wrap
   breaks one that has no spaces (a URL, a JSON error), so the text stays
   inside the toast and the × stays beside it. */
.bc-toast-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}
.bc-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sl-400);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}
.bc-toast-close:hover {
  color: var(--text-strong);
}
.bc-toast--success {
  border-color: var(--success);
}
.bc-toast--danger {
  border-color: var(--danger);
}
/* --warn: there is no --warning token, so this border never drew in the admin. */
.bc-toast--warning {
  border-color: var(--warn);
}
.bc-toast--info {
  border-color: var(--info);
}

/* ── Loading ──────────────────────────────────────────────────
   What a list shows in place of its table while the data is on its way: a
   .bc-spinner beside a line of text, centred. The page shows the table and
   hides this when the data arrives. Was .mp2-loading on the products grid.

   Usage: <div class="bc-loading" id="…-loading">
            <span class="bc-spinner" aria-hidden="true"></span>
            Loading products…
          </div> */
.bc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px;
  font-size: 13px;
  color: var(--text-soft);
}
/* display:flex outranks the browser's own [hidden] rule. */
.bc-loading[hidden] {
  display: none;
}

/* ── Empty state ──────────────────────────────────────────────
   What a list or card shows when it has nothing in it. Render it with
   common/burble-admin/components/empty_state.php rather than by hand:

     <div class="bc-empty">
       <div class="bc-feature-icon bc-feature-icon--slate"><i class="fas fa-key"></i></div>
       <div class="bc-empty-title">No API keys yet</div>
       <p>Create your first API key to enable integrations</p>
       <a class="bc-btn bc-btn--primary" href="…">Create API Key</a>
     </div>

   The icon is the shared .bc-feature-icon, so its tints are the same set.
   No padding of its own: the card body around it supplies that. Replaces
   .ma-empty, .cr-empty, .mu-empty, .ph-empty, .req-empty, .rl-empty and
   .qb-empty, seven copies of one block.                               */
.bc-empty {
  text-align: center;
  margin: auto;
  width: fit-content;
  max-width: 600px;
  padding: 50px;
}
.bc-empty > .bc-feature-icon {
  margin: 0 auto 12px;
}
.bc-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.bc-empty > p {
  color: var(--text-soft);
  margin: 0 0 20px;
}
.bc-empty > p:last-child {
  margin-bottom: 0;
}

/* ── Result ───────────────────────────────────────────────────
   The outcome of a flow, centred on its own: a round tinted icon, a title and
   a line or two of text — "Account confirmed", "Check your inbox". Unlike
   .bc-empty it carries no padding of its own; it sits in the card it ends.

     <div class="bc-result">
       <div class="bc-result-icon bc-result-icon--success"><i class="fas fa-check"></i></div>
       <div class="bc-result-title">Registration complete</div>
       <p class="bc-result-text">…</p>
     </div>                                                           */
.bc-result {
  margin-bottom: 20px;
  text-align: center;
}
.bc-result:last-child {
  margin-bottom: 0;
}
.bc-result-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--white);
  background: var(--sl-400);
}
.bc-result-icon--success {
  background: var(--success);
}
.bc-result-icon--info {
  background: var(--info);
}
.bc-result-icon--warn {
  background: var(--warn);
}
.bc-result-icon--danger {
  background: var(--danger);
}
.bc-result-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--sl-900);
}
.bc-result-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}
.bc-result-text:last-child {
  margin-bottom: 0;
}

/* ── Validation tip ───────────────────────────────────────────
   Stands in for the browser's "Please fill out this field" bubble, which
   cannot be styled. extensions/ba-validation.js puts one under the first
   invalid field on submit, positioned in page coordinates on <body>.
   ?ba-validation-pin keeps it open for inspection.                     */
.bc-validation-tip {
  position: absolute;
  z-index: 1090; /* above .bc-modal (1040) and Bootstrap's tooltip (1070) */
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 280px;
  padding: 7px 10px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-rest);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  animation: bc-validation-tip-in 0.15s ease-out both;
}
.bc-validation-tip > i {
  margin-top: 2px;
  color: var(--danger);
}
/* Arrow pointing up at the field: ::before is the border, ::after the fill. */
.bc-validation-tip::before,
.bc-validation-tip::after {
  content: "";
  position: absolute;
  left: 14px;
  border: 6px solid transparent;
  border-top: 0;
}
.bc-validation-tip::before {
  top: -7px;
  border-bottom: 7px solid var(--danger);
}
.bc-validation-tip::after {
  top: -6px;
  border-bottom: 7px solid var(--white);
}
@keyframes bc-validation-tip-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}