/* ==========================================================================
   BulkSMS Integration Gateway - brand layer
   --------------------------------------------------------------------------
   Loaded after bootstrap.css / Site.css / custom.css by the rebranded
   _Layout.cshtml only. Every rule is scoped under body.brand so that pages
   still using _LayoutLegacy.cshtml (Views/Account, Views/Conversation) are
   untouched. Remove the "brand" class from <body> to roll back.
   ========================================================================== */

:root {
    /* Primary: Yale Blue */
    --blue-600: #001F2D;
    --blue-500: #00344F;
    --blue: #003B5E;
    --blue-300: #005A8F;
    --blue-200: #0074B8;
    --blue-100: #008EE0;
    /* Secondary: Crimson Carrot */
    --orange: #FF7900;
    --orange-600: #F55C03;
    --orange-400: #FF871F;
    --orange-disabled: #FFC9A3;
    /* Accent: Sky */
    --sky: #0AA5FF;
    --sky-300: #85D2FF;
    --sky-100: #D6F0FF;
    /* Neutrals */
    --n-900: #121217;
    --n-800: #1E1F27;
    --n-700: #2A2E3D;
    --n-600: #505568;
    --n-500: #8289A0;
    --n-400: #B3B8D3;
    --n-300: #D5D9EC;
    --n-200: #EAEDFC;
    --n-100: #F5F7FF;
    --white-1: #F3F5F7;
    --white-2: #F9FBFB;
    --white: #FFFFFF;
    /* Status */
    --error: #A13B34;
    --error-bg: #FCF6F6;
    --error-border: #E0B3AF;
    --danger-link: #B3261E;
    --success: #3E6B24;
    --success-bg: #EEF6E8;
    --warning: #9A5B12;
    --warning-bg: #FDF3E6;
    /* Shape and depth */
    --r-pill: 999px;
    --r-card: 24px;
    --r-modal: 28px;
    --r-input: 16px;
    --r-small: 10px;
    --shadow-menu: 0 12px 32px rgba(0,31,45,0.14);
    --shadow-modal: 0 24px 64px rgba(0,31,45,0.30);
    --overlay: rgba(0,31,45,0.55);
    --focus-ring: 0 0 0 3px var(--sky-100), 0 0 0 4px var(--blue-200);
    /* Gradients */
    --grad-hero: linear-gradient(90deg, #005A8F 0%, #003B5E 48%, #001F2D 100%);
    --grad-footer: linear-gradient(90deg, #00344F 0%, #001F2D 100%);
    /* Type */
    --font-display: 'Outfit', 'Lexend', system-ui, sans-serif;
    --font-body: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    /* Layout */
    --gutter: 80px;
    --header-h: 88px;
    --content-max: 1440px;
    /* Icons (data URIs) */
    --i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23003B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --i-chevron-right-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2385D2FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    --i-tick-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --i-tick-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FF7900' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --i-alert-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FF7900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    --i-info-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2385D2FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23505568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
    :root {
        --gutter: 24px;
    }
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body.brand {
    font-family: var(--font-body) !important; /* beats custom.css html,body !important */
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--n-700);
    background-color: var(--white-1);
    padding: 0; /* Site.css pads for the old fixed navbar */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.brand h1, body.brand h2, body.brand h3, body.brand h4,
body.brand .h1, body.brand .h2, body.brand .h3, body.brand .h4 {
    font-family: var(--font-display);
    color: var(--blue);
    letter-spacing: -0.005em;
}

body.brand h1, body.brand .h1 { font-size: 32px; font-weight: 700; line-height: 1.1; }
body.brand h2, body.brand .h2 { font-size: 24px; font-weight: 600; line-height: 1.15; }
body.brand h3, body.brand .h3 { font-size: 20px; font-weight: 600; line-height: 1.2; }
body.brand h4, body.brand .h4 { font-size: 17px; font-weight: 600; line-height: 1.25; }

body.brand h5, body.brand h6 {
    font-family: var(--font-body);
    color: var(--blue);
    letter-spacing: 0;
}

body.brand h5 { font-size: 17px; font-weight: 500; }
body.brand h6 { font-size: 15px; font-weight: 400; color: var(--n-700); }

body.brand p { color: inherit; }
body.brand p.lead { font-size: 18px; font-weight: 300; color: var(--n-700); line-height: 1.6; }
body.brand small, body.brand .small { font-size: 13px; }
body.brand .text-muted { color: var(--n-600) !important; }
body.brand .text-primary { color: var(--blue-200) !important; }
body.brand .text-danger { color: var(--error) !important; }
body.brand .text-success { color: var(--success) !important; }
body.brand .text-warning { color: var(--warning) !important; }
body.brand .orange, body.brand .emhpasize { color: var(--orange); }
body.brand hr { background: none; border: 0; border-top: 1px solid var(--n-200); padding: 0; margin: 24px 0; }
body.brand code, body.brand pre, body.brand kbd { font-family: var(--font-mono); }
body.brand pre { background: var(--white-2); border: 1px solid var(--n-200); border-radius: var(--r-small); padding: 16px; color: var(--n-700); }

/* Links (5.2) - not buttons, nav items, menu items or pager links */
body.brand a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.b-plain) {
    color: var(--blue-200);
    text-decoration: none;
}

body.brand a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.b-plain):hover {
    color: var(--blue);
    text-decoration: underline;
}

/* Focus ring (9: keyboard) */
body.brand a:focus-visible,
body.brand button:focus-visible,
body.brand [tabindex]:focus-visible,
body.brand .btn:focus-visible,
body.brand input[type="checkbox"]:focus-visible,
body.brand input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

body.brand .btn:focus:not(:focus-visible) { box-shadow: none; }

/* Legacy icon colours in content (custom.css forces black) */
body.brand .quickstart-icon,
body.brand .file-icon,
body.brand .rating-icon { color: var(--orange); }

/* ==========================================================================
   2. Shell: header, hero, main, footer
   ========================================================================== */

/* 2.1 Header ------------------------------------------------------------- */
body.brand .b-header {
    position: relative;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: var(--header-h);
    padding: 12px var(--gutter);
    background: var(--white-2);
    border-bottom: 1px solid var(--n-200);
    flex-shrink: 0;
}

body.brand .b-brand {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    text-decoration: none !important;
    flex-shrink: 0;
}

body.brand .b-brand img { height: 42px; width: auto; display: block; }
body.brand .b-brand__divider { width: 1px; height: 28px; background: var(--n-300); }

body.brand .b-brand__text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
    white-space: nowrap;
}

body.brand .b-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.brand .b-nav > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
    background: transparent;
    white-space: nowrap;
    text-decoration: none;
}

body.brand .b-nav > .nav-item > .nav-link:hover { color: var(--blue-200); }
body.brand .b-nav > .nav-item > .nav-link > i { color: var(--orange); font-size: 18px; width: 20px; text-align: center; }

/* User menu pill + login pill */
body.brand .b-nav > .nav-item > .nav-link.b-user,
body.brand .b-nav > .nav-item > .nav-link.b-login {
    height: 44px;
    padding: 0 16px 0 7px !important;
    gap: 10px;
    border-radius: var(--r-pill);
    background: var(--blue);
    color: #fff !important;
    font-size: 14px;
}

body.brand .b-nav > .nav-item > .nav-link.b-login { padding: 0 18px 0 20px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.brand .b-nav > .nav-item > .nav-link.b-user:hover, body.brand .b-nav > .nav-item > .nav-link.b-login:hover { filter: brightness(1.15); color: #fff !important; }
body.brand .b-nav .b-login > i { color: var(--sky-300) !important; }

body.brand .b-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-500);
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

body.brand .b-user__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Replace Bootstrap's caret with a chevron */
body.brand .b-nav .dropdown-toggle::after {
    content: "";
    border: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.brand .b-nav .dropdown-menu { width: 240px; margin-top: 8px; }

/* 2.2 Hero ---------------------------------------------------------------- */
body.brand .b-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 0;
    padding: 28px var(--gutter) 32px;
    background: var(--grad-hero);
    color: #fff;
    flex-shrink: 0;
}

body.brand .b-hero--index { min-height: 208px; }

body.brand .b-hero__deco {
    position: absolute;
    top: -60px;
    right: -30px;
    width: 280px;
    height: 280px;
    opacity: 0.45;
    color: var(--blue-300);
    pointer-events: none;
}

body.brand .b-hero__main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

body.brand .b-hero__text { min-width: 0; }

body.brand .b-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
    flex-shrink: 0;
}

