/* workflow.css */

.wf-fs-7    { font-size: 7px; }
.wf-fs-9    { font-size: 9px; }
.wf-fs-10   { font-size: 10px; }
.wf-fs-10-5 { font-size: 10.5px; }
.wf-fs-11   { font-size: 11px; }
.wf-fs-11-5 { font-size: 11.5px; }
.wf-fs-12   { font-size: 12px; }
.wf-fs-12-5 { font-size: 12.5px; }
.wf-fs-13   { font-size: 13px; }
.wf-fs-14   { font-size: 14px; }
.wf-fs-15   { font-size: 15px; }
.wf-fs-15-5 { font-size: 15.5px; }
.wf-fs-16   { font-size: 16px; }
.wf-fs-17   { font-size: 17px; }
.wf-fs-18   { font-size: 18px; }
.wf-fs-19   { font-size: 19px; }
.wf-fs-20   { font-size: 20px; }
.wf-fs-22   { font-size: 22px; }
.wf-fs-24   { font-size: 24px; }


/* workflow tokens + chips */

:root {
    --wf-blue: #0d6efd;
    --wf-blue-dark: #0b5ed7;
    --wf-blue-mid: #cfe2ff;
    --wf-blue-bg: #EFF4FF;
    --wf-blue-border: #BFD3FE;
    --wf-purple: #7C3AED;
    --wf-purple-bg: #F5F3FF;
    --wf-purple-border: #DDD6FE;
    --wf-orange: #EA580C;
    --wf-orange-bg: #FFF7ED;
    --wf-orange-border: #FED7AA;
    --wf-green: #16A34A;
    --wf-green-bg: #F0FDF4;
    --wf-green-border: #BBF7D0;
    --wf-red: #DC2626;
    --wf-red-bg: #FEF2F2;
    --wf-red-border: #FECACA;
    --wf-yellow: #CA8A04;
    --wf-yellow-bg: #FEFCE8;
    --wf-yellow-border: #FEF08A;
    --wf-teal: #0D9488;
    --wf-teal-bg: #F0FDFA;
    --wf-teal-border: #99F6E4;
    --wf-pink: #DB2777;
    --wf-pink-bg: #FDF2F8;
    --wf-pink-border: #FBCFE8;
    --wf-border: #E8E5DF;
    --wf-bg: #F8FAFC;
    --wf-text-3: #94A3B8;
}

