/* ============================================================
   Bison Studio — Client Portal
   Full-screen dark SPA overlay
   ============================================================ */

/* ── CSS custom properties ─────────────────────────────────
   The portal's local variable names are kept (thousands of
   downstream rules reference them) but their VALUES now come
   from assets/bison-tokens.css — the shared source of truth
   used by the wp-admin PM Dashboard as well. Change a colour
   there and both surfaces move together.

   Tokens that already flip between themes (--bison-border,
   --bison-accent-tint, --bison-text-hi, --bison-bg-card-alt…)
   no longer need a body.light override here; the token file
   handles it.
   ───────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   `:root, body` — and the `body` half is what makes light mode work.

   Nearly every name below is an ALIAS: --bg-sidebar is not a colour, it is
   `var(--bison-bg-sidebar)`. A custom property is substituted where it is
   DECLARED, not where it is used. Declared on :root alone, --bg-sidebar
   resolved against :root's copy of --bison-bg-sidebar — and in
   bison-tokens.css :root IS the dark block (`:root, body.bison-dark,
   body.dark`). The light values live on `body.light`, which :root never sees.

   So every aliased colour was frozen at its dark value in BOTH themes, while
   the handful written as literals here (--bg-card: #ffffff63) did change. That
   mix is what "light mode is messed up" was: a dark sidebar, dark content and
   dark topbar behind light cards and near-black text.

   Measured in the browser with body.light applied:

       --bison-bg-sidebar read at :root   #161514   (dark)
       --bison-bg-sidebar read at body    #ffffff   (light)
       --bg-sidebar aliased on :root      rgb(22,21,20)     <- frozen
       same alias declared inside body    rgb(255,255,255)  <- correct

   Adding `body` to the selector makes the substitution happen on an element
   that actually carries the theme class, so each theme resolves its own
   values. Everything inside body then inherits the right ones.

   The same trap is documented in assets/bison-tokens.css, which is where the
   rule "aliases must resolve where the theme class is" comes from.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
body {
    --color-primary: var(--bison-accent);
    --color-secondary: #7a4343;
    --bg-root: var(--bison-bg-body);
    --bg-sidebar: var(--bison-bg-sidebar);
    /* Aliased, not literal. Each of these used to be a fixed colour that only
       suited one theme, so half the palette stopped adapting the moment a
       theme class was applied:
         --bg-card   #ffffff63  39%-opaque white — translucent in dark too
         --bg-input  #0d1e33    navy, from an older palette
         --text-*    #181818    near-black, unreadable on any dark surface
       body.dark patched a few of them back; the rest simply stayed wrong. */
    --bg-card: var(--bison-bg-card);
    --bg-input: var(--bison-surface-alt);
    --bg-hover: rgba(255, 255, 255, 0.028);
    --bg-stripe: rgba(255, 255, 255, 0.018);
    --bg-primary: #151515;
    --bg-white: #EBF0F3;
    --bg-body: var(--bison-bg-body);

    --border: var(--bison-border);
    --border-sub: var(--bison-border-sub);
    --border-faint: var(--bison-border-faint);

    /* Focus rings and the active tour dot. Was #fff, which is invisible on a
       light surface and reads as "no accent" everywhere. */
    --accent: var(--bison-accent);
    --accent-hov: #141414;
    --accent-bg: #171717;

    --text-hi: var(--bison-text-hi);
    --text-mid: var(--bison-accent);
    --text-mute: var(--bison-text-muted);
    --text-faint: var(--bison-text-ghost);
    --text-ghost: var(--bison-text-ghost);
    --text-primary: var(--bison-text-hi);
    --text-two: var(--bison-text);

    --radius-sm: var(--bison-radius-sm);
    --radius: var(--bison-radius);
    --radius-lg: var(--bison-radius-lg);

    --gondola: var(--bison-accent-tint);
    --duna: #272524;
    --text: var(--bison-text-mute);
    --title-text: var(--bison-text-hi);
    --fuscous-grey: #57534E;
    --bg-card-two: var(--bison-bg-card-alt);
}

body.dark {
    --text-primary: var(--bison-text-hi) !important;
    --bg-card: var(--bison-bg-card);
    --text-hi: var(--bison-text-hi);
    --text-ghost: var(--bison-text-mute);
    --box-bg: var(--bison-border);
}

/*
 * Light theme.
 *
 * These are declared HERE, on the element that carries the theme class, so
 * each var() is substituted in a light-mode context. That is the whole
 * mechanism — the same aliases declared on :root resolve against :root, which
 * in bison-tokens.css is the DARK block, and freeze at dark values in both
 * themes.
 *
 * The 25-07-2026 backup carried nine overrides here. Six were dropped when
 * this file moved onto the shared tokens, on the assumption the tokens would
 * supply them; they could not, because of the freezing above. That is what
 * "light mode is broken" was: no sidebar, body, border, active-nav, title or
 * secondary-surface colour for light, and nothing to fall back to.
 *
 * Restored, pointing at the tokens rather than repeating hex — the token
 * values were checked against that backup and match it (only --bison-bg-body
 * differs: #ebf0f3 rather than the backup's #ece9e5, a later deliberate
 * choice).
 */
body.light {
    --bg-sidebar:  var(--bison-bg-sidebar);   /* backup: #ffffff */
    --bg-body:     var(--bison-bg-body);      /* backup: #ece9e5 */
    --bg-root:     var(--bison-bg-body);
    --bg-card:     var(--bison-bg-card);
    --bg-card-two: var(--bison-bg-card-alt);  /* backup: #F4F2EF */
    --bg-input:    var(--bison-surface-alt);

    --border:      var(--bison-border);       /* backup: #DCD8D3 */
    --border-sub:  var(--bison-border-sub);
    --border-faint: var(--bison-border-faint);

    --gondola:     var(--bison-accent-tint);  /* backup: #F6E7E5 */
    --title-text:  var(--bison-text-hi);      /* backup: #1A1817 */

    --text-hi:      var(--bison-text-hi);
    --text-mute:    var(--bison-text-muted);
    --text-faint:   var(--bison-text-ghost);
    --text-ghost:   var(--bison-text-ghost);
    --text-primary: var(--bison-text-hi);

    --fuscous-grey: #57534E;
    --text:     var(--bison-text);            /* backup: #57534e */
    --text-two: var(--bison-text-hi);         /* backup: #1A1817 */
}

body.light .bp-appearance-btn svg,
body.light .bp-appearance-btn svg path {
    stroke: #1A1817;
}

body.dark .bp-appearance-btn svg,
body.dark .bp-appearance-btn svg path {
    stroke: #fff;
}

#bison-portal-root {
    position: fixed;
    inset: 0;
    z-index: 99998;
    /* background: var(--bg-root); */
    font-family: "Inter", sans-serif;
    color: var(--text-mid);
    overflow: hidden;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}


body {
    background: var(--bg-white) !important;
    transition: all 0.2s ease-in-out;
}

.wp-theme-bison-web footer {
    visibility: hidden;
}

.wp-theme-bison-web .main {
    padding-top: 0px;

}

.wp-theme-bison-web #content-page {
    margin-top: 0px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Fluid root typography

   Replicates the theme's own root scale. Every rem in the portal resolves
   against this, and the portal page does not go through the theme wrapper
   that normally establishes it, so without these the whole page renders
   against the browser default of 16px instead of the theme's scale.

   `html` is the document root, so this is not scoped by the selector — it is
   scoped by DELIVERY: portal.css is only enqueued on pages containing the
   [bison_portal] shortcode (see Bison_Portal::maybe_enqueue_scripts), so no
   other page on the site is affected. Worth knowing before this file is ever
   loaded globally.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1120px) {
    html { font-size: .97222vw; }
}

@media (min-width: 1600px) {
    html { font-size: .83334vw; }
}

@media (min-width: 768px) and (max-width: 1119.98px) {
    html { font-size: 2.08334vw; }
}

@media (max-width: 767.98px) {
    html { font-size: 4.26667vw; }
}

/* The baseline the theme's .main wrapper used to provide. */
.bp-auth-screen {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* border-box across the auth screen: the sign-in fields set both a width and
   horizontal padding, which overflow the card under the default content-box. */
.bp-auth-screen,
.bp-auth-screen *,
.bp-auth-screen *::before,
.bp-auth-screen *::after {
    box-sizing: border-box;
}

/* ── Auth screens ────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   Sign-in screen

   Rebuilt on the shared tokens. The previous version hard-coded a dozen
   colours, several of them from a palette the product no longer uses, and
   painted every line of text the same near-white so nothing read as more or
   less important than anything else.
   ═══════════════════════════════════════════════════════════════════════ */

.bp-auth-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Was radial-gradient(#ba3838a3, transparent), #fff — a 64%-opaque red
       over white, which is where the muddy pink wash came from. A dark field
       with one soft accent bloom sits the card on the same surface as the rest
       of the product instead of fighting it. */
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(186, 55, 55, 0.13) 0%, transparent 70%),
        var(--bison-bg-body, #141414);
    padding: 24px;
}

.bp-auth-card {
    background: var(--bison-bg-card, #161514);
    border: 1px solid var(--bison-border, #2b2927);
    border-radius: 14px;
    padding: 40px 40px 32px;
    max-width: 384px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    text-align: center;
}

/* Holds the Bison wordmark. Was a 52px white rounded square with the letters
   "BS" in it — a stand-in for the logo that already exists. */
.bp-auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
}

.bp-auth-logo svg {
    width: 118px;
    height: auto;
    display: block;
}

.bp-auth-card h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bison-text-hi, #f6f4f1);
}

/* Muted, so the heading above it actually leads. Previously #fff — the same
   weight of white as the title. */
.bp-auth-sub {
    color: var(--bison-text-muted, #a8a4a0);
    font-size: 13.5px;
    font-weight: 400;
    margin: 0 0 26px;
}

.bp-auth-help {
    font-size: 12.5px;
    color: var(--bison-text-muted, #a8a4a0);
    margin: 22px 0 0;
}

.bp-auth-help a {
    color: var(--bison-text, #e7e4e0);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-bottom: 1px;
    transition: color .12s, border-color .12s;
}

.bp-auth-help a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* The wordmark carries the brand now, so the separate "BISON STUDIO" caps
   line above the title is redundant. Kept in the stylesheet for any markup
   still emitting it. */
.bp-auth-brand {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--bison-header-label, #6e6a66);
    margin: 0 0 14px;
}

/* ── Fields ─────────────────────────────────────────────────────────────
   Scoped to the card so the rest of the app's forms are untouched. */

.bp-auth-card .bp-form-group {
    text-align: left;
    margin-bottom: 14px;
}

/* Specificity deliberately raised above `.bp-form-group label` further down
   the file. Both are (0,1,1), so the later one won and this rule did nothing —
   which is how the labels ended up near-white on the light card. */
.bp-auth-card .bp-form-group label,
.bp-auth-card label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    /* Same token as the global rule, so the two cannot disagree by theme. */
    color: var(--bison-text-muted, #a8a4a0);
    margin-bottom: 6px;
}

.bp-auth-card .bp-input {
    /* --bg-input is #0d1e33 — navy blue, left over from an older palette and
       plainly wrong against a near-black card. */
    background: var(--bison-surface-alt, #1f1d1c);
    border: 1px solid var(--bison-border, #2b2927);
    border-radius: 8px;
    padding: 11px 13px;
    font-size: 14px;
    color: var(--bison-text-hi, #f6f4f1);
}

.bp-auth-card .bp-input::placeholder {
    color: var(--bison-text-ghost, #857e77);
}

.bp-auth-card .bp-input:focus {
    /* Was border-color:#fff with an ORANGE rgba(232,97,26) glow — neither
       colour appears anywhere else in the product. */
    border-color: var(--bison-accent, #ba3737);
    box-shadow: 0 0 0 3px rgba(186, 55, 55, 0.18);
}

/* Chrome paints autofilled fields with its own near-white background and
   ignores `background`. On a dark form that produced the pale lavender boxes
   with dark text. An inset shadow is the only thing it honours, and the text
   colour has to be forced separately. */
.bp-auth-card .bp-input:-webkit-autofill,
.bp-auth-card .bp-input:-webkit-autofill:hover,
.bp-auth-card .bp-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bison-surface-alt, #1f1d1c) inset;
    box-shadow: 0 0 0 1000px var(--bison-surface-alt, #1f1d1c) inset;
    -webkit-text-fill-color: var(--bison-text-hi, #f6f4f1);
    caret-color: var(--bison-text-hi, #f6f4f1);
    transition: background-color 9999s ease-in-out 0s;
}

.bp-auth-card .bp-input:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 1000px var(--bison-surface-alt, #1f1d1c) inset,
        0 0 0 3px rgba(186, 55, 55, 0.18);
    box-shadow:
        0 0 0 1000px var(--bison-surface-alt, #1f1d1c) inset,
        0 0 0 3px rgba(186, 55, 55, 0.18);
}

/* ── Submit ─────────────────────────────────────────────────────────────
   The accent, not white. A white button made the least brand-specific
   element on the screen the loudest thing on it. */
#bp-login-form button#bp-login-btn {
    /* The logo's own red, so the wordmark and the primary action are the same
       colour rather than two nearly-identical reds sitting near each other. */
    background: #E5484D;
    border: 1px solid #E5484D;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
    border-radius: 8px;
    margin-top: 6px;
    transition: background .12s, border-color .12s;
}

#bp-login-form button#bp-login-btn:hover {
    background: #d13c41;
    border-color: #d13c41;
    color: #ffffff;
}

#bp-login-form button#bp-login-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.bp-auth-form {
    text-align: left;
}

.bp-auth-form label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.bp-auth-form input[type="email"],
.bp-auth-form input[type="password"],
.bp-auth-form input[type="text"] {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    box-sizing: border-box;
    margin-bottom: 14px;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.bp-auth-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 97, 26, 0.15);
}

.bp-auth-form input::placeholder {
    color: var(--text-ghost);
}

.bp-form-msg {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 14px;
    text-align: left;
    display: none;
}

.bp-form-msg--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

.bp-form-msg--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #86efac;
}

.bp-form-msg--info {
    background: #ba38381a;
    border: 1px solid #ba3838;
    color: #ba3838;
}

/* ── Full-screen layout ──────────────────────────────────── */
.bp-layout {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
.bp-sidebar {
    width: 224px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    /* background: linear-gradient(45deg, #EBF0F3, #fff); */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-sub);
    overflow-y: auto;
}

/* Brand / logo area */
.bp-brand,
.bp-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--border-sub);
}

.bp-brand-logo,
.bp-sidebar-logo {
    width: 110px;
    height: 26px;
}

.bp-brand-name,
.bp-sidebar-company {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1em;
    text-transform: uppercase;
}

.bp-brand-sub,
.bp-sidebar-role {
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.2em;
    /* Was margin-bottom: -3px. The parent centres on the MARGIN box, so a
       negative bottom margin shortened it and pushed this down by half the
       value — measured live as the logo sitting 1.5px above the text. */
    position: relative;
}

.bp-brand-sub:before,
/* Divider. Was height:100% — the full height of a two-line "CLIENT
   PORTAL" (~26px) beside a 21px wordmark, so it overhung top and bottom and
   read as misalignment even once the 1.5px was gone. Matched to the wordmark
   and centred against it. */
.bp-sidebar-role:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 21px;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    background: #393633;
}

.bp-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Nav */
.bp-nav {
    flex: 1;
    padding: 10px 0 8px;
}

.bp-nav-group,
.bp-nav-section {
    padding: 0 10px;
    margin-bottom: 2px;
}

.bp-nav-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-ghost);
    padding: 20px 0px 0px 25px;
    display: block;
}

.bp-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
    position: relative;
    border-left: 3px solid transparent;
    line-height: 1.3em;
}

.bp-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-mid);
}

