/* ============================================================================
 * Dashboard widget chrome (issue 08) — the ONE card language for all ~20
 * dashboard widgets, per the SIGNED-OFF docs/prototypes/dashboard-editor/
 * WIDGET_CHROME_SPEC.md. Foundation only: this sheet lands once; widgets opt in
 * batch-by-batch in issues 09–12.
 *
 * Root class:  .f_dwc  (dashboard-widget-chrome). NOTE — the spec suggested
 * "f_dw2", but that class is ALREADY the DataWidget A2 redesign root (adrem.css,
 * .f_dw2 .card-header .card-label …). Both DataWidget and DashboardWidget are
 * Controls::Layout::Card, so reusing f_dw2 would cross-contaminate. This sheet
 * therefore scopes everything under the distinct root class .f_dwc.
 *
 * EVERYTHING here is scoped under .f_dwc (added only by DashboardWidget::
 * enableWidgetChrome()). A widget that has NOT opted in carries no .f_dwc and is
 * pixel-identical to today — nothing in this sheet can match it.
 *
 * Metronic 7, primary #6993FF. FontAwesome 5 icon names only. Light theme.
 * Braces on their own line to match dashboard-editor.css.
 * ========================================================================== */

/* -------------------------------- tokens ---------------------------------- */
/* Design tokens from the spec §5, as custom properties on the root class. All
   dwc-prefixed so they can't collide with the editor's inline hexes, the
   DataWidget f_dw2 skin, or Metronic. */
.f_dwc
{
    --dwc-surface: #ffffff;
    --dwc-ink: #181c32;
    --dwc-ink-2: #5e6278;
    --dwc-ink-3: #a1a5b7;
    --dwc-line: #eff2f5;
    --dwc-line-2: #e4e6ef;
    --dwc-primary: #6993ff;
    --dwc-primary-dark: #4a77e8;
    --dwc-primary-soft: #eef3ff;
    --dwc-success: #50cd89;
    --dwc-warning: #f6a609;
    --dwc-danger: #f1416c;
    --dwc-violet: #7239ea;
    --dwc-info: #22b8cf;
    --dwc-teal: #17a2a2;
    --dwc-radius: 14px; /* C direction: framed light-bordered cards */
    --dwc-radius-ico: 8px;
    --dwc-radius-tile: 10px;
    --dwc-shadow: 0 8px 30px rgba(24, 28, 50, .10);

    /* Anchor the absolute loading overlay to the widget root (see §loading). */
    position: relative;
}

/* ------------------------------ card shell -------------------------------- */
/* Prototype .w-card -> Card _card (.card.card-custom.gutter-b). Deterministic
   surface/border/radius; no overflow:hidden so a header dropdown (sort/queue
   picker) can still escape the card. */
.f_dwc > .card
{
    background: var(--dwc-surface);
    border: 1px solid var(--dwc-line-2);
    border-radius: var(--dwc-radius);
}

/* --------------------------- header anatomy (§1) -------------------------- */
/* Prototype .w-head -> Card _header (.card-header). ~54px, 1px divider, never
   scrolls (it is a sibling of the scrolling _body). */
.f_dwc .card-header
{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dwc-line);
}

/* _headerLabel (.card-title) holds the icon box + the title/subtitle column. */
.f_dwc .card-header .card-title
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Icon box (§1.1). Prototype .w-ico -> Card _iconContainer (.card-icon) > i.
   C direction: 20x20, transparent (no colored box), monochrome ink glyph;
   category colour moves to the small data accents via --cc. */
.f_dwc .card-icon
{
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 0;
    background: transparent !important; /* C: no colored box */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex: 0 0 auto;
}
.f_dwc .card-icon i
{
    font-size: 15px;
    /* C direction (§round-3): monochrome ink glyph, no colored box — the
       category color moves to the small data accents (via --cc). !important
       still needed to beat Metronic's ".card ... .card-icon i" (0,5,1). */
    color: var(--dwc-ink-3) !important;
    line-height: 1;
}

/* Per-category icon-box color (§5.1). The category class rides on the root
   alongside .f_dwc, so no access to the private icon container is needed. */
/* C direction: category color is NOT an icon-box fill — it is exposed as --cc
   on the root so the small data accents (stat-number underline, link icons,
   list-icon tint, open-door border) carry category identity. */
.f_dwc.dwc-cat-analytics { --cc: var(--dwc-violet); }
.f_dwc.dwc-cat-people { --cc: var(--dwc-primary); }
.f_dwc.dwc-cat-links { --cc: var(--dwc-primary-dark); }
.f_dwc.dwc-cat-calls { --cc: var(--dwc-success); }
.f_dwc.dwc-cat-queues { --cc: var(--dwc-warning); }
.f_dwc.dwc-cat-meetings { --cc: var(--dwc-info); }
.f_dwc.dwc-cat-phone { --cc: var(--dwc-primary); }
.f_dwc.dwc-cat-access { --cc: var(--dwc-danger); }
.f_dwc.dwc-cat-integrations { --cc: var(--dwc-teal); }
.f_dwc { --cc: var(--dwc-primary); } /* fallback accent */

/* Title (§1.2) + subtitle (§1.3). Prototype .w-title / .w-sub -> Card
   _titleContainer (.card-label h3) with a title <span> + a subtitle span
   (.card-subtitle; formerly a <small> — the custom tag crashed Wt's incremental
   createElement path, see Card::setSubTitle). */
/* Keep this selector more specific than Metronic's bundled card-header rules
   so the dashboard keeps a deliberate two-line title hierarchy. */
.f_dwc > .card.card-custom > .card-header .card-title .card-label
{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    flex-wrap: nowrap !important;
    gap: 2px;
    line-height: 1.2;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--dwc-ink);
}
.f_dwc > .card.card-custom > .card-header .card-title .card-label > span:first-child
{
    display: block;
    width: 100%;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f_dwc > .card.card-custom > .card-header .card-title .card-label small,
.f_dwc > .card.card-custom > .card-header .card-title .card-label .card-subtitle
{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-weight: 400;
    /* !important: the span now carries an inline font-size:80% (the <small> default
       look for non-chrome cards) — the chrome's fixed size must win over it. */
    font-size: 12px !important;
    line-height: 1.25;
    color: var(--dwc-ink-3);
    margin: 0 !important; /* Bootstrap .card-subtitle uses -1rem and overlaps the title. */
    padding-left: 0 !important; /* override the base setSubTitle() .pl-10 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header-right slot (§1.4). Prototype .w-hr -> Card _headerToolbar
   (.card-header > .card-toolbar). Empty in plain view; the widget's own
   controls (sort / queue picker / refresh / cog) sit here restyled. The child
   combinator targets the header toolbar ONLY, never the sibling _cardToolbar. */
.f_dwc .card-header > .card-toolbar
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
}

/* Compact header-right control button (sort / refresh / cog). Prototype .hr-btn. */
.f_dwc .dwc-hr-btn
{
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--dwc-line-2);
    background: var(--dwc-surface);
    color: var(--dwc-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
}
.f_dwc .dwc-hr-btn:hover
{
    border-color: var(--dwc-primary);
    color: var(--dwc-primary-dark);
    background: var(--dwc-primary-soft);
}

/* -------------------------------- body ------------------------------------ */
/* Prototype .w-body -> Card _body (.card-body). 12px padding; the body owns its
   own scroll when a height cap is set (inline max-height/overflow from the
   DashboardWidget ctor — untouched here). */
.f_dwc .card-body
{
    padding: 16px;
}

/* =========================================================================== *
 * Body renderers per KIND (§2). A widget tags its body/wrapper with a
 * .dwc-kind-* class for documentation/hooks; the tile/row classes below do the
 * actual layout. All optional — a batch widget uses only the kinds it needs.
 * =========================================================================== */

/* 2.1 chart -------------------------------------------------------------- */
.f_dwc .dwc-chart-legend
{
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--dwc-ink-2);
}
.f_dwc .dwc-chart-legend i
{
    font-size: 9px;
    margin-right: 4px;
}