/* Html.IntegrationIcon() emits inline float/size - neutralise it inside the tile */
body.brand .b-hero__logo img {
    float: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body.brand .b-hero h1,
body.brand .b-hero h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(28px, 2.8vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

body.brand .b-hero--index h1 { font-size: 64px; line-height: 1; }

body.brand .b-hero__sub {
    margin: 8px 0 0;
    max-width: 760px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--sky-100);
}

body.brand .b-hero__sub a:not(.btn) { color: #fff !important; text-decoration: underline !important; }

/* Eyebrow sized to the H1 width */
body.brand .b-hero__titlewrap { display: inline-flex; flex-direction: column; max-width: 100%; }

body.brand .b-hero__eyebrow {
    width: 0;
    min-width: 100%;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sky-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Landing (Home/Authenticate): tall hero, big three-line title, CTA under the text, illustration right */
body.brand .b-hero--landing { min-height: 0; padding-top: 44px; padding-bottom: 48px; }
body.brand .b-hero--landing h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -0.015em; }
body.brand .b-hero--landing .b-hero__sub { max-width: 560px; margin-top: 18px; font-size: 18px; line-height: 1.5; color: #fff; opacity: .92; }
body.brand .b-hero--landing .b-hero__cta { margin-top: 28px; }
body.brand .b-hero--landing .b-hero__actions { align-self: center; margin-right: 16px; }
body.brand .b-hero--landing .b-hero__deco { width: 340px; height: 340px; top: -80px; right: -20px; }
body.brand .b-hero__art { display: block; width: clamp(160px, 16vw, 230px); height: auto; }

/* Landing: keep the platforms card compact so the page fits one screen */
body.brand .b-hero--landing + .b-main { padding-top: 32px; padding-bottom: 40px; }
body.brand .b-partners-card .card-body { padding: 24px 32px; }
body.brand .b-partners-card .card-title { font-size: 22px; }

/* Short laptop screens (e.g. 1280x720): tighten the landing hero so the platforms card stays in view */
@media (min-width: 992px) and (max-height: 820px) {
    body.brand .b-hero--landing { padding-top: 28px; padding-bottom: 32px; }
    body.brand .b-hero--landing h1 { font-size: clamp(36px, 3.3vw, 46px); }
    body.brand .b-hero--landing .b-hero__eyebrow--split { margin-bottom: 12px; }
    body.brand .b-hero--landing .b-hero__sub { margin-top: 12px; font-size: 17px; }
    body.brand .b-hero--landing .b-hero__cta { margin-top: 20px; }
    body.brand .b-hero__art { width: clamp(150px, 13vw, 190px); }
    body.brand .b-hero--landing + .b-main { padding-top: 24px; padding-bottom: 32px; }
}

/* Header: tighten before the nav wraps; drop the tagline on narrow screens */
@media (max-width: 1199.98px) {
    body.brand .b-nav { gap: 8px 20px; }
    body.brand .b-brand { gap: 14px; }
}
@media (max-width: 1099.98px) {
    body.brand .b-brand__divider, body.brand .b-brand__text { display: none; }
}

body.brand .b-hero__eyebrow--split {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    min-width: 0;
    margin: 0 0 18px;
    font-size: 12px;
    letter-spacing: 0.1em;
}
body.brand .b-hero__eyebrow-sep { width: 1px; height: 14px; background: rgba(133, 210, 255, 0.45); }
body.brand .b-hero__eyebrow-accent { color: var(--orange); }

/* Breadcrumb on dark */
body.brand .b-hero .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.4;
}

body.brand .b-hero .breadcrumb-item { color: var(--sky-100); padding: 0; }
body.brand .b-hero .breadcrumb-item.active { color: var(--sky-300); }
body.brand .b-hero .breadcrumb-item a { color: var(--sky-100) !important; text-decoration: none !important; }
body.brand .b-hero .breadcrumb-item a:hover { color: #fff !important; }

body.brand .b-hero .breadcrumb-item + .breadcrumb-item { padding-left: 0; }

body.brand .b-hero .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 8px;
    padding: 0;
    vertical-align: -3px;
    background: var(--i-chevron-right-sky) center / contain no-repeat;
}

body.brand .b-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

body.brand .b-hero__actions > p { margin: 0; }
body.brand .b-hero__actions .btn { white-space: nowrap; flex-shrink: 0; }
body.brand .b-hero--index .b-hero__actions .btn { min-height: 44px; }
body.brand .b-hero__actions .btn-block { display: inline-flex; width: auto; }
body.brand .b-hero__actions .btn-block + .btn-block { margin-top: 0; }

/* Outline-on-dark: any light outline button placed in the hero */
body.brand .b-hero .btn-primary-outline,
body.brand .b-hero .btn-outline-secondary,
body.brand .b-hero .btn-cancel,
body.brand .b-hero .b-btn-outline-dark {
    background: transparent !important;
    border: 1.5px solid var(--sky-300) !important;
    color: #fff !important;
}

body.brand .b-hero .btn-primary-outline:hover,
body.brand .b-hero .btn-outline-secondary:hover,
body.brand .b-hero .btn-cancel:hover,
body.brand .b-hero .b-btn-outline-dark:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* Breadcrumb when a page still renders one in the body (fallback) */
body.brand .b-main .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 16px;
    font-size: 14px;
}

body.brand .b-main .breadcrumb-item.active { color: var(--n-600); }

@media (max-width: 991.98px) {
    body.brand .b-hero { flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; }
    body.brand .b-hero__actions { justify-content: flex-start; }
    body.brand .b-hero h1, body.brand .b-hero h2 { font-size: 28px; }
    body.brand .b-hero--index h1 { font-size: 44px; }
    body.brand .b-hero--landing { padding-top: 36px; padding-bottom: 40px; }
    body.brand .b-hero--landing .b-hero__sub { font-size: 16px; }
    body.brand .b-hero--landing .b-hero__actions { display: none; }
    body.brand .b-partners-card .card-body { padding: 20px; }
    body.brand .b-hero__eyebrow--split { flex-wrap: wrap; white-space: normal; }
    body.brand .b-hero__logo { width: 60px; height: 60px; border-radius: 16px; padding: 10px; }
    body.brand .b-hero__main { gap: 20px; }
    body.brand .b-header { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    body.brand .b-hero__main { flex-direction: column; align-items: flex-start; }
    body.brand .b-brand__divider, body.brand .b-brand__text { display: none; }
}

/* 2.3 Main ---------------------------------------------------------------- */
body.brand .b-main {
    flex: 1 0 auto;
    background: var(--white-1);
    padding: 28px 0 48px;
}

body.brand .b-main > .body-content {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter) !important;
}

/* Old views wrap content in .row.mx-2.px-4 > .col-sm-12 - align it to the page gutter */
body.brand .b-main > .body-content > .row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.brand .b-main > .body-content > .row > .col-sm-12,
body.brand .b-main > .body-content > .row > .col-12,
body.brand .b-main > .body-content > .row > .col-md-12,
body.brand .b-main > .body-content > .row > .col-lg-12 { padding-left: 0; padding-right: 0; }
/* flex children of those legacy rows must be allowed to shrink (wide tables scroll inside) */
body.brand .b-main > .body-content > .row > * { min-width: 0; max-width: 100%; }
body.brand .b-main > .body-content > .row.my-3:first-child,
body.brand .b-main > .body-content > .row.pt-3:first-child { margin-top: 0 !important; padding-top: 0 !important; }

body.brand .b-stack > * + * { margin-top: 24px; }

/* 2.4 Footer ------------------------------------------------------------- */
body.brand .b-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
    min-height: 88px;
    padding: 20px var(--gutter);
    background: var(--grad-footer);
    color: var(--n-400);
    font-size: 14px;
    flex-shrink: 0;
}

body.brand .b-footer__left { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
body.brand .b-footer__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--n-600); }
body.brand .b-footer a.b-footer__link { color: var(--sky-300) !important; font-weight: 500; }
body.brand .b-footer a.b-footer__link:hover { color: #fff !important; }

body.brand .b-version {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.08);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--n-400);
    text-transform: uppercase;
}

body.brand .b-footer__logo img { height: 30px; width: auto; display: block; }

/* 2.5 Toasts (toastr) ----------------------------------------------------- */
body.brand #toast-container {
    top: auto !important;
    right: auto !important;
    bottom: 32px !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: auto;
    pointer-events: none;
}

body.brand #toast-container > div {
    pointer-events: auto;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 320px;
    max-width: min(640px, calc(100vw - 32px));
    min-height: 56px;
    margin: 0;
    padding: 14px 56px 14px 56px;
    border-radius: var(--r-pill);
    background-color: var(--blue-600);
    background-position: 20px center;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-modal);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    opacity: 1;
}

body.brand #toast-container > div:hover { box-shadow: var(--shadow-modal); }
body.brand #toast-container > .toast-success { background-image: var(--i-tick-orange) !important; }
body.brand #toast-container > .toast-error { background-image: var(--i-alert-orange) !important; background-color: var(--error); }
body.brand #toast-container > .toast-warning { background-image: var(--i-alert-orange) !important; }
body.brand #toast-container > .toast-info { background-image: var(--i-info-sky) !important; }
body.brand #toast-container .toast-title { font-weight: 600; }
body.brand #toast-container .toast-close-button {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0.7;
    text-shadow: none;
    font-size: 22px;
}
body.brand #toast-container .toast-progress { display: none; }

/* ==========================================================================
   5.1 Buttons
   ========================================================================== */

body.brand .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

body.brand input.btn { display: inline-block; line-height: 42px; padding-top: 0; padding-bottom: 0; }
body.brand .btn-block { display: flex; width: 100%; }
body.brand input.btn.btn-block { display: block; }
body.brand .btn-sm, body.brand .btn-smaller { min-height: 34px; padding: 0 14px; font-size: 13px; letter-spacing: 0.06em; }
body.brand input.btn-sm { line-height: 32px; }
body.brand .btn-lg { min-height: 50px; padding: 0 30px; font-size: 14px; }

/* Primary CTA: orange */
body.brand .btn-primary,
body.brand .btn-warning,
body.brand .btn-secondary {
    background: var(--orange-600);
    border-color: var(--orange-600);
    color: #fff !important;
}

body.brand .btn-primary:hover, body.brand .btn-primary:focus,
body.brand .btn-warning:hover, body.brand .btn-warning:focus,
body.brand .btn-secondary:hover, body.brand .btn-secondary:focus,
body.brand .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--orange-600);
    border-color: var(--orange-600);
    color: #fff !important;
    filter: brightness(1.08);
}

/* Primary blue */
body.brand .b-btn-blue,
body.brand .btn-default,
body.brand .btn-info {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
}

body.brand .b-btn-blue:hover, body.brand .b-btn-blue:focus,
body.brand .btn-default:hover, body.brand .btn-info:hover {
    background: var(--blue-500) !important;
    border-color: var(--blue-500) !important;
    color: #fff !important;
}

/* Outline on light */
body.brand .btn-primary-outline,
body.brand .btn-outline-secondary,
body.brand .btn-outline-primary,
body.brand .btn-light,
body.brand .btn-cancel {
    background: #fff !important;
    border: 1px solid var(--n-300) !important;
    color: var(--blue) !important;
    min-height: 44px;
}

body.brand .btn-primary-outline:hover, body.brand .btn-primary-outline:focus,
body.brand .btn-outline-secondary:hover, body.brand .btn-outline-primary:hover,
body.brand .btn-light:hover,
body.brand .btn-cancel:hover, body.brand .btn-cancel:focus {
    background: var(--n-100) !important;
    border-color: var(--n-300) !important;
    color: var(--blue) !important;
}

/* Danger */
body.brand .btn-danger,
body.brand .btn-delete {
    background: var(--error) !important;
    border-color: var(--error) !important;
    color: #fff !important;
}

body.brand .btn-danger:hover, body.brand .btn-danger:focus,
body.brand .btn-delete:hover, body.brand .btn-delete:focus {
    background: var(--error) !important;
    filter: brightness(1.1);
}

/* Danger outline */
body.brand .b-btn-danger-outline,
body.brand .btn-outline-danger {
    background: #fff !important;
    border: 1px solid var(--error-border) !important;
    color: var(--error) !important;
}

body.brand .b-btn-danger-outline:hover,
body.brand .btn-outline-danger:hover { background: var(--error-bg) !important; }

/* Send pill (outline that fills blue) */
body.brand .b-btn-send {
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
    background: #fff !important;
    border: 1px solid var(--n-300) !important;
    color: var(--blue) !important;
}

body.brand .b-btn-send:hover,
body.brand .b-btn-send:focus {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Disabled */
body.brand .btn.disabled,
body.brand .btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: auto;
    filter: none;
}

body.brand .btn-primary.disabled, body.brand .btn-primary:disabled,
body.brand .btn-secondary.disabled, body.brand .btn-secondary:disabled,
body.brand .btn-warning.disabled, body.brand .btn-warning:disabled {
    background: var(--orange-disabled) !important;
    border-color: var(--orange-disabled) !important;
    color: #fff !important;
}