/* shared utility chips */
.wf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.5;
    white-space: nowrap;
}
.wf-chip i { font-size: 11px; }
.wf-chip.wf-chip-blue { background: var(--wf-blue-bg); color: var(--wf-blue); border: 1px solid var(--wf-blue-border); }
.wf-chip.wf-chip-purple { background: var(--wf-purple-bg); color: var(--wf-purple); border: 1px solid var(--wf-purple-border); }
.wf-chip.wf-chip-orange { background: var(--wf-orange-bg); color: var(--wf-orange); border: 1px solid var(--wf-orange-border); }
.wf-chip.wf-chip-green { background: var(--wf-green-bg); color: var(--wf-green); border: 1px solid var(--wf-green-border); }
.wf-chip.wf-chip-red { background: var(--wf-red-bg); color: var(--wf-red); border: 1px solid var(--wf-red-border); }
.wf-chip.wf-chip-yellow { background: var(--wf-yellow-bg); color: var(--wf-yellow); border: 1px solid var(--wf-yellow-border); }
.wf-chip.wf-chip-teal { background: var(--wf-teal-bg); color: var(--wf-teal); border: 1px solid var(--wf-teal-border); }
.wf-chip.wf-chip-pink { background: var(--wf-pink-bg); color: var(--wf-pink); border: 1px solid var(--wf-pink-border); }
.wf-chip.wf-chip-muted { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }
.wf-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wf-blue); }
.wf-type-toggle .wf-type-opt.is-active {
    background: #fff;
    color: #0F172A;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.wf-role-item.is-active {
    background: var(--wf-blue-bg);
    color: var(--wf-blue);
    font-weight: 600;
}
.wf-role-item.is-active .wf-role-count {
    background: #fff;
    color: var(--wf-blue);
}
.wf-perm-row.is-locked .wf-perm-name { color: #94A3B8; }
.wf-invite-row .form-select,
.wf-invite-row .form-control {
    font-size: 13px;
}
.wfb-view-tabs .wfb-tab.is-active {
    background: #fff;
    color: #0F172A;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}

.wfb-board {
    display: flex;
    gap: 12px;
    padding: 16px;
    overflow-x: auto;
    height: calc(100vh - 64px - 60px);
    align-items: flex-start;
}
.wfb-card.is-urgent {
    border-left: 3px solid var(--wf-red);
}

/* Card detail modal */
.wf-card-modal .modal-content {
    border-radius: 14px;
    overflow: hidden;
}
.wf-card-modal .modal-header {
    border-bottom: 1px solid var(--wf-border);
    padding: 14px 20px;
    align-items: flex-start;
}
.wf-card-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
}
.wf-card-modal .modal-body {
    padding: 18px 20px;
}
.wfc-post.is-urgent {
    border-color: var(--wf-red);
    border-left-width: 3px;
}
.wfm-ws-chip.is-active {
    background: var(--wf-blue-bg);
    border-color: var(--wf-blue-border);
    color: var(--wf-blue);
}

/* small responsive fixes */
@media (max-width: 768px) {
    /* mockups index: shrink hero + trim shell */
    .wfidx-shell { padding: 32px 16px 60px; }
    .wfidx-hero { margin-bottom: 28px; }
    .wfidx-hero h1 { font-size: 27px; }
    .wfidx-hero p { font-size: 15px; }
    .wfb-col { width: 86vw; }
    .wfm-stats { grid-template-columns: repeat(2, 1fr); }
    .wf-invite-row {
        grid-template-columns: 1fr;
    }
}



/* onboarding (wizard + checklist) */
/* wf-onboarding.css all styles for this page (extracted */
        /* PAGE SHELL */
        body.ob-shell {
            background: #FAFAF8;
            min-height: 100vh;
            font-size: 15px;
            line-height: 1.6;

        }

        /* TOPBAR */
        .ob-topbar {
            background: #fff;
            border-bottom: 1px solid #dee2e6;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 200;
        }
        .ob-logo-link { display: flex; align-items: center; text-decoration: none; }
        .ob-logo-full { height: 28px; width: auto; }
        .ob-topbar-right { display: flex; align-items: center; gap: 12px; }
        .ob-skip-link { font-size: 13px; font-weight: 500; color: #64748B; text-decoration: none; }
        .ob-skip-link:hover { color: #0d6efd; }

        /* MAIN LAYOUT */
        .ob-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 44px 32px 80px;
            display: grid;
            grid-template-columns: 1fr 292px;
            gap: 36px;
            align-items: start;
        }
        @media (max-width: 900px) {
            .ob-wrap { grid-template-columns: 1fr; padding: 28px 20px 60px; }
            /* checklist (main) stays first; sidebar cards stack */
            .ob-sidebar { position: static; top: auto; order: 0; }
        }

        /* PROFILE PILL & SWITCHER */
        .ob-pill-wrap { position: relative; display: inline-block; }
        .ob-profile-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #EFF4FF;
            color: #0d6efd;
            border: 1px solid #BFD3FE;
            font-size: 14px;
            font-weight: 600;
            padding: 3px 11px 3px 9px;
            border-radius: 20px;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s, box-shadow 0.15s;
            vertical-align: middle;
        }
        .ob-profile-pill:hover { background: #DBE7FE; box-shadow: 0 0 0 3px rgba(13,110,253,0.1); }
        .ob-profile-pill.is-open { background: #DBE7FE; box-shadow: 0 0 0 3px rgba(13,110,253,0.15); }
        .ob-profile-pill i.pill-icon { font-size: 15px; }
        .ob-profile-pill .pill-caret { font-size: 14px; transition: transform 0.2s; }
        .ob-profile-pill.is-open .pill-caret { transform: rotate(180deg); }

        .ob-profile-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 280px;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
            z-index: 300;
            overflow: hidden;
            animation: dropIn 0.18s ease-out;
            /* scrollable list area */
        }
        .ob-profile-dropdown .ob-pd-scroll {
            max-height: 320px;
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        .ob-profile-dropdown .ob-pd-scroll::-webkit-scrollbar { width: 4px; }
        .ob-profile-dropdown .ob-pd-scroll::-webkit-scrollbar-track { background: transparent; }
        .ob-profile-dropdown .ob-pd-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 4px; }
        @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
        .ob-pd-header {
            padding: 10px 14px 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #94A3B8;
            border-bottom: 1px solid #F1F5F9;
        }
        .ob-pd-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 14px;
            cursor: pointer;
            transition: background 0.12s;
            font-size: 14px;
            font-weight: 500;
            color: #1E293B;
        }
        .ob-pd-option:hover { background: #F8FAFC; }
        .ob-pd-option.is-active { background: #EFF4FF; color: #0d6efd; font-weight: 600; }
        .ob-pd-option .pd-icon-wrap {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .ob-pd-option .pd-check {
            margin-left: auto;
            font-size: 16px;
            color: #0d6efd;
        }
        .ob-pd-footer {
            padding: 8px 14px;
            border-top: 1px solid #F1F5F9;
            font-size: 12px;
            color: #94A3B8;
        }

        /* SIDEBAR */
        .ob-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }

        .ob-s-card {
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 18px 20px;
            overflow: hidden;
        }
        .ob-s-card-title {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: #94A3B8;
            margin-bottom: 14px;
        }

        /* Progress ring */
        .ob-ring-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
        .ob-ring-bg { fill: none; stroke: #F1F5F9; stroke-width: 8; }
        .ob-ring-fg {
            fill: none;
            stroke: url(#ringGrad);
            stroke-width: 8;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            transition: stroke-dashoffset 0.5s cubic-bezier(.4,0,.2,1);
        }
        .ob-ring-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
        }
        .ob-ring-num { font-size: 26px; font-weight: 800; color: #101010; }
        .ob-ring-sub { font-size: 12px; color: #94A3B8; font-weight: 500; }
        .ob-ring-msg { font-size: 13px; color: #64748B; text-align: center; }

        .ob-milestone-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
        .ob-milestone-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12.5px;
            color: #94A3B8;
        }
        .ob-milestone-item.is-reached { color: #16A34A; font-weight: 600; }
        .ob-milestone-item i { font-size: 14px; }

        /* Profile info card */
        .ob-profile-info-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
            margin-bottom: 12px;
        }
        .ob-profile-info-name { font-size: 15px; font-weight: 700; color: #101010; margin-bottom: 6px; }
        .ob-profile-info-desc { font-size: 13px; color: #64748B; line-height: 1.55; margin: 0; }

        /* Home widget preview */
        .ob-home-widget-preview {
            background: linear-gradient(135deg, #EFF4FF 0%, #F5F3FF 100%);
            border: 1px solid #BFD3FE;
            border-radius: 8px;
            padding: 14px 16px;
        }
        .ob-hw-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .ob-hw-title { font-size: 13px; font-weight: 700; color: #1E293B; }
        .ob-hw-dismiss { font-size: 11px; color: #94A3B8; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
        .ob-hw-progress-track {
            height: 5px;
            background: rgba(255,255,255,0.6);
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .ob-hw-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #0d6efd, #6366F1);
            border-radius: 999px;
            transition: width 0.4s;
        }
        .ob-hw-stat { font-size: 12px; color: #475569; }
        .ob-hw-stat strong { color: #101010; }
        .ob-hw-next {
            margin-top: 10px;
            padding: 8px 12px;
            background: rgba(255,255,255,0.7);
            border-radius: 8px;
            font-size: 12px;
            color: #101010;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ob-hw-next i { color: #0d6efd; font-size: 14px; flex-shrink: 0; }
        .ob-hw-cta {
            display: block;
            margin-top: 10px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #0d6efd;
            text-decoration: none;
            padding: 6px;
            background: rgba(255,255,255,0.7);
            border-radius: 8px;
        }
        .ob-hw-cta:hover { background: rgba(255,255,255,0.9); color: #0d6efd; }

        /* help card */
        .ob-help-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
        .ob-help-list a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            font-size: 13px;
            color: #475569;
            text-decoration: none;
            border-bottom: 1px solid #F8FAFC;
            transition: color 0.12s;
        }
        .ob-help-list a:last-child { border-bottom: none; }
        .ob-help-list a:hover { color: #0d6efd; }
        .ob-help-list i { font-size: 15px; color: #94A3B8; flex-shrink: 0; }
        .ob-help-list a:hover i { color: #0d6efd; }

        /* Completed all state */
        .ob-all-done-banner {
            display: none;
            background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
            border: 1px solid #BBF7D0;
            border-radius: 8px;
            padding: 20px 24px;
            text-align: center;
            margin-bottom: 16px;
        }
        .ob-all-done-banner.is-visible { display: block; }
        .ob-all-done-banner i { font-size: 36px; color: #16A34A; display: block; margin-bottom: 8px; }
        .ob-all-done-banner h3 { font-size: 17px; font-weight: 700; color: #101010; margin-bottom: 4px; }
        .ob-all-done-banner p { font-size: 13px; color: #64748B; margin: 0; }

        /* Divider */
        .ob-section-divider {
            height: 1px;
            background: #F1F5F9;
            margin: 6px 0;
        }

        /* pill color variants */
        .pill-purple { background: #F5F3FF; color: #7C3AED; border-color: #DDD6FE; }
        .pill-purple:hover { background: #EDE9FE; }
        .pill-orange { background: #FFF7ED; color: #EA580C; border-color: #FED7AA; }
        .pill-orange:hover { background: #FFEDD5; }
        .pill-teal { background: #F0FDFA; color: #0D9488; border-color: #99F6E4; }
        .pill-teal:hover { background: #CCFBF1; }
        .pill-yellow { background: #FEFCE8; color: #CA8A04; border-color: #FEF08A; }
        .pill-yellow:hover { background: #FEF9C3; }
        .pill-green { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
        .pill-green:hover { background: #DCFCE7; }
        .pill-pink { background: #FDF2F8; color: #DB2777; border-color: #FBCFE8; }
        .pill-pink:hover { background: #FCE7F3; }
        .pill-muted { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
        .pill-muted:hover { background: #E2E8F0; }
        .pill-indigo { background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }
        .pill-indigo:hover { background: #E0E7FF; }

        /* Responsive: tablet / phone (single-column kicks in */
        @media (max-width: 767.98px) {
            .ob-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
            .ob-wrap { padding: 22px 16px 56px; gap: 24px; }
            /* never let the absolutely-positioned profile dropdown exceed */
            .ob-profile-dropdown { min-width: 0; width: min(280px, calc(100vw - 32px)); }
        }
        @media (max-width: 575.98px) {
            .ob-topbar { padding: 11px 14px; }
            .ob-topbar-right { gap: 8px; }
            .ob-skip-link { display: none; }
        }
/* Dashboard get-started hub semantic classes */

/* progress-fill initial width (JS overwrites with computed */
.wfob-w-0 { width: 0%; }
/* thin progress bar for the dashboard get-started */
.wfd-gs-progress { height: 7px; }
/* 100% complete fill - project .bg-success is a pale tint, so the bar
   uses the solid Bootstrap success green */
.wfd-gs-bar-done { background-color: var(--bs-success) !important; }
/* brand-blue flag icon in home-widget preview */


/* ONBOARDING WIZARD (onboarding.html) Guided flow that runs */

/* PAGE SHELL */
body.obf-shell {
    background: #FAFAF8;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;

    display: flex;
    flex-direction: column;
}

/* TOPBAR (old style: light-grey bar, logo left, */
.obf-shell > header {
    background: #F6F9FB;
    text-align: center;
    position: relative;
}
.obf-shell > header .logo img {
    max-width: 200px;
    max-height: 100px;
    padding: 15px 0;
}

/* STEPPER (subtle dots, sits on top of */
.obf-step-now {
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
    margin-right: 4px;
}
.obf-step-now strong { color: inherit; font-weight: 600; }
.obf-dot {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #CBD5E1;
    cursor: default;
    transition: width 0.25s, background 0.25s;
}
.obf-dot.is-complete { background: #0d6efd; }
.obf-dot.is-current { width: 22px; background: #0d6efd; }
.obf-dot.is-clickable { cursor: pointer; }
.obf-dot.is-clickable:hover { background: #0b5ed7; }
.obf-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,0.3); }

/* compact "Step X of N" shown on */
.obf-stepper-compact {
    display: none;
    max-width: 760px;
    margin: 20px auto 0;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
}
.obf-stepper-compact strong { color: #0d6efd; }

/* STAGE / STEP CONTAINER */
.obf-stage {
    flex: 1;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 24px 140px;
}
.obf-success-badge i {
    font-size: 40px;
    line-height: 1;
    color: #10B981;
}
.obf-step { display: none; }
.obf-step.is-active { display: block; animation: obfStepIn 0.32s cubic-bezier(.4,0,.2,1); }
@keyframes obfStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.obf-head {
    background: #F1F6FF;
    border: 1px solid #D6E4FF;
    border-radius: 10px;
    padding: 20px 22px;
}
/* PROFILE GRID */
.obf-group + .obf-group { margin-top: 26px; }
.obf-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.06em;
    color: #334155;
}
.obf-group-label::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: #0d6efd;
    flex-shrink: 0;
}
/* .obf-card and .obf-card-check live in css/style.css: the plan picker in
   accountsettings.html selects with the same card */

/* Once a card is picked, the rest fade back so the choice - and any
   follow-up picker revealed under it - reads first. Hover brings a card
   back to full so switching answers still feels live. */
.obf-step.has-choice .obf-card:not(.is-selected) { opacity: 0.45; }
.obf-step.has-choice .obf-card:not(.is-selected):hover,
.obf-step.has-choice .obf-card:not(.is-selected):focus-visible { opacity: 1; }

/* Same fade-back for the follow-up chip pickers (which AI tool, which
   platform) so the picked answer carries the row. */
.obf-chips .btn { transition: opacity 0.2s; }
.obf-chips.has-choice .btn:not(.is-selected) { opacity: 0.45; }
.obf-chips.has-choice .btn:not(.is-selected):hover,
.obf-chips.has-choice .btn:not(.is-selected):focus-visible { opacity: 1; }

/* Choice chips, not form buttons: hovering tints the pill the same blue the
   cards use instead of taking an outline button's dark fill, which would
   swallow the platform mark inside it. */
.obf-chips .btn:hover,
.obf-chips .btn:focus-visible {
    background-color: #F1F6FF;
    border-color: #BFD3FE;
    color: #101010;
}
.obf-chips .btn i { font-size: 15px; }

/* STEP 3: SUCCESS / GET STARTED */
/* width cap only; centering/text-align come from Bootstrap */
.obf-success { max-width: 720px; }

/* connected-accounts list: cap height so a long */
.obf-connected-list { max-height: 38vh; }
.obf-filter-icon { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }

/* FOOTER NAV (sticky) */
.obf-footer { box-shadow: 0 -2px 12px rgba(15,23,42,.04); }
.obf-footer-inner {
  max-width: 1000px;
  width: 100%;
  padding:0 24px;
}
/* On the Done step the footer only carries the dashboard CTA; match the
   recap box width so the button's right edge lines up with the boxes. */
 

/* RESPONSIVE (wizard) */
@media (max-width: 767.98px) {
    .obf-stepper { display: none; }
    .obf-stepper-compact { display: block; }
    .obf-stage { padding: 24px 16px 150px; }
    .obf-footer { padding: 12px 16px; }
}

/* REDUCED MOTION (wizard) */
@media (prefers-reduced-motion: reduce) {
    .obf-step.is-active { animation: none; }
    .obf-card,
    .obf-dot { transition: none; }
}



/* dashboard */
/* wf-dashboard.css all styles for this page (extracted */
/* WORKFLOW BOARD VIEW - Buffer/Planable-style Clean white */
#board-view-ctn {
  display: none;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  background: #FAFBFB;
}
#board-view-ctn.wfb-active { display: flex !important; }

/* BOARD TOPBAR */
.wfb-toolbar-divider { width: 1px; height: 18px; background: #ebebeb; flex-shrink: 0; }
.kb-sa-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid #e8eaed; background: #fff;
  cursor: pointer; transition: all .15s;
  flex-shrink: 0; white-space: nowrap;
}
.kb-sa-btn:hover { border-color: #c9cdd4; background: #f7f8fa; }
.kb-sa-btn.active { border-color: var(--wf-blue); background: var(--wf-blue-bg); }
.kb-sa-name { font-size: 12px; font-weight: 500; color: #374151; }
.kb-sa-btn.active .kb-sa-name { color: var(--wf-blue-dark); }
.kb-sa-all { display: flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--wf-blue); background: var(--wf-blue-bg); cursor: pointer; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--wf-blue-dark); transition: all .15s; }
.kb-sa-all:hover { background: var(--wf-blue-mid); }

/* Count badge on chip */
.kb-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px;
  background: var(--wf-blue); color: #fff; font-size: 10px; font-weight: 700; margin-left: 1px;
}
.kb-chip.active .kb-chip-count { background: var(--wf-blue-dark); }

/* Kanban Filters offcanvas - collapsible section cards */
.wfb-filters-oc .offcanvas-body { padding: 15px 0 0; }
.wfb-filter-head { padding: 12px 14px; box-shadow: none; border: 0; color: #101010; }
.wfb-filter-head:hover, .wfb-filter-head:focus, .wfb-filter-head[aria-expanded="true"] { box-shadow: none; color: #101010; background: transparent; }
.wfb-filter-caret { color: #6b7280; transition: transform .2s ease; }
.wfb-filter-head[aria-expanded="true"] .wfb-filter-caret { transform: rotate(180deg); }

/* KANBAN LAYOUT */
.kb-wrap { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
/* d-flex flex-grow-1 align-items-stretch are on the element; */
 
.kanban-area { overflow-x: auto; overflow-y: hidden; min-width: 0; }
.kanban-area::-webkit-scrollbar { height: 5px; }
.kanban-area::-webkit-scrollbar-track { background: transparent; }
.kanban-area::-webkit-scrollbar-thumb { background: #c4c8d4; border-radius: 4px; }

/* COLUMN - Frosted columns on cool-slate board */
.kb-col {
  flex-shrink: 0; width: 284px;
  display: flex; flex-direction: column;
  border-radius: 16px;
  background: #EDEEEE;
  border: 1px dashed #ccd2e3;
  overflow: hidden; min-height: 0;
  position: relative;
  transition: box-shadow .18s ease, border-color .18s;
}
.kb-col:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); border-color: #b8c2d8; }

.kb-col--ideas     { --col-accent: #7c3aed; --col-accent-light: #f5f3ff; }
.kb-col--work      { --col-accent: var(--wf-blue); --col-accent-light: var(--wf-blue-bg); }
.kb-col--review    { --col-accent: #f59e0b; --col-accent-light: #fffbeb; }
.kb-col--client    { --col-accent: #0891b2; --col-accent-light: #f0fdff; }
.kb-col--scheduled { --col-accent: #059669; --col-accent-light: #ecfdf5; }

.kb-col-header {
  flex-shrink: 0; padding: 16px 16px 12px;
  /* background: linear-gradient("to bottom, var(--col-accent-light, #f0f1f6") 0%, transparent; */
  display: flex; align-items: center; gap: 8px;
}
.kb-col-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--col-accent); opacity: .85;
}
.kb-col-count {
  color: var(--col-accent);
  background: #fff;
  border-radius: 4px !important;
}
.kb-col-body {
  flex: 1; overflow-y: auto; padding: 0 10px 10px;
  background: transparent; display: flex; flex-direction: column; gap: 8px; min-height: 60px;
}
.kb-col-body::-webkit-scrollbar { width: 3px; }
.kb-col-body::-webkit-scrollbar-thumb { background: #e0e3e8; border-radius: 4px; }
.kb-col-body.drag-over { background: rgba(13, 110, 253,.04); outline: 2px dashed var(--wf-blue-border); border-radius: 8px; }
/* Square icon button - .btn.btn-outline-secondary supplies border/colour/cursor; */
.kb-col-add-btn {
  margin-left: auto; flex-shrink: 0;
  width: 24px; height: 24px;
  min-height: inherit;
}
/* Several workspaces in view = no single client for a new post to land in, so the
   column "Add post" buttons stay out until the filter points at one workspace.
   Ideas are workspace-agnostic until saved, so the Ideas "+" stays. */
#board-view-ctn.ws-all-mode .kb-col-add-btn[data-bs-target="#Share-a-Post"],
#board-view-ctn.ws-all-mode .kb-col-add-row[data-bs-target="#Share-a-Post"] { display: none; }

/* KANBAN CARD - Redesigned for marketing agencies */
/* bg-white, border, user-select-none, position-relative, overflow-hidden and flex-shrink-0 */
.kb-card {
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.055);
  transition: box-shadow .18s, transform .18s;
}
.kb-card[draggable="true"] { cursor: grab; }
.kb-card[draggable="true"]:active { cursor: grabbing; }
/* Provisional look for an idea on the */
.kb-card--awaiting { border-style: dashed; border-color: #cbb4f0; }
/* No transform on hover: a transform makes */
.kb-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.kb-card.dragging { opacity: .35; transform: rotate(1.5deg) scale(.97); }
.kb-card.filtered-out { display: none !important; }

/* WORKSPACE BADGE (card body, visible only in */
.kb-workspace-badge {
  display: none; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; color: #374151;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  padding: 2px 6px 2px 5px; border-radius: 20px;
  margin-top: 6px; line-height: 1.4; white-space: nowrap;
  width: fit-content;
}
.kb-workspace-badge i { font-size: 10px; color: #9ca3af; }
#board-view-ctn.ws-all-mode .kb-workspace-badge { display: inline-flex; }

/* LABEL TOOLTIP (card footer icon) */

.kb-labels-tip-btn {
  background: none; border: none; padding: 0 3px; cursor: pointer;
  color: #6b7280; display: inline-flex; align-items: center; gap: 2px;
  border-radius: 4px; transition: color .12s;
}
.kb-labels-tip-btn:hover { color: var(--wf-blue); }
.kb-labels-tip-btn i { font-size: 13px; }
.kb-labels-tip-pop {
  display: none; flex-direction: column; gap: 5px;
  position: fixed;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 9px 10px;
  z-index: 9990; min-width: 120px; pointer-events: none;
}

/* CARD BODY */
/* layout via Bootstrap d-flex / flex-column on */
.kb-card-inner { padding: 11px 12px 10px 10px; }

.kb-card-media-row { gap: 9px; }
.kb-card-media-row .kb-card-title { flex: 1; min-width: 0; }
.kb-card-title-col { flex: 1; min-width: 0; gap: 6px; }
.kb-card-title-col .kb-workspace-badge { margin-top: 0; }

/* Thumbnail - right-aligned via order:2 */
.kb-card-thumb-sm {
  /* radius + object-fit come from Bootstrap rounded-3 */
  width: 54px; height: 54px;
  flex-shrink: 0; display: block;
  border: 1px solid rgba(0,0,0,.07);
  order: 2;
}

/* Status strip - top of card, full */
.badge--pending    { color: var(--wf-blue-dark); }
.badge--atrisk     { color: #de910b; }
.badge--overdue    { color: #7C3AED; }
.badge--approved   { color: #169143; }
.badge--unassigned { color: #64748B; }
.badge--urgent     { color: #DC2626; }
.badge--awaiting   { color: #6d28d9; }
.badge--scheduled  { color: #047857; }
.badge--changes    { color: #2563EB; }
.badge--suggested  { color: #1d4ed8; }

/* Labels - inside card body, below title, */
.kb-card-labels {
  display: flex; flex-wrap: nowrap; gap: 4px;
  margin-top: 8px; overflow: hidden; max-height: 20px;
}
.kb-card-labels:empty { display: none; }
.kb-card-labels .rp-label-chip:nth-child(n+3) { display: none; }

/* Title - weight via .fw-bold (style.css), colour */
.kb-card-title {
  font-size: 13px;
  line-height: 1.5; letter-spacing: -.012em;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* CARD FOOTER */
.kb-card-footer {
  padding: 7px 12px 9px 10px;
  border-top: 1px solid #f0f2f5;
  gap: 5px;
}
.kb-card-meta { gap: 5px; flex: 1; min-width: 0; overflow: hidden; }
.kb-card-date {
  font-size: 11px; font-weight: 500;
  display: flex; align-items: center; gap: 3px;
  white-space: nowrap; flex-shrink: 0;
}
.kb-card-date i { font-size: 10px; }
.kb-card-date.overdue { color: #dc2626; font-weight: 600; }
.kb-card-date.atrisk  { color: #d97706; font-weight: 600; }

/* Dot separator in footer */
.kb-card-dot-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: #d1d5db; flex-shrink: 0;
}

/* Assignee avatar */
.kb-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 2px #fff;
}
.kb-card .kb-avatar { cursor: pointer; }
.kb-col[data-col-type="client"] .kb-card .kb-avatar,
.kb-col[data-col-type="scheduled"] .kb-card .kb-avatar {
  cursor: default; pointer-events: none;
}

/* Retain thumb-wrap/overlay for any future full-bleed card */
.kb-card-thumb-wrap {
  position: relative; width: 100%; height: 80px;
  border-radius: 7px 7px 0 0; overflow: hidden; flex-shrink: 0;
}
.kb-card-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SIDEBAR PROFILE BOARD FILTER */
.social-account[data-board-platform] { cursor: pointer; }

/* QUICK REASSIGN The avatar / assignee-row dropdowns */

/* OVERLAYS */
/* WORKFLOW POPUPS - all are Bootstrap modals. */
.wfb-modal-wide { max-width: 880px; }   /* card detail */
.wfb-modal-md   { max-width: 560px; }   /* social preview */
.wfb-modal-confirm { max-width: 380px; } /* generic confirm */

/* -- CARD DETAIL HEADER content -- */
/* Post type icon avatar */
.dlg-post-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--wf-blue-bg); color: var(--wf-blue);
  display: flex; align-items: center; justify-content: center;
}
.dlg-post-icon i { font-size: 19px; color: inherit; }
.dlg-title-wrap { flex: 1; min-width: 0; }
.dlg-stage-sub {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 10px 2px 7px; border-radius: 20px;
  background: #f3f4f6; color: #6b7280;
  width: fit-content; flex-shrink: 0;
}
.dlg-stage-sub i { font-size: 11px; }
/* Meta row: stage badge + assignee inline */
.dlg-title-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.dlg-hdr-assignee { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; }
.dlg-hdr-assignee i { font-size: 11px; }
.dlg-title-row { display: flex; align-items: center; gap: 8px; }
.dlg-title {
  font-size: 18px; font-weight: 700; color: #0f172a;
  line-height: 1.35; letter-spacing: -.025em;
  cursor: pointer;
}
.dlg-title:hover { }
.dlg-title-edit-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #9ca3af; transition: all .13s; flex-shrink: 0;
}
.dlg-title-edit-btn:hover { background: #f3f4f6; color: #374151; }
.dlg-title-edit-btn i { font-size: 14px; }
.dlg-close-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: #f4f5f7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #6b7280; transition: all .13s; flex-shrink: 0; margin-top: 2px;
}
.dlg-close-btn:hover { background: #e5e7eb; color: #111827; }
.dlg-close-btn i { font-size: 16px; }


/* -- MEDIA -- */
.dlg-media-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- ACTIVITY & COMMENTS -- (layout via */
.dlg-act-hdr { cursor: pointer; transition: background .12s; }
.dlg-act-chevron { transition: transform .18s; }
#wfb-act-hdr.open .dlg-act-chevron { transform: rotate(180deg); }
#wfb-act-body { display: none; }
#wfb-act-body.open { display: flex; flex-direction: column; gap: 14px; }

/* Activity badge - soft tinted pill, colour */
.dlg-comment-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600;
}
.dlg-comment-badge i { font-size: 10px; }
.dlg-comment-badge--moved { background: var(--wf-blue-bg); color: var(--wf-blue-dark); }
.dlg-comment-badge--requested { background: #fffbeb; color: #b45309; }
.dlg-comment-badge--created,
.dlg-comment-badge--approved { background: #f0fdf4; color: #166534; }
.dlg-comment-badge--published { background: var(--wf-blue-bg); color: var(--wf-blue-dark); }
.dlg-comment-badge--comment { background: #f3f4f6; color: #4b5563; }
.dlg-comment-badge--internal { background: #fef3c7; color: #b45309; }
.dlg-comment-badge--suggested { background: rgba(13,110,253,.08); color: #1d4ed8; }

/* Comment composer - single rounded container wrapping */
.dlg-comment-box {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px 6px;
  transition: background-color .15s ease, border-color .15s ease;
}
.dlg-comment-box:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.dlg-comment-input {
  padding: 4px 0;
  background: transparent;
}
/* "Internal" visibility footer under the input */
.dlg-comment-meta { border-color: #eef0f2 !important; }
.dlg-internal-check-wrap { cursor: pointer; }
.dlg-internal-check-wrap .form-check-input { cursor: pointer; margin-top: 0; }
.dlg-internal-icon { font-size: 13px; line-height: 1; }

/* Plain send icon, top-right of the input */
.dlg-comment-send {
  font-size: 20px; line-height: 1; cursor: pointer;
  padding: 5px;
  transition: opacity .15s ease;
}
.dlg-comment-send.disabled { opacity: .35; pointer-events: none; }

/* Toggle switch (shared) */
.toggle-sw { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.toggle-sw input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 22px; cursor: pointer; transition: background .18s; }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .18s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.toggle-sw input:checked+.toggle-slider { background: var(--wf-blue); }
.toggle-sw input:checked+.toggle-slider::before { transform: translateX(16px); }
/* Locked toggle (e.g. Client Approval for a */
.toggle-sw input:disabled+.toggle-slider { opacity: .45; cursor: not-allowed; }

/* Footer actions use Bootstrap .modal-footer + .btn */

/* -- TWO-COLUMN BODY (inside .modal-body) -- */
.dlg-body-2col { min-height: 0; display: flex; }
.dlg-body-content {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 20px 22px 24px;
  display: flex; flex-direction: column; gap: 20px;
  border-right: 1px solid #f0f2f5;
}
.dlg-body-content::-webkit-scrollbar { width: 3px; }
.dlg-body-content::-webkit-scrollbar-thumb { background: #e0e3e8; border-radius: 3px; }

/* Caption - border/rounded/p-3/max-h-200 come from utilities on */
 
.dlg-caption-box--empty {
  color: #9ca3af; font-style: italic; white-space: normal;
}

/* -- RIGHT METADATA SIDEBAR -- */
.dlg-body-meta {
  width: 268px; flex-shrink: 0;
  padding: 20px 18px; background: #f8f9fb;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; position: relative; z-index: 2;
}
.dlg-body-meta::-webkit-scrollbar { width: 3px; }
.dlg-body-meta::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Meta section labels + block layout/typography come */

/* Platform chips - rendered by workflow-board.js, so */
.dlg-plat-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.dlg-plat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid #e5e7eb;
}
.dlg-plat-chip img { width: 18px; height: 18px; object-fit: contain; }
.dlg-plat-more {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #e5e7eb;
  font-size: 11px; font-weight: 600; color: #6b7280;
  cursor: pointer; transition: all .13s;
}
.dlg-plat-more:hover { border-color: var(--wf-blue-border); color: var(--wf-blue); background: var(--wf-blue-bg); }

/* Label add button */
.dlg-meta-label-add {
    width: 60px;
    height: 30px;
    border-radius: 6px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1.5px dashed #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #101010;
    font-size: 12px;
}
.dlg-meta-label-add:hover { border-color: #9ca3af; color: #374151; }

/* -- CLIENT APPROVAL CARD (state-aware) -- */
.dlg-client-card {
  border-radius: 12px; padding: 12px 13px;
  background: #fff; border: 1.5px solid #e8eaed;
  transition: border-color .15s, background .15s;
}
.dlg-client-card.is-on  { border-color: var(--wf-purple-border); background: var(--wf-purple-bg); }
.dlg-client-card.is-off { border-color: #e8eaed; background: #fafafa; }

.dlg-client-icon {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.dlg-client-card.is-on  .dlg-client-icon { background: #ede9fe; color: var(--wf-purple); }
.dlg-client-card.is-off .dlg-client-icon { background: #f3f4f6; color: #9ca3af; }
.dlg-client-state {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d3c1fb;
  font-size: 12px; line-height: 1.5; color: #6b7280;
}
.dlg-client-state i { font-size: 14px; flex-shrink: 0; margin-top: .5px; }
.dlg-client-state strong { font-weight: 700; }
.dlg-client-card.is-on  .dlg-client-state i { color: var(--wf-purple); }
.dlg-client-card.is-on  .dlg-client-state strong { color: #5b21b6; }
.dlg-client-card.is-off .dlg-client-state { color: #9ca3af; }
.dlg-client-card.is-off .dlg-client-state strong { color: #6b7280; }
.dlg-client-card.is-on  .dlg-client-state--off { display: none; }
.dlg-client-card.is-off .dlg-client-state--on  { display: none; }

/* -- URGENT APPROVAL - nested checkbox sub-option */
.dlg-client-card.is-urgent { border-color: #f6b8c2; }   /* subtle shift from purple toward urgent red */
.dlg-urgent-row {
  margin: 10px -13px -12px;            /* bleed to the card's edges */
  padding: 11px 13px;
  border-top: 1px dashed #d3c1fb;
  border-radius: 0 0 11px 11px;
  transition: background .15s, border-color .15s;
}
.dlg-urgent-row.is-checked { background: var(--wf-red-bg); border-top: 1px solid var(--wf-red-border); }
.dlg-urgent-check { display: flex; align-items: flex-start; gap: 9px; margin: 0; cursor: pointer; }
.dlg-urgent-check .form-check-input { margin: 1px 0 0; flex-shrink: 0; cursor: pointer; }
.dlg-urgent-check .form-check-input:checked { background-color: var(--wf-red); border-color: var(--wf-red); }
.dlg-urgent-check-body { display: flex; flex-direction: column; gap: 1px; }
.dlg-urgent-check-lbl {
  font-size: 12px; font-weight: 700; color: #b91c1c;
  display: inline-flex; align-items: center; gap: 5px;
}
.dlg-urgent-check-lbl i { font-size: 13px; }
.dlg-urgent-check-sub { font-size: 11px; line-height: 1.45; color: #6b7280; }
/* recipient - who the one-click email goes to; only once urgent */
.dlg-urgent-to { display: none; flex-direction: column; gap: 7px;}
.dlg-urgent-row.is-checked .dlg-urgent-to { display: flex; }
 
.dlg-urgent-to-set strong { color: #374151; word-break: break-all; }

.dlg-urgent-to-ask .form-control {
font-size: 13px;
}

.dlg-urgent-to-ask { display: flex; flex-direction: column; gap: 5px; }
.dlg-urgent-to-ask .form-check-label { color: #6b7280; }
/* locked (no permission) - dim the control */
.dlg-urgent-row.is-locked .dlg-urgent-check { opacity: .55; cursor: not-allowed; }
.dlg-urgent-note {
  display: none; align-items: flex-start; gap: 6px;
  margin: 8px 0 0 26px; font-size: 11px; line-height: 1.45; color: #9ca3af;
}
.dlg-urgent-note i { font-size: 13px; flex-shrink: 0; margin-top: .5px; }
.dlg-urgent-row.is-locked .dlg-urgent-note { display: flex; }

/* Client Review: the approval decision is already made, so the card sheds its
   header, switch and state line and the urgent block stands on its own. The
   wrapper goes flat and the row takes over the border and radius, keeping the
   client-approval purple until it is ticked and turns urgent red. */
.dlg-client-card.is-urgent-only { padding: 0; border: 0; background: transparent; }
.dlg-client-card.is-urgent-only .dlg-client-state { display: none; }
.dlg-client-card.is-urgent-only .dlg-urgent-row {
  margin: 0; border-radius: 12px;
  border: 1.5px solid var(--wf-purple-border);
  background: var(--wf-purple-bg);
}
.dlg-client-card.is-urgent-only .dlg-urgent-row.is-checked {
  border-color: var(--wf-red-border); background: var(--wf-red-bg);
}

/* IDEAS DIALOG - Quick-Capture Notepad */

/* Giant borderless title - feels like writing */
.idea-title-inp::placeholder { color: #d1d5db; }

/* Open description area - no border, no */
.idea-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.idea-body::-webkit-scrollbar { width: 3px; }
.idea-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.idea-desc-ta {
  resize: none;
  max-height: 110px;
  overflow-y: auto;
}

/* Platform section - dashed divider + pill */
.idea-plat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1.5px solid #e5e7eb; background: #fff;
  cursor: pointer; transition: all .14s;
}
.idea-plat-chip img { width: 20px; height: 20px; object-fit: contain; }
.idea-plat-chip:hover { border-color: var(--wf-blue-border); color: var(--wf-blue); background: var(--wf-blue-bg); }
.idea-plat-chip.on {
  border-color: var(--wf-blue); background: var(--wf-blue-bg); color: var(--wf-blue);
  box-shadow: 0 0 0 2px rgba(13, 110, 253,.12);
}

/* "Add more details" collapse trigger - chevron */
.idea-more-btn .chevron { transition: transform .18s; }
.idea-more-btn:not(.collapsed) .chevron { transform: rotate(180deg); }

/* Idea detail - Activity & Comments thread */
.sc-idea-av {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.sc-idea-av-me   { background: #EDE9FE; color: #6D28D9; }
.sc-idea-av-them { background: #FEE2E2; color: #DC2626; }
.sc-idea-activity-badge { color: #B45309; }

/* Shared field wrapper - assignee picker */
.idea-field-wrap {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 9px;
  padding: 0 10px; height: 38px; cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.idea-field-wrap:hover { border-color: var(--wf-blue-border); }
.idea-field-wrap:focus-within,
.idea-field-wrap.show { border-color: var(--wf-blue); box-shadow: 0 0 0 3px rgba(13, 110, 253,.1); outline: none; }

/* Assignee picker - the field acts as */
.idea-assign-wrap { cursor: pointer; }
.idea-assign-av {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.idea-assign-name { font-size: 12.5px; font-weight: 500; color: #374151; flex: 1; min-width: 0; }
.idea-assign-chevron { font-size: 14px; color: #b0b7c3; flex-shrink: 0; margin-left: auto; }
/* Selection shown by the checkmark (reassign-style); hover */
.idea-assign-opt .idea-assign-check { visibility: hidden; }
.idea-assign-opt.selected .idea-assign-check { visibility: visible; }

/* Reference image upload zone - dashed border */
.idea-upload-zone {
  border: 1.5px dashed var(--wf-blue-border); border-radius: 10px;
  cursor: pointer; background: #fff; transition: all .15s;
}
.idea-upload-zone-ico {
  width: 28px; height: 28px; background: var(--wf-blue-mid);
}
.idea-upload-zone-ico i { font-size: 14px; color: var(--wf-blue); }

.toggle-sw--blue input:checked + .toggle-slider { background: var(--wf-blue); }


/* Shared helpers */

.req { color: #dc2626; }
.plat-btn.on { border-color: var(--wf-blue); background: var(--wf-blue-bg); color: var(--wf-blue); }

/* TOAST - uses RecurPost's native Bootstrap toast */
#wfb-toast-box.toast-container { z-index: 3000; }

/* Hide calendar-only toolbar controls when board view */
.inner-header.wfb-board-mode .queue-opt { display: none !important; }

/* ASSIGNMENT PICKER (Bootstrap modal-content scaffold) */
/* Generic confirm dialog - sits above another */
#wfb-confirm-overlay { z-index: 2000; }
.wfb-confirm-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--wf-blue-bg); color: var(--wf-blue); display: flex; align-items: center; justify-content: center; font-size: 21px; margin: 0 auto 13px; }
.wfb-confirm-icon-red { background: #fef2f2; color: #dc2626; }
.wfb-confirm-icon-amber { background: #fffbeb; color: #d97706; }
#wfb-confirm-msg strong { color: #374151; font-weight: 600; }
/* Layout, border, radius, spacing all come from */
.assign-member-item { cursor: pointer; transition: border-color .13s, background .13s; }
.assign-member-item:hover { border-color: var(--wf-blue-border) !important; background: var(--wf-blue-bg); }
.assign-member-item:has(.form-check-input:checked) { border-color: var(--wf-blue) !important; background: var(--wf-blue-bg); }
.assign-member-avatar { width: 36px; height: 36px; font-size: 12px; }
.assign-dlg-footer { padding: 12px 14px; border-top: 1px solid #f0f1f3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.assign-unassigned-note { padding: 20px 14px; text-align: center; color: #9ca3af; font-size: 13px; line-height: 1.6; }
.assign-terminal-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #f0f9ff; border: 1px solid #e0f2fe; border-radius: 10px; color: #475569; font-size: 13px; line-height: 1.6; }
.assign-terminal-note i { font-size: 20px; color: #0891b2; flex-shrink: 0; margin-top: 1px; }
.assign-terminal-note strong { color: #1e293b; font-weight: 600; }
.stage-pill.active { border-color: var(--wf-blue); background: var(--wf-blue-bg); color: var(--wf-blue); }

/* "Move to next stage" card dialog button */
.dlg-btn-move { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #f0fdf4; color: #166534; border: 1px solid #86efac; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all .13s; }
.dlg-btn-move:hover { background: #dcfce7; border-color: #4ade80; }

/* CARD PREVIEW ICON (always visible in the card footer, left of labels/avatar) */
.kb-card-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  cursor: pointer; font-size: 14px; line-height: 1; color: #6B7280;
  transition: color .12s;
}
.kb-card-preview:hover { color: var(--wf-blue); }


/* "+X more" pill badge (schedule slots + */

/* COMPOSER STAGE PILL */
.composer-stage-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px 0 8px;
  border-radius: 8px; border: 1.5px solid #e8eaed;
  background: #f8f9fa; font-size: 12.5px; font-weight: 600;
  color: #374151; cursor: pointer; transition: all .13s; white-space: nowrap;

}
.composer-stage-btn:hover,
.composer-stage-btn.show { border-color: var(--wf-blue-border); background: var(--wf-blue-bg); color: var(--wf-blue); }
.composer-stage-btn.dropdown-toggle::after { display: none !important; }
.composer-stage-btn .caret-icon { font-size: 14px; color: #9ca3af; transition: color .13s; margin-left: 1px; }
.composer-stage-btn:hover .caret-icon,
.composer-stage-btn.show .caret-icon { color: var(--wf-blue); }
.cmp-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
#composer-stage-picker .dropdown-menu { border-radius: 10px; border: 1px solid #e8eaed; padding: 5px; font-size: 12.5px; }
#composer-stage-picker .dropdown-item { border-radius: 7px; padding: 6px 10px; font-weight: 500; color: #374151; gap: 8px; }
#composer-stage-picker .dropdown-item:hover { background: var(--wf-blue-bg); color: var(--wf-blue); }
#composer-stage-picker .dropdown-item.active { background: var(--wf-blue-bg); color: var(--wf-blue); font-weight: 600; }
#composer-stage-picker .cmp-stage-item-locked { pointer-events: none; opacity: .45; }
/* Edit mode: the stage is fixed, so */
#composer-stage-picker.cmp-stage-readonly .composer-stage-btn { pointer-events: none; cursor: default; }
#composer-stage-picker.cmp-stage-readonly .caret-icon { display: none; }

/* Inline editable post title in the composer */
.composer-title-input {
  min-width: 0;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #101010;
  padding: 4px 8px;
}
.composer-title-input:hover { border-color: #e8eaed; background: #f8f9fa; }
.composer-title-input:focus {
  border-color: var(--wf-blue-border);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}
.composer-title-input::placeholder { font-weight: 400; font-size: .9rem; color: #9ca3af; }

/* Composer header breadcrumb: "One-off post > <editable */
.composer-breadcrumb { min-width: 0; }
.cmp-bc-parent { font-size: .95rem; font-weight: 600; color: #9ca3af; white-space: nowrap; flex-shrink: 0; }
.cmp-bc-sep { font-size: 18px; color: #cbd5e1; flex-shrink: 0; }
.cmp-title-pencil { font-size: 14px; color: #9ca3af; flex-shrink: 0; cursor: pointer; transition: color .13s; }
.cmp-title-pencil:hover { color: var(--wf-blue); }

/* Read-only stage badge (replaces the old stage-picker */
.cmp-stage-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #e8eaed; background: #f8f9fa;
  font-size: 12.5px; font-weight: 600; color: #374151;
  white-space: nowrap; flex-shrink: 0;
}


/* COMPOSER WORKFLOW FOOTER read-only "no schedule yet" hint shown to */
#composerSchedNone { font-size: 12.5px; color: #9ca3af; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
#composerSchedNone i { font-size: 14px; }
/* send-to-client switch: the label turns primary while on */
.cmp-foot-switch .form-check-input,
.cmp-foot-switch .form-check-label { cursor: pointer; }
.cmp-foot-switch .form-check-label { transition: color .15s; }
.cmp-foot-switch:has(.form-check-input:checked) .form-check-label { color: #0d6efd; }
/* the footer sizes to the composer panel, not the viewport: a narrow panel (small laptop)
   swaps the long send-to-client label and date for their short forms to stay on one line */
#composerFooterWrap { container-type: inline-size; }
.cmp-foot-short { display: none; }
@container (max-width: 820px) {
  .cmp-foot-long { display: none; }
  .cmp-foot-short { display: inline; }
}

/* EMPTY STATE for Kanban columns */
/* Layout (flex/centering) comes from Bootstrap utilities in */
/* Box layout, surface, icon tile and text (b5/b6, text-muted) all come from
   Bootstrap utilities in the markup. Only the two things Bootstrap has no
   token for stay here. */
.kb-empty-state { min-height: 180px; }
/* Cap the helper at two lines so every column's empty state is the same
   height, even when a sentence is short enough to fit on one line. */
.kb-empty-state p { max-width: 190px; min-height: 3.2em; }
/* Hide empty state when column has real */
.kb-col-body .kb-card ~ .kb-empty-state { display: none !important; }
.kb-col-body:has(.kb-card) .kb-empty-state { display: none !important; }

/* "Empty columns" preview: force every column to the rich empty state
   (icon + "Nothing in ..." + helper), hiding the cards and the plain
   "no filter match" box. Placed after the rules above so it wins. */
.wfb-preview-empty .kb-col-body .kb-card { display: none !important; }
.wfb-preview-empty .kb-col-body .kb-filter-empty { display: none !important; }
.wfb-preview-empty .kb-col-body .kb-empty-state { display: flex !important; }


/* COLUMN FOOTER "Add post" button */
.kb-col-footer {
  flex-shrink: 0; padding: 4px 10px 12px;
  border-top: 1px solid #f3f4f6;
}
/* Full-width ghost row - plain .btn.btn-sm gives */
.kb-col-add-row {
  gap: 6px;
  padding: 8px 10px; border-radius: 8px;
  color: #9ca3af; font-size: 12.5px; font-weight: 500;
}
.kb-col-add-row:hover { background: #f7f8fa; color: var(--col-accent, #374151); }
.kb-col-add-row i { font-size: 15px; }

/* PER-COLUMN FILTER EMPTY STATE */
.kb-filter-empty {
  display: none; 
}

/* GLOBAL NO-RESULTS STATE (search/filter). Layout, icon tile and text
   (b3/b4/b6, text-muted) come from Bootstrap utilities in the markup.
   Only the .show display toggle, the fill, and the paragraph width
   stay here. */
.wfb-no-results-state { display: none; flex: 1; min-height: 0; background: #f5f7fa; }
.wfb-no-results-state.show { display: flex; }
.wfb-no-results-state p { max-width: 280px; }

/* NO WORKFLOW CONFIGURED STATE */
.wfb-no-workflow-state {
  display: none; flex: 1; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; min-height: 0;
}
.wfb-no-workflow-state.show { display: flex; }
/* Centered card; wide enough to keep the */
.wfb-nwf-card { max-width: 560px; }
.wfb-nwf-stage {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.wfb-nwf-stage-box {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; border: 2px dashed;
}
.wfb-nwf-stage-box.s1 { background: #ede9fe; border-color: #c4b5fd; color: #7c3aed; }
.wfb-nwf-stage-box.s2 { background: var(--wf-blue-mid); border-color: var(--wf-blue-border); color: var(--wf-blue); }
.wfb-nwf-stage-box.s3 { background: #fff7ed; border-color: #fed7aa; color: #ea580c; }
.wfb-nwf-stage-box.s4 { background: #dcfce7; border-color: #86efac; color: #16a34a; }

/* Connector + add icons; margin-bottom lifts them */

   .wfb-nwf-arrow {
  font-size: 22px; color: #d1d5db;
  flex-shrink: 0; margin: 0 2px 22px;
}

.wfb-nwf-plus {
  font-size: 26px; color: #d1d5db;
  flex-shrink: 0; margin-bottom: 22px;
}

/* DIALOG TITLE INLINE EDITING */
.dlg-title-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dlg-title-wrap > div { min-width: 0; }
.dlg-title-row { display: flex; align-items: flex-start; gap: 8px; }
.dlg-title-edit-btn {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0; margin-top: 2px;
  border: none; border-radius: 6px; background: transparent;
  color: #b0b7c3; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all .13s;
}
.dlg-title-edit-btn:hover { color: #374151; background: #f3f4f6; }
.dlg-title--editing {
  outline: none; cursor: text;
  border-bottom: 1.5px dashed #9ca3af;
  padding-bottom: 2px;
}

/* IDEA CARDS - CALENDAR (month / week */
.cal-idea-card {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid; border-radius: 7px;
  padding: 6px 7px 5px; margin-bottom: 8px;
  cursor: pointer; transition: all .18s ease; position: relative;
}
.cal-idea-card:hover { transform: translateY(-1px); }

.cal-idea-card {
  background: #faf5ff;
  border-color: #e9d5ff;
}
.cal-idea-card:hover {
  border-color: #c4b5fd;
  background: #f0ebff;
  box-shadow: 0 2px 8px rgba(124,58,237,.14);
}
/* shared stage pill - Bootstrap .badge handles */

.cal-idea-pill { background: #ede9fe; color: #6d28d9; }
/* small expand hint - appears in card */
.cal-idea-expand-hint {
  font-size: 9px; color: #a78bfa; flex-shrink: 0;
  opacity: 0; transition: opacity .15s;
}
.cal-idea-card:hover .cal-idea-expand-hint { opacity: 1; }
.cal-idea-plat-dots { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cal-idea-plat-dots img { width: 11px; height: 11px; object-fit: contain; border-radius: 2px; }


/* LIST VIEW IDEA CARD */
.cal-idea-list-card {
  border-left: 3px solid #7c3aed !important;
  background: #fdfbff !important;
}
.cal-idea-list-card .post-ctn-header {
  background: linear-gradient(90deg, #f5f0ff 0%, #fff 100%);
}

/* WORK-IN-PROGRESS CARDS - CALENDAR (month / week). An in-progress post is a kanban
   card that happens to carry a date, so it IS the kanban card (.kb-card skeleton:
   status strip, title + thumb, footer date + assignee) placed in the calendar cell.
   The strip names the column it sits in (kb-col-dot + stage, the column's accent
   comes from the card's own kb-col--work / --review / --client class), the title
   column adds the platform dots the calendar idea card uses, the footer date is the
   planned time (or how long the client has had it) and the avatar is the holder.
   Hidden: work in progress shows in the Queue through its In review status (js/queue-calendar.js). */
.cal-wip-card { display: none; }
/* Provisional, like the board's dashed idea card: nothing is booked until it is
   scheduled. The frame is a LIGHT solid line in the stage colour (35% of the accent
   over white, a simple easy tell, never the full accent) and the strip keeps a white
   background with only the dot + word
   in that colour (a tinted fill and a dashed frame were both rejected), so a draft
   never reads as a scheduled post at a glance. */
/* Only the outer frame is tinted; the strip's bottom edge stays the app's grey
   hairline. style.css pins .border to #dee2e6 !important, so the frame needs an
   equally weighted, more specific rule. */
.cal-wip-card {
  --wip-line: var(--col-accent-light);
  --wip-line: color-mix(in srgb, var(--col-accent) 35%, #fff);
  box-shadow: none;
}
.cal-wip-card.border { border-color: var(--wip-line) !important; }
.cal-wip-card:hover { box-shadow: none; }
.cal-wip-card .kb-card-badge .kb-col-dot { opacity: 1; }
/* Preview: a small round button in the body's top corner, shown on card hover only
   (the foot stays time + avatar, the strip carries the labels). */
.cal-wip-preview {
  top: 6px; right: 6px; width: 24px; height: 24px; z-index: 1;
  opacity: 0; transition: opacity .15s;
}
.cal-wip-preview i { font-size: 12px; }
.cal-wip-card:hover .cal-wip-preview,
.cal-wip-preview:focus-visible { opacity: 1; }

/* CAL IDEA DETAIL DIALOG - full-detail popup */
/* The idea detail dialog is a standard */
/* Title reuses the card-dialog .dlg-title sizing; these */
.cidlg-title {
  outline: none; padding: 0; word-break: break-word;
}
.cidlg-title--editing {
  cursor: text;
  border-bottom: 1.5px dashed #9ca3af;
  padding-bottom: 2px;
}
.cidlg-title--editing:focus { color: #0a58ca; }
.cidlg-title:empty::before { content: 'Untitled idea'; color: #9ca3af; }

/* The idea dialog reuses the card-dialog scaffold */

/* platform chips in dialog */
.cidlg-plat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1.5px solid #e5e7eb; background: #fff;
  cursor: pointer; transition: all .13s;
}
.cidlg-plat-chip img { width: 18px; height: 18px; object-fit: contain; }
.cidlg-plat-chip:hover { border-color: var(--wf-blue-border); color: var(--wf-blue); background: var(--wf-blue-bg); }
.cidlg-plat-chip.on { border-color: var(--wf-blue); background: var(--wf-blue-bg); color: var(--wf-blue); box-shadow: 0 0 0 2px rgba(13, 110, 253,.12); }

/* reference image preview row */

.cidlg-ref-img {
  width: 62px; height: 62px; border-radius: 8px; object-fit: cover;
  border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.cidlg-ref-add {
  width: 62px; height: 62px; border-radius: 8px;
  border: 1.5px dashed var(--wf-blue-border); background: var(--wf-blue-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; color: var(--wf-blue); gap: 3px; transition: all .14s;
}
.cidlg-ref-add:hover { border-color: var(--wf-blue); background: var(--wf-blue-mid); color: var(--wf-blue); }
.cidlg-ref-add i { font-size: 18px; }
.cidlg-ref-add span { font-size: 9px; font-weight: 700; }

/* right-panel meta blocks */
.cidlg-assignee-row { cursor: pointer; }

/* Responsive */
@media (max-width: 991px) {
  /* keep the toolbar a single scrollable row */
  .wfb-toolbar { overflow-x: auto; }
  .wfb-toolbar::-webkit-scrollbar { height: 0; }
}
@media (max-width: 680px) {
  /* card dialog: stack main content above the */
  .dlg-body-2col { flex-direction: column; overflow-y: auto; }
  .dlg-body-content { flex: 0 0 auto; overflow-y: visible; border-right: none; }
  .dlg-body-meta { width: 100%; flex-shrink: 0; border-top: 1px solid #f0f2f5; overflow-y: visible; }
}

/* Phone-only fine-tuning ( ��575.98px) */
@media (max-width: 575.98px) {
  /* Bootstrap modals are already near full-width on */
  /* dialog footers with many actions: let them */
  .idea-foot, .assign-dlg-footer { flex-wrap: wrap; }
  /* stage-picker dropdown select shouldn't exceed the dialog */
  .stage-select { max-width: 100%; }
  /* no-workflow placeholder pipeline: let the stage/arrow chain */
  .wfb-nwf-pipeline { flex-wrap: wrap; justify-content: center; }
}

/* wf-dashboard.css */

/* dash- refactor: classes extracted from former inline */
/* Empty-state illustration width (queue/paused/empty SVGs) */
.dash-illus-300 { max-width: 300px; }
/* Idea-card title (board WIP idea cards) */
.dash-idea-card-title { color: #111827; font-size: 15px; line-height: 1.3; }
/* Idea-card meta row (avatar + name) */
.dash-idea-card-meta { color: #6b7280; font-size: 11.5px; }
/* Small 18px round assignee avatar inside idea */
.dash-av-18 {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
/* Avatar background color helpers (reused across kb-avatar/idea-assign-av/dash-av-18/comment */
.dash-av-purple  { background: #7c3aed; }
.dash-av-blue    { background: var(--wf-blue); }
.dash-av-teal    { background: #0d9488; }
.dash-av-orange  { background: #ea580c; }
.dash-av-orange2 { background: #f97316; }
.dash-av-orange3 { background: #fd7e14; }
.dash-av-green   { background: #16a34a; }
.dash-av-gray    { background: #6b7280; }
/* Avatar placeholder states */
.dash-av-unassigned { background: #d1d5db; color: #9ca3af; }
.dash-av-awaiting   { background: #c4b5fd; color: #6d28d9; }
.dash-av-empty      { background: #e5e7eb; color: #9ca3af; }
/* kb-avatar override for 18px filter-dropdown avatars (7px */
.dash-kb-av-18 { width: 18px; height: 18px; font-size: 7px; display: inline-flex; flex-shrink: 0; }
/* Ideas pill link color on board cards */
.dash-ideas-link { color: #7c3aed; }
/* Workspace pill / dropdown icon tints */
.dash-ico-purple { color: #7c3aed; }
.dash-ico-blue   { color: var(--wf-blue); }
.dash-ico-teal   { color: #0d9488; }
.dash-ico-orange { color: #ea580c; }
.dash-ico-gray   { color: #9ca3af; }
.dash-ico-amber  { color: #d97706; }
.dash-ico-red    { color: #dc2626; }
.dash-ico-red2   { color: #ef4444; }
.dash-ico-green  { color: #16a34a; }
/* Generic small icon size used inside avatars */
/* Workspace dropdown menu min-width */
.dash-dd-w-210 { min-width: 210px; }
/* Status filter color dots */
.dash-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.dash-dot-amber  { background: #d97706; }
.dash-dot-red    { background: #dc2626; }
.dash-dot-gray   { background: #9ca3af; }
.dash-dot-red2   { background: #ef4444; }
.dash-dot-green  { background: #16a34a; }
.dash-dot-purple { background: #7c3aed; }
/* Composer stage dot color helpers */
.dash-stage-purple { background: #7c3aed; }
.dash-stage-blue   { background: var(--wf-blue); }
.dash-stage-orange { background: #ea580c; }
.dash-stage-cyan   { background: #0891b2; }
.dash-stage-green  { background: #16a34a; }
/* Locked stage-picker lock icon (11px muted) */
.dash-lock-ico { font-size: 11px; color: #9ca3af; }
/* Composer stage-picker dropdown width */
.dash-dd-w-215 { min-width: 215px; }
/* "Optional" muted tag in stage picker */
.dash-stage-optional { font-size: 11px; font-weight: 400; }
/* Composer await note / approve-on-behalf button */
.dash-ico-14-cyan { font-size: 14px; color: #0891b2; }
/* Composer post body split pane */
.dash-post-flex { flex: 1 1 0%; min-height: 0; overflow: hidden; }
/* Facebook text-background post (demo background image) */
.dash-fb-bg { background-image: url(img/fb-background/2193627793985415_background.png); }
/* Donut chart percent demo value (CSS var) */
.dash-pct-10 { --percent: 10; }
/* Scrollable modal body (shareable-calendar settings modals) */
.dash-modal-scroll { overflow-y: auto; max-height: 72vh; }
/* PIN input field (settings modals) */
.dash-pin-input {
    max-width: 130px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}
/* Form-switch nudge inside settings rows */
.dash-switch-nudge { padding-left: 2.5em; padding-top: 2px; }
/* Confirm dialog styles now live in style.css so every page can use them. */
/* Library color icons in folder list */
.dash-lib-pinkred { color: #d51f4d; }
.dash-lib-red    { color: #c0392b; }
.dash-lib-blue   { color: #3498db; }
.dash-lib-pink   { color: #d2527f; }
.dash-lib-teal   { color: #1abc9c; }
/* Card-dialog media row top spacing */
.dash-mt-6px { margin-top: 6px; }
/* 32px round avatar (dialog comment composer) */
.dash-av-32 { width: 32px; height: 32px; font-size: 10px; flex-shrink: 0; }
/* Label-input chip container (wraps chips, transparent in */
.dash-label-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 20px; }
.dash-label-chips-host { display: contents; }
/* Placeholder shows only while no labels are */
.dash-label-empty { display: none; }
.dash-label-chips-host:empty + .dash-label-empty { display: inline-block; }
/* Idea-dialog assignee popover anchor */
/* Idea-dialog meta column */
.dash-flex-col-min0 { flex: 1; min-width: 0; }
/* Toggle switch alignment nudge in idea dialog */
/* GETTING-STARTED WIDGET (docked at the bottom of */
/* Let the account list flex-fill and shrink */
.wfd-ob-acct-fill {
  flex: 1 1 auto;
  min-height: 0;
}

/* Modern getting-started card: warm cream surface, soft amber elevation */
.wfd-ob-tour {
  background: #FFFAE8;
  border: 1px solid #fed7aa !important;
  /* box-shadow: 0 6px 22px rgba(180, 83, 9, .12); */
}

/* In the calendar header the list is a dropdown: a fixed width, the rocket in the amber
   the widget always used, and the head no longer toggles anything */
.cal-setup-menu { width: 300px; }
.cal-setup-head { cursor: default; }
/* The button wears the widget's cream and amber so it stands apart from the white buttons,
   and a soft amber pulse on its corner keeps asking until the steps are done */
#calSetupBtn.cal-setup-btn { background: #FFFAE8; border-color: #fed7aa; color: #7c2d12; }
#calSetupBtn.cal-setup-btn:hover, #calSetupBtn.cal-setup-btn.show { background: #FDF3CE; border-color: #fdba74; color: #7c2d12; }
#calSetupBtn .wfd-ob-rocket { color: #B45309; }
/* Progress ring around the rocket: the amber arc grows with the fraction, the cream disc
   inside keeps the icon readable (--cal-setup-p is set by the hub script) */
.cal-setup-ring { width: 26px; height: 26px; background: conic-gradient(#B45309 var(--cal-setup-p, 0%), rgba(180, 83, 9, .18) 0); }
.cal-setup-ring i { width: 20px; height: 20px; border-radius: 50%; background: #FFFAE8; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
#calSetupBtn.cal-setup-btn:hover .cal-setup-ring i, #calSetupBtn.cal-setup-btn.show .cal-setup-ring i { background: #FDF3CE; }
#calSetupBtn .wfd-ob-frac { color: #B45309; }
.wfd-ob-step:hover { background: rgba(180, 83, 9, .08); }

/* Header doubles as the collapse toggle: soft cream gradient band */
.wfd-ob-head {
  padding: 12px 12px 11px;
  cursor: pointer;
  /* background: linear-gradient(180deg, #FDF3CE 0%, #FFFAE8 100%); */
  border-bottom: 1px solid rgba(180, 83, 9, .14);
}
.wfd-ob-head-main { min-width: 0; }
.wfd-ob-head .wfd-ob-frac { color: #B45309 !important; }

/* Brand icon: plain amber rocket, no tile */
.wfd-ob-badge {
  width: 30px;
  height: 30px;
  background: transparent !important;
}
.wfd-ob-badge i { color: #B45309 !important; }

.wfd-ob-chev i { transition: transform .25s ease; }
.wfd-ob-head.collapsed .wfd-ob-chev i { transform: rotate(180deg); }

/* Segmented progress bar: light-amber track, solid-amber fill */
.wfd-ob-seg { height: 5px; background: rgba(180, 83, 9, .18); }
.wfd-ob-seg.is-on { background: #B45309; }

/* Steps: icon markers sit in soft round tiles; done turns green + strikethrough */
.wfd-ob-marker .wfd-ob-ico { color: #B45309 !important; }
.wfd-ob-marker .wfd-ob-chk { display: none; }
.wfd-ob-label { white-space: nowrap; }
.wfd-ob-step.is-done .wfd-ob-marker .wfd-ob-ico { display: none; }
.wfd-ob-step.is-done .wfd-ob-marker .wfd-ob-chk { display: inline-flex; color: #10B981; }
.wfd-ob-step.is-done .wfd-ob-label { text-decoration: line-through; color: #9CA3AF !important; }

/* Below 992px this rail is a Bootstrap collapse drawer, where .show means OPEN,
   the opposite of the collapsed desktop rail. Keep the icon-only rules on desktop
   only, or the open drawer loses its headings, copy and button labels. */
@media (min-width: 992px) {
  /* When the Social profiles column is collapsed */
  .select-accounts.accounts-filter.show .wfd-ob-tour {
    width: 44px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: none;
  }
  .select-accounts.accounts-filter.show .wfd-ob-head {
    padding: 0;
    height: 44px;
    justify-content: center;
  }
  .select-accounts.accounts-filter.show .wfd-ob-head-main,
  .select-accounts.accounts-filter.show #wfdObBody { display: none !important; }

  /* No-accounts empty state: keep only the icon when collapsed */
  .select-accounts.accounts-filter.show .add-new-account {
    padding-left: 0;
    padding-right: 0;
  }
  .select-accounts.accounts-filter.show .add-new-account h4,
  .select-accounts.accounts-filter.show .add-new-account p,
  .select-accounts.accounts-filter.show .add-new-account .btn span { display: none; }

  /* Not-allocated warning badge: only earns its place on the collapsed rail,
     where the heading and copy are hidden. */
  .select-accounts.accounts-filter.show .add-new-account .icon-warning-circle { display: block; }
}

.add-new-account .icon-warning-circle { display: none; }



/* calendar (cal-idea-card scoped to body.wf-cal) */
         
        /* keep the status mark clear of the action column that overlays the row's right edge */
        #List-view .post-ctn-header,
        #History .post-ctn-header { padding-right: 60px !important; }

        /* Cleaner card footer (white, hairline divider) */

        .post-edit-delete .btn.btn-review {
          height: 32px;
          width: 32px;
          min-height: inherit;
        }
         
        /* status badge sits flush-right when there are */
        .days-container .queue-post-content .post-edit-delete .wf-status-badge {
            margin-left: auto !important;
        }

        /* Idea card in calendar cells */
        /* Idea cards reuse the shared .cal-idea-card styling (same as the dashboard).
           Only the review-state borders + badge recolour are shared-calendar specific. */
        body.wf-cal .cal-idea-card.idea-approved { border-color: #6EE7B7; }
        body.wf-cal .cal-idea-card.idea-approved .cal-idea-pill { background: #D1FAE5; color: #065F46; }

        /* Name gate */

        #name-gate {
            display: flex;
        }
        
        .name-gate-box {
            max-width: 450px;
            width: 100%;
            box-shadow: 0 10px 40px rgba(16,24,40,.08);
        }
        .name-gate-box .rp-logo { 
          max-width: 200px;
          max-height: 100px; 
        }
        
        /* Stop the browser autofill blue/yellow tint on the gate inputs */
        .name-gate-box .form-control:-webkit-autofill,
        .name-gate-box .form-control:-webkit-autofill:hover,
        .name-gate-box .form-control:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px #fff inset;
            box-shadow: 0 0 0 1000px #fff inset;
            -webkit-text-fill-color: #101010;
        }
        .gate-pin-box.pin-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); animation: pin-shake .3s; }
        @keyframes pin-shake {
            0%,100% { transform: translateX(0); }
            20%,60% { transform: translateX(-4px); }
            40%,80% { transform: translateX(4px); }
        }
        .gate-pin-error {display: none; }
        
        .post-ctn-header .post-date {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Ideas grid card - compact square */
        .idea-grid-card {
            border: 1px solid #DDD6FE;
            border-radius: 7px;
            overflow: hidden;
            transition: box-shadow 0.15s, border-color 0.15s;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #fff;
        }
        .idea-grid-card:hover {
            box-shadow: 0 2px 8px rgba(124,58,237,0.12);
            border-color: #A78BFA;
        }
        .idea-grid-card.idea-approved { border-color: #6EE7B7; background: #F0FDF4; }
        .idea-grid-card.idea-changes { border-color: #FECDCA; background: #FFFBFA; }
        body.wf-cal .cal-idea-card.idea-changes { border-color: #FCA5A5; }
        .idea-grid-card .card-body { flex: 1; padding: 10px 12px 8px; }
        .idea-grid-card .card-footer {
            background: #fafafa;
            border-top: 1px solid #f0f0f0;
            padding: 6px 10px;
            display: flex;
            gap: 6px;
        }
        .idea-desc-clamp {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            overflow: hidden;
            font-size: 0.7rem;
            color: #6b7280;
            line-height: 1.4;
        }

        /* Toast */
        #wf-toast-container {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9998;
        }

        @media (prefers-reduced-motion: reduce) {
            .calendar-cell .cal-queue-post-content { transition: none; }
            .calendar-cell .cal-queue-post-content:hover { transform: none; }
        }

        /* MULTI-SELECT - pick several pending posts, then */
        .sc-select {
            width: 17px; height: 17px; flex: 0 0 17px;
            border: 1.5px solid #CBD2DC; border-radius: 5px;
            display: inline-flex; align-items: center; justify-content: center;
            background: #fff; cursor: pointer; margin-right: 6px;
            transition: background .14s ease, border-color .14s ease;
        }
        .sc-select .ri-check-line { font-size: 12px; line-height: 1; color: #fff; opacity: 0; transition: opacity .12s ease; }
        .sc-select:hover { border-color: #2563EB; }
        .sc-selected .sc-select { background: #2563EB; border-color: #2563EB; }
        .sc-selected .sc-select .ri-check-line { opacity: 1; }
        /* highlight the selected card */
        .calendar-cell .cal-queue-post-content.sc-selected,
        .queue_list .queue-post-content.sc-selected {
            border-color: #2563EB !important;
            box-shadow: 0 0 0 3px rgba(13, 110, 253,.16) !important;
        }

        /* Floating bulk action bar */
        #sc-bulk-bar {
            position: fixed; left: 50%; bottom: 24px; z-index: 9996;
            display: flex; align-items: center; gap: 14px;
            background: #101828; color: #fff;
            border-radius: 14px; padding: 9px 12px 9px 18px;
            box-shadow: 0 12px 32px rgba(16,24,40,.28);
            opacity: 0; pointer-events: none;
            transform: translateX(-50%) translateY(150%);
            transition: transform .26s cubic-bezier(.34,1.4,.64,1), opacity .2s ease;
        }
        #sc-bulk-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        #sc-bulk-bar .sc-bulk-count { font-size: 13px; font-weight: 600; white-space: nowrap; }
        #sc-bulk-bar .sc-bulk-clear {
            background: none; border: none; color: #98A2B3;
            font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0;
        }
        #sc-bulk-bar .sc-bulk-clear:hover { color: #fff; text-decoration: underline; }
        #sc-bulk-bar .sc-bulk-link {
            background: none; border: none; color: #93C5FD;
            font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0;
        }
        #sc-bulk-bar .sc-bulk-link:hover { color: #fff; text-decoration: underline; }
        #sc-bulk-bar .sc-bulk-divider { width: 1px; height: 22px; background: #344054; }
        #sc-bulk-bar .sc-bulk-actions { display: flex; gap: 8px; }
        .sc-bulk-reject, .sc-bulk-approve {
            border: none; border-radius: 9px; padding: 8px 14px;
            font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
            display: inline-flex; align-items: center; gap: 6px;
            transition: background .15s ease, color .15s ease, box-shadow .15s ease;
        }
        .sc-bulk-reject  { background: rgba(255,255,255,.10); color: #FECDCA; }
        .sc-bulk-reject:hover  { background: #FEE4E2; color: #B42318; }
        .sc-bulk-approve { background: #059669; color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,.4); }
        .sc-bulk-approve:hover { background: #047857; }
        @media (max-width: 575px) {
            #sc-bulk-bar { left: 12px; right: 12px; bottom: 12px; transform: translateY(150%); justify-content: space-between; }
            #sc-bulk-bar.show { transform: translateY(0); }
            #sc-bulk-bar .sc-bulk-actions .sc-bulk-reject span:not(.ri-chat-1-line) { display: none; }
        }

        /* Client-suggested idea badge & card */
        .idea-client-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: #FEF3C7;
            color: #92400E;
            border-radius: 20px;
            font-size: 0.62rem;
            font-weight: 600;
            padding: 1px 6px;
            margin-bottom: 3px;
        }
        .idea-grid-card.idea-client-suggested { border-color: #FDE68A; background: #FFFBEB; }
        .idea-grid-card.idea-client-suggested:hover { border-color: #F59E0B; }

        /* Reference image thumbnails in the Suggest-Idea modal (view mode) */
        .sc-idea-ref-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
        .sc-idea-ref-thumb {
            width: 74px; height: 74px; object-fit: cover;
            border-radius: 9px; border: 1px solid #e5e7eb; background: #fff;
            cursor: pointer; transition: transform .15s, box-shadow .15s;
        }
        .sc-idea-ref-thumb:hover,
        .sc-idea-ref-thumb:focus-visible {
            transform: scale(1.04); box-shadow: 0 4px 12px rgba(13, 110, 253, .2);
            outline: none;
        }

        /* PREVIEW POPUP (modal) - replaces the old */
        .sc-preview-modal .modal-dialog { max-width: 600px; }
        /* keep the content box overflow-visible so the */
        .sc-preview-modal .modal-content { max-height: 92vh; overflow: visible; }
        .sc-preview-modal .modal-body { overflow-y: auto; min-height: 0; }
        /* floating close button - sits just outside */
        .sc-preview-modal .sc-modal-x {
            position: absolute; top: -13px; right: -13px; z-index: 5;
            width: 30px; height: 30px; margin: 0; padding: 0;
            border-radius: 50%; background-color: #fff; opacity: 1;
            background-position: center; background-size: 11px;
            box-shadow: 0 2px 10px rgba(16,24,40,.22);
            transition: background-color .15s ease, transform .15s ease;
        }
        .sc-preview-modal .sc-modal-x:hover { background-color: #F2F4F7; transform: scale(1.06); opacity: 1; }
        @media (max-width: 640px) {
            .sc-preview-modal .sc-modal-x { top: 6px; right: 6px; box-shadow: none; }
        }
        .sc-preview-modal .modal-body { background: #f3f4f6; }
        .sc-preview-modal .post-preview { padding: 1.25rem !important; }
        @media (max-width: 640px) {
            .sc-preview-modal .modal-dialog { max-width: none; margin: .5rem; }
            /* on short phone screens the close button */
            .sc-preview-modal .modal-content { overflow-y: auto; }
        }

        /* Two-pane "conversation" layout for rejected / revised */
        .sc-pv-split { display: flex; align-items: stretch; min-height: 0; }
        .sc-pv-main { flex: 1 1 auto; min-width: 0; }
        .sc-pv-convo {
            flex: 0 0 304px; width: 304px;
            border-left: 1px solid #E4E7EC; background: #fff;
            display: flex; flex-direction: column; min-height: 0;
        }
        .sc-pv-convo[hidden] { display: none; }   /* class display:flex would otherwise beat [hidden] */
        .sc-pv-convo-hd { padding: 13px 15px; border-bottom: 1px solid #EEF0F3; flex-shrink: 0; }
        .sc-pv-convo-hd-title { font-size: 0.8rem; font-weight: 700; color: #344054; display: flex; align-items: center; gap: 6px; }
        .sc-pv-convo-hd-sub { display: block; font-size: 0.68rem; color: #98A2B3; margin-top: 2px; }
        .sc-pv-convo-scroll { flex: 1 1 auto; overflow-y: auto; padding: 15px; min-height: 0; }
        .sc-pv-convo-foot { padding: 12px 15px; border-top: 1px solid #EEF0F3; background: #FCFCFD; flex-shrink: 0; }
        .sc-pv-convo-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
        .sc-pv-convo-foot-lbl { font-size: 0.72rem; font-weight: 700; color: #B42318; display: flex; align-items: center; gap: 5px; margin-bottom: 0; }
        /* widen the popup + give the split */
        .sc-pv-convo-mode .modal-dialog { max-width: 900px; }
        .sc-pv-convo-mode .modal-body { overflow: hidden; }
        .sc-pv-convo-mode .sc-pv-split { height: min(68vh, 560px); }
        .sc-pv-convo-mode .sc-pv-main { overflow-y: auto; }
        /* stack the panes on small screens (content */
        @media (max-width: 767px) {
            .sc-pv-convo-mode .modal-body { overflow-y: auto; }
            .sc-pv-split, .sc-pv-convo-mode .sc-pv-split { flex-direction: column; height: auto; }
            .sc-pv-convo { flex-basis: auto; width: 100%; border-left: 0; border-top: 1px solid #E4E7EC; }
            .sc-pv-convo-scroll { overflow-y: visible; max-height: 280px; }
        }

        /* Revision-history timeline inside the preview popup */
        .sc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
        .sc-timeline li {
            position: relative; padding: 0 0 12px 20px;
            border-left: 2px solid #E4E7EC;
        }
        .sc-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
        .sc-timeline li::before {
            content: ""; position: absolute; left: -6px; top: 2px;
            width: 10px; height: 10px; border-radius: 50%;
            background: #98A2B3; box-shadow: 0 0 0 2px #F8F9FC;
        }
        .sc-timeline li.tl-rejected::before { background: #DC2626; }
        .sc-timeline li.tl-revised::before  { background: #2563EB; }
        .sc-timeline li.tl-current::before  { background: #059669; }
        .sc-tl-head { font-size: 0.72rem; font-weight: 700; color: #344054; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
        .sc-tl-date {
            font-size: 0.64rem; font-weight: 500; color: #98A2B3;
            display: inline-flex; align-items: center; gap: 3px; margin-top: 4px;
        }
        .sc-tl-date i { font-size: 0.72rem; }
        .sc-tl-rejected-by { color: #B42318; }
        .sc-tl-revised-by  { color: #1D4ED8; }
        /* conversation messages render as soft chat bubbles, */
        .sc-tl-text {
            font-size: 0.74rem; line-height: 1.5; margin: 5px 0 0;
            white-space: pre-wrap; word-break: break-word;
            padding: 8px 11px; border: 0; border-radius: 4px 11px 11px 11px;
            color: #475467; background: #F2F4F7;
        }
        .tl-rejected .sc-tl-text, .sc-tl-text.is-quote { background: #FEF3F2; color: #912018; }
        .tl-revised .sc-tl-text { background: #EFF4FF; color: #1E3A8A; }

        /* "Revised - re-review" pill on resubmitted calendar */
        .cal-revised-pill {
            display: inline-flex; align-items: center; gap: 3px;
            background: #EFF4FF; color: #1D4ED8; border: 1px solid #C7D7FE;
            border-radius: 20px; font-size: 0.6rem; font-weight: 600;
            padding: 1px 7px; line-height: 1.4;
        }

        /* Responsive The 7-column month grid (.queue-calendar) is */
        @media (max-width: 1199px) {
            .shared-calendar .queue-history-ctn { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }
        @media (max-width: 767px) {
            .shared-calendar .queue-calendar { min-width: 900px; }
            /* tighten header padding so toolbar buttons/tabs don't */
            .shared-calendar .inner-header { padding: .75rem !important; }
        }
        @media (max-width: 575px) {
            .shared-calendar .queue-calendar { min-width: 760px; }
            .shared-calendar .queue-calendar .day-header { padding: 6px 4px !important; font-size: 11px; }
            .shared-calendar .queue-history-ctn { padding: .5rem !important; }
            /* Name/PIN gate: shrink PIN boxes so 4 */
            .gate-pin-boxes { gap: 8px; }
            .gate-pin-box { height: 50px; font-size: 20px; }
        }
/* wf-calendar.css Externalized semantic classes for shared-calendar.html. These */

/* main app shell hidden until the name/PIN */
.sc-app-hidden { display: none !important; }

/* status-badge colour variants (paired bg + text). */
.sc-badge-approved { background: #D1FAE5; color: #065F46; }
.sc-badge-changes  { background: #FEE2E2; color: #991B1B; }
.sc-badge-pending  { background: #FEF3C7; color: #92400E; }
.sc-badge-idea     { background: #EDE9FE; color: #6D28D9; }

/* list-view idea row - purple idea accent on the shared list card */
.sc-list-idea { border-color: #DDD6FE !important; background: #FBFAFF !important; }
.sc-list-idea:hover { border-color: #A78BFA !important; }
.sc-list-idea .post-ctn-header { background: #F5F3FF; }
/* reviewed states - keep the card calm, let the status badge do the talking */
.sc-list-idea.idea-approved { border-color: #A7F3D0 !important; background: #fff !important; }
.sc-list-idea.idea-approved .post-ctn-header,
.sc-list-idea.idea-changes .post-ctn-header { background: transparent; }
.sc-list-idea.idea-changes { border-color: #FECACA !important; background: #fff !important; }

/* muted "library/recurring" link icon in card footers */
.sc-lib-ico { color: #7d7d7d; }
.sc-lib-recurring-ico { color: #5f2458; }

/* platform icon thumbnails inside cards (11px / */
.sc-plat-ico-11 { height: 11px; }
.sc-plat-ico-12 { height: 12px; }

/* Ideas view header */
.sc-ideas-badge { background: #EDE9FE; color: #6D28D9; font-size: 0.7rem; }
.sc-ideas-empty-ico { font-size: 3rem; color: #DDD6FE; line-height: 1; }
.sc-ideas-purple-ico { color: #7C3AED; }

/* idea grid card meta text */
.sc-idea-card-note { color: #6b7280; }
.sc-idea-card-sent { color: #92400E; }
.sc-changes-note { background: #FEF3F2; }
.sc-changes-note-ico { color: #DC2626; font-size: 1.05rem; line-height: 1.3; }
.sc-changes-note-title { color: #B42318; }
.sc-changes-note-text { color: #7A271A; white-space: pre-wrap; word-break: break-word; }
.sc-tl-now { color: #065F46; }

/* inline reject composer: textarea + docked send toolbar in one bordered box */
.sc-composer { background: #fff; transition: border-color .15s, box-shadow .15s; }
.sc-composer:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 1px rgba(13,110,253,.15); }
.sc-composer-input { resize: none; }
/* while an inline panel (request-changes / approve) is open, collapse the whole
   default footer so its buttons and empty bar don't show under the composer */
#sc-preview-reject-panel:not([hidden]) ~ .modal-footer,
#sc-preview-approve-panel:not([hidden]) ~ .modal-footer { display: none !important; }

/* idea-changes / approved footer status text (JS-injected) */
.sc-idea-footer-changes { color: #B42318; }
.sc-idea-footer-approved { color: #059669; }

/* preview-popup status line colours (JS swaps these */
.sc-status-approved { color: #059669; }
.sc-status-changes  { color: #DC2626; }



/* invite */
/* wf-invite.css all styles for this page (extracted */
        /* INVITE ROWS: a column of email + role + delete rows */
        #inviteRowList { display: flex; flex-direction: column; gap: 8px; }
        .im-invite-email-input {
            width: 100%;
            height: 40px;
            padding: 0 12px;
            border: 1.5px solid #dee2e6;
            border-radius: 8px;
            font-size: 13.5px;
            color: #212529;
            background: #fff;
            transition: border-color .15s, box-shadow .15s;
        }
        .im-invite-email-input:focus {
            outline: none;
            border-color: #86b7fe;
            box-shadow: 0 0 0 3px rgba(13,110,253,.12);
        }
        .im-invite-email-input.is-invalid { border-color: #dc3545; }
        /* ADD ROW BUTTON */
        .im-add-row-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 9px 14px;
            margin-top: 8px;
            border: 1.5px dashed #b6d4fe;
            border-radius: 8px;
            background: #f8fbff;
            color: #0d6efd;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background .12s, border-color .12s;
        }
        .im-add-row-btn:hover { background: #e7f1ff; border-color: #86b7fe; }
        .im-add-row-btn i { font-size: 16px; }

        /* AVATAR (initials circle - no Bootstrap equivalent) */
        .im-avatar {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; font-weight: 700; color: #fff;
            flex-shrink: 0;
            letter-spacing: .3px;
        }

        /* ROLE CHIP (still used by remove-member modal) */
        .im-role-chip {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* MEMBER "MORE" (3-dot) BUTTON (shared with workspaces-create) */
        .im-more-btn {
            width: 30px; height: 30px;
            border: none;
            background: transparent;
            color: #1f2937;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            padding: 0;
            cursor: pointer;
            transition: background .12s, color .12s;
        }
        .im-more-btn:hover { background: #f1f3f5; color: #000; }
        .im-more-btn:focus { outline: none; box-shadow: none; }
        .im-more-btn:disabled { opacity: .35; cursor: default; }
        .im-more-btn:disabled:hover { background: transparent; color: #1f2937; }

        /* PENDING ROW (shared with workspaces-create invited list) */
        .im-pending-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border-bottom: 1px solid #f1f3f5;
        }
        .im-pending-row:last-child { border-bottom: none; }
        .im-pending-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #f59e0b;
            flex-shrink: 0;
        }

        /* AM PERK CHIP */
        .am-perk-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            padding: 5px 11px;
            white-space: nowrap;
        }
        .am-perk-chip i { font-size: 13px; }

        /* Responsive */
        @media (max-width: 575.98px) {
            /* column headers no longer map to the */
            .im-invite-col-head { display: none; }
            /* let any fixed-width modal fill the small */
            .im-modal-380, .im-modal-420, .im-modal-440, .im-modal-580 { max-width: none !important; margin: .5rem; }
            /* pending rows: action buttons drop to their */
            .im-pending-row > .d-flex.gap-2 { width: 100%; }

            /* removeAm TRANSFER DIAGRAM: tighten so it never */
            .im-transfer-box > .px-3.py-3 { padding-left: .5rem !important; padding-right: .5rem !important; gap: .25rem !important; }
            .im-transfer-foot, .im-transfer-head { padding-left: 10px; padding-right: 10px; }

            /* perk chip rows: let chips shrink a */
            .am-perk-chip { font-size: 11.5px; padding: 5px 9px; }
        }
/* wf-invite.css Semantic classes for the Invite Member */

/* ROLE CHIP TINTS (background / text / */
.im-chip-purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.im-chip-orange { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.im-chip-blue   { background: #e7f1ff; color: #084298; border: 1px solid #b6d4fe; }
.im-chip-green  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* AVATAR BACKGROUNDS / SIZES */
.im-av-blue       { background: linear-gradient(135deg, #0d6efd, #6610f2); }
.im-av-orange     { background: #ea580c; }
.im-av-orange-grad{ background: linear-gradient(135deg, #ea580c, #dc2626); }
.im-av-teal       { background: #0d9488; }
.im-av-42 { width: 42px; height: 42px; font-size: 14px; }
.im-av-34 { width: 34px; height: 34px; font-size: 12px; }

/* MEMBER 3-DOT DROPDOWN MENU */

/* PENDING BADGE */
.im-pending-badge { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }

/* ICON COLOR HELPERS */
.im-ic-amber      { color: #f59e0b; }
.im-ic-amber-dark { color: #d97706; }
.im-ic-red        { color: #dc2626; }
.im-ic-red2       { color: #ef4444; }
.im-ic-orange     { color: #ea580c; }
.im-ic-violet     { color: #7c3aed; }
.im-ic-teal       { color: #0d9488; }
.im-ic-green      { color: #16a34a; }

/* TEXT COLOR / LINE-HEIGHT / SPACING HELPERS */
.im-tx-dark   { color: #111827; }
.im-tx-gray   { color: #9ca3af; }
.im-tx-amber  { color: #92400e; }
.im-tx-amber2 { color: #f59e0b; }
.im-tx-slate  { color: #374151; }
.im-tx-slate2 { color: #6b7280; }
.im-tx-red    { color: #991b1b; }
.im-tx-green  { color: #166534; }
.im-lh-14 { line-height: 1.4; }
.im-lh-15 { line-height: 1.5; }
.im-spin { display: inline-block; animation: wfsSpin .6s linear; }
.im-mt-1 { margin-top: 1px; }
.im-mt-2 { margin-top: 2px; }
.im-ls-tight { letter-spacing: -.1px; }
.im-no-resize { resize: none; }
.im-toast-z { z-index: 9999; }

/* MODAL DIALOG WIDTHS */
.im-modal-380 { max-width: 380px; }
.im-modal-420 { max-width: 420px; }
.im-modal-440 { max-width: 440px; }
.im-modal-580 { max-width: 580px; }

/* DECORATED MODAL CARD */
.im-modal-card { border-radius: 14px; border: none; overflow: hidden; }
.im-modal-card-sm-shadow { box-shadow: 0 24px 64px rgba(0,0,0,.14); }
.im-modal-card-lg-shadow { box-shadow: 0 24px 64px rgba(0,0,0,.16); }

/* ACCENT STRIPES */
.im-stripe { height: 3px; }
.im-stripe-amber     { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.im-stripe-red       { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }
.im-stripe-amber-red { background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%); }
.im-stripe-blue      { background: linear-gradient(90deg, #0d6efd 0%, #6610f2 100%); }

/* HEADER ICON BOXES */
.im-icon-box-sm { width: 36px; height: 36px; border-radius: 9px; }
.im-icon-box-md { width: 40px; height: 40px; border-radius: 10px; }
.im-icon-box-amber      { background: #fff7ed; border: 1px solid #fed7aa; }
.im-icon-box-red        { background: #fef2f2; border: 1px solid #fecaca; }
.im-icon-box-blue       { background: #e7f1ff; border: 1px solid #b6d4fe; }
.im-icon-box-amber-grad { background: linear-gradient(135deg, #fff7ed, #fef2f2); border: 1px solid #fde68a; }

/* INVITE MODAL COLUMN HEADERS */
.im-invite-col-head {
    display: grid;
    grid-template-columns: 1fr 172px 36px;
    gap: 10px;
    margin-bottom: 6px;
}
.im-col-label {
    font-size: 12px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.im-col-label-pad { padding-left: 2px; }

/* PERSON CARD (modal) */
.im-person-card { border-radius: 10px; }
.im-person-card-amber { background: linear-gradient(135deg, #fffbeb, #fff7ed); border: 1.5px solid #fed7aa; }
.im-person-card-gray  { background: #f9fafb; border: 1.5px solid #e5e7eb; }

/* AM PILLS */
.im-am-pill {
    background: #d97706;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.im-am-pill-outline {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

/* GRAY TRANSFER NOTICE (setAm) */
.im-notice-gray { background: #f8f9fa; border: 1px solid #e9ecef; }

/* SECTION MICRO LABELS */
.im-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 8px;
}
.im-section-label-sm {
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.im-section-label-foot {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}

/* RED CONSEQUENCE ALERT */
.im-alert-red {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
}
.im-alert-list { margin: 0; padding-left: 18px; }

/* GREEN SOFT NOTE */
.im-note-green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 13px;
}

/* TRANSFER DIAGRAM BOX (removeAm) */
.im-transfer-box { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; }
.im-transfer-head { padding: 10px 14px 8px; border-bottom: 1px solid #e9ecef; }
.im-transfer-foot { padding: 10px 14px; border-top: 1px solid #e9ecef; background: #fff; }
.im-ls-arrow { letter-spacing: .5px; }



/* workspace-create */

/* STAGE + CARD two-panel wizard: full-height card, */
.wsc-stage  { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wsc-wizard { width: 100%; max-width: 900px; max-height: 100%; align-self: flex-start; }

/* width-constrained measures */
.wsc-measure    { max-width: 520px; }

/* LEFT RAIL PANEL (steps reuse style.css .stepper-item */
.wsc-rail-panel { width: 290px; }

/* RIGHT MAIN PANE */
.wsc-main { min-width: 0; }
.wsc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wsc-step { display: none; }
.wsc-step.is-active { display: block; }
.wsc-inner      { max-width: 480px; }

.border-dashed { border-style: dashed !important; }

/* Roles & Permissions (body.rp-roles) Redesigned on Bootstrap */

/* Editor column: cap line length for readability */
body.rp-roles .rp-editor { max-width: 760px; }

/* Drop the trailing divider on the last */
body.rp-roles .rp-perm-body > .rp-perm-row:last-child,
body.rp-roles .rp-perm-body > .rp-notif-row:last-child { border-bottom: 0 !important; }

/* Notification rows: text | email | mobile */
body.rp-roles .rp-notif-grid {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  align-items: center; gap: 10px;
}
body.rp-roles .rp-notif-grid .form-check { justify-self: center; padding-left: 0; min-height: auto; margin: 0; }
body.rp-roles .rp-notif-grid .form-check .form-check-input { margin: 0; float: none; }

/* Zero-state card width */
body.rp-roles .rp-zero-card { max-width: 640px; }

/* Permissions | Notifications tabs: an even 40px gap (no trailing margin, so they stay centred) */
body.rp-roles .clw-tabs { gap: 40px; }
body.rp-roles .clw-tab { margin-right: 0; }

/* Toasts above modals/backdrops (RecurPost convention: top-right, elevated) */
body.rp-roles .rp-toasts.toast-container { z-index: 3000; }

@media (max-width: 991.98px) {
  body.rp-roles .rp-editor { max-width: 100%; }
}

@media (max-width: 575.98px) {
  /* keep the 3 column slots so header labels stay aligned with the toggles; just tighten */
  body.rp-roles .rp-notif-grid { grid-template-columns: 1fr 44px 44px; gap: 6px; }
}



/* settings (scoped to body.rp-settings) */
/* wf-settings.css all styles for this page (extracted */
    body.rp-settings {
      --bg:         #F8FAFC;
      --surface:    #FFFFFF;
      --border:     #E2E8F0;
      --border-2:   #CBD5E1;
      --text:       #0F172A;
      --text-2:     #475569;
      --text-3:     #94A3B8;
      --blue:       #2563EB;
      --blue-bg:    #EFF6FF;
      --blue-bdr:   #BFDBFE;
      --red:        #DC2626;
      --red-bg:     #FEF2F2;
      --red-bdr:    #FECACA;
      --green:      #16A34A;
      --green-bg:   #F0FDF4;
      --green-bdr:  #BBF7D0;
      --orange:     #EA580C;
      --orange-bg:  #FFF7ED;
      --orange-bdr: #FED7AA;
      --purple:     #7C3AED;
      --purple-bg:  #F5F3FF;
      --purple-bdr: #DDD6FE;
      --teal:       #0D9488;
      --teal-bg:    #F0FDFA;
      --teal-bdr:   #99F6E4;
      --yellow:     #CA8A04;
      --yellow-bg:  #FEFCE8;
      --yellow-bdr: #FEF08A;
      --radius:     10px;
      --shadow:     0 1px 3px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);
      --shadow-md:  0 4px 16px rgba(15,23,42,.10);
      --shadow-lg:  0 12px 32px rgba(15,23,42,.13);
    }

    /* SHELL */
    body.rp-settings .rp-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

    /* HEADER */
    body.rp-settings .rp-header {
      flex-shrink: 0; height: 77px; z-index: 50;
      background: var(--surface); border-bottom: 1px solid var(--border);
      padding: 0 24px; display: flex; align-items: center; gap: 10px;
    }
    body.rp-settings .hdr-back {
      width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
      border: 1px solid var(--border); background: var(--surface);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-2); cursor: pointer; text-decoration: none;
      transition: background .12s, border-color .12s;
    }
    body.rp-settings .hdr-back:hover { background: var(--bg); border-color: var(--border-2); color: var(--text); }
    body.rp-settings .hdr-back i { font-size: 16px; }
    body.rp-settings .hdr-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

    /* Workflow status pill */
    body.rp-settings .wf-status-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 13px 6px 10px; border-radius: 20px; cursor: pointer;
      font-size: 12.5px; font-weight: 600; border: 1.5px solid;
      transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
      outline: none;
    }
    body.rp-settings .wf-status-btn.is-active {
      background: #f0fdf4; border-color: #86efac; color: #15803d;
    }
    body.rp-settings .wf-status-btn.is-active:hover {
      background: #dcfce7; border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.15);
    }
    body.rp-settings .wf-status-btn.is-inactive {
      background: #f8fafc; border-color: var(--border); color: var(--text-2);
    }
    body.rp-settings .wf-status-btn.is-inactive:hover {
      background: var(--bg); border-color: var(--border-2); box-shadow: 0 0 0 3px rgba(0,0,0,.05);
    }
    body.rp-settings .wf-status-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .15s;
    }
    body.rp-settings .wf-status-btn.is-active .wf-status-dot { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
    body.rp-settings .wf-status-btn.is-inactive .wf-status-dot { background: #94a3b8; }

    /* switch */
    body.rp-settings .sw { position: relative; width: 36px; height: 20px; display: inline-block; cursor: pointer; flex-shrink: 0; }
    body.rp-settings .sw input { opacity: 0; position: absolute; width: 0; height: 0; }
    body.rp-settings .sw-track { position: absolute; inset: 0; background: #E2E8F0; border-radius: 10px; transition: background .18s; }
    body.rp-settings .sw input:checked + .sw-track { background: var(--blue); }
    body.rp-settings .sw-knob { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 3px; left: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s; }
    body.rp-settings .sw input:checked ~ .sw-knob { transform: translateX(16px); }

    /* TOOLBAR */
    body.rp-settings .sw-row { display: flex; align-items: center; gap: 7px; }
    body.rp-settings .sw-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
    body.rp-settings .toolbar-divider { width: 1px; height: 18px; background: var(--border); }

    /* CANVAS */
    body.rp-settings .canvas-scroll {
      flex: 1; overflow-y: auto; overflow-x: auto;
      display: flex; flex-direction: column;
      /* dotted grid background */
      background-color: #F1F5F9;
      background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px);
      background-size: 22px 22px;
    }
    body.rp-settings .canvas-scroll::-webkit-scrollbar { width: 6px; }
    body.rp-settings .canvas-scroll::-webkit-scrollbar-track { background: transparent; }
    body.rp-settings .canvas-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; }

    /* PIPELINE WRAPPER */
    body.rp-settings .pipeline-wrap {
      position: relative;
      width: 100%; padding: 40px 120px 100px;
      display: flex; justify-content: center; min-width: 700px;
    }

    /* SVG layer for reject arrows - sits */
    body.rp-settings #arrowSvg {
      position: fixed; top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none; overflow: visible; z-index: 10;
    }

    /* PIPELINE COLUMN */
    body.rp-settings .pipeline-col {
      display: flex; flex-direction: column; align-items: center;
      width: 380px; position: relative; z-index: 2;
    }

    /* STAGE NODE */
    body.rp-settings .p-node {
      --nc: 15,23,42;
      width: 100%; display: flex; flex-direction: row;
      background: var(--surface); border-radius: 16px;
      border: 1.5px solid rgba(var(--nc),.11);
      box-shadow: 0 1px 3px rgba(var(--nc),.04), 0 4px 16px rgba(var(--nc),.07);
      overflow: hidden; cursor: pointer; position: relative;
      transition: box-shadow .22s, border-color .22s, transform .24s cubic-bezier(.34,1.3,.64,1);
    }
    body.rp-settings .p-node:hover {
      box-shadow: 0 3px 8px rgba(var(--nc),.08), 0 14px 36px rgba(var(--nc),.13);
      border-color: rgba(var(--nc),.22);
      transform: translateY(-4px);
    }
    body.rp-settings .p-node.selected { border-color: rgba(13, 110, 253,.5); box-shadow: 0 0 0 3px rgba(13, 110, 253,.12), 0 8px 24px rgba(var(--nc),.14); transform: translateY(-2px); }
    body.rp-settings .p-node.bookend { cursor: default; }
    body.rp-settings .p-node.bookend:hover { transform: none; box-shadow: 0 1px 3px rgba(var(--nc),.05), 0 4px 16px rgba(var(--nc),.09); border-color: rgba(var(--nc),.14); }

    /* left colored column */
    body.rp-settings .node-left-col {
      width: 66px; flex-shrink: 0;
      background: rgba(var(--nc),.06);
      border-right: 1.5px solid rgba(var(--nc),.08);
      display: flex; align-items: center; justify-content: center;
      position: relative; transition: background .22s;
    }
    body.rp-settings .p-node:hover .node-left-col { background: rgba(var(--nc),.10); }

    /* icon inside left col */
    body.rp-settings .node-icon {
      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(var(--nc),.09); border: 1.5px solid rgba(var(--nc),.15);
      position: relative; z-index: 1;
    }
    body.rp-settings .node-icon i { font-size: 20px; opacity: .85; }

    /* content area */
    body.rp-settings .node-content {
      flex: 1; min-width: 0; padding: 14px 16px 14px 15px;
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      background: linear-gradient(100deg, rgba(var(--nc),.02) 0%, transparent 50%);
    }
    body.rp-settings .node-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    body.rp-settings .node-name {
      font-size: 15px; font-weight: 800; color: var(--text);
      letter-spacing: -.35px; flex: 1; min-width: 0;
      display: flex; align-items: center; gap: 7px;
    }
    body.rp-settings .node-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; row-gap: 3px; }
    body.rp-settings .node-meta-item {
      font-size: 12px; font-weight: 500; color: var(--text-2);
      display: flex; align-items: center; gap: 5px;
    }
    body.rp-settings .node-meta-item i { font-size: 13px; color: var(--text-3); flex-shrink: 0; }
    body.rp-settings .node-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-2); flex-shrink: 0; }

    /* right side - bookend toggle/badge */
    body.rp-settings .node-side { padding: 0 18px 0 0; flex-shrink: 0; display: flex; align-items: center; }

    /* Ideas learn btn */
    body.rp-settings .ideas-learn-btn {
      font-size: 11px; font-weight: 700; color: var(--purple);
      background: none; border: none; padding: 0; cursor: pointer;
      display: inline-flex; align-items: center; gap: 1px;
      text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent;
      transition: text-decoration-color .12s;
    }
    body.rp-settings .ideas-learn-btn:hover { text-decoration-color: var(--purple); }
    body.rp-settings .ideas-learn-btn i { font-size: 12px; }

    /* Ideas explainer offcanvas */
    body.rp-settings #ideasExplainer { width: 440px; }
    body.rp-settings #ideasExplainer .offcanvas-header { padding: 22px 24px 0; border: none; }
    body.rp-settings #ideasExplainer .offcanvas-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

    /* inner tabs use the shared .queue-history-tabs component; */
    body.rp-settings .ie-pane { display: none; padding:15px 24px; overflow-y: auto; flex: 1; }
    body.rp-settings .ie-pane.active { display: block; }

    /* Overview flow, Idea-field rows, and When-to-use columns */

    /* policy tag on card */
    body.rp-settings .node-policy-tag {
      font-size: 10.5px; font-weight: 700; color: var(--yellow);
      background: var(--yellow-bg); border: 1px solid var(--yellow-bdr);
      padding: 2px 7px; border-radius: 20px;
      display: inline-flex; align-items: center; gap: 3px;
    }
    body.rp-settings .node-policy-tag i { font-size: 11px; }

    /* legacy compat (no-op) */
    body.rp-settings .node-right { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 0; flex-shrink: 0; }
    body.rp-settings .type-chip {
      font-size: 11px; font-weight: 700; padding: 4px 10px;
      border-radius: 20px; white-space: nowrap;
    }
    body.rp-settings .chip-work { background: #F1F5F9; color: var(--text-2); border: 1px solid var(--border); }
    body.rp-settings .chip-review { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-bdr); }
    body.rp-settings .chip-client { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-bdr); }
    body.rp-settings .chip-ideas { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-bdr); }
    body.rp-settings .chip-sched { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); }

    /* node inner flex */
    body.rp-settings .node-inner { display: flex; align-items: center; min-height: 78px; }

    /* bookend special styles */
    body.rp-settings .p-node.ideas-card { border-style: dashed; background: linear-gradient(135deg, var(--purple-bg) 0%, #FAF5FF 100%); }
    body.rp-settings .p-node.sched-card { background: linear-gradient(135deg, var(--green-bg) 0%, #F7FFF9 100%); }

    /* CONNECTOR */
    body.rp-settings .p-conn {
      display: flex; flex-direction: column; align-items: center; gap: 0;
      padding: 2px 0; position: relative; z-index: 2;
    }
    body.rp-settings .conn-line { width: 2px; height: 12px; background: var(--border-2); }
    body.rp-settings .conn-add {
      display: flex; align-items: center; gap: 5px;
      padding: 4px 14px; border-radius: 20px; margin: 4px 0;
      border: 1.5px dashed var(--border-2); background: rgba(255,255,255,.85);
      color: var(--text-3); font-size: 11.5px; font-weight: 600;
      cursor: pointer; backdrop-filter: blur(4px);
      transition: color .12s, border-color .12s, background .12s;
    }
    body.rp-settings .conn-add:hover { color: var(--blue); border-color: var(--blue-bdr); background: #fff; }
    body.rp-settings .conn-add i { font-size: 13px; }
    /* Client Review is the final stage - no Add stage after it */
    body.rp-settings .p-conn.wfs-no-add .conn-add { display: none; }
    body.rp-settings .conn-arrow { color: var(--border-2); font-size: 14px; }

    /* SETTINGS TAB */

    body.rp-settings .settings-canvas {
      max-width: 640px; margin: 0 auto; padding: 36px 28px 100px;
    }
    body.rp-settings .s-section { margin-bottom: 28px; }
    body.rp-settings .s-section-title {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
      color: var(--text-3); margin-bottom: 14px; padding-bottom: 8px;
      border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px;
    }
    body.rp-settings .s-section-title i { font-size: 13px; }
    body.rp-settings .s-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 8px; }
    body.rp-settings .s-row {
      display: flex; align-items: center; gap: 14px; padding: 14px 18px;
      border-bottom: 1px solid var(--border);
    }
    body.rp-settings .s-row:last-child { border-bottom: none; }
    body.rp-settings .s-row-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    body.rp-settings .s-row-icon i { font-size: 15px; color: var(--text-3); }
    body.rp-settings .s-row-text { flex: 1; }
    body.rp-settings .s-row-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
    body.rp-settings .s-row-sub { font-size: 12px; color: var(--text-2); line-height: 1.45; }
    /* SLA Miss Policy option cards - layout/spacing */
    /* Policy option cards: icon + title/description + a radio ring on the right.
       They rest on a light-grey fill so they stay visible on the white card body
       (no white-on-white); hover lifts to white, selected turns blue. */
    body.rp-settings .fm-policy-opt { cursor: pointer; background: var(--bg); transition: border-color .14s, background .14s, box-shadow .14s; }
    body.rp-settings .fm-policy-opt:hover { border-color: var(--border-2); background: var(--surface); }
    body.rp-settings .fm-policy-opt:has(.form-check-input:checked) { border-color: var(--blue); background: var(--blue-bg); box-shadow: inset 0 0 0 1px var(--blue); }
    body.rp-settings .fm-policy-opt:has(.form-check-input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
    body.rp-settings .fm-policy-ico { width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); transition: background .14s, color .14s, border-color .14s; }
    body.rp-settings .fm-policy-ico i { font-size: 16px; }
    body.rp-settings .fm-policy-opt:has(.form-check-input:checked) .fm-policy-ico { background: var(--blue); border-color: var(--blue); color: #fff; }
    body.rp-settings .fm-policy-name { color: var(--text); }
    body.rp-settings .fm-policy-desc { line-height: 1.4; }
    body.rp-settings .fm-policy-radio { width: 16px; height: 16px; border: 2px solid var(--border-2); border-radius: 50%; transition: border-color .14s, background .14s, box-shadow .14s; }
    body.rp-settings .fm-policy-opt:has(.form-check-input:checked) .fm-policy-radio { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px var(--surface); }
    body.rp-settings .s-check-row {
      display: flex; align-items: flex-start; gap: 11px; padding: 13px 18px;
      border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s;
    }
    body.rp-settings .s-check-row:last-child { border-bottom: none; }
    body.rp-settings .s-check-row:hover { background: #FAFBFF; }
    body.rp-settings .s-check-row.checked { background: var(--blue-bg); }
    body.rp-settings .s-chk { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-2); margin-top: 1px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
    body.rp-settings .s-check-row.checked .s-chk { background: var(--blue); border-color: var(--blue); }
    body.rp-settings .s-chk i { font-size: 10px; color: #fff; display: none; }
    body.rp-settings .s-check-row.checked .s-chk i { display: block; }
    body.rp-settings .s-chk-body { flex: 1; }
    body.rp-settings .s-chk-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
    body.rp-settings .s-check-row.checked .s-chk-label { color: var(--blue); }
    body.rp-settings .s-chk-sub { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
    body.rp-settings .num-wrap { position: relative; }
    body.rp-settings .num-wrap input { width: 90px; height: 36px; padding: 0 36px 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); outline: none; transition: border-color .15s; }
    body.rp-settings .num-wrap input:focus { border-color: var(--blue); }
    body.rp-settings .num-suf { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--text-3); pointer-events: none; }
    body.rp-settings .settings-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 14px 28px; display: flex; gap: 10px; align-items: center; }

    /* STAGE SETTINGS MODAL */
    body.rp-settings .stage-modal .modal-content {
      border-radius: 16px; border: 1px solid var(--border);
      box-shadow: var(--shadow-lg); overflow: visible;
    }
    /* Header/body/footer use native Bootstrap modal anatomy (modal-header, */

    body.rp-settings .f-group { margin-bottom: 18px; }
    /* Field labels use the shared Bootstrap pattern */
    body.rp-settings .f-input {
      display: block; width: 100%; height: 40px; padding: 0 13px;
      font-size: 14px; font-weight: 600; color: var(--text);
      background: var(--surface); border: 1.5px solid var(--border); border-radius: 9px;
      outline: none; transition: border-color .15s, box-shadow .15s;
    }
    body.rp-settings .f-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 110, 253,.09); }
    body.rp-settings .f-select {
      display: block; width: 100%; height: 40px; padding: 0 30px 0 13px;
      font-size: 13px; font-weight: 500; color: var(--text);
      background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394A3B8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
      border: 1.5px solid var(--border); border-radius: 9px; appearance: none; outline: none; cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    body.rp-settings .f-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 110, 253,.09); }
    body.rp-settings .f-select:disabled { background-color: var(--bg); color: var(--text-3); opacity: .65; cursor: not-allowed; }

    /* type segmented */
    /* Stage-type switcher reuses the shared .queue-history-tabs component; */
    body.rp-settings #fm-type-seg .f-seg-btn.is-disabled { opacity: .4; }
    /* color swatches */
    body.rp-settings .f-swatches { display: flex; gap: 12px 10px; flex-wrap: wrap; align-items: center; padding-block: 4px; }
    body.rp-settings .f-swatch {
      width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
      transition: transform .12s; border: 2px solid transparent;
    }
    body.rp-settings .f-swatch:hover { transform: scale(1.2); }
    body.rp-settings .f-swatch.active { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px currentColor; transform: scale(1.12); }

    /* client note */
    body.rp-settings .client-note { display: none; }
    body.rp-settings .client-note.show { display: block; }

    /* sla block */
    body.rp-settings .sla-block { display: none; }
    body.rp-settings .sla-block.show { display: block; }

    /* TOAST */
    body.rp-settings .rp-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
    body.rp-settings .rp-toast {
      background: #1E293B; color: #fff;
      font-size: 13px; font-weight: 500; padding: 11px 16px; border-radius: 9px;
      box-shadow: 0 8px 24px rgba(15,23,42,.2); display: flex; align-items: center; gap: 8px;
      animation: tin .18s ease; max-width: 300px; pointer-events: all;
    }
    body.rp-settings .rp-toast i { font-size: 15px; }
    body.rp-settings .rp-toast.ok i { color: #34D399; }
    body.rp-settings .rp-toast.warn i { color: #FCD34D; }
    @keyframes tin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

    /* ADD MODAL */
    body.rp-settings .add-modal .modal-content { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
    body.rp-settings .del-modal .modal-content { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }

    /* Responsive The pipeline is a single centred */
    @media (max-width: 991.98px) {
      body.rp-settings .rp-header { padding: 0 16px; }
      /* arrows depend on the wide side padding; */
      body.rp-settings #arrowSvg { display: none; }
      body.rp-settings .pipeline-wrap { padding: 32px 24px 80px; min-width: 0; }
      body.rp-settings .pipeline-col { width: 100%; max-width: 420px; }
    }
    @media (max-width: 767.98px) {
      body.rp-settings .rp-header { padding: 0 12px; }
      body.rp-settings .pipeline-wrap { padding: 24px 16px 64px; }
      body.rp-settings .pipeline-col { max-width: 360px; }
      body.rp-settings .settings-canvas { padding: 24px 16px 80px; }
      body.rp-settings #ideasExplainer { width: 100%; max-width: 100vw; }
      body.rp-settings .stage-modal .modal-dialog { max-width: none !important; margin: .5rem; }
    }
    @media (max-width: 575.98px) {
      body.rp-settings .rp-header { padding: 0 10px; gap: 8px; }
      body.rp-settings .wf-status-btn { font-size: 12px; padding: 6px 11px 6px 9px; }
      body.rp-settings .pipeline-wrap { padding: 20px 12px 56px; }
      /* stage node header: on narrow cards the */
      body.rp-settings .node-row-top { flex-wrap: wrap; row-gap: 5px; }
      body.rp-settings .node-name { flex-basis: 100%; flex-wrap: wrap; row-gap: 4px; }
      /* let long meta text wrap inside the */
      body.rp-settings .node-meta-item { min-width: 0; overflow-wrap: anywhere; }
      /* reschedule "N days" + helper text stack */
      body.rp-settings .wfs-reschedule-row { flex-wrap: wrap; }
      body.rp-settings .wfs-sla-select { max-width: none; }
      body.rp-settings .ie-pane { padding: 20px 16px; }
      body.rp-settings #ideasExplainer .offcanvas-header { padding: 18px 16px 0; }
      /* colour + role fields go full-width instead */
      body.rp-settings .wfs-grid-2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 359.98px) {
      /* bookend cards (Ideas / Scheduled): on small */
      body.rp-settings .p-node.bookend { flex-wrap: wrap; }
      body.rp-settings .p-node.bookend .node-side { flex: 1 0 100%; justify-content: flex-start; padding: 8px 16px 14px 81px; }
    }
/* wf-settings.css extracted from workflow-settings.html Refactor-added semantic classes */

/* wfs- SEMANTIC CLASSES (inline-style refactor) */

/* icon / text colour helpers (theme tokens */
body.rp-settings .wfs-c-blue { color: var(--blue); }
body.rp-settings .wfs-c-orange { color: var(--orange); }
body.rp-settings .wfs-c-teal { color: var(--teal); }
body.rp-settings .wfs-c-purple { color: var(--purple); }
body.rp-settings .wfs-c-green { color: var(--green); }
body.rp-settings .wfs-c-yellow { color: var(--yellow); }
body.rp-settings .wfs-c-blue-hex { color: #2563EB; }
body.rp-settings .wfs-c-orange-hex { color: #EA580C; }
body.rp-settings .wfs-c-pink-hex { color: #DB2777; }

/* per-node accent colour (--nc) for the static */
body.rp-settings .wfs-nc-ideas { --nc: 124,58,237; }
body.rp-settings .wfs-nc-writing { --nc: 13,110,253; }
body.rp-settings .wfs-nc-mgr-review { --nc: 234,88,12; }
body.rp-settings .wfs-nc-client-review { --nc: 13,148,136; }
body.rp-settings .wfs-nc-sched { --nc: 22,163,74; }

body.rp-settings .wfs-empty-box { max-width: 700px; }

/* default stage-modal header stripe colour (JS overrides */
body.rp-settings .wfs-stripe-orange { background: #EA580C; }

/* colour swatches in the modal (background + */
body.rp-settings .wfs-sw-2563EB { background: #2563EB; color: #2563EB; }
body.rp-settings .wfs-sw-EA580C { background: #EA580C; color: #EA580C; }
body.rp-settings .wfs-sw-16A34A { background: #16A34A; color: #16A34A; }
body.rp-settings .wfs-sw-7C3AED { background: #7C3AED; color: #7C3AED; }
body.rp-settings .wfs-sw-0D9488 { background: #0D9488; color: #0D9488; }
body.rp-settings .wfs-sw-CA8A04 { background: #CA8A04; color: #CA8A04; }
body.rp-settings .wfs-sw-DB2777 { background: #DB2777; color: #DB2777; }
body.rp-settings .wfs-sw-0284C7 { background: #0284C7; color: #0284C7; }


/* small "Optional" pill on a node name */
body.rp-settings .wfs-name-pill {
  font-size: 10px; font-weight: 700;
  background: var(--bg); color: var(--text-3);
  border: 1px solid var(--border); padding: 2px 7px; border-radius: 20px;
}
/* teal "Shareable Cal." pill on Client Review */
body.rp-settings .wfs-name-pill-teal {
  font-size: 10px; font-weight: 700;
  background: var(--teal-bg); color: var(--teal);
  border: 1px solid var(--teal-bdr); padding: 2px 7px; border-radius: 20px;
}
/* "Publishes" badge in the Scheduled bookend side */
body.rp-settings .wfs-publishes-badge {
  font-size: 11.5px; font-weight: 700; color: var(--green);
  display: flex; align-items: center; gap: 4px;
}

/* two-column grid used in the stage modal */
body.rp-settings .wfs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* gear icon-only button on the right of */
body.rp-settings .node-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: transparent; border: 0;
  color: var(--text-3);
  transition: background .18s, color .18s;
}
body.rp-settings .node-gear i { font-size: 18px; line-height: 1; }
body.rp-settings .p-node:hover .node-gear { color: var(--text-2); }
body.rp-settings .node-gear:hover { color: var(--text); }

/* small grey hint after a field label */
body.rp-settings .wfs-label-hint { font-weight: 500; font-size: 11px; color: var(--text-3); margin-left: 4px; }

/* multi-select role dropdown */
body.rp-settings .wfs-role-toggle::after {
  content: ""; position: absolute; right: 12px; top: 18px;
  width: 8px; height: 8px; border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3); transform: translateY(-65%) rotate(45deg);
}
body.rp-settings .wfs-role-toggle { position: relative; cursor: pointer; padding-right: 32px; background-image: none; }
/* Select2-style tokenized field */
body.rp-settings .wfs-role-select2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-height: 38px; height: auto; padding: 4px 32px 4px 8px;
}
body.rp-settings .wfs-role-select2:focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
body.rp-settings .wfs-role-chips { display: contents; }
body.rp-settings .wfs-role-ph { color: var(--text-3); }
body.rp-settings .wfs-role-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--blue-bg); border: 1px solid var(--blue-bdr); color: var(--blue);
  border-radius: 5px; padding: 1px 3px 1px 7px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
}
body.rp-settings .wfs-role-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--blue); opacity: .65; font-size: 14px; line-height: 1;
}
body.rp-settings .wfs-role-chip-x:hover { opacity: 1; }
/* Row layout/spacing/radius/size via Bootstrap utilities on the */
body.rp-settings .wfs-role-opt { cursor: pointer; }
body.rp-settings .wfs-role-opt:hover { background: var(--surface-2, #f4f6f8); }
/* Refresh / Manage actions beside the Assigned Roles label */
/* custom-dropdown ships min-width:250px; drop it so the */
body.rp-settings #fm-role-dd .dropdown-menu { min-width: 0; }
 
/* empty-state hint when no roles exist */
body.rp-settings .wfs-role-empty {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-3); margin-top: 5px;
}
body.rp-settings .wfs-role-empty a { color: var(--blue); }
/* refresh-icon spin */
.wfs-spin { animation: wfsSpin .6s linear; }
@keyframes wfsSpin { to { transform: rotate(360deg); } }


/* inline form error message under modal fields */
body.rp-settings .wfs-form-error {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--red); margin-top: 4px;
}

/* sub-heading inside the SLA/Review block */
body.rp-settings .wfs-sub-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-3); margin-bottom: 14px;
}
/* Section cards inside the stage modal - each logical group is a bordered card
   with a compact tinted header. Containment (border, not shadow) is what gives
   the dialog its structure/hierarchy: card title > field micro-label > helper. */
/* The modal body sits on light grey so the white section cards read as distinct,
   raised surfaces instead of blending into one flat white sheet. */
body.rp-settings .stage-modal .modal-body { background: var(--bg); }
/* Keep single selects from stretching across the wide (modal-lg) dialog. */
body.rp-settings .fm-select-narrow { max-width: 300px; }
/* SETTINGS TAB - elevated settings panel floating */
body.rp-settings .wfs-settings { width: 100%; max-width: 820px; margin: 30px auto 60px; padding: 0 22px; }

/* Hero helper text measure (no Bootstrap max-ch utility) */
body.rp-settings .wfs-set-measure { max-width: 64ch; }

/* gated row (dependency unmet): JS toggles .wfs-set-disabled - dim and lock */
body.rp-settings .wfs-set-disabled { opacity: .55; }
body.rp-settings .wfs-set-disabled .form-check-input { cursor: not-allowed; }

/* fixed-width SLA select in the modal */
body.rp-settings .wfs-sla-select { max-width: 220px; }

/* Example-mode banner above the pipeline */
body.rp-settings .wfs-example-banner {
  display: flex; align-items: center; gap: 12px;
  max-width: 760px; margin: 14px auto 0; padding: 11px 14px;
  background: var(--blue-bg); border: 1px solid var(--blue-bdr);
  border-radius: 10px; color: var(--text);
}
body.rp-settings .wfs-example-banner-ico { font-size: 18px; color: var(--blue); flex-shrink: 0; align-self: flex-start; margin-top: 1px; }
body.rp-settings .wfs-example-banner-text { font-size: 12.5px; line-height: 1.45; flex: 1; min-width: 0; }
body.rp-settings .wfs-example-banner-link { font-weight: 700; color: var(--blue); text-decoration: underline; }
body.rp-settings .wfs-example-banner-actions { flex-shrink: 0; display: flex; gap: 8px; }

/* Setup-needed (amber) variant of the banner */
body.rp-settings .wfs-setup-banner { background: var(--orange-bg); border-color: var(--orange-bdr); }
body.rp-settings .wfs-setup-banner .wfs-example-banner-ico { color: var(--orange); }
body.rp-settings .wfs-setup-banner .wfs-example-banner-link { color: var(--orange); }

/* "Assign a role" warning shown in a */
body.rp-settings .wfs-assignee-warn { color: var(--orange); font-weight: 600; }
body.rp-settings .node-meta-item .wfs-assignee-warn i { color: var(--orange); }
/* stage card flagged as missing a role */
body.rp-settings .p-node.needs-role { border-color: var(--orange-bdr); }

/* Read-only example preview: hide edit affordances + */
body.rp-settings #pipelineCol.is-preview .node-gear { display: none; }
body.rp-settings #pipelineCol.is-preview .conn-add { display: none; }
body.rp-settings #pipelineCol.is-preview .p-node { cursor: default; }
body.rp-settings #pipelineCol.is-preview .p-node:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(var(--nc),.04), 0 4px 16px rgba(var(--nc),.07);
  border-color: rgba(var(--nc),.11);
}
body.rp-settings #pipelineCol.is-preview .p-node:hover .node-left-col { background: rgba(var(--nc),.06); }
body.rp-settings #pipelineCol.is-preview .ideas-card .sw { pointer-events: none; opacity: .5; }
body.rp-settings #pipelineCol.is-preview .ideas-learn-btn { pointer-events: auto; }

/* fixed-width num-wrap for the reschedule days input */
body.rp-settings .wfs-num-wrap-110 { width: 110px; }
/* row holding the reschedule input + helper */
body.rp-settings .wfs-reschedule-row { display: flex; align-items: center; gap: 10px; }

/* Ideas explainer header/eyebrow/intro use native offcanvas-header + */

/* constrained modal-dialog widths (formerly inline max-width) */
body.rp-settings .wfs-mw-400 { max-width: 400px; }
/* dev-toggle pink variant (set via JS innerHTML) */
body.rp-settings .wfs-dot-pink { background: #f472b6; box-shadow: 0 0 0 2px rgba(244,114,182,.3); }

/* roles & permissions: master section toggle (larger */
body.rp-roles .rp-feat-master-wrap { padding-left: 2.6em; min-height: 1.5em; margin-bottom: 0; }
body.rp-roles .rp-feat-master-wrap .rp-feat-master { width: 2.6em; height: 1.4em; margin-left: -2.6em; cursor: pointer; }


/* The header's title is the "what to show" choice itself. It reads as a page heading - the
   mode's icon on a 40px tinted tile (the rail's mark is the same size, so the two title
   blocks match), its name in the heading size, a quiet line under it saying what it holds -
   and the up-down caret (the rail's workspace switcher uses the same one) says it can be
   changed. No button chrome: a soft field appears on hover and while the list is open. */
.cal-title-sw { padding: 2px 8px; margin-left: -8px; gap: 10px; transition: background-color .15s ease-out; }
.cal-title-sw .cal-title-ico { font-size: 20px; line-height: 1; }
.cal-title-sw .cal-title-caret { font-size: 16px; color: #6c757d; transition: color .15s ease-out; }
.cal-title-sw.show .cal-title-caret { color: #0d6efd; }
@media (prefers-reduced-motion: reduce) {
  .cal-title-sw, .cal-title-sw .cal-title-caret { transition: none; }
}