/* The loading region overlays its own card; it does not enlarge the document. */
/* Wingman is mounted after the initial loader measurement. Its normal 76px
   page clearance and the legacy card's 60px margin are only needed for rows. */
main.bb-main:has(.is-table-loading) {
    padding-bottom: 24px !important;
    transition: none !important;
}
.wrapper-view:has(.is-table-loading) {
    margin-bottom: 0 !important;
    transition: none !important;
}
.bb-table-region,
.ds-table .data-tables,
.sales-table,
.stafter-table-wrapper { position: relative; }
/* Keep existing rows in layout, but never paint them while their loader is
   active (including rows inserted before the request's completion handler). */
.is-table-loading > :not(.bb-table-loading) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}
.is-table-loading {
    transition: none !important;
}.bb-table-region.is-table-loading,
.stafter-table-wrapper.is-table-loading { min-height: var(--bb-table-loading-height, 0px); }
#data-tables.is-table-loading,
.data-tables.is-table-loading,
.bb-my-tasks__list.is-table-loading { min-height: var(--bb-table-loading-height, 0px) !important; }
/* Initial loads and filter reloads share the same available viewport height. */
.is-table-loading:has(> .bb-table-loading),
#data-tables.is-table-loading:has(> .bb-table-loading) {
    box-sizing: border-box;
    height: var(--bb-table-loading-height, 0px) !important;
    min-height: var(--bb-table-loading-height, 0px) !important;
    max-height: var(--bb-table-loading-height, 0px) !important;
    overflow: hidden !important;
    flex-shrink: 0;
}
.stafter-table-wrapper.is-table-initial {
    height: var(--bb-table-loading-height, 0px);
    overflow: hidden;
}
.is-table-loading:has(> .bb-table-loading:not(.d-none)) .stafter-table-wrapper.is-table-initial {
    height: 0;
    min-height: 0;
}
.stafter-table-wrapper.is-table-initial > .stafter-table-top,
.stafter-table-wrapper.is-table-initial > .table-container,
.stafter-table-wrapper.is-table-initial > .stafter-table-bottom { visibility: hidden; }
.stafter-table-wrapper.is-table-first-error > .stafter-table-top,
.stafter-table-wrapper.is-table-first-error > .table-container,
.stafter-table-wrapper.is-table-first-error > .stafter-table-bottom { display: none; }
.bb-table-loading,
#data-tables .bb-table-loading,
.wrapper-view > .bb-table-loading,
.data-tables > .bb-table-loading,
.stafter-table-wrapper > .bb-table-loading {
    position: absolute !important;
    transition: none !important;
    animation: none !important;
    inset: var(--bb-table-loading-offset, 0px) auto auto 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: var(--bb-table-loading-height, 0px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px);
    padding: 0;
    margin: 0;
    /* a soft inset panel instead of a flat white sheet (owner, 2026-10-01): light grey
       fill, hairline edge, rounded corners and a faint inner shadow — all skin tokens */
    border: 1px solid var(--bb-border) !important;
    border-radius: var(--bb-radius-l);
    background: var(--bb-inset) !important;
    box-shadow: inset var(--bb-shadow-1);
    opacity: 1 !important;
    z-index: 50 !important;
    box-sizing: border-box;
    overflow: hidden;
}
/* Reports keeps its own square white table box: only the grey fill changes there
   (owner, 2026-10-01) — no rounding, edge or shadow tucked under its corners. */
.sales-table > .bb-table-loading {
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
}
.bb-table-loading[hidden],
.bb-table-loading.d-none,
#data-tables .bb-table-loading[hidden],
#data-tables .bb-table-loading.d-none { display: none !important; }
/* the mascot sits on a large soft glow in the panel's own colour, so it clears the
   silhouette behind it and fades into it (owner-approved draft, 2026-10-01) */
.bb-table-loading .bb-table-loading__indicator {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
    width: 260px;
    height: 260px;
    flex: none;
    margin: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--bb-inset) 0%, var(--bb-inset) 38%, color-mix(in srgb, var(--bb-inset) 70%, transparent) 58%, transparent 100%);
}

/* ---- loading silhouette (<x-bb.loading-silhouette>): simple shapes of what is coming, fading toward the bottom ----
   shapes: table (lists) · form (Call & Message Center) · rows (Website Builder pages) · settings (other settings tabs) */