/* 2.2 stat grid ---------------------------------------------------------- */
.f_dwc .dwc-stat-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
}
.f_dwc .dwc-stat-tile
{
    /* C: no gray tile — just number + label + a small accent underline. */
    background: transparent;
    border-radius: 0;
    padding: 0;
    /* Children are inline WText spans; stack them so the number, label, and
       delta chip sit on their own lines (else they render "139TOTAL CALLS"). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.f_dwc .dwc-stat-tile .dwc-n
{
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--dwc-ink);
}
/* small category-accent marker under the headline number (C signature) */
.f_dwc .dwc-stat-tile .dwc-n::after
{
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--cc);
    margin-top: 8px;
    opacity: .9;
}
.f_dwc .dwc-stat-tile .dwc-l
{
    font-size: 10.5px;
    color: var(--dwc-ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.f_dwc .dwc-stat-tile .dwc-d
{
    font-size: 10px;
    font-weight: 700;
    margin-top: 5px;
}
.f_dwc .dwc-stat-tile .dwc-d.up { color: var(--dwc-success); }
.f_dwc .dwc-stat-tile .dwc-d.down { color: var(--dwc-danger); }

/* Clickable KPI/link tile (ObjectItemsCounts) — class replaces inline cursor. */
.f_dwc .dwc-stat-tile.clickable,
.f_dwc .dwc-linktile.clickable
{
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease;
}
.f_dwc .dwc-stat-tile.clickable:hover,
.f_dwc .dwc-linktile.clickable:hover
{
    transform: translateY(-2px);
    box-shadow: var(--dwc-shadow);
}

/* 2.3 people list -------------------------------------------------------- */
.f_dwc .dwc-plist
{
    display: flex;
    flex-direction: column;
}
.f_dwc .dwc-prow
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--dwc-line);
}
.f_dwc .dwc-prow:last-child { border-bottom: 0; }
.f_dwc .dwc-pav
{
    position: relative;
    flex: 0 0 auto;
}
.f_dwc .dwc-dot
{
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--dwc-surface);
}
.f_dwc .dwc-dot.on { background: var(--dwc-success); }
.f_dwc .dwc-dot.busy { background: var(--dwc-danger); }
.f_dwc .dwc-dot.away { background: var(--dwc-warning); }
.f_dwc .dwc-dot.off { background: var(--dwc-ink-3); }
.f_dwc .dwc-pmeta
{
    flex: 1;
    min-width: 0;
}
.f_dwc .dwc-pmeta b
{
    font-size: 13px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dwc-ink);
}
.f_dwc .dwc-pmeta span
{
    font-size: 11px;
    color: var(--dwc-ink-3);
}
.f_dwc .dwc-pend
{
    font-size: 11px;
    font-weight: 700;
    color: var(--dwc-ink-2);
    flex: 0 0 auto;
}
.f_dwc .dwc-pend.talk { color: var(--dwc-success); }
/* span-2 "avatars-only rail" (§4.1). */
.f_dwc .dwc-rail-avatars
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 2.4 generic list ------------------------------------------------------- */
.f_dwc .dwc-glist
{
    display: flex;
    flex-direction: column;
}
.f_dwc .dwc-grow
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--dwc-line);
}
.f_dwc .dwc-grow:last-child { border-bottom: 0; }
.f_dwc .dwc-gico
{
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.f_dwc .dwc-gmeta
{
    flex: 1;
    min-width: 0;
}
.f_dwc .dwc-gmeta b
{
    font-size: 13px;
    display: block;
    color: var(--dwc-ink);
}
.f_dwc .dwc-gmeta span
{
    font-size: 11px;
    color: var(--dwc-ink-3);
}
.f_dwc .dwc-gbtn
{
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: var(--dwc-success);
    border: 0;
    border-radius: 7px;
    padding: 5px 10px;
    flex: 0 0 auto;
    cursor: pointer;
}
/* Quiet two-section caption (Active/Waiting, Logged-in/out) — restyled
   SelectorHeader, no heavy background. */
.f_dwc .dwc-state-cap
{
    font-size: 11px;
    font-weight: 700;
    color: var(--dwc-ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 2px;
}

/* Soft category tints for leading-icon tiles (§2.4) + generic accents. */
.f_dwc .dwc-soft-primary { background: var(--dwc-primary-soft); color: var(--dwc-primary); }
.f_dwc .dwc-soft-success { background: #e8fff3; color: var(--dwc-success); }
.f_dwc .dwc-soft-warning { background: #fff8dd; color: var(--dwc-warning); }
.f_dwc .dwc-soft-danger { background: #fff5f8; color: var(--dwc-danger); }
.f_dwc .dwc-soft-violet { background: #f4efff; color: var(--dwc-violet); }
.f_dwc .dwc-soft-info { background: #e7fbff; color: var(--dwc-info); }
.f_dwc .dwc-soft-teal { background: #e6f7f7; color: var(--dwc-teal); }

/* 2.5 link grid ---------------------------------------------------------- */
.f_dwc .dwc-linkgrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 9px;
}
.f_dwc .dwc-linktile
{
    /* C: no tile fill — accent icon + light number, framed card supplies chrome. */
    background: transparent;
    border-radius: 0;
    padding: 8px 4px;
    text-align: center;
}
.f_dwc .dwc-linktile i
{
    font-size: 17px;
    color: var(--cc);
}
.f_dwc .dwc-linktile .dwc-lt-n
{
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--dwc-ink);
}
.f_dwc .dwc-linktile .dwc-cap
{
    font-size: 11px;
    margin-top: 6px;
    color: var(--dwc-ink-2);
    font-weight: 600;
}

/* 2.6 dial pad ----------------------------------------------------------- */
.f_dwc .dwc-dial-wrap
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.f_dwc .dwc-dial-display
{
    width: 100%;
    max-width: 260px;
    background: transparent;
    border: 1px solid var(--dwc-line-2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    color: var(--dwc-ink);
    min-height: 42px;
}
.f_dwc .dwc-dial
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 260px;
}
.f_dwc .dwc-dk
{
    background: transparent;
    border: 1px solid var(--dwc-line-2);
    border-radius: 10px;
    text-align: center;
    padding: 11px 0;
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
}
.f_dwc .dwc-dk:hover { border-color: var(--dwc-primary); }
.f_dwc .dwc-dk small
{
    display: block;
    font-size: 8px;
    color: var(--dwc-ink-3);
    font-weight: 700;
    letter-spacing: .1em;
}
.f_dwc .dwc-dial-call
{
    width: 100%;
    max-width: 260px;
    background: var(--dwc-success);
    color: #ffffff;
    border: 0;
    border-radius: var(--dwc-radius-tile);
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.f_dwc .dwc-dial-chat-col
{
    border-left: 1px solid var(--dwc-line);
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 2.7 doors grid --------------------------------------------------------- */
.f_dwc .dwc-doorgrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 9px;
}
.f_dwc .dwc-door
{
    /* C: framed cell — 1px border, no fill. */
    background: transparent;
    border: 1px solid var(--dwc-line-2);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--dwc-ink);
}
.f_dwc .dwc-door.open { border-color: color-mix(in srgb, var(--dwc-success) 45%, transparent); }
.f_dwc .dwc-door i
{
    font-size: 20px;
    display: block;
    margin-bottom: 6px;
}
.f_dwc .dwc-door.open i { color: var(--dwc-success); }
.f_dwc .dwc-door.closed i { color: var(--dwc-ink-3); }
.f_dwc .dwc-door .dwc-unlock
{
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--dwc-primary-dark);
    border: 1px solid #d9e3ff;
    border-radius: 6px;
    padding: 3px 0;
    cursor: pointer;
}

/* =========================================================================== *
 * Empty states (§3.2). Muted icon + bold one-liner + optional faint sub-line.
 * Built by DashboardWidget::buildChromeEmptyState() from guitext keys.
 * =========================================================================== */
.f_dwc .dwc-empty
{
    text-align: center;
    color: var(--dwc-ink-3);
    padding: 26px 16px;
}
.f_dwc .dwc-empty-icon
{
    font-size: 30px;
    color: var(--dwc-line-2);
    display: block;
    margin-bottom: 10px;
}
.f_dwc .dwc-empty-line
{
    color: var(--dwc-ink-2);
    font-size: 13px;
    font-weight: 700;
    display: block;
}
.f_dwc .dwc-empty-sub
{
    font-size: 11.5px;
    display: block;
    margin-top: 2px;
}

/* =========================================================================== *
 * Loading (§3.1). The base showLoading()/hideLoading() hook is UNCHANGED; this
 * only restyles its look — and ONLY for opted-in widgets (scoped under .f_dwc),
 * so a non-opted widget keeps the exact grey overlay strip.
 * =========================================================================== */

/* Recolored, calmer overlay: full-card soft-white wash + a primary spinner,
   replacing the 70px grey strip. Display is still driven by .fieldLoadingContainerOpen. */
.f_dwc .f_dashboard_widget_loading_container
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    background-color: rgba(255, 255, 255, .72);
    color: var(--dwc-ink-2);
    font-size: 13px;
    font-weight: 600;
    flex-direction: column;
    gap: 10px;
}
.f_dwc .f_dashboard_widget_loading_container .fieldLoader
{
    border: 5px solid var(--dwc-line-2);
    border-top: 5px solid var(--dwc-primary);
    width: 26px;
    height: 26px;
    margin-right: 0;
}

/* Optional kind-matched in-body skeleton (built by buildChromeSkeleton()). List
   / people kinds reuse the existing f_selector_skeleton_* shimmer rows (see
   adrem_thomas.css); stat / links / doors get shimmer tiles below. */
.f_dwc .dwc-skel
{
    display: flex;
    flex-direction: column;
}
.f_dwc .dwc-skel.dwc-skel-tiles
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
}
.f_dwc .dwc-skel-tile
{
    height: 64px;
    border-radius: var(--dwc-radius-tile);
    background-color: #e4e6ef;
    background-image: linear-gradient(90deg, #e4e6ef 0%, #f1f2f6 50%, #e4e6ef 100%);
    background-size: 200% 100%;
    animation: f_skeleton_shimmer 1.4s ease-in-out infinite; /* keyframe from adrem_thomas.css */
}

/* =========================================================================== *
 * Ruling #6 (spec §10) — edit mode. The editor adds .dash-editor-editing on an
 * ancestor of the grid; while editing, the editor's avatar-stack + quick actions
 * own the header-right slot, so an opted-in widget's OWN header-right controls
 * step aside. View mode is untouched (no .dash-editor-editing ancestor).
 * =========================================================================== */
.dash-editor-editing .f_dwc .card-header > .card-toolbar
{
    display: none !important;
}

/* =========================================================================== *
 * Batch-1 amendment (2026-07-07, orchestrator central pass — spec §11.6).
 * Classes ratified by the batch-1 review; consumed by batch-1 fixer + later
 * batches. Everything scoped under .f_dwc as always.
 * =========================================================================== */

/* Legend swatch: give the empty <i> a real box so an inline background paints
   (fixes the invisible-dot trap for every chart widget, centrally). */
.f_dwc .dwc-chart-legend i
{
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Text-capable header-right pill (sibling of .dwc-hr-btn, which is icon-only).
   For date-range buttons, sort/filter pills, and similar compact text controls. */
.f_dwc .dwc-hr-pill
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    padding: 5px 10px;
    background: var(--dwc-primary);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.f_dwc .dwc-hr-pill:hover
{
    background: var(--dwc-primary-dark);
    color: #ffffff;
}

/* Link-card body: one-line muted description + primary CTA. */
.f_dwc .dwc-link-desc
{
    color: var(--dwc-ink-2);
    font-size: 13px;
    margin-bottom: 12px;
}

.f_dwc .dwc-cta
{
    background: var(--dwc-primary);
    border-color: var(--dwc-primary);
    color: #ffffff;
}

.f_dwc .dwc-cta:hover,
.f_dwc .dwc-cta:focus
{
    background: var(--dwc-primary-dark);
    border-color: var(--dwc-primary-dark);
    color: #ffffff;
}

/* Sparkline helper (sizing/visibility ONLY — real axis suppression is a chart
   config concern, logged as a follow-up). Compact chart shell for span 2. */
.f_dwc .dwc-sparkline
{
    height: 60px;
    overflow: hidden;
}

.f_dwc .dwc-sparkline .dwc-chart-legend
{
    display: none;
}

/* =========================================================================== *
 * Batch-2 amendment (2026-07-07, orchestrator central pass — spec §11.7).
 * Bridge rules: the shared Selector row DOM (spec §2.3/§2.4) — .f_dwc-scoped
 * so nothing outside the dashboard moves (ruling #2). Three batch-2 agents
 * independently confirmed the foundation lacked these.
 * =========================================================================== */

.f_dwc .selector-item
{
    background: transparent;
    border-bottom: 1px solid var(--dwc-line);
    min-height: 50px;
}

.f_dwc .selector-item:last-child
{
    border-bottom: 0;
}

.f_dwc .selector-item .symbol-label
{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 13px;
}

.f_dwc .selector-item .selector-item-title
{
    font-size: 13px;
    font-weight: 700;
    color: var(--dwc-ink);
}

.f_dwc .selector-item .selector-item-subtitle
{
    font-size: 11px;
    color: var(--dwc-ink-3);
}

/* dwc-state-cap on a SelectorHeader: the header ROOT wraps the row container
   (.items-container), so the caption's inherited text props must be reset on
   the rows or names render UPPERCASE (batch-2 review H1). With this reset,
   state-cap is safe to put on SelectorHeader roots (batch 3+). */
.f_dwc .dwc-state-cap .items-container
{
    text-transform: none;
    letter-spacing: normal;
}

/* =========================================================================== *
 * Queue Stats widget — C / framed-minimal body (mirrors docs/prototypes/
 * dashboard-widgets-modern/PROTOTYPE_queue_stats.html, variant C). Replaces the
 * embedded legacy CallQueueStats panels for THIS widget only. Everything scoped
 * under .f_dwc; queue accent (--cc) is the warning amber.
 * =========================================================================== */
.f_dwc .dwc-qs
{
    --cc: var(--dwc-warning); /* queue category accent */
}

/* ------------------------------- hero KPI strip -------------------------- */
.f_dwc .dwc-qs-kpis-wrap
{
    margin-bottom: 16px;
}

.f_dwc .dwc-qs-kpis-head
{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.f_dwc .dwc-qs-today-badge
{
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc);
    background: rgba(246, 166, 9, .12);
    border-radius: 6px;
    padding: 3px 8px;
}

.f_dwc .dwc-qs-kpis
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.f_dwc .dwc-qs-kpi
{
    display: flex;
    flex-direction: column;
    padding: 2px 0;
}

.f_dwc .dwc-qs-kpi-n
{
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--dwc-ink);
}

.f_dwc .dwc-qs-kpi-n::after
{
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--cc);
    margin-top: 8px;
    opacity: .9;
}

.f_dwc .dwc-qs-kpi-n.dwc-qs-hot
{
    color: var(--dwc-warning);
}

.f_dwc .dwc-qs-kpi-b .dwc-qs-kpi-n::after
{
    background: var(--dwc-primary);
}

.f_dwc .dwc-qs-kpi-g .dwc-qs-kpi-n
{
    color: var(--dwc-success);
}

.f_dwc .dwc-qs-kpi-g .dwc-qs-kpi-n::after
{
    background: var(--dwc-success);
}

.f_dwc .dwc-qs-kpi-r .dwc-qs-kpi-n::after
{
    background: var(--dwc-danger);
}

.f_dwc .dwc-qs-kpi-l
{
    font-size: 10px;
    color: var(--dwc-ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 6px;
}

.f_dwc .dwc-qs-kpi-sub
{
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dwc-success);
    margin-top: 3px;
}

/* Live-now marker on the two live KPIs (In Queue / Agents), so they read as
   "now" rather than being swept under the strip's "Today" badge. */
.f_dwc .dwc-qs-kpi-now
{
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border: 1px solid var(--dwc-line-2);
    border-radius: 6px;
    color: var(--dwc-ink-3);
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.4;
}

/* --------------------------- header-right live pill --------------------- */
.f_dwc .dwc-qs-live
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dwc-danger);
    margin-right: 8px;
}

.f_dwc .dwc-qs-live-dot
{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dwc-danger);
    animation: dwc-qs-pulse 1.4s infinite;
}