.bp-nav-item.is-active,
.bp-nav-item.active {
    background: var(--gondola);
    font-weight: 600;
}

.bp-nav-item.active svg {
    color: var(--gondola);
}

.bp-nav-item svg {
    width: 18px;
    height: 18px;
}

.bp-nav-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-ghost);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-nav-item.is-active .bp-nav-icon,
.bp-nav-item.active .bp-nav-icon,
.bp-nav-item.is-active svg,
.bp-nav-item.active svg {
    color: #ba3737;
}

.bp-nav-item:hover .bp-nav-icon,
.bp-nav-item:hover svg {
    color: var(--text-mid);
}

.bp-nav-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--duna);
    border-radius: 10px;
    padding: 2px 7px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

button.bp-nav-item.active .bp-nav-badge {
    background: #fff;
    color: var(--color-primary);
}

.bp-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    padding: 14px 18px;
    background: #7a43431a;
    border: 1px solid #ba38382e;
    border-radius: 10px;
}

.bp-dashboard-card {
    padding: 15px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.bp-dashboard-card.recent-activity,
.bp-dashboard-card.managed-hosting {
    margin-top: 20px;
}

.card-description {
    font-size: 13px;
    line-height: 1.5em;
    color: var(--text-two);
    font-weight: 400;
}

.bd-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.bp-brand-btn-secondary {
    background: var(--bg-card-two);
    border: 1px solid var(--border);
    padding: 7px 15px;
    border-radius: var(--radius);
    color: var(--title-text);
}

body.light ul.month-list li.month-item.active {
    color: #f6f4f1;
}

.bp-icon {
    background: #11202E;
    padding: 7px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.bd-card-header .content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bp-dashboard-card.managed-hosting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.managed-hosting .title {
    color: var(--title-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1em;
}

.bp-callout.managed-hosting {
    margin-top: 20px;
}

.bp-callout .title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.bp-callout-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #151515;
    padding: 9px 18px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.bp-callout-button:hover {
    color: var(--color-primary);
}

.bp-nav-badge.green {
    background: #16a34a;
}

/* Tour highlight */
.bp-nav-item.bp-tour-highlight {
    background: rgba(232, 97, 26, 0.2);
    color: var(--accent);
    box-shadow: 0 0 0 2px rgba(232, 97, 26, 0.35);
}

/* Sidebar footer */
.bp-sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border-sub);
    display: flex;
    align-items: center;
    gap: 9px;
}

.bp-user-info {
    flex: 1;
    min-width: 0;
}

.bp-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--title-text);
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-user-email {
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 12px;
}

body.light span.ticket-count {
    color: #f6f4f1;
}

/* Legacy sidebar-user / avatar block */
.bp-sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.bp-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #272524;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    border: 1px solid #393633;
}

.bp-user-company {
    font-size: 10px;
    color: var(--text-ghost);
}

.bp-logout-btn {
    background: #BA3737;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .15s;
}

.bp-logout-btn:hover {
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════════════════ */
.bp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-white);
}

/* Topbar */
.bp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 26px 12px;
    border-bottom: 1px solid var(--border-sub);
    /* background: rgba(11, 25, 41, 0.6); */
    background: rgba(23, 23, 23, 1);
    /*
     * NO backdrop-filter here. It was `blur(4px)`, and it did two things:
     *
     *   nothing visually — the background above it is alpha 1, fully opaque,
     *   so there is no backdrop left to blur. It made sense against the
     *   commented-out rgba(…, 0.6) and became inert when that changed.
     *
     *   broke the notification panel — backdrop-filter CREATES A STACKING
     *   CONTEXT. That trapped .bp-notif-dropdown inside the topbar, so its
     *   z-index: 100002 only competed against the topbar's own children. The
     *   topbar has no z-index of its own, so any positioned element later in
     *   the document — .bp-rec-card-item is `position: relative` — painted
     *   straight over the open panel.
     *
     * Removing it lets the dropdown's z-index compete at .bp-main level,
     * where it beats the content. Deliberately NOT replaced with a z-index on
     * the topbar: that would create a new stacking context and cap the
     * dropdown all over again, just at a different number.
     */
    flex-shrink: 0;
    gap: 16px;
}

button#bp-gen-invoice-btn {
    border: none;
}

.bp-topbar h1,
.bp-topbar-title {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
}

.bp-topbar-sub {
    font-size: 12px;
    color: var(--text-ghost);
}

.bp-topbar-sub strong {
    color: var(--text-mute);
    font-weight: 600;
}

.bp-topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Content scroll */
.bp-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 26px 36px;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.bp-page-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ══════════════════════════════════════════════════════════
   CARDS / PANELS
══════════════════════════════════════════════════════════ */
.bp-panel,
.bp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); */
}

.bp-panel {
    margin-bottom: 14px;
}

.bp-panel:last-child {
    margin-bottom: 0;
}

.bp-panel-header,
.bp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-faint);
    min-height: 44px;
}

.bp-panel-title,
.bp-card-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-hi);
}

.bp-panel-link,
.bp-card-link {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color .12s;
}

.bp-panel-link:hover,
.bp-card-link:hover {
    color: #f07d40;
}

.bp-card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-card-empty {
    padding: 30px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-primary);
}

.bp-card--ready-bill {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-input));
}

.bp-topbar-actions .bp-btn-outline {
    color: var(--title-text);
    border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════════════════════ */
.bp-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.bp-page-wrap.bp-hours .bp-stats-row {
    grid-template-columns: repeat(4, 1fr);
}


.bp-stat,
.bp-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color .15s, box-shadow .15s;
}

.bp-stat-title {
    color: var(--text);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.8em;
}

.bp-stat:hover,
.bp-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bp-stat-icon {
    color: #181818;
    display: flex;
    margin-bottom: 2px;
}

.bp-stat-label {
    font-weight: 400;
    letter-spacing: normal;
    font-size: 13px;
    line-height: 1.3em;
}

body.light .bp-stat-label {
    color: var(--text);
}

span.value.increase {
    color: #3FA56B;
}

.bp-stat-label span.value {
    font-weight: 600;
}

.bp-stat-label {
    font-weight: 600;
    letter-spacing: normal;
    font-size: 13px;
    line-height: 1.3em;
}

body.light .bp-stat-label {
    color: var(--text);
}

span.value:not(.increase) {
    color: #E5484D;
}

.bp-topbar-actions .bp-btn-transparent {
    min-width: unset;
    padding: 10px 15px;
    line-height: 1.5em;
    border-radius: 8px;
    background: transparent;
}

.bp-topbar-actions .bp-brand-btn {
    line-height: 1.5em;
    border-radius: 8px;
}


.bp-stat-value,
.bp-stat-val {
    font-size: 32px;
    font-weight: 500;
    color: var(--text-hi);
    line-height: 1;
    letter-spacing: -.5px;
}

.bp-stat-value.accent {
    color: var(--accent);
}

.bp-stat-value.green {
    color: #22c55e;
}

.bp-stat-sub {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
}

.bp-stat-card--warn .bp-stat-val {
    color: #f59e0b;
}

.bp-stat-card--danger .bp-stat-val {
    color: #ef4444;
}

.bp-stat-card--green .bp-stat-val {
    /* color: #22c55e; */
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
.bp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bp-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-ghost);
    border-bottom: 1px solid var(--border-sub);
    background: rgba(255, 255, 255, 0.025);
    white-space: nowrap;
}

.bp-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-faint);
    color: var(--text-primary);
    vertical-align: middle;
}

.bp-table tbody tr:nth-child(even) td {
    background: var(--bg-stripe);
}

.bp-table tr:last-child td {
    border-bottom: none;
}

.bp-table tbody tr:hover td {
    background: var(--bg-hover);
    transition: background .1s;
}

.bp-task-name {
    font-weight: 600;
    color: var(--text-hi);
    font-size: 13px;
}

.bp-task-id {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
}

.bp-hours-cell {
    font-weight: 700;
    color: var(--text-hi);
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════
   STATUS BADGES
══════════════════════════════════════════════════════════ */
.bp-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    line-height: 1.4;
}

.bp-status--open {
    background: rgba(245, 158, 11, 0.13);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.bp-status--in_progress {
    background: rgba(59, 130, 246, 0.13);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.bp-status--closed {
    background: rgba(34, 197, 94, 0.13);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.bp-status--sent {
    background: rgba(59, 130, 246, 0.13);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.bp-status--paid {
    background: rgba(34, 197, 94, 0.13);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.bp-status--overdue {
    background: rgba(239, 68, 68, 0.13);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.bp-status--draft {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-faint);
    border: 1px solid var(--border-faint);
}

.bp-status--billable {
    background: rgba(34, 197, 94, 0.13);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.bp-status--qb_error {
    background: rgba(239, 68, 68, 0.13);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.bp-ticket-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    cursor: default;
}

/* ClickUp dynamic status badge */
.bp-cu-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.bp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--accent);
    color: #151515;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
    /* box-shadow: 0 2px 8px rgba(232, 97, 26, 0.3); */
}

.bp-btn-primary:hover:not(:disabled) {
    background: var(--accent-hov);
    /* box-shadow: 0 4px 14px rgba(232, 97, 26, 0.4); */
    color: #fff;
}

.bp-btn-primary:disabled {
    opacity: .45;
    cursor: default;
    box-shadow: none;
}

.bp-btn-full {
    width: 100%;
    display: flex;
}

.bp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: transparent;
    color: var(--text-mute);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

.bp-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text-hi);
    background: rgba(255, 255, 255, 0.04);
}


.bp-topbar-actions .bp-btn-outline:hover {
    color: #fff
}

.bp-dash-grid button.bp-card-link.bp-dash-nav {
    color: #181818 !important;
}

.bp-btn-accent {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(232, 97, 26, 0.25);
}

.bp-btn-accent:hover {
    background: var(--accent-hov);
}

.bp-btn-sm {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    /* border: 1px solid rgba(255, 255, 255, 0.12); */
    background: #181818;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bp-btn-sm:hover:not(:disabled) {
    color: var(--accent);
}

.bp-btn-sm:disabled {
    opacity: .45;
    cursor: default;
}

/* Auth specific */
.bp-btn-primary.bp-auth-submit {
    display: block;
    width: 100%;
    padding: 13px;
    font-size: 15px;
    border-radius: 8px;
    margin-top: 4px;
}

/* ── Form elements ────────────────────────────────────────── */
.bp-form-group {
    margin-bottom: 14px;
}

.bp-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    /* Was #f7f7f7 — a fixed near-white, which is invisible on every light
       surface in the app (1.04:1 against a white card). The token adapts:
       #a8a4a0 on dark (7.37:1), #6e6a66 on light (5.37:1). This rule applies
       to every form in the portal, not only sign-in, so the same field labels
       were unreadable anywhere light mode was in use. */
    color: var(--bison-text-muted, #a8a4a0);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.bp-input,
.bp-select {
    display: block;
    width: 100%;
    padding: 10px 13px;
    font-size: 14px;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-hi);
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.bp-card .bp-input,
.bp-card .bp-select {
    color: #fff;
}

#bp-login-form .bp-input,
#bp-login-form .bp-select {
    color: #181818;
    background: #f7f7f7;
}


.bp-input:focus,
.bp-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 97, 26, 0.12);
}

.bp-input::placeholder {
    color: var(--text-ghost);
}

.bp-textarea {
    min-height: 90px;
    resize: vertical;
}

.bp-select {
    width: auto;
    display: inline-block;
    padding: 7px 10px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.bp-required {
    color: #ef4444;
}

.bp-link {
    color: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════ */
.bp-welcome-banner {
    border-radius: var(--radius);
    padding: 20px 0px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* "Semantic" is supplied by the bison-web theme. When it is not
   available the old fallback was the GENERIC `sans-serif`, i.e.
   whatever the browser defaults to (Arial on Windows), not the brand
   face. --bison-font-display leads with "Helvetica Now Display" and
   degrades through Helvetica Neue -> Helvetica -> Inter -> system. */
.bp-welcome-greeting,
.bp-welcome-name {
    font-family: "Semantic", var(--bison-font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-hi);
    margin-bottom: 3px;
    letter-spacing: -.2px;
}

.bp-welcome-text {
    color: var(--fuscous-grey);
    font-weight: 400;
    font-family: "Inter";
    color: var(--text-two);
    font-size: 14px;
    line-height: 1.7em;
}

body.dark .bp-welcome-text {
    color: var(--text-two);
}

.bp-welcome-sub,
.bp-welcome-company {
    font-size: 13px;
    color: #181818;
    font-weight: 400;
}

.bp-welcome-pm {
    color: var(--fuscous-grey);
    background: var(--bg-body);
    padding: 7px 25px;
    border-radius: 15px;
    position: relative;
    border: 1px solid var(--border);
    line-height: 1.5em;
}

body.light .bp-welcome-pm {
    background: #F4F2EF;
}

body.dark .bp-welcome-pm {
    color: var(--text-two);
}

span.pm-name {
    position: relative;
    padding-left: 10px;
}

span.pm-name:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    left: 3px;
    top: 50%;
    transform: translate(0%, -50%);
    background: var(--text-two);
}

.bp-welcome-pm:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: #3fa56b;
    border-radius: 50px;
    left: 11px;
    top: 50%;
    transform: translate(0, -50%);
}

/* .bp-welcome-pm strong {
    color: var(--color-primary);
    font-weight: 800;
} */

.bp-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Dashboard quick-list rows ───────────────────────────── */
.bp-ticket-list,
.bp-hours-list {
    padding: 0;
}

.bp-ticket-row {
    display: flex;
    flex-direction: column;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-faint);
    gap: 5px;
    cursor: default;
    transition: background .12s;
}