body.brand .btn-primary-outline:disabled, body.brand .btn-primary-outline.disabled,
body.brand .btn-cancel:disabled,
body.brand .b-btn-blue:disabled, body.brand .b-btn-blue.disabled,
body.brand .btn-danger:disabled, body.brand .btn-delete:disabled,
body.brand .b-btn-danger-outline:disabled {
    opacity: 0.45;
}

/* Link and borderless buttons stay light-weight */
/* Bulk Messages dialogs (preview sample, submission summary, delivery details) show server-built
   card HTML ("To: <b>number</b><br/><small>traits</small>"): keep those headers as plain left-aligned
   text instead of the flex/space-between layout used by page card headers. */
body.brand #_preview_ .card-header,
body.brand #_submissionsummary_ .card-header,
body.brand #_delstats_ .card-header {
    display: block;
    padding: 12px 18px;
    text-align: left;
    font-size: 14px;
    color: var(--n-700);
}
body.brand #_preview_ .card-header b { color: var(--blue); font-weight: 600; }
body.brand #_preview_ .card-header small,
body.brand #_submissionsummary_ .card-header small,
body.brand #_delstats_ .card-header small { display: block; margin-top: 2px; font-size: 12px; color: var(--n-600); }
body.brand #_preview_ .card { border-radius: 16px; }
body.brand #_preview_ .card-body { padding: 12px 18px; }
body.brand #_preview_ .card-text { margin: 0; font-size: 14px; line-height: 1.55; }

/* Busy state (e.g. "Deleting..." while a request runs): keep full colour, spinner follows the text */
body.brand .btn.is-busy,
body.brand .btn.is-busy:disabled { opacity: 1; cursor: progress; }
body.brand .btn .spinner-border { color: currentColor; width: 16px; height: 16px; border-width: 2px; }

body.brand .btn-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: var(--blue-200) !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

body.brand .btn-clear,
body.brand .btn-awesome {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--orange);
    text-transform: none;
    letter-spacing: 0;
}

body.brand .btn-awesome { color: var(--n-600); padding: 8px 12px; border-radius: var(--r-small); }
body.brand .btn-awesome:hover { color: var(--blue); background: var(--n-100); }

/* Icon button (row actions) */
body.brand .b-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--blue) !important;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none !important;
    flex-shrink: 0;
}

body.brand .b-icon-btn:hover { background: var(--n-100); color: var(--blue) !important; }
body.brand .b-icon-btn--danger { color: var(--error) !important; }
body.brand .b-icon-btn--danger:hover { background: var(--error-bg); color: var(--error) !important; }
body.brand .b-icon-btn--square { border-radius: 12px; width: 46px; height: 46px; border: 1px solid var(--n-300); background: #fff; }
body.brand .b-icon-btn:disabled, body.brand .b-icon-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* Inline text actions (e.g. integration card links) */
body.brand .b-link-danger, body.brand a.b-link-danger { color: var(--danger-link) !important; }
body.brand .b-link-danger:hover { color: var(--error) !important; }

/* ==========================================================================
   5.3 Cards and panels
   ========================================================================== */

body.brand .card,
body.brand .b-card {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-card);
    box-shadow: none !important; /* beats .shadow-sm utility */
}

body.brand .b-card { overflow: hidden; }
body.brand .card-body { padding: 24px; }
body.brand .card-body.p-5 { padding: 28px 32px !important; }
body.brand .b-card__body { padding: 24px; }
body.brand .b-card__body--tight { padding: 16px 24px; }

body.brand .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px;
    background: transparent;
    border-bottom: 1px solid var(--n-200);
    line-height: 1.3;
}

body.brand .card-header:first-child { border-radius: var(--r-card) var(--r-card) 0 0; }

body.brand .card-header h3,
body.brand .card-header h4,
body.brand .card-header h5 {
    width: auto;
    margin: 0;
    line-height: 1.25;
    font-size: 18px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--blue);
}

body.brand .card-footer {
    padding: 14px 24px;
    background: transparent;
    border-top: 1px solid var(--n-200);
}

body.brand .card-footer:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
body.brand .card-title { font-family: var(--font-display); color: var(--blue); font-weight: 600; }
body.brand .card-text { font-weight: 300; line-height: 1.65; font-size: 15px; }

body.brand .jumbotron,
body.brand .jumbotron-awesome {
    background: #fff;
    color: var(--n-700);
    border: 1px solid var(--n-200);
    border-radius: var(--r-card);
    padding: 24px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}

body.brand .custom-fieldset,
body.brand .filter_group {
    border: 1px solid var(--n-200);
    border-radius: 20px;
    background: var(--white-2);
    padding: 24px;
}

body.brand .filter_group { padding: 16px; }
body.brand .outer { border: 1px solid var(--n-200); border-radius: var(--r-input); }

/* Section header (e.g. "ACTIVE INTEGRATIONS  9 integrations") */
body.brand .b-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 12px;
}

body.brand .b-section-label,
body.brand .b-eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

body.brand .b-eyebrow { font-size: 13px; letter-spacing: 0.12em; color: var(--n-600); }
body.brand .b-section-count { font-size: 14px; color: var(--n-600); }

/* ==========================================================================
   5.4 Form fields
   ========================================================================== */

body.brand .form-control,
body.brand .custom-select,
body.brand .form-control-sm {
    height: 46px;
    max-width: 100%;
    padding: 0 16px;
    border: 1px solid var(--n-300);
    border-radius: 12px;
    background-color: #fff;
    color: var(--blue);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.brand .form-control-sm { height: 38px; font-size: 13px; border-radius: 10px; }
body.brand .form-control::placeholder { color: var(--n-500); opacity: 1; }

body.brand .form-control:focus,
body.brand .custom-select:focus,
body.brand .form-control-sm:focus {
    border-color: var(--blue-200);
    box-shadow: 0 0 0 3px var(--sky-100);
    outline: none;
    color: var(--blue);
}

body.brand .form-control:disabled,
body.brand .form-control[readonly] {
    background-color: var(--white-2);
    color: var(--n-600);
    opacity: 1;
}

body.brand textarea.form-control {
    height: auto;
    min-height: 130px;
    padding: 12px 16px;
    line-height: 1.55;
    resize: vertical;
}

body.brand textarea.form-control[rows="1"],
body.brand textarea.form-control[rows="2"] { min-height: 96px; }

/* 5.6 Select: native element, custom chevron */
body.brand select.form-control,
body.brand select.custom-select,
body.brand select.form-control-sm,
body.brand select.table-length-control,
body.brand .form-control.select,
body.brand button.form-control.dropdown-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: var(--i-chevron-down);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px 20px;
    cursor: pointer;
}

body.brand select.form-control[multiple],
body.brand select.form-control[size]:not([size="1"]) {
    height: auto;
    padding: 8px;
    background-image: none;
}

body.brand select.form-control::-ms-expand { display: none; }

/* Custom searchable dropdown buttons (button.form-control + ul.ddl-search) */
body.brand button.form-control {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.brand button.form-control.dropdown-toggle::after { display: none; }

/* Labels */
body.brand .control-label,
body.brand .control-label-sm,
body.brand .b-label {
    display: block;
    margin: 0 !important;
    padding-top: 15px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
}

body.brand .control-label-sm { padding-top: 11px; font-size: 11px; }
body.brand .b-label--flush { padding-top: 0; margin-bottom: 8px !important; }

body.brand .b-sublabel {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--n-600);
}

body.brand .col-form-label { color: var(--blue); font-weight: 500; }

body.brand .form-text,
body.brand .b-help {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--n-600);
}

body.brand .form-group { margin-bottom: 18px; }

/* Validation */
body.brand .field-validation-error,
body.brand .validation-summary-errors {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--error) !important;
}

body.brand .field-validation-valid { display: none; }
/* Bootstrap feedback: only next to an invalid control (or when forced with d-block) */
body.brand .invalid-feedback { display: none; margin-top: 6px; font-size: 13px; color: var(--error); }
body.brand .is-invalid ~ .invalid-feedback,
body.brand .was-validated :invalid ~ .invalid-feedback,
body.brand .invalid-feedback.d-block { display: block; }
body.brand .field-validation-valid.text-warning:not([hidden]) { display: inline-flex; }
body.brand .validation-summary-errors ul { margin: 0; padding-left: 18px; }
body.brand .validation-summary-valid { display: none; }

body.brand .input-validation-error,
body.brand .form-control.is-invalid,
body.brand .was-validated .form-control:invalid {
    border-color: var(--error) !important;
}

body.brand .input-validation-error:focus,
body.brand .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--error-bg); }

body.brand .form-control.is-valid { border-color: var(--success); }
body.brand .form-control.is-valid:focus { box-shadow: 0 0 0 3px var(--success-bg); }
body.brand .valid-feedback, body.brand .orginfo { color: var(--success); font-size: 13px; }

/* Inline warnings shown under the message body (unicode, long message...) */
body.brand .text-warning.field-validation-valid {
    align-items: center;
    gap: 6px;
    margin: 8px 8px 0 0;
    padding: 0 10px;
    min-height: 24px;
    border-radius: var(--r-pill);
    background: var(--warning-bg);
    font-size: 12px;
    font-weight: 600;
}

/* Prefixed input (+ country code) */
body.brand .b-prefix { position: relative; }
body.brand .b-prefix::before {
    content: "+";
    position: absolute;
    left: 16px;
    top: 23px;
    transform: translateY(-50%);
    color: var(--n-600);
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}
body.brand .b-prefix .form-control { padding-left: 30px; }

/* Monospace read-only field (API token) */
body.brand .b-mono { font-family: var(--font-mono) !important; font-size: 14px !important; letter-spacing: 0.02em; }

/* Input group (show / hide password eye, etc.) */
body.brand .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.brand .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.brand .input-group-text {
    border: 1px solid var(--n-300);
    background: var(--white-2);
    color: var(--blue);
    border-radius: var(--r-input);
    padding: 0 16px;
}
body.brand .input-group-append .btn,
body.brand .input-group-append .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; min-height: 46px; }
body.brand .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.brand .input-group-append .btn { border-radius: 0 var(--r-input) var(--r-input) 0 !important; }

/* Password field with an eye toggle overlaid (see brand.js data-b-reveal) */
body.brand .b-reveal { position: relative; }
body.brand .b-reveal .form-control { padding-right: 50px; }
body.brand .b-reveal__btn {
    position: absolute;
    top: 5px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--n-600);
    cursor: pointer;
}
body.brand .b-reveal__btn:hover { background: var(--n-100); color: var(--blue); }

/* Search input (index toolbar, app picker) */
body.brand .b-search {
    position: relative;
    width: 440px;
    max-width: 100%;
}