@keyframes dwc-qs-pulse
{
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* --------------------------- Queue Pressure gauge ----------------------- */
/* Live-only variant: waiting calls vs agents logged in, as a %. The accent
   (--dwc-qsp) is resolved from the state class set live in refreshLiveComposition. */
.f_dwc .dwc-qs-pressure
{
    border: 1px solid var(--dwc-line-2);
    border-radius: var(--dwc-radius-tile);
    background: var(--dwc-surface);
    padding: 14px 16px;
    margin-bottom: 14px;
    --dwc-qsp: var(--dwc-ink-3);
}
.f_dwc .dwc-qs-pressure.is-ok   { --dwc-qsp: #2ea56b; }
.f_dwc .dwc-qs-pressure.is-warn { --dwc-qsp: #e8a13a; }
.f_dwc .dwc-qs-pressure.is-hot  { --dwc-qsp: var(--dwc-danger); }

.f_dwc .dwc-qs-pressure-head
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.f_dwc .dwc-qs-pressure-title
{
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dwc-ink);
}
.f_dwc .dwc-qs-pressure-pct
{
    margin-left: auto;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--dwc-qsp);
    font-variant-numeric: tabular-nums;
}
.f_dwc .dwc-qs-pressure-track
{
    height: 10px;
    border-radius: 999px;
    background: var(--dwc-line);
    overflow: hidden;
}
.f_dwc .dwc-qs-pressure-fill
{
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--dwc-qsp);
    transition: width .4s ease;
}
.f_dwc .dwc-qs-pressure-sub
{
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--dwc-ink-3);
    font-variant-numeric: tabular-nums;
}