.bp-ticket-row:last-child {
    border-bottom: none;
}

.bp-ticket-row:hover {
    background: var(--bg-hover);
}

.bp-ticket-row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-ticket-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.bp-hours-row {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-faint);
    gap: 3px;
    transition: background .12s;
}

.bp-hours-row:last-child {
    border-bottom: none;
}

.bp-hours-row:hover {
    background: var(--bg-hover);
}

.bp-hours-row-task {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-hours-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-faint);
}

.bp-hours-val {
    font-weight: 700;
    color: var(--accent);
}

.bp-muted {
    color: var(--text-primary);
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════
   TICKET LIST (full view)
══════════════════════════════════════════════════════════ */
.bp-ticket-item {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--border-faint);
    transition: background .12s;
    cursor: default;
}

.bp-ticket-item:last-child {
    border-bottom: none;
}

.bp-ticket-item:hover {
    background: var(--bg-hover);
}

.bp-ticket-item-bar {
    width: 3px;
    min-height: 56px;
    flex-shrink: 0;
    border-radius: 0 2px 2px 0;
    background: rgba(255, 255, 255, 0.08);
}

.bp-ticket-status--open .bp-ticket-item-bar {
    background: #B93A3A;
}

.bp-ticket-status--in_progress .bp-ticket-item-bar {
    background: #60a5fa;
}

.bp-ticket-status--closed .bp-ticket-item-bar {
    background: #22c55e;
}

.bp-ticket-item-body {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
}

.bp-ticket-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-hi);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-ticket-item-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bp-ticket-item-date {
    font-size: 11px;
    /* color: var(--text-ghost); */
    color: #181818;
    font-weight: 400;
}

.bp-ticket-estimate {
    font-size: 10px;
    color: var(--text-mute);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2px 7px;
}

.bp-ticket-view-btn:not(.card-arrow-abs) {
    flex-shrink: 0;
    margin-right: 14px;
    background: #181818;
    border: 1px solid var(--border);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.bp-ticket-view-btn:not(.card-arrow-abs):hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Ticket info inline */
.bp-ticket-info {
    flex: 1;
    min-width: 0;
}

.bp-ticket-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-hi);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-ticket-meta {
    font-size: 11px;
    color: var(--text-faint);
}

/* ── Ticket detail ────────────────────────────────────────── */
/* .bp-td-header {
    margin-bottom: 20px;
} */

.bp-td-back {
    background: none;
    border: none;
    padding: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s;
    font-weight: 500;
    color: var(--text-two);
    font-size: 13px;
}

.bp-td-back:hover {
    color: var(--text-hi);
}

.bp-td-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    justify-content: space-between;
}

.bp-td-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-hi);
}

.bp-td-meta {
    font-size: 11px;
    color: var(--text-primary);
}

.bp-td-estimate {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: 600;
}

.bp-td-desc {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.bp-td-desc-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text);
    margin-bottom: 6px;
}

.bp-td-desc-body {
    font-size: 13px;
    color: var(--title-text);
    line-height: 1.65;
    white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════════════
   INVOICE ROWS
══════════════════════════════════════════════════════════ */
.bp-invoice-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-faint);
    transition: background .12s;
}

.bp-invoice-row:last-child {
    border-bottom: none;
}

.bp-invoice-row:hover {
    background: var(--bg-hover);
}

.bp-invoice-info {
    flex: 1;
    min-width: 0;
}

.bp-invoice-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-hi);
}

.bp-invoice-date {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
}

.bp-invoice-amt {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-hi);
    margin-right: 12px;
}

/* ══════════════════════════════════════════════════════════
   HOURS VIEW
══════════════════════════════════════════════════════════ */
.bp-hours-layout {
    display: grid;
    grid-template-columns: 1fr 284px;
    gap: 14px;
    min-height: 0;
}

.bp-hours-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Chart */
.bp-chart-wrap {
    padding: 14px 16px 8px;
}

.bp-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 12px 10px;
}

.bp-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.bp-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--color-primary);
    min-height: 3px;
    transition: opacity .2s;
}

.bp-bar:hover {
    opacity: .75;
}

.bp-bar.current {
    background: #f07d40;
}

.bp-bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.bp-bar-lbl,
.bp-bar-label {
    font-size: 9px;
    color: var(--text-ghost);
    text-align: center;
}

.bp-bar-val {
    font-size: 9px;
    color: var(--text-faint);
    text-align: center;
}

.bp-chart-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-ghost);
}

/* Members bar */
.bp-member-rows {
    padding: 10px 14px;
}

.bp-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bp-member-row:last-child {
    margin-bottom: 0;
}

.bp-member-name {
    font-size: 11px;
    color: var(--text-mute);
    width: 58px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-member-chip {
    display: inline-flex;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-mute);
}

.bp-member-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
}

.bp-member-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
}

.bp-member-fill.b {
    background: #3b82f6;
}

.bp-member-fill.c {
    background: #8b5cf6;
}

.bp-member-fill.d {
    background: #22c55e;
}

.bp-member-hrs,
.bp-member-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-mute);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* Ready to bill */
.bp-ready-bill {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-input));
}

.bp-ready-bill-body {
    padding: 16px;
}

.bp-ready-bill-amount,
.bp-ready-amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent);
    padding: 14px 16px 4px;
    line-height: 1;
}

.bp-ready-bill-desc,
.bp-ready-sub {
    font-size: 12px;
    color: var(--text-faint);
    padding: 0 16px 14px;
    line-height: 1.5;
}

.bp-card--ready-bill .bp-btn-primary {
    border-radius: 0 0 var(--radius) var(--radius);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   RETAINER / CREDITS
══════════════════════════════════════════════════════════ */
.bp-retainer-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.bp-retainer-title-row,
.bp-retainer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bp-retainer-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-hi);
}

.bp-retainer-meta,
.bp-retainer-count {
    font-size: 11px;
    color: var(--text-faint);
}

.bp-retainer-count {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
}

.bp-retainer-track {
    position: relative;
    height: 8px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 8px;
}

.bp-retainer-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), #f07d40);
    transition: width .6s ease;
    max-width: 100%;
}

.bp-retainer-fill.danger {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.bp-retainer-warning-marker,
.bp-retainer-marker {
    position: absolute;
    top: -5px;
    width: 2px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 1px;
}

.bp-retainer-warning-label {
    position: absolute;
    bottom: 14px;
    font-size: 9px;
    color: var(--color-primary);
    white-space: nowrap;
    transform: translateX(-50%);
}

.bp-retainer-ends-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-ghost);
}

.bp-retainer-alert {
    margin-top: 10px;
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--color-primary);
    line-height: 1.5;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ══════════════════════════════════════════════════════════
   SETTINGS VIEW
══════════════════════════════════════════════════════════ */
.bp-settings-body {
    padding: 4px 0;
}

.bp-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-faint);
    transition: background .12s;
}

.bp-settings-row:last-child {
    border-bottom: none;
}

.bp-settings-row:hover {
    background: var(--bg-hover);
}

.bp-settings-label {
    font-size: 12px;
    font-weight: 500;
}

.bp-dashboard-card.settings .bp-card-header {
    text-transform: uppercase;
}

.bp-settings-val {
    font-size: 13px;
    color: var(--text-mid);
}

.bp-settings-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border-faint);
}

/* ══════════════════════════════════════════════════════════
   EMPTY / SKELETON / LOAD STATES
══════════════════════════════════════════════════════════ */
.bp-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-ghost);
}

.bp-empty-icon {
    font-size: 38px;
    margin-bottom: 12px;
    opacity: .7;
}

.bp-empty h4 {
    font-size: 15px;
    color: var(--text-faint);
    margin: 0 0 6px;
    font-weight: 600;
}

.bp-empty p {
    font-size: 13px;
    margin: 0 auto;
    max-width: 280px;
    line-height: 1.6;
}

.bp-skel-wrap,
.bp-skeleton-wrap {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-skel-row {
    display: flex;
    gap: 10px;
}

.bp-skel {
    height: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    flex: 2;
    animation: bp-pulse 1.4s ease-in-out infinite;
}

.bp-skel.sm,
.bp-skel--sm {
    flex: 1;
}

.bp-skel.xs,
.bp-skel--xs {
    flex: 0 0 50px;
}

@keyframes bp-pulse {

    0%,
    100% {
        opacity: .28
    }

    50% {
        opacity: .65
    }
}

.bp-load-error {
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text);
}

/* Website list */
.bp-website-list {
    padding: 6px 0;
}

.bp-website-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-faint);
}

.bp-website-item:last-child {
    border-bottom: none;
}

.bp-website-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mid);
}

.bp-website-info {
    flex: 1;
    min-width: 0;
}

.bp-website-domain {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-website-url {
    font-size: 11px;
    color: var(--text-ghost);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1em;
}

.bp-site-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}

.bp-site-status--ok {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.bp-site-status--pending {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.bp-website-open {
    flex-shrink: 0;
    text-decoration: none;
}

/* Coming soon */
.bp-coming-soon {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
}

.bp-coming-icon {
    color: var(--text-ghost);
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    transform: scale(2);
}

.bp-coming-soon h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--title-text);
    margin: 0 0 8px;
}

.bp-coming-soon p {
    font-size: 14px;
    color: var(--title-text);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════ */
.bp-overlay,
.bp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bp-modal {
    /* background: #181818; */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    max-width: 500px;
    width: 100%;
    /* box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); */
    background: var(--bg-card);
}

body.light .bp-modal {
    background: #f6f4f1;
}

.bp-modal h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-hi);
}

.bp-modal p {
    font-size: 13px;
    color: var(--title-text);
    margin: 0 0 18px;
}

.bp-modal label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--title-text);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 5px;
}

.bp-modal input[type="text"],
.bp-modal textarea {
    display: block;
    width: 100%;
    padding: 10px 13px;
    font-size: 14px;
    background: var(--bg-body);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--title-text);
    box-sizing: border-box;
    margin-bottom: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.bp-modal input:focus,
.bp-modal textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 97, 26, 0.12);
}

.bp-modal input::placeholder,
.bp-modal textarea::placeholder {
    color: var(--title-text);
}

.bp-modal textarea {
    min-height: 90px;
    resize: vertical;
}

.bp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.bp-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--title-text);
}

.bp-modal-close {
    background: none;
    border: none;
    color: var(--title-text);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.bp-modal-close:hover {
    color: var(--text-hi);
}

.bp-modal-sub {
    font-size: 13px;
    color: var(--text-faint);
    margin: 0 0 18px;
}

.bp-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.bp-modal-actions .bp-btn-primary {
    background: #fff;
    color: #181818;
}

#bp-ticket-form .bp-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* ══════════════════════════════════════════════════════════
   HEALTH / BELL / NOTIFICATIONS
══════════════════════════════════════════════════════════ */
.bp-health-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.bp-brand-btn {
    background: #BA3737;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
}

.bp-brand-btn:hover {
    color: #f6f4f1 !important;
}

button#bp-new-ticket-topbar-btn {
    border: none;
}

.bp-bell-wrap {
    position: relative;
    display: inline-flex;
    background: var(--bg-body);
    padding: 9px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.bp-bell-wrap svg {
    color: var(--text-two);
}

.bp-bell-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 7px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    position: relative;
    transition: color .15s, background .15s;
}

.bp-bell-btn:hover {
    color: var(--color-primary);
}

.bp-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 8px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bp-notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 304px;
    /* NOT --bg-card. That token is #ffffff63 at :root — white at 39% alpha —
       and only body.dark overrides it to something opaque. On a card sitting
       flat in the page that reads as a subtle frosted panel, but this dropdown
       floats over the page, so the content underneath showed straight through
       it. z-index was never the problem: it is already 100002 and stacked
       correctly; the panel itself was see-through.

       --bison-bg-card is opaque in both themes (#161514 / #ffffff). */
    background: var(--bison-bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    z-index: 100002;
    overflow: hidden;
}

.bp-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-faint);
}

.bp-notif-health {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
}

.bp-notif-item {
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-faint);
    transition: background .1s;
}

.bp-notif-item:last-child {
    border-bottom: none;
}

.bp-notif-item:hover {
    background: var(--bg-hover);
}

.bp-notif-item--unread {
    background: rgba(232, 97, 26, 0.05);
}

.bp-notif-item--unread:hover {
    background: rgba(232, 97, 26, 0.09);
}

.bp-notif-msg {
    font-size: 12px;
    color: var(--title-text);
    line-height: 1.4em;
    margin-bottom: 3px;
    font-weight: 500;
}

.bp-notif-time {
    font-size: 10px;
    color: var(--text-ghost);
}

.bp-notif-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-ghost);
}

/* ══════════════════════════════════════════════════════════
   CHAT PANEL
══════════════════════════════════════════════════════════ */
.bp-chat-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.bp-chat-panel-header {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border-faint);
    flex-shrink: 0;
}

.bp-chat-list {
    flex: 1;
    min-height: 220px;
    max-height: 380px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-chat-empty {
    margin: auto;
    text-align: center;
    font-size: 13px;
    color: var(--text-ghost);
    padding: 20px 0;
}

.bp-chat-closed {
    padding: 12px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-faint);
    border-top: 1px solid var(--border-faint);
    background: rgba(255, 255, 255, 0.018);
}

.bp-chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 72%;
}

.bp-chat-mine {
    align-self: flex-end;
    align-items: flex-end;
}

.bp-chat-theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.bp-chat-bubble {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}

.bp-chat-mine .bp-chat-bubble {
    background: #2A1717;
    color: #fff;
    border-bottom-right-radius: 4px;
    width: fit-content;
}

.bp-chat-theirs .bp-chat-bubble {
    background: #ececec;
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.bp-chat-bubble-meta {
    font-size: 10px;
    color: var(--text);
    margin-top: 4px;
    padding: 0 4px;
}

.bp-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-faint);
    background: rgba(255, 255, 255, 0.018);
    flex-shrink: 0;
}