body.brand .b-search__input.form-control {
    height: 44px;
    padding: 0 48px 0 50px;
    border-radius: var(--r-pill);
    background-image: var(--i-search);
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 20px 20px;
}

body.brand .b-search__input::-webkit-search-cancel-button { display: none; }

body.brand .b-search__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--n-600);
    cursor: pointer;
}

body.brand .b-search__clear:hover { background: var(--n-100); color: var(--blue); }

/* ==========================================================================
   Form grid (Prepare / Template forms): 240px | 1fr | 200px | 220px
   Opt in by adding .b-form-grid to the container around .form-group.row
   ========================================================================== */

body.brand .b-form-grid .form-group.row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 200px minmax(0, 220px);
    column-gap: 20px;
    row-gap: 8px;
    align-items: start;
    margin: 0 0 18px;
}

/* keep Bootstrap .collapse working on grid rows (display:grid would otherwise outrank it) */
body.brand .b-form-grid .form-group.row.collapse:not(.show) { display: none; }

body.brand .b-form-grid .form-group.row > * {
    grid-column: 2 / -1;
    max-width: none;
    width: auto;
    flex: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

body.brand .b-form-grid .form-group.row > :first-child { grid-column: 1; }
body.brand .b-form-grid .form-group.row > .control-label { padding-top: 15px; }
/* label | field | label | field */
body.brand .b-form-grid .form-group.row > :nth-child(2):nth-last-child(3) { grid-column: 2; }
body.brand .b-form-grid .form-group.row > :nth-child(3):nth-last-child(2) { grid-column: 3; }
body.brand .b-form-grid .form-group.row > :nth-child(4):last-child { grid-column: 4; }
/* label | field | field (3-up selects etc.) -> use .b-row-3 */
body.brand .b-form-grid .form-group.row.b-row-3 > :nth-child(2) { grid-column: 2; }
body.brand .b-form-grid .form-group.row.b-row-3 > :nth-child(3) { grid-column: 3 / -1; }
body.brand .b-form-grid .b-subgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Label column extras (counter, parts badge) */
body.brand .b-form-grid .form-group.row > :first-child .text-muted,
body.brand .b-counter {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--n-600);
    line-height: 1.4;
}

/* The standalone container inside legacy forms adds a max-width - release it */
body.brand .b-form-grid > .container,
body.brand .b-form-grid .form-horizontal > .container { max-width: none; padding: 0; }

/* Radio card rows */
body.brand .b-form-grid .form-group.row.b-radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

body.brand .b-form-grid .form-group.row.b-radio-row > :first-child { flex: 0 0 240px; margin-right: 12px; }
body.brand .b-form-grid .form-group.row.b-radio-row > :not(:first-child) { flex: 0 0 auto; }

body.brand .b-form-grid .form-group.row > .b-radio-card { padding: 8px 16px; }

body.brand .b-hint { margin: 16px 0 0; font-size: 14px; color: var(--n-600); }

/* "Choose a destination type to continue." - shown until a radio in the row above is picked */
body.brand .b-dest-hint { margin: -12px 0 24px 260px; }
body.brand .b-radio-row:has(input:checked) + .b-dest-hint { display: none; }

/* Footer row of the form */
body.brand .b-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--n-200);
}

body.brand .b-form-footer__msg { flex: 1 1 320px; min-width: 0; }
body.brand .b-form-footer__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
body.brand .b-form-footer .alert { text-align: left; margin: 0 0 8px; }
body.brand .b-needed { margin: 0; font-size: 14px; color: var(--n-600); }
body.brand .b-needed:empty { display: none; }

@media (max-width: 991.98px) {
    body.brand .b-form-grid .form-group.row { grid-template-columns: minmax(0, 1fr); }
    body.brand .b-form-grid .form-group.row > *,
    body.brand .b-form-grid .form-group.row > :nth-child(n) { grid-column: 1 / -1 !important; }
    body.brand .b-form-grid .control-label { padding-top: 0; }
    body.brand .b-form-grid .form-group.row.b-radio-row > :first-child { flex-basis: 100%; }
    body.brand .b-dest-hint { margin-left: 0; }
    body.brand .b-form-grid .b-subgrid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   5.6 Checkboxes, radios, radio cards
   ========================================================================== */

/* Native checkbox (not Bootstrap custom-control / legacy .bs-checkbox) */
body.brand input[type="checkbox"]:not(.custom-control-input):not(.b-switch):not(.b-native):not([hidden]),
body.brand input[type="radio"]:not(.custom-control-input):not(.b-native):not([hidden]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    max-width: none;
    margin: 0 10px 0 0;
    padding: 0;
    vertical-align: middle;
    border: 2px solid var(--n-400);
    background: #fff center / 16px 16px no-repeat;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

body.brand input[type="checkbox"]:not(.custom-control-input):not(.b-switch):not(.b-native) { border-radius: 7px; }
body.brand input[type="radio"]:not(.custom-control-input):not(.b-native) { border-radius: 50%; }

body.brand input[type="checkbox"]:not(.custom-control-input):not(.b-switch):not(.b-native):checked {
    background-color: var(--blue);
    border-color: var(--blue);
    background-image: var(--i-tick-white);
}

body.brand input[type="radio"]:not(.custom-control-input):not(.b-native):checked {
    border-color: var(--blue);
    background: radial-gradient(circle, var(--orange) 0 5px, #fff 5.5px);
}

body.brand input[type="checkbox"]:disabled,
body.brand input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Legacy .bs-checkbox (hidden input + span.checkmark) */
body.brand .bs-checkbox { position: relative; display: inline-block; width: 24px; height: 24px; margin: 0; cursor: pointer; vertical-align: middle; }
body.brand .bs-checkbox input { position: absolute; top: 0; left: 0; opacity: 0; width: 24px; height: 24px; margin: 0 !important; z-index: 1; cursor: pointer; }

body.brand .checkmark {
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--n-400);
    border-radius: 7px;
    background: #fff;
}

body.brand .bs-checkbox:hover input ~ .checkmark { background-color: var(--n-100); }
body.brand .bs-checkbox input:checked ~ .checkmark { background: var(--blue) var(--i-tick-white) center / 16px 16px no-repeat; border-color: var(--blue); }
body.brand .bs-checkbox input:checked ~ .checkmark:after { display: none; }
body.brand .bs-checkbox input:focus-visible ~ .checkmark { box-shadow: var(--focus-ring); }
/* the legacy wrapper <div class="col-sm-1" style="padding-top:12px"> inside th/td */
body.brand .table .bs-checkbox { margin-top: 0; }
body.brand .table td > .col-sm-1, body.brand .table th > .col-sm-1 { padding: 0 !important; max-width: none; flex: none; }

/* Bootstrap custom controls */
body.brand .custom-control-label { color: var(--n-700); font-size: 15px; padding-left: 8px; line-height: 24px; }
body.brand .custom-control-label::before,
body.brand .custom-control-label::after { top: 0; left: -1.5rem; width: 24px; height: 24px; }
body.brand .custom-checkbox .custom-control-label::before { border: 2px solid var(--n-400); border-radius: 7px; background: #fff; }
body.brand .custom-radio .custom-control-label::before { border: 2px solid var(--n-400); background: #fff; }
body.brand .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--blue); border-color: var(--blue); }
body.brand .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background: #fff; border-color: var(--blue); }
body.brand .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background: radial-gradient(circle, var(--orange) 0 5px, transparent 5.5px); }
body.brand .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--focus-ring) !important; }
body.brand .custom-control { min-height: 24px; padding-left: 2rem; }

/* 5.7 Toggle switch: custom-switch and .b-switch checkbox */
body.brand .custom-switch { padding-left: 3.75rem; }
body.brand .custom-switch .custom-control-label::before {
    left: -3.75rem;
    width: 44px;
    height: 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--n-300);
}
body.brand .custom-switch .custom-control-label::after {
    top: 3px;
    left: calc(-3.75rem + 3px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,31,45,.25);
}
body.brand .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--blue); }
body.brand .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(20px); background: #fff; }

body.brand input[type="checkbox"].b-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0 10px 0 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--n-300);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s;
    flex-shrink: 0;
}
body.brand input[type="checkbox"].b-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,31,45,.25);
    transition: transform .15s;
}
body.brand input[type="checkbox"].b-switch:checked { background: var(--blue); }
body.brand input[type="checkbox"].b-switch:checked::after { transform: translateX(20px); }
body.brand input[type="checkbox"].b-switch:disabled { opacity: 0.45; }

/* bootstrap-toggle (in case it is initialised anywhere) */
body.brand .toggle.btn { min-height: 24px; border-radius: var(--r-pill); }

/* Radio cards: <label class="b-radio-card"><input type="radio" ...><span>Label</span></label> */
body.brand .b-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }

body.brand .b-radio-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    min-height: 46px;
    margin: 0;
    padding: 8px 16px;
    border: 1.5px solid var(--n-300);
    border-radius: var(--r-input);
    background: #fff;
    color: var(--blue);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background-color .15s;
}

body.brand .b-radio-card:hover { border-color: var(--n-400); }
body.brand .b-radio-card input[type="radio"],
body.brand .b-radio-card input[type="checkbox"] { margin: 0; }

body.brand .b-radio-card .label,
body.brand .b-radio-card label { margin: 0 !important; padding: 0; line-height: inherit; font-size: inherit; color: inherit; cursor: pointer; }

body.brand .b-radio-card.is-checked,
body.brand .b-radio-card:has(input:checked) {
    border-color: var(--blue);
    background: var(--n-100);
    font-weight: 600;
}

body.brand .b-radio-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
body.brand .b-radio-card.is-disabled, body.brand .b-radio-card:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Large rating cards (Feedback) */
body.brand .b-rating-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.brand .b-rating-card {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 140px;
    padding: 24px;
    text-align: center;
    font-size: 16px;
}
body.brand .b-rating-card input[type="radio"] {
    position: absolute !important;
    opacity: 0;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none;
}
body.brand .b-rating-card svg { width: 48px; height: 48px; color: var(--blue); }
body.brand .b-rating-card svg .b-accent { stroke: var(--orange); }
body.brand .b-rating-card:has(input:checked) svg,
body.brand .b-rating-card.is-checked svg { color: var(--blue); }

@media (max-width: 575.98px) {
    body.brand .b-rating-group { grid-template-columns: minmax(0, 1fr); }
    body.brand .b-radio-card { min-width: 0; width: 100%; }
}

/* ==========================================================================
   5.5 Tables
   ========================================================================== */

body.brand .table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    color: var(--n-700);
    font-size: 14px;
    background: transparent;
}

