/* =========================================
   WEFIT WMS - Global Stylesheet
   Ported from tms/css/style.css (itself ported from lms2). The brand accent
   is the official WEFIT pink (--wefit-pink) — TMS used a dark blue, lms2 used
   this same pink. Layout system (sidebar, main-content, wf-btn, custom-table…)
   is kept identical across the WEFIT family so pages migrated between apps keep
   their classes.
   ========================================= */

:root {
    /* brand accent — near-black by default (logged-out connect page); incl_head.cfm
       overrides these three per logged-in profile from APPLICATION.PROFILE_COLOR */
    --wefit-pink: #1A1A1A;
    --wefit-pink-dark: #000000;   /* hover / pressed */
    --wefit-pink-light: #F2F2F2;  /* soft background tint */
    --wefit-bg: #F3F5F9;
    --text-dark: #2C3E50;
    --text-gray: #8A94A6;
    --sidebar-width: 260px;
    --card-radius: 24px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--wefit-bg);
    color: var(--text-dark);
    overflow-x: clip;  /* `hidden` here breaks position:sticky descendants; `clip` doesn't */
}

/* Helper Colors */
.text-pink { color: var(--wefit-pink) !important; }
.bg-pink { background-color: var(--wefit-pink) !important; color: white; }

/* Section-color tokens (mirror APPLICATION.SECTIONS[*].color) */
:root {
    --section-dashboard:   #3B82F6;
    --section-finance:     #10B981;
    --section-cs:          #F59E0B;
    --section-sales:       #7C3AED;
    --section-maintenance: #06B6D4;
    --section-shop:        #EC4899;
    --section-syllabus:    #6366F1;
    --section-blog:        #F97316;
    --section-db:          #64748B;
    --section-stats:       #14B8A6;   /* ex --section-misc (family renamed 2026-09-24) */
    --section-errors:      #EF4444;   /* CF error viewer (errors_index.cfm) */
    --section-quiz:        #84CC16;   /* quiz library + AI QC (quiz_index.cfm / quiz_view.cfm) */
    --section-wesales:      #A0522D;   /* WESALES — the Sales prospection desk over the old vtiger CRM (wesales_index.cfm; was --section-vtiger until 2026-10-07) */
    --section-watch:        #4338CA;   /* NIGHT WATCH — the nightly scan dashboard (watch_index.cfm, 2026-10-16) */
}

/* Lesson-state tokens — THE convention for "hours of a TP" wherever they are drawn
   (wf-tpp segments + tiles, cardtp progress + legend dots). Read them, never re-type a hex.
   2026-09-09: MISSED moved coral #EF8157 -> the platform danger red. On an 8px bar the coral
   sat 22 degrees of hue from the amber SCHEDULED next to it and the two segments read as one;
   red vs amber is a real hue AND lightness step. (cs_calendar keeps its own pastel map --
   that one is documented as verbatim-legacy lms colours, a different system.) */
:root {
    --lesson-done:      #10B981;  /* completed (5) — emerald, = --section-finance */
    --lesson-inprogress:#6EE7B7;  /* in progress (2) — the done green, lightened, drawn as stripes */
    --lesson-missed:    #DC2626;  /* missed (4) — no-show, consumed hours */
    --lesson-scheduled: #FBBF24;  /* scheduled (1) — booked, not yet delivered. Amber-400: yellower
                                     than --section-cs so the bar segment separates from the red. */
    --lesson-scheduled-ink: #F59E0B; /* the same state as TEXT/BORDER on white (the tile): amber-500,
                                     because #FBBF24 as .7rem type on white is 1.7:1 and unreadable. */
    --lesson-remaining: #0EA5E9;  /* left on the contract */
    --lesson-track:     #eef0f2;  /* the grey a bar sits on = the remaining hours */
}

/* Soft (low-alpha) variants — for icon chips / empty states. */
.bg-soft-dashboard   { background: rgba( 59, 130, 246, .15) !important; color: var(--section-dashboard)   !important; }
.bg-soft-finance     { background: rgba( 16, 185, 129, .15) !important; color: var(--section-finance)     !important; }
.bg-soft-cs          { background: rgba(245, 158,  11, .15) !important; color: var(--section-cs)          !important; }
.bg-soft-sales       { background: rgba(124,  58, 237, .15) !important; color: var(--section-sales)       !important; }
.bg-soft-maintenance { background: rgba(  6, 182, 212, .15) !important; color: var(--section-maintenance) !important; }
.bg-soft-shop        { background: rgba(236,  72, 153, .15) !important; color: var(--section-shop)        !important; }
.bg-soft-syllabus    { background: rgba( 99, 102, 241, .15) !important; color: var(--section-syllabus)    !important; }
.bg-soft-blog        { background: rgba(249, 115,  22, .15) !important; color: var(--section-blog)        !important; }
.bg-soft-db          { background: rgba(100, 116, 139, .15) !important; color: var(--section-db)          !important; }
.bg-soft-stats       { background: rgba( 20, 184, 166, .15) !important; color: var(--section-stats)       !important; }
.bg-soft-errors      { background: rgba(239,  68,  68, .15) !important; color: var(--section-errors)      !important; }
.bg-soft-quiz        { background: rgba(132, 204,  22, .15) !important; color: var(--section-quiz)        !important; }
.bg-soft-wesales      { background: rgba(160,  82,  45, .15) !important; color: var(--section-wesales)      !important; }
.bg-soft-watch        { background: rgba( 67,  56, 202, .15) !important; color: var(--section-watch)        !important; }
.bg-soft-accounts    { background: rgba( 59, 130, 246, .15) !important; color: var(--section-dashboard)   !important; } /* matches .wf-cat-accounts */
.bg-soft-users       { background: rgba(245, 158,  11, .15) !important; color: var(--section-cs)          !important; } /* matches .wf-cat-users */


/* =========================================
   WF-SCROLL — reusable thin, soft scrollbar (same as lms2/tms).
   ========================================= */