.bp-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-hi);
    font-size: 13px;
    resize: none;
    line-height: 1.45;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}

.bp-chat-input:focus {
    border-color: rgba(232, 97, 26, 0.45);
}

.bp-chat-send {
    flex-shrink: 0;
    color: #fff;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .1s;
    background: #393633;
    padding: 7px 15px;
    border-radius: 8px;
    border: 1px solid #393633;
    gap: 10px;
    display: flex;
}

.bp-chat-send:hover {
    background: var(--accent-hov);
}

.bp-chat-send:active {
    transform: scale(0.92);
}

/* TipTap compose */
.bp-chat-compose {
    border-top: 1px solid var(--border-faint);
    background: rgba(255, 255, 255, 0.018);
    flex-shrink: 0;
}

.bp-chat-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.012);
}

.bp-chat-toolbar button {
    background: none;
    border: none;
    color: var(--text-faint);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background .12s, color .12s;
    min-width: 26px;
    text-align: center;
}

.bp-chat-toolbar button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-mid);
}

.bp-chat-toolbar button.is-active {
    background: var(--accent-bg);
    color: var(--accent);
}

.bp-chat-editor {
    padding: 10px 14px;
    min-height: 72px;
    max-height: 200px;
    overflow-y: auto;
    cursor: text;
}

.bp-chat-editor .ProseMirror,
.bp-chat-editor .bp-prosemirror {
    outline: none;
    min-height: 50px;
    font-size: 13px;
    color: var(--text-hi);
    line-height: 1.55;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bp-chat-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--text-ghost);
    pointer-events: none;
    position: absolute;
}

.bp-chat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
}

.bp-chat-hint {
    font-size: 10px;
    color: var(--text-primary);
}

/* Rendered message HTML */
.bp-chat-content {
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.bp-chat-content p {
    margin: 0 0 6px;
}

.bp-chat-bubble-wrap.bp-chat-theirs {
    flex-direction: row-reverse;
}

.bp-chat-theirs .bp-chat-bubble {
    background: var(--bg-card-two);
}

.bp-chat-theirs .bp-chat-content {
    align-items: flex-start;
}

.bp-chat-content p:last-child {
    margin-bottom: 0;
}

.bp-chat-content ul,
.bp-chat-content ol {
    margin: 4px 0 6px;
    padding-left: 20px;
}

.bp-chat-bubble-wrap span.name-letter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #272524;
    border: 1px solid #393633;
    color: var(--title-text);
}

body.light .bp-chat-bubble-wrap span.name-letter {
    background: var(--bg-body);
    border: 1px solid var(--border);
}

.bp-chat-bubble-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.bp-chat-bubble-meta span.author {
    color: var(--title-text);
    font-weight: 600;
}

.bp-chat-bubble.bp-chat-content {
    display: flex;
    justify-content: flex-end;
    width: fit-content;
}

#bp-editor-toolbar {
    color: #fff;
}

.bp-chat-toolbar button {
    color: var(--title-text);
}

.bp-chat-content li {
    margin-bottom: 2px;
}

.bp-chat-content strong {
    font-weight: 700;
}

.bp-chat-content em {
    font-style: italic;
}

.bp-chat-content u {
    text-decoration: underline;
}

.bp-chat-content blockquote {
    border-left: 3px solid rgba(232, 97, 26, 0.5);
    margin: 6px 0;
    padding: 4px 10px;
    color: var(--text-mute);
}

.bp-chat-content code {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
    font-family: monospace;
}

.bp-chat-content img {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 4px;
    display: block;
    max-height: 260px;
    object-fit: contain;
}

.bp-chat-content a {
    color: #60a5fa;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   TOUR OVERLAY
══════════════════════════════════════════════════════════ */
.bp-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/*
 * The tour is a dark modal in BOTH themes, deliberately.
 *
 * It sits on a 75%-black scrim, and its border is rgba(255,255,255,.12) —
 * white-alpha only reads on a dark surface, which is what the card was
 * designed as. It was painted with --bg-card, which is #ffffff63 at :root:
 * 39%-opaque white. Over the scrim that composites to roughly #898989, a
 * murky mid-grey where nothing is legible — dark text managed 5.08:1 and
 * white only 3.5:1, so there was no text colour that worked.
 *
 * Opaque, and the same on both themes, so the contrast below is a fact
 * rather than something that depends on what happens to be behind it.
 */
.bp-tour-card {
    background: #161514;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.bp-tour-emoji {
    font-size: 36px;
    margin-bottom: 14px;
}

.bp-tour-card h2 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #f6f4f1;
}

.bp-tour-card h3 {
    margin: 12px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #f6f4f1;
}

.bp-tour-card p {
    font-size: 13px;
    color: #a8a4a0;
    line-height: 1.6;
    margin: 0 0 24px;
}

.bp-tour-step-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.bp-tour-counter {
    font-size: 11px;
    color: #857e77;
    font-weight: 600;
}

.bp-tour-dots {
    display: flex;
    gap: 5px;
}

.bp-tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: background .2s;
}

.bp-tour-dot.active {
    background: var(--accent);
}

.bp-tour-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/*
 * Skip.
 *
 * .bp-btn-outline inherits `color: var(--text-mute)`, and --text-mute is
 * #181818 — near-black, in BOTH themes, because body.dark never overrides it.
 * On the dark tour card that is 1.02:1, i.e. invisible. White, stated here
 * rather than through a token, because the card is a fixed dark surface.
 *
 * Scoped to the tour: .bp-btn-outline is used elsewhere on surfaces that are
 * not this one.
 */
.bp-tour-actions .bp-btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
}

.bp-tour-actions .bp-btn-outline:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════
   HAMBURGER (mobile toggle)
══════════════════════════════════════════════════════════ */
.bp-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--title-text);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.bp-hamburger:hover {
    color: var(--text-hi);
    background: rgba(255, 255, 255, 0.06);
}

/* ── Scrollbar ───────────────────────────────────────────── */
.bp-content::-webkit-scrollbar {
    width: 4px;
}

.bp-content::-webkit-scrollbar-track {
    background: transparent;
}

.bp-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.09);
    border-radius: 2px;
}

.bp-sidebar::-webkit-scrollbar {
    width: 3px;
}

.bp-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
}

.bp-settings-footer button {
    background: transparent;
    color: #fff;
    min-width: unset;
}

.bp-dashboard-card.settings * {
    color: var(--title-text);
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .bp-hamburger {
        display: flex;
    }

    .bp-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s ease;
        /* box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); */
    }

    .bp-layout.bp-sidebar-open .bp-sidebar {
        transform: translateX(0);
    }

    .bp-layout.bp-sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
    }

    .bp-content {
        padding: 14px 14px 28px;
    }

    .bp-topbar {
        padding: 11px 14px 9px;
    }

    .bp-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .bp-hours-layout {
        grid-template-columns: 1fr;
    }

    .bp-dash-grid {
        grid-template-columns: 1fr;
    }

    .bp-hours-sidebar {
        display: none;
    }

    .bp-notif-dropdown {
        width: 264px;
    }
}



/* new css */

body.dark :root {
    --text-primary: #f6f4f1
}

body.dark aside.bp-sidebar {
    background: var(--bg-card);
}

.bp-nav-item.is-active,
.bp-nav-item.active {
    border-left: 3px solid #BA3737;

}

/* .bp-nav-item.is-active::before,
.bp-nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
} */

body.dark .bp-nav-item:hover {
    color: var(--title-text);
}

body.dark .bp-content {
    background: var(--bg-body);
}

body.light .bp-content,
body.light .bp-topbar {
    background: var(--bg-body);
}

body.dark .bp-welcome-greeting {
    color: var(--title-text);
}

body.dark .bp-welcome-company {
    color: var(--text-two);
}

body.dark .bp-nav-item.is-active,
body.dark .bp-nav-item.active {
    color: var(--title-text);
}

body.dark .bp-stat-label {
    color: var(--text);
}

.bp-card-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.card-title h2 {
    color: var(--title-text);
    font-weight: 500;
    font-size: 20px;
    line-height: 1em;
    margin: 0px;
}

.bp-brand-regular {
    color: var(--title-text);
    font-size: 12px;
    line-height: 1em;
    font-weight: 500;
}

.bp-activity-card {
    display: flex;
    align-items: center;
}

h4.card-title {
    margin: 0;
}

p.card-status {
    margin: 0;
}

.card-content-left {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}

.card-content-left svg {
    width: 18px;
    height: 18px;
}

.card-title-wrapper h4 {
    color: var(--title-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
}

.card-title-wrapper p.card-status {
    color: var(--text-two);
    font-size: 12px;
}

span.bp-dot {
    position: relative;
    padding-left: 5px;
    margin-left: 10px;
}

span.bp-dot:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    left: -5px;
    top: 50%;
    background: var(--text-two);
    transform: translateY(-50%);
}

.activity-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.card-content-right {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
}

.card-content-right {
    color: var(--text-two);
    font-size: 14px;
    font-weight: 500;
}

.bp-activity-card svg {
    color: #5285C8;
}

.card-content-right span.status {
    text-transform: uppercase;
    background: #272524;
    padding: 5px 15px;
    border-radius: 50px;
}

.bp-activity-card:not(:first-child) {
    border-top: 1px solid var(--border);
    border-radius: 10px;
    padding-top: 20px;
}

.card-arrow-abs {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.bp-rec-card-wrapper {
    margin-top: 20px;
}

.bp-rec-card-content {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding-right: 30px;
}

.bp-rec-card-header-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bp-rec-card-content span.arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--text-two);
}

.bp-rec-card-title {
    color: var(--title-text);
    font-weight: 500;
    display: flex;
    gap: 0 10px;
    align-items: center;
    line-height: 1em;
}

span.bp-rec-card-status {
    padding: 3px 8px;
    background: #2E1414;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1em;
}

body.light span.bp-rec-card-status {
    background: var(--bg-body);
}

