/* ============================================================================
 * Dashboard editor (issue 01) — Variant A "Live canvas".
 *
 * The dashboard body renders as a 12-column dense CSS grid in BOTH view and
 * edit mode, so what a user arranges is what everyone sees. In edit mode each
 * widget cell grows an edit frame (grip + placeholder slots for the resize /
 * assign / remove affordances that later slices wire up).
 *
 * All rules are scoped under .dash-editor-* so nothing bleeds into the many
 * shared Bootstrap/Card widgets used elsewhere. Metronic 7, primary #6993FF.
 * FontAwesome 5 icon names only.
 * ========================================================================== */

/* Container-query root: the grid collapses to 2 columns by the CONTAINER's
   width (accounts for the portal sidebar), not the raw viewport.

   The containment lives on a wrapper that holds ONLY the grid, never the
   seeded-default view path — a container-type establishes layout containment,
   which would otherwise clip an absolutely-positioned widget popover that
   escapes the container (slice-01 review carry-over item a). */
.dash-editor-gridwrap
{
    container-type: inline-size;
    container-name: dashcanvas;
    width: 100%;
}

/* -------------------------------- the grid -------------------------------- */
.dash-editor-grid
{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 20px;
    align-items: start;
    width: 100%;
}

@container dashcanvas (max-width: 720px)
{
    .dash-editor-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-editor-grid .dash-editor-cell
    {
        grid-column: span 2 !important;
    }
    /* At 2 columns just stack — drop the height row-span footprint. */
    .dash-editor-editing .dash-editor-cell
    {
        grid-row: auto !important;
    }
}

/* Viewport fallback for browsers without container-query support: mirror the
   2-column collapse above (slice-01 review carry-over item b). */
@media (max-width: 720px)
{
    .dash-editor-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-editor-grid .dash-editor-cell
    {
        grid-column: span 2 !important;
    }
    .dash-editor-editing .dash-editor-cell
    {
        grid-row: auto !important;
    }
}

.dash-editor-cell
{
    grid-column: span var(--dw-span, 6);
    position: relative;
    min-width: 0;
    container-type: inline-size;
    container-name: dashcell;
    border-radius: 14px;
    transition: box-shadow .15s ease;
}

/* Neutralize the Bootstrap col-* sizing the DashboardWidget carries on its
   root — inside a grid cell the cell owns the span, the widget just fills it.
   Selector is deliberately more specific than a lone .col-lg-N. */