.bb-sk {
    position: absolute;
    inset: 0;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
}
.bb-sk b { display: block; }
.bb-sk:not(.bb-sk--table) {
    padding: 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.bb-sk .sk-br { height: 9px; border-radius: 5px; background: var(--bb-border); flex: none; }
.bb-sk .sk-t { height: 12px; background: var(--bb-border-strong); }
.bb-sk .sk-bx { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--bb-border-strong); box-sizing: border-box; }
.bb-sk .sk-sq { width: 36px; height: 36px; border-radius: 10px; background: var(--bb-border); flex: none; }
.bb-sk .sk-pill { height: 30px; border-radius: var(--bb-radius-m); background: var(--bb-border); flex: none; }
.bb-sk .sk-tag { height: 18px; width: 70px; border-radius: 5px; background: var(--bb-border); flex: none; }
.bb-sk .sk-tog { width: 38px; height: 20px; border-radius: 999px; background: var(--bb-border-strong); flex: none; }
.bb-sk .sk-chip { height: 20px; width: 70%; border-radius: 999px; background: var(--bb-border); }
.bb-sk .sk-input { height: 38px; flex: 1; border-radius: var(--bb-radius-m); border: 1px solid var(--bb-border-strong); box-sizing: border-box; }
.bb-sk .sk-card { border: 1px solid var(--bb-border); border-radius: 14px; padding: 18px 20px; box-sizing: border-box; }
.bb-sk .sk-txt { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.bb-sk .sk-head { display: flex; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--bb-border); margin-bottom: 16px; }
.bb-sk .sk-head.is-flat { border: 0; margin: 0; padding: 0; }
/* table */
.bb-sk .sk-toolbar { display: flex; gap: 12px; margin-bottom: 18px; flex: none; }
.bb-sk .sk-toolbar i { flex: 1; }
.bb-sk .sk-row {
    display: grid;
    grid-template-columns: 22px 60px 1.6fr 1fr 1fr 1.4fr .9fr 1fr;
    gap: 22px;
    align-items: center;
    flex: none;
    height: 52px;
    padding: 0 8px;
    border-bottom: 1px solid var(--bb-border);
}
.bb-sk .sk-row.is-head { height: 40px; border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--bb-border) 45%, transparent); }
.bb-sk .sk-row.is-head .sk-br { height: 8px; width: 55%; background: var(--bb-border-strong); }
.bb-sk .sk-two { display: flex; flex-direction: column; gap: 7px; }
.bb-sk .sk-fade { flex: 1; min-height: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* form */
.bb-sk__form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.bb-sk .sk-sec { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 18px; margin-bottom: 16px; border-bottom: 1px solid var(--bb-border); }
.bb-sk .sk-sec:last-child { border-bottom: 0; }
.bb-sk .sk-field { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
/* rows */
.bb-sk__rows { display: flex; flex-direction: column; gap: 14px; }
.bb-sk .sk-top { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.bb-sk .sk-pagerow { display: grid; grid-template-columns: 36px 1.5fr 1fr 1fr 1.2fr; gap: 22px; align-items: center; padding: 18px 20px; border: 1px solid var(--bb-border); border-left: 4px solid var(--bb-border-strong); border-radius: 12px; }
.bb-sk .sk-stack { display: flex; flex-direction: column; gap: 8px; }
.bb-sk .sk-line { display: flex; gap: 10px; align-items: center; }
.bb-sk .sk-btns { display: flex; gap: 10px; justify-content: flex-end; }
/* settings (below a settings tab's real title, tabs and intro: setting cards) */
.bb-sk .sk-pgcols { display: grid; grid-template-columns: 1.08fr 1fr; gap: 22px; align-items: start; }
.bb-sk .sk-pgstack { display: flex; flex-direction: column; gap: 18px; }
.bb-sk .sk-pair { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.bb-sk .sk-fld { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.bb-sk .sk-fld .sk-input { flex: none; }
/* a soft light sweep travelling across the shapes */
.bb-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bb-surface) 55%, transparent) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: bb-table-loading-sweep 1.6s ease-in-out infinite;
}
@keyframes bb-table-loading-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
    .bb-sk::after { animation: none; }
}
.bb-table-loading__ring {
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
    flex: none;
}
.bb-table-loading__wave {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 0;
    height: 0;
    border: 5px solid var(--bb-text-3);
    border-radius: 50%;
    opacity: 0;
    animation: bb-table-loading-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.bb-table-loading__wave:nth-child(2) { animation-delay: -0.5s; }
.bb-table-loading__mascot {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    object-fit: contain;
}
@keyframes bb-table-loading-ripple {
    0%, 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}