span.bp-rec-card-status.high {
    color: #E5484D;
    background: #2E1414;
}
span.bp-rec-card-status.warn {
    color: #E5A000;
    background: #2C2410;
}
span.bp-rec-card-status.tip {
    color: #4A90D9;
    background: #10202E;
}
span.bp-rec-card-status.good {
    color: #22A86A;
    background: #0F241A;
}
body.light span.bp-rec-card-status.high { color: #C62828; }
body.light span.bp-rec-card-status.warn { color: #B7791F; }
body.light span.bp-rec-card-status.tip  { color: #2B6CB0; }
body.light span.bp-rec-card-status.good { color: #1B7A4B; }

/* Clickable recommendation cards */
.bp-rec-card-item.bp-rec-clickable:not([data-rec-static]) {
    cursor: pointer;
    transition: border-color .15s, transform .05s;
}
.bp-rec-card-item.bp-rec-clickable:not([data-rec-static]):hover {
    border-color: var(--text-two);
}
.bp-rec-card-item.bp-rec-clickable:not([data-rec-static]):active {
    transform: translateY(1px);
}

body.light span.bp-rec-card-status {
    background: var(--bg-body);
}

body.light .bp-icon {
    background: var(--bg-body);
}

.managed-hosting svg {
    color: #4A90D9;
}

p.bp-rec-card-desc {
    font-size: 13px;
    line-height: 1.5em;
    color: var(--text-two);
    font-weight: 400;
    margin: 0;
}

.bp-rec-card-item {
    position: relative;
    background: var(--bg-card-two);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}


.bp-rec-card-item .bp-icon {
    width: 32px !important;
    height: 32px !important;
}

.bp-rec-card-wrapper .bp-rec-card-item:not(:first-child) {
    margin-top: 15px;
}

.bp-dashboard-card.recommendations {
    margin: 0;
}

.bp-dashboard-card.recommendations .card-title h2 {
    margin: 0;
}

.bp-card-header-wrapper h2 {
    margin: 0;
}


ul.month-list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0px;
    background: var(--bg-card-two);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px;
}

ul.month-list li {
    list-style: none;
    color: var(--title-text);
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
}

p.card-subtitle {
    margin: 0;
    color: var(--text);
    line-height: 1.7em;
}

.bp-performance-chart-wrap {
    margin-top: 30px;
}

ul.month-list li.month-item.active {
    background: #272524;
}

/* Performance snapshot widget — month tabs with prev/next arrows */
.month-selector.bp-perf-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bp-perf-nav {
    background: transparent;
    border: 1px solid var(--border, #33302e);
    color: var(--text-two, #9ca3af);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, color .15s;
}
.bp-perf-nav:hover:not([disabled]) {
    background: #272524;
    color: var(--text-one, #e5e7eb);
}
.bp-perf-nav[disabled] {
    opacity: .35;
    cursor: default;
}
.bp-perf-site {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-two, #9ca3af);
}
.bp-perf-note {
    margin-left: 15px;
}
.bp-perf-hint {
    display: block;
    margin: 8px 0 0 15px;
    font-size: 11px;
    color: var(--text-two, #9ca3af);
}
.bp-perf-empty {
    line-height: 1.6;
}
body.light .bp-perf-nav:hover:not([disabled]) { background: #eef0f2; }

.bp-activity-card-wrapper {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

button#bp-search-icon {
    background: transparent;
    box-shadow: none !important;
    padding: 0;
    appearance: none;
    outline: none !important;
    border: none;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.per-data-name {
    margin-top: 20px;
}

ul.data-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 0 40px;
    margin-left: 15px;
}

ul.data-list li {
    list-style: none;
    color: var(--text-two);
    position: relative;
}

ul.data-list li:before {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: #5285C8;
    left: -15px;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
}

ul.data-list li.data-item.previous:before {
    background: #9173C8;
}

.chart-bottom-info {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    color: var(--text);
}

.bp-dashboard-card.credit-balance {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--text);
}

a.top-up-btn {
    color: var(--title-text);
}

.remaining-top {
    display: flex;
    justify-content: space-between;
}

.bp-hours-remaining {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bp-credits-info {
    flex: 0 0 250px;
    position: relative;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

span.bp-hours-title {
    text-transform: uppercase;
    font-weight: 600;
}

.bp-hours-amount {
    color: var(--title-text);
    font-weight: 600;
}

.bp-hours-amount span.total-hours {
    font-weight: 400;
    color: var(--text);
}

.bp-credits-info span.current {
    color: var(--title-text);
    font-weight: 600;
}

span.bp-credits-title {
    text-transform: uppercase;
    font-weight: 600;
}

.bp-credits-info:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #2A2826;
    left: 0px;
    top: 0;
}

.bp-rec-card-item svg {
    color: #4A90D9;
}

.bp-progress-bar-track {
    background-color: #222227;
    border-radius: 10px;
    height: 10px;
    width: 100%;
    overflow: hidden;
}

body.light .bp-progress-bar-track {
    background-color: var(--bg-body);
}

.bp-progress-bar-fill {
    background-color: #5285C8;
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.4s ease-out;
}

.bp-tickets-header-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
    align-items: center;
}

.layout-selector li.month-item {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.7em;
    font-weight: 500;
}

.page-title h2 {
    color: var(--title-text);
    font-size: 24px;
    line-height: 1em;
    margin: 0;
    font-weight: 500;
}

.bp-tickets-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    transition: all .3s ease;
}

/* Board = one column per status. Columns grow to fill when few, and scroll
   horizontally when there are many statuses. */
.bp-tickets-grid-layout.board {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.bp-tickets-grid-layout.board .bp-tickets-grid-item {
    flex: 1 0 260px;
    min-width: 260px;
}

.bp-tickets-grid-layout.list {
    display: grid;
    grid-template-columns: 1fr;
}

.tickets-empty-col {
    color: var(--text-two);
    font-size: 13px;
    text-align: center;
    padding: 18px 0;
}

.bp-tickets-grid-item {
    background: var(--bg-card);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bp-tickets-wrapper {
    margin-bottom: 20px;
}

.ticket-status {
    color: var(--title-text);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
    line-height: 1em;
    position: relative;
    margin-left: 20px;
}

span.ticket-count {
    color: var(--text);
    background: #272524;
    padding: 5px 10px;
    border-radius: 50px;
    line-height: 1em;
}

.bp-tickets-grid-item .ticket-status:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--st-color, #4A90D9);
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
}

.tickets-items-grid {
    background: var(--bg-card-two);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;

}

body.light .tickets-items-grid {
    background: var(--bg-body);
}

.tickets-items-grid .items-top {
    display: flex;
    justify-content: space-between;
    gap: 20px 0;
    align-items: center;
    color: var(--text);
}

span.items-priority {
    position: relative;
    margin-left: 15px;
}

span.items-priority:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--text);
    border-radius: 50px;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

span.items-priority.medium:before {
    background: #D69E2E;
}

span.items-priority.high:before {
    background: #E5484D;
}

span.items-priority.completed:before {
    background: #3FA56B;
}

/*
 * No label, no marker.
 *
 * The dot is a priority marker drawn 15px to the LEFT of this span's text.
 * A ticket with no time estimate renders the span empty, so the dot floated
 * on its own at the top of the card with nothing to mark — reading as a
 * stray list bullet. The margin goes too, or the empty span keeps indenting
 * the row it sits in.
 */
span.items-priority:empty {
    margin-left: 0;
}

span.items-priority:empty:before {
    content: none;
}

.bp-tickets-grid-item .ticket-status.in-progress:before {
    background: #D69E2E;
}

.bp-tickets-grid-item .ticket-status.high:before {
    background: #E5484D;
}

.bp-tickets-grid-item .ticket-status.completed:before {
    background: #3FA56B;
}



.tickets-items-grid .item-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--text-two);
}

.tickets-items-grid span.assignee-icon {
    width: 24px;
    height: 24px;
    display: flex;
    border-radius: 50px;
    background: #303A48;
    align-items: center;
    justify-content: center;
    color: #5285C8;
    font-size: 9px;
    text-transform: uppercase;
}

body.light .tickets-items-grid span.assignee-icon {
    color: #fff;
}

.tickets-items-grid .item-assignee {
    display: flex;
    gap: 5px;
    align-items: center;
}

.tickets-items-grid .item-name {
    font-size: 14px;
    line-height: 1.3em;
    color: var(--title-text);
    font-weight: 600;
}

.add-request-card a {
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text);
    display: block;
    font-weight: 400;
    font-size: 13px;
}

.bp-page-wrap.tickets-details {
    margin-top: 20px;
    margin-bottom: 20px;
}

span.details-status {
    border-radius: 30px;
    padding: 5px 20px;
    line-height: 1.3em;
    font-weight: 500;
    font-size: 12px;
    padding-left: 30px;
    position: relative;
    color: var(--title-text);
}


span.details-status.high {
    background: #2E1414;
    color: #E5484D;
}

body.light span.details-status {
    background: var(--bg-card);
}

span.details-status:before {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #E5484D;
    content: '';
    border-radius: 30px;
}

span.bp-td-id {
    color: var(--text);
    font-size: 12px;
    line-height: 1em;
    font-weight: 400;
}

h2.tickets-title {
    font-size: 24px;
    line-height: 1.3em;
    color: var(--title-text);
    font-weight: 500;
    margin: 0;
}

.tickets-details-body {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}

.tickets-details-wrapper span.card-title {
    color: var(--text);
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.3em;
    font-weight: 600;
}

.ticket-assigned-card .card-assignee {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.ticket-assigned-card span.assignee-icon {
    background: #2C4043;
    color: #3FA0B0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.ticket-assigned-card .name-role {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ticket-assigned-card span.name {
    font-size: 14px;
    line-height: 1em;
    color: var(--title-text);
    font-weight: 600;
}

.ticket-assigned-card span.role {
    color: var(--text);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3em;
}

.tickets-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-status-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-status-card .status-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.ticket-status-card span.status-title {
    text-transform: uppercase;
    color: var(--text);
    font-weight: 600;
    line-height: 1.3em;
}

.ticket-status-card span.status-value {
    color: var(--text-two);
    font-size: 13px;
    line-height: 1.3em;
    font-weight: 400;
    position: relative;
}

.ticket-status-card .status-item.priority span.status-value:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--text);
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 15px;
}

.ticket-status-card .status-item.priority span.status-value.high:before {
    background: #E5484D;
}

.ticket-attachment-list-card span.card-title {
    margin-bottom: 10px;
    display: block;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-card-two);
    width: fit-content;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--title-text);
}

.attachment-item span.filename {
    color: var(--title-text);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
}

.attachment-item span.file-size {
    color: var(--text);
    font-size: 12px;
}

.logged-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 10px;
}

.ticket-logged-card .logged-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.ticket-logged-card span.logged-title {
    font-size: 12px;
    line-height: 1em;
    color: var(--text);
}

.ticket-logged-card span.logged-hours {
    font-size: 28px;
    line-height: 1em;
    color: var(--title-text);
    font-weight: 500;
}

.ticket-logged-card .logged-item:last-child:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #2A2826;
    left: -15px;
    top: 0;
}

.bp-dashboard-card.monthly-trend h3 {
    margin: 0;
    color: var(--title-text);
    font-weight: 500;
    font-size: 20px;
    line-height: 1em;
}

span.bp-card-sub {
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3em;
}

.monthly-trend .bp-card-header {
    padding: 0;
    align-items: flex-start;
    margin-bottom: 20px;
}

span.bar-info {
    color: var(--text);
    font-weight: 400;
    position: relative;
    font-size: 13px;
    line-height: 1em;
}

span.bar-info:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: red;
    border-radius: 2px;
    left: -15px;
    top: 53%;
    transform: translateY(-50%);
    line-height: 1em;
}

.bp-hour-log-item-header,
.bp-hour-log-item {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr 2fr 1fr 1fr;
    gap: 10px;
}

.bp-hour-log-item h4.work-name {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--title-text);
    line-height: 1em;
}

.bp-hour-log-item span.work-id {
    color: var(--text);
    text-transform: uppercase;
    line-height: 1em;
}

.bp-hour-log-item .work-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bp-hour-log-item {
    padding: 10px 0;
    /* border-top: 1px solid #2A2826; */
    /* border-bottom: 1px solid #2A2826; */
    align-items: center;
    position: relative;
}

.bp-hour-log-item:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--border);
    left: 0;
    top: 0px;
}


.bp-hour-log-item .bp-card-header-wrapper {
    margin-bottom: 20px;
}

.bp-hour-log-item-header {
    padding: 10px 0;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
}

.bp-hour-log-item span.log-date {
    color: var(--text-two);
    font-size: 13px;
    line-height: 1em;
    font-weight: 400;
}

.bp-hour-log-item .categories span.category {
    font-size: 13px;
    color: var(--text-two);
    position: relative;
    margin-left: 15px;
}

.bp-hour-log-item .categories span.category:before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #9173C8;
    border-radius: 2px;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.categories span.category.design:before {
    background: #9173C8;
}

.member-card {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.member-card span.member-icon {
    width: 26px;
    height: 26px;
    background: #2C4043;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #3FA0B0;
    font-size: 10px;
}

.member-card span {
    font-size: 13px;
    color: var(--text-two);
    line-height: 1em;
}

.bp-hour-log-item span.log-hour {
    font-weight: 600;
    color: var(--title-text);
    font-size: 14px;
}

.bp-hour-log-item span.bill-status {
    color: var(--title-text);
    background: #11271C;
    padding: 5px 15px;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 11px;
}

body.light .bp-hour-log-item span.bill-status {
    background: var(--bg-body);
}

.bp-hour-log-item span.bill-status.retainer {
    color: #3FA56B;
}

.bp-hour-table-bottom {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px 10px 0px;
    color: var(--text);
    font-size: 13px;
    line-height: 1em;
}

.bp-hour-table-bottom strong {
    color: var(--title-text);
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: #272524;
    -webkit-transition: .4s;
    transition: .4s;
}

input:focus+.slider {
    box-shadow: 0 0 1px #C84A4A;
}

input:checked+.slider {
    background-color: #C84A4A;
}


input:checked+.slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
    background: var(--title-text);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.retainer-growth {
    display: flex;
    justify-content: space-between;
    gap: 10px 0;
    flex-direction: column;
}

.bp-dashboard-card.retainer-credit {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

span.card-title {
    color: var(--text);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1em;
}

.retainer-growth h6.section-title {
    margin: 0;
    font-size: 24px;
    line-height: 1em;
    font-weight: 500;
    color: var(--title-text);
}

.retainer-growth p.description {
    color: var(--text-two);
    line-height: 1.7em;
}

.retainer-growth p.description strong {
    color: var(--title-text);
}

.bp-retainer-title {
    font-family: "Semantic", var(--bison-font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-hi);
    margin-bottom: 3px;
    letter-spacing: -.2px;
}

.retainer-projection {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-card-two);
    border: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}
.retainer-projection svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #4A90D9;
}
.retainer-projection strong {
    color: var(--title-text);
}

.retainer-growth .retainer-details-card {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    align-items: flex-start;
}

.details-card-item {
    position: relative;
    height: 100%;
}

.details-card-item:not(:first-child):before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #2A2826;
    left: -20px;
}

.retainer-growth h4.card-im-title {
    color: var(--title-text);
    font-size: 28px;
    line-height: 1em;
    margin: 0;
    font-weight: 500;
}

.retainer-growth span.card-im-dt {
    color: var(--text);
    font-size: 12px;
    line-height: 1em;
}

.retainer-growth h6.auto-topup-title {
    font-size: 12px;
    line-height: 1em;
    margin: 0;
    color: var(--text);
}

.retainer-growth .ret-auto-topup {
    display: flex;
    align-items: center;
    gap: 20px;
}

.retainer-hs-circle {
    position: relative;
    width: 200px;
    height: 200px;
    flex: 0 0 200px;
}

.retainer-growth {
    flex: 1;
}

.retainer-hs-circle canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.circle-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.retainer-hs-circle svg {
    width: 100%;
}

.retainer-hs-circle span.hr-usage {
    color: var(--title-text);
    font-weight: 600;
    font-size: 34px;
    line-height: 1em;
    margin: 0;
}

.retainer-hs-circle span.total-hours {
    color: var(--text);
    font-size: 12px;
    line-height: 1em;
}

.retainer-states {
    margin-top: 20px;
}

.retainer-states .bp-stats-row {
    grid-template-columns: repeat(4, 1fr);
}

.item-header {
    display: flex;
    justify-content: space-between;
    color: var(--text-two);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
}

.item-header span.hours {
    color: var(--title-text);
    font-weight: 600;
    font-size: 13px;
}

.hours-progress-bar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.credit-balance .bp-progress-bar-track {
    margin: 0;
}

.bp-progress-bar-track {
    margin-top: 15px;
}

.bp-progress-bar-fill.design {
    background: #9173C8;
}

.bp-progress-bar-fill.support {
    background: #3FA0B0;
}

.bp-progress-bar-fill.support {
    background: #E08A3C;
}

.bp-dashboard-card.top-up-credits {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--bg-card-two);
}

body.light .bp-dashboard-card.top-up-credits {
    background: var(--bg-card);
}

.top-up-credits .message {
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-size: 13px;
    line-height: 1em;
    gap: 10px;
}

.top-up-credits .message strong {
    color: var(--title-text);
}

.top-up-credits .credit-details {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}

.top-up-credits .credit-details svg {
    width: 40px;
    height: 40px;
    padding: 10px;
    background: #2A2110;
    stroke: #D69E2E;
    border-radius: 4px;
}

body.light .top-up-credits .credit-details svg {
    background: var(--bg-card);
    stroke: var(--title-text);
}

.bp-btn-transparent {
    display: flex;
    align-items: center;
    line-height: 1em;
    gap: 10px;
    color: var(--text-two);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: 4px;
    min-width: 190px;
}

button#bp-ticket-cancel {
    min-width: unset;
}

body.dark button#bp-ticket-cancel,
body.dark form .bp-btn-transparent {
    color: #1A1817;
}

form .bp-brand-btn,
form .bp-btn-transparent {
    border: none;
}

form .bp-btn-transparent {
    min-width: unset;
}

.bp-dashboard-card.credit-activity {
    margin-top: 15px;
}

.credit-activity .bp-card-header-wrapper {
    margin-bottom: 20px;
}

.bp-credit-activity-table .bp-hour-log-item-header,
.bp-credit-activity-table .bp-hour-log-item {
    grid-template-columns: 1fr 4fr 2fr 1fr 1fr;
}

.tb-col span.type {
    background: var(--bg-body);
    color: var(--text-two);
    padding: 5px 15px;
    border-radius: 15px;
    line-height: 1em;
    text-transform: uppercase;
}

.tb-col span.type.top-up {
    background: #11202E;
    color: #4A90D9;
}