.wf-scroll               { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.wf-scroll::-webkit-scrollbar        { width: 8px; height: 8px; }
.wf-scroll::-webkit-scrollbar-track  { background: transparent; }
.wf-scroll::-webkit-scrollbar-thumb  {
    background: #CBD5E1;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.wf-scroll::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
    background-clip: padding-box;
}


/* =========================================
   WF BUTTONS — centralized CTA, identical contract to lms2/tms.
   Color via section modifier (.wf-btn--dashboard / accounts / users /
   reports) or .wf-btn--pink for the brand accent.
   ========================================= */
.wf-btn {
    --wf-btn-bg: var(--wefit-pink);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    padding: .45rem 1rem;
    border: 2px solid transparent;
    border-radius: 9999px;

    font-size: .78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;

    background: var(--wf-btn-bg);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s, background .15s, color .15s;
}
.wf-btn:hover         { filter: brightness(1.08); color: #fff; }
.wf-btn:disabled,
.wf-btn.is-disabled   { opacity: .55; cursor: not-allowed; filter: none; }

/* Outline variant — transparent fill + tinted border + tinted text;
   swaps to filled on hover so the affordance survives the change. */
.wf-btn.wf-btn--outline {
    background: transparent;
    color: var(--wf-btn-bg);
    border-color: var(--wf-btn-bg);
}
.wf-btn.wf-btn--outline:hover {
    background: var(--wf-btn-bg);
    color: #fff;
    filter: none;
}

/* Size modifiers */
.wf-btn.wf-btn--sm { padding: .3rem .75rem; font-size: .7rem; }
.wf-btn.wf-btn--lg { min-height: 42px; padding: .5rem 1.25rem; font-size: .8rem; }

/* Icon-only square button */
.wf-btn.wf-btn--icon { width: 42px; height: 42px; padding: 0; }

/* Color modifiers — set --wf-btn-bg only; the base rules paint it. */
.wf-btn--dashboard   { --wf-btn-bg: var(--section-dashboard); }
.wf-btn--finance     { --wf-btn-bg: var(--section-finance); }
.wf-btn--cs          { --wf-btn-bg: var(--section-cs); }
.wf-btn--sales       { --wf-btn-bg: var(--section-sales); }
.wf-btn--maintenance { --wf-btn-bg: var(--section-maintenance); }
.wf-btn--danger      { --wf-btn-bg: #DC2626; }
.wf-btn--muted       { --wf-btn-bg: #6B7280; }
.wf-btn--pink        { --wf-btn-bg: var(--wefit-pink); }
.wf-btn--syllabus    { --wf-btn-bg: var(--section-syllabus); }

/* Syllabus Studio — structured lesson editor (js/lesson_editor.js) */
.le-outline-row:hover,
.le-block-card:hover  { background: rgba(99, 102, 241, .06); }
.le-outline-row.active,
.le-block-card.active { background: rgba(99, 102, 241, .12); outline: 2px solid var(--section-syllabus); }


/* =========================================
   SIDEBAR & LAYOUT
   ========================================= */

@media (min-width: 992px) {
    .sidebar-wrapper {
        width: var(--sidebar-width);
        height: 100vh;
        background: #fff;
        position: fixed;
        top: 0; left: 0;
        display: flex; flex-direction: column;
        box-shadow: 5px 0 20px rgba(0,0,0,0.02);
        z-index: 1000;
    }
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 40px;
    }
    .mobile-nav { display: none; }
}

@media (max-width: 991px) {
    .mobile-nav { display: flex; }
    .main-content { padding: 20px; padding-top: 90px; }
    .sidebar-wrapper {
        background: #fff;
    }
}

/* Sidebar Visuals — WEFIT pink */
.sidebar-header {
    background-color: var(--wefit-pink);
    height: 140px;
}
.sidebar-footer {
    background-color: var(--wefit-pink);
    height: 90px;
    display: flex; align-items: center; justify-content: center;
    margin-top: auto;
}

/* Sidebar Links */
.sidebar-nav .nav-link {
    color: var(--text-gray);
    font-weight: 500;
    padding: 12px 30px;
    display: flex; align-items: center;
    transition: 0.2s;
}
.sidebar-nav .nav-link i { width: 30px; font-size: 1.2rem; margin-right: 10px; text-align: center; }
.sidebar-nav .nav-link:hover { color: var(--nav-color, var(--wefit-pink)); background: var(--nav-color-light, var(--wefit-pink-light)); }

/* Active State - uses --nav-color per nav-item for section-specific colors */
.sidebar-nav .nav-item.active .nav-link { color: var(--text-dark); font-weight: 700; }
.sidebar-nav .nav-item.active .nav-link > i:first-child { color: var(--nav-color, var(--wefit-pink)); }
.sidebar-nav .nav-item.active { position: relative; }
.sidebar-nav .nav-item.active::after {
    content: ""; position: absolute; right: 0; top: 14px;
    height: 25px; width: 5px; background: var(--nav-color, var(--wefit-pink));
    border-radius: 5px 0 0 5px;
}
.nav-separator { width: 20px; height: 2px; background: #eee; margin: 8px auto; }

/* Disabled state (sections not yet open for this user) */
.nav-disabled { opacity: 0.35; pointer-events: none; }
.card-disabled { opacity: 0.35; pointer-events: none; }


/* =========================================
   COMMON COMPONENTS
   ========================================= */

/* Cards */
/* KPI-strip value — compact figure (fs-5 was too loud on laptop widths) */
.wf-kpi-val { font-size: 1.02rem; font-weight: 600; line-height: 1; }
.wf-kpi-val small { font-size: .78rem; }

/* form-section variant — subtle grey card INSIDE a white surface (modals: TP form cards).
   overflow:visible on purpose (2026-09-22): .card-wefit clips at its rounded edge, which cut the
   floating panel of the flag select / multi-select (.wf-fs-panel, .wf-ms-panel) sitting in the
   Edit-TP form card. A form card holds fields only, nothing bleeds to its edge. */
.card-wefit.wf-formcard {
    background: #F8F9FA;
    border: 1px solid #EDEFF2;
    box-shadow: none;
    overflow: visible;
}
.card-wefit {
    background: #fff;
    border: none;
    border-radius: var(--card-radius);
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.05);
    overflow: hidden;
}
/* Hover lift is OPT-IN, not default: a card only lifts when it's actually clickable.
   Add the .hover-lift class (or wrap the card in an <a>) on interactive cards. Static
   display cards (KPIs, tables, panels) stay still — the lift is a click affordance. */

/* Buttons (legacy bootstrap-style pills) */
.btn-pink {
    background-color: var(--wefit-pink); color: white; border: none;
    border-radius: 50px; padding: 10px 25px; font-weight: 600; font-size: 0.9rem;
}
.btn-pink:hover { background-color: var(--wefit-pink-dark); color: white; }

.btn-outline-gray {
    border: 2px solid #E0E0E0; color: var(--text-gray); background: transparent;
    border-radius: 50px; padding: 8px 20px; font-weight: 600; font-size: 0.85rem;
}
.btn-outline-gray:hover { border-color: var(--text-dark); color: var(--text-dark); }

.btn-outline-pink {
    border: 2px solid var(--wefit-pink); color: var(--wefit-pink); background: transparent;
    border-radius: 50px; padding: 8px 20px; font-weight: 600;
}
.btn-outline-pink:hover { background: var(--wefit-pink); color: white; }

/* Search Bar */
.search-bar-container { position: relative; max-width: 700px; width: 100%; }
.search-bar-input {
    width: 100%; border: none; border-radius: 50px; padding: 15px 20px 15px 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); font-size: 0.95rem;
}
.search-bar-icon {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    color: var(--wefit-pink); font-size: 1.1rem;
}

/* =========================================
   GLOBAL QUICK-SEARCH (incl_search.cfm) — vanilla dropdown
   ========================================= */
.wf-search { width: 100%; max-width: 480px; }
/* THE SOURCE SWITCHER (WeSales screens, 2026-10-20): the WEFIT logo pill and the WS pill after the magnifier; the chosen one is lit */
.wf-search-src { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); display: flex; gap: .25rem; z-index: 2; }
.wf-search-srcbtn { border: 0; background: transparent; padding: 0; line-height: 1; opacity: .38; filter: grayscale(1); transition: opacity .15s, filter .15s; cursor: pointer; }
.wf-search-srcbtn:hover { opacity: .8; filter: none; }
.wf-search-srcbtn.is-on { opacity: 1; filter: none; }
/* the ACTIVE WS pill is coloured (the WeSales accent, white text) — a grey pill cannot show it is on (user call 2026-10-20) */
.wf-search-srcbtn.is-on .vt-src--vtiger { background: var(--section-wesales); color: #fff; }
/* the two switcher pills share ONE box (same height, same width) — the mark in one, "WS" in the other */
.wf-search-srcbtn .vt-src { font-size: .62rem; padding: 0; height: 1.35rem; min-width: 2.7rem; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.wf-search-srcbtn .vt-src--wefit { background-size: auto 42%; }
.search-bar-input--src { padding-left: 140px; }

.wf-search-panel {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1100;
    background: #fff; border-radius: 18px;
    box-shadow: 0 12px 32px rgba(44, 62, 80, .14);
    max-height: 70vh; overflow-y: auto; padding: 8px;
    scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent;
}
.wf-search-group {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-gray); padding: 10px 12px 4px; display: flex; align-items: center; gap: .4rem;
}
.wf-search-group i { color: var(--cat, var(--wefit-pink)); font-size: .8rem; }

/* Per-category accents — subtle, reusing the section palette.
   accounts=blue · groups=cyan · users=amber · trainers=purple · orders=green */
.wf-cat-accounts { --cat: var(--section-dashboard); }
.wf-cat-groups   { --cat: var(--section-maintenance); }
.wf-cat-users    { --cat: var(--section-cs); }
.wf-cat-managers { --cat: #0D9488; } /* training managers (TM 8 / SchoolMNG 11) — the TM pill teal of incl_profile_pills */
.wf-cat-trainers { --cat: var(--section-sales); }
.wf-cat-orders   { --cat: var(--section-finance); }

.wf-search-item {
    display: flex; align-items: center; gap: .75rem;
    padding: 9px 12px; border-radius: 12px;
    text-decoration: none; color: var(--text-dark);
}
.wf-search-item:hover,
.wf-search-item.is-active { background: var(--wefit-pink-light); color: var(--text-dark); }

.wf-search-item-ic {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    color: var(--cat, var(--wefit-pink));
    background: #F3F5F9; /* fallback */
    background: color-mix(in srgb, var(--cat, var(--wefit-pink)) 11%, #fff);
}
.wf-search-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wf-search-item-label { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.wf-search-item-sub {
    font-size: .76rem; color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-search-item mark { background: rgba(217, 0, 76, .16); color: inherit; padding: 0 1px; border-radius: 3px; }

.wf-search-badge {
    flex: 0 0 auto; font-size: .66rem; font-weight: 600;
    background: var(--wefit-pink-light); color: var(--wefit-pink);
    padding: 3px 9px; border-radius: 9999px; white-space: nowrap;
}
/* inactive person (user_status 5) — listed last, muted, grey chip (2026-09-30) */
.wf-search-item--inactive .wf-search-item-label,
.wf-search-item--inactive .wf-search-item-sub { color: var(--text-gray); }
.wf-search-item--inactive .wf-search-item-ic   { opacity: .45; filter: grayscale(1); }
.wf-search-badge--off { background: #EEF0F4; color: #6B7280; }
.wf-search-empty { padding: 18px 14px; color: var(--text-gray); font-size: .88rem; text-align: center; }

/* =========================================
   LOGS & TASKS MODAL — sticky add-form header (modal/modal_log.cfm)
   Pins counts + add form to the top while the log list scrolls. The scroll
   container (modal-body) carries a 1rem top padding; with a sticky child that
   leaves a strip where list rows peek above the header. So: kill the top
   padding only when the log is mounted, and let the header own that spacing.
   ========================================= */
#wf_modal_body:has(#wf_log) { padding-top: 0; }
.wf-log-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    /* horizontal bleed over the modal-body side padding; own top spacing so the
       header sits flush at the very top with nothing peeking above it */
    margin: 0 -1rem 0;
    padding: 1rem 1rem .6rem;
    box-shadow: 0 6px 10px -8px rgba(44, 62, 80, .25);
}
/* Each tab's list pane. The min-height is deliberate: the add form's type picker opens
   downwards, and with an empty/short list (e.g. "No open to-do.") the modal body used to
   be barely taller than the form, so the menu had almost nowhere to go. Belt and braces
   with data-bs-strategy="fixed" on the picker, which frees it from the body's overflow. */
.wf-log-list { min-height: 340px; }
/* Mini calendar card (left of each log/task row) — --cal set inline per row */
.wf-cal {
    flex: 0 0 46px; width: 46px; align-self: flex-start;
    border: 1px solid #eef0f4; border-radius: 10px; overflow: hidden;
    text-align: center; background: #fff; line-height: 1;
}
.wf-cal-m {
    background: var(--cal, var(--wefit-pink)); color: #fff;
    font-size: .58rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 3px 0;
}
.wf-cal-d { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); padding: 4px 0; }
/* light tint of the row's task colour (--cal), echoing the month band on top */
.wf-cal-y {
    font-size: .58rem; font-weight: 700; letter-spacing: .04em;
    color: var(--cal, var(--wefit-pink));
    background: color-mix(in srgb, var(--cal, var(--wefit-pink)) 12%, #fff);
    padding: 2px 0;
    border-top: 1px solid color-mix(in srgb, var(--cal, var(--wefit-pink)) 20%, #fff);
}
/* tighten the day when a year row is present */
.wf-cal-d:not(:last-child) { padding-bottom: 1px; }
/* time under the year — printed only when the row's date carries one (modal_log) */
.wf-cal-t {
    font-size: .56rem; font-weight: 600; letter-spacing: .02em;
    color: var(--text-gray); background: #F7F8FA;
    padding: 2px 0; border-top: 1px solid #eef0f4;
}

/* ---- wf-typedrop — grouped multi-select task-type picker (replaces the plain <select>).
       Toggle button borrows the .form-select look (chevron); menu = checkbox rows
       grouped by task family, --grp set inline per group from the family colour. ---- */
.wf-typedrop-btn { cursor: pointer; }
.wf-typedrop-btn .wf-typedrop-label {
    display: flex; align-items: center; gap: .3rem;
    overflow: hidden; white-space: nowrap;
}
.wf-typedrop-chip {
    display: inline-flex; align-items: center; gap: .32rem;
    font-size: .7rem; font-weight: 600; line-height: 1;
    padding: .22rem .5rem; border-radius: 99px; flex: 0 0 auto;
}
.wf-typedrop-more { font-size: .72rem; font-weight: 700; color: var(--text-gray); flex: 0 0 auto; }
.wf-typedrop-menu { width: 100%; min-width: 270px; max-height: 320px; overflow-y: auto; }
/* live filter bar — pinned while the type list scrolls (-.5rem swallows the menu's p-2) */
.wf-typedrop-menu [data-typedrop-filter] { position: sticky; top: -.5rem; z-index: 2; background: #fff; }
.wf-typedrop-group {
    display: flex; align-items: center; gap: .45rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--grp, var(--text-gray));
    padding: .5rem .5rem .25rem;
}
.wf-typedrop-group::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--grp, #9aa0a6) 30%, #fff); }
.wf-typedrop-opt {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .5rem; border-radius: 6px; cursor: pointer;
}
.wf-typedrop-opt:hover { background: #F3F5F9; }
.wf-typedrop-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ---- wf-sidebox — collapsible left-column info box (entity pages).
       Header row is uniform with the plain (non-collapsible) cards: leading icon +
       title + caret hugging the text on the left, edit pencil (btn btn-sm btn-light)
       pinned right. The caret must NOT be pushed to the far right — it belongs to
       the title, the right slot belongs to the action.
       <div class="card-wefit wf-sidebox p-0">
         <div class="wf-sidebox-bar">
           <button class="wf-sidebox-head collapsed" data-bs-toggle="collapse" data-bs-target="#x">
             <h6><i icon></i>Title</h6><i class="fa-solid fa-chevron-down"></i></button>
           <button class="btn btn-sm btn-light" data-wf-modal="…"><i class="fa-solid fa-pen text-muted"></i></button>
         </div>
         <div class="collapse" id="x"><div class="px-4 pb-4">…</div></div>
       </div> ---- */
.wf-sidebox-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: 1rem 1.5rem;
}
.wf-sidebox-head {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-right: auto; padding: 0;
    background: none; border: 0; cursor: pointer; text-align: left;
}
.wf-sidebox-head > .fa-chevron-down { font-size: .7rem; color: var(--text-gray); transition: transform .2s; }
.wf-sidebox-head:not(.collapsed) > .fa-chevron-down { transform: rotate(180deg); }

/* ---- Channel picker (modal_log add forms) — inline radio/checkbox chips ---- */
.wf-ch-opt {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; color: var(--text-gray); cursor: pointer; margin: 0;
}
.wf-ch-opt:has(input:checked) { color: var(--wefit-pink); font-weight: 600; }

/* ---- Per-SUB-TASK tick (modal_log TO DO rows) — a "multi" task carries several
       logs_item lines and each one closes on its own (logs_item.log_item_status).
       The badge itself is the button: checkbox glyph + the type badge, struck out
       once done. Bare button reset so it sits exactly like the plain badge does. ---- */
.wf-item-tick {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: 99px; text-align: left;
}
.wf-item-tick i { font-size: .82rem; flex: 0 0 auto; }
.wf-item-tick:hover .badge { filter: brightness(.97); }
.wf-item-tick:disabled { opacity: .5; cursor: default; }
.wf-item-tick.is-done .badge,
.badge.wf-item-struck { text-decoration: line-through; opacity: .5; }

/* ---- Done-tasks collapse (TO DO tab) — subtle divider-style toggle + archived list ---- */
.wf-done-toggle {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    width: 100%; padding: .35rem .75rem; margin-top: .25rem;
    border: 0; border-radius: 99px; cursor: pointer;
    background: #F3F5F9; color: var(--text-gray);
    font-size: .72rem; font-weight: 600;
}
.wf-done-toggle:hover { background: #E9EDF3; }
.wf-done-toggle i { font-size: .62rem; transition: transform .2s; }
.wf-done-toggle:not(.collapsed) i { transform: rotate(180deg); }
/* flex only wins over .collapse's display:none when .show is present (specificity) */
.wf-done-list { display: flex; flex-direction: column; gap: .5rem; }

/* ---- Roadmap ACCORDION header (tp_view sessions) — louder than wf-done-toggle:
       white card bar, uppercase title, count+duration meta right, rotating caret ---- */
.wf-acc-toggle {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .7rem 1.1rem; margin-top: .6rem;
    border: 0; border-radius: 14px; cursor: pointer;
    background: #fff; color: var(--text-dark);
    font-size: .85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    box-shadow: 0 8px 24px rgba(149, 157, 165, .05);
    transition: background .15s;
}
.wf-acc-toggle:hover { background: #F8F9FA; }
.wf-acc-toggle .wf-acc-caret { font-size: .7rem; transition: transform .2s; }
.wf-acc-toggle:not(.collapsed) .wf-acc-caret { transform: rotate(180deg); }
.wf-acc-toggle .wf-acc-meta {
    margin-left: auto; color: var(--text-gray);
    font-size: .74rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; white-space: nowrap;
}

/* ---- Week to-do board (multi-column day calendar) — reusable component (incl_todo_week.cfm).
       --tkaccent set inline from the host's section color; --tk set per chip from task_color. ---- */
.wf-week-scroll { overflow-x: auto; padding-bottom: 4px; }
.wf-week { display: grid; gap: 8px; align-items: start; } /* columns take natural height — expanding one day doesn't reflow the row */
.wf-col {
    background: #fff; border: 1px solid #eef0f4; border-radius: 12px;
    padding: 8px 8px 10px; display: flex; flex-direction: column; min-height: 120px;
}
.wf-col--today {
    border-color: var(--tkaccent, var(--wefit-pink));
    box-shadow: 0 0 0 1px var(--tkaccent, var(--wefit-pink)) inset;
}
.wf-col-h {
    text-align: center; line-height: 1.1; padding: 2px 0 8px;
    border-bottom: 1px solid #f1f3f6; margin-bottom: 8px;
}
.wf-col-h b {
    display: block; font-size: .8rem; color: var(--text-dark);
    text-transform: uppercase; letter-spacing: .03em;
}
.wf-col-h span { font-size: .72rem; color: var(--text-gray); }
.wf-col--today .wf-col-h b { color: var(--tkaccent, var(--wefit-pink)); }
.wf-col-empty { text-align: center; color: #c9ccd2; font-size: 1rem; padding: 8px 0; }
/* weekend columns of the task calendar (Mon → Sun board): narrower, muted header */
.wf-col--we { background: #fafbfc; }
.wf-col--we .wf-col-h b { color: var(--text-gray); }
.wf-col--today.wf-col--we .wf-col-h b { color: var(--tkaccent, var(--wefit-pink)); }
/* ---- week boards: in-place week navigation + week picker (js/wf_weeknav.js) ----
   consumers: incl_task_calendar.cfm (#wf_tasks) · trainer_calendar.cfm (#wf_cal_wrap).
   The root fades while the next week is fetched; the picker is a month grid under the
   range label, one clickable row per week. Accent = --wknav-accent set on the root. */
.wf-wknav-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }
.wf-wknav-pick { position: relative; }
.wf-wknav-cal {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 1050;
    width: 292px; background: #fff; border: 1px solid #e6e8ee; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20,24,40,.14); padding: 10px; text-align: left;
}
.wf-wknav-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wf-wknav-cal-h b { font-size: .84rem; }
.wf-wknav-cal-g { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 2px 0; font-size: .74rem; }
.wf-wknav-cal-d, .wf-wknav-cal-g > .wf-wknav-cal-w { text-align: center; color: var(--text-gray); font-weight: 700; font-size: .64rem; padding: 2px 0 4px; }
.wf-wknav-cal-r { display: contents; color: inherit; text-decoration: none; cursor: pointer; }
.wf-wknav-cal-r > span { display: block; text-align: center; padding: 5px 0; line-height: 1; border-radius: 0; }
.wf-wknav-cal-r > .wf-wknav-cal-w { color: var(--text-gray); font-size: .62rem; font-weight: 700; }
.wf-wknav-cal-r > span:nth-child(2) { border-radius: 8px 0 0 8px; }
.wf-wknav-cal-r > span:last-child { border-radius: 0 8px 8px 0; }
.wf-wknav-cal-r:hover > span { background: #f1f3f6; }
.wf-wknav-cal-r.is-now > span { background: rgba(0,0,0,.035); }
.wf-wknav-cal-r.is-shown > span { background: var(--wknav-accent, var(--tkaccent, var(--wefit-pink))); color: #fff; }
.wf-wknav-cal-r.is-shown > .wf-wknav-cal-w, .wf-wknav-cal-r.is-shown > .is-out { color: rgba(255,255,255,.75); }
.wf-wknav-cal-c.is-out { color: #b8bcc6; }
.wf-wknav-cal-c.wf-wknav-cal-we, .wf-wknav-cal-d.wf-wknav-cal-we { color: #9aa0a6; }
.wf-wknav-cal-c.is-today { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.wf-wknav-cal-f { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f3f6; }
.wf-wknav-cal-f a { font-weight: 700; text-decoration: none; color: var(--wknav-accent, var(--tkaccent, var(--wefit-pink))); }
/* ---- MONTH VIEW (2026-09-28) — incl_cal_window.cfm + incl_cal_nav.cfm + wf_weeknav.js.
   SYNC-WATCH: the same block sits in lms2/css/style.css. ---- */
/* the Week | Month toggle */
.wf-wknav-view { display: inline-flex; gap: 2px; padding: 2px; margin-right: 6px; background: #f1f3f6; border-radius: 8px; }
.wf-wknav-view a { padding: 3px 10px; border-radius: 6px; font-size: .72rem; font-weight: 700; line-height: 1.5; color: var(--text-gray); text-decoration: none; }
.wf-wknav-view a:hover { color: var(--text-dark); }
.wf-wknav-view a.active { background: #fff; color: var(--wknav-accent, var(--tkaccent, var(--wefit-pink))); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* the month picker — twelve months of a year */
.wf-wknav-cal-mg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wf-wknav-cal-m { display: block; text-align: center; padding: 8px 0; border-radius: 8px; font-size: .76rem; font-weight: 600; color: inherit; text-decoration: none; }
.wf-wknav-cal-m:hover { background: #f1f3f6; }
.wf-wknav-cal-m.is-now { background: rgba(0,0,0,.035); text-decoration: underline; text-underline-offset: 3px; }
.wf-wknav-cal-m.is-shown { background: var(--wknav-accent, var(--tkaccent, var(--wefit-pink))); color: #fff; }
/* the month grid — the SAME .wf-week / .wf-col board, one cell per day, compact chips; the cell body
   scrolls instead of growing (a CS day holds a hundred lessons) — the day number opens the week */
.wf-week--month { gap: 6px; }
.wf-mdow { text-align: center; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-gray); padding: 0 0 2px; }
.wf-mdow--we { color: #9aa0a6; }
.wf-week--month .wf-col { min-height: 112px; padding: 5px 5px 6px; border-radius: 10px; }
.wf-week--month .wf-col-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; text-align: left; padding: 0 2px 4px; margin-bottom: 4px; }
.wf-week--month .wf-col-h span { font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-col-day { font-weight: 800; font-size: .8rem; color: var(--text-dark); text-decoration: none; border-radius: 6px; padding: 0 4px; margin-left: -4px; }
a.wf-col-day:hover { background: #f1f3f6; color: var(--tkaccent, var(--wknav-accent, var(--wefit-pink))); }
.wf-col--today .wf-col-day { background: var(--tkaccent, var(--wknav-accent, var(--wefit-pink))); color: #fff; }
.wf-col--out { background: #fafbfc; border-style: dashed; }
.wf-col--out > * { opacity: .55; }
.wf-mcell-body { max-height: 188px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 3px; }
.wf-week--month .wf-col-empty { padding: 4px 0; font-size: .8rem; }
.wf-week--month .wf-tk-list { gap: 3px; }
.wf-week--month .wf-tk { gap: 4px; padding: 2px 5px; border-radius: 6px; border-left-width: 2px; }
.wf-week--month .wf-tk-label { font-size: .66rem; }
.wf-week--month .wf-tk-name, .wf-week--month .wf-tk-flag { display: none; }
.wf-week--month .wf-tk-time { min-width: 0; font-size: .6rem; }
.wf-week--month .wf-tk-tag--m { display: inline-block; margin: 0 0 0 3px; padding: 0 .2rem; }
.wf-week--month .wf-tk-asgn { width: 14px; height: 14px; font-size: .5rem; }
.wf-week--month .wf-fam + .wf-fam { margin-top: 3px; }
.wf-week--month .wf-fam-h { padding: 3px 5px; gap: 4px; }
.wf-week--month .wf-fam-name, .wf-week--month .wf-fam-count { font-size: .62rem; }
/* per-day figures of a month cell (trainer calendar: opened · booked) */
.wf-mcell-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: .6rem; color: var(--text-gray); line-height: 1.2; margin: -1px 0 4px; }
.wf-mcell-meta b { color: var(--text-dark); font-weight: 700; }
.wf-mcell-off { font-size: .6rem; font-weight: 700; color: #EF4444; }
.wf-tk--warn { box-shadow: 0 0 0 1.5px #EF4444 inset; }
/* labelled filter rows (cs_calendar — Status / Method / Techno / Trainer) */
.wf-lens-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.wf-lens-row:last-child { margin-bottom: 0; }
.wf-lens-lab { flex: 0 0 64px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-gray, #6b7280); }

/* drag & drop reschedule (shop_calendar) */
.wf-col--over { outline: 2px dashed var(--section-shop, #FFA100); outline-offset: -3px; background: rgba(255,161,0,.06); }
.wf-tk[draggable="true"] { cursor: grab; }
.wf-tk--dragging { opacity: .35; }
.wf-movepop { position: fixed; width: 290px; z-index: 1060; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 10px 12px; }
.wf-movepop-t { font-weight: 700; font-size: .78rem; color: var(--section-shop, #FFA100); margin-bottom: 4px; }

.wf-tk-list { display: flex; flex-direction: column; gap: 6px; }
.wf-tk {
    display: flex; gap: 7px; align-items: center; min-width: 0;
    text-decoration: none; padding: 5px 7px; border-radius: 8px;
    background: color-mix(in srgb, var(--tk, #9aa0a6) 13%, #fff);
    border-left: 3px solid var(--tk, #9aa0a6);
    transition: filter .12s ease, transform .12s ease;
}
.wf-tk[data-wf-modal] { cursor: pointer; }
.wf-tk[data-wf-modal]:hover { filter: brightness(.97); transform: translateY(-1px); }
.wf-tk-flag { flex: 0 0 auto; width: 16px; height: 12px; display: flex; align-items: center; }
/* time variant of the flag slot (lesson agendas: cs_calendar, shop_calendar) — natural width
   so the time never overflows into the label; right-aligned so the titles line up */
.wf-tk-time { flex: 0 0 auto; min-width: 28px; text-align: right; font-size: .62rem; font-weight: 700; color: var(--tk, #9aa0a6); }
.wf-tk-flag img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.wf-tk-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.18; }
.wf-tk-label {
    font-weight: 600; font-size: .74rem; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-tk-name {
    font-size: .7rem; color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* capped variant — the chip inside a table cell (shop_orders "Exam slot"): the calendar
   column bounds it naturally, a table cell does not, so the labels ellipsize instead. */
.wf-tk--cap { max-width: 250px; }

/* Linguaskill flavour tag inside a slot chip (incl_cert_chip.cfm): General vs Business,
   read from the variations actually purchased. Tiny, inline, before the certif name. */
.wf-tk-tag {
    display: inline-block; margin-right: .3rem; padding: 0 .28rem; border-radius: 3px;
    font-size: .58rem; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
    background: #e9ecef; color: var(--text-dark);
}
.wf-tk-tag--gen { background: rgba(18, 60, 101, .14); color: #123C65; }
.wf-tk-tag--bus { background: rgba(120, 53, 189, .14); color: #7835BD; }
.wf-tk-tag--m   { background: #fff; color: inherit; border: 1px solid var(--tk, rgba(0, 0, 0, .18)); display: block; margin: 2px 0 0; text-align: center; }

/* completed task — de-emphasised on the board */
.wf-tk--done { opacity: .5; }
.wf-tk--done .wf-tk-label { text-decoration: line-through; }

/* ---- Filter / summary pill bar — uniform inline pills (finance list pages).
   Active = profile accent (var(--wefit-pink)), inactive = WHITE. Pair with .wf-flabel
   for the bold "Year"/"Provider" labels. Same height/padding for filters AND count pills. ---- */
.wf-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    height: 38px; padding: 0 1.25rem; min-width: 54px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; line-height: 1; white-space: nowrap;
    border: 1px solid #e6e8ec; background: #fff; color: #5b6573;
    text-decoration: none; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
a.wf-pill:hover { border-color: #c2c6cd; color: var(--text-dark); }
.wf-pill.active { background: var(--wefit-pink); border-color: var(--wefit-pink); color: #fff; }
.wf-pill--shadow { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.wf-flabel { font-weight: 700; color: var(--text-dark); font-size: .8rem; }
/* dropdown toggles / selects / inputs sitting in a pill filter bar share the pill height + radius */
.wf-pill.dropdown-toggle { gap: .45rem; }
.wf-fbar .form-select, .wf-fbar .form-control { height: 38px; border-radius: 999px; }
.wf-fbar .wf-btn { height: 38px; display: inline-flex; align-items: center; }

/* task FAMILY group — collapsible header (count "to do") + body of learner chips */
.wf-fam { display: flex; flex-direction: column; }
.wf-fam + .wf-fam { margin-top: 5px; }
.wf-fam-h {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 5px 6px; border-radius: 8px; background: #f6f7f9;
    user-select: none; transition: background .12s ease;
    list-style: none; /* hide native <summary> disclosure triangle */
}
.wf-fam-h::-webkit-details-marker { display: none; }
.wf-fam-h::marker { content: ""; }
.wf-fam-h:hover { background: #eef0f4; }
.wf-fam-h:focus:not(:focus-visible) { outline: none; } /* no ring on mouse-click; keep it for keyboard */

/* ACTIVE family — header filled solid with the family colour */
.wf-fam[open] > .wf-fam-h { background: var(--fam, var(--tkaccent, var(--wefit-pink))); }
.wf-fam[open] > .wf-fam-h:hover { background: var(--fam, var(--tkaccent, var(--wefit-pink))); filter: brightness(.96); }
.wf-fam[open] > .wf-fam-h .wf-fam-name { color: #fff; }
.wf-fam[open] > .wf-fam-h .wf-fam-caret { color: #fff; }
.wf-fam[open] > .wf-fam-h .wf-fam-dot { display: none; } /* whole header is the colour now — dot redundant */
.wf-fam[open] > .wf-fam-h .wf-fam-count { background: rgba(255,255,255,.26); color: #fff; }
.wf-fam[open] > .wf-fam-h .wf-fam-count-tot { color: rgba(255,255,255,.8); }
.wf-fam-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.wf-fam-name {
    flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .72rem;
    color: var(--text-dark); text-transform: uppercase; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-fam-count {
    flex: 0 0 auto; font-weight: 700; font-size: .72rem; line-height: 1;
    color: #fff; background: var(--tkaccent, var(--wefit-pink));
    border-radius: 999px; padding: 2px 7px;
}
.wf-fam-count-tot { font-weight: 600; opacity: .7; font-size: .66rem; }
.wf-fam-caret {
    flex: 0 0 auto; font-size: .6rem; color: var(--text-gray);
    transition: transform .15s ease;
}
.wf-fam[open] > .wf-fam-h .wf-fam-caret { transform: rotate(180deg); }
/* a bit of easing on open — fade + slight slide of the revealed chips (opacity/transform
   only, so no layout reflow; the heavy bit stays cheap). Caret already eases via its transition. */
@keyframes wf-fam-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.wf-fam[open] > .wf-tk-list { animation: wf-fam-reveal .18s ease both; }
@media (prefers-reduced-motion: reduce) { .wf-fam[open] > .wf-tk-list { animation: none; } }
/* family fully done — muted header + hollow count */
.wf-fam-h--done .wf-fam-name { color: var(--text-gray); font-weight: 600; }
.wf-fam-h--done .wf-fam-count { color: var(--text-gray); background: #e6e8ec; }

/* assignee (teammate) workload lens — pills with open-count, click to focus the board */
.wf-asgn-bar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.wf-asgn {
    display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
    padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600;
    color: var(--text-dark); background: #f3f4f6; border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.wf-asgn:hover { background: #e9ebef; }
.wf-asgn.active { border-color: var(--asgn, var(--tkaccent, #9aa0a6)); background: color-mix(in srgb, var(--asgn, var(--tkaccent, #9aa0a6)) 16%, #fff); }
.wf-asgn-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--asgn, #9aa0a6); }
.wf-asgn-n { font-weight: 700; color: var(--text-gray); }
.wf-asgn.active .wf-asgn-n { color: var(--text-dark); }

/* per-chip owner badge (initials), shown in the whole-team view */
.wf-tk-asgn {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .56rem; font-weight: 700; color: #fff; text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
/* badge is redundant while the assignee lens focuses one teammate (JS toggles the class) */
#wf_tasks.wf-to-focus .wf-tk-asgn { display: none; }

/* =========================================
   CARD CORNER — colored top-right tab with centered icon (ported from lms2;
   WMS colors it inline via --corner-bg from OBJ_TP_GET.get_method_icon, no
   --product-* tokens). Parent must be position:relative + overflow:hidden.
   ========================================= */
.card-corner {
    position: absolute; top: 0; right: 0;
    width: 44px; height: 44px;
    border-bottom-left-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--corner-bg, #E5E7EB);
    color:      var(--corner-fg, #B0B0B0);
    z-index: 1;
}
.card-corner i { font-size: 1rem; line-height: 1; }

/* =========================================
   TP RECAP PROGRESS BAR (incl_tp_recap) — built vs booked nested fills, + the MISSED slice
   (coral, the tp_book "status-missed" colour) drawn at the END of the booked fill: booked
   already includes missed (lms doctrine: a no-show is consumed), the slice only re-colours it.
   Color via --cardtp-color, widths via --cardtp-built / --cardtp-booked / --cardtp-missed,
   all set inline on .cardtp-progress-wrap. Ported from lms2 card_tp.
   ========================================= */
.cardtp-progress {
    position: relative; height: 8px; border-radius: 50px;
    background: #eef0f2; overflow: hidden;
}
.cardtp-progress-built,
.cardtp-progress-booked {
    position: absolute; top: 0; left: 0; bottom: 0;
    border-radius: 50px;
    background: var(--cardtp-color, #6366F1);
}
.cardtp-progress-built  { width: var(--cardtp-built, 0%);  opacity: .22; }
.cardtp-progress-booked { width: var(--cardtp-booked, 0%); }
.cardtp-progress-missed {
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--cardtp-booked, 0%) - var(--cardtp-missed, 0%));
    width: var(--cardtp-missed, 0%);
    background: var(--lesson-missed);
    border-radius: 0 50px 50px 0;
}
.cardtp-progress-legend {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; color: var(--text-gray);
}
.cardtp-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
    background: var(--cardtp-color, #6366F1);
}
.cardtp-dot--built  { opacity: .22; }
.cardtp-dot--booked { opacity: 1; }
.cardtp-dot--missed { background: var(--lesson-missed); }

/* Homogeneous row-action group (done / reschedule / delete) — one connected control */
.wf-actions {
    display: inline-flex; flex-direction: row; flex-shrink: 0;   /* never squeezed by a long text beside it */
    border: 1px solid #eef0f4; border-radius: 10px; overflow: hidden; background: #fff;
}
.wf-actions > button {
    flex-shrink: 0;
    border: 0; background: transparent; cursor: pointer;
    width: 34px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.wf-actions > button + button { border-left: 1px solid #eef0f4; }
.wf-actions > button:hover { background: #F3F5F9; }
.wf-actions > button i { font-size: .82rem; }

/* Top Actions */
.action-btn {
    width: 42px; height: 42px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dark); border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: 0.2s; padding: 0;
}
.action-btn:hover { color: var(--wefit-pink); transform: translateY(-2px); }
.action-btn img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }

/* KPI Donuts */
.kpi-donut {
    width: 60px; height: 60px; border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p)*1%), #f0f0f0 0);
    display: flex; align-items: center; justify-content: center;
    position: relative; margin: 0 auto 10px auto;
}
.kpi-donut::after {
    content: attr(data-val);
    position: absolute; width: 85%; height: 85%;
    background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; color: #333;
}
.kpi-label { font-size: 0.75rem; color: var(--text-gray); font-weight: 600; line-height: 1.2; }

/* Hover Lift Effect */
.hover-lift { transition: transform 0.2s; }
.hover-lift:hover { transform: translateY(-5px); }

/* Rounded 4 (Bootstrap 5 doesn't have this by default) */
.rounded-4 { border-radius: 24px !important; }

/* Button Icon */
.btn-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

/* Table */
.custom-table thead th {
    background: #E9ECEF; color: var(--text-gray); font-size: 0.75rem; text-transform: uppercase; padding: 15px; border: none;
}
.custom-table thead th:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.custom-table thead th:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
.custom-table tbody td {
    padding: 15px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; color: var(--text-dark); font-size: 0.9rem;
}
/* condensed variant for data-dense listings */
.custom-table.is-condensed thead th { padding: 8px 10px; font-size: .7rem; }
.custom-table.is-condensed tbody td { padding: 6px 10px; font-size: .78rem; }
/* footer rows (totals) follow the body padding — tables without Bootstrap .table have no default cell padding */
.custom-table tfoot td { padding: 15px; border-top: 2px solid #E9ECEF; vertical-align: middle; font-size: 0.9rem; }
.custom-table.is-condensed tfoot td { padding: 6px 10px; font-size: .78rem; }
/* Fact grid — identity cards: small bold uppercase LABEL, value below. 2 cells per row,
   .wf-fact--wide spans the row (emails, account names, job titles). Alternative to the
   <dl class="row"> col-5/col-7 layout that wraps badly in a narrow column. */
.wf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.wf-fact { min-width: 0; }
.wf-fact--wide { grid-column: 1 / -1; }
.wf-fact-label { display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-gray); margin-bottom: .15rem; }
.wf-fact-value { font-size: .85rem; color: var(--text-dark); overflow-wrap: anywhere; }
.wf-fact-value .wf-fact-act { font-size: .68rem; color: var(--text-gray); margin-left: .35rem; text-decoration: none; }
.wf-fact-value .wf-fact-act:hover { color: var(--text-dark); }
/* Group header band — the SAME grey strip as .custom-table thead, for lists that are not
   tables (e.g. user_view's TP cards grouped by order). Content left, .wf-grouphead-actions
   right (icon buttons). */
.wf-grouphead {
    display: flex; align-items: center; gap: .5rem;
    background: #E9ECEF; color: var(--text-gray); border-radius: 15px;
    padding: 8px 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.wf-grouphead .badge { text-transform: none; letter-spacing: 0; }
.wf-grouphead-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.wf-grouphead-actions a, .wf-grouphead-actions button {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: var(--text-gray); font-size: .78rem; text-decoration: none;
}
.wf-grouphead-actions a:hover, .wf-grouphead-actions button:hover { background: #fff; color: var(--text-dark); }
/* clickable LINK rows (whole row navigates; data-href, see incl_footer delegate) */
tr.wf-rowlink { cursor: pointer; }
tr.wf-rowlink:hover > td { background: var(--wefit-pink-light); }
/* clickable picker rows (whole row toggles the checkbox) */
tr.wf-rowpick { cursor: pointer; }
tr.wf-rowpick:hover > td { background: var(--wefit-pink-light); }
tr.wf-rowpick.is-picked > td { background: color-mix(in srgb, var(--wefit-pink) 12%, #fff); }

/* ===========================================================================
   Reusable step wizard (WfStepper) — themed via --wefit-pink (profile accent),
   green for completed. Markup contract: a root element containing
     .wf-stepper > .wf-step[data-step] (.wf-step-dot + .wf-step-label)
     .wf-step-panel[data-panel]      (one per step; .active is visible)
     [data-wf-prev] [data-wf-next] [data-wf-finish] nav controls
   then  WfStepper('rootId', { validate, onChange, onFinish }).
   See incl/incl_stepper.cfm + js/wf_stepper.js.
   =========================================================================== */
.wf-stepper { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 28px; }
.wf-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }
.wf-step-dot {
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #e6e8eb; color: #9aa0a6; font-weight: 700; font-size: 1rem; transition: all .25s ease; z-index: 2;
}
.wf-step-label { margin-top: 9px; font-size: .82rem; font-weight: 600; color: #9aa0a6; transition: color .25s ease; }
/* connectors between dots */
.wf-step::before, .wf-step::after { content: ""; position: absolute; top: 22px; height: 3px; background: #e6e8eb; width: 50%; z-index: 1; }
.wf-step::before { left: 0; } .wf-step::after { right: 0; }
.wf-step:first-child::before, .wf-step:last-child::after { display: none; }
/* active step */
.wf-step.active .wf-step-dot { background: var(--wefit-pink); color: #fff; box-shadow: 0 0 0 5px var(--wefit-pink-light); }
.wf-step.active .wf-step-label { color: var(--wefit-pink); }
/* completed steps (clickable to go back) */
.wf-step.done { cursor: pointer; }
.wf-step.done .wf-step-dot { background: var(--section-finance); color: #fff; }
.wf-step.done .wf-step-label { color: var(--text-dark); }
.wf-step.done::before, .wf-step.done::after, .wf-step.active::before { background: var(--section-finance); }   /* a done step is green on BOTH sides: the connector to the next dot is its ::after + the next step's ::before (2026-09-23) */
/* panels */
.wf-step-panel { display: none; }
.wf-step-panel.active { display: block; animation: wfStepFade .25s ease; }
@keyframes wfStepFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* nav row */
.wf-step-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 4px; }
/* compact NAVIGATION variant — the shared order-modal header (incl/incl_order_steps.cfm):
   smaller dots, neutral connectors (steps are destinations, not a linear progress),
   .link = clickable (swaps the modal in place), .disabled = not yet reachable (create mode),
   .done = the step already holds data (count badge on the dot). */
.wf-stepper--compact { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #eef0f2; }
.wf-stepper--compact .wf-step-dot { width: 32px; height: 32px; font-size: .8rem; }
.wf-stepper--compact .wf-step-label { margin-top: 5px; font-size: .68rem; }
.wf-stepper--compact .wf-step::before, .wf-stepper--compact .wf-step::after { top: 15px; height: 2px; }
.wf-stepper--compact .wf-step.done::before, .wf-stepper--compact .wf-step.done::after, .wf-stepper--compact .wf-step.active::before { background: #e6e8eb; }
.wf-stepper--compact .wf-step.active .wf-step-dot { box-shadow: 0 0 0 4px var(--wefit-pink-light); }
.wf-step.link { cursor: pointer; }
.wf-step.link:hover .wf-step-dot { box-shadow: 0 0 0 4px var(--wefit-pink-light); transform: translateY(-1px); }
.wf-step.link:hover .wf-step-label { color: var(--wefit-pink); }
.wf-step.disabled { cursor: not-allowed; opacity: .45; }
.wf-step-count {
    position: absolute; top: -5px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 700;
    background: #fff; color: var(--text-dark); border: 1px solid #d9dde2; box-shadow: 0 1px 2px rgba(0,0,0,.08); z-index: 3;
}
.wf-step-dot { position: relative; }

/* ORDER DOCUMENTS (order_view) — one chip per slot: empty = dashed upload button, filled = green with an × */
.wf-doc-chip { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
    letter-spacing: .03em; border: 1px dashed #c9ccd2; background: #fff; color: #8a939c; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.wf-doc-chip:hover { border-color: var(--wefit-pink); color: var(--wefit-pink); }
.wf-doc-chip.is-on { border: 1px solid rgba(25, 135, 84, .35); background: rgba(25, 135, 84, .1); color: #198754; cursor: default; padding-right: .3rem; }
.wf-doc-chip.is-on a { color: inherit; text-decoration: none; }
.wf-doc-chip.is-on a:hover { text-decoration: underline; }
.wf-doc-del { border: 0; background: none; color: #198754; opacity: .5; padding: 0 .15rem; line-height: 1; cursor: pointer; font-size: .7rem; }
.wf-doc-del:hover { opacity: 1; color: #dc3545; }
.wf-doc-table th { text-align: center; }
.wf-doc-row--order td { background: #fafbfc; }

/* CARD HEAD — one header height for every card on a page (order_view): title left, action right,
   min-height = the btn-sm btn-light pencil so a card without an action sits at the same height */
.wf-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 31px; margin-bottom: 1rem; }
.wf-card-head > h6 { margin: 0; }
/* CARD TITLE — THE title of a .card-wefit (2026-09-02, user call: "use trainer_view's card title
   everywhere"). = the trainer_view / account_view h6: small uppercase muted bold, icon tinted by
   the caller, an optional count pill. Card = .card-wefit p-4 → .wf-card-head → h6.wf-card-title.
   No bordered p-3 header strips on p-0 cards any more (tmg_index was the last). */
.wf-card-title { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #6c757d; }
.wf-card-title small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .7rem; color: #8b9098; }
.wf-card-title .badge { font-size: .62rem; vertical-align: middle; }
.wf-card-head .wf-btn--sm, .wf-card-head .btn-sm { min-height: 31px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }

/* classic grey SUB-PANEL — one structured block per section inside a modal (order learners step) */
.wf-panel { border: 1px solid #e9ecef; border-radius: 10px; background: #f8f9fa; padding: 14px 16px; }
.wf-panel + .wf-panel { margin-top: 12px; }
.wf-panel-title { display: flex; align-items: center; gap: .4rem; margin-bottom: 10px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
.wf-panel-title i { color: var(--text-dark); }
.wf-panel-title .badge { font-size: .62rem; }
.wf-panel-hint { margin-top: 8px; font-size: .66rem; color: #8a939c; }
/* attached-entity POOL (order learners step): dashed tray of removable pills */
.wf-pool { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 42px; padding: 6px; border: 1px dashed #d9dde2; border-radius: 8px; background: #fff; }
.wf-pool-empty { color: #9aa0a6; font-size: .78rem; font-style: italic; align-self: center; padding: 0 4px; }
.wf-pool-pill { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .22rem .35rem .22rem .65rem; border-radius: 999px; background: var(--wefit-pink-light); color: var(--wefit-pink); font-weight: 600; font-size: .74rem; }
.wf-pool-pill a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-pool-pill a:hover { text-decoration: underline; }
.wf-pool-pill button { border: none; background: rgba(0,0,0,.06); color: inherit; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; cursor: pointer; opacity: .7; }
.wf-pool-pill button:hover { opacity: 1; background: rgba(0,0,0,.14); }

/* ===========================================================================
   Reusable chip multi-select (WfMultiSelect) — progressive enhancement of a
   native <select multiple data-wf-ms>. Chips for the active values + a
   searchable checkbox dropdown. Themed via --wefit-pink (profile accent).
   =========================================================================== */
.wf-ms { position: relative; }
.wf-ms-control {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    min-height: 31px; padding: 3px 28px 3px 8px; cursor: pointer;
    background: #fff; border: 1px solid #ced4da; border-radius: 8px; font-size: .8rem;
}
.wf-ms-control:focus, .wf-ms.open .wf-ms-control { outline: none; border-color: var(--wefit-pink); box-shadow: 0 0 0 .18rem var(--wefit-pink-light); }
.wf-ms-ph { color: #9aa0a6; }
.wf-ms-chip {
    display: inline-flex; align-items: center; gap: .25rem; max-width: 160px;
    padding: .08rem .5rem; border-radius: 999px; font-weight: 600; font-size: .72rem;
    background: var(--wefit-pink-light); color: var(--wefit-pink);
}
.wf-ms-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-ms-chip i { cursor: pointer; opacity: .65; }
.wf-ms-chip i:hover { opacity: 1; }
.wf-ms-more { font-size: .72rem; color: #6c757d; font-weight: 600; }
/* count mode — control reads "Label [N]" as a finance-style pill (no chip list) */
.wf-ms-control--count {
    flex-wrap: nowrap; border-radius: 999px;
    min-height: 38px; padding: 0 28px 0 1rem; gap: .45rem;
    font-size: .8rem; font-weight: 600; color: #5b6573; border-color: #e6e8ec;
}
.wf-ms.open .wf-ms-control--count, .wf-ms-control--count:hover { border-color: #c2c6cd; }
.wf-ms-cnt-label { white-space: nowrap; color: var(--text-dark); }
.wf-ms-cnt-label.wf-ms-ph { color: #5b6573; }
.wf-ms-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1;
    background: var(--wefit-pink); color: #fff;
}

/* account-page tabs — subtle pink-accent nav-tabs (view_account.cfm) */
.wf-acc-tabs { border-bottom: 1px solid #edeff2; gap: .25rem; }
.wf-acc-tabs .nav-link {
    border: none; border-bottom: 2px solid transparent; border-radius: 0;
    color: #6c757d; font-weight: 600; font-size: .85rem; padding: .55rem .9rem;
}
.wf-acc-tabs .nav-link:hover { color: var(--text-dark); border-bottom-color: #d9dce1; }
.wf-acc-tabs .nav-link.active { color: var(--wefit-pink); border-bottom-color: var(--wefit-pink); background: transparent; }

/* transient "coming soon" toast (stub buttons) */
.wf-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 1080;
    background: var(--text-dark, #1a1a1a); color: #fff;
    padding: .7rem 1.1rem; border-radius: 10px; font-size: .82rem; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
}
.wf-toast.show { opacity: 1; transform: translateY(0); }
.wf-ms-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #9aa0a6; font-size: .7rem; pointer-events: none; }
.wf-ms-panel {
    position: absolute; z-index: 1060; left: 0; right: auto; top: calc(100% + 4px);
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 6px; min-width: 200px;
}
.wf-ms-search { width: 100%; border: 1px solid #e3e6ea; border-radius: 6px; padding: 4px 8px; font-size: .78rem; margin-bottom: 4px; }
.wf-ms-list { max-height: 220px; overflow: auto; }
.wf-ms-opt { display: flex; align-items: center; gap: .45rem; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: .8rem; }
.wf-ms-opt:hover { background: var(--wefit-pink-light); }
.wf-ms-opt.hidden { display: none; }
.wf-ms-opt input { accent-color: var(--wefit-pink); }
.wf-ms-empty { padding: 8px 6px; color: #9aa0a6; font-size: .78rem; text-align: center; }
.wf-ms-group { padding: 8px 6px 3px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a939c; border-bottom: 1px solid #eceff2; margin-bottom: 2px; position: sticky; top: 0; background: #fff; }
.wf-ms-actions { display: flex; justify-content: space-between; padding: 4px 6px 2px; border-top: 1px solid #f0f1f3; margin-top: 4px; }
.wf-ms-actions button { background: none; border: none; padding: 0; font-size: .72rem; font-weight: 600; color: var(--wefit-pink); cursor: pointer; }

/* ===== wf-fs — single-select with a FLAG per option (formation / language pickers, 2026-08-25).
   js/wf_flagselect.js enhances <select data-wf-flagsel data-wf-flag-base="…/img_formation/">:
   the native select stays hidden as the form value, the control + panel borrow the wf-ms look. */
.wf-fs { position: relative; }
.wf-fs-native { display: none !important; }
.wf-fs-control {
    display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 31px;
    padding: 3px 28px 3px 8px; position: relative; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid #ced4da; border-radius: 8px; font-size: .8rem; color: var(--text-dark);
}
.wf-fs-control:focus, .wf-fs.open .wf-fs-control { outline: none; border-color: var(--wefit-pink); box-shadow: 0 0 0 .18rem var(--wefit-pink-light); }
.wf-fs-control:disabled { background: #e9ecef; cursor: default; }
.wf-fs-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wf-fs-flag--none { display: inline-block; background: #eef0f2; }
.wf-fs-label, .wf-fs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-fs-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #9aa0a6; font-size: .7rem; pointer-events: none; }
.wf-fs-panel {
    position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px); min-width: 200px;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px;
}
.wf-fs-search { width: 100%; border: 1px solid #e3e6ea; border-radius: 6px; padding: 4px 8px; font-size: .78rem; margin-bottom: 4px; }
.wf-fs-list { max-height: 240px; overflow: auto; }
.wf-fs-opt { display: flex; align-items: center; gap: .45rem; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: .8rem; }
.wf-fs-opt:hover { background: var(--wefit-pink-light); }
.wf-fs-opt.selected { background: color-mix(in srgb, var(--wefit-pink) 12%, #fff); font-weight: 600; }
.wf-fs-opt.disabled { opacity: .45; cursor: default; }

/* ===== wf-tpp — the VERSATILE TP PROGRESS (incl_tp_progress.cfm, 2026-08-25): segmented bar
   (done · in-progress · missed · scheduled on a grey "remaining" track) + the legacy 4 figure
   tiles (calendar · thumbs-up · thumbs-down · hourglass). Modes: --full (bar + % + tiles on one
   row), --bar (bar only), --tiles (tiles only). Colours = the suite's status palette. ===== */
.wf-tpp { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.wf-tpp--full { flex-wrap: wrap; }
.wf-tpp-bar { display: flex; flex: 1 1 90px; min-width: 90px; height: 8px; border-radius: 50px; background: var(--lesson-track); overflow: hidden; }
.wf-tpp-seg { height: 100%; flex-shrink: 0; }
.wf-tpp-seg--done   { background: var(--lesson-done); }
.wf-tpp-seg--inprog { background: repeating-linear-gradient(45deg, var(--lesson-done) 0 4px, var(--lesson-inprogress) 4px 8px); }
.wf-tpp-seg--missed { background: var(--lesson-missed); }
.wf-tpp-seg--sched  { background: var(--lesson-scheduled); }
.wf-tpp-pct { font-size: .68rem; font-weight: 700; color: var(--text-gray); min-width: 2.4em; text-align: right; }
/* the group's rounding is carried by the END TILES themselves — a border-radius +
   overflow:hidden on the wrapper clips the children's 1px coloured border square,
   which shows up as a missing corner on the first/last segment. */
.wf-tpp-tiles { display: inline-flex; flex-shrink: 0; }
.wf-tpp-tile {
    display: inline-flex; align-items: center; gap: .3rem; padding: 2px 7px; min-width: 52px; justify-content: center;
    font-size: .7rem; font-weight: 700; white-space: nowrap; background: #fff;
    border: 1px solid var(--tpp, #9aa0a6); color: var(--tpp, #9aa0a6); margin-left: -1px;
}
.wf-tpp-tile:first-child { margin-left: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.wf-tpp-tile:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.wf-tpp-tile i { font-size: .8em; opacity: .9; }
.wf-tpp-tile--sched  { --tpp: var(--lesson-scheduled-ink); }
.wf-tpp-tile--done   { --tpp: var(--lesson-done); }
.wf-tpp-tile--missed { --tpp: var(--lesson-missed); }
.wf-tpp-tile--rem    { --tpp: var(--lesson-remaining); }
.wf-tpp-tile--over   { --tpp: var(--lesson-missed); background: var(--lesson-missed); color: #fff; }

/* tp_view session card meta row (incl_tp_session_card): the language flag and the trainer thumb
   share ONE size so the row balances; the duration pill floats between them */
.wf-sc-flag  { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.wf-sc-thumb { width: 30px; height: 30px; object-fit: cover; }
.wf-sc-spacer { display: inline-block; width: 30px; height: 30px; }
/* pills sitting in that row (duration, level) match the flag/thumb height exactly */
.wf-sc-pill { height: 30px; display: inline-flex; align-items: center; padding: 0 .8rem; font-size: .78rem; }

/* ===== wf-pillbtn — THE homogeneous header action pill (user_view & entity headers).
   One geometry for every header action; per-pill accent via --wf-pill-accent.
   Usage: <a class="wf-pillbtn" style="--wf-pill-accent: var(--section-cs)">…</a> */
.wf-pillbtn { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem;
	border: none; border-radius: 50rem; font-size: .78rem; font-weight: 600; line-height: 1;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	background: color-mix(in srgb, var(--wf-pill-accent, #6B7280) 13%, #fff);
	color: var(--wf-pill-accent, #6B7280); transition: background .15s, transform .1s; }
.wf-pillbtn:hover { background: color-mix(in srgb, var(--wf-pill-accent, #6B7280) 24%, #fff);
	color: var(--wf-pill-accent, #6B7280); }
.wf-pillbtn:active { transform: scale(.97); }
.wf-pillbtn i { font-size: .82em; }
.wf-pillbtn--sm { padding: .3rem .7rem; font-size: .7rem; }
.wf-pillbtn .wf-pillbtn-count { font-weight: 700; }
/* selected pill (toggle/tab use, e.g. the log-modal tabs) — solid accent fill */
.wf-pillbtn.active { background: var(--wf-pill-accent, #6B7280); color: #fff; }
.wf-pillbtn.active:hover { background: color-mix(in srgb, var(--wf-pill-accent, #6B7280) 88%, #000); color: #fff; }
.wf-pillbtn.active .wf-pillbtn-count { background: rgba(255, 255, 255, .28); border-radius: 50rem; padding: 1px 7px; }

/* ===== wf-alert — the programme alerts NNL (no next lesson) · DORMANT (no next lesson and the last one is
   2+ months old), same palette as the lms2 twin. As a link it is a toggle filter: .is-on = a ring. ===== */
.wf-alert { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 50rem;
            font-size: .7rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.wf-alert--nnl     { background: #FCF0DC; color: #D98A16; }
.wf-alert--dormant { background: #FDE4E4; color: #D9304C; }
a.wf-alert { padding: .3rem .7rem; }
a.wf-alert:hover { filter: brightness(.97); }
a.wf-alert--nnl:hover { color: #D98A16; }
a.wf-alert--dormant:hover { color: #D9304C; }
.wf-alert.is-on { box-shadow: 0 0 0 2px currentColor inset; }
.wf-alert .wf-alert-n { font-weight: 600; opacity: .75; }

/* ===== wf-ready-switch — the 3-state teach-ready switch (trainer_view.cfm matrix).
   0 = NO (red) · 1 = OK (green) · 2 = SUS (amber, knob mid-track). One cell = one
   user_ready column; clicking cycles and saves. Ported from the lms .ready-switch,
   restyled on the WMS palette and made a real <button> (keyboard reachable). */
.wf-ready-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.wf-ready-switch { position: relative; display: inline-block; width: 38px; height: 20px; padding: 0;
	border: none; border-radius: 10px; cursor: pointer; vertical-align: middle;
	background: #E5E7EB; transition: background .18s; }
.wf-ready-switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .18s; }
.wf-ready-switch[data-val="0"] { background: #DC2626; }  /* NO = red, not grey (user call 2026-10-23) */
.wf-ready-switch[data-val="0"] .knob { left: 2px; }
.wf-ready-switch[data-val="2"] { background: #F59E0B; }
.wf-ready-switch[data-val="2"] .knob { left: 11px; }
.wf-ready-switch[data-val="1"] { background: #16A34A; }
.wf-ready-switch[data-val="1"] .knob { left: 20px; }
.wf-ready-switch:disabled { opacity: .55; cursor: progress; }
.wf-ready-switch:focus-visible { outline: 2px solid var(--wefit-pink); outline-offset: 2px; }
.wf-ready-label { font-size: .58rem; font-weight: 700; letter-spacing: .03em; color: #9AA0A6; }
.wf-ready-label[data-val="0"] { color: #B91C1C; }
.wf-ready-label[data-val="1"] { color: #16A34A; }
.wf-ready-label[data-val="2"] { color: #B45309; }

/* trainer_view rating stars (lms_rating averages + learner comments) */
.tv-stars { color: #F5B301; white-space: nowrap; letter-spacing: -1px; font-size: .72rem; }
.tv-stars .fa-regular { color: #DCDFE4; }

/* ---- WEEK AGENDA (time-grid calendar) — incl/incl_week_agenda.cfm ------------
   Time-axis sibling of the .wf-week day-bucket board. The column is GREY by
   default (= not available); availability windows are painted white ON TOP of it
   (.wf-ag-open). That is the positive-space version of the lms FullCalendar
   "inverse-background" trick — see the include's header. Everything inside a
   column is absolutely positioned in %, so the grid height is a single var. ---- */
.wf-ag-scroll { overflow-x: auto; padding-bottom: 6px; }
.wf-ag { display: grid; gap: 0 6px; min-width: 720px; align-items: start; }

.wf-ag-dh { text-align: center; line-height: 1.1; padding: 0 0 8px; }
.wf-ag-dh b {
    display: block; font-size: .74rem; color: var(--text-dark);
    text-transform: uppercase; letter-spacing: .03em;
}
.wf-ag-dh span { font-size: .66rem; color: var(--text-gray); }
.wf-ag-dh--today b { color: var(--ag-accent, var(--wefit-pink)); }
.wf-ag-dh--today span { color: var(--ag-accent, var(--wefit-pink)); font-weight: 600; }

.wf-ag-gutter { position: relative; height: var(--ag-h); }
.wf-ag-hh {
    position: absolute; right: 6px; transform: translateY(-50%);
    font-size: .6rem; color: var(--text-gray); white-space: nowrap;
}

.wf-ag-col {
    position: relative; height: var(--ag-h); overflow: hidden;
    background: #E7EAF0; border: 1px solid #DFE3EA; border-radius: 10px;
}
/* a closed day (holiday) keeps the grey but says so — hatched, not just empty */
.wf-ag-col--off {
    background: repeating-linear-gradient(135deg, #E2E6ED 0 6px, #D9DEE7 6px 12px);
}

.wf-ag-open { position: absolute; left: 0; right: 0; background: #fff; }

/* tinted bands (2026-09-28, agBands): what the booking engine cannot sell inside the white —
   the buffer kept around each lesson/blocker, and free scraps too short for one more lesson */
.wf-ag-band { position: absolute; left: 0; right: 0; pointer-events: auto; }
.wf-ag-band--buffer { background: repeating-linear-gradient(135deg, rgba(148,163,184,.20) 0 4px, rgba(148,163,184,.08) 4px 8px); }
.wf-ag-band--short  { background: rgba(245,158,11,.14); }
.wf-ag-line { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(120,132,150,.16); }
.wf-ag-ghost {
    position: absolute; left: 3px; right: 3px; pointer-events: none;
    border: 1px dashed rgba(44,62,80,.38); border-radius: 5px;
}
.wf-ag-now {
    position: absolute; left: 0; right: 0; border-top: 2px solid #EF4444; z-index: 4;
}
.wf-ag-now::before {
    content: ""; position: absolute; left: -1px; top: -4px;
    width: 6px; height: 6px; border-radius: 50%; background: #EF4444;
}

.wf-ag-ev {
    position: absolute; z-index: 3; overflow: hidden; text-decoration: none;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 2px 5px; border-radius: 6px; min-height: 14px;
    background: var(--ev, #6B7280); color: #fff;
    border-left: 3px solid rgba(0,0,0,.22);
    font-size: .72rem; line-height: 1.18; /* .62 → .72 (2026-10-10, user call "a bit taller font") */
}
.wf-ag-ev b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-ag-ev span { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.wf-ag-ev:hover { filter: brightness(1.08); color: #fff; }
a.wf-ag-ev { cursor: pointer; }
/* a blocker is not an event, it is a hole punched in the availability */
.wf-ag-ev--blocker {
    background: repeating-linear-gradient(135deg, #B9C0CC 0 5px, #A9B2C0 5px 10px);
    color: #2C3E50; border-left-color: #96A0B0;
}
.wf-ag-ev--dim { opacity: .48; }
.wf-ag-ev--dim b { text-decoration: line-through; }
/* booked OUTSIDE any availability window — the thing you open this page to find */
.wf-ag-ev--warn { box-shadow: 0 0 0 2px #EF4444, 0 0 0 4px rgba(239,68,68,.25); }

/* legend chips */
.wf-ag-lg { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .68rem; color: var(--text-gray); }
.wf-ag-lg i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.wf-ag-lg .lg-grey  { background: #E7EAF0; border: 1px solid #DFE3EA; }
.wf-ag-lg .lg-open  { background: #fff; border: 1px solid #DFE3EA; }
.wf-ag-lg .lg-ghost { background: transparent; border: 1px dashed rgba(44,62,80,.5); }
.wf-ag-lg .lg-block { background: repeating-linear-gradient(135deg, #B9C0CC 0 4px, #A9B2C0 4px 8px); }
.wf-ag-lg .lg-buffer { background: repeating-linear-gradient(135deg, rgba(148,163,184,.45) 0 3px, rgba(148,163,184,.15) 3px 6px); border: 1px solid #DFE3EA; }
.wf-ag-lg .lg-short { background: rgba(245,158,11,.28); border: 1px solid rgba(245,158,11,.35); }

/* ---- SCALE (js/wf_ag_scale.js): the sub-hour lattice the include always renders, revealed by
   data-ag-scale — 2 = half-hour labels + quarter lines, 3 = every quarter labelled. The column
   height animates with --ag-h; the chips, bands and now-line are in percent and just follow. ---- */
.wf-ag-col, .wf-ag-gutter { transition: height .2s ease; }
.wf-ag--noanim .wf-ag-col, .wf-ag--noanim .wf-ag-gutter { transition: none; }   /* the initial apply, never animated */
.wf-ag-line--h, .wf-ag-line--q, .wf-ag-hh--h, .wf-ag-hh--q { display: none; }
.wf-ag-line--h { border-top-color: rgba(120,132,150,.12); }
.wf-ag-line--q { border-top-color: rgba(120,132,150,.07); }
.wf-ag-hh--h, .wf-ag-hh--q { font-size: .54rem; opacity: .7; }
.wf-ag[data-ag-scale="2"] :is(.wf-ag-line--h, .wf-ag-line--q, .wf-ag-hh--h) { display: block; }
.wf-ag[data-ag-scale="3"] :is(.wf-ag-line--h, .wf-ag-line--q, .wf-ag-hh--h, .wf-ag-hh--q) { display: block; }
/* the − label + control */
.wf-ag-zoom { display: inline-flex; align-items: center; gap: .15rem; }
.wf-ag-zoom [data-ag-zoom="label"] { font-size: .66rem; font-weight: 600; color: var(--text-gray); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.wf-ag-zoom .disabled { opacity: .4; pointer-events: none; }


/* Entity-tab accordion (account_view ▸ Contacts and ▸ TM — same layout, two different tables).
   Three sections: active & attached / inactive / elsewhere in the group. Bootstrap's default
   accordion is too loud for a tab body, so: flat, no outer border, grey header, brand accent
   on the open one, and the table sits flush in the body. */
.wf-tabacc { --bs-accordion-border-color: #e9ecef; --bs-accordion-btn-focus-box-shadow: none; }
.wf-tabacc .accordion-item { border-left: 0; border-right: 0; background: transparent; }
.wf-tabacc .accordion-item:first-of-type { border-top: 0; }
.wf-tabacc .accordion-button { padding: .6rem .25rem; font-size: .84rem; background: transparent; box-shadow: none; }
.wf-tabacc .accordion-button:not(.collapsed) { color: var(--wefit-pink); background: transparent; }
.wf-tabacc .accordion-button:focus { box-shadow: none; }
.wf-tabacc .accordion-button::after { margin-left: .5rem; }
.wf-tabacc .accordion-body { padding: 0 0 .75rem; }

/* a KPI cell that is also a drill-down door (tmg_index à-lancer / lancer-à-date) */
.tmg-kpi-link { transition: background .15s ease; }
.tmg-kpi-link:hover { background: #F7F8FB; }

/* ---- modal_learners_to_launch — condensed worklist table.
       One font size for the whole table (the per-cell .small was fighting it) and tight
       rows, because this list is read 40 lines at a time; the shared User·Account pills
       (incl_entity_nav) are scaled down to match the row height. ---- */
.tlm-table { font-size: .76rem; }
.tlm-table > thead > tr > th { padding: .35rem .5rem; }
.tlm-table > tbody > tr > td { padding: .4rem .5rem; }
.tlm-table .badge { font-size: .58rem; }
.tlm-table .wf-pillbtn { padding: .26rem .7rem; font-size: .68rem; gap: .3rem; }

/* ---- availability workbench (js/wf_avail_edit.js over a .wf-ag grid) ----
   The grid is a reader by default; only .wf-ag--editing arms the surface, so a
   stray drag on the read-only calendar can never paint anything. ---- */
.wf-ag--editing .wf-ag-col { cursor: crosshair; }
/* the day HEADERS are a surface only while a day mode is on (.wf-ag--daymode, set by the engine
   from its dayModes option — Day off by default): in Open / Block they are inert */
.wf-ag--daymode .wf-ag-dh[data-ag-dayhead] { cursor: pointer; border-radius: 6px; }
.wf-ag--daymode .wf-ag-dh[data-ag-dayhead]:hover { background: rgba(0,0,0,.04); }
/* whole-day drag (click or slide across the headers): the heads under the pointer and their
   columns take the colour of the mode, like the time marquee does. touch-action:none keeps a
   finger drag from scrolling the grid sideways instead of selecting. */
.wf-ag--daymode .wf-ag-dh[data-ag-dayhead] { touch-action: none; user-select: none; }
/* TOUCH (2026-10-23, trainer on her phone: "only 15-minute slots"): on a touch screen a finger drag down a column
   is a PAGE SCROLL for the browser — pointercancel, no pointerup, the engine only ever saw taps (= one 15-min step).
   While a mode is armed (.wf-ag--editing) the columns own the touch, so the drag selects hours; in Read mode the
   grid scrolls as before — pick Read to scroll, a mode to draw. */
.wf-ag--editing .wf-ag-col { touch-action: none; user-select: none; -webkit-user-select: none; }
.wf-ag-dh--sel {
    background: color-mix(in srgb, var(--ag-accent, #1A1A1A) 16%, transparent) !important;
    box-shadow: inset 0 0 0 2px var(--ag-accent, var(--wefit-pink));
}
.wf-ag-col--sel::after {
    content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 10px;
    border: 2px dashed var(--ag-accent, var(--wefit-pink));
    background: color-mix(in srgb, var(--ag-accent, #1A1A1A) 14%, transparent);
}
.wf-ag--editing .wf-ag-ev { cursor: pointer; }
.wf-ag-sel {
    position: absolute; left: 2px; right: 2px; z-index: 6; pointer-events: none;
    border-radius: 6px; border: 2px dashed var(--ag-accent, var(--wefit-pink));
    background: color-mix(in srgb, var(--ag-accent, #1A1A1A) 16%, transparent);
    color: var(--text-dark); font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
/* the marquee (and the day selection) take the colour of what the current mode will write */
.wf-ag[data-ag-mode="open"]  :is(.wf-ag-sel, .wf-ag-dh--sel, .wf-ag-col--sel) { --ag-accent: #10B981; }
.wf-ag[data-ag-mode="close"] :is(.wf-ag-sel, .wf-ag-dh--sel, .wf-ag-col--sel) { --ag-accent: #6B7280; }
.wf-ag[data-ag-mode="block"] :is(.wf-ag-sel, .wf-ag-dh--sel, .wf-ag-col--sel) { --ag-accent: #B45309; }
.wf-ag[data-ag-mode="off"]   :is(.wf-ag-sel, .wf-ag-dh--sel, .wf-ag-col--sel) { --ag-accent: #EF4444; }

/* mode bar */
.wf-modebar { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.wf-modebar .wf-mode {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .35rem .8rem; border-radius: 50rem; border: 1px solid #e4e7ec;
    background: #fff; color: var(--text-dark); font-size: .74rem; font-weight: 600;
    line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s;
}
.wf-modebar .wf-mode:hover { background: #f7f8fb; }
.wf-modebar .wf-mode.active { color: #fff; border-color: transparent; background: var(--m, #1A1A1A); }
.wf-modebar .wf-mode i { font-size: .8em; }

/* ── Reporting Assistant · step-1 TM board (sales_reporting_wizard.cfm) ─────────────
   Account pills: attached = accent (sales), candidate = grey; both clickable — a click is a
   REAL rights change (user.user_account_right_id) + the month snapshot follows. */
.wf-accpill {
    display: inline-flex; align-items: center; gap: .3rem; margin: 0 .25rem .25rem 0;
    padding: .18rem .6rem; border-radius: 50rem; border: 1px solid #dfe2e6; background: #f1f3f5;
    color: #6c757d; font-size: .7rem; font-weight: 600; line-height: 1.2; cursor: pointer;
    user-select: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.wf-accpill:hover { border-color: #b9bec6; color: var(--text-dark); }
.wf-accpill.is-on { background: var(--wf-accpill-accent, var(--wefit-pink)); border-color: transparent; color: #fff; }
.wf-accpill.is-on:hover { background: color-mix(in srgb, var(--wf-accpill-accent, var(--wefit-pink)) 85%, #000); }
.wf-accpill.is-out { border-style: dashed; }           /* attached but outside the TM's group */
.wf-accpill.is-busy { opacity: .45; pointer-events: none; }
.wf-accpill .wf-accpill-n { font-weight: 400; opacity: .75; }
.wf-accpill.is-on .wf-accpill-n { opacity: .85; }
tr.wf-tmrow.is-set > td { background: color-mix(in srgb, var(--wefit-pink) 7%, #fff); }
tr.wf-tmrow.is-ignore > td { opacity: .45; filter: grayscale(1); }   /* ignore = THE ONE FLAG (2026-10-26): grey until the mode is changed */
tr.wf-tmrow.is-sent > td { background: color-mix(in srgb, #16A34A 8%, #fff); }
/* the account STATUS switch pill, printed after every attached account pill (Reporting Assistant board) */
.wf-astatus-wrap { margin: 0; vertical-align: middle; }
.wf-astatus { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1; padding: .3rem .5rem; border: 1px solid #dfe2e6; border-radius: 999px; background: #fff; color: #6c757d; cursor: pointer; }
.wf-astatus:hover { border-color: var(--wefit-pink); color: var(--wefit-pink); }
.wf-astatus.is-busy { opacity: .5; pointer-events: none; }
.wf-modesel { min-width: 118px; }
.wf-acccell { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }   /* one account per row (2026-10-26) */
.wf-accpills { display: flex; flex-direction: column; gap: .3rem; }
.wf-accrow { display: flex; align-items: center; gap: .35rem; }
.wf-accrow .wf-accpill { margin: 0; }
.wf-accpill--other { border-style: dashed; background: #fff; }
.wf-accpill--other::after { margin-left: .15rem; }
.wf-accother.is-empty { display: none !important; }   /* d-inline-block is !important too — nothing left to attach → no "Other 0" pill (user call 2026-10-26) */
.wf-accmenu { font-size: .78rem; min-width: 240px; max-height: 320px; overflow-y: auto; }
.wf-accmenu .dropdown-item { padding: .3rem .8rem; }


/* ---- Suite self-learning products (We Advance · Serious Game · Exam Prep) — TP card buttons + stats modal ---- */
.wf-prod-btn { --wf-prod: #6B7280; color: var(--wf-prod) !important; }
.wf-prod-btn:hover { background: color-mix(in srgb, var(--wf-prod) 14%, #fff) !important; border-color: color-mix(in srgb, var(--wf-prod) 40%, #fff) !important; }
.wf-el-corner { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; flex-shrink: 0; }
.wf-el-kpi { border: 1px solid #e6e8ec; border-radius: .7rem; padding: .6rem .8rem; background: #fff; min-width: 0; }
.wf-el-kpi .k { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; font-weight: 700; }
.wf-el-kpi .v { font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.wf-el-kpi .v small { font-size: .7rem; font-weight: 500; color: #6B7280; }
.wf-el-bar { height: 6px; border-radius: 4px; background: #eef0f3; overflow: hidden; min-width: 70px; }
.wf-el-bar > span { display: block; height: 100%; border-radius: 4px; }
.wf-el-tag { display: inline-block; font-size: .66rem; font-weight: 700; padding: .12rem .5rem; border-radius: 50px; text-transform: uppercase; letter-spacing: .04em; }

/* AVATAR DOOR (2026-09-07) — the identity-card avatar (incl_trainer_header / incl_learner_header) opens
   modal_user_photo. Camera badge bottom-right, revealed on hover (the learner header shows its ♂/♀
   badge there instead when a civility is set). */
.wf-ava-door { display: inline-block; cursor: pointer; }
.wf-ava-door .wf-ava-cam { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.18); opacity: .85; transition: opacity .15s, transform .15s; }
.wf-ava-door:hover .wf-ava-cam { opacity: 1; transform: scale(1.08); }
.wf-ava-door:hover img, .wf-ava-door:hover > div { filter: brightness(.96); }

/* ---- day picker with greyed / unpickable days (js/wf_datepick.js) ----
   consumers: modal_log.cfm (reminder + reschedule — weekends refused). The native input is
   hidden inside .wf-dp; the button is the face, the popover is body-level + position:fixed
   so a modal's overflow never clips it. Accent = --wf-dp-accent (falls back to the brand). */
.wf-dp { position: relative; min-width: 0; width: var(--wf-dp-w, auto); }
/* the face (2026-10-02): a typed/picked dd/mm/yyyy text box + the calendar button that opens the grid */
.wf-dp-face { display: flex; align-items: stretch; }
.wf-dp-face .wf-dp-txt { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; font-variant-numeric: tabular-nums; }
.wf-dp-face .wf-dp-txt.wf-dp-bad { border-color: #dc3545; color: #dc3545; }
.wf-dp-face .wf-dp-txt.is-invalid { border-color: #dc3545; }
.wf-dp-btn { flex: 0 0 auto; display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--bs-border-color, #dee2e6); border-left: 0; border-radius: 0 .375rem .375rem 0; background: #fff; color: var(--text-gray, #6b7280); cursor: pointer; }
.wf-dp-btn:hover { background: #f1f3f6; color: var(--text-dark, #1f2937); }
.wf-dp-btn .wf-dp-ico { font-size: .85em; }
.wf-dp-pop {
    position: fixed; z-index: 1080; width: 272px; background: #fff; border: 1px solid #e6e8ee; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20,24,40,.14); padding: 10px; font-size: .78rem; color: var(--text-dark, #1f2937);
}
.wf-dp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wf-dp-h b { font-size: .84rem; }
.wf-dp-nav { border: 0; background: #f1f3f6; border-radius: 8px; width: 28px; height: 26px; line-height: 1; font-size: 1rem; font-weight: 700; color: var(--text-dark, #1f2937); cursor: pointer; }
.wf-dp-nav:hover { background: #e6e8ee; }
.wf-dp-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wf-dp-d { text-align: center; color: var(--text-gray, #6b7280); font-weight: 700; font-size: .64rem; padding: 2px 0 4px; }
.wf-dp-c { border: 0; background: transparent; border-radius: 8px; padding: 6px 0; line-height: 1; font: inherit; color: inherit; cursor: pointer; }
.wf-dp-c:hover:not(:disabled) { background: #f1f3f6; }
.wf-dp-c.is-out { color: #b8bcc6; }
.wf-dp-c.is-today { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.wf-dp-c.is-sel { background: var(--wf-dp-accent, var(--wefit-pink)); color: #fff; }
/* weekend: the greyed pair — hatched + struck when unpickable (data-wf-noweekend) */
.wf-dp-d.wf-dp-we, .wf-dp-c.wf-dp-we { color: #9aa0a6; }
.wf-dp-c.is-off { cursor: not-allowed; color: #c4c8d0; background: repeating-linear-gradient(135deg, #f6f7f9 0 3px, #fff 3px 6px); }
.wf-dp-c.is-off.wf-dp-we { text-decoration: line-through; }
.wf-dp-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .7rem; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f3f6; }
.wf-dp-f a { font-weight: 700; text-decoration: none; color: var(--wf-dp-accent, var(--wefit-pink)); }
.wf-dp-f a.is-off { color: #c4c8d0; pointer-events: none; }
.wf-dp-hint { color: var(--text-gray, #6b7280); font-weight: 600; }

/* ============================================================
   CAPACITY BAR (incl/incl_capacity_bar.cfm, 2026-09-28) — the five-part split of a
   trainer's opened time: booked · buffer · blocked · lost · sellable
   ============================================================ */
.wf-capbar { display: inline-flex; flex-direction: column; gap: 3px; min-width: 190px; }
.wf-capbar--lg { display: flex; min-width: 0; }
.wf-capbar-track { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: #eef0f4; }
.wf-capbar--lg .wf-capbar-track { height: 24px; }
.wf-capbar-track i { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; overflow: hidden; }
.wf-capbar-track i + i { box-shadow: inset 1px 0 0 rgba(255,255,255,.6); }
/* the figure inside a segment */
.wf-capbar-track span { font-size: .6rem; font-weight: 700; color: #fff; font-style: normal; white-space: nowrap; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.wf-capbar--lg .wf-capbar-track span { font-size: .7rem; }
.wf-cap--blocked span, .wf-cap--lost span { color: #1f2937; text-shadow: none; }
.wf-cap--booked  { background: #10B981; }
.wf-cap--buffer  { background: #94A3B8; }
.wf-cap--blocked { background: repeating-linear-gradient(135deg, #A9B2C0 0 3px, #CBD2DC 3px 6px); }
.wf-cap--lost    { background: #FCD34D; }
.wf-cap--sell    { background: #3B82F6; }
.wf-capbar-txt { font-size: .68rem; line-height: 1.15; white-space: nowrap; }
.wf-capbar--lg .wf-capbar-txt { font-size: .8rem; }
.wf-capbar-lg { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .72rem; color: var(--text-gray); margin-top: 2px; }
.wf-capbar-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.wf-capbar-lg b { color: var(--text-dark); font-weight: 600; }

/* ── WESALES family (born VTIGER 2026-09-30, renamed 2026-10-07) — wesales_index.cfm, its list fragment (api/vtiger/vtiger_list.cfm) and the
   three detail modals (modal_vtiger_account / _contact / _potential). Accent = --section-wesales. ── */
.vt-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; line-height: 1.5; white-space: nowrap; color: #5b6573; background: #f1f3f5; }
.vt-pill--ok, .vt-pill--won { color: #047857; background: #D1FAE5; }
.vt-pill--lost { color: #B91C1C; background: #FEE2E2; }
.vt-pill--open { color: #B45309; background: #FEF3C7; }
.vt-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #9CA3AF; flex: 0 0 auto; } /* the WEFIT user's colour in the Owner cell (vtiger owner map, 2026-10-07) */
.vt-dot--won { background: #16A34A; } .vt-dot--lost { background: #DC2626; } .vt-dot--open { background: #F59E0B; } /* the vtiger stage kinds in the WS stage picker (2026-10-21) */
.vt-tabs .nav-link.active, .vt-tabs .nav-link.active:hover, .vt-tabs .nav-link.active:focus { background: var(--section-wesales); color: #fff; }   /* :hover / :focus too — incl_section_header's hover rule (grey) outranked the plain .active one and left a white-on-grey tab under the pointer (user report 2026-10-21) */
.vt-mpill { font-size: .7rem; padding: .16rem .68rem; line-height: 1.5; font-weight: 600; } /* the MANAGER pills of wesales_accounts.cfm = the Sales filter card's .sf-pill */
.vt-tabs .nav-link .badge { font-size: .62rem; }
.vt-table tbody tr[data-wf-modal]:hover td, #wf_modal tr[data-wf-modal]:hover td { background: color-mix(in srgb, var(--section-wesales) 7%, #fff); }
.vt-table thead th[data-vt-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.vt-table thead th[data-vt-sort]:hover { color: var(--text-dark); }
.vt-table thead th.vt-sorted { color: var(--section-wesales); }
.vt-table thead th.vt-sorted::after { content: "\25B2"; font-size: .6em; margin-left: .35em; }
.vt-table thead th.vt-sorted.vt-sorted--desc::after { content: "\25BC"; }
/* a merged header carries two sort labels (the Account · Registry column, 2026-10-20) */
.vt-table thead span[data-vt-sort] { cursor: pointer; user-select: none; }
.vt-table thead span[data-vt-sort]:hover { color: var(--text-dark); }
.vt-table thead span.vt-sorted { color: var(--section-wesales); }
.vt-table thead span.vt-sorted::after { content: "\25B2"; font-size: .6em; margin-left: .35em; }
.vt-table thead span.vt-sorted.vt-sorted--desc::after { content: "\25BC"; }
.vt-loading { opacity: .45; pointer-events: none; transition: opacity .12s ease; }
.vt-kv { height: 100%; padding: 6px 10px; border: 1px solid #eef0f2; border-radius: 8px; background: #fff; }
.vt-k { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a939c; }
.vt-v { font-size: .85rem; color: var(--text-dark); overflow-wrap: anywhere; }
.vt-v--multi { white-space: pre-wrap; overflow-wrap: anywhere; }
.vt-clip { max-height: 3.2em; overflow: hidden; }
.vt-comment { padding: 8px 10px; border: 1px solid #eef0f2; border-radius: 8px; background: #fff; font-size: .85rem; }
.vt-comment + .vt-comment { margin-top: 8px; }

/* ============================================================
   TEAM BIRTHDAY (2026-10-02) — incl/incl_birthday_card.cfm (the card under the topnav, printed only
   on a teammate's birthday) + the cake pill of the topnav. No library: canvas confetti + an SVG cake.
   Its palette is its own (warm, festive) — NOT the department accent: it reads the same in every world.
   ============================================================ */
.wf-bday {
    position: relative; overflow: hidden;
    border-radius: var(--card-radius);
    background: linear-gradient(115deg, #FFF7ED 0%, #FDF2F8 52%, #EFF6FF 100%);
    box-shadow: 0 8px 24px rgba(219, 39, 119, .08);
    animation: wf-bday-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.wf-bday__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.wf-bday__body { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; padding: 22px 56px 22px 28px; }
.wf-bday__pile { display: flex; flex: 0 0 auto; }
.wf-bday__ava {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 4px solid #fff; box-shadow: 0 6px 18px rgba(219, 39, 119, .22);
    animation: wf-bday-pop .6s .15s cubic-bezier(.2, 1.4, .4, 1) both;
}
.wf-bday__ava + .wf-bday__ava { margin-left: -22px; }
.wf-bday__ava--ini {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F472B6, #FB923C); color: #fff; font-weight: 700; font-size: 1.6rem; letter-spacing: .02em;
}
.wf-bday__text { flex: 1 1 auto; min-width: 0; }
.wf-bday__kicker { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #DB2777; }
.wf-bday__title { margin: 2px 0 4px; font-size: 1.45rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; }
.wf-bday__msg { margin: 0 0 8px; font-size: .92rem; color: #5b6472; max-width: 62ch; }
.wf-bday__sign { font-size: .78rem; color: #9aa3af; }
.wf-bday__sign i { color: #F472B6; }
.wf-bday__cake {
    flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; line-height: 0;
    animation: wf-bday-bob 3.2s ease-in-out infinite; transform-origin: 50% 100%;
}
.wf-bday__cake:hover { animation-duration: 1.1s; }
.wf-bday__cake:focus-visible, .wf-bday__close:focus-visible { outline: 2px solid #DB2777; outline-offset: 3px; border-radius: 12px; }
.wf-bday__close {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .8); color: #8A94A6; font-size: .8rem; transition: .2s;
}
.wf-bday__close:hover { background: #fff; color: var(--text-dark); }
/* the cake */
.wf-bday .bd-plate  { fill: #E5E7EB; }
.wf-bday .bd-tier1  { fill: #F9A8D4; }
.wf-bday .bd-tier2  { fill: #FBCFE8; }
.wf-bday .bd-icing, .wf-bday .bd-icing2 { fill: #fff; }
.wf-bday .bd-dot--a { fill: #38BDF8; }
.wf-bday .bd-dot--b { fill: #FBBF24; }
.wf-bday .bd-dot--c { fill: #A78BFA; }
.wf-bday .bd-flame  { fill: #FB923C; transform-box: fill-box; transform-origin: 50% 100%; animation: wf-bday-flame .9s ease-in-out infinite alternate; }
.wf-bday .bd-flame--2 { animation-delay: .25s; }
.wf-bday .bd-flame--3 { animation-delay: .5s; }
/* the pill that brings a closed card back */
.action-btn.wf-bday-pill { color: #DB2777; animation: wf-bday-bob 3.2s ease-in-out infinite; }
.action-btn.wf-bday-pill:hover { color: #BE185D; }
@keyframes wf-bday-in    { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes wf-bday-pop   { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes wf-bday-bob   { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg) translateY(-2px); } }
@keyframes wf-bday-flame { from { transform: scale(1, 1) skewX(-4deg); opacity: .95; } to { transform: scale(.82, 1.18) skewX(5deg); opacity: 1; fill: #FBBF24; } }
@media (max-width: 767.98px) {
    .wf-bday__body { flex-wrap: wrap; gap: 14px; padding: 18px 44px 18px 18px; }
    .wf-bday__ava { width: 64px; height: 64px; }
    .wf-bday__title { font-size: 1.15rem; }
    .wf-bday__cake { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wf-bday, .wf-bday__ava, .wf-bday__cake, .wf-bday .bd-flame, .action-btn.wf-bday-pill { animation: none; }
}

/* ---- TRAINER FACEPILE (.tmg-pile / .tmg-ava) — moved from tmg_index.cfm 2026-10-02: the Teach-ready map and the
   Trainers column of tmg_group_manager.cfm. Initials sit under the photo, so a missing file reads as initials. ---- */
/* overlapping 30px circles, wrapping; hover lifts the one you point at */
.tmg-pile { display: flex; flex-wrap: wrap; align-items: center; padding-left: 8px; row-gap: 4px; min-width: 0; }
.tmg-ava { position: relative; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
           display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; text-decoration: none;
           background: #e9ecef; color: #495057; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); transition: transform .12s, z-index 0s; }
.tmg-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tmg-ava:hover { transform: translateY(-3px) scale(1.25); z-index: 5; }
.tmg-ava--none { border-style: dashed; border-color: #cfd4da; box-shadow: none; opacity: .75; }
.tmg-ava--more { background: #f1f3f5; color: #6c757d; font-size: .58rem; }
.tmg-pile--sm .tmg-ava { width: 26px; height: 26px; font-size: .56rem; }
.tmg-pile--sm { flex-wrap: nowrap; }

/* Sticky action columns of a wide .table-responsive list (incl_order_table.cfm, 2026-10-06): on a narrow
   screen the row overflowed and the trash / envelope cells scrolled out of sight (the Mac overlay scrollbar
   gives no hint). The two last columns stay pinned to the right edge of the scroll box; th keeps the
   header grey, td paints white so the scrolled cells pass underneath. r2 = the second-to-last column. */
.custom-table .wf-stick-r1, .custom-table .wf-stick-r2 { position: sticky; z-index: 1; }
.custom-table .wf-stick-r1 { right: 0; }
.custom-table .wf-stick-r2 { right: 36px; }
.custom-table thead th.wf-stick-r1, .custom-table thead th.wf-stick-r2 { background: #E9ECEF; }
.custom-table tbody td.wf-stick-r1, .custom-table tbody td.wf-stick-r2 { background: #fff; }
.custom-table tbody td.wf-stick-r2 { box-shadow: -6px 0 6px -6px rgba(0,0,0,.12); }

/* ── click-to-call (incl/incl_tel.cfm → Ringover tel: links, 2026-10-08) ── */
.wf-tel { color: inherit; text-decoration: none; white-space: nowrap; border-bottom: 1px dotted #9CA3AF; }
.wf-tel i { font-size: .72em; color: #16A34A; margin-right: .15rem; }
.wf-tel:hover { color: #16A34A; border-bottom-color: #16A34A; }

/* ── task board, LIST view (2026-10-09): the four buckets overdue · today · this week · later, same cells as the week grid ── */
.wf-week--list .wf-col { min-height: 180px; }
.wf-week--list .wf-col-h { text-align: left; }
.wf-week--list .wf-col--late .wf-col-h b { color: #dc2626; }
.wf-week--list .wf-col--late { border-top: 3px solid #fca5a5; }
.wf-week--list .wf-col--today { border-top: 3px solid var(--tkaccent, var(--wefit-pink)); }
.wf-week--list .wf-tk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   CONVERSATIONS inbox — cs_conversation.cfm (POC 2026-10-11, the in-house support chat).
   Three panes: list · thread · requester card. The topnav badge (.wf-conv-badge) rides the action button.
   ============================================================ */
/* the floating bubble (incl/incl_conv_bubble.cfm): a door to the inbox, the pill = threads to treat */
.wf-conv-fab { position: fixed; right: 24px; bottom: 24px; z-index: 1030; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	background: var(--section-cs); color: #fff; font-size: 22px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .15s; }
.wf-conv-fab:hover { transform: scale(1.07); color: #fff; }
.wf-conv-fab-pill { position: absolute; top: -6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; color: #fff;
	font-size: .74rem; font-weight: 800; line-height: 24px; text-align: center; border: 2px solid #fff; }
.wf-conv-fab-pill--todo { right: -6px; background: #e11d48; }            /* waiting for the team */
.wf-conv-fab-pill--open { left: -6px; background: #4b5563; }             /* every active thread (not closed) */
.wf-conv-fab.has-todo .wf-conv-fab-pill--todo { animation: wf-conv-pulse 1.6s ease-in-out infinite; }
@keyframes wf-conv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.55); } 50% { box-shadow: 0 0 0 8px rgba(225,29,72,0); } }
@media (max-width: 575.98px) { .wf-conv-fab { right: 12px; bottom: 12px; } }
.wf-cv { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 1rem; height: calc(100vh - 230px); min-height: 560px; }
.wf-cv-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wf-cv-filters { padding: .75rem .9rem .5rem; border-bottom: 1px solid #eef0f3; display: flex; flex-direction: column; gap: .4rem; }
.wf-cv-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
/* the queue SWITCH — the calendar's .wf-wknav-view idiom (Week | Month), stretched to the card width */
.wf-cv-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin-bottom: .25rem; background: #f1f3f6; border-radius: 10px; }
.wf-cv-switch button { border: 0; background: transparent; padding: .45rem .6rem; border-radius: 8px; font-size: .8rem; font-weight: 700; line-height: 1.4; color: var(--text-gray, #6b7280);
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; transition: background .12s, color .12s; }
.wf-cv-switch button:hover { color: var(--text-dark, #1f2937); }
.wf-cv-switch button.is-on { background: #fff; color: var(--cvsw, var(--section-cs)); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wf-cv-switch button b { font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e5e7eb; color: #4b5563; font-size: .7rem; line-height: 20px; }
.wf-cv-switch button.is-on b { background: var(--cvsw, var(--section-cs)); color: #fff; }
.wf-cv-chips .wf-pillbtn { padding: .3rem .7rem; font-size: .72rem; }
.wf-cv-chips .wf-pillbtn b { font-weight: 800; margin-left: .15rem; }
.wf-cv-chips .wf-pillbtn.is-on, .wf-cv-status .wf-pillbtn.is-on, #cv_notebtn.is-on { background: var(--wf-pill-accent, #6B7280); color: #fff; }
/* balanced lens rows: equal columns over the card width, ONE colour per row (--cvrow), the figure in a small pill */
.wf-cv-chips--row { display: flex; flex-wrap: wrap; gap: .3rem; }   /* flex + wrap: a fifth chip (Closed) wraps instead of being clipped off the pane (2026-10-13) */
.wf-cv-chips--row .wf-pillbtn { flex: 1 1 auto; }
.wf-cv-chips--row .wf-pillbtn { --wf-pill-accent: var(--cvrow, #6B7280); justify-content: center; white-space: nowrap; font-size: .72rem; padding: .28rem .55rem; }
.wf-cv-chips--row .wf-pillbtn b { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; line-height: 16px; font-size: .64rem; text-align: center;
	background: color-mix(in srgb, var(--cvrow, #6B7280) 18%, #fff); color: var(--cvrow, #6B7280); margin-left: 0; }
.wf-cv-chips--row .wf-pillbtn.is-on b { background: rgba(255,255,255,.25); color: #fff; }
.wf-cv-search { position: relative; display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
.wf-cv-search > i { position: absolute; left: .6rem; color: #9ca3af; font-size: .75rem; }
.wf-cv-search input { padding-left: 1.8rem; border-radius: 999px; }
.wf-cv-online { flex: 0 0 auto; font-size: .7rem; font-weight: 700; color: #9ca3af; white-space: nowrap; }
.wf-cv-online::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; margin-right: 4px; }
.wf-cv-online.is-on { color: #166534; } .wf-cv-online.is-on::before { background: #22c55e; }
.wf-cv-list { flex: 1 1 auto; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.wf-cv-item { display: block; padding: .6rem .75rem; border-radius: 12px; border: 1px solid #eef0f3; background: #fff; color: #1f2937; text-decoration: none; transition: border-color .12s, background .12s; }
.wf-cv-item:hover { border-color: #cbd5e1; color: #1f2937; }
.wf-cv-item.is-cur { border-color: var(--section-cs); background: color-mix(in srgb, var(--section-cs) 7%, #fff); }
.wf-cv-item.is-unread { border-left: 4px solid var(--section-cs); }
.wf-cv-item.is-closed { opacity: .65; }
.wf-cv-item-l1 { display: flex; align-items: center; gap: .4rem; font-size: .72rem; min-width: 0; }
.wf-cv-online-wrap { position: relative; display: inline-block; }
.wf-cv-online { cursor: pointer; }
.wf-cv-onl-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: .4rem .3rem; background: #fff; border: 1px solid #eef0f3; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 6; font-size: .8rem; text-align: left; white-space: nowrap; }
.wf-cv-onl-row { display: flex; align-items: center; gap: .45rem; padding: .25rem .5rem; }
.wf-cv-onl-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; }
.wf-cv-flag { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.wf-cv-hid-name .wf-cv-flag { width: 20px; height: 20px; vertical-align: -4px; }
.wf-cv-who { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-cv-acc { color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-cv-time { margin-left: auto; color: #9ca3af; flex: 0 0 auto; }
.wf-cv-q { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: .58rem; font-weight: 900; letter-spacing: .04em; color: #fff; }
.wf-cv-q--tmg { background: #06B6D4; } .wf-cv-q--cs { background: #F59E0B; }
.wf-cv-subj { font-weight: 700; font-size: .85rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-cv-prev { font-size: .76rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-cv-prev i { color: var(--section-cs); font-size: .66rem; }
.wf-cv-item-l3 { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .7rem; color: #6b7280; }
.wf-cv-asg.is-pool { color: #dc2626; font-weight: 700; }
.wf-cv-unread { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--section-cs); color: #fff; font-weight: 800; font-size: .7rem; line-height: 20px; text-align: center; }
.wf-cv-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 700; line-height: 1.4; }
.wf-cv-st--unread { background: #fee2e2; color: #991b1b; } .wf-cv-st--open { background: #fef3c7; color: #92400e; } .wf-cv-st--waiting_user { background: #dcfce7; color: #166534; } .wf-cv-st--closed { background: #e5e7eb; color: #4b5563; }
.wf-cv-empty { text-align: center; color: #9ca3af; padding: 2rem 1rem; font-size: .85rem; }
.wf-cv-empty i { display: block; font-size: 1.6rem; margin-bottom: .4rem; }
.wf-cv-placeholder { flex: 1 1 auto; display: none; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; text-align: center; padding: 2rem; }
.wf-cv-placeholder i { font-size: 2.4rem; margin-bottom: .6rem; opacity: .6; }
.wf-cv-pane--thread.is-empty .wf-cv-placeholder { display: flex; }
.wf-cv-pane--thread.is-empty .wf-cv-th { display: none; }
.wf-cv-pane--ctx .wf-cv-placeholder--sm { display: flex; }
.wf-cv-pane--ctx .wf-cv-placeholder--sm i { font-size: 1.8rem; }
.wf-cv-th { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wf-cv-th-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid #eef0f3; align-items: start; }
/* the requester's ID card as the thread header */
.wf-cv-hid { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.wf-cv-hid-wait { color: #9ca3af; padding: .5rem; }
.wf-cv-hid-row { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.wf-cv-hid-row img, .wf-cv-hid-row .wf-cv-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.wf-cv-hid-txt { min-width: 0; }
.wf-cv-hid-name { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.wf-cv-hid-name a, .wf-cv-hid-sub a { color: inherit; text-decoration: none; }
.wf-cv-hid-name a:hover, .wf-cv-hid-sub a:hover { color: var(--wefit-pink, #D9004C); }
.wf-cv-hid-sub { color: #6b7280; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-cv-hid-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.wf-cv-hid-tps { display: flex; flex-wrap: wrap; gap: .3rem; }
.wf-cv-hid-tps .wf-cv-chip { background: #eef2ff; color: #3730a3; }
.wf-cv-th-who { font-weight: 800; font-size: 1rem; }
.wf-cv-th-subj { text-align: center; font-weight: 800; font-size: .95rem; color: #111827; padding: .8rem 1rem 0; }
.wf-cv-th-subj:empty { display: none; }
.wf-cv-chip { display: inline-flex; align-items: center; gap: .3rem; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: .66rem; font-weight: 600; text-decoration: none; }
.wf-cv-chip:hover { background: #e5e7eb; color: #111; }
.wf-cv-th-act { display: flex; flex-direction: column; gap: .45rem; flex: 0 0 auto; }
.wf-cv-act-row { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.wf-cv-act-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin-right: .3rem; }
.wf-cv-assign-btn { min-width: 150px; justify-content: space-between; }
.wf-cv-caret { font-size: .6rem; opacity: .7; margin-left: .2rem; }
.wf-cv-menu { border: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(17, 24, 39, .14); padding: .35rem; font-size: .8rem; min-width: 200px; }
.wf-cv-menu .dropdown-item { border-radius: 8px; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; }
.wf-cv-menu .dropdown-item.active, .wf-cv-menu .dropdown-item:active { background: rgba(124, 58, 237, .12); color: #4C1D95; }
.wf-cv-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.wf-cv-status { display: flex; gap: .3rem; }
.wf-cv-status .wf-pillbtn { --wf-pill-accent: #6B7280; }
.wf-cv-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.wf-cv-title-txt { margin: 0; font-weight: 900; letter-spacing: .04em; color: #111827; }
.wf-cv-title-txt i { color: var(--wefit-pink, #D9004C); margin-right: .35rem; }
.wf-cv-bell { border: 0; background: #fff1f5; color: var(--wefit-pink, #D9004C); height: 32px; padding: 0 .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.wf-cv-bell:hover { background: #ffe4ec; }
.wf-cv-bell.is-off { background: #f3f4f6; color: #9ca3af; }
/* the title strip of figures (2026-10-19): messages sent today / this week / this month — the whole strip is a door to stats_wechat.cfm */
.wf-cv-stats { display: inline-flex; align-items: center; gap: 1.1rem; margin-left: auto; margin-right: .25rem; padding: .25rem .9rem; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; text-decoration: none; color: inherit; }
.wf-cv-stats:hover { border-color: #c7cbd1; color: inherit; }
.wf-cv-stat { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.wf-cv-stat small { font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; font-weight: 700; white-space: nowrap; }
.wf-cv-stat b { font-size: 1rem; font-weight: 800; color: #111827; }
.wf-cv-stat-more { font-size: .72rem; font-weight: 700; color: var(--wefit-pink, #D9004C); white-space: nowrap; }
.wf-cv-stats:hover .wf-cv-stat-more { text-decoration: underline; }
@media (max-width: 767.98px) { .wf-cv-stats { display: none; } }
.wf-cv-msgs { flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: #f7f8fa; display: flex; flex-direction: column; gap: .5rem; }
.wf-cv-day { text-align: center; font-size: .66rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin: .4rem 0 .1rem; }
.wf-cv-row { display: flex; }
.wf-cv-row--user { justify-content: flex-start; } .wf-cv-row--staff { justify-content: flex-end; }
.wf-cv-shot { display: block; max-width: 100%; max-height: 300px; border-radius: 8px; margin: 2px 0; }
.wf-cv-bubble { max-width: 78%; padding: .55rem .8rem; border-radius: 14px; font-size: .86rem; line-height: 1.45; word-wrap: break-word; }
.wf-cv-row--user .wf-cv-bubble { background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; }
.wf-cv-row--staff .wf-cv-bubble { background: var(--section-cs); color: #fff; border-bottom-right-radius: 4px; }
.wf-cv-row--staff .wf-cv-bubble a { color: #fff; text-decoration: underline; }
.wf-cv-meta { font-size: .64rem; opacity: .72; margin-top: .2rem; }
.wf-cv-sys { font-size: .78rem; color: #4b5563; background: #fff; border: 1px dashed #d1d5db; border-radius: 10px; padding: .5rem .7rem; }
.wf-cv-sys i { color: #6366f1; }
.wf-cv-note { background: #fef3c7; border: 1px solid #fde68a; color: #78350f; border-radius: 10px; padding: .5rem .7rem; font-size: .8rem; max-width: 85%; align-self: flex-end; }
.wf-cv-note-h { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
/* edit my own message (2026-10-14): a pencil in the meta line, shown on hover; the corrected message says so; the composer wears an amber strip while editing */
.wf-cv-editbtn { background: none; border: 0; padding: 0 .15rem; margin-left: .25rem; font-size: .7rem; color: inherit; opacity: 0; cursor: pointer; transition: opacity .15s; vertical-align: baseline; }
.wf-cv-row:hover .wf-cv-editbtn, .wf-cv-note:hover .wf-cv-editbtn, .wf-cv-editbtn:focus { opacity: .85; }
.wf-cv-editbtn:hover { opacity: 1; text-decoration: underline; }
.wf-cv-edited { font-style: italic; opacity: .8; }
.wf-cv-delbtn:hover { color: #DC2626; text-decoration: none; }   /* delete my own message (2026-10-20): the trash next to the pencil, red on hover */
.wf-cv-row.is-editing .wf-cv-bubble { outline: 2px solid #F59E0B; outline-offset: 2px; }
.wf-cv-note.is-editing { outline: 2px solid #F59E0B; outline-offset: 2px; }
.wf-cv-editing { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 8px; padding: .3rem .6rem; margin-bottom: .4rem; }
.wf-cv-editing-x { margin-left: auto; background: #fff; border: 1px solid #FDE68A; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #92400E; padding: .1rem .55rem; cursor: pointer; }
.wf-cv-editing-x:hover { background: #FDE68A; }
.wf-cv-compose.is-editing .wf-cv-sendbtn { background: #F59E0B; }
.wf-cv-compose { border-top: 1px solid #eef0f3; padding: .6rem .8rem .8rem; background: #fff; }
.wf-cv-compose.is-note { background: #fffbeb; }
.wf-cv-compose-tools { display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; flex-wrap: wrap; }
.wf-cv-canned { width: auto; min-width: 190px; border-radius: 999px; font-size: .74rem; }
.wf-cv-compose-row { position: relative; display: flex; align-items: flex-end; gap: .5rem; }
.wf-cv-compose-row textarea { resize: none; border-radius: 12px; font-size: .88rem; max-height: 220px; }
.wf-cv-sendbtn { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--section-cs); color: #fff; font-size: 1rem; cursor: pointer; }
.wf-cv-sendbtn:disabled { opacity: .5; }
.wf-cv-emobtn { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; font-size: 1.35rem; line-height: 1; padding: 0; cursor: pointer; filter: grayscale(1); opacity: .7; }
.wf-cv-emobtn:hover, .wf-cv-emobtn:focus-visible { filter: none; opacity: 1; outline: none; }
.wf-cv-emoji { position: absolute; right: 0; bottom: calc(100% + 6px); display: flex; flex-wrap: wrap; gap: 2px; width: 312px; max-width: 100%; padding: 6px; background: #fff; border: 1px solid #eef0f3; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 5; }
.wf-cv-emoji button { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; width: 36px; height: 36px; border-radius: 8px; padding: 0; cursor: pointer; }
.wf-cv-emoji button:hover, .wf-cv-emoji button:focus-visible { background: #f3f4f6; outline: none; }
#cv_suggest.is-busy i { animation: wf-cv-spin 1s linear infinite; }
@keyframes wf-cv-spin { to { transform: rotate(360deg); } }
.wf-cv-card { padding: 1rem; overflow-y: auto; font-size: .82rem; }
.wf-cv-card-id { display: flex; gap: .7rem; align-items: center; }
.wf-cv-card-id img, .wf-cv-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.wf-cv-ava { display: grid; place-items: center; background: #1e1b4b; color: #fff; font-weight: 800; font-size: 1.1rem; }
.wf-cv-card-name { font-weight: 800; font-size: .95rem; }
.wf-cv-card-sub { color: #6b7280; font-size: .76rem; word-break: break-word; }
.wf-cv-card-links { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0; }
.wf-cv-card-sec { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin: .8rem 0 .25rem; }
.wf-cv-tps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wf-cv-tps a { color: #1f2937; font-weight: 600; text-decoration: none; } .wf-cv-tps a:hover { color: var(--section-cs); }
.wf-cv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #111; color: #fff; font-size: .8rem; padding: .5rem 1rem; border-radius: 999px; z-index: 2000; }
.wf-cv-toast.is-err { background: #b91c1c; }
@media (max-width: 1399.98px) { .wf-cv { grid-template-columns: 400px minmax(0, 1fr); } .wf-cv-th-head { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .wf-cv { grid-template-columns: 1fr; height: auto; } .wf-cv-pane--list { max-height: 50vh; } .wf-cv-pane--thread { min-height: 60vh; } }

/* ── VTIGER account window — the condensed Opportunities / Tasks columns + the source tag (2026-10-12) ── */
.vt-cd-row { display:flex; align-items:center; gap:.5rem; padding:.4rem .25rem; border-bottom:1px solid #eef0f2; font-size:.8rem; cursor:pointer; }
.vt-cd-row:last-child { border-bottom:0; }
.vt-cd-row:hover { background:#fff; }
.vt-src { display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.1rem .4rem; border-radius:999px; white-space:nowrap; }
/* THE TWO SOURCES (2026-10-20, user call): a WEFIT item wears the WEFIT logo (purple pill), a vtiger item a grey "WS" pill */
/* the WEFIT pill = the wave MARK alone (wefit_mark_white.png, cropped from the stacked logo 2026-10-20, user call: "only the logo shape") */
.vt-src--wefit { background:var(--section-wesales, #7C3AED) url("https://lms2.wefitgroup.com/assets/img/logo/wefit_mark_white.png") center / auto 46% no-repeat; color:transparent; min-width:2.3rem; height:1.15rem; vertical-align:middle; overflow:hidden; text-indent:-999px; }
.vt-src--vtiger { background:#eef0f2; color:#777; }
.vt-subhead { display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:0 0 .5rem; }
[data-vt-sub] + [data-vt-sub] { margin-top:1.25rem; padding-top:1rem; border-top:1px dashed #e3e6ea; }
.vt-actbtn { border:0; background:none; color:#9CA3AF; padding:.1rem .35rem; }
.vt-actbtn:hover { color:#111827; }

/* ── modal_lesson — the When card's inline MOVE picker (2026-10-12, lms2 twin of .wf-mv-* / .wf-lm-chip, SYNC-WATCH):
   a scrollable day strip (free-start count under each day) → time chips → a confirm bar. Accent = the TP's (--mv-accent). ── */
.wf-mv { --mv-accent: var(--wefit-pink); }
.wf-lm-chip { min-width: 48px; padding: .3rem .6rem; border-radius: 50px; border: 1px solid #e6e8ec; background: #fff;
              font-size: .8rem; font-weight: 600; color: #111827; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
.wf-lm-chip:hover:not(:disabled) { border-color: var(--mv-accent); color: var(--mv-accent); }
.wf-lm-chip.is-current { background: var(--mv-accent); border-color: var(--mv-accent); color: #fff; cursor: default; }
.wf-lm-chip:disabled:not(.is-current) { background: #F6F7F9; color: #B0B5BD; text-decoration: line-through; cursor: not-allowed; }
.wf-lm-chip.is-pick { background: color-mix(in srgb, var(--mv-accent) 14%, #fff); border-color: var(--mv-accent); color: var(--mv-accent); }
.wf-mv-days { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; }
.wf-mv-day  { flex: 0 0 auto; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem .5rem;
              border: 1px solid #e6e8ec; border-radius: .75rem; background: #fff; font-size: .75rem; font-weight: 600; color: #111827; text-transform: capitalize; }
.wf-mv-day small { font-size: .68rem; font-weight: 700; color: var(--mv-accent); }
.wf-mv-day:hover:not(:disabled) { border-color: var(--mv-accent); }
.wf-mv-day.is-on { background: var(--mv-accent); border-color: var(--mv-accent); color: #fff; }
.wf-mv-day.is-on small { color: #fff; }
.wf-mv-day:disabled { background: #F6F7F9; color: #B0B5BD; cursor: not-allowed; }
.wf-mv-day:disabled small { color: #B0B5BD; }
.wf-mv-times { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem 0; max-height: 180px; overflow-y: auto; }
.wf-mv-nav { border: 1px solid #e6e8ec; background: #fff; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: #6b7280; }
.wf-mv-nav:hover:not(:disabled) { border-color: var(--mv-accent); color: var(--mv-accent); }
.wf-mv-nav:disabled { opacity: .4; cursor: not-allowed; }
.wf-mv-confirm:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .6rem .75rem; border-radius: .75rem;
                               background: color-mix(in srgb, var(--mv-accent) 8%, #fff); }
.wf-pillbtn .wf-pillbtn-count .vt-pillsep { opacity: .55; margin: 0 .15em; font-weight: 400; } /* WEFIT (bold) / vtiger on the WeSales list pills (2026-10-13) */
.wf-pillbtn .wf-pillbtn-count b { font-weight: 800; }

/* WeSales list — BATCH ACTIONS (2026-10-13): the tick column, the ticked row, a disabled pill button */
.vt-table .vt-chk { width: 34px; padding-right: 0; cursor: pointer; }
.vt-table .vt-chk .form-check-input { margin: 0; cursor: pointer; vertical-align: middle; }
.vt-table tr.vt-row-on > td:not(.wf-stick-r1) { background: color-mix(in srgb, var(--section-wesales) 7%, #fff); }
.wf-pillbtn:disabled { opacity: .45; cursor: default; pointer-events: none; }
/* WEFIT (bold) / vtiger count badge — the account window's tabs and condensed columns read like the list pills (2026-10-13) */
.vt-cnt { font-weight: 500; }
.vt-cnt b { font-weight: 800; }
.vt-cnt .vt-pillsep { opacity: .55; margin: 0 .15em; font-weight: 400; }
/* WeSales account window (2026-10-13): WEFIT items carry a subtle colour border, the vtiger ones are grey; wf-focus-flash = the row a click lands on */
.vt-cd-row--wefit, .vt-cd-row--vtiger { border: 1px solid #eceef1; border-left-width: 3px; border-radius: .5rem; padding: .4rem .55rem; margin-bottom: .3rem; }
.vt-cd-row--wefit:last-child, .vt-cd-row--vtiger:last-child { border-bottom: 1px solid #eceef1; }
.vt-cd-row--wefit { background: #fff; border-color: color-mix(in srgb, var(--cd-accent, #6B7280) 30%, #fff); border-left-color: var(--cd-accent, #6B7280); }
.vt-cd-row--wefit:last-child { border-bottom-color: color-mix(in srgb, var(--cd-accent, #6B7280) 30%, #fff); }
.vt-cd-row--wefit:hover { background: color-mix(in srgb, var(--cd-accent, #6B7280) 6%, #fff); }
.vt-cd-row--vtiger { background: transparent; border-left-color: #d5d9de; color: #8a9099; }
.vt-cd-row--vtiger .fw-semibold, .vt-cd-row--vtiger b { color: #6b7280; font-weight: 500 !important; }
.vt-cd-row--vtiger:hover { background: #f6f7f8; }
.custom-table tr.vt-tk-wefit > td:first-child { box-shadow: inset 3px 0 0 var(--section-cs); }
.custom-table tr.vt-tk-wefit > td { background: color-mix(in srgb, var(--section-cs) 5%, #fff); }
.custom-table tr.vt-tk-vtiger > td { color: #8a9099; }
.custom-table tr.vt-tk-vtiger > td .fw-semibold { color: #6b7280; font-weight: 500 !important; }
.custom-table tr.vt-tk-vtiger > td:first-child { box-shadow: inset 3px 0 0 #d5d9de; }
@keyframes wfFocusRing { 0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-cs) 60%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes wfFocusBg { 0%, 60% { background-color: color-mix(in srgb, var(--section-cs) 26%, #fff); } }
.wf-focus-flash:not(tr) { animation: wfFocusRing 2.6s ease-out 1; }
tr.wf-focus-flash > td { animation: wfFocusBg 2.6s ease-out 1; }
/* WeSales accounts list — the Registry cell on three short lines (2026-10-15): state pill · headcount · sector */
.vt-reg { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; line-height: 1.2; max-width: 11rem; }
.vt-reg .vt-pill { font-size: .62rem; padding: .05rem .45rem; }
.vt-reg-hc { font-size: .72rem; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.vt-reg-hc i { font-size: .8em; color: #9CA3AF; margin-right: .1rem; }
.vt-reg-sec { font-size: .7rem; color: #8a939c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* the registry answer on ONE line under the account name (2026-10-20) */
.vt-acc-cell { max-width: 22rem; line-height: 1.25; }
.vt-reg--line { flex-direction: row; align-items: center; gap: .4rem; max-width: 100%; margin-top: .15rem; min-width: 0; }
.vt-reg--line:empty { display: none; }
.vt-reg--line .vt-reg-sec { min-width: 0; flex: 1 1 auto; }
/* a counter pill with nothing behind it (0 / 0): greyed, still clickable — it is how the first one is added */
/* ONE grey for every empty pill (a grayscale filter turned the amber tint near-white and the purple one grey): the accent itself is
   replaced — !important beats the row's inline --wf-pill-accent */
.wf-pillbtn.vt-pill-zero { --wf-pill-accent: #9CA3AF !important; opacity: .75; }
.wf-pillbtn.vt-pill-zero:hover { opacity: 1; }
/* the NEW TAB · EYE pair of a WeSales list row (incl_vt_rowbtns.cfm, 2026-10-21) — the wf-pillbtn chrome, split in two */
.vt-rowbtns { display: inline-flex; vertical-align: middle; border-radius: 50rem; margin-left: .25rem;
	background: color-mix(in srgb, var(--wf-pill-accent, #6B7280) 13%, #fff); color: var(--wf-pill-accent, #6B7280); }
.vt-rowbtns .btn { padding: .3rem .6rem; font-size: .7rem; line-height: 1; border: none; border-radius: 0; background: transparent; color: inherit;
	box-shadow: inset -1px 0 0 color-mix(in srgb, currentColor 22%, transparent); }
.vt-rowbtns .btn:last-child { box-shadow: none; border-radius: 0 50rem 50rem 0; }
.vt-rowbtns .btn:first-child { border-radius: 50rem 0 0 50rem; }
.vt-rowbtns .btn:hover, .vt-rowbtns .btn:focus { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.vt-rowbtns .btn i { font-size: .82em; }
/* the ONE deal · company cell of the merged Opports list (2026-10-21): the name clamped on two lines, the company on one line under it, full text on hover */
.vt-table .vt-cell-name { max-width: 300px; }
.vt-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
/* the multi-checkbox filter of the WeSales lists (wesales_accounts.cfm [data-vt-fm], 2026-10-21): a form-select look on a dropdown button, the menu a list of ticks */
.vt-fmulti > .form-select { cursor: pointer; padding-right: 2rem; }
.vt-fmulti.vt-fmulti--set > .form-select { border-color: var(--section-wesales, #B45309); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--section-wesales, #B45309) 20%, transparent); }
.vt-fmulti .dropdown-menu { font-size: .8rem; min-width: 12rem; }
.vt-fmulti .dropdown-item { cursor: pointer; }
.vt-fmulti .dropdown-item:active { background: #f1f3f5; color: inherit; }
/* the Contacts dropdown of the WeSales accounts list (vtiger_list.cfm, 2026-10-22): pill · name (opens the window on the contact) · phone (Ringover) */
.vt-ctc-menu { font-size: .8rem; min-width: 18rem; max-width: 26rem; max-height: 20rem; overflow: auto; }
.vt-ctc { display: flex; align-items: center; gap: .5rem; padding: .3rem .85rem; white-space: nowrap; }
.vt-ctc + .vt-ctc { border-top: 1px solid #f1f3f5; }
.vt-ctc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; cursor: pointer; }
.vt-ctc-name:hover { color: var(--section-wesales, #B45309); }
.vt-ctc-tel { flex: 0 0 auto; font-size: .76rem; }
.vt-ctc-del { flex: 0 0 auto; color: #c0c4c9; font-size: .72rem; padding: .1rem .25rem; border-radius: .3rem; text-decoration: none; }
.vt-ctc-del:hover { color: #DC2626; background: #fee2e2; }
.vt-ctc--add { color: var(--section-wesales, #B45309); cursor: pointer; border-top: 1px solid #eceef1 !important; }
.vt-ctc--add .vt-ctc-name { font-weight: 600; }
.vt-ctc--add:hover { background: #f8f9fa; }
.vt-acc-sub .dropdown { vertical-align: middle; }
.vt-acc-sub .badge { font-size: .64rem; padding: .2em .55em; }
.vt-acc-cell .vt-probe { flex: 0 0 auto; font-size: .7rem; color: #9CA3AF; padding: .1rem .35rem; border-radius: 50rem; text-decoration: none; } /* the Probe wand next to the account name (2026-10-22) */
.vt-acc-cell .vt-probe:hover { color: var(--section-wesales, #B45309); background: color-mix(in srgb, var(--section-wesales, #B45309) 12%, #fff); }
.vt-table .vt-last-cell { max-width: 240px; line-height: 1.25; } /* Last activity: the date, the title under it (2026-10-22) */
/* the WeSales LISTS (2026-10-26): the chips of an account row (vtiger_list.cfm) and the manager's swatches (modal_wesales_lists.cfm) */
.vt-lchips { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; padding: .15rem .25rem; border-radius: 50rem; }
.vt-lchips:hover { background: #f1f3f5; }
.vt-lchips.dropdown-toggle::after { color: #9CA3AF; }
.vt-lchip { display: inline-block; font-size: .66rem; font-weight: 700; line-height: 1.2; padding: .18rem .5rem; border-radius: 50rem; white-space: nowrap; max-width: 8rem; overflow: hidden; text-overflow: ellipsis;
	background: color-mix(in srgb, var(--lc, #6B7280) 14%, #fff); color: var(--lc, #6B7280); }
.vt-lchip--more { background: #eef0f2; color: #555; }
.vt-lchip--none { background: transparent; color: #c0c4c9; font-size: .75rem; padding: .1rem .3rem; }
.vt-table .vt-lists-cell { max-width: 220px; }
.wl-swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: inline-block; cursor: pointer; border: 2px solid transparent; }
.wl-swatch.active { border-color: #111; box-shadow: 0 0 0 2px #fff inset; }
/* WeSales account cleaner — the compare window (2026-10-20): key / value table, section heads, the contact / item rows */
.vcc-kv th { width: 7.5rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #8a939c; font-weight: 700; border: 0; padding: .2rem .25rem .2rem 0; vertical-align: top; }
.vcc-kv td { font-size: .82rem; border: 0; padding: .2rem 0; }
.vcc-sub { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin: .4rem 0 .35rem; display: flex; align-items: center; gap: .35rem; }
.vcc-list { max-height: 15rem; overflow: auto; border: 1px solid #eceef1; border-radius: .5rem; background: #fff; }
.vcc-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem; border-bottom: 1px solid #f1f3f5; font-size: .8rem; }
.vcc-row:last-child { border-bottom: 0; }
.vcc-row--dim { opacity: .55; }

/* ---- THE ONE vtiger ACCOUNT WINDOW — accordion rows (modal_vtiger_account.cfm, 2026-10-20): a head line (source tag ·
       the item's title and figures · caret) and a body opened on click; ONE look whatever the source, the pill says which.
       A row is addressable (its id) — every list lands on one through ?go=&item=, .vta-it--here keeps it softly highlighted. ---- */
.vta-it { border:1px solid #eceef1; border-radius:.5rem; margin-bottom:.35rem; background:#fff; }   /* ONE look for both sources — the pill alone says which (user call 2026-10-20) */
.vta-it-head { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; font-size:.8rem; cursor:pointer; min-width:0; }
.vta-it-head:hover { background:#f3f5f7; }
.vta-caret { margin-left:auto; font-size:.65rem; color:#9aa1ab; transition:transform .2s; flex:0 0 auto; }
.vta-it-head[aria-expanded="true"] .vta-caret { transform:rotate(180deg); }
.vta-it-body { padding:.5rem .75rem .75rem; border-top:1px dashed #e9ecef; font-size:.8rem; }
.vta-it-body .wf-panel { margin-bottom:.5rem; }
.vta-it-body .wf-panel:last-child { margin-bottom:0; }
/* the Overview's four card titles = coloured pills, the former header pills' colours (user call 2026-10-20) */
.wf-panel-title .vta-cardpill { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .65rem; }
.wf-panel-title .vta-cardpill i { color:inherit; }
/* the group wears the card pill's colours (inline background / color on the group; the buttons inherit, hover darkens a touch) */
.wf-panel-title .vta-cardbtns { border-radius:999px; }
.wf-panel-title .vta-cardbtns .btn { padding:.15rem .55rem; font-size:.68rem; line-height:1.4; background:transparent; color:inherit; border-color:color-mix(in srgb, currentColor 25%, transparent); }
.wf-panel-title .vta-cardbtns .btn:first-child { border-radius:999px 0 0 999px; }
.wf-panel-title .vta-cardbtns .btn:last-child { border-radius:0 999px 999px 0; }
.wf-panel-title .vta-cardbtns .btn:hover { background:color-mix(in srgb, currentColor 12%, transparent); color:inherit; }
.wf-panel-title .vta-cardbtns .btn i { color:inherit; }
/* the "+ New …" buttons of the Contacts / Opports / Tasks tabs = the same chrome (the tab's pill colours inline) */
.vta-addbtn { border-radius:999px; border:1px solid color-mix(in srgb, currentColor 25%, transparent); font-size:.68rem; font-weight:600; padding:.15rem .6rem; line-height:1.4; }   /* the size of the cards' small + / list group (user call 2026-10-20) */
.vta-addbtn:hover, .vta-addbtn:focus { background-image:linear-gradient(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 12%, transparent)); color:inherit; border-color:color-mix(in srgb, currentColor 35%, transparent); }
/* the row a list LANDED on keeps a soft highlight (user call 2026-10-20: "keep the color highlight, not disappearing, less bold") */
.vta-it--here { border-color:color-mix(in srgb, var(--section-wesales) 45%, #fff); background:color-mix(in srgb, var(--section-wesales) 5%, #fff); box-shadow:0 0 0 2px color-mix(in srgb, var(--section-wesales) 14%, #fff); }
.vta-it--here > .vta-it-head:hover { background:color-mix(in srgb, var(--section-wesales) 9%, #fff); }
/* flex child allowed to shrink below its content (Bootstrap 5.3 has no such utility) — without it a long
   unbroken word (a URL in a task note) widens the column and pushes the row's action buttons out (2026-10-23) */
.min-w-0 { min-width:0 !important; }