body.brand .table thead th,
body.brand .table .thead-dark th,
body.brand .table .thead-light th {
    height: 44px;
    padding: 0 14px;
    vertical-align: middle;
    background: var(--white-2);
    border-top: 0;
    border-bottom: 1px solid var(--n-200);
    color: var(--n-600);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.brand .table td,
body.brand .table tbody th {
    padding: 12px 14px;
    vertical-align: top;
    border-top: 1px solid var(--n-200);
}

body.brand .table tbody tr:first-child td { border-top: 0; }
body.brand .table-hover tbody tr:hover,
body.brand .table tbody tr:hover { background-color: var(--white-2); color: inherit; }
body.brand .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
body.brand .table-bordered, body.brand .table-bordered td, body.brand .table-bordered th { border-left: 0; border-right: 0; }
body.brand .table-condensed { font-size: 14px; }
body.brand .table-condensed td,
body.brand .table-condensed thead th { padding-left: 12px; padding-right: 12px; }
/* bulk message tables: truncated cells scale with the viewport so the table fits at 1280px */
body.brand .table-condensed p.b-truncate[style*="400px"] { max-width: min(400px, 24vw) !important; }
body.brand .table-condensed p.b-truncate[style*="175px"] { max-width: min(175px, 13vw) !important; }
body.brand .table td p { margin-bottom: 4px; }
body.brand .table tr.warning, body.brand .table tr.success { background: transparent; }

/* Table living directly inside a card: full-bleed head, rounded corners */
body.brand .b-table-card { background: #fff; border: 1px solid var(--n-200); border-radius: var(--r-card); overflow: hidden; }
body.brand .b-table-card .table thead th:first-child,
body.brand .b-table-card .table td:first-child { padding-left: 24px; }
body.brand .b-table-card .table thead th:last-child,
body.brand .b-table-card .table td:last-child { padding-right: 24px; }
body.brand .b-table-scroll { width: 100%; overflow-x: auto; }

body.brand .b-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--n-200);
    font-size: 14px;
    color: var(--n-600);
}

body.brand .b-table-toolbar label { margin: 0; padding: 0 !important; display: inline-flex; align-items: center; gap: 8px; }
body.brand .b-table-toolbar__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

body.brand .b-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 12px 20px;
    border-top: 1px solid var(--n-200);
    font-size: 14px;
    color: var(--n-600);
}

body.brand .b-table-footer .pagination { margin: 0; }

/* "Show [5] entries" select */
body.brand .table-length-control {
    height: 36px;
    min-width: 76px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--n-300);
    border-radius: 12px;
    background-color: #fff;
    background-position: right 10px center;
    background-size: 16px 16px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 500;
}

/* Table cell helpers */
body.brand .b-cell-date { display: block; font-weight: 600; color: var(--blue); white-space: nowrap; }
body.brand .b-cell-time { display: block; font-size: 13px; color: var(--n-600); white-space: nowrap; }
body.brand .b-cell-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--n-600); }
body.brand .b-cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
body.brand .b-cell-links { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
body.brand .b-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* DataTables (if used) */
body.brand .dataTables_wrapper .dataTables_length select,
body.brand .dataTables_wrapper .dataTables_filter input {
    height: 40px;
    border: 1px solid var(--n-300);
    border-radius: 12px;
    padding: 0 12px;
}
body.brand .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--n-300) !important;
    border-radius: var(--r-pill) !important;
    background: #fff !important;
    color: var(--blue) !important;
    margin: 0 2px;
}
body.brand .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }

/* ==========================================================================
   5.8 Modals
   ========================================================================== */

body.brand .modal-backdrop { background-color: var(--blue-600); }
body.brand .modal-backdrop.show { opacity: 0.55; }

body.brand .modal-dialog { max-width: 560px; }
body.brand .modal-sm { max-width: 480px; }
body.brand .modal-lg { max-width: 820px; }
body.brand .modal-xl { max-width: 1040px; }

body.brand .modal-content {
    border: 0;
    border-radius: var(--r-modal);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

body.brand .modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px 16px 24px !important;
    border-bottom: 1px solid var(--n-200);
}

body.brand .modal-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--blue);
}

body.brand .delete-modal .modal-title { text-transform: none; }

body.brand .b-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--n-100);
    color: var(--blue);
    font-size: 16px;
    flex-shrink: 0;
}

body.brand .b-modal-icon i.b-accent, body.brand .b-modal-icon .b-accent { color: var(--orange); }
body.brand .b-modal-icon--danger { background: var(--error-bg); color: var(--error); }

body.brand .modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 50%;
    color: var(--blue);
    opacity: 1;
    text-shadow: none;
    font-size: 18px;
    flex-shrink: 0;
}

body.brand .modal-header .close:hover { background: var(--n-100); color: var(--blue); opacity: 1; }

body.brand .modal-body {
    padding: 20px 24px !important;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--n-700);
}

body.brand .modal-body b, body.brand .modal-body strong, body.brand #_question_ b { font-weight: 600; color: var(--blue); }
body.brand .modal-body label { font-weight: inherit; }
body.brand .modal-body .control-label { padding-top: 0; margin-bottom: 8px !important; }

body.brand .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--n-200);
}

body.brand .modal-footer > * { margin: 0; }
body.brand .modal-footer .container-fluid { padding: 0; }
body.brand .modal-footer .btn { min-width: 104px; }
body.brand .modal > label:empty, body.brand .modal-content > label:empty { display: none; }
body.brand .modal-content > label:not(:empty) { display: block; padding: 0 32px 16px; margin: 0; }

/* Chat-bubble preview (Preview sample) */
body.brand .b-bubble {
    position: relative;
    display: inline-block;
    max-width: 420px;
    padding: 14px 18px;
    border-radius: 20px 20px 20px 6px;
    background: var(--n-100);
    border: 1px solid var(--n-200);
    color: var(--n-800);
    font-size: 15px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==========================================================================
   Dropdown menus (header user menu, searchable list dropdowns)
   ========================================================================== */

body.brand .dropdown-menu {
    left: auto;
    min-width: 220px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-input);
    background: #fff;
    box-shadow: var(--shadow-menu);
    font-size: 14px;
    color: var(--blue);
}

body.brand .dropdown-menu.ddl-search { width: 100%; max-height: 360px; overflow-y: auto; }
body.brand .dropdown-menu.ddl-search > input.form-control { height: 44px; margin-bottom: 6px; border-radius: 12px; }

body.brand .dropdown-item,
body.brand .dropdown-menu a.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    width: auto;
    margin: 0;
    padding: 8px 14px;
    border-radius: var(--r-small);
    font-size: 14px;
    font-weight: 500;
    color: var(--blue);
    cursor: pointer;
    white-space: normal;
}

body.brand .dropdown-item > i { color: var(--orange); width: 20px; margin: 0 !important; text-align: center; font-size: 16px; }

body.brand .dropdown-item:hover,
body.brand .dropdown-item:focus,
body.brand .dropdown-menu a.dropdown-item:hover {
    background: var(--n-100);
    color: var(--blue);
    text-decoration: none;
}

body.brand .dropdown-item.active,
body.brand .dropdown-item:active { background: var(--sky-100); color: var(--blue); }
body.brand .dropdown-divider { margin: 6px 4px; border-top-color: var(--n-200); }
body.brand .dropdown-item.b-danger, body.brand .dropdown-item.b-danger > i { color: var(--danger-link); }
body.brand .dropdown-item.b-danger:hover { background: var(--error-bg); color: var(--danger-link); }
body.brand .dropdown-header { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-600); }

/* ==========================================================================
   5.9 Badges, chips, alerts
   ========================================================================== */

body.brand .badge,
body.brand .label-danger,
body.brand .label-primary,
body.brand .label-success,
body.brand .label-warning,
body.brand .b-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

body.brand .badge-success, body.brand .label-success, body.brand .b-status--success { background: var(--success-bg); color: var(--success); }
body.brand .badge-warning, body.brand .label-warning, body.brand .b-status--warning { background: var(--warning-bg); color: var(--warning); }
body.brand .badge-danger, body.brand .label-danger, body.brand .b-status--danger { background: var(--error-bg); color: var(--error); }
body.brand .badge-primary, body.brand .badge-info, body.brand .label-primary, body.brand .b-status--info { background: var(--sky-100); color: var(--blue); }
body.brand .badge-secondary, body.brand .badge-light, body.brand .badge-dark, body.brand .b-status--neutral { background: var(--n-100); color: var(--blue); }

/* Count / meta pill */
body.brand .b-pill-meta,
body.brand .badge-pill.badge-secondary {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Legacy fixed-width letter badges (permissions legend) */
body.brand #div1 .badge, body.brand #userlist .badge { width: 28px; min-width: 28px; padding: 0; }

/* List-ID tag: L 334 */
body.brand .b-list-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Token chip: [[firstname]] */
body.brand .b-token {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    margin: 0 1px;
    border-radius: 6px;
    background: var(--sky-100);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
}

/* Country pill: +27 */
body.brand .b-country {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

/* Guide pills */
body.brand .b-guides { display: flex; flex-wrap: wrap; gap: 10px; }

body.brand a.b-guide-pill,
body.brand .b-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--n-300);
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--blue) !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none !important;
}

body.brand .b-guide-pill:hover { border-color: var(--blue-200); background: #fff; }
body.brand .b-guide-pill i, body.brand .b-guide-pill .quickstart-icon { padding: 0 !important; color: var(--orange); font-size: 15px; }
body.brand .b-guide-pill img { max-height: 18px !important; margin: 0 !important; padding: 0 !important; }

/* Alerts */
body.brand .alert {
    padding: 14px 18px;
    border: 0;
    border-radius: var(--r-input);
    font-size: 14px;
    text-align: left;
}

body.brand .alert-success { background: var(--success-bg); color: var(--success); }
body.brand .alert-warning { background: var(--warning-bg); color: var(--warning); }
body.brand .alert-danger { background: var(--error-bg); color: var(--error); }
body.brand .alert-info, body.brand .alert-primary, body.brand .alert-secondary, body.brand .alert-light { background: var(--sky-100); color: var(--blue); }
body.brand .alert .alert-link { color: inherit; text-decoration: underline; }

/* Parts badge next to the counter */
body.brand .b-parts { margin-top: 8px; }

/* ==========================================================================
   5.10 Pagination
   ========================================================================== */

body.brand .pagination { gap: 6px; flex-wrap: wrap; }

body.brand .pagination .page-link,
body.brand .pagination-sm .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 12px;
    border: 1px solid var(--n-300);
    border-radius: var(--r-pill) !important;
    background: #fff;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

body.brand .pagination .page-link:hover { background: var(--n-100); color: var(--blue); border-color: var(--n-300); }
body.brand .pagination .page-item.active .page-link { width: 34px; padding: 0; border-color: var(--blue); background: var(--blue); color: #fff; }
body.brand .pagination .page-item.disabled .page-link { opacity: 0.4; background: #fff; color: var(--blue); }
body.brand .pagination .page-link:focus { box-shadow: var(--focus-ring); }

/* ==========================================================================
   5.11 Segmented tabs (.nav-tabs)
   ========================================================================== */

body.brand .nav-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-pill);
    background: #fff;
}

body.brand .nav-tabs .nav-item { width: auto; margin: 0; text-align: center; }

body.brand .nav-tabs .nav-link,
body.brand .nav-tabs .nav-link.nav-link-large-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--n-600);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