.dash-editor-grid .dash-editor-cell > [class*="col-"]
{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Grid gap already spaces the cards; drop the card's own bottom gutter. */
.dash-editor-cell .card.gutter-b
{
    margin-bottom: 0 !important;
}

/* --------------------------- edit-mode chrome ----------------------------- */
.dash-editor-editing .dash-editor-cell:hover
{
    box-shadow: 0 0 0 2px #eef3ff;
}
.dash-editor-editing .dash-editor-cell.selected
{
    box-shadow: 0 0 0 3px rgba(105, 147, 255, .45);
}
.dash-editor-editing .dash-editor-cell.dragging
{
    opacity: .28;
    transform: scale(.985);
    box-shadow: 0 0 0 3px rgba(105, 147, 255, .55), 0 12px 30px rgba(24, 28, 50, .18);
}
.dash-editor-editing .dash-editor-cell.drop-target
{
    outline: 3px solid rgba(105, 147, 255, .75);
    outline-offset: 4px;
    background: rgba(105, 147, 255, .04);
}

/* Pointer-drag feedback. The source grid remains stable until pointer-up; the
   ghost follows the pointer and this fixed insertion edge marks the exact slot. */
body.dash-widget-dragging,
body.dash-widget-dragging *
{
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.dash-drag-ghost
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    max-width: min(360px, calc(100vw - 24px));
    padding: 12px 16px;
    border: 2px solid #6993FF;
    border-radius: 12px;
    background: rgba(255, 255, 255, .97);
    color: #181c32;
    box-shadow: 0 16px 36px rgba(24, 28, 50, .24);
    pointer-events: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    will-change: transform;
}
.dash-drag-ghost i
{
    flex: 0 0 auto;
    color: #6993FF;
    font-size: 16px;
}
.dash-drag-ghost span
{
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-drop-indicator
{
    position: fixed;
    z-index: 100040;
    border-radius: 999px;
    background: #6993FF;
    box-shadow: 0 0 0 4px rgba(105, 147, 255, .2), 0 4px 14px rgba(105, 147, 255, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .08s ease;
}
.dash-drop-indicator.visible
{
    opacity: 1;
}
.dash-editor-cell.dash-drop-land
{
    animation: dashDropLand .26s ease-out;
}
@keyframes dashDropLand
{
    0%   { transform: scale(.97); box-shadow: 0 0 0 7px rgba(105, 147, 255, .35); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(105, 147, 255, 0); }
}

/* The frame is inert overlay chrome; only its tools take pointer events, so
   clicks on the live widget body still pass through to the real widget. */
.dash-editor-frame
{
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.dash-editor-toolbar
{
    position: absolute;
    top: 9px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 4px;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(24, 28, 50, .07);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: auto;
}
.dash-editor-editing .dash-editor-cell:hover .dash-editor-toolbar,
.dash-editor-editing .dash-editor-cell.selected .dash-editor-toolbar,
.dash-editor-editing .dash-editor-cell:focus-within .dash-editor-toolbar
{
    opacity: 1;
    transform: translateY(0);
}

.dash-tool
{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #526176;
    box-shadow: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background-color .12s ease, color .12s ease;
}
.dash-tool:hover
{
    background: #edf2fc;
    color: #345ac4;
}
/* Metronic assigns a color and size directly to i, so parent color alone
   never reaches the actual glyph. Keep editor icons in the control's state. */
.dash-editor-toolbar .dash-tool i
{
    color: inherit;
    font-size: 14px;
    line-height: 1;
}
.dash-tool-settings
{
    background: #edf2fc;
    color: #345ac4;
}
.dash-tool:focus-visible
{
    outline: 2px solid #345ac4 !important;
    outline-offset: 1px;
    background: #edf2fc !important;
    color: #345ac4 !important;
}
.dash-tool-grip
{
    color: #526176;
    cursor: grab;
    /* Pointer-driven reorder (App_Dashboard::wireReorderJavaScript): keep touch drags from
       scrolling the page, and don't let a press start a text selection. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.dash-tool-grip:active
{
    cursor: grabbing;
}
.dash-tool-remove:hover
{
    background: #fff1f4;
    color: #d9214f;
}
.dash-tool-remove:focus-visible
{
    outline-color: rgba(241, 65, 108, .7) !important;
    background: #fff1f4 !important;
    color: #d9214f !important;
}

/* Separate the destructive action without turning it into another bordered
   button. The toolbar reads as one compact control instead of five boxes. */
.dash-tool-remove
{
    margin-left: 3px;
    box-shadow: -4px 0 0 -3px #e4e6ef;
}


/* (Drag-resize handles removed — width/height are now set from the settings sidebar.
   The .dash-rz* rules, the drag size-guide and the body.dash-resizing state are gone
   with them; the --dw-rows packing observer below stays, it is independent.) */

/* Read-only editor (V-only user): frames render, mutating affordances hide. */
.dash-editor-readonly .dash-tool
{
    display: none !important;
}
/* The settings gear stays visible for V-only users so they can open the sidebar
   read-only (it re-gates its own controls on "e"). Placed AFTER the hide rule so
   source order wins. */
.dash-editor-readonly .dash-tool-settings
{
    display: flex !important;
}
/* The remove tool (issue 03) is created server-side ONLY for "d" holders, so its mere
   presence already means the caller may remove — keep it visible even when the "e"-gated
   readonly skin is on (a user with "d" but not "e" gets no grip/resize, but still removes). */
.dash-editor-readonly .dash-tool-remove
{
    display: flex !important;
}
/* The audience stack (issue 05) renders on EVERY edit frame so a V-only user can see who a
   widget is shared with (read-only). It carries .dash-tool (hidden above) so the reorder JS
   ignores clicks on it — un-hide it here. Placed AFTER the hide rule so source order wins. */
.dash-editor-readonly .dash-tool-assign
{
    display: flex !important;
}

/* --------------------- height footprint (issue 02) ----------------------- */
/* EDIT MODE ONLY: a fine row track + per-cell row span turns a widget's height
   into a real grid footprint, so the dense flow repacks vertically with no gaps.
   --dw-rows is measured live by wirePackingObserver() (bounded for capped
   widgets, full content for Auto so nothing clips); C++ seeds an initial value.
   View mode is left on the slice-01 auto rows, unchanged. ROW/GAP here MUST
   match the ROW/GAP constants in wirePackingObserver(). */
.dash-editor-editing .dash-editor-grid
{
    grid-auto-rows: 8px;
}
.dash-editor-editing .dash-editor-cell
{
    grid-row: span var(--dw-rows, 20);
}

/* ------------------------------ empty state ------------------------------- */
.dash-editor-empty
{
    border: 2px dashed #e4e6ef;
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
    color: #a1a5b7;
    background: #ffffff;
}
.dash-editor-empty-icon
{
    font-size: 44px;
    color: #e4e6ef;
    display: block;
    margin-bottom: 8px;
}
.dash-editor-empty h2
{
    margin: 16px 0 4px;
    color: #181c32;
    font-size: 18px;
    font-weight: 700;
}
.dash-editor-empty-body
{
    font-size: 13px;
    color: #a1a5b7;
}
.dash-editor-empty-add
{
    margin-top: 16px;
}

/* --------------------- new-widget pulse highlight (issue 04) --------------- */
/* After the Add wizard finishes, the new cell pulses once. CSS-only; the class is
   added/removed from JS. NO scrollIntoView is used (it scrolls every ancestor). */
.dash-editor-cell.dash-editor-pulse
{
    animation: dashEditorPulse 1.3s ease;
}
@keyframes dashEditorPulse
{
    0%   { box-shadow: 0 0 0 0 rgba(105, 147, 255, .55); }
    100% { box-shadow: 0 0 0 16px rgba(105, 147, 255, 0); }
}

/* =========================================================================== *
 * Add-widget wizard (issue 04) — step bodies live inside the shared .cs-wizard
 * chrome; everything here is scoped under .dash-wiz-* / .dash-audience-picker
 * so it can't bleed into other wizards. Metronic 7, primary #6993FF, FA5.
 * =========================================================================== */

/* icon chip reused across gallery tiles + review cards */
.dash-wiz-ico
{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    background: #6993FF;
}
.dash-wiz-ico.lg
{
    width: 44px;
    height: 44px;
    font-size: 18px;
}
/* Per-category icon colour — mirrors the deployed widgets' category palette
   (chrome --cc mapping) so the picker matches what lands on the dashboard. */
.dash-wiz-ico.dash-wiz-cat-analytics { background: #7239ea; }
.dash-wiz-ico.dash-wiz-cat-people { background: #6993FF; }
.dash-wiz-ico.dash-wiz-cat-links { background: #4a77e8; }
.dash-wiz-ico.dash-wiz-cat-calls { background: #50cd89; }
.dash-wiz-ico.dash-wiz-cat-queues { background: #f6a609; }
.dash-wiz-ico.dash-wiz-cat-meetings { background: #22b8cf; }
.dash-wiz-ico.dash-wiz-cat-phone { background: #6993FF; }
.dash-wiz-ico.dash-wiz-cat-access { background: #f1416c; }
.dash-wiz-ico.dash-wiz-cat-integrations { background: #17a2a2; }

/* --- step 1: search + category pills + gallery --- */
.dash-wiz-search
{
    position: relative;
    margin-bottom: 12px;
}
.dash-wiz-search > i
{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a5b7;
    font-size: 12px;
}
.dash-wiz-search input
{
    width: 100%;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    padding: 9px 12px 9px 32px;
    font-size: 13px;
}
.dash-wiz-search input:focus
{
    outline: none;
    border-color: #6993FF;
    box-shadow: 0 0 0 3px #eef3ff;
}

.dash-wiz-catrow
{
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dash-wiz-pill
{
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e4e6ef;
    background: #ffffff;
    color: #5e6278;
    cursor: pointer;
}
.dash-wiz-pill.on
{
    background: #181c32;
    color: #ffffff;
    border-color: #181c32;
}

.dash-wiz-gallery
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 11px;
}
.dash-wiz-gallery-empty
{
    grid-column: 1 / -1;
    padding: 26px;
    text-align: center;
    color: #a1a5b7;
    font-size: 12px;
}
.dash-wiz-tile
{
    border: 1.5px solid #e4e6ef;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    position: relative;
    background: #ffffff;
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.dash-wiz-tile:hover
{
    border-color: #6993FF;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(24, 28, 50, .10);
}
.dash-wiz-tile.on
{
    border-color: #6993FF;
    background: #eef3ff;
}
.dash-wiz-tile .dash-wiz-ico
{
    margin-bottom: 10px;
}
.dash-wiz-tile b
{
    font-size: 13px;
    display: block;
}
.dash-wiz-tile p
{
    font-size: 11px;
    color: #a1a5b7;
    margin: 4px 0 0;
    line-height: 1.35;
}
.dash-wiz-tile-check
{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #6993FF;
    font-size: 16px;
    opacity: 0;
}
.dash-wiz-tile.on .dash-wiz-tile-check
{
    opacity: 1;
}

/* --- step 2: fields + segmented selectors --- */
.dash-wiz-field
{
    margin-bottom: 16px;
}
.dash-wiz-field > label
{
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #5e6278;
    margin-bottom: 7px;
}
.dash-wiz-input
{
    width: 100%;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
}
.dash-wiz-input:focus
{
    outline: none;
    border-color: #6993FF;
    box-shadow: 0 0 0 3px #eef3ff;
}
.dash-wiz-seg
{
    display: flex;
    background: #f3f4f7;
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}
.dash-wiz-seg-btn
{
    flex: 1;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #5e6278;
    padding: 7px 12px;
    border-radius: 7px;
    min-width: 44px;
}
.dash-wiz-seg-btn.on
{
    background: #ffffff;
    color: #4a77e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.dash-wiz-seg-btn.disabled
{
    opacity: .4;
    cursor: not-allowed;
}

/* --- step 3: assign note --- */
.dash-wiz-note
{
    font-size: 12.5px;
    color: #5e6278;
    background: #eef3ff;
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

/* --- step 4: review cards --- */
.dash-wiz-review
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dash-wiz-rev-card
{
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.dash-wiz-rev-lbl
{
    font-size: 11px;
    color: #a1a5b7;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dash-wiz-rev-val
{
    font-size: 14px;
    font-weight: 700;
    color: #181c32;
}

/* =========================================================================== *
 * Shared people picker (CSWidgetAudiencePicker) — C "directory list" design
 * (picked from docs/prototypes/dashboard-widgets-modern/
 * PROTOTYPE_assign_people_v2.html): underline type tabs + inline search in one
 * head row, full-width list rows (avatar / name+Owner tag / right check), and a
 * footer with the live avatar stack + summary + "Everyone at <customer>" switch.
 * Scoped under .dash-audience-picker. Metronic 7, primary #6993FF, FA5.
 * =========================================================================== */
.dash-audience-picker.pp
{
    border: 1px solid #e4e6ef;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

/* head row: underline tabs left, inline search right */
.dash-audience-picker .pp-head
{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    border-bottom: 1px solid #f0f1f5;
}
.dash-audience-picker .pp-tabs
{
    display: flex;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.dash-audience-picker .pp-tab
{
    padding: 11px 12px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5e6278;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    display: flex;
    gap: 7px;
    align-items: center;
    white-space: nowrap;
}
.dash-audience-picker .pp-tab.on
{
    color: #4a77e8;
    border-bottom-color: #6993FF;
}
.dash-audience-picker .pp-tab .cnt
{
    font-size: 10px;
    font-weight: 700;
    background: #f0f1f5;
    border-radius: 999px;
    padding: 1px 7px;
    color: #5e6278;
}
.dash-audience-picker .pp-tab.on .cnt
{
    background: rgba(105, 147, 255, .1);
    color: #4a77e8;
}
.dash-audience-picker .pp-search
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    background: #fafbfd;
    margin: 8px 0;
    flex: 0 0 auto;
}
.dash-audience-picker .pp-search:focus-within
{
    border-color: #6993FF;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(105, 147, 255, .12);
}
.dash-audience-picker .pp-search i
{
    color: #a1a5b7;
    font-size: 11px;
}
.dash-audience-picker .pp-search input
{
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 12.5px;
    width: 150px;
    color: #181c32;
}

/* list rows */
.dash-audience-picker .pp-list
{
    max-height: 380px;
    overflow-y: auto;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.dash-audience-picker .pp-item
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .08s ease, border-color .08s ease;
}
.dash-audience-picker .pp-item:hover
{
    background: #f7f9fd;
}
.dash-audience-picker .pp-item.on
{
    background: rgba(105, 147, 255, .08);
    border-color: rgba(105, 147, 255, .35);
}
.dash-audience-picker .pp-item .mid
{
    flex: 1;
    min-width: 0;
}
.dash-audience-picker .pp-item .nm
{
    font-size: 13px;
    font-weight: 600;
    color: #181c32;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-audience-picker .pp-owner-tag
{
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(246, 166, 9, .12);
    color: #c47f00;
    flex: 0 0 auto;
}
.dash-audience-picker .pp-item .cbx
{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1.5px solid #e4e6ef;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: background .08s ease;
}
.dash-audience-picker .pp-item:hover .cbx
{
    border-color: #c9d4f5;
}
.dash-audience-picker .pp-item.on .cbx
{
    background: #6993FF;
    border-color: #6993FF;
    color: #ffffff;
}
.dash-audience-picker .pp-item.locked
{
    cursor: default;
}
.dash-audience-picker .pp-item.locked:hover
{
    background: transparent;
}
.dash-audience-picker .pp-lock
{
    font-size: 11px;
    color: #c47f00;
    flex: 0 0 auto;
    padding-right: 4px;
}
.dash-audience-picker .pp-empty
{
    text-align: center;
    color: #a1a5b7;
    font-size: 12px;
    padding: 34px 20px;
}

/* avatars — the TYPE decides the symbol (prototype-approved language):
   users = per-person palette GRADIENT initials circles (pp-c0..pp-c5, scoped here
   so they beat the base rule — the earlier global-class reuse lost specificity and
   everything rendered the blue fallback); groups = VIOLET rounded-square + white
   glyph (.tgrp); customers = TEAL rounded-square + white glyph (.tcus). */
.dash-audience-picker .dash-pp-av
{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #6993FF, #4a77e8);
}
.dash-audience-picker .dash-pp-av i
{
    color: #ffffff;
}
.dash-audience-picker .dash-pp-av.pp-c0 { background: linear-gradient(135deg, #6993FF, #4a77e8); }
.dash-audience-picker .dash-pp-av.pp-c1 { background: linear-gradient(135deg, #50cd89, #2ea56b); }
.dash-audience-picker .dash-pp-av.pp-c2 { background: linear-gradient(135deg, #f6a609, #e8912a); }
.dash-audience-picker .dash-pp-av.pp-c3 { background: linear-gradient(135deg, #7239ea, #5a22c9); }
.dash-audience-picker .dash-pp-av.pp-c4 { background: linear-gradient(135deg, #22b8cf, #1499ae); }
.dash-audience-picker .dash-pp-av.pp-c5 { background: linear-gradient(135deg, #f1416c, #d12b55); }
.dash-audience-picker .dash-pp-av.sq
{
    border-radius: 10px;
}
.dash-audience-picker .dash-pp-av.tgrp
{
    background: linear-gradient(135deg, #8a53ff, #6a2ce0);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
}
.dash-audience-picker .dash-pp-av.tcus
{
    background: linear-gradient(135deg, #2cc7de, #0f97ad);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
}
.dash-audience-picker .dash-pp-av.sm2
{
    width: 28px;
    height: 28px;
    font-size: 10px;
    border: 2px solid #ffffff;
}
.dash-audience-picker .dash-pp-av.more
{
    background: #e4e6ef;
    color: #5e6278;
}

/* footer: avatar stack + summary + everyone-switch */
.dash-audience-picker .pp-foot
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid #f0f1f5;
    background: #fafbfd;
}
.dash-audience-picker .pp-stack
{
    display: flex;
    align-items: center;
}
.dash-audience-picker .pp-stack .dash-pp-av
{
    margin-left: -8px;
    border-radius: 50%;
}
.dash-audience-picker .pp-stack .dash-pp-av.sq
{
    border-radius: 9px;
}
.dash-audience-picker .pp-stack .dash-pp-av:first-child
{
    margin-left: 0;
}
.dash-audience-picker .pp-sum
{
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #5e6278;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-audience-picker .pp-everyone
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #5e6278;
    cursor: pointer;
    flex: 0 0 auto;
}
.dash-audience-picker .pp-everyone .sw
{
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #e4e6ef;
    position: relative;
    transition: background .12s ease;
}
.dash-audience-picker .pp-everyone .sw::after
{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: left .12s ease;
}
.dash-audience-picker .pp-everyone.on .sw
{
    background: #6993FF;
}
.dash-audience-picker .pp-everyone.on .sw::after
{
    left: 16px;
}

/* =========================================================================== *
 * Assign affordance + avatar stack + inline rename (issue 05). Lives in the
 * edit-frame hover toolbar ("e"-gated); the widget's own Card header is never
 * touched. Metronic 7, primary #6993FF, FA5. Scoped under .dash-* so nothing
 * bleeds into the shared widgets.
 * =========================================================================== */

/* The assign affordance is a .dash-tool (so the reorder JS ignores clicks on it)
   but auto-width so the avatar stack fits — override the fixed 28x28 tool box. */
.dash-tool.dash-tool-assign.dash-assign-btn
{
    width: auto;
    min-width: 32px;
    padding: 0 6px;
    gap: 5px;
    color: #526176;
}
.dash-tool.dash-tool-assign.dash-assign-btn:hover
{
    background: #edf2fc;
    color: #345ac4;
}
.dash-tool.dash-tool-assign.dash-assign-btn.only-me
{
    font-size: 11px;
    font-weight: 600;
}
.dash-tool.dash-tool-assign.dash-assign-btn.only-me i
{
    margin-right: 3px;
    color: inherit;
}
/* Audience identity still comes from initials, glyphs and tooltips. A single
   neutral palette keeps a random entity hash from making an orange action. */
.dash-editor-toolbar .dash-av
{
    background: #e9edf4;
    color: #526176;
    font-weight: 600;
}
.dash-editor-toolbar .dash-av.sq
{
    border-radius: 5px;
}
.dash-editor-toolbar .dash-tool .dash-av i
{
    font-size: 11px;
}
.dash-editor-toolbar .dash-assign-btn:not(.dash-assign-readonly):hover .dash-av
{
    background: #dfe8fc;
    color: #345ac4;
}
/* V-only read-only stack: no click handler is wired server-side, so drop the pointer
   affordance and hover highlight — it is a plain display, not a button. Higher specificity
   than the :hover rule above, so it wins regardless of source order. */
.dash-tool.dash-tool-assign.dash-assign-btn.dash-assign-readonly
{
    cursor: default;
}
.dash-tool.dash-tool-assign.dash-assign-btn.dash-assign-readonly:hover
{
    background: transparent;
    color: #5e6278;
}

/* Dashboard-level edit actions use the same restrained geometry as the
   contextual widget toolbar, while retaining a clear primary Add action. */
.dash-editor-customize,
.dash-editor-add
{
    min-height: 40px;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #dce2eb !important;
    font-size: 13px !important;
    line-height: 1.2;
    font-weight: 600 !important;
    transition: background-color .12s ease, border-color .12s ease;
}
/* Override the shared btn-light-primary / btn-primary state rules locally. */
.btn.dash-editor-customize
{
    background: #ffffff !important;
    color: #34445d !important;
    box-shadow: 0 1px 2px rgba(24, 28, 50, .05) !important;
}
.btn.dash-editor-customize:hover,
.btn.dash-editor-customize:active
{
    background: #edf2fc !important;
    border-color: #bac9ed !important;
    color: #345ac4 !important;
}
.dash-editor-add
{
    margin-left: 8px;
    background: #345ac4 !important;
    border-color: #345ac4 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn.dash-editor-add:hover,
.btn.dash-editor-add:active
{
    background: #294aa7 !important;
    border-color: #294aa7 !important;
}
.dash-editor-customize:focus-visible,
.dash-editor-add:focus-visible
{
    outline: 3px solid rgba(105, 147, 255, .45) !important;
    outline-offset: 2px;
}

/* Small-span cards put the toolbar on its own header row so edit actions never
   cover the widget title. The compact audience treatment preserves the lock or
   first avatar as a recognizable summary while keeping every action reachable. */
@container dashcell (max-width: 480px)
{
    .dash-editor-editing .f_dwc > .card.card-custom > .card-header
    {
        min-height: 108px;
        padding-top: 58px;
    }
    .dash-editor-toolbar
    {
        top: 8px;
        left: 8px;
        right: 8px;
        justify-content: flex-end;
        max-width: calc(100% - 16px);
    }
}
@container dashcell (max-width: 240px)
{
    .dash-editor-toolbar
    {
        gap: 1px;
        min-height: 34px;
        padding: 3px;
    }
    .dash-tool
    {
        width: 26px;
        height: 26px;
    }
    .dash-tool.dash-tool-assign.dash-assign-btn
    {
        width: 26px;
        min-width: 26px;
        max-width: 26px;
        padding: 0 2px;
        overflow: hidden;
    }
    .dash-tool.dash-tool-assign.dash-assign-btn.only-me > span
    {
        display: none;
    }
    .dash-tool.dash-tool-assign.dash-assign-btn.only-me i
    {
        margin-right: 0;
    }
    .dash-avstack .dash-av:not(:first-child)
    {
        display: none;
    }
}

/* Container-query fallback for older mobile browsers. */
@media (max-width: 720px)
{
    .dash-editor-editing .f_dwc > .card.card-custom > .card-header
    {
        min-height: 108px;
        padding-top: 58px;
    }
    .dash-editor-toolbar
    {
        top: 8px;
        left: 8px;
        right: 8px;
        justify-content: flex-end;
        max-width: calc(100% - 16px);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .dash-editor-toolbar,
    .dash-tool
    {
        transition: none;
    }
}

/* The stacked avatars. */
.dash-avstack
{
    display: inline-flex;
    align-items: center;
}
.dash-avstack .dash-av
{
    margin-left: -7px;
    box-shadow: 0 0 0 2px #ffffff;
}
.dash-avstack .dash-av:first-child
{
    margin-left: 0;
}
.dash-av
{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
    background: #6993FF;
    line-height: 1;
}
.dash-av.sq
{
    border-radius: 6px;
}
.dash-av.more
{
    background: #e4e6ef;
    color: #5e6278;
}

/* Deterministic per-entity palette (index = qHash(id) % 8). All dark enough for
   white initials/icons. */
.dash-av-c0 { background: #6993FF; }
.dash-av-c1 { background: #7239EA; }
.dash-av-c2 { background: #17C653; }
.dash-av-c3 { background: #F1416C; }
.dash-av-c4 { background: #FF8A00; }
.dash-av-c5 { background: #00A3FF; }
.dash-av-c6 { background: #E4468A; }
.dash-av-c7 { background: #4B5675; }
/* The overflow chip keeps its muted look regardless of a palette class. */
.dash-av.more { background: #e4e6ef; }

/* Inline rename: a hidden editor bar overlaid on the frame's top strip, revealed
   when the pencil tool is clicked. It takes pointer events (the frame itself is
   inert); it sits above the toolbar so the input is fully clickable. */
.dash-rename-bar
{
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 8;
    pointer-events: auto;
}
.dash-rename-input
{
    width: 100%;
    border: 1px solid #6993FF;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #181c32;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(24, 28, 50, .16);
}
.dash-rename-input:focus
{
    outline: none;
    box-shadow: 0 0 0 3px #eef3ff, 0 6px 22px rgba(24, 28, 50, .16);
}

/* =========================================================================== *
 * Widget settings sidebar (drag-resize replacement). A Modal styled as a right
 * drawer on wide screens and a bottom sheet on narrow ones — the primary,
 * touch-friendly way to set a widget's size + order + name. Metronic 7, primary
 * #6993FF, FA5. Scoped under .dash-settings-* so nothing bleeds into other modals.
 * =========================================================================== */

/* Right drawer: pin the modal-dialog to the right edge, full viewport height. */
.modal-dialog.dash-settings-drawer
{
    margin: 0 0 0 auto;
    max-width: 380px;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
.dash-settings-drawer .modal-content
{
    height: 100%;
    border: none;
    border-radius: 0;
}
.dash-settings-drawer .modal-body
{
    overflow-y: auto;
    padding: 20px 24px;
}
.dash-settings-drawer .modal-header,
.dash-settings-drawer .modal-footer
{
    padding: 18px 24px;
    border-color: #e6eaf0;
}
/* Slide in from the right instead of Bootstrap's default drop-from-top. */
.modal.fade .modal-dialog.dash-settings-drawer
{
    transform: translateX(40px);
}
.modal.show .modal-dialog.dash-settings-drawer
{
    transform: none;
}

/* Bottom sheet on narrow widths (mobile) — full width, pinned to the bottom. */
@media (max-width: 576px)
{
    .modal-dialog.dash-settings-drawer
    {
        margin: auto 0 0 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: 88vh;
    }
    .dash-settings-drawer .modal-content
    {
        height: auto;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
    }
    .modal.fade .modal-dialog.dash-settings-drawer
    {
        transform: translateY(40px);
    }
}

.dash-settings-body
{
    padding: 0;
}

/* header: icon chip + widget name */
.dash-settings-head
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eff2f5;
}
.dash-settings-ico
{
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #345ac4;
    background: #edf2fc;
    border: 1px solid #dce5f8;
}
.dash-settings-ico i,
.dash-settings-orderbtn i
{
    color: inherit;
    font-size: inherit;
}
.dash-settings-name
{
    font-size: 16px;
    font-weight: 600;
    color: #181c32;
    min-width: 0;
    word-break: break-word;
}

/* each labelled section */
.dash-settings-sec
{
    margin-top: 22px;
}
.dash-settings-lbl
{
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #5e6278;
    margin-bottom: 8px;
}
.dash-settings-input
{
    width: 100%;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #181c32;
}
.dash-settings-input:focus
{
    outline: none;
    border-color: #6993FF;
    box-shadow: 0 0 0 3px #eef3ff;
}
.dash-settings-input.disabled
{
    background: #f3f4f7;
    color: #a1a5b7;
}

/* Quiet segmented tracks with a blue-tinted, outlined selection. */
.dash-settings-seg
{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: #f3f5f8;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    padding: 3px;
}
.dash-settings-seg-btn
{
    flex: 1 1 auto;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #526176;
    padding: 8px 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    min-width: 36px;
    user-select: none;
}
.dash-settings-seg-btn.on
{
    background: #edf2fc;
    color: #345ac4;
    border-color: #bac9ed;
}
.dash-settings-seg-btn:not(.on):not(.disabled):hover
{
    background: #e6eaf0;
}
.dash-settings-seg-btn.disabled
{
    opacity: .4;
    cursor: not-allowed;
}

/* order stepper: up / "Position X of N" / down */
.dash-settings-order
{
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-settings-orderbtn
{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e4e6ef;
    color: #5e6278;
    cursor: pointer;
    font-size: 14px;
}
.dash-settings-orderbtn:hover
{
    background: #edf2fc;
    border-color: #bac9ed;
    color: #345ac4;
}
.dash-settings-orderbtn.disabled
{
    opacity: .4;
    pointer-events: none;
}
.dash-settings-pos
{
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #181c32;
}

/* Entities section (which queues/users/lots the widget shows): capped-height
   multi-select NAVIGATION list + a muted hint line under the section label. */
.dash-settings-sec-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dash-settings-sec-head .dash-settings-lbl
{
    margin-bottom: 0;
}
.dash-settings-entclear
{
    flex: 0 0 auto;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
}
.dash-settings-hint
{
    display: block;
    font-size: 11px;
    color: #657389;
    margin: 6px 0 10px;
}
.dash-settings-entsel
{
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    padding: 4px;
}

/* Entity tiles use the same neutral treatment as the toolbar audience chips. */
.dash-settings-entsel .selector-item .symbol-label
{
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px !important;
    background: #e9edf4 !important;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-settings-entsel .selector-item .symbol-label i,
.dash-settings-entsel .selector-item .symbol-label .fas
{
    color: #526176 !important;
    font-size: 13px;
}

/* action buttons (Assign / Remove) */
.dash-settings-actions
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eff2f5;
}
.dash-settings-action
{
    width: 100%;
    min-height: 40px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    border: 1px solid #dce2eb !important;
    color: #34445d !important;
    box-shadow: none !important;
}
.dash-settings-action:hover
{
    background: #f3f5f8 !important;
    border-color: #bcc6d5 !important;
}
.dash-settings-action.btn-light-danger
{
    color: #b63b4b !important;
    border-color: transparent !important;
}
.dash-settings-action.btn-light-danger:hover
{
    background: #fff2f3 !important;
    border-color: #f0d3d8 !important;
}
.dash-settings-entclear.btn
{
    background: transparent !important;
    color: #526176 !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}
.dash-settings-entclear.btn:hover
{
    background: #f3f5f8 !important;
    color: #34445d !important;
    text-decoration: underline;
}
.dash-settings-drawer .modal-footer .btn-primary
{
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 8px;
    background: #345ac4 !important;
    border: 1px solid #345ac4 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.dash-settings-drawer .modal-footer .btn-primary:hover
{
    background: #294aa7 !important;
    border-color: #294aa7 !important;
}
.dash-settings-drawer .btn:focus-visible,
.dash-settings-orderbtn:focus-visible,
.dash-settings-seg-btn:focus-visible
{
    outline: 2px solid #345ac4 !important;
    outline-offset: 2px;
}