/* --------------------- Overview: live "In queue · now" block ------------ */
.f_dwc .dwc-qs-live-block
{
    border: 1px solid var(--dwc-line-2);
    border-radius: var(--dwc-radius-tile);
    padding: 10px 14px;
    margin-bottom: 16px;
    background: rgba(241, 65, 108, .03);
}

.f_dwc .dwc-qs-live-cap
{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dwc-danger);
    margin-bottom: 4px;
}

/* Live stat TILES (replaced the full-width label……value rows: at wide spans the
   eye had to trace across the whole widget to pair number with name). Number
   stacks over its label inside a small framed tile; the grid packs and wraps
   with the widget width so the pairs always read together. */
.f_dwc .dwc-qs-ltiles
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 8px;
    padding: 6px 0 2px;
}

.f_dwc .dwc-qs-ltile
{
    border: 1px solid var(--dwc-line-2);
    border-radius: 10px;
    background: var(--dwc-surface);
    padding: 9px 10px 8px;
    min-width: 0;
    text-align: center;
}

.f_dwc .dwc-qs-ltile-n
{
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dwc-ink);
    font-variant-numeric: tabular-nums;
}

.f_dwc .dwc-qs-ltile-l
{
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dwc-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Total-calls tile leads the set — accent number + tinted frame. */
.f_dwc .dwc-qs-ltile-pri
{
    border-color: rgba(105, 147, 255, .45);
    background: rgba(105, 147, 255, .06);
}

.f_dwc .dwc-qs-ltile-pri .dwc-qs-ltile-n
{
    color: var(--dwc-primary-dark, var(--dwc-primary));
}

/* -------------------------------- tabs ---------------------------------- */
.f_dwc .dwc-qs-tabs
{
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--dwc-line);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.f_dwc .dwc-qs-tab
{
    font-size: 12px;
    font-weight: 600;
    color: var(--dwc-ink-3);
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    user-select: none;
}

.f_dwc .dwc-qs-tab:hover
{
    color: var(--dwc-ink-2);
}

.f_dwc .dwc-qs-tab.on
{
    color: var(--dwc-ink);
    border-bottom-color: var(--cc);
}

.f_dwc .dwc-qs-tab-panel
{
    display: none;
}

.f_dwc .dwc-qs-tab-panel.on
{
    display: block;
}

/* ---------------------------- range caption ----------------------------- */
.f_dwc .dwc-qs-range
{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dwc-ink-3);
    margin-bottom: 12px;
}