body.brand .nav-tabs .nav-link:hover { color: var(--blue); background: var(--n-100); }

body.brand .nav-tabs .nav-link.active,
body.brand .nav-tabs .nav-item.show .nav-link {
    background: var(--blue);
    color: #fff;
    font-weight: 600;
}

/* Count shown next to a tab label via CSS only (keeps .text() unchanged for JS) */
body.brand .nav-tabs .nav-link[data-b-count]::after {
    content: "\00B7\00a0" attr(data-b-count);
    font-weight: 500;
    opacity: 0.8;
}

body.brand .tab-content {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-card);
    overflow: hidden;
}

body.brand .tab-content > .tab-pane.p-4 { padding: 0 !important; }

body.brand .nav-pills .nav-link { border-radius: var(--r-pill); color: var(--blue); font-weight: 500; }
body.brand .nav-pills .nav-link.active { background: var(--blue); color: #fff; }

/* ==========================================================================
   Misc: tooltips, popovers, list groups, spinners
   ========================================================================== */

body.brand .tooltip { font-family: var(--font-body); }
body.brand .tooltip-inner { max-width: 320px; padding: 10px 14px; border-radius: var(--r-small); background: var(--blue-600); font-size: 13px; line-height: 1.45; text-align: left; }
body.brand .bs-tooltip-top .arrow::before, body.brand .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--blue-600); }
body.brand .bs-tooltip-right .arrow::before, body.brand .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--blue-600); }
body.brand .bs-tooltip-bottom .arrow::before, body.brand .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--blue-600); }
body.brand .bs-tooltip-left .arrow::before, body.brand .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--blue-600); }

body.brand .popover { border: 1px solid var(--n-200); border-radius: var(--r-input); box-shadow: var(--shadow-menu); font-family: var(--font-body); }
body.brand .popover-header { background: var(--white-2); color: var(--blue); font-weight: 600; border-bottom-color: var(--n-200); }

body.brand .list-group-item { border-color: var(--n-200); color: var(--n-700); }
body.brand .list-group-item:first-child { border-top-left-radius: var(--r-input); border-top-right-radius: var(--r-input); }
body.brand .list-group-item:last-child { border-bottom-left-radius: var(--r-input); border-bottom-right-radius: var(--r-input); }
body.brand .list-group-item.active { background: var(--blue); border-color: var(--blue); color: #fff; }
body.brand .list-group-item-action:hover { background: var(--n-100); }

body.brand .spinner-border { color: var(--blue-200); }
body.brand #loader { border-color: var(--n-200); border-top-color: var(--orange); }

/* ==========================================================================
   Page: Integrations index
   ========================================================================== */

body.brand .b-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }

body.brand .b-integration { margin-bottom: 20px; }
body.brand .b-integration__top {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--n-200);
}

body.brand .b-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 8px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-input);
    background: #fff;
    flex-shrink: 0;
}

body.brand .b-logo-tile img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; object-fit: contain; float: none !important; }

body.brand .b-integration__names { min-width: 0; flex: 1 1 auto; }

body.brand .b-integration__platform {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--n-600);
}

body.brand .b-integration__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blue);
    overflow-wrap: anywhere;
}

body.brand .b-integration__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 24px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

body.brand .b-integration__links:empty { display: none; }

body.brand .b-integration__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

body.brand .b-integration__links a > i { font-size: 15px; }

body.brand .b-integration__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    padding: 24px 32px 28px;
}

body.brand .b-integration__info { flex: 1 1 auto; min-width: 0; }
body.brand .b-integration__info .card-text { margin: 0 0 16px; color: var(--n-700); }
body.brand .b-integration__info .card-text:last-child { margin-bottom: 0; }
body.brand .b-integration__info .card-text:empty { display: none; }

body.brand .b-integration__cta { flex-shrink: 0; }
body.brand .b-integration__cta .btn { width: 240px; }

body.brand .b-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--n-600);
    font-size: 16px;
    font-weight: 300;
}

body.brand .b-empty h3 { margin-bottom: 8px; }

/* Integrations index: compact density (hero, toolbar and cards take less screen) */
body.brand .b-hero--index { min-height: 0; padding-top: 28px; padding-bottom: 32px; }
body.brand .b-hero--index h1 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; }
body.brand .b-hero--index .b-hero__eyebrow { margin-bottom: 10px; font-size: 11px; }
body.brand .b-hero--index .b-hero__actions .btn { min-height: 44px; padding: 0 22px; font-size: 13px; }
body.brand .b-hero--index .b-hero__deco { width: 260px; height: 260px; top: -60px; }
body.brand .b-hero--index + .b-main { padding-top: 28px; }
body.brand .b-toolbar { margin-bottom: 20px; }
body.brand .b-toolbar .b-search__input.form-control { height: 44px; padding-left: 46px; background-position: 16px center; font-size: 14px; }
body.brand .b-toolbar + .b-section-head { margin: 0 0 12px; }
body.brand .b-toolbar + .b-section-head .b-section-label { font-size: 13px; }
body.brand .b-integration { margin-bottom: 12px; }
body.brand .b-integration .card { border-radius: 20px; }
body.brand .b-integration__top { gap: 16px; padding: 14px 24px; }
body.brand .b-integration .b-logo-tile { width: 40px; height: 40px; padding: 6px; border-radius: 12px; }
body.brand .b-integration__platform { margin-bottom: 0; font-size: 11px; }
body.brand .b-integration__title { font-size: 20px; }
body.brand .b-integration__links { gap: 6px 20px; }
body.brand .b-integration__links a { font-size: 14px; gap: 6px; }
body.brand .b-integration__links a > i { font-size: 13px; }
body.brand .b-integration__bottom { gap: 16px 32px; padding: 12px 24px 14px; }
body.brand .b-integration__info .card-text { margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
body.brand .b-integration .b-guides { gap: 8px; }
body.brand .b-integration a.b-guide-pill { height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; }
body.brand .b-integration a.b-guide-pill i { font-size: 13px; }
body.brand .b-integration__cta .btn { width: auto; min-height: 42px; padding: 0 22px; font-size: 13px; }

@media (max-width: 991.98px) {
    body.brand .b-integration__top { flex-wrap: wrap; padding: 14px 20px; }
    body.brand .b-integration__links { margin-left: 0; width: 100%; justify-content: flex-start; }
    body.brand .b-integration__bottom { flex-direction: column; align-items: stretch; padding: 12px 20px 16px; }
    body.brand .b-integration__cta .btn { width: 100%; }
}

/* ==========================================================================
   Page: app picker grid (Create integration, Documentation)
   ========================================================================== */

body.brand .b-app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.brand .b-app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 150px;
    padding: 20px 16px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-card);
    background: #fff;
    color: var(--blue);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

body.brand .b-app-card:hover,
body.brand .b-app-card:focus-visible { border-color: var(--blue-200); }
body.brand .b-app-card:focus-visible { box-shadow: var(--focus-ring); outline: none; }
body.brand .b-app-card__logo { display: flex; align-items: center; justify-content: center; height: 72px; }
body.brand .b-app-card__logo img { max-height: 72px; max-width: 140px; width: auto; height: auto; }
body.brand .b-app-card[hidden] { display: none !important; }

@media (max-width: 1199.98px) { body.brand .b-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { body.brand .b-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { body.brand .b-app-grid { grid-template-columns: minmax(0, 1fr); } }

/* Guides / documentation (legacy .guide-section) */
body.brand .guide-section .card { margin-bottom: 20px; }
body.brand .guide-section .card h3 { color: var(--blue); width: auto; }
body.brand .guide-section .card i { color: var(--orange); }
body.brand .guide-section .card p { font-size: 15px; }

/* ==========================================================================
   Page: auth (landing, login cards)
   ========================================================================== */

body.brand .b-auth-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-card);
}

body.brand .b-auth-card .control-label,
body.brand .b-auth-card label:not(.b-radio-card):not(.custom-control-label) { padding-top: 0; margin-bottom: 8px !important; }
body.brand .b-auth-card .btn-block { margin-top: 8px; }
body.brand .b-auth-card .g-recaptcha { margin: 8px 0 20px; }
body.brand .login-container form input.form-control { max-width: 100% !important; }

body.brand .b-partners { display: flex; align-items: center; justify-content: center; }
body.brand .b-partners img { max-width: 100%; height: auto; }

/* Settings key/value rows */
body.brand .b-kv { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 24px; align-items: start; }
@media (max-width: 991.98px) { body.brand .b-kv { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Page-level components
   ========================================================================== */

/* --- Prepare pages: inline field spinners --- */
/* prepA: Prepare pages (Marketo, Monday, ActiveNetwork, Mailchimp, Dynamics, ActiveCampaign, Zoho) */

/* Loading spinners that sit next to a list select (e.g. #testcon-spin, #contactlist-spin, #status-spin).
   The views mark them with .b-field-spin; they carry legacy inline float/margin, hence !important.
   Pinned inside the 56px field, left of the select chevron, instead of dropping below it. */
body.brand .b-form-grid .form-group.row > :has(> .b-field-spin) { position: relative; }
body.brand .b-form-grid .b-field-spin {
    position: absolute;
    top: 15px;
    right: 44px;
    float: none !important;
    margin: 0 !important;
    color: var(--n-600);
    pointer-events: none;
}

/* --- Salesforce / Freshdesk Prepare: custom query picker + query builder modal --- */
/* --- Custom query picker on the Prepare form: select | square edit | + NEW QUERY --- */
body.brand .b-query-picker:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.brand .b-query-picker > select { flex: 1 1 auto; min-width: 0; }
body.brand .b-query-picker > .b-icon-btn,
body.brand .b-query-picker > .btn { flex: 0 0 auto; white-space: nowrap; }

/* --- Query builder modal --- */
body.brand .b-qb #filters { margin-top: 24px; }
body.brand .b-qb .text-danger:empty { display: none; }
body.brand .b-qb #query_title_error,
body.brand .b-qb #query_module_error { display: block; margin-top: 6px; font-size: 13px; }

/* field labels inside the modal (.modal-body label resets weight to inherit) */
body.brand .b-qb .b-label { font-weight: 600; color: var(--blue); }

/* group ("FILTER RECORDS BY" / "OR") label */
body.brand .b-qb .b-qb-group-label { display: block; margin-bottom: 12px !important; color: var(--n-600); }

/* groups after the first one: space them and turn their label ("OR", set by JS) into a chip */
body.brand .b-qb #filters > .filter_group:not(#filter_group_template) ~ .filter_group { margin-top: 16px; }
body.brand .b-qb #filters > .filter_group:not(#filter_group_template) ~ .filter_group .b-qb-group-label {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid var(--n-300);
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* condition row: field | operator | value | remove */
body.brand .b-qb .form-group.row.b-cond-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) 40px;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    margin: 0 0 12px;
    position: relative;
}
body.brand .b-qb .form-group.row.b-cond-row > * {
    max-width: none;
    width: auto;
    flex: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}