body.light .tb-col span.type.top-up {
    background: var(--bg-card);

}

.tb-col span.type.renewal {
    color: #3FA56B;
    background: #11271C;
}

.bp-credit-activity-table .bp-hour-log-item span.log-hour {
    font-weight: 400;
    color: var(--text-two);
}

.delivery-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    gap: 20px;
}

.page-info h2 {
    margin: 0;
    color: var(--title-text);
    font-weight: 500;
    font-size: 24px;
    line-height: 1em;
}

.page-info p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7e, ;
}

.delivery-month-cards {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.delivery-month-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border-radius: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.delivery-month-card span.card-title {
    color: var(--title-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
    margin-top: 15px;
    margin-bottom: 5px;
}

.delivery-month-card span.card-desc {
    color: var(--text);
    font-size: 11px;
    line-height: 1.7em;
    font-weight: 400;
}


.delivery-month-card svg {
    background: #11271C;
    padding: 5px;
    width: 22px;
    height: 22px;
}

body.light .delivery-month-card svg {
    background: var(--bg-body);
}

.delivery-month-card svg path {
    stroke: #3FA56B;
}

.delivery-month-card.active {
    background: #272524;
}

.bp-deliverable-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.bp-deliverable-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.biggest-traffic-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 20px;
}

.biggest-traffic-card .traffic-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.biggest-traffic-card span.small-title {
    color: var(--text);
    text-transform: uppercase;
    font-weight: 600 !important;
    font-size: 11px !important;
    line-height: 1em;
}

.biggest-traffic-card span.traffic-percent {
    font-size: 88px;
    line-height: 1em;
    font-weight: 600;
    color: #3FA56B;
}

.biggest-traffic-card span.traffic-type {
    color: var(--title-text);
    font-weight: 500;
    font-size: 20px;
    line-height: 1em;
}

.biggest-traffic-card span.traffic-details {
    color: var(--text-two);
    font-size: 16px;
    line-height: 1.7em;
}

.biggest-traffic-card span.traffic-details strong {
    color: var(--title-text);
}

.bp-traffic-over-time-wrapper {
    background: var(--bg-card-two);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.bp-traffic-over-time-wrapper span.chart-title {
    color: var(--text);
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1em;
    margin-top: -10px;
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}

.traffic-info {
    display: flex;
    flex-direction: column;
}

.traffic-info span.small-title {
    color: var(--title-text);
    font-size: 20px;
    line-height: 1em;
    font-weight: 500;
}

.traffic-info span.traffic-details {
    color: var(--text);
    font-size: 13px;
    line-height: 1.7em;
}

.before-after-items .progress-bar {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    line-height: 1em;
    margin-top: 10px;
}

.before-after-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.before-after-item .title-wrapper {
    display: flex;
    justify-content: space-between;
}

.before-after-item span.title {
    color: var(--title-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
}

.before-after-item span.percent {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    align-items: center;
    color: var(--text);
    font-size: 13px;
    line-height: 1em;
}

.before-after-item span.percent.increase {
    color: #3FA56B;
}

.before-after-items .bp-progress-bar-track {
    margin: 0;
}

.before-after-item span.text {
    width: 60px;
    text-transform: uppercase;
    color: var(--text)
}

.before-after-item span.text:last-child {
    text-align: right;
}

.before-bar .bp-progress-bar-fill {
    background: #5A2526;
}

.after-bar .bp-progress-bar-fill {
    background: #D8675A;
}

.card-title {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.bp-progress-item span.title {
    font-size: 14px;
    color: var(--text-two);
}

span.title {
    color: var(--title-text);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3em;
}

.card-title span.desc {
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

.achieve-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 20px;
}

.achieve-item span.achieve-title {
    text-transform: uppercase;
    color: var(--text);
    line-height: 1em;
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 10px;
    display: block;
}

.what-it-achieved span.achieve-title {
    color: #3FA56B;
}

li.what-we-do-item {
    color: var(--text-two);
    font-size: 14px;
    line-height: 1.7em;
    list-style: none;
    margin: 0;
}

.channel-selector {
    display: none;
}

.achieve-item ul {
    margin: 0;
}

.delivery-cta .bp-card-wrapper {
    display: flex;
    justify-content: space-between;
}

.delivery-cta .card-info {
    display: flex;
    flex-direction: column;
}

.delivery-cta span.desc {
    color: var(--text);
    font-size: 14px;
    max-width: 433px;
}

.delivery-cta .card-cta {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}

.delivery-cta .card-cta a {
    line-height: 1em;
}

.delivery-cta .bp-btn-transparent svg path {
    stroke: var(--title-text);
}

.bp-channel-header-wrapper {
    display: flex;
    justify-content: space-between;
}

ul.selector-list {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    list-style: none;
    margin: 0;
}

li.selector-item {
    color: var(--text-two);
    position: relative;
    font-size: 13px;
    line-height: 1em;
}

li.selector-item:before {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    left: -20px;
    background: #5285C8;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
}

li.selector-item.organic:before {
    background: #3FA0B0;
}

li.selector-item.paid:before {
    background: #E08A3C;
}

li.selector-item.social:before {
    background: #9173C8;
}

li.selector-item.referral:before {
    background: #5285C8;
}

.bp-channel-chart-wrapper {
    margin-top: -30px;
}

.achieve-item {
    position: relative;
}

.achieve-item:last-child:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #2A2826;
    left: -40px;
    top: 0;
}

.bp-website-page {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

/* .change-to-site svg {
    background: #2A1717;
} */

.change-to-site .message span:first-child {
    font-weight: 600;
}

.change-to-site .message span {
    color: var(--text-two);
}

.bp-stats-row.website-cards {
    grid-template-columns: repeat(4, 1fr);
}

.bp-stats-row span.small {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-two);
}

.website-card {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.website-snapshot {
    flex: 0 0 300px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card-two);
    min-height: 190px;
    position: relative;
    border: 1px solid var(--border);
}
.website-snapshot a,
.website-snapshot img {
    display: block;
    width: 100%;
    height: 100%;
}
.website-snapshot img {
    object-fit: cover;
    object-position: top center;
    min-height: 190px;
}
.website-snapshot.no-snap::after {
    content: "Preview loading…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-two);
    font-size: 13px;
}

.bp-website-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.website-hosting-info {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.website-hosting-info .info-card {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.website-hosting-info span.info-title {
    text-transform: uppercase;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 3%;
    font-size: 13px;
    line-height: 1.7em;
}

.website-hosting-info span.info-val {
    color: var(--title-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
}

.website-domain-card {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}

.website-url-card {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.website-domain-card .card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-two);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.website-domain-card .card-icon svg {
    color: var(--title-text);
}

.website-url-card span.domain {
    color: var(--title-text);
    font-weight: 500;
    font-size: 20px;
    line-height: 1em;
}

.website-url-card a.domain-url {
    color: var(--title-text);
    font-weight: 400;
    font-size: 13px;
    line-height: 1em;
}

a.domain-url svg path {
    stroke: #fff;
}

.website-top-info {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

span.website-status.connected {
    color: #3FA56B;
    background: #11271C;
}

span.website-status {
    color: var(--title-text);
    font-size: 12px;
    line-height: 1em;
    padding: 7px 15px;
    border-radius: 25px;
    background: #11271C;
    position: relative;
    padding-left: 30px;
}

body.light span.website-status {
    background: var(--bg-body);
}

span.website-status:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: #3FA56B;
    border-radius: 50px;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.bp-domain-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    flex-wrap: wrap;
}

.website-info {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}


.website-info .icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-two);
    border: 1px solid var(--border);
}

.website-info svg {
    color: var(--title-text);
}

.website-records {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.record-top {
    display: flex;
    gap: 10px;
    align-items: center;
}

.website-info .record-top strong {
    color: var(--title-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
}

.website-info .record-top span {
    font-size: 12px;
    color: var(--text);
    line-height: 1em;
}

.website-info span.record-info {
    color: var(--text);
    line-height: 1em;
    font-size: 12px;
}

.domain-ssl-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.bp-domain-item:not(:last-child):before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #2A2826;
    bottom: -15px;
    left: 0;
}

.header-left h3 {
    margin: 0;
}

.backup-list .bp-card-header {
    padding: 0;
}

.backup-list a.view-all {
    color: var(--title-text);
}

.website-backup-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.website-backup-item {
    position: relative;
    display: grid;
    grid-template-columns: 0.5fr 7.5fr 2fr 2fr;
    gap: 20px;
    align-items: center;
}

.website-backup-item .icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-two);
    border-radius: 2px;
}

body.light .website-backup-item .icon {
    background: var(--bg-body);
}


.backup-date span {
    color: var(--title-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
}

.backup-type span {
    color: var(--text-two);
    font-weight: 400;
    font-size: 13px;
    line-height: 1em;
}

.backup-size span {
    color: var(--text);
    font-weight: 400;
}

.website-backup-item:not(:last-child):before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #2A2826;
    left: 0;
    bottom: -15px;
}


.backup-list h3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 1em;
}

.bp-dashboard-card.top-up-credits.change-to-site {
    margin: 0;
}

.bp-dash-grid.perf-rec,
.bp-dash-grid.used-chart {
    margin-top: 15px;
}

.bp-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.traffic-chart {
    max-width: 100%;
    overflow: hidden;
}

.bp-appearance-switcher {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}


body.dark .bp-switch-slider {
    transform: translateX(48px);
}

.version-switcher {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
}

.version-switcher .bp-nav-label {
    padding-top: 0px;
}

.bp-nav-group.bp-appearance-switcher {
    margin-right: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    line-height: 1em;
    padding: 5px;
    display: flex;
    gap: 5px;
    border-radius: 8px;
}

button.bp-appearance-btn {
    border: 0;
    padding: 5px;
    border-radius: 4px;
    background: transparent;
}

.bp-nav-group.bp-appearance-switcher svg {
    width: 15px;
    height: 15px;
}

button.bp-appearance-btn.active {
    background: var(--bg-body);
}

body.light .bp-nav-label {
    color: #8C8782;
}

.retainer-growth span.card-title {
    flex-direction: row;
}

a:hover {
    color: inherit !important;
}

.website-backup-item svg {
    color: var(--text-two);
}

button#bp-ticket-submit {
    border: none;
}


/* large desktop */
@media screen and (min-width: 1600px) {
    .hours-log p.card-subtitle {
        margin-top: 10px;
    }

    .bp-brand-logo,
    .bp-sidebar-logo {

        height: 40px;
    }

    .bp-topbar-actions .bp-brand-btn,
    .bp-topbar-actions .bp-btn-outline {
        height: 40px;
    }

    .wp-theme-bison-web .main {
        height: 100%;
    }

}

/* all desktop */
@media screen and (min-width: 981px) {}

/* only ipad */
@media screen and (min-width: 641px) and (max-width: 980px) {
    .card-content-right .meta {
        width: 90px;
    }

    .bp-stats-row {
        gap: 15px;
    }

    .bp-dashboard-card.monthly-trend .header-right {
        width: 100px;
    }

    .bp-brand-btn {
        padding: 10px 7px;
        line-height: 1em;
    }

    .bp-welcome-banner {
        margin: 0;
    }

    .tickets-details-body {
        grid-template-columns: 2fr 1fr;
    }

    .delivery-cta .card-cta {
        justify-content: flex-start;
    }

    .bp-stat-value,
    .bp-stat-val {
        font-size: 26px;
    }
}


/* Ipad and Mobile */
@media screen and (max-width: 980px) {
    .bp-bell-wrap {
        padding: 5px;

    }



    .bp-welcome-banner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
    }

    .card-content-left {
        width: 100%;
        justify-content: flex-start;
    }

    .recent-activity .card-title {
        margin: 0;
    }

    .bp-card-header-wrapper {
        margin-bottom: 20px;
    }



    .bp-activity-card .card-title-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .bp-welcome-pm {
        font-size: 12px;
    }

    .recommendations .card-title {
        margin-bottom: 0px;
    }

    .bp-dashboard-card.credit-balance {
        flex-direction: column;
    }

    .credit-balance .bp-credits-info {
        flex: 0;
        padding: 0;
    }

    .credit-balance .bp-credits-info:before {
        background: none;
    }

    .bp-tickets-grid-layout {
        grid-template-columns: 1fr 1fr;
    }

    .bp-tickets-grid-layout.board {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .bp-tickets-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .bp-page-wrap.bp-hours .bp-stats-row {
        grid-template-columns: 1fr 1fr;
    }



    .bp-hour-log-item-wrapper {
        overflow-x: auto;
    }


    .bp-hour-log-item-wrapper .tb-col.date,
    .bp-hour-log-item-wrapper .tb-head-col.date {
        width: 60px;
    }

    .bp-hour-log-item-wrapper .tb-col.work-name,
    .bp-hour-log-item-wrapper .tb-head-col.work-name {
        width: 230px;
    }

    .bp-hour-log-item-wrapper .tb-col.categories,
    .bp-hour-log-item-wrapper .tb-head-col.category,
    .bp-hour-log-item-wrapper .tb-col.types {
        width: 100px;
    }

    .bp-hour-log-item-wrapper .tb-col.team-member,
    .bp-hour-log-item-wrapper .tb-head-col.team-member,
    .bp-hour-log-item-wrapper .tb-col.amount {
        width: 120px;
    }

    .bp-hour-log-item-wrapper .tb-col.hours,
    .bp-hour-log-item-wrapper .tb-head-col.hours,
    .bp-hour-log-item-wrapper .tb-col.balance-hour,
    .bp-hour-log-item-wrapper .tb-head-col.balance {
        width: 80px;
    }

    .bp-hour-log-item-wrapper .tb-col.billable,
    .bp-hour-log-item-wrapper .tb-head-col.billable {
        width: 120px;
    }

    .tb-head-col.billable {
        padding-left: 5px;
    }

    .bp-hour-log-item h4.work-name {
        font-size: 13px;
        font-weight: 500;
    }

    .bp-dashboard-card.retainer-credit {
        flex-direction: column;
    }

    .retainer-hs-circle {
        width: 100%;
    }

    .retainer-growth .retainer-details-card {
        gap: 30px;
        flex-wrap: wrap;
    }


    .bp-dashboard-card.retainer-credit span.card-title {
        flex-direction: row;
    }

    .retainer-growth {
        margin-top: 20px;
    }


    .retainer-growth h6.section-title {
        font-size: 18px;
    }

    .retainer-states .bp-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .retainer-growth h4.card-im-title {
        font-size: 20px;
    }

    .delivery-top {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }

    .delivery-months {
        position: relative;
    }

    .delivery-month-card {
        min-width: 110px;
    }

    .delivery-month-card span.card-title {
        margin-bottom: 5px;
    }

    .biggest-traffic-card span.traffic-percent {
        font-size: 40px;
    }

    .achieve-item:last-child:before {
        left: -25px;
    }

    .before-after-item span.text {
        font-size: 11px;
    }

    .biggest-traffic-card span.traffic-type {
        font-size: 16px;
    }

    .bp-card-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .delivery-month-cards {
        flex-wrap: wrap;
    }

    .bp-dashboard-card.website-card {
        flex-direction: column;
        gap: 20px;
    }

    .bp-website-details {
        gap: 30px;
    }

    .website-hosting-info {
        flex-wrap: wrap;
    }

    .bp-dashboard-card.website-card {
        flex-direction: column;
        gap: 20px;
    }

    .bp-website-details {
        gap: 30px;
    }

    .website-hosting-info {
        flex-wrap: wrap;
    }

    .website-url-card span.domain {
        font-size: 16px;
        line-height: 1em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-stats-row.website-cards {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .website-top-info {
        align-items: center;
    }

    .header-right {
        width: 90px;
    }

    .header-left {
        padding-right: 40px;
    }

}

/* Only Mobile */
@media screen and (max-width: 640px) {
    .bp-card-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #bp-topbar .req-ass {
        display: none;
    }

    .delivery-month-cards {
        justify-content: flex-start;
    }

    .card-cta {
        flex-direction: column;
        gap: 15px !important;
    }

    .delivery-cta .card-cta a {
        width: 100%;
    }

    .achieve-wrapper {
        grid-template-columns: 1fr;
    }

    .before-after-items {
        grid-template-columns: 1fr;
    }

    .biggest-traffic-card span.traffic-percent {
        font-size: 45px;
    }

    .bp-dashboard-card.biggest-traffic-card {
        grid-template-columns: 1fr;
    }

    .bp-dashboard-card.top-up-credits {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-up-credits .credit-details {
        align-items: flex-start;
    }

    .top-up-credits .credit-details svg {
        width: 60px;
    }

    .bp-stat-value,
    .bp-stat-val {
        font-size: 24px;
    }

    .bp-stat-title {
        font-size: 11px;
    }

    .details-card-item:not(:last-child):before {
        background: none;
    }

    .details-card-item {
        position: relative;
        height: 100%;
        width: 45%;
    }

    .details-card-item:last-child {
        width: 100%;
    }

    .bp-hour-log-item:before {
        background: none;
    }

    .performance .bp-card-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .bp-dashboard-card.managed-hosting {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .bd-card-header {
        align-items: flex-start;
    }

    .bp-topbar-actions.my-tickets .bp-bell-wrap.search {
        display: none;
    }

    .bp-tickets-header-wrapper .layout-selector {
        display: none;
    }

    .bp-tickets-grid-layout {
        grid-template-columns: 1fr;
    }

    .bp-tickets-grid-layout.board {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bp-tickets-header-wrapper {
        margin-top: 40px;
    }

    .tickets-details-body {
        display: grid;
        grid-template-columns: 1fr;
    }

    .bp-topbar-actions.hours--amp--time button#bp-gen-invoice-btn {
        display: none;
    }

    .bp-topbar-actions.hours--amp--time button#bp-export-csv-btn {
        display: none;
    }

    .monthly-trend .bp-card-header {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .monthly-trend .bp-card-header .header-right {
        margin-left: 15px;
    }

    .monthly-trend .header-right {
        width: 120px;
    }

    ul.month-list li {
        font-size: 12px;
        padding: 3px 7px;
    }

    .bp-hour-log-item h4.work-name {
        font-size: 13px;
        font-weight: 500;
    }

    .bp-hour-table-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .total-bill span {
        line-height: 1.7em;
    }

    .website-backup-list {
        overflow-x: auto;
        width: 100%;
    }

    .backup-size {
        width: 50px;
    }

    .backup-date {
        width: 110px;
    }

    .backup-size span {
        font-size: 12px;
    }

    .backup-date span {
        font-weight: 500;
    }

    .activity-card-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .card-content-right {
        width: 100%;
        justify-content: space-between;
    }

    .bp-welcome-banner {
        margin: 0;
    }

    .recommendations .bp-card-header-wrapper,
    .recent-activity .bp-card-header-wrapper {
        flex-direction: row;
    }

    .monthly-performance-channel .card-title {
        margin-bottom: 40px;
    }

    .card-title h2 {
        font-size: 18px;
        font-weight: 500;
    }

    .details-card-item:not(:first-child):before {
        background: none;
    }
}

@media screen and (min-height: 767px) {
    .wp-theme-bison-web .main {
        height: 100%;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   The websites screen

   The portal's front door: a client picks a website before anything
   site-scoped is shown. Modelled on WPMU DEV's Hub — the list IS the
   dashboard, counts double as filters, and each site is a card you drill
   into rather than an entry in a dropdown. A dropdown stops working around
   five sites and the reference client has ninety.

   Every colour below is an existing alias declared on `:root, body`, so
   these rules follow the theme instead of freezing to the dark palette —
   see the alias trap documented at the top of this file.
   ═══════════════════════════════════════════════════════════════════════ */

.bp-sites {
  max-width: 1100px;
}

.bp-sites-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bp-sites-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-hi);
}

.bp-sites-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
}

.bp-sites-summary {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: 13px;
  color: var(--text-mute);
}

.bp-sites-summary strong {
  color: var(--text-hi);
  font-size: 15px;
}

/* ── Count chips, which are also the filters ─────────────────────────── */

.bp-site-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.bp-site-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: transparent;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bp-site-chip:hover {
  color: var(--text-hi);
  border-color: var(--accent);
}

.bp-site-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.bp-site-chip-n {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* ── Search ──────────────────────────────────────────────────────────── */

.bp-sites-search {
  margin-bottom: 16px;
}

.bp-sites-search input {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-hi);
  font-size: 13px;
}

.bp-sites-search input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── The cards ───────────────────────────────────────────────────────── */

.bp-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.bp-site-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.bp-site-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.bp-site-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.bp-site-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-site-state {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
}

.bp-site-state.is-connected {
  background: var(--bison-success-wash);
  color: var(--bison-success);
}

.bp-site-state.is-pending {
  background: var(--bison-warn-wash);
  color: var(--bison-warn);
}

.bp-site-card-domain {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-site-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bp-site-pkg {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-mute);
}

.bp-site-pkg.is-paid {
  border-color: transparent;
  background: var(--bison-accent-tint);
  color: var(--text-hi);
}

.bp-site-hours {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.bp-site-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hover);
  margin-top: 12px;
  overflow: hidden;
}

.bp-site-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.bp-site-attention {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bison-warn);
}

/* ── Sidebar, once a website is open ─────────────────────────────────── */

.bp-site-return {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bp-site-return:hover {
  color: var(--text-hi);
  border-color: var(--accent);
}

.bp-site-return svg {
  width: 14px;
  height: 14px;
}

.bp-site-current {
  padding: 0 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-faint);
}

.bp-site-current-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-site-current-sub {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ── Topbar breadcrumb ───────────────────────────────────────────────── */

.bp-topbar-site {
  font-weight: 700;
  color: var(--text-hi);
}

.bp-topbar-sep {
  margin: 0 8px;
  color: var(--text-faint);
}

.bp-topbar-view {
  color: var(--text-mute);
  font-weight: 500;
}

/* ── Add-website modal ───────────────────────────────────────────────── */

.bp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  padding: 20px;
}

.bp-modal {
  width: 100%;
  max-width: 440px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.bp-modal-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-hi);
}