.f_dwc .dwc-qs-range i
{
    color: var(--dwc-ink-3);
    font-size: 12px;
}

.f_dwc .dwc-qs-range-today
{
    color: var(--cc);
}

.f_dwc .dwc-qs-range-today i
{
    color: var(--cc);
}

/* ------------------------- metric label/value rows ---------------------- */
.f_dwc .dwc-qs-mrow
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dwc-line);
}

.f_dwc .dwc-qs-mrow:last-child
{
    border-bottom: 0;
}

.f_dwc .dwc-qs-mrow-k
{
    font-size: 12.5px;
    color: var(--dwc-ink-2);
    flex: 1;
    min-width: 0;
}

.f_dwc .dwc-qs-mrow-v
{
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--dwc-ink);
}

/* ----------------------- Today: value + progress bar -------------------- */
.f_dwc .dwc-qs-prow
{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dwc-line);
    align-items: center;
}

.f_dwc .dwc-qs-prow:last-child
{
    border-bottom: 0;
}

.f_dwc .dwc-qs-prow-k
{
    font-size: 12.5px;
    color: var(--dwc-ink-2);
}

.f_dwc .dwc-qs-prow-v
{
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--dwc-ink);
}

.f_dwc .dwc-qs-bar
{
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 3px;
    background: var(--dwc-line);
    overflow: hidden;
}

.f_dwc .dwc-qs-bar > i
{
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--dwc-primary);
}

.f_dwc .dwc-qs-bar > i.dwc-qs-bar-good
{
    background: var(--dwc-success);
}

.f_dwc .dwc-qs-bar > i.dwc-qs-bar-warn
{
    background: var(--dwc-warning);
}

.f_dwc .dwc-qs-bar > i.dwc-qs-bar-dang
{
    background: var(--dwc-danger);
}

/* --------------------------- Overview donut ----------------------------- */
.f_dwc .dwc-qs-donut-wrap
{
    display: flex;
    align-items: center;
    gap: 18px;
}

.f_dwc .dwc-qs-donut
{
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
    position: relative;
}

/* Answered arc (conic-gradient set inline with the computed %); red remainder =
   abandoned. Pure CSS — no <svg>, robust inside a Wt WText. */
.f_dwc .dwc-qs-donut-ring
{
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* Inner disc punches the ring hole. inset = ring thickness (matches the old 12px
   stroke). Surface-colored so the center label reads cleanly. */
.f_dwc .dwc-qs-donut-hole
{
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--dwc-surface);
}