body.brand .b-qb .b-cond-row > :last-child { padding-top: 8px; }
body.brand .b-qb .b-cond-row .filtervalidation { display: block; margin-top: 6px; font-size: 13px; }
body.brand .b-qb .b-cond-row select:disabled { background-color: var(--white-2); }

/* rows joined inside one group get a small AND chip above them */
body.brand .b-qb #filter_rows .b-cond-row ~ .b-cond-row { margin-top: 40px; }
body.brand .b-qb #filter_rows .b-cond-row ~ .b-cond-row::before {
    content: "AND";
    position: absolute;
    top: -30px;
    left: 0;
    padding: 2px 10px;
    border: 1px solid var(--n-300);
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* Freshdesk "Favourites" prepend on the text value */
body.brand .b-qb .b-cond-row .input-group > .input-group-prepend > .btn {
    height: 46px;
    min-height: 46px;
    border-radius: 12px 0 0 12px;
    padding: 0 16px;
    font-size: 13px;
}
body.brand .b-qb .b-cond-row .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ADD CONDITION pill + menu */
body.brand .b-qb-actions { margin-top: 4px; }
body.brand .b-qb-actions__row { display: flex; align-items: center; gap: 8px; }
body.brand .b-qb-actions .dropdown-menu { width: auto; min-width: 220px; }
body.brand .b-qb-chip { min-width: 40px; margin-right: 8px; text-align: center; }

@media (max-width: 767.98px) {
    body.brand .b-qb .form-group.row.b-cond-row { grid-template-columns: minmax(0, 1fr) 40px; }
    body.brand .b-qb .form-group.row.b-cond-row > :not(:last-child) { grid-column: 1; }
    body.brand .b-qb .form-group.row.b-cond-row > :last-child { grid-column: 2; grid-row: 1; }
    body.brand .b-query-picker:not([hidden]) { flex-wrap: wrap; }
    body.brand .b-query-picker > select { flex-basis: 100%; }
}

/* --- Message Templates form --- */
/* tmpl: Message Templates create/edit form (Views/TemplateView/Create.cshtml, Edit.cshtml) */

/* Parts / length warnings (#long_message, #length_warning) now sit in the label column under the
   "approx N/160" counter: stack them as small helper lines. [hidden] still wins (BS4 !important). */
body.brand .b-form-grid .form-group.row > :first-child .b-counter-warning {
    display: block;
    width: fit-content;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

/* "Default Template" checkbox (HubSpot only): vertically align the 24px box with the 56px label row */
body.brand .b-form-grid .form-group.row > .b-checkbox-cell { padding-top: 11px; }

/* --- Public pages: landing, logins, MFA, Create integration --- */
/* Wider auth card for the longer MFA / RSVP / invalid-invite forms */
body.brand .b-auth-card--wide { max-width: 720px; }

/* Site.css caps every input at 280px; let the submit <input class="btn-block"> fill the card */
body.brand .b-auth-card input.btn-block { max-width: none; width: 100%; }

/* Home/Auth: "redirecting to BulkSMS" status card (spinner + sentence) */
body.brand .b-auth-card--status { display: flex; align-items: center; gap: 20px; }
body.brand .b-auth-card--status .spinner-border { flex: 0 0 auto; }

/* MfaPrepare: the device-verification panel that used to be a nested .card */
body.brand .b-mfa__panel { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--n-200); }
/* MfaPrepare / Rsvp inline rows (label | input | button): wrap cleanly and align labels with inputs */
body.brand .b-mfa .form-row { align-items: flex-start; row-gap: 12px; }
body.brand .b-mfa .form-row > div > .control-label { padding-top: 15px; }   /* MfaPrepare: label in a col div, 56px inputs */
body.brand .b-mfa .form-row > .control-label { padding-top: 11px; }         /* Rsvp: label is the col, 44px form-control-sm inputs */
/* MfaPrepare: "Enable 2-Step Verification Now" + "Continue to Integrations" pair wraps with a gap */
body.brand .b-mfa #div-enable-mfa > p { display: flex; flex-wrap: wrap; gap: 12px; }
body.brand .b-mfa #div-enable-mfa > p[hidden] { display: none; }
body.brand .b-mfa #div-enable-mfa > p > .btn { margin-right: 0 !important; }

/* Landing: "Supported platforms" card */
body.brand .b-partners-card .card-title { margin-bottom: 8px; }
body.brand .b-partners-card .b-partners { margin-top: 16px; }

/* Create: selected app card + app line in the "Name your integration" dialog */
body.brand .b-app-card.is-selected { border-color: var(--blue-200); }
body.brand .b-create-app { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--blue); font-weight: 600; }
body.brand .b-create-app img { width: 40px; height: 40px; object-fit: contain; }

/* --- Integration settings, setup guides, WebhookEdit, Freshdesk configuration --- */
/* --- 2. Settings grid: label | field (max 560) | inline action --------------
   Used on integration Settings forms: every field is the same width, a third
   child (Test Connection / Authenticate / Disconnect) sits to the right. */
body.brand .b-form-grid.b-settings-grid .form-group.row { grid-template-columns: 240px minmax(0, 560px) minmax(0, 1fr); }
body.brand .b-form-grid.b-settings-grid .form-group.row > :nth-child(2) { grid-column: 2; }
body.brand .b-form-grid.b-settings-grid .form-group.row > :nth-child(3) { grid-column: 3; justify-self: start; }
body.brand .b-form-grid.b-settings-grid .form-group.row > :nth-child(3) .btn { white-space: nowrap; }
@media (max-width: 991.98px) {
    body.brand .b-form-grid.b-settings-grid .form-group.row { grid-template-columns: minmax(0, 1fr); }
}

/* Section headings inside a settings card ("Connection Details", "Settings", ...) */
body.brand .b-settings-title,
body.brand .b-settings-head h3 { font-size: 18px; margin: 0 0 18px; }
body.brand .b-settings-head { margin-top: 4px; padding-top: 24px; border-top: 1px solid var(--n-200); }
body.brand .b-settings-head[hidden] { display: none; }

/* Alerts / help that sit under the field column (not a grid row) */
body.brand .b-settings-msg { margin: 0 0 0 260px; max-width: 560px; }
body.brand .b-settings-msg .alert { margin: 0 0 24px; }
body.brand .b-settings-msg .alert:empty { display: none; }
@media (max-width: 991.98px) { body.brand .b-settings-msg { margin-left: 0; } }

/* Field cell holding several inline controls
   (country code input + "Force country code" label + toggle) */
body.brand .b-inline-fields { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; }
body.brand .b-inline-fields__code { width: 160px; }
body.brand .b-inline-fields .control-label { padding-top: 15px; }
body.brand .b-inline-fields > [hidden] { display: none !important; }

/* Cell holding a checkbox/toggle: align with the 56px inputs and the label */
body.brand .b-form-grid .form-group.row > .b-check-cell,
body.brand .b-check-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding-top: 0;
}
body.brand .b-check-status { display: inline-flex; align-items: center; gap: 8px; }
body.brand .b-check-status .badge,
body.brand .b-check-status .spinner-border { position: static !important; }

/* Legacy .bs-checkbox rendered as a toggle switch (keeps input + span.checkmark,
   ids and onclick handlers). Matches .b-switch / .custom-switch. */
body.brand .bs-checkbox.b-toggle { width: 44px; height: 24px; flex-shrink: 0; }
body.brand .bs-checkbox.b-toggle input { width: 44px; height: 24px; opacity: 0 !important; }
body.brand .bs-checkbox.b-toggle .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--n-300);
    transition: background-color .15s;
}
body.brand .bs-checkbox.b-toggle .checkmark:after,
body.brand .bs-checkbox.b-toggle input:checked ~ .checkmark:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,31,45,.25);
    transform: none;
    transition: transform .15s;
}
body.brand .bs-checkbox.b-toggle:hover input:not(:checked) ~ .checkmark { background: var(--n-400); }
body.brand .bs-checkbox.b-toggle input:checked ~ .checkmark { background: var(--blue); }
body.brand .bs-checkbox.b-toggle .checkmark { background-image: none !important; }
body.brand .bs-checkbox.b-toggle input:checked ~ .checkmark:after { transform: translateX(20px); }
body.brand .bs-checkbox.b-toggle input:disabled ~ .checkmark,
body.brand .bs-checkbox.b-toggle input.disabled ~ .checkmark { opacity: .45; }

/* Collapsible "where do I find this?" help (ActiveCampaign settings) */
body.brand .b-help-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    border-radius: 50%;
    color: var(--blue-200) !important;
    font-size: 15px;
    vertical-align: -3px;
    text-decoration: none !important;
}
body.brand .b-help-toggle:hover { background: var(--n-100); }
body.brand .b-help-panel { margin: -12px 0 24px 260px; max-width: 560px; }
body.brand .b-help-card {
    padding: 16px 20px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-input);
    background: var(--white-2);
    font-size: 14px;
}
body.brand .b-help-card p { margin: 0 0 6px; }
body.brand .b-help-card p:last-child { margin: 0; }
body.brand .b-help-card i { margin-right: 6px; }
@media (max-width: 991.98px) { body.brand .b-help-panel { margin-left: 0; } }

/* Result under a field (org name after Test Connection) */
body.brand .b-field-note { margin-top: 6px; }
body.brand .b-field-note:empty { display: none; }

/* --- 3. Setup guides ------------------------------------------------------ */
body.brand .guide-section.b-guide-content { max-width: 960px; margin: 0 auto; counter-reset: b-step; }
body.brand .guide-section.b-guide-content .card { margin-bottom: 24px; }
body.brand .guide-section.b-guide-content .card-header { padding: 24px 32px; }
body.brand .guide-section.b-guide-content .card-header h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 22px; }
body.brand .guide-section.b-guide-content .card-header h3 > i { font-size: 16px; }
body.brand .guide-section.b-guide-content .card-body { font-size: 16px; line-height: 1.6; }
body.brand .guide-section.b-guide-content .card-body > .form-group.row { margin-left: 0; margin-right: 0; }
body.brand .guide-section.b-guide-content .card-body > .form-group.row > [class*="col-"] { padding-left: 0; padding-right: 0; }
body.brand .guide-section.b-guide-content .card-body > .form-group.row:last-child { margin-bottom: 0; }
body.brand .guide-section.b-guide-content p { margin-bottom: 12px; }
body.brand .guide-section.b-guide-content .card-body > .form-group.row:last-child p:last-child { margin-bottom: 0; }
body.brand .guide-section.b-guide-content .card-body i.fa-arrow-alt-circle-right,
body.brand .guide-section.b-guide-content .card-body i.fa-info-circle { margin-right: 8px; }