.bp-modal-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-mute);
}

.bp-modal-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mute);
  margin-bottom: 5px;
}

.bp-modal-opt {
  text-transform: none;
  letter-spacing: 0;
}

.bp-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-hi);
  font-size: 13px;
}

.bp-modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.bp-modal-msg {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  font-size: 12px;
}

.bp-modal-msg.is-error {
  background: var(--bison-accent-wash);
  color: var(--bison-danger);
}

.bp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 600px) {
  .bp-site-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Choosing a website: no sidebar ──────────────────────────────────────
   Every sidebar item belongs to a website, so before one is picked the menu
   would be a list of things that cannot be opened yet. Removing it also
   gives the cards the full width they want. The sidebar returns the moment
   a website is open. */

/*
 * The layout STAYS flex here — only the sidebar is absent.
 *
 * Setting display:block was wrong twice over. #bison-portal-root is a fixed,
 * transparent overlay: it looks opaque only because .bp-main (flex:1) fills
 * it. As a block child, .bp-main collapsed to its content height and the
 * theme's own footer showed through the gap below it.
 *
 * And .bp-content is a column flex item, so `margin: 0 auto` on it stopped
 * it stretching and shrank it to fit its content — which is why the cards
 * sat in one narrow centred column with the page empty either side.
 *
 * Centring therefore happens on the inner .bp-sites block, where auto
 * margins behave the way they look like they should.
 */

.bp-layout-chooser .bp-content {
  padding-left: 24px;
  padding-right: 24px;
}

.bp-layout-chooser .bp-sites {
  max-width: 1160px;
  margin: 0 auto;
}

.bp-layout-chooser .bp-topbar {
  padding-left: 24px;
  padding-right: 24px;
}

/*
 * Sit below the WordPress admin bar.
 *
 * The root is fixed at inset:0 with z-index 99998; the admin bar is fixed at
 * top:0 with 99999, so it draws over the portal header and clips the logo.
 * Only applies when the bar is actually present.
 */
body.admin-bar #bison-portal-root {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar #bison-portal-root {
    top: 46px;
  }
}

/* The Bison mark stands in for the hamburger when there is no menu. */
.bp-topbar-mark {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.bp-topbar-mark svg {
  height: 26px;
  width: auto;
}

.bp-layout-chooser .bp-site-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

@media (max-width: 782px) {
  .bp-layout-chooser .bp-content,
  .bp-layout-chooser .bp-topbar {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Retry affordance on the websites screen error state. */
.bp-empty .bp-brand-btn {
  margin-top: 14px;
}

/* ── Website cards, second pass ──────────────────────────────────────────
   The first version was a plain box with the name and a pill. This gives
   each card the things you actually scan for at a glance: a monogram to
   identify it, a status dot, what it is on, and how much of its allowance
   is gone. Same information hierarchy the Hub uses; Bison's own tokens. */

.bp-site-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  min-height: 168px;
}

.bp-site-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-site-mono {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bison-accent-tint);
  color: var(--text-hi);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.bp-site-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.bp-site-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-site-card-domain {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A dot carries the state without competing with the name for attention;
   the written pill below still says it for anyone who cannot use colour. */
.bp-site-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.bp-site-dot.is-connected {
  background: var(--bison-success);
}

.bp-site-dot.is-pending {
  background: var(--bison-warn);
}

.bp-site-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bp-site-usage {
  margin-top: auto;
}

.bp-site-usage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.bp-site-bar {
  margin-top: 0;
}

.bp-site-attention {
  margin-top: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bison-warn-wash);
  color: var(--bison-warn);
}

/* Revealed on hover so the card reads as openable without shouting on
   every one of ninety cards at rest. */
.bp-site-go {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}

.bp-site-go svg {
  width: 13px;
  height: 13px;
}

.bp-site-card:hover .bp-site-go,
.bp-site-card:focus-visible .bp-site-go {
  opacity: 1;
  transform: translateX(0);
}

.bp-site-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The header row of the screen. */
.bp-sites-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-faint);
}

.bp-sites-search input {
  max-width: 320px;
}

/* Chips and search sit on one line — they are one control surface, and
   stacking them pushed the cards below the fold on a laptop. */
.bp-sites-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bp-sites-controls .bp-site-chips,
.bp-sites-controls .bp-sites-search {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .bp-sites-search input {
    max-width: none;
  }
}

/* Visible to screen readers only. The connection state is shown as a
   coloured dot; this is how that state still reaches anyone who cannot
   see the colour, without printing the word twice on screen. */
.bp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The card no longer reserves room for a progress bar it may not have,
   so an unpriced website is a compact card rather than a hollow one. */
.bp-site-card {
  min-height: 0;
  gap: 12px;
}

.bp-site-usage-none {
  font-size: 11px;
  color: var(--text-faint);
}

.bp-site-dot {
  position: relative;
}

/* Leave room for the hover affordance without it overlapping the content. */
.bp-site-card {
  padding-bottom: 40px;
}

.bp-site-usage {
  margin-top: auto;
}

/* ── The site bar ────────────────────────────────────────────────────────
   Which website you are on, and the way back, directly above the content.
   Kept together because on a screen full of tickets or invoices the first
   question is "whose are these?", and an answer that lives only in the
   sidebar is one people stop noticing. */

.bp-sitebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 26px;
  border-bottom: 1px solid var(--border-sub);
  background: var(--bg-card);
  flex-wrap: wrap;
}

.bp-sitebar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.bp-sitebar-back:hover {
  color: var(--text-hi);
  border-color: var(--accent);
}

.bp-sitebar-back svg {
  width: 14px;
  height: 14px;
}

.bp-sitebar-div {
  width: 1px;
  height: 22px;
  background: var(--border);
}

.bp-sitebar-mono {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bison-accent-tint);
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 700;
}