.f_dwc .dwc-qs-donut-ctr
{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.f_dwc .dwc-qs-donut-ctr b
{
    font-size: 22px;
    font-weight: 600;
    color: var(--dwc-ink);
}

.f_dwc .dwc-qs-donut-ctr span
{
    font-size: 9px;
    color: var(--dwc-ink-3);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.f_dwc .dwc-qs-legend
{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.f_dwc .dwc-qs-leg
{
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
}

.f_dwc .dwc-qs-sw
{
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.f_dwc .dwc-qs-leg-k
{
    color: var(--dwc-ink-2);
}

.f_dwc .dwc-qs-leg-v
{
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dwc-ink);
}

/* =========================================================================== *
 * Queue Active Calls — v2-A "Info stack" rows (VoIPQueueCallSelectorItem).
 * Reshapes the shared Selector row DOM into: avatar + status-dot | stacked
 * name / CRM / notes / queue | wait+talk timers + a per-row kebab (⋮). EVERY
 * action now lives in the kebab dropdown (.dwc-qcr-menu); the row carries only
 * information. Scoped to .f_dwc .dwc-qcr-row so nothing outside the dashboard
 * moves. Mirrors docs/prototypes/dashboard-widgets-modern/
 * PROTOTYPE_queue_call_rows_v2.html (variant A). Only the QueueActiveCallsWidget
 * (f_dwc) hosts these rows.
 * =========================================================================== */

/* Row: top-align the flex so the info stack grows downward under the name. */
.f_dwc .dwc-qcr-row .icon-title-container
{
    align-items: flex-start;
}

/* The base right-interaction cluster (options / drag / remove) is all-hidden
   for these read-only rows — the kebab replaces it, so drop its footprint. */
.f_dwc .dwc-qcr-row .right-interaction
{
    display: none;
}

/* Full side-to-side rows: the base item renders an EMPTY .info-container flex
   sibling (these rows pass includeInfo=true for the base plumbing, but the v2-A
   layout keeps everything in the stack + kebab) — on >=sm it grows against the
   icon-title-container and steals most of the row's width, squeezing the
   name/timers into the left portion. Hide it (!important beats the base
   .d-sm-flex utility) and let the content chain span the full row. */
.f_dwc .dwc-qcr-row .info-container
{
    display: none !important;
}

.f_dwc .dwc-qcr-row .avidbit-selector-item-container
{
    width: 100%;
}

.f_dwc .dwc-qcr-row .icon-title-container
{
    width: 100%;
    flex: 1 1 auto;
}

/* Avatar status dot: talk-green when active, waiting-amber when queued. */
.f_dwc .dwc-qcr-row .symbol-container
{
    margin-top: 1px;
}

.f_dwc .dwc-qcr-row .symbol-label
{
    position: relative;
}

.f_dwc .dwc-qcr-row .symbol-label::after
{
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--dwc-surface);
    background: var(--dwc-ink-3);
}

.f_dwc .dwc-qcr-active .symbol-label::after { background: var(--dwc-success); }
.f_dwc .dwc-qcr-queued .symbol-label::after { background: var(--dwc-warning); }

/* Middle stack — name / CRM / notes / queue, reordered via flex order so the
   base subtitle-2 (queue) can sit last while CRM + notes are appended after. */
.f_dwc .dwc-qcr-row .dwc-qcr-stack
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.f_dwc .dwc-qcr-row .dwc-qcr-stack .selector-item-title
{
    order: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f_dwc .dwc-qcr-row .dwc-qcr-arrow
{
    color: var(--dwc-ink-3);
    font-weight: 500;
}

.f_dwc .dwc-qcr-row .dwc-qcr-crm
{
    order: 1;
    min-width: 0;
    max-width: 100%;
    font-size: 11.5px;
    line-height: 1.3;
    overflow: hidden;
}

.f_dwc .dwc-qcr-row .dwc-qcr-notes
{
    order: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11.5px;
    color: var(--dwc-ink-2);
}

.f_dwc .dwc-qcr-row .dwc-qcr-notes-ico
{
    flex: 0 0 auto;
    color: var(--dwc-ink-3);
    font-size: 10px;
}

.f_dwc .dwc-qcr-row .dwc-qcr-notes-txt
{
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.f_dwc .dwc-qcr-row .dwc-qcr-notes-empty
{
    color: var(--dwc-ink-3);
}

.f_dwc .dwc-qcr-row .dwc-qcr-notes-empty .dwc-qcr-notes-txt
{
    font-style: normal;
}

.f_dwc .dwc-qcr-row .dwc-qcr-stack .dwc-qcr-queue
{
    order: 3;
    color: var(--dwc-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right cluster — stacked timers + the kebab, pinned right. */
.f_dwc .dwc-qcr-row .dwc-qcr-rt
{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 1px;
    padding-left: 8px;
}

.f_dwc .dwc-qcr-row .dwc-qcr-tmrs
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.f_dwc .dwc-qcr-row .dwc-qcr-tmr
{
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.1;
}

.f_dwc .dwc-qcr-row .dwc-qcr-tmr-talk { order: 0; }
.f_dwc .dwc-qcr-row .dwc-qcr-tmr-wait { order: 1; }

/* Shrink the legacy fixed 25px icon box down to the glyph. */
.f_dwc .dwc-qcr-row .dwc-qcr-tmr > div:first-child
{
    width: auto !important;
    font-size: 10px;
}

/* Kebab (⋮) + dropdown menu. On open, the item's JS switches the menu to
   position:fixed (positioned off the kebab rect) so the widget body's
   overflow can never clip it; these rules are the closed/fallback state. */
.f_dwc .dwc-qcr-row .dwc-qcr-menuwrap
{
    position: relative;
    flex: 0 0 auto;
}

.f_dwc .dwc-qcr-row .dwc-qcr-kebab
{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dwc-ink-3);
    cursor: pointer;
    font-size: 14px;
    border: 1px solid transparent;
}

.f_dwc .dwc-qcr-row .dwc-qcr-kebab:hover,
.f_dwc .dwc-qcr-row .dwc-qcr-kebab.open
{
    background: var(--dwc-line);
    color: var(--dwc-ink);
}

.f_dwc .dwc-qcr-menu
{
    position: absolute;
    right: 0;
    top: 32px;
    min-width: 190px;
    background: var(--dwc-surface);
    border: 1px solid var(--dwc-line-2);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(24, 28, 50, .16);
    padding: 6px;
    z-index: 3000;
    display: none;
}

.f_dwc .dwc-qcr-menu.open
{
    display: block;
}

.f_dwc .dwc-qcr-mi
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--dwc-ink);
    white-space: nowrap;
}

.f_dwc .dwc-qcr-mi:hover
{
    background: var(--dwc-line);
}

.f_dwc .dwc-qcr-mi-ico
{
    width: 15px;
    text-align: center;
    color: var(--dwc-ink-3);
    font-size: 12px;
    flex: 0 0 auto;
}

.f_dwc .dwc-qcr-mi-pri { color: var(--dwc-primary-dark); font-weight: 600; }
.f_dwc .dwc-qcr-mi-pri .dwc-qcr-mi-ico { color: var(--dwc-primary); }
.f_dwc .dwc-qcr-mi-danger { color: var(--dwc-danger); }
.f_dwc .dwc-qcr-mi-danger .dwc-qcr-mi-ico { color: var(--dwc-danger); }

.f_dwc .dwc-qcr-sep
{
    height: 1px;
    background: var(--dwc-line);
    margin: 5px 2px;
}

/* Clicking the notes line opens the same note editor as the ⋮ "Add note" row,
   so the empty "Add note" placeholder is discoverable. */
.f_dwc .dwc-qcr-row .dwc-qcr-clickable
{
    cursor: pointer;
}

.f_dwc .dwc-qcr-row .dwc-qcr-clickable:hover .dwc-qcr-notes-txt
{
    text-decoration: underline;
    color: var(--dwc-primary-dark);
}

/* =====================================================================================
   Live Dialer (docs/live-dialer, prototype variant A) — f_ld-* lives inside .f_dwc.
   ===================================================================================== */
.f_dwc .f_ld-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 4px 0 16px; }
.f_dwc .f_ld-status-group { flex: 1; min-width: 120px; }
.f_dwc .f_ld-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--dwc-ink-2); }
.f_dwc .f_ld-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dwc-warning); }
.f_dwc .f_ld-status.is-running::before { background: var(--dwc-success); }
.f_dwc .f_ld-control { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 18px; border: 1px solid #187b55; border-radius: 10px; background: #187b55; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.f_dwc .f_ld-control:hover { background: #116443; border-color: #116443; }
.f_dwc .f_ld-control.is-running { color: var(--dwc-ink); background: var(--dwc-surface); border-color: var(--dwc-line-2); }
.f_dwc .f_ld-control.is-running:hover { background: var(--dwc-primary-soft); }
.f_dwc .f_ld-control .fas, .f_dwc .f_ld-row-act .fas { color: inherit; font-size: 13px; }
.f_dwc .f_ld-header-import { min-height: 34px; gap: 8px; }
.f_dwc .f_ld-header-settings { width: 34px; height: 34px; }
.f_dwc .f_ld-trouble { flex-basis: 100%; font-size: 12px; color: var(--dwc-warning); min-height: 0; }
.f_dwc .f_ld-trouble:empty { display: none; }
.f_dwc .f_ld-notice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--dwc-primary-soft); color: var(--dwc-ink-2); font-size: 12px; margin: 4px 0 8px 0; }
.f_dwc .f_ld-notice i { color: var(--dwc-primary); margin-top: 2px; }
.f_dwc .f_ld-progress-host { margin: 0 0 18px; padding: 14px 16px; background: var(--dwc-primary-soft); border-radius: 12px; }
.f_dwc .f_ld-progress-host:empty { display: none; }
.f_dwc .f_ld-prog { height: 6px; background: var(--dwc-line); border-radius: 4px; overflow: hidden; width: 100%; display: flex; }
.f_dwc .f_ld-prog-seg.done { background: var(--dwc-success); }
.f_dwc .f_ld-prog-seg.failed { background: var(--dwc-danger); }
.f_dwc .f_ld-prog-seg.later { background: var(--dwc-warning); }
.f_dwc .f_ld-prog-cap { display: block; font-size: 12px; font-weight: 600; color: var(--dwc-ink-2); margin-top: 9px; }
.f_dwc .f_ld-prog-split { display: block; font-size: 12px; color: var(--dwc-ink-2); margin-top: 4px; }
.f_dwc .f_ld-cols { display: flex; flex-direction: column; gap: 10px; }
.f_dwc .f_ld-cols-wide.f_ld-cols-active { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; align-items: start; }
.f_dwc .f_ld-cols-wide.f_ld-cols-active .f_ld-notes-full { max-height: none; }
.f_dwc .f_ld-now { border: 1px solid var(--dwc-line-2); border-radius: var(--dwc-radius-tile); padding: 10px 12px; background: var(--dwc-surface); box-shadow: 0 4px 14px rgba(24, 28, 50, .06); }
.f_dwc .f_ld-now-head { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px 0; }
.f_dwc .f_ld-now-meta { min-width: 0; flex: 1; }
.f_dwc .f_ld-now-name { display: block; font-size: 15px; font-weight: 800; color: var(--dwc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f_dwc .f_ld-now-sub { display: block; font-size: 12px; color: var(--dwc-ink-3); }
.f_dwc .f_ld-av { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.f_dwc .f_ld-av-lg { width: 42px; height: 42px; min-width: 42px; font-size: 14px; }
.f_dwc .f_ld-notes { font-size: 12.5px; line-height: 1.45; color: var(--dwc-ink-2); word-break: break-word; position: relative; }
.f_dwc .f_ld-notes-clamp { max-height: 3.9em; overflow: hidden; }
.f_dwc .f_ld-notes-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.4em; background: linear-gradient(rgba(255,255,255,0), var(--dwc-surface)); }
.f_dwc .f_ld-notes-full { max-height: 260px; overflow: auto; }
.f_dwc .f_ld-notes a { color: var(--dwc-primary); text-decoration: underline; }
.f_dwc .f_ld-notes-empty { color: var(--dwc-ink-3); font-style: italic; }
.f_dwc .f_ld-link { color: var(--dwc-primary); font-size: 11.5px; font-weight: 700; cursor: pointer; display: inline-block; margin-top: 4px; }
.f_dwc .f_ld-link:hover { text-decoration: underline; }
.f_dwc .f_ld-details { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 11.5px; margin-top: 8px; }
.f_dwc .f_ld-detail { display: contents; }
.f_dwc .f_ld-detail-k { color: var(--dwc-ink-3); }
.f_dwc .f_ld-detail-v { color: var(--dwc-ink); }
/* Tags: the rail's CSCommunicator_CallTags DataWidget embedded flat. Its EDIT-mode glow ring
   (.f_dw2.edit > .card.card-custom, adrem.css) outranks a plain .card override, so match its
   specificity here; no card chrome, no editing chip/footer, micro-label + selector only. */
.f_dwc .f_ld-tags-host { margin-top: 10px; }
.f_dwc .f_ld-tags-host .f_dw2 > .card.card-custom,
.f_dwc .f_ld-tags-host .f_dw2.edit:not(.data-widget-wizard) > .card.card-custom,
.f_dwc .f_ld-tags-host .card { box-shadow: none; border: 0; border-radius: 0; margin: 0; background: transparent; }
.f_dwc .f_ld-tags-host .card-header,
.f_dwc .f_ld-tags-host .card-footer,
.f_dwc .f_ld-tags-host .f_dw2_chip { display: none; }
.f_dwc .f_ld-tags-host .card-body { padding: 0; }
.f_dwc .f_ld-tags-host .form-group { margin: 0; }
.f_dwc .f_ld-tags-host .form-group > label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--dwc-ink-3); font-weight: 600; margin: 0 0 4px; }
.f_dwc .f_ld-now-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.f_dwc .f_ld-now-actions .btn { font-size: 11.5px; padding: 4px 10px; }
.f_dwc .f_ld-wrap-note { margin-top: 8px; font-size: 12px; }
.f_dwc .f_ld-wrap-error { display: block; color: var(--dwc-danger); font-size: 11.5px; margin-top: 4px; }
.f_dwc .f_ld-countdown { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--dwc-ink-3); margin-top: 8px; }
.f_dwc .f_ld-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; background: var(--dwc-line); color: var(--dwc-ink-2); }
.f_dwc .f_ld-chip-primary { background: var(--dwc-primary-soft); color: var(--dwc-primary-dark); }
.f_dwc .f_ld-chip-info { background: #e1f7fb; color: #0f7f8f; }
.f_dwc .f_ld-chip-warn { background: #fff4de; color: #b26a00; }
.f_dwc .f_ld-chip-danger { background: #ffe2ea; color: #b8173f; }
.f_dwc .f_ld-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.f_dwc .f_ld-chips:empty { display: none; }
.f_dwc .f_ld-section { margin-top: 6px; }
.f_dwc .f_ld-section-cap { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 0 10px; color: var(--dwc-ink-2); }
.f_dwc .f_ld-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--dwc-primary-soft); color: var(--dwc-primary-dark); font-size: 11px; font-weight: 700; }
.f_dwc .f_ld-cap-clickable { cursor: pointer; }
.f_dwc .f_ld-cap-chev { font-size: 10px; color: var(--dwc-ink-3); margin-left: auto; }
.f_dwc .f_ld-row { flex-direction: column; align-items: stretch; padding: 12px 10px; }
.f_dwc .f_ld-row-line { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.f_dwc .f_ld-row-meta { min-width: 0; flex: 1; }
.f_dwc .f_ld-row-name { display: block; font-size: 14px; font-weight: 700; color: var(--dwc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f_dwc .f_ld-row-sub { display: block; font-size: 12px; color: var(--dwc-ink-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f_dwc .f_ld-next-up { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dwc-primary); }
.f_dwc .f_ld-row-spot { background: var(--dwc-primary-soft); border-radius: 12px; padding: 16px; border: 1px solid var(--dwc-line-2); margin-bottom: 4px; }
.f_dwc .f_ld-row-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.f_dwc .f_ld-row-act { min-width: 36px; min-height: 36px; padding: 8px 10px; border-radius: 8px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; background: var(--dwc-surface); border: 1px solid var(--dwc-line-2); color: var(--dwc-ink-2); cursor: pointer; font-size: 12px; font-weight: 600; }
.f_dwc .f_ld-row:not(.f_ld-row-open):not(.f_ld-row-spot) .f_ld-action-label { display: none; }
.f_dwc .f_ld-row-act:hover { border-color: var(--dwc-primary); color: var(--dwc-primary); }
.f_dwc .f_ld-row-act-primary { background: #187b55; border-color: #187b55; color: #fff; }
.f_dwc .f_ld-row-act-primary:hover { color: #fff; filter: brightness(.95); }
.f_dwc .f_ld-row-chev { font-size: 10px; color: var(--dwc-ink-3); flex: 0 0 auto; }
.f_dwc .f_ld-row-act-danger { color: var(--dwc-danger); }
.f_dwc .f_ld-row-act-danger:hover { color: var(--dwc-danger); border-color: var(--dwc-danger); background: var(--dwc-surface); }
.f_dwc .f_ld-row-body { padding: 14px 0 0 52px; }
.f_dwc .f_ld-row-body .f_ld-notes { padding: 12px 14px; border-radius: 8px; background: var(--dwc-surface); line-height: 1.65; }
.f_dwc .f_ld-row-body .f_ld-details { padding-top: 6px; gap: 7px 14px; font-size: 12px; }
.f_dwc .f_ld-row-fading { opacity: .45; transition: opacity 3s ease; }
.f_dwc .f_ld-more { display: inline-block; margin: 10px 0 0; padding: 8px 12px; background: var(--dwc-surface); border: 1px solid var(--dwc-line-2); border-radius: 8px; font-size: 12px; }
.f_dwc .f_ld-control:focus-visible, .f_dwc .f_ld-row-act:focus-visible, .f_dwc .f_ld-more:focus-visible, .f_dwc .f_ld-header-import:focus-visible, .f_dwc .f_ld-header-settings:focus-visible { outline: 3px solid var(--dwc-primary); outline-offset: 3px; }
.f_dwc .f_ld-lists-host { container-type: inline-size; }
@container (max-width: 600px)
{
    .f_dwc .f_ld-row-open .f_ld-row-line, .f_dwc .f_ld-row-spot .f_ld-row-line { flex-wrap: wrap; }
    .f_dwc .f_ld-row-open .f_ld-row-meta, .f_dwc .f_ld-row-spot .f_ld-row-meta { flex-basis: calc(100% - 65px); }
    .f_dwc .f_ld-row-line { position: relative; }
    .f_dwc .f_ld-row-meta { padding-right: 14px; }
    .f_dwc .f_ld-row-acts { margin-left: 0; flex-wrap: wrap; max-width: 100%; flex-shrink: 1; }
    .f_dwc .f_ld-row-body { padding-left: 0; }
    .f_dwc .f_ld-row-chev { position: absolute; right: 0; top: 12px; }
}
@container (max-width: 380px)
{
    .f_dwc .f_ld-row-line { flex-wrap: wrap; }
    .f_dwc .f_ld-row-meta { flex-basis: calc(100% - 65px); }
}
.f_dwc .f_ld-sub-avatars { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.f_dwc .f_ld-mini-av { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 8.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--dwc-surface); }
.f_dwc .f_ld-lists-host { min-width: 0; }

/* Reschedule modal + import wizard + campaign page (outside the widget chrome). */
.f_ld_resched-head { margin-bottom: 12px; }
.f_ld_resched-name { display: block; font-size: 15px; font-weight: 800; }
.f_ld_resched-meta { display: block; font-size: 12px; color: #a1a5b7; }
.f_ld-label { display: block; font-size: 11.5px; font-weight: 700; color: #5e6278; margin: 10px 0 4px 0; }
.f_ld-label-inline { font-size: 11.5px; font-weight: 700; color: #5e6278; margin-right: 8px; }
.f_ld_resched-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f_ld_resched-chip.active { background: #6993ff; color: #fff; }
.f_ld_resched-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.f_ld_resched-datetime { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.f_ld_resched-datetime .form-control { width: auto; flex: 1; min-width: 140px; max-width: 240px; }
.f_ld_resched-front { display: block; margin-top: 10px; }
.f_ld_resched-summary { display: block; margin-top: 12px; font-size: 12px; color: #5e6278; }
.f_ld_import-options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.f_ld_import-callback { display: flex; align-items: center; gap: 8px; }
.f_ld_import-callback .form-control { max-width: 240px; }
.f_ld_import-modes { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.f_ld_import-assign-one { margin-top: 8px; max-width: 320px; }
.f_ld_import-assign-robin { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
/* Wt renders each toggle as a label containing an input and a text span.
   Space those children explicitly; the wizard's checkbox reset removes margins. */
.f_ld_import .f_ld_import-options > label,
.f_ld_import .f_ld_import-modes > label,
.f_ld_import .f_ld_import-assign-robin > label
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin: 0;
    cursor: pointer;
}
.f_ld_import .f_ld_import-options > label > input[type=checkbox],
.f_ld_import .f_ld_import-modes > label > input[type=radio],
.f_ld_import .f_ld_import-assign-robin > label > input[type=checkbox]
{
    flex: 0 0 auto;
    margin: 0;
}
.f_ld_import-auto { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6993ff; margin-left: 6px; }
.f_ld_import-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.f_ld_import-stat { border: 1px solid #e4e6ef; border-radius: 10px; padding: 8px 10px; }
.f_ld_import-stat.good { border-color: #50cd89; }
.f_ld_import-stat.warn { border-color: #f6a609; }
.f_ld_import-stat.bad { border-color: #f1416c; }
.f_ld_import-stat-n { display: block; font-size: 20px; font-weight: 800; }
.f_ld_import-stat-l { display: block; font-size: 11px; color: #a1a5b7; }
.f_ld_import-warnings { background: #fff8e6; border: 1px solid #ffe1a3; border-radius: 10px; padding: 8px 12px; font-size: 12px; margin-bottom: 10px; max-height: 220px; overflow: auto; }
.f_ld_import-warnings-title { display: block; font-weight: 800; margin-bottom: 4px; }
.f_ld_import-preview td, .f_ld_import-map td { font-size: 12px; vertical-align: middle; }
.f_ld_import-row-skip { opacity: .5; text-decoration: line-through; }
.f_ld-campaign-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.f_ld-campaign-members .f_sel2_selbar,
.f_ld-campaign-members .f_sel2_selbar_btns { flex-wrap: wrap; }
.f_ld-campaign-members .f_sel2_selbar_action
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.f_ld-campaign-members .f_sel2_selbar_action .menu-item-anchor-class
{
    white-space: nowrap;
    border-radius: 8px;
    padding: 8px 12px;
}
.f_ld-campaign-assignee { display: flex; align-items: center; gap: 6px; }
.f_ld-campaign-assignee .form-control { min-width: 180px; }
.f_ld-exec-mode .form-control { max-width: 280px; }