/* Numbered steps: add .b-guide-step to a step card */
body.brand .b-guide-step { counter-increment: b-step; }
body.brand .b-guide-step .card-header h3::before {
    content: counter(b-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
}

/* Screenshots (the inline max-height keeps each image's original display height) */
body.brand .b-guide-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 16px 0 0;
    border: 1px solid var(--n-200);
    border-radius: 16px;
}

/* --- 4. AuthComplete (popup) ---------------------------------------------- */
body.brand .b-auth-card .alert { margin-bottom: 24px; }
body.brand .b-auth-card .alert i { margin-right: 8px; }

/* --- 5. Webhook info (Hubspot/WebhookEdit) --------------------------------- */
body.brand .b-kv--dl { margin: 0; }
body.brand .b-kv--dl dt {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    padding-top: 2px;
}
body.brand .b-kv--dl dd { margin: 0; color: var(--n-700); word-break: break-word; }
body.brand .b-webhook-block + .b-webhook-block { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--n-200); }
body.brand .b-webhook-block__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
body.brand .b-webhook-block__head h3 { font-size: 20px; margin: 0 0 4px; }
body.brand .b-webhook-block__head p { margin: 0; font-size: 14px; color: var(--n-600); }
body.brand .b-webhook-block__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.brand textarea.form-control.b-webhook-url { min-height: 0; height: auto; padding-top: 16px; padding-bottom: 16px; resize: vertical; }
body.brand .b-webhook-example {
    display: block;
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    border: 1px solid var(--n-200);
    border-radius: 16px;
}

/* --- 6. Freshdesk Configuration: dual list picker -------------------------- */
body.brand .b-duallist { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
body.brand .b-duallist__col { min-width: 0; }
body.brand .b-duallist__moves { display: flex; flex-direction: column; gap: 12px; }
body.brand .b-duallist__moves .btn { min-width: 150px; }
body.brand .b-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
body.brand .b-values__head { min-height: 20px; line-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
body.brand .b-values__head .control-label { margin-bottom: 0 !important; }
body.brand .b-values__head a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
body.brand .b-list-label { display: block; padding-top: 0; margin-bottom: 8px !important; line-height: 20px; }
body.brand .b-listbox.outer { border: 1px solid var(--n-300); border-radius: var(--r-input); background: #fff; }
body.brand .b-listbox .list-group-item { border-left: 0; border-right: 0; border-radius: 0 !important; cursor: pointer; }
body.brand .b-listbox .list-group-item:first-child { border-top: 0; }
body.brand .b-listbox .list-group-item:hover:not(.active) { background: var(--n-100); }
body.brand .b-listbox a.list-group-item { color: var(--n-700) !important; }
body.brand .b-listbox a.list-group-item.active { color: #fff !important; }
body.brand .b-listbox .list-group-item.disabled { opacity: .5; pointer-events: none; }
body.brand .b-values__help { margin-top: 12px; font-size: 13px; line-height: 1.7; }
body.brand .b-values__help .orange { font-weight: 700; }
body.brand .b-tab-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--n-200); }
body.brand .tab-content > .tab-pane.b-tab-pane { padding: 32px; }
@media (max-width: 991.98px) {
    body.brand .b-duallist, body.brand .b-values { grid-template-columns: minmax(0, 1fr); }
    body.brand .b-duallist__moves { flex-direction: row; justify-content: center; }
}

/* --- Integration settings (B), Webhook Info, guides --- */
/* Section heading inside a settings card ("Connection Details", "Settings", "Activity Updates") */
body.brand .b-form-section { font-size: 18px; margin: 0 0 18px; color: var(--blue); }
body.brand .b-form-grid hr { margin: 24px 0; }

/* Cell that holds a checkbox / badges / small icon button, vertically centred against 56px inputs */
body.brand .b-check-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 46px; }
body.brand .b-check-row .badge { margin: 0; }

/* Alerts row under a Test Connection field (label column empty); collapses when every alert is hidden */
body.brand .b-form-grid .form-group.row.b-row-msg .alert { margin: 0 0 8px; }
body.brand .b-form-grid .form-group.row.b-row-msg:not(:has(.alert:not([hidden]))) { display: none; }

/* Grid row whose content JS replaces with plain text (Zoho #testcon-alert uses .text()): render as a block */
body.brand .b-form-grid .form-group.row.b-row-block { display: block; }

/* Intro paragraph above content cards (Webhook Info) */
body.brand .b-lead { font-size: 16px; line-height: 1.65; color: var(--n-600); margin: 0 0 24px; }

/* Generic orange glyph (UnknownSettings icon); b-accent is currently only defined inside .b-modal-icon */
body.brand .b-accent { color: var(--orange); }

/* Long read-only content (Zoho SetupGuide, Webhook Info, Usage) */
body.brand .b-guide-content p,
body.brand .b-guide-content li { font-size: 16px; line-height: 1.65; }
body.brand .b-guide-content img {
    display: block;
    max-width: 100%;
    width: auto;
    border: 1px solid var(--n-200);
    border-radius: 16px;
    margin: 16px 0 0;
}
@media (max-width: 991.98px) { body.brand .b-guide-content img { height: auto; } }
body.brand .guide-section.b-guide-content .card-header h3 { font-size: 22px; }
body.brand .guide-section.b-guide-content .card-body .form-group.row:last-child,
body.brand .guide-section.b-guide-content .card-body p:last-child { margin-bottom: 0; }

/* Webhook Info: nested "URL / Template / Other Settings" cards */
body.brand .b-code-card { margin: 24px 0; border-radius: 20px; }
body.brand .b-code-card > .card-header { align-items: flex-start; flex-wrap: nowrap; padding: 20px 24px; }
body.brand .b-code-card > .card-header h4 { font-size: 18px; margin-bottom: 4px; }
body.brand .b-code-card > .card-header small { display: block; font-size: 13px; line-height: 1.5; }
body.brand .b-code-card > .card-body { padding: 24px; }
body.brand .b-code-card > .card-body.b-form-grid .form-group.row { margin-bottom: 16px; }
body.brand .b-code-card > .b-table-scroll .table { border: 0; }
body.brand .b-code-card__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.brand .b-code-line {
    margin: 0;
    padding: 14px 16px;
    background: var(--white-2);
    border: 1px solid var(--n-200);
    border-radius: var(--r-small);
    color: var(--n-700);
    word-break: break-all;
}
body.brand .b-code-card pre { white-space: pre-wrap; word-break: break-word; }

/* Card header with a title + helper line stacked (Webhook Info main card) */
body.brand .b-guide-content > .card-header small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; }

/* --- User pages: settings, manage users, edit, feedback, guides, not authorized --- */
/* Grid-form field cells whose content is not a 56px input (switch, checkbox,
   status badge, check list): nudge down so they line up with the label (19px pad). */
body.brand .b-form-grid .form-group.row > .b-switch-field { padding-top: 11px; }
body.brand .b-form-grid .form-group.row > .b-static-field { padding-top: 11px; }
body.brand .b-form-grid .form-group.row > .b-check-list { padding-top: 8px; }
/* Test-connection button (52px) next to a 56px input */
body.brand .b-form-grid .form-group.row > :last-child > .btn { margin-top: 1px; }

/* Settings: inline test-connection result under the API secret */
body.brand .b-test-result .alert { margin: 12px 0 0; }

/* Manage Users: status badges inside #userlist must not get the fixed 28px letter width */
body.brand #userlist .badge.b-badge-status { width: auto; min-width: 0; padding: 0 10px; }
body.brand #userlist .table td { vertical-align: middle; }
body.brand #userlist .table td .badge + .badge { margin-left: 4px; }

/* Manage Users: collapsible permission legend panel inside the table card */
body.brand .b-perm-legend {
    padding: 8px 24px 16px;
    background: var(--white-2);
    border-bottom: 1px solid var(--n-200);
}
body.brand .b-perm-legend .table { background: transparent; font-size: 14px; }
body.brand .b-perm-legend .table thead th { background: transparent; height: 44px; }
body.brand .b-perm-legend .table th,
body.brand .b-perm-legend .table td { padding: 10px 16px !important; height: auto; }
body.brand .b-perm-legend .table th[scope="row"] { width: 72px; }
body.brand .b-perm-legend .table td:nth-child(2) { font-weight: 600; color: var(--blue); width: 240px; }
body.brand .b-perm-legend .table tbody tr:last-child > * { border-bottom: 0; }
body.brand .b-perm-legend .table tbody tr:hover { background: transparent; }

/* Edit user: permission checkboxes, one per row with their legend letter */
body.brand .b-check-list { display: flex; flex-direction: column; gap: 4px; }
body.brand .b-check-list .b-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    border-radius: var(--r-small);
    color: var(--n-700);
    font-size: 15px;
    cursor: pointer;
}
body.brand .b-check-list .b-check-row:hover { background: var(--n-100); }
body.brand .b-check-list .b-check-row input[type="checkbox"] { margin: 0; }
body.brand .b-check-list .b-check-row__text { flex: 1 1 auto; min-width: 0; }
body.brand .b-check-list .b-check-row .badge { width: 28px; min-width: 28px; padding: 0; flex-shrink: 0; }

/* Feedback: fieldset legend reset (Bootstrap sizes legends at 1.5rem) */
body.brand legend.b-label { width: auto; font-size: 13px; }

/* Guides (Documentation): one white card per app with logo, name and pill links */
body.brand .b-guide-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}
body.brand .b-guide-card__head { display: flex; align-items: center; gap: 16px; min-width: 0; }
body.brand .b-guide-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blue);
    overflow-wrap: anywhere;
}
body.brand .b-app-grid .b-guide-card .b-guides { margin-top: auto; }

/* Not Authorized: icon + message + Back in one row */
body.brand .b-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; }
body.brand .b-notice__text { flex: 1 1 320px; margin: 0; font-size: 16px; color: var(--n-700); }
body.brand .b-notice form { margin: 0; }

/* Password reveal + Bootstrap validation icon: move the tick/cross left of the eye button */
body.brand .b-reveal .form-control.is-valid,
body.brand .b-reveal .form-control.is-invalid { background-position: right 46px center; padding-right: 76px; }