.bp-sitebar-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.bp-sitebar-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-sitebar-url {
  font-size: 11.5px;
  color: var(--text-mute);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-sitebar-url:hover {
  color: var(--accent);
  text-decoration: underline;
}

.bp-sitebar-url.is-empty {
  color: var(--text-faint);
}

.bp-sitebar-state {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.bp-sitebar-state.is-connected {
  background: var(--bison-success-wash);
  color: var(--bison-success);
}

.bp-sitebar-state.is-pending {
  background: var(--bison-warn-wash);
  color: var(--bison-warn);
}

/* ── Not-connected notice ────────────────────────────────────────────────
   Says what is missing and what it costs, without implying the client did
   something wrong — connecting is our job, not theirs. */

.bp-connect-note {
  padding: 11px 26px;
  border-bottom: 1px solid var(--border-sub);
  background: var(--bison-warn-wash);
  color: var(--bison-warn);
  font-size: 12.5px;
  line-height: 1.55;
}

.bp-connect-note strong {
  color: var(--bison-warn);
}

/* ── Locked menu items ───────────────────────────────────────────────────
   Left visible rather than hidden, so it is clear what connecting unlocks
   instead of the menu silently changing shape between websites. */

.bp-nav-item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp-nav-item.is-locked:hover {
  background: transparent;
}

.bp-nav-lock {
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 700px) {
  .bp-sitebar,
  .bp-connect-note {
    padding-left: 14px;
    padding-right: 14px;
  }

  .bp-sitebar-state {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Button standard

   The portal had grown seven button classes with seven different sizes:
   padding from 5px 11px to 10px 20px, font sizes 11/12/13/14, weights
   300/600/700, and radii of 4px, 8px, --radius-sm and --radius. Side by
   side they read as different components rather than one system, which is
   what "some are huge and some are tiny" actually was.

   The internal admin already had a settled answer, so this adopts it rather
   than inventing a third:

     medium   padding 10px 15px · 12px · 600 · radius-btn   (default)
     small    padding  5px 12px · 11px · 600 · radius-sm

   Both get line-height 1.4, a pointer cursor, a visible focus ring and a
   real disabled state. Declared last so it settles the existing rules
   without unpicking each one.
   ═══════════════════════════════════════════════════════════════════════ */

.bp-brand-btn,
.bp-brand-btn-secondary,
.bp-btn-primary,
.bp-btn-outline,
.bp-btn-accent,
.bp-btn-transparent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  font-family: inherit;
  font-size: var(--bison-fs-label, 12px);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--bison-radius-btn, 8px);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
  /* A button is not text — stop double-tap zoom and stray selection. */
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}

.bp-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: var(--bison-fs-sm, 11px);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--bison-radius-sm, 6px);
  cursor: pointer;
  white-space: nowrap;
}

/*
 * min-width: 190px was forcing every secondary button to that width, so a
 * "Cancel" sat as a 190px slab next to a normal Save. It had already been
 * patched away for one specific button by id; removing it here fixes the
 * rest and makes that patch unnecessary.
 */
.bp-btn-transparent {
  min-width: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
}

.bp-btn-transparent:hover {
  color: var(--text-hi);
  border-color: var(--accent);
}

/* The primary action. Was font-weight 300 with no cursor and a hard-coded
   hex, which is why it looked thin and never showed a pointer. */
.bp-brand-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.bp-brand-btn:hover {
  background: var(--bison-accent-hover, #a53030);
  border-color: var(--bison-accent-hover, #a53030);
  color: #fff !important;
}

.bp-brand-btn:active {
  background: var(--bison-accent-active, #8f2a2a);
}

/* Icons scale with the label rather than sitting at a fixed size. */
.bp-brand-btn svg,
.bp-brand-btn-secondary svg,
.bp-btn-primary svg,
.bp-btn-outline svg,
.bp-btn-accent svg,
.bp-btn-transparent svg,
.bp-btn-sm svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

/* One disabled treatment, so a disabled button never looks clickable. */
.bp-brand-btn:disabled,
.bp-brand-btn-secondary:disabled,
.bp-btn-primary:disabled,
.bp-btn-outline:disabled,
.bp-btn-accent:disabled,
.bp-btn-transparent:disabled,
.bp-btn-sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * Locked navigation is dimmed but still hoverable.
 *
 * pointer-events: none would suppress the tooltip that says WHY the item is
 * locked, leaving a greyed-out row with no explanation — so these get
 * aria-disabled rather than the disabled attribute, and keep their hover.
 * They carry no data-view, so the click handler ignores them anyway.
 */
.bp-nav-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Keyboard users need to see where they are. */
#bison-portal-root button:focus-visible,
#bison-portal-root a:focus-visible,
#bison-portal-root input:focus-visible,
#bison-portal-root select:focus-visible,
#bison-portal-root textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--bison-radius-sm, 6px);
}

/* Anything clickable should say so. Buttons default to an arrow cursor,
   which is what made "Add website" feel inert on hover. */
#bison-portal-root button,
#bison-portal-root [role="button"] {
  cursor: pointer;
}

#bison-portal-root button:disabled {
  cursor: not-allowed;
}

/* ── Site identity, now inside the topbar ────────────────────────────────
   It used to be a strip of its own below the header: a second horizontal
   band with its own background, stacked on the first. Living in the topbar
   means one bar, one background, and the content starts higher up. */

.bp-sitebar {
  display: contents;
}

.bp-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Inherits the topbar background — no surface of its own. */
.bp-sitebar-back {
  background: transparent;
}

.bp-sitebar-mono {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.bp-sitebar-name {
  font-size: 13.5px;
}

/* The view name rides with the website name rather than taking a line. */
.bp-sitebar-view {
  font-weight: 500;
  color: var(--text-mute);
}

.bp-sitebar-url {
  font-size: 11px;
}

/* Sits with the identity, not pushed to the far edge — the topbar actions
   already own the right-hand side. */
.bp-sitebar-state {
  margin-left: 4px;
}

.bp-sitebar-div {
  height: 20px;
}

/* The setup notice stays a full-width band under the topbar, because it is
   an explanation rather than an identity. */
#bp-sitebar-slot:empty {
  display: none;
}

@media (max-width: 900px) {
  /* The address is the first thing to go when space is short — the name and
     the way back matter more. */
  .bp-sitebar-url,
  .bp-sitebar-view {
    display: none;
  }
}

@media (max-width: 700px) {
  .bp-sitebar-back span {
    display: none;
  }

  .bp-sitebar-state {
    display: none;
  }
}

/* ── Chat panel ──────────────────────────────────────────────────────────
   The message list and the compose box were flush against each other,
   separated by a single hairline, so the last message read as part of the
   editor. */

.bp-chat-compose {
  margin-top: 14px;
}

.bp-chat-list {
  padding-bottom: 4px;
}

/* ── Topbar controls, matched to the Figma header ────────────────────────
   In the design the icon buttons and the Request assistance button are all
   the same height, sitting on one baseline. On screen the bell was a 49px
   box next to a 40px button — same centre, visibly different sizes, which
   is what read as "not aligned".

   One control height for everything in the bar. 38px is the height the
   standardised button already computes to (12px text, 10/15 padding), so
   the icon buttons are matched to the button rather than the other way
   round. That also brings the header itself to ~64px, as drawn. */

:root,
body {
  --bp-control-h: 38px;
}

.bp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The bell was padding-on-a-wrapper-around-a-padded-button, which is how it
   ended up 20px taller than everything beside it. */
.bp-bell-wrap {
  width: var(--bp-control-h);
  height: var(--bp-control-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--bison-radius-btn, 8px);
  background: var(--bg-body);
  flex-shrink: 0;
}

.bp-bell-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--bison-radius-btn, 8px);
}

.bp-bell-btn svg {
  width: 16px;
  height: 16px;
}

/* Keep the badge pinned to the button now that it fills the wrapper. */
.bp-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

.bp-topbar-actions .bp-brand-btn,
.bp-topbar-actions .bp-btn-transparent,
.req-ass .bp-brand-btn {
  height: var(--bp-control-h);
  padding: 0 15px;
}

/* A little more air before the primary action than between the icons,
   which is how the three are spaced in the design. */
.req-ass {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

/* The breadcrumb: muted parent, chevron, bold current — as drawn. */
.bp-topbar-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.4;
}

.bp-topbar-title strong {
  font-weight: 700;
  color: var(--text-hi);
}

.bp-sitebar-sep {
  margin: 0 6px;
  color: var(--text-faint);
}

/* ── Brand in the topbar, on the websites screen ─────────────────────────
   The mark and the CLIENT PORTAL label normally live in the sidebar brand
   block. There is no sidebar while choosing a website, so they move here —
   same treatment, same divider, so the screen still identifies itself the
   way every other one does. */

.bp-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bp-topbar-brand .bp-topbar-mark {
  margin-right: 0;
}

.bp-topbar-brand-div {
  width: 1px;
  height: 26px;
  background: var(--border);
}

.bp-topbar-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--text-mute);
  white-space: nowrap;
}

/* ── Centred breadcrumb ──────────────────────────────────────────────────
   Centred on the BAR, not on the space left between the brand and the
   actions — those two are different widths, so a flex-centred crumb would
   sit visibly off-centre and drift as the notification badge appears.

   pointer-events: none so it can never intercept a click meant for the
   controls it floats over. */

.bp-topbar {
  position: relative;
}

.bp-topbar-title.is-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* Below this the bar is too tight to float anything over the middle, so the
   crumb goes back to the flow beside the brand. */
@media (max-width: 900px) {
  .bp-topbar-title.is-centered {
    position: static;
    transform: none;
    margin-left: 4px;
  }

  .bp-topbar-role,
  .bp-topbar-brand-div {
    display: none;
  }
}

/* ── Before/after verdicts ───────────────────────────────────────────────
   "+0%" reads as a failure to move rather than a score held steady, so a
   flat result now says so in words. A drop says what to do about it instead
   of showing a red number, which invites an argument about a two-point dip
   that is inside PageSpeed's own run-to-run variance. */

.before-after-item span.percent.steady {
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
}

.before-after-item span.percent.decrease {
  color: var(--bison-warn);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Input focus ─────────────────────────────────────────────────────────
   Text inputs already signal focus by changing their border colour. The
   shared focus ring added a second outline on top of that — two rings for
   one state. Buttons and links keep the ring, because they have no border
   change of their own to fall back on. */

#bison-portal-root input:focus-visible,
#bison-portal-root select:focus-visible,
#bison-portal-root textarea:focus-visible,
#bison-portal-root [contenteditable]:focus-visible,
#bison-portal-root [contenteditable]:focus {
  outline: none;
}

/* Make the one remaining signal unambiguous, since it is now the only one. */
.bp-sites-search input:focus,
.bp-modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Care package prompt ─────────────────────────────────────────────────
   Shown once a client with no package has just raised or finished a piece
   of work. Deliberately quieter than a sales modal: no urgency, a visible
   way out, and "Not right now" as plain text rather than a button competing
   with the real actions. */

.bp-care-modal {
  position: relative;
  max-width: 460px;
  text-align: center;
}

.bp-care-icon {
  width: 48px;
  height: 48px;
  margin: 4px auto 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bison-accent-tint);
  color: var(--accent);
}

.bp-care-icon svg {
  width: 22px;
  height: 22px;
}

.bp-care-context {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bison-success);
}

.bp-care-modal .bp-modal-sub {
  margin-bottom: 22px;
}

.bp-care-actions {
  justify-content: center;
  flex-wrap: wrap;
}

.bp-care-dismiss {
  display: block;
  margin: 16px auto 0;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.bp-care-dismiss:hover {
  color: var(--text-mute);
}

.bp-care-modal .bp-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
}

/* ── Note inside a form modal ────────────────────────────────────────── */

.bp-modal-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--bg-hover);
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.5;
}

.bp-modal-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Attachments ─────────────────────────────────────────────────────────
   Built to look like the ticket list rather than a new kind of screen: the
   same card, the same row rhythm, the same empty state. It is the same sort
   of thing — a shared record both sides add to. */

.bp-doc-intro {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.6;
}

.bp-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-doc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card-alt, var(--bg-body));
}

.bp-doc-row:hover {
  border-color: var(--accent);
}

.bp-doc-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bison-accent-tint);
  color: var(--accent);
}

.bp-doc-icon svg {
  width: 16px;
  height: 16px;
}

.bp-doc-main {
  flex: 1;
  min-width: 0;
}

.bp-doc-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-hi);
  text-decoration: none;
  word-break: break-word;
}

.bp-doc-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.bp-doc-desc {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}

.bp-doc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-faint);
}

.bp-doc-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-hover);
  color: var(--text-mute);
}

.bp-doc-type.is-link {
  background: var(--bison-accent-tint);
  color: var(--accent);
}

/* Kept quiet until the row is hovered — a delete control on every row at
   full strength turns a document list into a minefield. */
.bp-doc-remove {
  flex-shrink: 0;
  padding: 6px;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.bp-doc-row:hover .bp-doc-remove,
.bp-doc-remove:focus-visible {
  opacity: 1;
}

.bp-doc-remove:hover {
  color: var(--bison-danger);
  background: var(--bison-danger-wash);
}

.bp-doc-remove svg {
  width: 14px;
  height: 14px;
  display: block;
}

.bp-doc-empty {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* ── Add form ────────────────────────────────────────────────────────── */

.bp-doc-form-body {
  padding: 4px 2px 2px;
}

.bp-doc-source {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 6px;
}

.bp-doc-or {
  align-self: center;
  padding-top: 22px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
}

.bp-doc-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .bp-doc-source {
    grid-template-columns: 1fr;
  }

  .bp-doc-or {
    padding-top: 0;
    text-align: center;
  }

  /* No hover on touch, so the control has to be there already. */
  .bp-doc-remove {
    opacity: 1;
  }
}

/* ── Images inside the reply editor ──────────────────────────────────────
   A pasted screenshot arrives at its natural size — a full-page capture is
   around 1900px wide. With nothing constraining it the editor grew to fit,
   which pushed the whole ticket layout sideways and squeezed the status
   widgets into a sliver.

   min-width on the flex/grid parents matters as much as max-width on the
   image: a flex item defaults to min-width:auto, so it refuses to shrink
   below its content and the image wins the argument regardless. */

.bp-prosemirror img,
.bp-chat-body img,
.bp-chat-message img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 8px 0;
}

.bp-chat-editor,
.bp-chat-compose,
.bp-chat-panel,
.bp-prosemirror {
  min-width: 0;
  max-width: 100%;
}

.bp-chat-editor {
  overflow-x: hidden;
}

/* The ticket page is a two-column layout; without this the left column
   inherits min-width:auto and wide content pushes the sidebar away. */
.tickets-details,
.tickets-details-wrapper {
  min-width: 0;
}

/* ── Attached screenshots ────────────────────────────────────────────────
   Selecting an image and pressing delete always worked, but nothing said
   so. This lists what is attached with a visible way to remove each one. */

.bp-editor-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0;
}

.bp-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  font-size: 11.5px;
  color: var(--text-mute);
  max-width: 220px;
}

.bp-attach-chip img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  flex-shrink: 0;
  /* Overrides the editor image rule above, which would stretch it. */
  margin: 0;
  max-width: 30px;
}

.bp-attach-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-attach-remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.bp-attach-remove:hover {
  background: var(--bison-danger-wash);
  color: var(--bison-danger);
}