/* ============================
   Value CRM — Application shell
   Sidebar + content workspace
   ============================

   The CRM module lives at /Crm and uses this layout exclusively. The
   shell is a left sidebar (nav + user card) plus a right content column
   (workspace tabs → optional subtab strip → main with brand gradient).
   Per-page content renders into <main class="crm-main">.

   Surfaces step: sidebar cream → content white → gradient main.
   Brand: Value green dominant; cream + navy as the supporting palette.
   Type: Fraunces serif for display moments (eyebrow, brand voice);
   Geist sans for body. Both loaded from Google Fonts in _CrmLayout.cshtml.
   ============================ */

:root {
    /* ---- Type ---- */
    --crm-font-display: 'Fraunces', 'Iowan Old Style', Cambria, Georgia, serif;
    --crm-font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', sans-serif;
    --crm-font-mono:    'Geist Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

    /* ---- Text ---- */
    --crm-text:        #16325c;  /* primary navy */
    --crm-text-strong: #0e2240;  /* headings, active labels */
    --crm-text-muted:  #5e6b7c;  /* secondary copy */
    --crm-text-faint:  #99a4b3;  /* disabled / placeholders */

    /* ---- Surfaces ---- */
    --crm-surface-app:     #f6f7f3;  /* app backdrop behind shell */
    --crm-surface-sidebar: #fbfaf5;  /* warm cream sidebar */
    --crm-surface-content: #ffffff;  /* workspace bar + content */
    --crm-surface-subtle:  #fafaf9;  /* alt row, subtab strip */
    --crm-hover:           #f1f3ee;  /* generic hover bg */

    /* ---- Borders / dividers ---- */
    --crm-border:         #e2e0d8;
    --crm-divider:        rgba(42, 143, 45, 0.16);
    --crm-divider-subtle: rgba(42, 143, 45, 0.10);
    --crm-border-subtle:  #e9f3e6;  /* legacy pale green — still referenced by some content rules */

    /* ---- Brand & links ---- */
    --crm-brand:         #2a8f2d;  /* Value green */
    --crm-brand-strong:  #1f6f22;  /* deepened for active icons */
    --crm-brand-bg:      #f1f8ed;  /* pale green active surface */
    --crm-brand-bg-soft: #f7faf3;  /* fainter green hover surface */
    --crm-link:          #0070d2;  /* link blue (kept for content) */
    --crm-link-hover:    #005fb2;

    /* ---- Status accents ---- */
    --crm-star:        #f4b400;  /* favorited star fill */
    --crm-star-hover:  #d99a00;  /* favorited star — hover/active darken */
    --crm-danger:      #ea001e;  /* destructive actions (sign out, remove) */

    /* ---- Gauge chart traffic-light scale ---- */
    --crm-gauge-green:       #04844b;
    --crm-gauge-yellow:      #ffb75d;
    --crm-gauge-yellow-text: #b25900;  /* darker amber for readable text on white */
    --crm-gauge-red:         #c23934;

    /* ---- Shell geometry ---- */
    --crm-sidebar-width: 248px;

    /* ---- Tile / icon size scale (used by content rules) ---- */
    --tile-xs:   20px;  /* feed headlines */
    --tile-sm:   22px;  /* subtab */
    --tile-md:   26px;  /* panel header, workspace tab */
    --tile-lg:   28px;  /* (legacy) */
    --tile-xl:   32px;  /* (legacy) */
    --tile-2xl:  36px;  /* list-page title */
    --tile-3xl:  40px;  /* record-page header */
    --tile-fill: 88%;
    --icon-base: 14px;

    /* ---- Radius ---- */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;

    /* ---- Motion ---- */
    --transition-fast: 0.12s ease;
    --transition-base: 0.18s cubic-bezier(0.2, 0.6, 0.2, 1);
    --transition-slow: 0.3s  cubic-bezier(0.2, 0.6, 0.2, 1);

    /* ---- Z-index ladder ---- */
    --z-tab-active:  1;
    --z-dropdown:    100;
    --z-modal:       1000;
    --z-avatar-menu: 1500;
    --z-toast:       2000;
}

.crm-body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    background: var(--crm-surface-app);
    color: var(--crm-text);
    font-family: var(--crm-font-body);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

/* ============================
   Shell — sidebar + content grid
   ============================ */
.crm-shell {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: var(--crm-sidebar-width) 1fr;
    /* Pin the single row to the shell's height. Left auto, a sidebar taller
       than the viewport grows the row past 100vh and .crm-body just clips
       it — the row must stay fixed so the sidebar nav shrinks + scrolls. */
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}

/* ============================
   Sidebar
   ============================ */
.crm-sidebar {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 14px 8px;
    background: var(--crm-surface-sidebar);
    border-right: 1px solid var(--crm-divider);
    position: relative;
    /* overflow stays visible so hover-tooltips on the toggle button and
       collapsed nav items can extend rightward into the content area. */
}

/* Botanical accent — a vertical green hairline on the inside right edge,
   brighter at the top and fading down. Reads as a sliver of leaf against
   parchment; zero functional role, all atmosphere. */
.crm-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(42, 143, 45, 0.55) 0,
        rgba(42, 143, 45, 0.22) 28%,
        rgba(42, 143, 45, 0)    100%);
    pointer-events: none;
}

/* ---- Brand mark ---- */
.crm-sidebar-brand {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px 18px;
    text-decoration: none;
    color: inherit;
}

.crm-sidebar-brand-img {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* ---- Search ---- */
.crm-sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* only the nav shrinks on short viewports */
    padding: 7px 10px;
    margin: 0 0 18px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    transition: border-color var(--transition-base),
                box-shadow   var(--transition-base),
                background   var(--transition-base);
}

.crm-sidebar-search:focus-within {
    background: #fff;
    border-color: var(--crm-brand);
    box-shadow: 0 0 0 3px var(--crm-brand-bg);
}

.crm-sidebar-search-icon {
    display: inline-flex;
    color: var(--crm-text-muted);
}
.crm-sidebar-search-icon .crm-icon { width: 14px; height: 14px; }

.crm-sidebar-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 13px;
    color: var(--crm-text);
}
.crm-sidebar-search-input::placeholder { color: var(--crm-text-faint); }

/* X button that clears the input. Shown only when the input has text. */
.crm-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--crm-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.crm-search-clear[hidden] { display: none; }
.crm-search-clear:hover {
    background: var(--crm-hover);
    color: var(--crm-text);
}
.crm-search-clear .crm-icon { width: 10px; height: 10px; }

/* ---- Scope chip on the right of the sidebar search input ----
   Replaces the previous "/" kbd hint. The chip opens a small menu that
   restricts the search to a single record type (or All). */
.crm-search-scope-wrap {
    position: relative;
    flex-shrink: 0;
}

.crm-search-scope {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px 2px 6px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--crm-text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}

.crm-search-scope:hover,
.crm-search-scope[aria-expanded="true"] {
    background: var(--crm-hover);
    color: var(--crm-text);
}

.crm-search-scope-caret {
    width: 10px;
    height: 10px;
}

.crm-search-scope-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1500;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.crm-search-scope-menu[hidden] { display: none; }

.crm-search-scope-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--crm-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.crm-search-scope-option:hover { background: var(--crm-hover); }
.crm-search-scope-option.is-active {
    background: var(--crm-brand-bg);
    color: var(--crm-brand);
    font-weight: 600;
}

.crm-search-scope-option-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.crm-search-scope-option-icon .crm-icon { width: 14px; height: 14px; color: var(--crm-text-muted); }
.crm-search-scope-option-icon .crm-tile-icon { width: 16px; height: 16px; }

/* ---- Search results overlay ----
   Position is set by JS (fixed, anchored to the search input's bottom-left).
   Width breaks out of the narrow sidebar — extends right over the main
   content area so long result labels have room. */
.crm-search-results {
    position: fixed;
    /* border-box so the JS-set width is the visual width — content-box made
       every offsetWidth read-back grow the overlay by the border. */
    box-sizing: border-box;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: min(640px, calc(100vh - 120px));
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    z-index: 1400;
    overflow-y: auto;
    overflow-x: hidden;
}

.crm-search-results[hidden] { display: none; }

.crm-search-results-empty {
    padding: 14px 16px;
    color: var(--crm-text-faint);
    font-size: 13px;
}

/* Result group (one per record type). */
.crm-search-results-group + .crm-search-results-group {
    border-top: 1px solid var(--crm-border);
}

.crm-search-results-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 4px;
    color: var(--crm-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Group-header icon is monochrome — overrides the global tile-icon
   white fill (the standard SVGs are designed for a colored tile). */
.crm-search-results-group-header .crm-tile-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Result row (one per record). */
.crm-search-results-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--crm-text);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.12s;
}
.crm-search-results-item:hover { background: var(--crm-hover); }

.crm-search-results-item mark {
    background: var(--crm-brand-bg);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* Row icon reuses .crm-panel-icon's default --tile-md size and the
   global --tile-fill ratio for the inner SVG. flex-shrink:0 so the
   tile doesn't get squeezed when the title grows. */
.crm-search-results-item .crm-panel-icon {
    flex-shrink: 0;
}

.crm-search-results-item-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-search-results-item-title {
    color: var(--crm-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-search-results-item-subtitle {
    color: var(--crm-text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Why this matched" line — names the searched field (Site Address,
   Description, ...) whose hit isn't visible in the title/subtitle. */
.crm-search-results-item-match {
    color: var(--crm-text-muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-search-results-item-match-field {
    color: var(--crm-text-faint);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .03em;
}

/* Per-group "Show more" — pages in 5 further results for that record type. */
.crm-search-results-more {
    display: block;
    width: 100%;
    padding: 6px 14px 8px;
    border: none;
    background: none;
    color: var(--crm-brand-strong);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.crm-search-results-more:hover { background: var(--crm-hover); text-decoration: underline; }
.crm-search-results-more:disabled {
    color: var(--crm-text-faint);
    cursor: default;
    text-decoration: none;
    background: none;
}

/* ---- Nav ---- */
.crm-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Shrinkable so a short viewport squeezes the nav (scrolled via
       .is-scrollable below) instead of pushing the bell/footer off-screen. */
    flex: 0 1 auto;
    min-height: 0;
}

/* The nav squeezes as a whole and scrolls — its children must keep their
   natural height. Without this, flexbox crushes any child whose overflow
   isn't visible (the eyebrows, which clip for the collapse animation) to a
   fraction of its height before the scrollbar engages. */
.crm-sidebar-nav > * {
    flex-shrink: 0;
}

/* Scroll only when the items actually overflow (JS toggles the class):
   a permanent scroll container would clip the right-flyout popups and
   collapsed-mode hover tooltips even when there's plenty of room. The
   flyouts survive scrolling by being viewport-fixed at open time —
   see crmPositionSidebarMenu in _CrmLayout. */
.crm-sidebar-nav.is-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.14) transparent;
}
.crm-sidebar-nav.is-scrollable::-webkit-scrollbar { width: 5px; }
.crm-sidebar-nav.is-scrollable::-webkit-scrollbar-track { background: transparent; }
.crm-sidebar-nav.is-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 3px;
}
.crm-sidebar-nav.is-scrollable:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.26); }

/* Collapsed rail: still wheel/touch-scrollable, but chromeless — a visible
   scrollbar would eat a third of the 36px rail. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-nav.is-scrollable { scrollbar-width: none; }
.crm-shell.is-sidebar-collapsed .crm-sidebar-nav.is-scrollable::-webkit-scrollbar { display: none; }

.crm-sidebar-eyebrow {
    padding: 6px 12px;
    color: var(--crm-text-faint);
    font-family: var(--crm-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* No mid-animation reflow (see .crm-sidebar-item-label). */
    white-space: nowrap;
    overflow: hidden;
}

.crm-sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--crm-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: background var(--transition-fast), color var(--transition-fast);

    /* First-paint stagger. --stagger is set inline per item; without it,
       the animation still runs (calc treats the missing var as 0). */
    opacity: 0;
    transform: translateX(-4px);
    animation: crmSidebarItemIn 360ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    animation-delay: calc(60ms + var(--stagger, 0) * 40ms);
}

.crm-sidebar-item:hover {
    color: var(--crm-text);
    background: var(--crm-brand-bg-soft);
}

.crm-sidebar-item.is-active {
    color: var(--crm-text-strong);
    background: var(--crm-brand-bg);
}

/* Active item: a thin green accent bar bleeding off the left padding.
   Pseudo so the item's bg still paints around it. */
.crm-sidebar-item.is-active::before {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: -14px;
    width: 3px;
    background: var(--crm-brand);
    border-radius: 0 2px 2px 0;
}

/* Quick Settings toggle (Translation on/off): a sidebar item with a pill switch
   pushed to the right edge. */
.crm-quick-toggle {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.crm-quick-switch {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--crm-border);
    transition: background var(--transition-fast);
}

.crm-quick-switch-knob {
    display: block;
    width: 14px;
    height: 14px;
    margin: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-fast);
}

.crm-quick-toggle.is-on .crm-quick-switch { background: var(--crm-brand); }
.crm-quick-toggle.is-on .crm-quick-switch-knob { transform: translateX(14px); }

/* No room for the switch in the collapsed rail — the icon still toggles. */
.crm-shell.is-sidebar-collapsed .crm-quick-switch { display: none; }

/* Translation disabled (per-device) → hide every feed Translate button and any
   already-shown translation panel. */
.crm-translation-off .crm-feed-translate,
.crm-translation-off .crm-feed-translation { display: none !important; }

.crm-sidebar-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--crm-text-faint);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.crm-sidebar-item-icon .crm-icon { width: 16px; height: 16px; }

/* SLDS standard-sprite icons (case/account/contact) are designed
   white-on-color and the global `.crm-tile-icon` rule sets fill: #fff
   for that use. In the sidebar we strip the tile and render them
   monochrome — parent-scoped selector wins over the global
   `.crm-tile-icon` (specificity 0,2,0 vs 0,1,0), forcing
   fill: currentColor regardless of rule order in the file.

   Sized larger than the utility icon (Home) because standard-sprite
   glyphs ship with built-in padding to accommodate a colored tile;
   without the tile they look ~25% smaller at the same nominal box. */
.crm-sidebar-item-icon .crm-sidebar-item-svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.crm-sidebar-item:hover .crm-sidebar-item-icon,
.crm-sidebar-item.is-active .crm-sidebar-item-icon {
    color: var(--crm-brand-strong);
}

.crm-sidebar-item-label {
    flex: 1;
    min-width: 0;
    /* One line always: at intermediate widths during the collapse/expand
       animation the label would otherwise reflow to two lines and snap back. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes crmSidebarItemIn {
    to { opacity: 1; transform: translateX(0); }
}

.crm-sidebar-spacer { flex: 1 1 auto; min-height: 12px; }

/* Tighter top spacing for an eyebrow that follows a list of items (the
   default 6px hugs them too closely). Used to separate "Favorites" from
   the workspace items above it. */
.crm-sidebar-eyebrow-spaced { margin-top: 10px; }

/* ============================
   Favorites — star toggle + caret popup

   Star button = toggle fav-state for the current page (yellow when
   saved). Caret button = open the popup list of saved pages, which is
   anchored to the right of the sidebar so it can be wider than the
   rail. Both buttons live in .crm-fav-wrap, which is position:relative
   so the popup's absolute positioning is computed against it.
   ============================ */
.crm-fav-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2px;
}

/* Toggle = sidebar-item visuals, minus the link semantics. Reuses
   .crm-sidebar-item-icon / .crm-sidebar-item-label inside so the icon
   and label inherit the rest of the sidebar's collapse / hover rules. */
.crm-fav-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--crm-text-muted);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.crm-fav-toggle:hover {
    color: var(--crm-text);
    background: var(--crm-brand-bg-soft);
}
.crm-fav-toggle:hover .crm-sidebar-item-icon { color: var(--crm-brand-strong); }

.crm-fav-toggle:disabled { cursor: progress; opacity: 0.6; }

/* Yellow star when the current page is saved. Color cascades via
   currentColor down to the SVG fill rules already set globally.
   Declared AFTER the hover rule so the yellow wins on .is-active:hover. */
.crm-fav-toggle.is-active .crm-fav-toggle-icon { color: var(--crm-star); }
.crm-fav-toggle.is-active:hover .crm-fav-toggle-icon { color: var(--crm-star-hover); }

.crm-fav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--crm-text-faint);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.crm-fav-caret:hover {
    color: var(--crm-text);
    background: var(--crm-brand-bg-soft);
}
.crm-fav-caret .crm-icon { width: 11px; height: 11px; }

/* Hover chips for the favorites-group buttons (Followed / star / caret /
   history) — same idiom and 400 ms rhythm as the collapse toggle's chip.
   The buttons aren't positioned, so the chip anchors to .crm-fav-wrap and
   floats just right of the rail like the collapsed nav-item chips. */
.crm-fav-toggle::after,
.crm-fav-caret::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    padding: 5px 10px;
    background: var(--crm-text-strong);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: var(--z-dropdown);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(14, 34, 64, 0.18);
    opacity: 0;
}
.crm-fav-toggle:hover::after,
.crm-fav-caret:hover::after {
    opacity: 1;
    transition: opacity 0.12s ease 0.4s;
}

/* No chip while this group's popup is open (it would float over the menu
   header), and none inside a scrolling nav (the container would clip it —
   the expanded labels / native titles cover it there). */
.crm-fav-wrap:has(.crm-fav-menu:not([hidden])) .crm-fav-toggle::after,
.crm-fav-wrap:has(.crm-fav-menu:not([hidden])) .crm-fav-caret::after,
.crm-sidebar-nav.is-scrollable .crm-fav-toggle::after,
.crm-sidebar-nav.is-scrollable .crm-fav-caret::after {
    display: none;
}

/* Popup list — anchored to the right of the wrap so it sits outside the
   sidebar rail (.crm-sidebar has overflow:visible, see the comment at
   .crm-sidebar). Wide enough for typical page titles; clipped vertically
   with internal scroll so a long list doesn't push past the viewport. */
.crm-fav-menu {
    position: absolute;
    top: 0;
    left: calc(100% + 16px);
    width: 320px;
    max-height: 440px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(14, 34, 64, 0.18);
    z-index: var(--z-avatar-menu);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: crm-fav-menu-fade 0.15s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.crm-fav-menu[hidden] { display: none; }

.crm-fav-menu-header {
    padding: 12px 16px;
    background: var(--crm-surface-subtle);
    border-bottom: 1px solid var(--crm-hover);
    font-family: var(--crm-font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--crm-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.crm-fav-menu-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.crm-fav-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    color: var(--crm-text);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.crm-fav-menu-item:hover {
    background: var(--crm-hover);
    color: var(--crm-brand);
}

.crm-fav-menu-item-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--crm-text-muted);
}
.crm-fav-menu-item:hover .crm-fav-menu-item-icon { color: var(--crm-brand); }
.crm-fav-menu-item-icon .crm-icon { width: 14px; height: 14px; }

/* Star fallback (untyped favorites — e.g. the home page) keeps the yellow
   star regardless of row hover state. */
.crm-fav-menu-item-icon-star { color: var(--crm-star); }
.crm-fav-menu-item:hover .crm-fav-menu-item-icon-star { color: var(--crm-star); }

/* Standard-sprite icons (case/account/contact) are designed white-on-color
   tiles; in the popup we render them monochrome so they inherit the row
   color. Same trick as .crm-sidebar-item-svg — the parent-scoped selector
   (0,2,0) wins over the global .crm-tile-icon { fill: #fff } (0,1,0). */
.crm-fav-menu-item-icon .crm-fav-menu-item-svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.crm-fav-menu-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Followed cases — unread activity: red dots on popup rows; the sidebar
   button signals more quietly by turning its icon brand-green. */
.crm-fav-menu-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crm-danger);
    flex-shrink: 0;
}
.crm-followed-icon.is-unread { color: var(--crm-brand); }

/* Remove (×) — invisible until row hover so the list reads cleanly at
   rest. Click bubbling is suppressed in JS so removing doesn't navigate. */
.crm-fav-menu-item-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--crm-text-faint);
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.crm-fav-menu-item-remove .crm-icon { width: 11px; height: 11px; }
.crm-fav-menu-item:hover .crm-fav-menu-item-remove { opacity: 1; }
.crm-fav-menu-item-remove:hover {
    background: var(--crm-hover);
    color: var(--crm-danger);
}

.crm-fav-menu-empty {
    padding: 18px 16px;
    color: var(--crm-text-muted);
    font-size: 12px;
    text-align: center;
    line-height: 1.45;
}

@keyframes crm-fav-menu-fade {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Collapsed sidebar: star centered in the rail, caret floats to its
   right. The caret is taken out of the flex flow with absolute
   positioning so the star is the only flex child for justify-content
   to center on — otherwise the pair would center as a group and the
   star would sit left-of-center. Eyebrow "Favorites" is hidden by the
   existing rule that catches all eyebrows. */
.crm-shell.is-sidebar-collapsed .crm-fav-wrap {
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 5px;
}

/* Rail dividers — collapsed mode only. Both have a fixed pixel width
   (not inset from the rail edges) so the line length stays constant
   while the sidebar width animates between expanded and collapsed.
   Color is the inactive icon hue (#99a4b3) at 30% alpha, intentionally
   barely-there so it reads as a hairline rest, not a UI seam. */

/* Group divider above the favorites rail group. Drawn on the group's FIRST
   element only: normally the Log a Call item (rule below); the wrap rule
   here covers read-only roles, where Log a Call is absent and a fav-wrap
   (Followed) opens the group. Positioned absolutely against the wrap
   (already position:relative for the caret/menu). */
.crm-shell.is-sidebar-collapsed .crm-fav-wrap::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(153, 164, 179, 0.3);
}

/* The group start is Log a Call when present: divider above it (between
   the Calendar and phone icons)... */
.crm-shell.is-sidebar-collapsed .crm-sidebar-item[data-ctrl="CrmLogCall"] {
    position: relative;
    margin: 5px auto 0;
}
.crm-shell.is-sidebar-collapsed .crm-sidebar-item[data-ctrl="CrmLogCall"]::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(153, 164, 179, 0.3);
}

/* ...and everything after the group's first element draws no line of its
   own: a wrap directly after Log a Call, or after another wrap (Followed /
   Save this page / View history are one group). */
.crm-shell.is-sidebar-collapsed .crm-sidebar-item[data-ctrl="CrmLogCall"] + .crm-fav-wrap::before,
.crm-shell.is-sidebar-collapsed .crm-fav-wrap + .crm-fav-wrap::before {
    display: none;
}

/* Above the first nav item: pseudo becomes the first flex child of
   .crm-sidebar-nav so it sits between the rail search (outside the
   nav) and Home. margin:auto on the horizontal axis centers the
   fixed-width line on the cross axis of the column-flex parent. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-nav::before {
    content: '';
    width: 28px;
    height: 1px;
    background: rgba(153, 164, 179, 0.3);
    margin: 1px auto;
    flex-shrink: 0;
}
.crm-shell.is-sidebar-collapsed .crm-fav-toggle {
    flex: 0 0 auto;
    gap: 0;
    padding: 6px 4px;
}
.crm-shell.is-sidebar-collapsed .crm-fav-caret {
    position: absolute;
    top: 50%;
    left: calc(50% + 10px); /* tucked closer to the star's right edge */
    transform: translateY(-50%);
    padding: 4px 2px;
}
/* Anchor the popup to the right of the rail in collapsed mode too — the
   wrap's right edge is closer in, so push it past the rail. */
.crm-shell.is-sidebar-collapsed .crm-fav-menu {
    left: calc(100% + 12px);
}

/* ---- Sidebar foot (user card + avatar menu) ---- */
.crm-sidebar-foot {
    position: relative;
    flex-shrink: 0; /* only the nav shrinks on short viewports */
    margin-top: 4px;
}

.crm-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--crm-text);
    font: inherit;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.crm-sidebar-user:hover {
    background: var(--crm-brand-bg-soft);
    border-color: var(--crm-divider-subtle);
}

.crm-sidebar-user[aria-expanded="true"] {
    background: var(--crm-brand-bg);
    border-color: var(--crm-divider);
}

.crm-sidebar-user-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #fff;
    box-shadow: 0 1px 2px rgba(14, 34, 64, 0.08);
}

.crm-sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}

.crm-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-sidebar-user-email {
    font-size: 11px;
    color: var(--crm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-sidebar-user-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-text-faint);
    transition: color var(--transition-fast), transform var(--transition-base);
}
.crm-sidebar-user-caret .crm-icon { width: 10px; height: 10px; }

.crm-sidebar-user[aria-expanded="true"] .crm-sidebar-user-caret {
    color: var(--crm-brand);
    transform: rotate(180deg);
}

/* ============================
   User profile dropdown (avatar)
   ============================ */
.crm-avatar-wrap {
    position: relative;
    display: inline-block;
}

.crm-avatar-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 280px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: var(--z-avatar-menu);
    overflow: hidden;
    animation: crm-avatar-menu-fade 0.15s ease-out;
}

.crm-avatar-menu[hidden] { display: none; }

.crm-avatar-menu-header {
    padding: 18px 16px 14px;
    background: var(--crm-surface-subtle);
    text-align: center;
    border-bottom: 1px solid var(--crm-hover);
}

.crm-avatar-menu-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--crm-brand);
    margin-bottom: 8px;
    display: inline-block;
}

.crm-avatar-menu-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-avatar-menu-email {
    font-size: 12px;
    color: var(--crm-text-muted);
    margin-top: 2px;
    word-break: break-all;
}

.crm-avatar-menu-divider {
    height: 1px;
    background: var(--crm-hover);
}

.crm-avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--crm-text);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
}

.crm-avatar-menu-item:hover {
    background: var(--crm-hover);
    color: var(--crm-brand);
}

.crm-avatar-menu-item i {
    width: 18px;
    color: var(--crm-text-muted);
    text-align: center;
    font-size: 13px;
}

.crm-avatar-menu-item:hover i { color: var(--crm-brand); }

.crm-avatar-menu-row {
    display: flex;
    border-top: 1px solid var(--crm-hover);
}

.crm-avatar-menu-item-row {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}

.crm-avatar-menu-item-row i { font-size: 12px; }

.crm-avatar-menu-exit {
    color: var(--crm-text);
    border-right: 1px solid var(--crm-hover);
}

.crm-avatar-menu-exit:hover {
    background: #eef4ff;
    color: var(--crm-link);
}

.crm-avatar-menu-signout { color: var(--crm-danger); }

.crm-avatar-menu-signout:hover {
    background: #fdeaeb;
    color: #ba001a;
}

@keyframes crm-avatar-menu-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar-foot variant — opens UPWARD from the user card instead of
   DOWN from the header right. Width matches the sidebar inner width
   (100% of .crm-sidebar-foot) so it doesn't overflow into the content
   column, where .crm-sidebar's overflow: hidden would clip it. */
.crm-avatar-menu-sidebar {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 100%;
    transform-origin: bottom left;
    box-shadow: 0 -8px 24px rgba(14, 34, 64, 0.18);
    animation: crm-avatar-menu-fade-up 0.18s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Tighten the menu header for the narrower sidebar context — drop the
   avatar size and crank up text wrap so name/email fit cleanly. */
.crm-avatar-menu-sidebar .crm-avatar-menu-header { padding: 14px 12px 12px; }
.crm-avatar-menu-sidebar .crm-avatar-menu-img    { width: 48px; height: 48px; }
.crm-avatar-menu-sidebar .crm-avatar-menu-email  { word-break: break-all; font-size: 11px; }
.crm-avatar-menu-sidebar .crm-avatar-menu-item   { padding: 9px 12px; }
.crm-avatar-menu-sidebar .crm-avatar-menu-item-row { padding: 9px 6px; }

@keyframes crm-avatar-menu-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================
   Sidebar — head row + collapse/expand toggle

   The head bundles the toggle button + brand mark in a single row at
   the top of the sidebar. Shell-level class `.is-sidebar-collapsed`
   shrinks --crm-sidebar-width to a narrow icon rail: brand, search,
   eyebrow, item labels, and user-card metadata all collapse to nothing;
   only the toggle, the nav icons, and the avatar circle remain.

   The toggle button stays anchored at the top-left in both states; its
   chevron rotates 180° to indicate the next click's action.
   ============================ */

.crm-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0; /* only the nav shrinks on short viewports */
    /* min-height tracks the brand-img height so the head doesn't collapse
       around the toggle when the brand is hidden (collapsed state). With
       `align-self: flex-end` on the toggle, this keeps its vertical
       position consistent between expanded and collapsed. */
    min-height: 38px;
    padding: 0 0 18px;
}

/* Invisible spacer mirroring the toggle's width on the opposite side, so
   the brand centers between two equal-width bookends rather than hugging
   the left edge. Hidden in collapsed state (see further below). Height
   tracks the toggle so the head row doesn't collapse around it. */
.crm-sidebar-head::before {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 38px;
}

/* Inside the head row, the row provides spacing — zero out the brand's
   own padding so the toggle + brand align cleanly. */
.crm-sidebar-head .crm-sidebar-brand {
    padding: 0;
    min-width: 0;
}

.crm-sidebar-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--crm-text-muted);
    cursor: pointer;
    transition: background   var(--transition-fast),
                color        var(--transition-fast),
                border-color var(--transition-fast);
}

.crm-sidebar-toggle:hover {
    background: var(--crm-brand-bg-soft);
    border-color: var(--crm-divider-subtle);
    color: var(--crm-text-strong);
}

/* Tooltip pseudo on the toggle. Same chip styling as the collapsed nav-item
   tooltip, but with a 400 ms delay on hover-in (browser-tooltip rhythm)
   so the toggle doesn't ambient-flash a hint every time the cursor
   crosses it. Hover-out is instant: the transition is scoped to :hover. */
.crm-sidebar-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    padding: 5px 10px;
    background: var(--crm-text-strong);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: var(--z-dropdown);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(14, 34, 64, 0.18);
    opacity: 0;
}

.crm-sidebar-toggle:hover::after {
    opacity: 1;
    transition: opacity 0.12s ease 0.4s;
}

.crm-sidebar-toggle-icon {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-base);
}

/* ---- Collapsed state ---- */

/* Smooth width transition. grid-template-columns interpolates between
   length-1fr pairs in modern browsers. */
.crm-shell {
    transition: grid-template-columns var(--transition-slow);
}

/* While the rail width animates (`is-sidebar-animating`, added by the
   toggle JS for the transition's duration), hold back the text and the
   fav carets — they'd otherwise pop in clipped or teleport between their
   collapsed/expanded positions. Each fades in once the width settles. */
.crm-sidebar-brand,
.crm-sidebar-search,
.crm-sidebar-eyebrow,
.crm-sidebar-item-label,
.crm-sidebar-user-meta,
.crm-fav-caret {
    transition: opacity 0.1s ease;
}
.crm-shell.is-sidebar-animating .crm-sidebar-brand,
.crm-shell.is-sidebar-animating .crm-sidebar-search,
.crm-shell.is-sidebar-animating .crm-sidebar-eyebrow,
.crm-shell.is-sidebar-animating .crm-sidebar-item-label,
.crm-shell.is-sidebar-animating .crm-sidebar-user-meta,
.crm-shell.is-sidebar-animating .crm-fav-caret {
    opacity: 0;
}

.crm-shell.is-sidebar-collapsed {
    --crm-sidebar-width: 64px;
}

/* Rotate the chevron 180° — click action flips to "expand". */
.crm-shell.is-sidebar-collapsed .crm-sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Hide everything that depends on horizontal space. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-brand,
.crm-shell.is-sidebar-collapsed .crm-sidebar-search,
.crm-shell.is-sidebar-collapsed .crm-sidebar-eyebrow,
.crm-shell.is-sidebar-collapsed .crm-sidebar-item-label,
.crm-shell.is-sidebar-collapsed .crm-sidebar-user-meta,
.crm-shell.is-sidebar-collapsed .crm-sidebar-user-caret,
.crm-shell.is-sidebar-collapsed .crm-sidebar-head::before {
    display: none;
}

.crm-shell.is-sidebar-collapsed .crm-sidebar-head {
    justify-content: center;
}

/* Rail-only search trigger: hidden in expanded mode (the full search
   bar shows instead), promoted to a 36px square icon button when the
   sidebar collapses. Styling matches the nav items so it reads as a
   peer affordance. */
.crm-sidebar-rail-search {
    display: none;
}

.crm-shell.is-sidebar-collapsed .crm-sidebar-rail-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 6px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--crm-text-faint);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.crm-shell.is-sidebar-collapsed .crm-sidebar-rail-search .crm-icon {
    width: 16px;
    height: 16px;
}

.crm-shell.is-sidebar-collapsed .crm-sidebar-rail-search:hover {
    color: var(--crm-brand-strong);
    background: var(--crm-brand-bg-soft);
}

/* Hover-tooltip chip (instant, same idiom as the nav items). */
.crm-shell.is-sidebar-collapsed .crm-sidebar-rail-search:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    background: var(--crm-text-strong);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: var(--z-dropdown);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(14, 34, 64, 0.18);
}

.crm-shell.is-sidebar-collapsed .crm-sidebar-item {
    justify-content: center;
    padding: 8px 0;
    margin: 0 auto;
    width: 36px;
}

/* Quick Settings (Translation) is its own rail group in collapsed mode: a small
   gap + the same hairline divider as the one above the favorites star. */
.crm-shell.is-sidebar-collapsed .crm-quick-toggle {
    margin-top: 5px;
}
.crm-shell.is-sidebar-collapsed .crm-quick-toggle::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(153, 164, 179, 0.3);
}
/* The pill switch is hidden in the rail, so the icon color conveys the state —
   green when translation is on. */
.crm-shell.is-sidebar-collapsed .crm-quick-toggle.is-on .crm-sidebar-item-icon {
    color: var(--crm-brand);
}

/* Drop the left-bleed accent — it would render in dead space outside
   the rail. The bg color still conveys active state. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-item.is-active::before {
    display: none;
}

/* The entrance animation leaves a transform on every .crm-sidebar-item, so each item is its
   own stacking context — which otherwise traps the hover tooltip's z-index below page content
   (e.g. the Calendar). Lift the hovered item's context above the content so the tooltip wins. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-item:hover {
    z-index: var(--z-dropdown);
}

/* Hover-tooltip pattern for the rail. Each item's label is normally
   display:none in collapsed state; on hover we promote it to an
   absolute-positioned chip floating immediately to the right of the
   rail. No transition — appears synchronously with the hover state. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-item:hover .crm-sidebar-item-label {
    display: block;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    background: var(--crm-text-strong);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: var(--z-dropdown);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(14, 34, 64, 0.18);
}

/* While the collapsed rail scrolls, the chip would be clipped by the scroll
   container — suppress it; measure() swaps in native title tooltips instead. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-nav.is-scrollable .crm-sidebar-item:hover .crm-sidebar-item-label {
    display: none;
}

/* Square hover/active box in the rail (was 36×48 because of vertical
   padding) — zero vertical padding leaves the avatar's 36×36 footprint. */
.crm-shell.is-sidebar-collapsed .crm-sidebar-user {
    justify-content: center;
    padding: 0;
    gap: 0;
}

.crm-shell.is-sidebar-collapsed .crm-sidebar-user-img {
    width: 36px;
    height: 36px;
}

/* Menu can no longer be 100% of a 64px-wide foot — give it an explicit
   readable width that extends rightward into the content area. */
.crm-shell.is-sidebar-collapsed .crm-avatar-menu-sidebar {
    width: 248px;
}

/* ============================
   Content column — workspace tabs + subtab strip + main
   ============================ */
.crm-content {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--crm-surface-content);
}

/* Primary-tab strip. Hosts .crm-tabs-open. The whole row collapses to
   zero height when no tabs are open so the gradient main flows up to
   the top edge. :has() is baseline-supported in target browsers. */
.crm-workspace {
    flex-shrink: 0;
    background: var(--crm-surface-content);
    border-bottom: 1px solid var(--crm-divider-subtle);
}
.crm-workspace:has(.crm-tabs-open:empty) { display: none; }

.crm-tabs-open {
    display: flex;
    align-items: stretch;
    height: 38px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Thin, faint scroll bar that stays out of the way (Firefox). */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.14) transparent;
}
/* Slim, unobtrusive horizontal scroll bar for the tab strips (WebKit/Blink). */
.crm-tabs-open::-webkit-scrollbar { height: 5px; }
.crm-tabs-open::-webkit-scrollbar-track { background: transparent; }
.crm-tabs-open::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 3px;
}
.crm-tabs-open:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.26); }
.crm-tabs-open:hover { scrollbar-color: rgba(0, 0, 0, 0.26) transparent; }

/* ============================
   Workspace tabs — Layer 1 (primary) and Layer 2 (subtabs)

   Visual grammar: text + small monochrome glyph, separated by faint
   vertical dividers. NO colored object tiles — meaning lives in the
   label, the glyph plays a supporting role. Active state is a thin
   green underline on the active row; in two-layer mode the underline
   migrates to the subtab below so there's exactly one accent pointing
   at the current focus.
   ============================ */
.crm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    color: var(--crm-text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--crm-divider-subtle);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    /* Tabs are controls, not copy — also prevents stray text highlighting
       when a drag starts before the threshold trips. */
    user-select: none;
}

.crm-tab:hover {
    color: var(--crm-text);
    background: var(--crm-brand-bg-soft);
}

.crm-tab.active {
    color: var(--crm-text-strong);
    font-weight: 600;
    background: var(--crm-surface-content);
}

/* Active underline — inset slightly so it doesn't run into the right
   divider. Pseudo keeps it above any hover paint. */
.crm-tab.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--crm-brand);
    border-radius: 1px 1px 0 0;
    z-index: var(--z-tab-active);
}

/* Two-layer mode: hand the accent off to the active subtab below.
   The primary stays bold but loses its underline — one accent per row,
   on the row that owns the focus. */
.crm-tab.active.has-subtabs::after { display: none; }

/* Strip the colored object-tile. All types render with a monochrome glyph
   that inherits the tab's text color. */
.crm-tab .crm-tab-icon-tile {
    width: 16px;
    height: 16px;
    background: transparent;
    color: inherit;
    flex-shrink: 0;
}
.crm-tab .crm-tab-icon-tile .crm-tile-icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.crm-tab-label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--crm-text-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity    var(--transition-fast),
                color      var(--transition-fast),
                background var(--transition-fast);
}
.crm-tab-close .crm-icon { width: 10px; height: 10px; }

.crm-tab:hover     .crm-tab-close,
.crm-tab.active    .crm-tab-close,
.crm-subtab:hover  .crm-tab-close,
.crm-subtab.active .crm-tab-close { opacity: 1; }

.crm-tab-close:hover {
    background: var(--crm-divider-subtle);
    color: var(--crm-text-strong);
}

/* ---- Subtab strip ---- */
.crm-subtabs-row {
    display: flex;
    align-items: stretch;
    height: 32px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.14) transparent;
    background: var(--crm-surface-subtle);
    border-bottom: 1px solid var(--crm-divider-subtle);
}
.crm-subtabs-row::-webkit-scrollbar { height: 5px; }
.crm-subtabs-row::-webkit-scrollbar-track { background: transparent; }
.crm-subtabs-row::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 3px;
}
.crm-subtabs-row:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.26); }
.crm-subtabs-row:hover { scrollbar-color: rgba(0, 0, 0, 0.26) transparent; }

.crm-subtabs-row.empty { display: none; }

.crm-subtab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    color: var(--crm-text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--crm-divider-subtle);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    user-select: none;
}

.crm-subtab:hover {
    color: var(--crm-text);
    background: var(--crm-brand-bg-soft);
}

.crm-subtab.active {
    color: var(--crm-text-strong);
    font-weight: 600;
    background: #fff;
}

.crm-subtab.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--crm-brand);
    border-radius: 1px 1px 0 0;
    z-index: var(--z-tab-active);
}

.crm-subtab .crm-tab-icon-tile {
    width: 14px;
    height: 14px;
    background: transparent;
    color: inherit;
    flex-shrink: 0;
}
.crm-subtab .crm-tab-icon-tile .crm-tile-icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.crm-subtab .crm-tab-label { max-width: 160px; }

.crm-subtab .crm-tab-close {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}
.crm-subtab .crm-tab-close .crm-icon { width: 9px; height: 9px; }

/* ---- Drag-to-reorder (both tab rows) ----
   The dragged tab tracks the pointer (inline transform, no transition);
   the tabs it passes get an opposite transform that IS transitioned, so
   they visibly slide aside. Classes managed by crm-workspace-tabs.js.
   (Tab text is unselectable via the base rules above, so a drag never
   leaves a stray highlight.) */
.crm-tabs-dragging .crm-tab:not(.is-dragging),
.crm-tabs-dragging .crm-subtab:not(.is-dragging) {
    transition: transform 0.16s ease;
}

.crm-tab.is-dragging,
.crm-subtab.is-dragging {
    z-index: 5;
    background: var(--crm-surface-content);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    cursor: grabbing;
    transition: none;
}

.crm-subtab.is-dragging { background: var(--crm-surface-subtle); }

.crm-tab.is-settling,
.crm-subtab.is-settling {
    z-index: 5;
    transition: transform 0.16s ease;
}

/* Per-object-type tile-color modifiers (.crm-tab-icon-tile-blue/purple)
   stay defined globally for record-page chrome where colored tiles read
   well, but they're suppressed inside workspace + subtab contexts so the
   tab strip stays monochrome. */
.crm-tab    .crm-tab-icon-tile-blue,
.crm-tab    .crm-tab-icon-tile-purple,
.crm-subtab .crm-tab-icon-tile-blue,
.crm-subtab .crm-tab-icon-tile-purple {
    background: transparent;
}

/* ===== Main content area ===== */
.crm-main {
    flex: 1 1 auto;
    padding: 16px;
    overflow: auto;
    /* Universal CRM page backdrop — pale Value-green at top fading to white.
       Any page that wants a different look can override on its own wrapper
       (e.g. .crm-list-page { background: ... }) without touching this rule. */
    background:
        linear-gradient(180deg,
            #bee4bc 0%,
            #d8eed5 18%,
            #ecf5e9 35%,
            var(--crm-brand-bg) 55%,
            #ffffff 75%);
    background-color: #ffffff; /* fallback for browsers without gradient support */
}

/* ===== Utility bar (bottom) ===== */
.crm-utility-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--crm-border);
    padding: 0;
    height: 28px;
    flex-shrink: 0;
}

.crm-utility-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0 14px;
    color: var(--crm-text);
    font-size: 12px;
    cursor: pointer;
    border-right: 1px solid var(--crm-border);
    height: 100%;
}

.crm-utility-btn:hover {
    background: var(--crm-hover);
}

.crm-utility-btn i {
    color: var(--crm-text-muted);
    font-size: 13px;
}

.crm-utility-tagline {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding-left: 14px;
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.crm-utility-version {
    display: flex;
    align-items: center;
    padding-right: 14px;
    color: var(--crm-text-muted);
    font-size: 11px;
}

.crm-brand-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-weight: 700;
    font-size: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.crm-brand-link:hover {
    color: var(--crm-brand);
    text-decoration: underline;
}

/* ============================
   Brand info modal
   ============================ */
.crm-brand-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-toast);
    animation: crm-brand-fade 0.18s ease-out;
}

.crm-brand-modal[hidden] { display: none; }

.crm-brand-modal-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    padding: 32px 36px 28px;
    width: 380px;
    max-width: 90vw;
    text-align: center;
    color: var(--crm-text);
    animation: crm-brand-pop 0.2s ease-out;
}

.crm-brand-modal-card h3 {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.crm-brand-modal-tagline {
    margin: 0 0 14px;
    padding-left: 0.32em;
    color: var(--crm-brand);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.crm-brand-modal-body {
    margin: 0;
    color: var(--crm-text-strong);
    font-size: 13px;
    line-height: 1.5;
}

.crm-brand-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--crm-text-faint);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.crm-brand-modal-close:hover {
    background: var(--crm-hover);
    color: var(--crm-text);
}

@keyframes crm-brand-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes crm-brand-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ============================
   Buttons (shared)
   ============================ */
.crm-btn {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    color: var(--crm-link);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Buttons are often <a> elements — kill the browser link underline. */
    text-decoration: none;
}

.crm-btn:hover:not(:disabled) { background: var(--crm-hover); }

/* Case header Follow button: swap add/check icon and emphasize the active state */
.crm-follow-btn .crm-follow-ico-check { display: none; }
.crm-follow-btn.is-following .crm-follow-ico-add { display: none; }
.crm-follow-btn.is-following .crm-follow-ico-check { display: inline-flex; }
.crm-follow-btn.is-following { font-weight: 600; }

/* Pending state while the follow POST round-trips: the icon becomes a
   spinner so the click visibly took (Record.cshtml toggles .is-busy). */
.crm-follow-btn.is-busy { cursor: progress; }
.crm-follow-btn.is-busy .crm-follow-ico-add,
.crm-follow-btn.is-busy .crm-follow-ico-check { display: none !important; }
.crm-follow-btn.is-busy::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid var(--crm-border);
    border-top-color: var(--crm-brand);
    border-radius: 50%;
    animation: crmSpin 0.7s linear infinite;
}

.crm-btn-sm { padding: 3px 10px; font-size: 12px; min-height: var(--tile-md); }

.crm-btn-primary {
    background: var(--crm-link);
    color: #fff;
    border-color: var(--crm-link);
}

.crm-btn-primary:hover { background: var(--crm-link-hover); }

.crm-btn-danger {
    color: #c23934;
    border-color: #c23934;
}
.crm-btn-danger:hover { background: #fdf3f2; }

.crm-btn-caret {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--crm-link);
}

.crm-btn-caret:hover { background: var(--crm-hover); }

/* ============================
   List page (Cases — Recently Viewed)
   ============================ */
.crm-list-page {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    /* No overflow:hidden — the view picker's dropdown opens downward past the
       header and would otherwise be clipped at the page boundary when the
       table is short. Children fill the page and don't visibly overflow the
       rounded corners on their own. */
}

.crm-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--crm-hover);
    flex-wrap: wrap;
}

.crm-list-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm-list-title-icon {
    color: #fff;
    background: #e8688f;
    width: var(--tile-2xl);
    height: var(--tile-2xl);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* SLDS sprite-based utility icon — picks up text color via currentColor */
.crm-icon {
    width: var(--icon-base);
    height: var(--icon-base);
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Spinning utility icon (e.g. spinner during sign-out). */
.crm-icon-spin { animation: crm-icon-spin 0.9s linear infinite; }
@keyframes crm-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Existing `i` rules that style FA glyphs by container — extended to include
   the new svg.crm-icon so SLDS icons inherit the same color/sizing context. */
.crm-search svg.crm-icon { color: var(--crm-text-muted); }
.crm-avatar-menu-item svg.crm-icon { width: 18px; color: var(--crm-text-muted); }
.crm-avatar-menu-item:hover svg.crm-icon { color: var(--crm-brand); }

/* List-page pin button — chunkier so the pinned/unpinned distinction is obvious. */
.crm-pin-button .crm-icon { width: 18px; height: 18px; }

/* Standard object SVG sitting inside a colored tile. White shape, sized as
   a percentage of the tile so the same rule works for list-title (36px),
   record-header (~52px), panel (~24px), and nav-tab tiles. */
.crm-tile-icon {
    width: var(--tile-fill);
    height: var(--tile-fill);
    display: block;
    fill: #fff;
}

.crm-list-eyebrow {
    font-size: 11px;
    color: var(--crm-text-muted);
    line-height: 1.2;
}

.crm-list-heading {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--crm-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-list-heading i { font-size: 12px; color: var(--crm-text-muted); }

/* List view picker */
.crm-list-view-picker {
    position: relative;
    display: flex;
    flex-direction: column;
}

.crm-list-view-trigger {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: var(--crm-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.crm-list-view-trigger:hover { color: var(--crm-link); }

.crm-list-view-trigger i { font-size: 12px; color: var(--crm-text-muted); }

.crm-list-view-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    display: none;
    z-index: var(--z-dropdown);
    margin-top: 6px;
}

.crm-list-view-picker.open .crm-list-view-menu { display: block; }

.crm-list-view-search {
    position: relative;
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--crm-hover);
}

.crm-list-view-search input {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    font-size: 13px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.crm-list-view-search input:focus { border-color: #1b96ff; box-shadow: 0 0 0 1px #1b96ff; }

.crm-list-view-search i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--crm-text-muted);
    font-size: 12px;
    pointer-events: none;
}

.crm-list-view-section { padding: 4px 0; }

.crm-list-view-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-strong);
    padding: 8px 14px 4px;
    text-transform: none;
}

.crm-list-view-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    color: var(--crm-text);
    text-decoration: none;
    font-size: 13px;
}

.crm-list-view-item:hover { background: var(--crm-hover); }

.crm-list-view-item.active {
    background: #d8edff;
    color: var(--crm-text);
    font-weight: 600;
}

.crm-list-view-item-check {
    width: 14px;
    text-align: center;
    color: var(--crm-link);
    font-size: 12px;
    flex-shrink: 0;
}

/* Pin button state */
.crm-icon-btn.pinned { color: var(--crm-link); }
.crm-icon-btn.pinned:hover { color: var(--crm-link-hover); }

/* Load More button + cap-reached hint */
.crm-load-more {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    background: var(--crm-surface-subtle);
    border-top: 1px solid var(--crm-hover);
}

.crm-load-more .crm-btn {
    min-width: 160px;
    justify-content: center;
}

.crm-load-more .crm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.crm-cap-reached {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fef9e7;
    border-top: 1px solid #f4ca64;
    color: var(--crm-text-strong);
    font-size: 13px;
}

.crm-cap-reached i { color: #f4ca64; font-size: 16px; }

/* ============================
   Floating toast (Salesforce-style)
   ============================ */
.crm-toast-container {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.crm-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    min-width: 360px;
    max-width: 720px;
    pointer-events: auto;
    animation: crm-toast-in 0.18s ease-out;
    font-size: 14px;
}

.crm-toast-success { background: #04844b; }
.crm-toast-error   { background: #c23934; }
.crm-toast-warning { background: #fe9339; color: var(--crm-text); }
.crm-toast-info    { background: var(--crm-text); }

.crm-toast.fading-out {
    animation: crm-toast-out 0.25s ease-in forwards;
}

.crm-toast-icon { font-size: 18px; line-height: 1; }

.crm-toast-message {
    flex: 1;
    line-height: 1.3;
}

.crm-toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 1;
}

.crm-toast-warning .crm-toast-close { color: rgba(22, 50, 92, 0.7); }
.crm-toast-close:hover { color: #fff; }
.crm-toast-warning .crm-toast-close:hover { color: var(--crm-text); }

.crm-toast-action {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    padding: 4px 10px;
    margin: 0 4px 0 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.crm-toast-action:hover { background: rgba(255, 255, 255, 0.3); }
.crm-toast-warning .crm-toast-action {
    background: rgba(22, 50, 92, 0.1);
    border-color: rgba(22, 50, 92, 0.4);
}
.crm-toast-warning .crm-toast-action:hover { background: rgba(22, 50, 92, 0.2); }

@keyframes crm-toast-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes crm-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}

.crm-list-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--crm-hover);
    background: var(--crm-surface-subtle);
    gap: 12px;
}

.crm-list-meta { font-size: 12px; color: var(--crm-text-muted); }

.crm-list-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    padding: 4px 10px;
    gap: 8px;
    width: 260px;
}

.crm-list-search i { color: var(--crm-text-muted); font-size: 12px; }

.crm-list-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 13px;
    background: transparent;
}

/* Horizontal-scroll container for the list table — keeps full column names
   visible without forcing the page to scroll horizontally as a whole. */
.crm-list-table-wrap {
    overflow-x: auto;
}

.crm-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.crm-list-table thead th {
    text-align: left;
    background: var(--crm-surface-subtle);
    color: var(--crm-text-strong);
    font-weight: 700;
    font-size: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--crm-border);
    white-space: nowrap;
}

.crm-list-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-hover);
    color: var(--crm-text);
}

.crm-list-table tbody tr:hover { background: var(--crm-surface-subtle); }

.crm-col-num { width: 32px; }
.crm-col-num { color: var(--crm-text-muted); }

.crm-list-empty {
    text-align: center;
    color: var(--crm-text-muted);
    padding: 24px !important;
}

.crm-link { color: var(--crm-link); text-decoration: none; }
.crm-link:hover { text-decoration: underline; }

/* ============================
   Record page (Case detail)
   ============================ */
.crm-record-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crm-record-header {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.crm-record-icon {
    width: var(--tile-3xl);
    height: var(--tile-3xl);
    border-radius: var(--radius);
    background: #e8688f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.crm-record-titles { flex: 1; }

.crm-record-eyebrow { font-size: 12px; color: var(--crm-text-muted); }

.crm-record-title {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-record-actions {
    display: flex;
    align-items: stretch;
}

.crm-record-actions .crm-btn { margin-left: 6px; }
.crm-record-actions .crm-btn-caret { margin-left: 6px; }

/* More-actions dropdown anchored to the threedots button in the record header.
   Tucks destructive actions (Delete) behind a click so the primary header
   buttons stay safe. */
.crm-record-actions-more {
    position: relative;
    margin-left: 6px;
    display: inline-flex;
}

.crm-record-actions-more .crm-btn-caret { margin-left: 0; }

.crm-record-actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    z-index: var(--z-dropdown);
}

.crm-record-actions-menu form { margin: 0; display: block; }

.crm-record-actions-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--crm-text);
    cursor: pointer;
}

.crm-record-actions-menu-item:hover { background: var(--crm-hover); }

.crm-record-actions-menu-item.is-danger { color: #c23934; }
.crm-record-actions-menu-item.is-danger:hover { background: #fdf3f2; }

.crm-record-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr) 360px;
    gap: 12px;
    align-items: start;
}

.crm-rail, .crm-record-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.crm-panel {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.crm-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-hover);
    background: var(--crm-surface-subtle);
}

.crm-panel-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
    flex: 1;
}

.crm-panel-icon {
    color: #fff;
    background: #e8688f;
    width: var(--tile-md);
    height: var(--tile-md);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.crm-panel-icon-orange { background: #f28b00; }

.crm-panel-icon-purple,
.crm-list-title-icon-purple,
.crm-record-icon-purple,
.crm-tab-primary-link-icon-purple,
.crm-tab-primary-item-icon-purple,
.crm-tab-icon-tile-purple { background: #9d53f2; }

.crm-panel-icon-blue,
.crm-list-title-icon-blue,
.crm-record-icon-blue,
.crm-tab-primary-link-icon-blue,
.crm-tab-primary-item-icon-blue,
.crm-tab-icon-tile-blue { background: #5867e8; }

.crm-panel-caret { font-size: 11px; color: var(--crm-text-muted); }

.crm-panel-header h2.crm-panel-header-title-inline { flex: 0 0 auto; }

.crm-panel-header-select {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: var(--crm-text);
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
}

.crm-panel-body { padding: 12px; }

.crm-dashboard { padding: 6px 16px 16px; }

.crm-dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.crm-table-card { margin-top: 12px; }

.crm-table-card > .crm-gauge-footer {
    margin-top: 0;
    padding: 0 12px 12px;
}

/* Work Schedule: three fixed-window panels (Today / Next 7 / Next 14) side by
   side, wrapping to fewer columns when the dashboard is too narrow for three. */
.crm-work-schedule { margin-top: 12px; }

.crm-work-schedule-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.crm-work-schedule-row > .crm-table-card {
    flex: 1 1 300px;
    min-width: 0;
    margin-top: 0;
}

/* Compact, natural-width tables in the Work Schedule panels: let columns size to
   their content (scrolling horizontally) instead of squeezing/wrapping into tall
   rows, and tighten the row height so more tasks are visible at once. */
.crm-work-schedule-row .crm-list-table {
    width: max-content;
    min-width: 100%;
}

.crm-work-schedule-row .crm-list-table thead th,
.crm-work-schedule-row .crm-list-table tbody td {
    padding: 4px 10px;
    white-space: nowrap;
}

/* On wide screens, pin the dashboard so the Work Schedule panels stretch to the
   bottom of the viewport and scroll their tables internally, rather than the
   whole page scrolling (same "pin the shell, let one inner region scroll"
   technique as the fixed-window report pages below). Narrower screens keep
   normal page scrolling and let the panels wrap/stack. */
@media (min-width: 992px) {
    .crm-main:has(> .crm-dashboard) {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .crm-main:has(> .crm-dashboard) > .crm-dashboard {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* Small bottom gap so the Work Schedule panels run nearly to the edge. */
        padding-bottom: 8px;
    }

    /* Top row and Work Schedule split the dashboard height 50/50; the top cards
       stretch to fill that half, so Open Cases (and the rest) are each ~half the
       dashboard tall. */
    .crm-dashboard > .crm-dashboard-grid {
        flex: 1;
        min-height: 0;
        align-items: stretch;
        /* Never wrap: keep all four cards on one row at any width (incl. scaled
           laptop displays), so their order is preserved and none drop to a second
           line that would overflow behind the Work Schedule. They shrink to fit. */
        flex-wrap: nowrap;
    }

    /* Let every top card shrink below its natural width so nowrap can fit them. */
    .crm-dashboard-grid > .crm-gauge-card,
    .crm-dashboard-grid > .crm-donut-stack,
    .crm-dashboard-grid > .crm-stat-grid,
    .crm-dashboard-grid > .crm-bars-card {
        min-width: 0;
    }

    /* Fixed-size visuals (gauge, bar chart) center within their now-taller cards. */
    .crm-dashboard-grid > .crm-gauge-card,
    .crm-dashboard-grid > .crm-bars-card {
        display: flex;
        flex-direction: column;
    }

    .crm-dashboard-grid > .crm-gauge-card > .crm-gauge-body,
    .crm-dashboard-grid > .crm-bars-card > .crm-bars-body {
        flex: 1;
        min-height: 0;
        justify-content: center;
    }

    /* Stat cards fill the top-row half in two equal rows, so the 2x2 block is the
       same height as the donut stack (and each card matches a single donut card).
       minmax(0, 240px) columns let the block shrink with the row instead of
       overflowing when the dashboard is narrow. */
    .crm-dashboard-grid > .crm-stat-grid {
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(2, minmax(0, 240px));
    }

    .crm-dashboard-grid > .crm-stat-grid > .crm-stat-card {
        display: flex;
        flex-direction: column;
    }

    .crm-dashboard-grid > .crm-stat-grid > .crm-stat-card > .crm-stat-body {
        flex: 1;
        min-height: 0;
    }

    /* The two donuts share the stack's half, shrinking to fit without scrolling. */
    .crm-dashboard-grid > .crm-donut-stack > .crm-donut-card {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .crm-donut-stack > .crm-donut-card > .crm-donut-body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        justify-content: center;
    }

    /* Donut SVG scales with its card instead of staying a fixed size: caps near
       108px when there's room, shrinks below it on narrow/scaled displays. */
    .crm-donut-stack .crm-donut-wrap {
        flex: 0 1 108px;
        min-width: 0;
    }

    /* Center the donut + legend within the card (the body already centers them
       vertically; this centers the pair horizontally). */
    .crm-donut-stack .crm-donut-row {
        justify-content: center;
        gap: 14px;
    }

    .crm-dashboard > .crm-work-schedule {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .crm-work-schedule > .crm-work-schedule-row {
        flex: 1;
        min-height: 0;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    /* Each panel becomes a column whose table area scrolls on its own. */
    .crm-work-schedule-row > .crm-table-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .crm-work-schedule-row > .crm-table-card > .crm-panel-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .crm-work-schedule-row .crm-list-table-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    /* Keep each panel's column header in view while its rows scroll. */
    .crm-work-schedule-row .crm-list-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

.crm-report-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
}

.crm-report-card { width: 320px; }

/* Nudge the Group by select down from the row's vertical center so it lines
   up with the title text (which sits low in its block, under the eyebrow)
   rather than the taller icon beside it. */
.crm-report-groupby-select {
    align-self: flex-end;
    margin-bottom: 2px;
}

/* Label-over-select field (e.g. "Group by:" / "Filter by:" on the Open Cases
   report). The label above the select adds height to this flex item, which
   pushes the whole row taller and drags a bottom-anchored item down further
   than the (vertically centered) title text next to it — margin-bottom pulls
   it back up so the select's text lines up with the title's baseline. */
.crm-report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-end;
    margin-bottom: 10px;
}

.crm-report-filter-field-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--crm-text-muted);
}

.crm-report-card-desc {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--crm-text-muted);
}

/* Wide report tables (many columns) — keep every cell on one line and let
   .crm-list-table-wrap's overflow-x:auto scroll horizontally, rather than
   squeezing/wrapping cells to fit the viewport. */
.crm-report-table-wrap .crm-list-table {
    width: max-content;
    min-width: 100%;
}

.crm-report-table-wrap .crm-list-table td {
    white-space: nowrap;
}

/* Opt a column out of the nowrap above — caps its width and wraps long text
   onto multiple lines instead of stretching the table further. */
.crm-report-table-wrap .crm-list-table th.crm-report-cell-wrap,
.crm-report-table-wrap .crm-list-table td.crm-report-cell-wrap {
    white-space: normal;
    width: 440px;
    word-break: break-word;
}

/* Column sort buttons — fill the header cell, label left / caret right. */
.crm-report-table-wrap .crm-list-table th {
    padding: 0;
}

.crm-report-sort-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    font-size: 12px;
    color: inherit;
    cursor: pointer;
    white-space: inherit;
}

.crm-report-sort-btn:hover { color: var(--crm-link); }

.crm-report-sort-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: var(--crm-text-faint);
    transition: transform 0.15s ease, color 0.15s ease;
}

.crm-report-sort-btn.is-asc .crm-report-sort-icon { transform: rotate(180deg); }

.crm-report-sort-btn.is-asc .crm-report-sort-icon,
.crm-report-sort-btn.is-desc .crm-report-sort-icon {
    color: var(--crm-brand-strong);
}

/* Group header rows inserted by the Group by Category/Status dropdown. */
.crm-report-group-row td {
    background: var(--crm-surface-subtle);
    color: var(--crm-text-strong);
    font-weight: 700;
    font-size: 15px;
    padding: 10px 12px;
}

/* Service Issues bar chart, sitting above the table inside the same scrollable
   box (.crm-report-table-wrap) — it scrolls away with the rows while the
   table's sticky <thead> stays put (see initCrmReportTable's chart config). */
.crm-report-chart {
    padding: 16px 48px 4px 16px;
    border-bottom: 1px solid var(--crm-hover);
}

.crm-report-chart-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--crm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 10px;
}

.crm-report-chart .crm-bars-body {
    padding: 0 0 12px;
    gap: 9px;
}

.crm-report-chart .crm-bar-label {
    width: 210px;
    white-space: normal;
    line-height: 1.3;
}

.crm-report-chart .crm-bar-track { height: 18px; }

.crm-report-chart .crm-bar-count { width: 32px; }

/* Sequential magnitude, single hue — not the green/yellow/red severity ramp
   used for the case-age bars, since a Service Issue count carries no urgency. */
.crm-bar-fill.is-brand { background: var(--crm-brand); }

.crm-report-chart-empty {
    font-size: 12px;
    color: var(--crm-text-muted);
    padding: 0 0 12px;
}

/* Fixed-window report page: the page itself never scrolls (header, toolbar,
   Load More all stay put) — only the table area scrolls, both directions,
   inside its own fixed-height box. Same "pin the shell, let one inner region
   scroll" technique as the record-page rails (see .crm-record-grid > .crm-rail). */
.crm-main:has(> .crm-report-fixed) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.crm-main:has(> .crm-report-fixed) > .crm-report-fixed {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.crm-report-fixed .crm-list-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Keep column headers in view while scrolling rows inside the fixed window. */
.crm-report-fixed .crm-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.crm-gauge-card { width: 320px; }

.crm-gauge-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px 12px;
}

.crm-gauge-svg {
    display: block;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 240 / 130;
}

.crm-gauge-band { fill: none; stroke-width: 16; stroke-linecap: round; }
.crm-gauge-band-green { stroke: var(--crm-gauge-green); }
.crm-gauge-band-yellow { stroke: var(--crm-gauge-yellow); }
.crm-gauge-band-red { stroke: var(--crm-gauge-red); }

.crm-gauge-tick { stroke: var(--crm-text-faint); stroke-width: 1.5; }

.crm-gauge-tick-label {
    fill: var(--crm-text-muted);
    font-size: 9px;
    font-family: inherit;
}

.crm-gauge-needle { fill: #1a1a1a; }

.crm-gauge-value-row { margin-top: 2px; }

.crm-gauge-value-text {
    font-size: 26px;
    font-weight: 700;
}

.crm-gauge-value-text.is-green { color: var(--crm-gauge-green); }
.crm-gauge-value-text.is-yellow { color: var(--crm-gauge-yellow-text); }
.crm-gauge-value-text.is-red { color: var(--crm-gauge-red); }

.crm-gauge-footer {
    width: 100%;
    margin-top: 10px;
    font-size: 11px;
    text-align: center;
}

.crm-gauge-report-link { font-weight: 600; }

/* Stack multiple report links in a footer (e.g. Open Cases by Status / by
   Category on the gauge card) with a gap; single-link footers are unaffected. */
.crm-gauge-footer .crm-gauge-report-link { display: block; }
.crm-gauge-footer .crm-gauge-report-link + .crm-gauge-report-link { margin-top: 20px; }

/* Drop the gauge card's report links a bit further below the gauge/value. */
.crm-gauge-body > .crm-gauge-footer { margin-top: 25px; }

.crm-donut-card { width: 340px; }

/* Cases Opened MTD stacked on top of Cases Closed MTD — one dashboard-grid slot,
   same width as a single donut card. */
.crm-donut-stack {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crm-donut-stack > .crm-donut-card { width: 100%; }

/* The report link sits outside the donut body (so the compressed body's
   overflow:hidden can't clip it); give it the padding the body used to provide. */
.crm-donut-card > .crm-gauge-footer {
    margin-top: 6px;
    padding: 0 12px 12px;
}

.crm-donut-body {
    display: flex;
    flex-direction: column;
    padding: 16px 12px 12px;
}

.crm-donut-chart-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--crm-text-muted);
    text-align: center;
}

.crm-donut-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.crm-donut-wrap {
    position: relative;
    width: 180px;
    flex-shrink: 0;
}

.crm-donut-svg {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.crm-donut-segment { fill: none; stroke-width: 34; }

.crm-donut-segment-label {
    fill: #fff;
    font-family: inherit;
    /* In user units — the 200x200 viewBox scales down to ~108px on the dashboard,
       so this renders at roughly half its value. */
    font-size: 18px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 2.5px;
}

.crm-donut-total {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 700;
    color: var(--crm-text-strong);
}

.crm-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    min-width: 0;
}

.crm-donut-legend-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.crm-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--crm-text);
}

.crm-donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.crm-donut-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: var(--crm-text-muted);
}

.crm-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 240px);
    gap: 12px;
}

.crm-stat-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 12px;
}

.crm-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--crm-text-strong);
    line-height: 1;
}

.crm-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.crm-stat-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    font-size: 11px;
    text-align: center;
}

.crm-bars-card { flex: 1 1 340px; min-width: 340px; }

/* Left-align the day-bucket labels so they hug the left edge, mirroring the
   right-aligned counts on the right edge — symmetric margins instead of a big
   left gap. Snug width keeps the label close to its bar. */
.crm-bars-card .crm-bar-label {
    width: 74px;
    text-align: left;
}

/* Taller bars to take up the card's vertical whitespace (its content is centered
   in the 50%-height card). */
.crm-bars-card .crm-bar-track { height: 32px; }

.crm-bars-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px 12px;
}

.crm-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dashboard "Cases by Days Open" bars rendered as links to the pre-filtered
   report (see Views/Crm/Index.cshtml). Brightness lifts whatever severity color
   the fill happens to be, since these bars aren't all one hue. */
a.crm-bar-row-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 3px 6px;
    margin: -3px -6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

a.crm-bar-row-link:hover,
a.crm-bar-row-link:focus-visible {
    background: var(--crm-hover);
    outline: none;
}

a.crm-bar-row-link:hover .crm-bar-fill,
a.crm-bar-row-link:focus-visible .crm-bar-fill {
    filter: brightness(1.12);
}

.crm-bar-label {
    width: 88px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--crm-text-muted);
    text-align: right;
}

.crm-bar-track {
    flex: 1;
    height: 24px;
    background: var(--crm-hover);
    border-radius: 4px;
    overflow: hidden;
}

.crm-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.crm-bar-fill.is-green { background: var(--crm-gauge-green); }
.crm-bar-fill.is-yellow { background: var(--crm-gauge-yellow); }
.crm-bar-fill.is-red { background: var(--crm-gauge-red); }

/* Clicking a bar in 'group-by' chart mode drives the report's value filter
   dropdown to that bar's value (see crm-reports-table.js renderChart). */
.crm-bar-row-clickable {
    cursor: pointer;
    border-radius: 4px;
}

.crm-bar-row-clickable:hover,
.crm-bar-row-clickable:focus-visible {
    background: var(--crm-brand-bg-soft);
    outline: none;
}

.crm-bar-row-clickable:hover .crm-bar-fill.is-brand,
.crm-bar-row-clickable:focus-visible .crm-bar-fill.is-brand {
    background: color-mix(in srgb, var(--crm-brand) 55%, white);
}

.crm-bar-row-clickable.is-active .crm-bar-label {
    color: var(--crm-text-strong);
    font-weight: 700;
}

.crm-bar-row-clickable.is-active .crm-bar-fill.is-brand {
    background: var(--crm-brand-strong);
}

.crm-bar-count {
    width: 28px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--crm-text-strong);
}

.crm-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--crm-hover);
    min-width: 0;
}

.crm-field:last-child { border-bottom: none; }

.crm-field label {
    font-size: 11px;
    color: var(--crm-text-muted);
    font-weight: 400;
}

.crm-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.crm-field-grid .crm-field-full {
    grid-column: 1 / -1;
}

/* Full-row slot subdivided into a 2/3 + 1/3 inline grid. */
.crm-field-grid .crm-field-row-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 16px;
}

/* Full-width form row that holds two duallist pickers side by side. */
.crm-duallist-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    padding: 0;
    border-bottom: none;
}

/* Single-cell slot subdivided into two equal half-columns. Unscoped so
   it works inside .crm-field-grid (forms) and .crm-details-col (record
   display) alike. */
.crm-field-row-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.crm-field-owner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.crm-field-owner-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.crm-field-owner-link {
    color: var(--crm-link);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-field-owner-link:hover { text-decoration: underline; }

/* Plain-text owner/user names (no user profile page to link to yet) —
   keeps the link variant's truncation behavior. */
.crm-field-owner-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-field-edit {
    position: absolute;
    /* Bottom-right, in line with the field value rather than the label. */
    bottom: 8px;
    right: 0;
    color: var(--crm-text-faint);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.15s;
}

.crm-field-edit:hover { color: var(--crm-link); }

.crm-field-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

/* Click-to-dial variant — button element, so reset chrome and add interactivity */
.crm-field-phone-dial {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--crm-link, #1b7fd8);
    cursor: pointer;
    text-align: left;
}
.crm-field-phone-dial:hover { text-decoration: underline; }
.crm-field-phone-dial:focus-visible {
    outline: 2px solid var(--crm-link, #1b7fd8);
    outline-offset: 2px;
    border-radius: 2px;
}
.crm-field-phone-dial.is-dialing {
    opacity: 0.6;
    pointer-events: none;
}

.crm-field-phone-icon {
    color: #ea001e;
    font-size: 11px;
    transform: scaleX(-1);
}

.crm-contact-cases {
    display: flex;
    flex-direction: column;
}

/* When expanded ("View All" clicked), cap the container's height so the
   panel stays roughly the same size as the collapsed-3-cards state. The
   min() ensures the cap also adapts down on short viewports so the View
   Less link below stays visible. scrollbar-gutter: stable keeps the
   panel width steady whether or not the scrollbar is currently drawn. */
.crm-contact-cases:not(.is-collapsed) {
    max-height: min(220px, calc(100vh - 320px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.14) transparent;
    scrollbar-gutter: stable;
}

/* Vertical breathing room between adjacent related-record panels in a
   record page's tab content (e.g., Contacts panel above Cases panel on
   the Account record). Each panel has its own card chrome; the gap makes
   them read as distinct sections instead of one stacked block. */
.crm-record-tab-content section.crm-panel + section.crm-panel {
    margin-top: 12px;
}

/* Collapsed state — hides items beyond the per-layout threshold so panels
   with many related records don't fill a screen vertically. The "View All"
   link in the panel footer (rendered only when there are hidden items)
   removes this class via JS, expanding the list in-place.

   Thresholds:
     - stacked list (default flex column): show first 3
     - grid list (.is-grid):                show first 6 (= 2 rows of 3) */
/* User-expanded list (View All clicked → .is-expanded set by the layout's
   expander handler): instead of the 220px cap above, grow the section so
   its bottom border lands just above the record pane's bottom (the tab
   content's 16px padding provides the gap). The list scrolls internally. */
.crm-record-tab-content:has(.crm-contact-cases.is-expanded) {
    display: flex;
    flex-direction: column;
}

.crm-record-tab-content section.crm-panel:has(> .crm-contact-cases.is-expanded) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.crm-contact-cases.is-expanded {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.crm-contact-cases.is-collapsed:not(.is-grid) .crm-contact-case:nth-child(n+4) {
    display: none;
}

.crm-contact-cases.is-collapsed.is-grid .crm-contact-case:nth-child(n+7) {
    display: none;
}

/* Grid variant — used when many contact tiles need to fit on screen
   (currently the Account record page's Contacts section). 3 columns by
   default; collapses to 2 then 1 on narrower viewports. */
.crm-contact-cases.is-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--crm-hover);
}

.crm-contact-cases.is-grid .crm-contact-case {
    background: #ffffff;
    border-bottom: none;
}

.crm-contact-cases.is-grid .crm-panel-footer,
.crm-contact-cases.is-grid .crm-panel-body {
    grid-column: 1 / -1;
    background: #ffffff;
}

@media (max-width: 900px) {
    .crm-contact-cases.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .crm-contact-cases.is-grid { grid-template-columns: 1fr; }
}

.crm-contact-case {
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-hover);
}

.crm-contact-case:last-child { border-bottom: none; }

.crm-contact-case-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.crm-contact-case-link {
    color: var(--crm-link);
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
}

.crm-contact-case-link:hover { color: var(--crm-link-hover); }

.crm-contact-case-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--crm-text);
}

.crm-contact-case-label {
    color: var(--crm-text-muted);
    margin-right: 4px;
}

.crm-row-actions {
    position: relative;
    display: inline-flex;
}

.crm-row-actions-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--crm-link);
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
}
.crm-row-actions-btn:hover { background: var(--crm-hover); }
.crm-row-actions-btn .crm-icon { width: 16px; height: 16px; }

.crm-row-menu {
    position: fixed;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 200;
    min-width: 120px;
    padding: 4px 0;
}

.crm-row-menu-item {
    display: block;
    width: 100%;
    padding: 7px 14px;
    font-size: 13px;
    font-family: var(--crm-font-body);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--crm-text);
    white-space: nowrap;
}

.crm-row-menu-item:hover:not(:disabled) {
    background: var(--crm-brand-bg);
    color: var(--crm-brand-strong);
}

.crm-row-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-row-menu-item-danger { color: #c23934; }
.crm-row-menu-item-danger:hover:not(:disabled) { background: #fef1f1; color: #a61c00; }

.crm-panel-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--crm-hover);
    text-align: center;
    background: var(--crm-surface-subtle);
}

/* Right-rail Activity timeline (Contact/Account records) — compact rows:
   round icon chip, "who did what" line, one-line snippet, case + time meta. */
.crm-activity-item {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--crm-hover);
}
.crm-activity-item:first-child { border-top: 0; padding-top: 0; }

.crm-activity-icon {
    width: 24px;
    height: 24px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--crm-brand-bg);
    color: var(--crm-brand-strong);
    border-radius: 50%;
}
.crm-activity-icon .crm-icon { width: 12px; height: 12px; }

.crm-activity-body { min-width: 0; flex: 1; font-size: 12px; }
.crm-activity-line { color: var(--crm-text); }

.crm-activity-snippet {
    color: var(--crm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-activity-meta {
    display: flex;
    gap: 4px;
    color: var(--crm-text-faint);
    font-size: 11px;
    margin-top: 2px;
}

.crm-panel-footer .crm-link {
    color: var(--crm-link);
    text-decoration: none;
    font-size: 13px;
}

.crm-panel-footer .crm-link:hover { text-decoration: underline; }

.crm-placeholder-text { color: var(--crm-text-faint); }

.crm-link-related {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fef9e7;
    border-left: 3px solid #f4ca64;
    color: var(--crm-text-strong);
    font-size: 12px;
    margin-bottom: 10px;
}

.crm-show-more {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
}

/* Record main pane */
.crm-record-pane {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.crm-record-tabs {
    display: flex;
    border-bottom: 1px solid var(--crm-border);
    padding: 0 16px;
    background: #fff;
}

.crm-record-tab {
    background: none;
    border: none;
    padding: 12px 8px;
    margin-right: 16px;
    color: var(--crm-text-muted);
    font-size: 14px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.crm-record-tab.active {
    color: var(--crm-link);
    border-bottom-color: var(--crm-link);
    font-weight: 700;
}

.crm-record-tab-content { padding: 16px; }

/* Feed-action row — five quick-actions, each opens its own dialog.
   The previous inline "Recap your call..." input was dropped when
   Post moved to a modal flow, so there's no .active state anymore.

   Sticky relative to the .crm-record-tab-content scrollport so the
   action row stays visible while the user scrolls the feed list.
   Solid background prevents feed items from bleeding through. */
.crm-feed-actions {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    background: var(--crm-surface-content);
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 14px;
    /* Cover the 16px scroll-container padding-top above the bar so feed items
       don't bleed through that gap as they scroll past the sticky bar. */
    box-shadow: 0 -16px 0 var(--crm-surface-content);
}

.crm-feed-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 8px 12px;
    background: var(--crm-surface-subtle);
    border: none;
    border-right: 1px solid var(--crm-border);
    color: var(--crm-text);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.crm-feed-action:last-child { border-right: none; }
.crm-feed-action:hover { background: #fff; }

.crm-feed-action .crm-icon {
    width: 13px;
    height: 13px;
    fill: currentColor;
    opacity: 0.7;
}

/* Post modal — opened by clicking the "Post" feed action.
   Fixed overlay with a centered dialog; structurally mirrors _CrmFilePreview
   but keeps its own classes so we can iterate on the post UX independently. */
.crm-post-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.crm-post-modal[hidden] { display: none; }

.crm-post-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.crm-post-modal-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    background: var(--crm-surface-content, #fff);
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-post-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--crm-border);
}
.crm-post-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.crm-post-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--crm-text-muted, #5e6b7c);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.crm-post-modal-close:hover {
    background: var(--crm-hover, #f1f3ee);
    color: var(--crm-text);
}
.crm-post-modal-close:focus-visible {
    outline: 2px solid var(--crm-brand, #2a8f2d);
    outline-offset: 2px;
}
.crm-post-modal-close .crm-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.crm-post-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-post-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--crm-border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--crm-surface-subtle, #f7f9fb);
}

.crm-post-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--crm-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.crm-post-toolbar-btn:hover { background: var(--crm-hover, #e9eef3); }
.crm-post-toolbar-btn .crm-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.crm-post-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--crm-border);
    margin: 0 4px;
}

.crm-post-editor {
    min-height: 140px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--crm-border);
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    background: #fff;
}
.crm-post-editor:focus { border-color: var(--crm-link, #1b7fd8); }

/* Placeholder uses data-placeholder + :empty so it disappears once the user
   starts typing — contenteditable doesn't support real placeholder attrs. */
.crm-post-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--crm-placeholder, #98a2b3);
    pointer-events: none;
}

.crm-post-editor p { margin: 0 0 6px; }
.crm-post-editor ul, .crm-post-editor ol { margin: 0 0 6px 22px; }

.crm-post-attach-row[hidden] { display: none; }
.crm-post-attach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.crm-post-attach-btn {
    cursor: pointer;
}
.crm-post-attach-btn .crm-icon {
    margin-right: 4px;
    width: 14px;
    height: 14px;
}

.crm-post-attach-hint {
    color: var(--crm-text-subtle, #667085);
    font-size: 12px;
}

.crm-post-file-list[hidden] { display: none; }
.crm-post-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-post-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    background: var(--crm-surface-subtle, #f7f9fb);
    border: 1px solid var(--crm-border);
    border-radius: 999px;
    font-size: 12px;
    max-width: 100%;
}
.crm-post-file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}
.crm-post-file-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--crm-text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.crm-post-file-chip-remove:hover { background: var(--crm-hover, #e9eef3); }

.crm-post-file-chip-existing {
    background: var(--crm-surface, #eef1f5);
    border-color: var(--crm-primary, #0070d2);
    color: var(--crm-primary, #0070d2);
}

#casePostExistingFiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 2px;
}

.crm-post-error {
    padding: 8px 10px;
    border-radius: var(--radius);
    background: #fdecea;
    color: #b42318;
    font-size: 13px;
}

.crm-post-progress:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    font-size: 13px;
    color: var(--crm-text);
}
.crm-post-progress-bar {
    width: 130px;
    height: 6px;
    border-radius: 3px;
    background: var(--crm-border);
    overflow: hidden;
    flex: none;
}
.crm-post-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--crm-brand);
    transition: width 0.15s ease;
}
.crm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--crm-border);
    border-top-color: var(--crm-brand);
    border-radius: 50%;
    animation: crmSpin 0.7s linear infinite;
}
@keyframes crmSpin {
    to { transform: rotate(360deg); }
}

/* Editor-form saving state (crm-form-draft.js adds .crm-form-saving on
   submit): the form locks and dims while the save round-trip runs, and
   the submit button becomes the progress indicator. */
form.crm-form-saving { pointer-events: none; }
form.crm-form-saving input,
form.crm-form-saving select,
form.crm-form-saving textarea {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
/* The one control that must not read as disabled — it reports progress. */
.crm-btn.crm-btn-saving,
.crm-btn.crm-btn-saving[disabled],
.crm-record-actions-menu-item.crm-btn-saving {
    opacity: 1;
    cursor: progress;
}
/* Non-flex hosts (menu items): keep the injected spinner on the text line. */
.crm-btn-saving .crm-spinner { vertical-align: -2px; margin-right: 6px; }
.crm-btn .crm-spinner { vertical-align: baseline; margin-right: 0; }
.crm-btn-saving .crm-spinner {
    width: 13px;
    height: 13px;
}
/* White ring on filled primary buttons — the default border color is
   invisible against the brand fill. */
.crm-btn-primary.crm-btn-saving .crm-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

.crm-post-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-surface-subtle, #f7f9fb);
}

/* Task modal — form fields and user picker */

/* Required-field errors — red outline + message under the field; both
   fields can be flagged at once (crm-task-modal.js setFieldError). */
.crm-task-input.is-invalid {
    border-color: var(--crm-danger, #c23934);
}
.crm-task-input.is-invalid:focus {
    border-color: var(--crm-danger, #c23934);
    box-shadow: 0 0 0 3px rgba(194, 57, 52, 0.12);
}
.crm-task-field-error {
    margin-top: 4px;
    font-size: 12px;
    color: var(--crm-danger, #c23934);
}
.crm-task-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-task-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-text-weak, #5a6474);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crm-task-input,
.crm-task-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--crm-text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s;
    font-family: inherit;
}

.crm-task-input:focus,
.crm-task-textarea:focus {
    outline: none;
    border-color: var(--crm-link);
    box-shadow: 0 0 0 2px rgba(0,112,210,0.15);
}

.crm-task-input:disabled { background: var(--crm-hover, #f3f6f9); color: var(--crm-text-weak, #5a6474); cursor: not-allowed; }

.crm-task-textarea {
    resize: vertical;
    min-height: 80px;
}

/* typeable time field: text input + slot dropdown */
.crm-task-timewrap { position: relative; }
.crm-task-timedrop { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30; max-height: 160px; overflow-y: auto; background: #fff; border: 1px solid var(--crm-border); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(20, 30, 45, 0.18); }
.crm-task-timedrop[hidden] { display: none; }
.crm-task-timedrop-opt { padding: 6px 10px; font-size: 13px; color: var(--crm-text); cursor: pointer; }
.crm-task-timedrop-opt:hover { background: var(--crm-hover, #f3f6f9); }
.crm-task-timedrop-opt.is-cur { background: rgba(42, 143, 45, 0.12); color: #1e6b20; font-weight: 600; }

.crm-task-row {
    display: flex;
    gap: 12px;
}
.crm-task-row .crm-task-field { flex: 1; min-width: 0; }

.crm-feed-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.crm-feed-task-meta-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 10px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    background: var(--crm-surface-subtle, #f7f9fb);
}

.crm-feed-task-meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-text-weak, #5a6474);
}

.crm-feed-task-meta-value {
    font-size: 13px;
    color: var(--crm-text);
}

/* Assign To — one list per assignee type. Who works the stop and who sits in the office
   are different decisions, so they get different lists instead of one long roster to
   scroll. Columns are built from whatever kinds the server returns, so a new role added
   to CrmAssignment appears here on its own. */
.crm-task-assignees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    /* Fixed (not max-) height: the roster loads async, and a growing box makes the whole
       centered dialog visibly jump a moment after it opens. */
    min-height: 192px;
}
.crm-task-assignees > .crm-task-user-list-empty { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .crm-task-assignees {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}

.crm-assignee-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}

.crm-assignee-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-surface-subtle, #f0f2f5);
}

.crm-assignee-col-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--crm-text-weak, #5a6474);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* How many of this type are on the task. A tech with a plant manager riding along is a
   normal pairing, and this is where a dispatcher sees it without opening the column. */
.crm-assignee-col-count {
    flex: none;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--crm-text-weak, #5a6474);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.crm-assignee-col-body {
    height: 160px;
    overflow-y: auto;
    padding: 4px;
}

.crm-assignee-col-empty {
    display: block;
    padding: 6px;
    font-size: 12px;
    color: var(--crm-text-faint, #8a94a6);
}

/* Type color, the same language as the calendar badges and the map pins: green works the
   stop, blue rides along. Office stays neutral — it earns no accent because it does none
   of the field work the color is there to signal. */
.crm-assignee-col[data-kind="FieldTech"] .crm-assignee-col-head { background: #e8f5ee; border-bottom-color: #b7dfc8; }
.crm-assignee-col[data-kind="FieldTech"] .crm-assignee-col-name { color: #1a6b41; }
.crm-assignee-col[data-kind="FieldTech"] .crm-assignee-col-count { background: #1a6b41; }
.crm-assignee-col[data-kind="PlantManager"] .crm-assignee-col-head { background: #e8f0fb; border-bottom-color: #bcd3f2; }
.crm-assignee-col[data-kind="PlantManager"] .crm-assignee-col-name { color: #1a4f8b; }
.crm-assignee-col[data-kind="PlantManager"] .crm-assignee-col-count { background: #1a4f8b; }

.crm-task-user-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--crm-text);
    cursor: pointer;
    user-select: none;
}
.crm-task-user-check:hover { background: var(--crm-hover, #e9eef3); }
.crm-task-user-check input[type="checkbox"] { accent-color: var(--crm-link); cursor: pointer; }
/* Tighter inside a column than it was across the full-width list. */
.crm-assignee-col-body .crm-task-user-check { gap: 6px; padding: 4px 6px; font-size: 13px; }

.crm-task-user-list-empty {
    padding: 6px 8px;
    font-size: 13px;
    color: var(--crm-text-weak, #5a6474);
}

/* Assignee-type badge, shared by the task picker, the calendar lists and the map pins.
   Color carries the type: green = works the stop, blue = rides along, grey = office. */
.crm-assignee-kind {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--crm-surface-subtle, #f0f2f5);
    border-color: var(--crm-border);
    color: var(--crm-text-weak, #5a6474);
}
.crm-assignee-kind[data-kind="FieldTech"] {
    background: #e8f5ee;
    border-color: #b7dfc8;
    color: #1a6b41;
}
.crm-assignee-kind[data-kind="PlantManager"] {
    background: #e8f0fb;
    border-color: #bcd3f2;
    color: #1a4f8b;
}
/* In the map info window it sits on its own line under the name, not after it. */
.crm-cal-techinfo > .crm-assignee-kind { margin: 2px 0 0; }

.crm-task-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--crm-surface-subtle, #f0f2f5);
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--crm-text);
    font-weight: 500;
}


.crm-feed-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 8px;
    gap: 8px;
}

/* Feed type filter ("Latest Posts") — trigger + dropdown anchored to it.
   Reuses the shared .crm-record-actions-menu look; the active option gets
   a brand-green check, Salesforce picklist style. */
.crm-feed-sort-wrap {
    position: relative;
    display: inline-flex;
}

.crm-feed-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 4px 6px;
    margin-left: -6px; /* keeps the label flush with the feed's left edge */
    border-radius: var(--radius);
    color: var(--crm-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.crm-feed-sort:hover { background: var(--crm-hover); }

.crm-feed-sort-menu {
    left: 0;
    right: auto;
    min-width: 180px;
}

.crm-feed-sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-feed-sort-option .crm-feed-sort-check {
    width: 12px;
    height: 12px;
    color: var(--crm-brand);
    visibility: hidden;
}

.crm-feed-sort-option.is-active { font-weight: 600; }
.crm-feed-sort-option.is-active .crm-feed-sort-check { visibility: visible; }

.crm-feed-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    padding: 4px 10px;
    width: 240px;
    margin-left: auto;
}

.crm-feed-search i { color: var(--crm-text-muted); font-size: 12px; }

.crm-feed-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 13px;
    background: transparent;
}

.crm-feed-search-clear {
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-text-muted);
    cursor: pointer;
    border-radius: 50%;
}

.crm-feed-search-clear[hidden] { display: none; }
.crm-feed-search-clear:hover { color: var(--crm-text); background: var(--crm-hover); }
.crm-feed-search-clear svg { width: 12px; height: 12px; }

.crm-feed-list {
    border-top: 1px solid var(--crm-hover);
}

.crm-feed-empty {
    padding: 24px;
    text-align: center;
    color: var(--crm-text-muted);
}

.crm-feed-item {
    display: grid;
    grid-template-columns: 18px 36px minmax(0, 1fr) auto 22px;
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
    padding: 14px 4px;
    border-bottom: 1px solid var(--crm-hover);
}

.crm-feed-toggle {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    color: var(--crm-text-muted);
    font-size: 12px;
    line-height: 1;
    align-self: flex-start;
    margin-top: 6px;
}

.crm-feed-toggle:hover { color: var(--crm-text); }

.crm-feed-toggle .crm-icon {
    transition: transform 0.15s ease;
}

.crm-feed-item.expanded .crm-feed-toggle .crm-icon {
    transform: rotate(90deg);
}

.crm-feed-expandable {
    grid-column: 3 / 5;
    grid-row: 2;
    display: none;
    margin-top: 4px;
}

.crm-feed-item.expanded .crm-feed-expandable {
    display: block;
}

.crm-feed-avatar {
    font-size: 28px;
    color: var(--crm-text-faint);
    line-height: 1;
    width: 36px;
    height: 36px;
}

.crm-feed-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--crm-hover);
}

.crm-feed-body { min-width: 0; }

.crm-feed-author {
    font-weight: 700;
    color: var(--crm-link);
    font-size: 13px;
}

.crm-feed-headline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
    color: var(--crm-text);
    font-size: 13px;
}

/* TextPost uses the body as its headline; let long text wrap onto a second
   line (like the ContentPost message block) instead of overflowing the flex
   row. min-width:0 lets the flex item shrink; the icon stays top-aligned. */
.crm-feed-headline-text {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.crm-feed-headline-icon {
    width: var(--tile-xs);
    height: var(--tile-xs);
    border-radius: var(--radius-sm);
    color: #fff;
    background: #e8688f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.crm-feed-headline-icon-case { background: #e8688f; }
.crm-feed-headline-icon-post { background: #1589ee; }

/* Check-in/out location: a plain "View location" link in place of raw coordinates,
   styled like the feed's other links (file link, mentions). */
.crm-feed-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--crm-link);
    text-decoration: none;
}
.crm-feed-loc:hover { text-decoration: underline; }
.crm-feed-loc .crm-icon { width: 12px; height: 12px; }

.crm-feed-file-link {
    color: var(--crm-link);
    text-decoration: none;
}
.crm-feed-file-link:hover { text-decoration: underline; }

.crm-feed-attachments {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.crm-feed-attachment {
    display: flex;
    flex-direction: column;
    width: 140px;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: var(--crm-text);
    font-size: 11px;
    overflow: hidden;
    transition: box-shadow 0.1s, border-color 0.1s;
}

.crm-feed-attachment:hover {
    border-color: var(--crm-link);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Preview area — images, PDF first-page canvas, or doctype icon centered. */
.crm-feed-attachment-preview {
    position: relative; /* anchors the video play badge */
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    overflow: hidden;
}

.crm-feed-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video posters: first frame painted by preload=metadata; clicks fall
   through to the tile link, which opens the file preview player. */
.crm-feed-attachment-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #000;
}

.crm-feed-attachment-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    pointer-events: none;
}
.crm-feed-attachment-play svg { width: 14px; height: 14px; display: block; }


.crm-feed-attachment-pdf {
    /* PDF.js sets width/height in JS to match the rendered page; keep it constrained. */
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.crm-feed-attachment-doc {
    width: 44px;
    height: 56px;
    display: block;
}

/* Video tiles: the doctype icon inside the preview is ONLY the fallback for
   codecs the browser can't decode (.video-error set by the error listener in
   Record.cshtml) — normally the poster frame + footer icon say it all.
   Must sit after .crm-feed-attachment-doc so this display:none wins the tie. */
.crm-feed-attachment-doc.crm-feed-attachment-doc-fallback { display: none; }
.crm-feed-attachment.video-error video,
.crm-feed-attachment.video-error .crm-feed-attachment-play { display: none; }
.crm-feed-attachment.video-error .crm-feed-attachment-doc-fallback { display: block; }

/* PDF tiles: server-rendered first-page thumb. Top-anchored (a page's ink starts
   at the top) on white, like paper. If the thumb 404s (encrypted/corrupt PDF),
   onerror flags the tile and the doctype icon takes over — same as video-error. */
.crm-feed-attachment-preview .crm-feed-attachment-pdfimg {
    background: #fff;
    object-fit: cover;
    object-position: top;
}
.crm-feed-attachment.pdf-thumb-error .crm-feed-attachment-pdfimg { display: none; }
.crm-feed-attachment.pdf-thumb-error .crm-feed-attachment-doc-fallback { display: block; }

/* Footer bar — small doctype icon + filename, like Salesforce's tile footer. */
.crm-feed-attachment-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-top: 1px solid var(--crm-border);
    background: #fff;
}

.crm-feed-attachment-footer-icon {
    width: 14px;
    height: 18px;
    flex-shrink: 0;
}

.crm-feed-attachment-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-text);
}

/* Compact tiles for the right-rail Attachments list — force three per row via grid. */
.crm-rail-right .crm-feed-attachments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.crm-rail-right .crm-feed-attachment {
    width: auto;
    font-size: 11px;
}
.crm-rail-right .crm-feed-attachment-preview { height: 72px; }
.crm-rail-right .crm-feed-attachment-doc { width: 32px; height: 42px; }
.crm-rail-right .crm-feed-attachment-footer { padding: 4px 6px; gap: 4px; }
.crm-rail-right .crm-feed-attachment-footer-icon { width: 14px; height: 18px; }

/* Rail attachments default to files since the case's last re-open; pre-reopen
   tiles (.crm-att-old) stay hidden until the Show All toggle reveals them. */
.crm-feed-attachments.is-recent-only .crm-att-old { display: none; }

/* Show All / Show Recent — spans the full row beneath the file tiles. */
.crm-att-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 6px;
    border: 1px dashed var(--crm-border);
    border-radius: 4px;
    background: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-link);
    cursor: pointer;
}

.crm-att-toggle:hover { background: var(--crm-hover); }

/* File preview modal — opens for any .js-file-preview click. */
.crm-preview {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-preview[hidden] { display: none; }

.crm-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 30, 51, 0.6);
}

.crm-preview-dialog {
    position: relative;
    width: min(92vw, 1080px);
    height: min(92vh, 800px);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--crm-border);
    background: #f3f3f3;
}

.crm-preview-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--crm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-preview-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.crm-preview-actions .crm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--crm-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.crm-preview-actions .crm-icon-btn:hover {
    background: var(--crm-hover);
    color: var(--crm-text);
}
.crm-preview-actions .crm-icon-btn:focus-visible {
    outline: 2px solid var(--crm-brand);
    outline-offset: 2px;
}
.crm-preview-actions .crm-icon-btn svg { width: 26px; height: 26px; }

.crm-preview-body {
    flex: 1;
    min-height: 0;
    background: #2b2b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.crm-preview-body img,
.crm-preview-body video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

.crm-preview-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.crm-preview-body audio { width: min(80%, 480px); }

.crm-preview-fallback {
    color: #fff;
    text-align: center;
    padding: 32px;
}

.crm-preview-fallback svg {
    width: 64px;
    height: 80px;
    display: block;
    margin: 0 auto 12px;
}

.crm-preview-fallback p { margin: 0 0 4px; font-size: 14px; }
.crm-preview-fallback .crm-preview-fallback-hint { color: #c9c9c9; font-size: 12px; }

/* Prev/next arrows for paging between files without closing the modal.
   Anchored past the header so the buttons sit centered on the body, not the dialog. */
.crm-preview-nav {
    position: absolute;
    top: calc(50% + 24px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    color: var(--crm-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background-color 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.crm-preview-nav:hover { background: #fff; }
.crm-preview-nav:active { transform: translateY(-50%) scale(0.96); }
.crm-preview-nav:focus-visible { outline: 2px solid var(--crm-link); outline-offset: 2px; }
.crm-preview-nav[hidden] { display: none; }
.crm-preview-nav[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}
.crm-preview-nav .crm-icon { width: 22px; height: 22px; }
.crm-preview-nav-prev { left: 16px; }
.crm-preview-nav-next { right: 16px; }

.crm-feed-message {
    margin-top: 6px;
    color: var(--crm-text);
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.crm-feed-message p { margin: 0 0 6px; }
.crm-feed-message p:last-child { margin-bottom: 0; }
/* TextPost body renders in the headline; keep <p> blocks as blocks (margin
   collapsed away) so multi-paragraph posts — e.g. written on iOS — keep their
   line breaks instead of gluing into one run-on line. The Translate button is
   a flex sibling, so it stays beside the text either way. */
.crm-feed-headline span p { margin: 0; }

.crm-feed-meta-status {
    margin-top: 6px;
    font-size: 12px;
    color: var(--crm-text-strong);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-feed-status-old { text-decoration: line-through; color: var(--crm-text-faint); }
.crm-feed-status-new { font-weight: 600; color: var(--crm-text); }

.crm-feed-actions-row {
    margin-top: 8px;
    display: flex;
    gap: 12px;
}

.crm-feed-action-link {
    color: var(--crm-text-muted);
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crm-feed-action-link:hover { color: var(--crm-link); }

/* "Translate to English" link + the swapped-in translation panel on feed posts. */
.crm-feed-translate { margin-top: 6px; }

.crm-feed-translate-btn {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--crm-text-muted);
    font: inherit;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crm-feed-translate-btn .crm-icon { width: 13px; height: 13px; }
.crm-feed-translate-btn:hover { color: var(--crm-brand); }
.crm-feed-translate-btn:disabled { cursor: default; }
.crm-feed-translate-btn.is-muted,
.crm-feed-translate-btn.is-muted:hover { color: var(--crm-text-faint); }

.crm-feed-translation {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--crm-brand-bg-soft);
    border-left: 3px solid var(--crm-brand);
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--crm-text);
    word-wrap: break-word;
}

.crm-feed-translation-meta {
    font-size: 11px;
    color: var(--crm-text-muted);
    margin-bottom: 4px;
}

.crm-feed-translation-text p { margin: 0 0 6px; }
.crm-feed-translation-text p:last-child { margin-bottom: 0; }

/* Compact inline variant — Translate button sits inline instead of taking its own row. */
.crm-feed-translate-inline { margin-top: 0; }
.crm-feed-translate-inline .crm-feed-translate-btn { font-size: 11px; }
.crm-feed-translate-inline .crm-feed-translate-btn .crm-icon { width: 12px; height: 12px; }

/* In a post headline, the button sits right after the text (the flex gap is the
   only spacing). No margin-left:auto — that left a big gap on short headlines
   like "<file> posted". Long text expands to fill the row, pushing it right on
   its own. flex:none keeps the label from being squeezed; top-aligned so it
   doesn't stretch down with wrapping text. */
.crm-feed-headline .crm-feed-translate-inline {
    align-self: flex-start;
    flex: none;
}

.crm-feed-comments {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-feed-comment-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.crm-feed-comment-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.crm-feed-comment-bubble {
    flex: 1;
    background: var(--crm-surface, #f3f3f3);
    border: 1px solid var(--crm-border);
    border-radius: 6px;
    padding: 8px 12px;
}

.crm-feed-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.crm-feed-comment-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-feed-comment-date {
    font-size: 11px;
    color: var(--crm-text-muted);
}

.crm-feed-comment-body {
    font-size: 13px;
    color: var(--crm-text);
    word-break: break-word;
}

/* Comments posted from the phone app arrive HTML-wrapped in a <p> (the iOS
   NSAttributedString→HTML export). Without this, that <p> picks up the browser's
   default ~1em top/bottom margin and the comment renders much taller than a
   web-composed one. Mirror the same normalization .crm-feed-message already does. */
.crm-feed-comment-body p { margin: 0 0 6px; }
.crm-feed-comment-body p:last-child { margin-bottom: 0; }

.crm-feed-comment-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
}

.crm-feed-comment-box[hidden] { display: none; }

.crm-feed-comment-box {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-feed-comment-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    min-height: calc(2 * 1.5em + 16px);
    outline: none;
    cursor: text;
    word-break: break-word;
    white-space: pre-wrap;
    transition: border-color var(--transition-fast);
}

.crm-feed-comment-input:focus { border-color: var(--crm-link); }

.crm-feed-comment-input:empty::before {
    content: attr(data-placeholder);
    color: var(--crm-text-faint);
    pointer-events: none;
}

.crm-feed-comment-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-feed-comment-error {
    flex: 1;
    font-size: 12px;
    color: var(--crm-danger, #c23934);
}

.crm-feed-comment-btns {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.crm-feed-comment-cancel {
    background: none;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--crm-text-muted);
    transition: background var(--transition-fast);
}

.crm-feed-comment-cancel:hover { background: var(--crm-surface); }

.crm-feed-comment-edit-box .crm-feed-comment-input {
    background: #fff;
}

.crm-feed-comment-edit-box .crm-feed-comment-footer {
    margin-top: 6px;
}

.crm-feed-comment-edit-cancel {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--crm-text-muted);
    transition: background var(--transition-fast);
}

.crm-feed-comment-edit-cancel:hover { background: var(--crm-surface); }

.crm-feed-comment-edit-box .crm-feed-comment-edit-save {
    padding: 2px 10px;
}

.crm-feed-date {
    text-align: right;
    color: var(--crm-text-muted);
    font-size: 12px;
    white-space: nowrap;
    line-height: 1.6;
}

.crm-feed-more-wrap {
    position: relative;
    display: inline-flex;
}

.crm-feed-more {
    background: none;
    border: none;
    padding: 2px;
    margin-top: -2px;
    cursor: pointer;
    color: var(--crm-link);
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
}
.crm-feed-more:hover { background: var(--crm-hover); }
.crm-feed-more .crm-icon { width: 16px; height: 16px; }

/* Related list */
.crm-related {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Right-rail Related panel fills the rail so its inner list scrolls within the
   middle column's height instead of pushing the whole rail tall. */
.crm-rail-right > .crm-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.crm-rail-right > .crm-panel > .crm-related {
    flex: 1;
    min-height: 0;
}

.crm-related-section { display: flex; flex-direction: column; }

.crm-related-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-hover);
    font-size: 13px;
    color: var(--crm-link);
    cursor: pointer;
    /* Reset button defaults so .crm-related-item works as both <div> and <button>. */
    width: 100%;
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    font-family: inherit;
    text-align: left;
}

.crm-related-section:last-child > .crm-related-item { border-bottom: none; }
.crm-related-item:hover { background: var(--crm-surface-subtle); }
.crm-related-item:focus-visible { outline: 2px solid var(--crm-link); outline-offset: -2px; }

.crm-related-item > span { flex: 1; }

.crm-related-item i,
.crm-related-item > svg.crm-icon { color: var(--crm-text-faint); }

.crm-related-caret {
    color: var(--crm-text-muted) !important;
    transition: transform 120ms ease;
}
.crm-related-section.is-collapsed .crm-related-caret { transform: rotate(90deg); }
.crm-related-section.is-collapsed .crm-related-body { display: none; }

.crm-related-body {
    padding: 8px 12px 12px;
    border-bottom: 1px solid var(--crm-hover);
}
.crm-related-section:last-child > .crm-related-body { border-bottom: none; }

/* Tasks group — compact rows; clicking one jumps to the task's feed post. */
.crm-related-tasks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-related-task {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    background: var(--crm-surface-subtle);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.crm-related-task:hover { background: var(--crm-hover); }
.crm-related-task:focus-visible { outline: 2px solid var(--crm-link); outline-offset: -2px; }

/* Matches the TaskPost feed headline (13px bold on --crm-text). */
.crm-related-task-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--crm-text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-related-task-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--crm-text-muted);
}

.crm-related-task-status {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--crm-brand-bg);
    color: var(--crm-brand-strong);
}
.crm-related-task-status.is-closed {
    background: var(--crm-hover);
    color: var(--crm-text-muted);
}

/* "Scheduler" jump chip inside a task row — the row opens the feed post, this leaves
   for the calendar with the task's day selected */
.crm-related-task-sched {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-brand-strong);
    cursor: pointer;
}
.crm-related-task-sched:hover { text-decoration: underline; }

.crm-placeholder-block {
    padding: 24px;
    color: var(--crm-text-muted);
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   Collapsible right rail — collapses to a thin vertical bar (with an
   arrow to reopen) so the middle column keeps its width. Toggled via
   the .is-right-collapsed class on .crm-record-grid (see crm-record-details.js).
   ───────────────────────────────────────────────────────────────── */

/* Animate the column resize only after first paint (.crm-rail-anim is added a
   frame later) so the rail doesn't visibly slide closed on load / soft-nav. */
.crm-record-grid.crm-rail-anim {
    transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapse control in the expanded panel header. */
.crm-rail-collapse {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 4px;
    color: var(--crm-text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.crm-rail-collapse:hover { background: var(--crm-hover); color: var(--crm-text); }
.crm-rail-collapse .crm-icon { width: 14px; height: 14px; }

/* The thin expand bar is rendered only in the collapsed state (below). */
.crm-rail-bar { display: none; }

@media (min-width: 1101px) {
    .crm-record-grid.is-right-collapsed {
        grid-template-columns: 360px minmax(0, 1fr) 32px;
    }
    .crm-record-grid.is-right-collapsed .crm-rail-right > .crm-panel { display: none; }

    .crm-record-grid.is-right-collapsed .crm-rail-bar {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 0;
        background: #fff;
        border: 1px solid var(--crm-border);
        border-radius: var(--radius);
        color: var(--crm-text-muted);
        font-family: inherit;
        cursor: pointer;
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .crm-record-grid.is-right-collapsed .crm-rail-bar:hover {
        background: var(--crm-surface-subtle);
        border-color: var(--crm-link);
        color: var(--crm-link);
    }
    .crm-rail-bar-arrow {
        width: 16px;
        height: 16px;
    }
    .crm-rail-bar-label {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

@media (max-width: 1100px) {
    .crm-record-grid {
        grid-template-columns: 1fr;
    }
    /* Stacked layout has no thin-bar collapse — hide the collapse control. */
    .crm-rail-collapse { display: none; }
    /* Stacked = one column of rows; drop the 3-col single-row cap (would squash
       the first panel) and let rows auto-size. */
    .crm-record-page:has(.crm-record-grid) > .crm-record-grid {
        grid-template-rows: none;
    }
}

/* ============================
   Soft-nav loading state

   Shown inside <main> while crm-soft-nav.js fetches the next page so the
   rest of the shell (sidebar, workspace tabs) stays mounted — gives the
   illusion of an instant in-place swap.

   Branded "thinking" loader: small "Value One" eyebrow over a phrase that
   rotates ("Thinking", "One moment", …) with three pulsing dots. Phrase
   rotation is driven by JS in crm-soft-nav.js; the dot pulse is pure CSS.
   ============================ */
.crm-soft-nav-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* Fill the full <main> content area so the loader sits dead-center
       vertically + horizontally regardless of viewport size. No padding /
       border / box-sizing concerns since the only sizing is min-height. */
    min-height: 100%;
    /* Keep the loader's typography on the system stack (its pre-redesign
       look) rather than picking up the new Geist body font — Paul prefers
       the older look here. */
    font-family: 'Salesforce Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.crm-soft-nav-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crm-brand);
}

/* Quick-load state (< 500ms): a simple brand-colored ring spinner under
   the Value One eyebrow. Swapped out for the thinking-phrase block once
   the load runs long. */
.crm-soft-nav-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--crm-brand);
    animation: crmSoftNavSpin 0.7s linear infinite;
}

@keyframes crmSoftNavSpin {
    to { transform: rotate(360deg); }
}

.crm-soft-nav-thinking {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 800;
    color: #000;
}

.crm-soft-nav-phrase {
    transition: opacity 0.25s ease;
}
.crm-soft-nav-phrase.is-fading {
    opacity: 0;
}

.crm-soft-nav-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.crm-soft-nav-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    opacity: 0.3;
    animation: crmThinkDot 1.4s ease-in-out infinite;
}
.crm-soft-nav-dots span:nth-child(2) { animation-delay: 0.2s; }
.crm-soft-nav-dots span:nth-child(3) { animation-delay: 0.4s; }

.crm-soft-nav-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes crmThinkDot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1;    transform: translateY(-4px); }
}

/* ─────────────────────────────────────────────────────────────────
   Case Record — Details tab
   Two-column field layout with collapsible "Customer Account
   Information" and "System Information" sections.
   ───────────────────────────────────────────────────────────────── */

.crm-details {
    padding: 8px 16px 16px;
}

.crm-details-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
}

.crm-details-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Top section (above Customer Account Information): two columns filled
   top-to-bottom — all of column 1, then column 2. A fixed 12-row track with
   column flow forces an exact 12/10 split (column 1 ends on the 12th field,
   Case Age Days) instead of relying on height balancing. Assumes 22 fields. */
.crm-details-grid-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(12, auto);
    grid-auto-flow: column;
    column-gap: 32px;
    /* Cells size to their content (not the row height) so a bottom-anchored edit
       pencil lines up with the value even when the paired cell is taller. */
    align-items: start;
}

.crm-details-grid-3 > .crm-field {
    padding-right: 24px;
}

/* Salesforce-style detail rows: solid black labels and values (inherited, so
   placeholders/links keep their own colors) and a solid hairline under every
   field — including the last in a column, which the base .crm-field rule
   would otherwise strip. */
.crm-details .crm-field label { color: #000; }

.crm-details .crm-field,
.crm-details .crm-field:last-child {
    color: #000;
    border-bottom: 1px solid #c9c7c5;
}

/* Long free-text values (e.g. "Reason For Today's Visit", "Internal
   Comments/Special Equipment Req") wrap onto multiple lines instead of
   running off the right and forcing a horizontal scrollbar on the Details
   panel. Targets the value <div> rendered under each field's <label>. */
.crm-details-grid-3 .crm-field > div,
.crm-details-col .crm-field > div {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.crm-details-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    margin: 12px 0 4px;
    background: var(--crm-surface-subtle);
    border: 1px solid var(--crm-hover);
    border-radius: var(--radius-sm);
    color: var(--crm-text-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.crm-details-section-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.crm-details-section-caret {
    font-size: 10px;
    color: var(--crm-text-muted);
    transition: transform 0.15s;
}

.crm-details-section-header.is-collapsed .crm-details-section-caret {
    transform: rotate(-90deg);
}

.crm-details-section-body {
    padding: 0;
}

/* Tristate "Out of State" indicator — Salesforce renders a small dashed
   empty box when false and a filled check when true. */
.crm-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px dashed var(--crm-text-faint);
    border-radius: 2px;
    color: transparent;
    font-size: 10px;
}

.crm-checkbox-checked {
    border-style: solid;
    border-color: var(--crm-link);
    color: var(--crm-link);
}

/* Inline "Created By, <date>" meta text in System Information rows. */
.crm-field-meta {
    color: var(--crm-text-muted);
}

/* Multi-line address link — each <div> child stacks like Salesforce's
   "Street / City, State Zip / Country". Applied to the <a> itself. */
a.crm-address {
    display: block;
}

a.crm-address > div {
    line-height: 1.4;
}

/* Custom Links footer — three links spaced evenly across the details
   section, matching the Salesforce Custom Links region. */
.crm-custom-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 12px 16px;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   Record page — independent scrolling for rails + tab content
   Constrain the record page to .crm-main's height so the rails and
   the Feed/Details panes scroll inside their own boxes instead of
   forcing the whole page to scroll.

   Scoped via :has() so this only activates on record pages — other
   CRM pages keep .crm-main's default overflow:auto behavior.
   ───────────────────────────────────────────────────────────────── */

/* Pin the shell's single grid row to its own height (it's otherwise auto, and
   grows to max-content when the content is tall) so the record-page chain below
   is bounded and the rails scroll instead of clipping. Record pages only. */
.crm-shell:has(.crm-record-page) {
    grid-template-rows: minmax(0, 1fr);
}

.crm-main:has(> .crm-record-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.crm-main:has(> .crm-record-page) > .crm-record-page {
    flex: 1;
    min-height: 0;
}

.crm-record-page:has(.crm-record-grid) > .crm-record-grid {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
    /* Pin the row to the grid's height (0 minimum lets it shrink below content)
       so the rails scroll internally instead of overflowing and clipping. */
    grid-template-rows: minmax(0, 1fr);
}

.crm-record-grid > .crm-rail {
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
}

/* Let the bottom left-rail panel (Cases for Parent Contact) grow to fill, like
   the middle/right columns do, so its bottom lines up with them. Its list fills
   the panel and scrolls when there are more cases than fit. */
.crm-rail-left > .crm-panel:has(.crm-contact-cases) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.crm-rail-left > .crm-panel:has(.crm-contact-cases) > .crm-contact-cases {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.crm-record-grid > .crm-record-main {
    overflow: hidden;
    min-height: 0;
}

.crm-record-main > .crm-record-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.crm-record-pane > .crm-record-tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Right-side edit pencil shouldn't fight the wider Details-tab column
   width — anchor it to the field row consistently. */
.crm-details-col .crm-field {
    padding-right: 24px;
}

/* Log a Call modal -- reuses .crm-post-modal-* shell; only the body content
   differs. Slightly wider than Post modal because the Recent Calls list
   needs the room. */
.crm-call-log-dialog {
    max-width: 880px;
}

.crm-call-log-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--crm-border, #dddbda);
    margin-bottom: 12px;
}
.crm-call-log-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    font: inherit;
    color: var(--crm-text-muted, #54698d);
    cursor: pointer;
}
.crm-call-log-tab.active {
    color: var(--crm-link, #1b7fd8);
    border-bottom-color: var(--crm-link, #1b7fd8);
}
.crm-call-log-tab:hover {
    background: var(--crm-hover, #e9eef3);
}

.crm-call-log-tab-content[hidden] { display: none; }

.crm-call-log-recent-status {
    padding: 12px;
    color: var(--crm-text-muted, #54698d);
    text-align: center;
    font-size: 13px;
}

.crm-call-log-show-all-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: -8px;
    padding: 0 2px 8px;
}
.crm-call-log-show-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--crm-text-muted, #54698d);
    cursor: pointer;
    user-select: none;
}
.crm-call-log-show-all input {
    margin: 0;
}
.crm-call-log-show-all-info {
    display: inline-flex;
    align-items: center;
    color: var(--crm-text-muted, #54698d);
    cursor: help;
}
.crm-call-log-show-all-info .crm-icon {
    width: 12px;
    height: 12px;
}
.crm-call-log-period-spacer {
    flex: 1;
}
.crm-call-log-period-label {
    font-size: 12px;
    color: var(--crm-text-muted, #54698d);
    margin-right: 4px;
}
.crm-call-log-period {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 3px;
    background: #fff;
    color: var(--crm-text, #16325c);
    max-width: 160px;
}
.crm-call-log-period:focus {
    border-color: var(--crm-link, #1b7fd8);
    outline: 0;
}

.crm-call-log-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 4px;
}
.crm-call-log-recent-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--crm-border, #dddbda);
}
.crm-call-log-recent-item:last-child { border-bottom: 0; }
.crm-call-log-recent-item:hover { background: var(--crm-hover, #e9eef3); }
.crm-call-log-recent-item.is-selected {
    background: #e7f1fb;
}

/* Informational pill sitting to the right of the phone number on line 1.
   flex-shrink: 0 keeps it intact even when the phone-number text needs to
   truncate to fit. Click events bubble up to the row's select handler. */
.crm-call-log-recent-logged-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 8px;
    background: #fff3cd;
    border: 1px solid #f1d56b;
    border-radius: 10px;
    color: #7a5b00;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
/* Same-case variant — muted styling since it's just a note that this call
   already lives on the current case. */
.crm-call-log-recent-logged-self {
    background: #f4f6f9;
    border-color: var(--crm-border, #dddbda);
    color: var(--crm-text-muted, #54698d);
}
.crm-call-log-recent-item:focus-visible {
    outline: 2px solid var(--crm-link, #1b7fd8);
    outline-offset: -2px;
}
.crm-call-log-recent-dir {
    font-size: 16px;
    line-height: 1;
    padding-top: 2px;
    color: var(--crm-text-muted, #54698d);
}
.crm-call-log-recent-main {
    flex: 1;
    min-width: 0;
}
.crm-call-log-recent-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    min-width: 0;
}
/* Contact name — sits right next to the phone number (no grow, so the number
   isn't pushed to the far edge). Still truncates with … when space runs out. */
.crm-call-log-recent-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Phone number — never shrinks. So even when the contact name has to
   truncate, the actual digits stay fully readable. */
.crm-call-log-recent-num {
    flex-shrink: 0;
    margin-left: 2px;
    color: var(--crm-text, #16325c);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.crm-call-log-recent-line2 {
    color: var(--crm-text-muted, #54698d);
    font-size: 12px;
    margin-top: 2px;
}

/* Custom audio player (.crm-audio) — replaces native <audio controls> so
   we can show duration immediately from data-duration-sec without forcing
   the browser to fetch metadata from RC. The hidden <audio> is
   preload="none"; bytes are only fetched on play. */
.crm-audio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4f6f9;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 16px;
    padding: 3px 10px 3px 3px;
    font-size: 12px;
}
.crm-audio audio { display: none; }
.crm-audio-play {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--crm-primary, #1b7fd8);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.crm-audio-play:hover { background: #1769b3; }
.crm-audio-icon {
    display: block;
    width: 12px;
    height: 12px;
}
.crm-audio-icon.is-hidden { display: none; }

/* Spinning loader icon — shown after the user clicks play while audio
   bytes are still being fetched, and again if playback ever stalls for
   buffering. Swaps for the pause icon once 'playing' fires. */
.crm-audio-icon-loading {
    animation: crm-audio-spin 0.8s linear infinite;
}
@keyframes crm-audio-spin {
    to { transform: rotate(360deg); }
}

/* Track is taller than its visual stripe so the pointer hit-area is generous
   enough to grab. The visible 4px stripe + thumb sit centered inside it. */
.crm-audio-track {
    flex: 1;
    min-width: 60px;
    height: 16px;
    cursor: pointer;
    position: relative;
    touch-action: none;
}
.crm-audio-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--crm-border, #dddbda);
    border-radius: 2px;
}
.crm-audio-track-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--crm-primary, #1b7fd8);
    width: 0;
    border-radius: 2px;
    transition: width 80ms linear;
    pointer-events: none;
}

/* Draggable circle thumb — appears on hover (and stays visible while the
   user drags). The .left value is set by JS to match current playback %. */
.crm-audio-track-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--crm-primary, #1b7fd8);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 120ms, transform 120ms;
    pointer-events: none;
}
.crm-audio:hover .crm-audio-track-thumb {
    opacity: 1;
}
.crm-audio-track:active .crm-audio-track-thumb {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}
.crm-audio-time {
    color: var(--crm-text, #16325c);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Modal context: compact fixed width — wide enough for a usable seek
   track but short enough to keep the row balanced with the contact info
   on its left. */
.crm-call-log-recent-audio {
    align-self: center;
    flex-shrink: 0;
    width: 300px;
}

.crm-call-log-recent-transcript-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 12px;
    color: var(--crm-link, #1b7fd8);
    cursor: pointer;
    text-align: left;
}
.crm-call-log-recent-transcript-btn:hover { text-decoration: underline; }
.crm-call-log-recent-transcript-btn:disabled { color: var(--crm-text-muted, #54698d); cursor: wait; }

.crm-call-log-recent-transcript {
    flex-basis: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: #f4f6f9;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 4px;
    font-size: 12px;
}
.crm-call-log-recent-summary {
    margin-bottom: 6px;
    color: var(--crm-text, #16325c);
}
.crm-call-log-recent-transcript-text {
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: inherit;
    color: var(--crm-text-muted, #54698d);
    line-height: 1.45;
}
.crm-call-log-recent-transcript-empty {
    color: var(--crm-text-muted, #54698d);
    font-style: italic;
}

.crm-feed-call-summary {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f4f6f9;
    border-left: 3px solid var(--crm-link, #1b7fd8);
    border-radius: 2px;
    font-size: 13px;
    color: var(--crm-text, #16325c);
}
.crm-feed-call-transcript {
    margin-top: 6px;
    font-size: 12px;
}
.crm-feed-call-transcript > summary {
    cursor: pointer;
    color: var(--crm-link, #1b7fd8);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Underline scoped to the label span only — hovering the sibling Regenerate
   button doesn't propagate the underline back to the summary text. */
.crm-feed-call-transcript-label:hover { text-decoration: underline; }

.crm-feed-call-regen-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 3px;
    padding: 1px 6px;
    font: inherit;
    font-size: 11px;
    color: var(--crm-text-muted, #54698d);
    cursor: pointer;
}
.crm-feed-call-regen-btn:hover { background: var(--crm-hover, #e9eef3); }
.crm-feed-call-regen-btn:disabled { opacity: 0.6; cursor: wait; }

/* Regenerate now sits below <summary> (moved out of it for accessibility), so
   it's a block in the expanded transcript — give it a little breathing room. */
.crm-feed-call-transcript > .crm-feed-call-regen-btn {
    display: inline-block;
    margin-top: 6px;
}

/* Container wrapping the "Show/Hide transcript" toggle + the Regenerate
   button so they sit on the same line. The Regenerate button is hidden
   until the transcript is expanded. */
.crm-call-log-recent-trans-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}
.crm-call-log-recent-regen {
    appearance: none;
    background: transparent;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 3px;
    padding: 1px 8px;
    font: inherit;
    font-size: 11px;
    color: var(--crm-text-muted, #54698d);
    cursor: pointer;
}
.crm-call-log-recent-regen[hidden] { display: none; }
.crm-call-log-recent-regen:hover { background: var(--crm-hover, #e9eef3); }
.crm-call-log-recent-regen:disabled { opacity: 0.6; cursor: wait; }
.crm-feed-call-transcript pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: #f4f6f9;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 4px;
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: inherit;
    color: var(--crm-text-muted, #54698d);
    line-height: 1.45;
}

/* "AI-generated — may contain errors" disclaimer, shown above the summary
   block on any call-log feed item or modal transcript preview that
   includes AI-derived content (summary / bullets / transcript). */
.crm-feed-call-ai-disclaimer {
    margin-top: 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--crm-text-muted, #54698d);
    line-height: 1.4;
}

.crm-feed-call-bullets, .crm-feed-call-nextsteps {
    margin-top: 6px;
    font-size: 12px;
}
.crm-feed-call-bullets > strong,
.crm-feed-call-nextsteps > strong {
    display: block;
    margin-bottom: 2px;
    color: var(--crm-text, #16325c);
}
.crm-feed-call-bullets pre,
.crm-feed-call-nextsteps pre {
    margin: 0;
    padding: 6px 10px;
    background: #fafbfc;
    border-left: 2px solid var(--crm-border, #dddbda);
    white-space: pre-wrap;
    font-family: inherit;
    color: var(--crm-text-muted, #54698d);
    line-height: 1.45;
}

.crm-feed-call-pending {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    background: #f4f6f9;
    border: 1px dashed var(--crm-border, #dddbda);
    border-radius: 4px;
    font-size: 12px;
    color: var(--crm-text-muted, #54698d);
}
.crm-feed-call-pending[data-status="Failed"] {
    background: #fdecea;
    border-color: #c23934;
    color: #7a1f1d;
}

.crm-feed-call-sentiment {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.crm-feed-call-sentiment-positive { background: #e6f5ec; color: #2e844a; }
.crm-feed-call-sentiment-neutral  { background: #f4f6f9; color: #54698d; }
.crm-feed-call-sentiment-negative { background: #fdecea; color: #c23934; }

.crm-call-log-recent-bullets,
.crm-call-log-recent-nextsteps pre {
    margin: 6px 0 0;
    padding: 6px 10px;
    background: #fafbfc;
    border-left: 2px solid var(--crm-border, #dddbda);
    white-space: pre-wrap;
    font-family: inherit;
    color: var(--crm-text-muted, #54698d);
    font-size: 12px;
    line-height: 1.45;
}
.crm-call-log-recent-nextsteps > strong {
    display: block;
    margin-top: 6px;
    color: var(--crm-text, #16325c);
    font-size: 12px;
}

.crm-call-log-manual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 8px;
}
.crm-call-log-manual-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--crm-text-muted, #54698d);
}
.crm-call-log-manual-grid input,
.crm-call-log-manual-grid select {
    padding: 6px 8px;
    border: 1px solid var(--crm-border, #dddbda);
    border-radius: 4px;
    font: inherit;
    color: var(--crm-text, #16325c);
    background: #fff;
}
.crm-call-log-manual-grid input:focus,
.crm-call-log-manual-grid select:focus {
    border-color: var(--crm-link, #1b7fd8);
    outline: 0;
}

.crm-call-log-selected {
    background: #f0f7ff;
    border: 1px solid #c9def5;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 0;
    font-size: 13px;
}

/* Custom audio player in feed items — same .crm-audio shell, just sized
   so it sits cleanly under the call headline. */
.crm-feed-call-recording {
    margin-top: 8px;
    max-width: 360px;
    width: 100%;
}

/* Tile-icon variant for CallLogPost — sits between Status/case (yellow) and
   ContentPost/post (blue). Phone-call green keeps it visually distinct in
   the feed without clashing with the brand. */
.crm-feed-headline-icon-call {
    background: #2e844a;
}

/* Confirm-dial modal — shared dialog opened by window.crmConfirmDial().
   Narrower than the Post modal because it only carries a single line. */
.crm-confirm-dial-dialog {
    max-width: 420px;
}
.crm-confirm-dial-number {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--crm-text, #16325c);
}
.crm-confirm-dial-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2e844a;
    color: #fff;
}
.crm-confirm-dial-icon .crm-icon {
    width: 16px;
    height: 16px;
    color: #fff;
}
.crm-confirm-dial-method-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--crm-text-muted, #54698d);
}

/* Generic CRM-styled confirm modal — same shell as .crm-post-modal-*,
   narrower body since it's just a question and two buttons.
   Higher z-index than the base .crm-post-modal so a confirm dialog opened
   from inside another modal (e.g. Log a Call → "already logged" warning)
   layers correctly on top of its caller instead of getting hidden behind. */
#crmConfirmModal {
    z-index: 1200;
}
.crm-confirm-dialog {
    max-width: 440px;
}
.crm-confirm-message {
    font-size: 14px;
    color: var(--crm-text, #16325c);
    line-height: 1.5;
    white-space: pre-line;
}

/* Danger variant of the primary button — red instead of blue, used for
   destructive confirms (delete, regenerate, etc). */
.crm-btn.crm-btn-danger {
    background: #c23934;
    border-color: #c23934;
    color: #fff;
}
.crm-btn.crm-btn-danger:hover {
    background: #a02824;
    border-color: #a02824;
}

/* Disabled state for primary buttons — uniform across the CRM so a button
   that's intentionally non-clickable (e.g. Log Call before a call is picked)
   visually communicates that. */
.crm-btn.crm-btn-primary:disabled,
.crm-btn.crm-btn-primary[disabled] {
    background: #c9c7c5;
    border-color: #c9c7c5;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.75;
}
.crm-btn:disabled,
.crm-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ============================
   @-mentions (post editor + feed body)
   ============================ */
.crm-mention {
    color: var(--crm-brand-strong);
    background: var(--crm-brand-bg);
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 600;
    white-space: nowrap;
}

/* Always-visible mention chips on a collapsed feed item (file/call posts whose
   body — and its @-mentions — would otherwise be hidden until expanded). */
.crm-feed-mentions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 3px;
    font-size: 12px;
}

/* Once expanded, the body (with the real @-mention) is visible, so drop the
   surfaced copy to avoid showing the mention twice. */
.crm-feed-item.expanded .crm-feed-mentions { display: none; }

/* Toolbar "@" button — brand-tinted so it reads as the mention affordance.
   The "@" glyph sits low in its line box, so nudge it up to align with the
   other toolbar icons. */
.crm-post-toolbar-mention {
    position: relative;
    top: -2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--crm-brand);
}

/* Autocomplete dropdown — fixed-position, anchored to the caret by JS.
   Sits at toast level so it clears the post modal (z-index 1100). */
.crm-mention-menu {
    position: fixed;
    z-index: var(--z-toast);
    width: 280px;
    max-height: 232px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(14, 34, 64, 0.18);
    padding: 4px;
}
.crm-mention-menu[hidden] { display: none; }

.crm-mention-more {
    display: block;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-brand, #2a8f2d);
    text-align: center;
}
.crm-mention-more:hover { background: var(--crm-brand-bg); }

.crm-mention-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--crm-text);
}
.crm-mention-option:hover,
.crm-mention-option.is-active {
    background: var(--crm-brand-bg);
}
.crm-mention-option-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--crm-border);
}
.crm-mention-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.crm-mention-option-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-mention-option-email {
    font-size: 11px;
    color: var(--crm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Feed post briefly highlighted when opened from a notification. */
.crm-feed-flash { animation: crm-feed-flash 2.2s ease-out; }
@keyframes crm-feed-flash {
    0%   { background: var(--crm-brand-bg); }
    100% { background: transparent; }
}

/* ============================
   Sidebar notification bell (dropup)
   ============================ */
.crm-notif-wrap {
    position: relative;
    flex-shrink: 0; /* only the nav shrinks on short viewports */
    /* Hug the user card below — every px saved here is nav room above. */
    margin-bottom: 2px;
}

.crm-notif-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--crm-text);
    font: inherit;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.crm-notif-toggle:hover {
    background: var(--crm-brand-bg-soft);
    border-color: var(--crm-divider-subtle);
}
.crm-notif-toggle[aria-expanded="true"] {
    background: var(--crm-brand-bg);
    border-color: var(--crm-divider);
}
/* Nudge the 22px bell box right so its center lines up with the 32px
   avatar pic below (both at 8px left padding → 5px center offset). */
.crm-notif-icon { color: var(--crm-text-muted); margin-left: 5px; }
.crm-notif-toggle:hover .crm-notif-icon,
.crm-notif-toggle[aria-expanded="true"] .crm-notif-icon { color: var(--crm-brand); }

.crm-notif-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--crm-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
}
.crm-notif-badge[hidden] { display: none; }

.crm-notif-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 320px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    box-shadow: 0 -8px 24px rgba(14, 34, 64, 0.18);
    z-index: var(--z-avatar-menu);
    overflow: hidden;
    animation: crm-avatar-menu-fade-up 0.18s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.crm-notif-menu[hidden] { display: none; }

.crm-notif-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--crm-surface-subtle);
    border-bottom: 1px solid var(--crm-hover);
    font-family: var(--crm-font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--crm-text-strong);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.crm-notif-mark-all {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--crm-brand);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0;
}
.crm-notif-mark-all:hover { text-decoration: underline; }

/* Bigger, button-like "Mark all read" in the larger modal header (the dropup
   keeps the compact text link above). */
.crm-notif-modal-head-actions .crm-notif-mark-all {
    font-size: 13px;
    padding: 7px 14px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
}
.crm-notif-modal-head-actions .crm-notif-mark-all:hover {
    text-decoration: none;
    background: var(--crm-brand-bg);
}

.crm-notif-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 60px;
}

.crm-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--crm-hover);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background var(--transition-fast);
}
.crm-notif-item:hover { background: var(--crm-brand-bg-soft); }
.crm-notif-item.is-unread { background: var(--crm-brand-bg); }

.crm-notif-item-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--crm-brand);
}
.crm-notif-item-icon .crm-icon { width: 15px; height: 15px; }

.crm-notif-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.crm-notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-text);
}
.crm-notif-item-message {
    font-size: 12px;
    color: var(--crm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.crm-notif-item-time {
    font-size: 11px;
    color: var(--crm-text-faint);
}

.crm-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 16px;
    text-align: center;
    color: var(--crm-text-muted);
    font-size: 12px;
}

.crm-notif-empty-icon {
    display: inline-flex;
    color: var(--crm-text-faint);
}
.crm-notif-empty-icon .crm-icon {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.crm-notif-footer {
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-brand);
    text-decoration: none;
    border-top: 1px solid var(--crm-hover);
    background: var(--crm-surface-subtle);
}
.crm-notif-footer:hover { background: var(--crm-brand-bg); }

/* Collapsed sidebar: label hidden by the shared rule; center the bell and
   pin the badge to the icon, and give the dropup a readable fixed width. */
.crm-shell.is-sidebar-collapsed .crm-notif-toggle { justify-content: center; }
.crm-shell.is-sidebar-collapsed .crm-notif-icon { margin-left: 0; }

/* Collapsed: the count would cover the bell, so show just a small red dot
   at the icon's upper-right instead. */
.crm-shell.is-sidebar-collapsed .crm-notif-badge {
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: 4px;
    min-width: 0;
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    border-radius: 50%;
    border: 1.5px solid var(--crm-surface-sidebar, #fff);
}
.crm-shell.is-sidebar-collapsed .crm-notif-menu { width: 300px; }

/* "View all notifications" modal — CRM-styled (mirrors .crm-post-modal) so the
   user sees the full list without leaving the CRM shell for the ERP page. */
.crm-notif-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.crm-notif-modal[hidden] { display: none; }

.crm-notif-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.crm-notif-modal-dialog {
    position: relative;
    width: min(680px, 100%);
    height: min(720px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    background: var(--crm-surface-content, #fff);
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-notif-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--crm-border);
    flex-shrink: 0;
}
.crm-notif-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-notif-modal-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-notif-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--crm-text-muted, #5e6b7c);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.crm-notif-modal-close:hover {
    background: var(--crm-hover, #f1f3ee);
    color: var(--crm-text);
}
.crm-notif-modal-close .crm-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.crm-notif-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Row list fills the (now fixed-height) dialog and scrolls internally; the
   empty / loading / error state centers in it so an empty inbox still reads
   as a full-size panel rather than a thin sliver. */
.crm-notif-modal-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.crm-notif-modal-list .crm-notif-empty {
    margin: auto;
}

.crm-notif-modal-more {
    flex-shrink: 0;
    display: block;
    margin: 10px auto 14px;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    color: var(--crm-brand);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.crm-notif-modal-more:hover { background: var(--crm-brand-bg); }
.crm-notif-modal-more:disabled { opacity: 0.6; cursor: default; }
.crm-notif-modal-more[hidden] { display: none; }

/* ============================
   Two-Factor Authentication
   (CRM-shell pages + the post-login setup prompt)
   ============================ */

/* Centered single-column page wrapper sitting on .crm-main's gradient. */
.crm-2fa-page {
    max-width: 640px;
    margin: 8px auto 0;
}

.crm-2fa-panel { background: #fff; }

/* Green tile for the panel/modal header icon — overrides .crm-panel-icon's
   default pink so 2FA chrome reads on-brand. */
.crm-2fa-icon { background: var(--crm-brand); }

/* ---- Status banners ---- */
.crm-2fa-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    background: var(--crm-surface-subtle);
}
.crm-2fa-banner + .crm-2fa-banner { margin-top: 10px; }

.crm-2fa-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
}
.crm-2fa-banner-icon .crm-icon { width: 18px; height: 18px; }

.crm-2fa-banner-text { font-size: 13px; color: var(--crm-text); line-height: 1.5; }
.crm-2fa-banner-text strong { color: var(--crm-text-strong); }
.crm-2fa-banner-text p { margin: 4px 0 0; }

.crm-2fa-banner-success {
    background: var(--crm-brand-bg);
    border-color: var(--crm-divider);
}
.crm-2fa-banner-success .crm-2fa-banner-icon { color: var(--crm-brand-strong); }

.crm-2fa-banner-info .crm-2fa-banner-icon { color: var(--crm-link); }

.crm-2fa-banner-warning {
    background: #fff8ec;
    border-color: #f4d79a;
}
.crm-2fa-banner-warning .crm-2fa-banner-icon { color: #b7791f; }

.crm-2fa-hint {
    margin: 12px 0;
    font-size: 13px;
    color: var(--crm-text-muted);
    line-height: 1.5;
}

/* ---- Action button row ---- */
.crm-2fa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.crm-2fa-actions .crm-btn { text-decoration: none; }

/* ---- Setup steps ---- */
.crm-2fa-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.crm-2fa-step {
    display: flex;
    gap: 12px;
    padding: 4px 0;
}
.crm-2fa-step + .crm-2fa-step {
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--crm-hover);
}
.crm-2fa-step-no {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--crm-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-2fa-step-body { flex: 1; min-width: 0; }
.crm-2fa-step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text-strong);
}

/* ---- QR + manual key ---- */
.crm-2fa-qr {
    display: inline-flex;
    padding: 10px;
    margin: 4px 0 12px;
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    min-width: 192px;
    min-height: 192px;
    align-items: center;
    justify-content: center;
}
.crm-2fa-qr img,
.crm-2fa-qr canvas { display: block; }

.crm-2fa-key-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    max-width: 360px;
}
.crm-2fa-key {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    background: var(--crm-surface-subtle);
    font-family: var(--crm-font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--crm-text);
    letter-spacing: 1px;
}
.crm-2fa-key-row .crm-btn { white-space: nowrap; }

/* ---- Verification code input ---- */
.crm-2fa-code-input {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 8px;
    text-align: center;
    color: var(--crm-text-strong);
}
.crm-2fa-code-input:focus {
    outline: none;
    border-color: var(--crm-brand);
    box-shadow: 0 0 0 3px var(--crm-brand-bg);
}

.crm-2fa-field-error {
    display: block;
    margin: 4px 0;
    color: var(--crm-danger);
    font-size: 12px;
}
.crm-2fa-field-error[hidden] { display: none; }

.crm-2fa-verify-form .crm-2fa-actions { margin-top: 12px; }

/* ---- Recovery codes grid ---- */
.crm-2fa-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 12px 0;
    padding: 14px;
    background: var(--crm-surface-subtle);
    border: 1px solid var(--crm-border);
    border-radius: var(--radius);
}
.crm-2fa-code {
    font-family: var(--crm-font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--crm-text-strong);
    letter-spacing: 1px;
}

@media (max-width: 520px) {
    .crm-2fa-codes { grid-template-columns: 1fr; }
}

/* ---- Narrower modal dialogs (prompt + verify) ---- */
.crm-post-modal-dialog.crm-2fa-prompt-dialog { width: min(440px, 100%); }
.crm-post-modal-dialog.crm-2fa-verify-dialog { width: min(420px, 100%); }

/* Prompt header: icon + title sit together on the left rather than pushed
   apart by the default space-between. */
.crm-2fa-prompt-dialog .crm-post-modal-header {
    justify-content: flex-start;
    gap: 10px;
}
.crm-2fa-prompt-icon { flex-shrink: 0; }
.crm-2fa-prompt-modal .crm-post-modal-body p { margin: 0 0 8px; font-size: 14px; color: var(--crm-text); }
.crm-2fa-prompt-modal .crm-post-modal-body p:last-child { margin-bottom: 0; }
.crm-2fa-prompt-dialog .crm-btn { text-decoration: none; }

/* ============================================================
   Help Center (/CrmHelp) — editorial docs layer.
   Deliberately quieter than the console: generous whitespace,
   Fraunces display headings, green reserved for accents.
   ============================================================ */
.crm-help-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 40px 80px;
}
/* No backdrop override here on purpose: help pages keep .crm-main's
   green-gradient backdrop, with the TOC panel and article card
   sitting on top of it as light boxes. */

/* ---- Landing hero ---- */
.crm-help-hero { text-align: center; padding: 10px 0 8px; }
.crm-help-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--crm-brand-strong);
}
.crm-help-hero h1 {
    font-family: var(--crm-font-display);
    font-size: 44px;
    font-weight: 600;
    color: var(--crm-text-strong);
    margin: 0 0 8px;
}
.crm-help-hero-sub { font-size: 15.5px; color: var(--crm-text-muted); margin: 0; }

/* ---- Doc search ---- */
.crm-help-search { position: relative; max-width: 560px; margin: 24px auto 0; }
.crm-help-search.is-compact { max-width: none; margin: 0 0 6px; }
.crm-help-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px 12px 42px;
    border-radius: 999px;
    border: 1px solid var(--crm-border);
    background: var(--crm-surface-content);
    font-family: var(--crm-font-body);
    font-size: 14.5px;
    color: var(--crm-text);
    box-shadow: 0 1px 2px rgba(22, 50, 92, 0.05);
}
.crm-help-search.is-compact .crm-help-search-input { padding: 8px 14px 8px 36px; font-size: 13px; }
.crm-help-search-input::placeholder { color: var(--crm-text-faint); }
.crm-help-search-input:focus {
    outline: none;
    border-color: var(--crm-brand);
    box-shadow: 0 0 0 3px var(--crm-brand-bg);
}
.crm-help-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--crm-text-faint);
    pointer-events: none;
}
.crm-help-search.is-compact .crm-help-search-icon { left: 12px; }
.crm-help-search-icon .crm-icon { width: 15px; height: 15px; }
.crm-help-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--crm-surface-content);
    border: 1px solid var(--crm-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(22, 50, 92, 0.14);
    max-height: 380px;
    overflow-y: auto;
    text-align: left;
    z-index: 60;
}
.crm-help-search-item {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--crm-divider-subtle);
}
.crm-help-search-item:last-child { border-bottom: none; }
.crm-help-search-item:hover { background: var(--crm-hover); }
.crm-help-search-item-title { font-size: 13.5px; font-weight: 600; color: var(--crm-text); }
.crm-help-search-item-title mark { background: var(--crm-brand-bg); color: var(--crm-brand-strong); border-radius: 3px; padding: 0 1px; }
.crm-help-search-item-meta {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--crm-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-help-search-empty { padding: 14px 16px; font-size: 13px; color: var(--crm-text-muted); }

/* ---- Landing section cards ---- */
.crm-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}
.crm-help-card {
    background: var(--crm-surface-content);
    border: 1px solid var(--crm-border);
    border-radius: 16px;
    padding: 22px 24px 16px;
    box-shadow: 0 8px 24px rgba(22, 50, 92, 0.06);
}
.crm-help-card-head { display: flex; gap: 12px; align-items: flex-start; }
.crm-help-card-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--crm-brand-bg);
    color: var(--crm-brand-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-help-card-icon .crm-icon { width: 17px; height: 17px; }
.crm-help-card h2 {
    font-family: var(--crm-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--crm-text-strong);
    margin: 0;
}
.crm-help-card-blurb { font-size: 12.5px; color: var(--crm-text-muted); margin-top: 3px; }
.crm-help-card-list { list-style: none; margin: 14px 0 0; padding: 0; }
.crm-help-card-list a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
}
.crm-help-card-list a:hover { background: var(--crm-brand-bg-soft); }
.crm-help-card-link-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--crm-text); }
.crm-help-card-list a:hover .crm-help-card-link-title { color: var(--crm-brand-strong); }
.crm-help-card-link-sub {
    display: block;
    font-size: 12px;
    color: var(--crm-text-muted);
    margin-top: 1px;
}

/* ---- Article layout: two independent scroll panes ----
   The article page pins itself to the main area's height; the TOC panel
   and the article card are each their own scroll container, so the two
   sections scroll separately instead of sharing the page scrollbar. */
/* Drop .crm-main's own 16px padding on this page too — the page wrapper
   carries its own (slimmer) padding, so the panes get the extra height. */
.crm-main:has(.crm-help-page-article) { overflow: hidden; padding: 0; }
.crm-help-page-article {
    height: 100%;
    max-width: none;   /* article page fills the main area edge to edge */
    padding: 14px 28px 16px;   /* slim vertical padding = taller panes */
    box-sizing: border-box;
}
.crm-help-layout {
    display: grid;
    /* TOC + article sit adjacent; the pair centers as a unit. */
    grid-template-columns: 296px minmax(0, 920px);
    gap: 28px;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}
.crm-help-toc {
    background: var(--crm-surface-sidebar);
    border: 1px solid var(--crm-border);
    border-radius: 16px;
    padding: 18px 16px 20px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(22, 50, 92, 0.06);
}
.crm-help-toc-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--crm-text-muted);
    text-decoration: none;
    margin-bottom: 14px;
}
.crm-help-toc-back:hover { color: var(--crm-brand-strong); }
.crm-help-toc-back .crm-icon { width: 12px; height: 12px; }
.crm-help-toc-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--crm-text-faint);
    margin: 18px 0 5px;
}
.crm-help-toc-link {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--crm-text-muted);
    text-decoration: none;
}
.crm-help-toc-link:hover { background: var(--crm-hover); color: var(--crm-text); }
.crm-help-toc-link.is-active {
    border-left-color: var(--crm-brand);
    background: var(--crm-brand-bg);
    color: var(--crm-brand-strong);
    font-weight: 600;
}

/* ---- Article typography ---- */
.crm-help-article {
    width: 100%;
    background: var(--crm-surface-content);
    border: 1px solid var(--crm-border);
    border-radius: 18px;
    padding: 38px 52px 48px;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(22, 50, 92, 0.06);
    height: 100%;
    overflow-y: auto;
}

/* The card spans the full column; the reading column inside stays
   capped so line length remains comfortable. */
.crm-help-article-head,
.crm-help-body,
.crm-help-pager { max-width: 800px; }

/* Slim scrollbars inside the two panes (extra-thin on the TOC).
   NOTE: don't add scrollbar-width/scrollbar-color here — when those
   standard properties are set, Chrome ignores the ::-webkit-scrollbar
   styling below and falls back to its darker native scrollbar. */
.crm-help-toc::-webkit-scrollbar { width: 4px; }
.crm-help-article::-webkit-scrollbar { width: 8px; }
.crm-help-toc::-webkit-scrollbar-thumb,
.crm-help-article::-webkit-scrollbar-thumb { background: #d6d6d0; border-radius: 4px; }
.crm-help-toc::-webkit-scrollbar-thumb:hover,
.crm-help-article::-webkit-scrollbar-thumb:hover { background: #bfbfb8; }
.crm-help-toc::-webkit-scrollbar-track,
.crm-help-article::-webkit-scrollbar-track { background: transparent; }
.crm-help-article-head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--crm-divider-subtle);
    margin-bottom: 26px;
}
.crm-help-article-head h1 {
    font-family: var(--crm-font-display);
    font-size: 34px;
    font-weight: 600;
    color: var(--crm-text-strong);
    margin: 8px 0 8px;
}
.crm-help-summary { font-size: 15px; line-height: 1.6; color: var(--crm-text-muted); margin: 0; }
.crm-help-body { font-size: 14.5px; line-height: 1.75; color: var(--crm-text); }
.crm-help-body h2 {
    font-family: var(--crm-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--crm-text-strong);
    margin: 34px 0 12px;
}
.crm-help-body h3 { font-size: 15.5px; font-weight: 600; color: var(--crm-text-strong); margin: 24px 0 8px; }
.crm-help-body p { margin: 0 0 14px; }
.crm-help-body a { color: var(--crm-link); text-decoration: none; }
.crm-help-body a:hover { color: var(--crm-link-hover); text-decoration: underline; }
.crm-help-body ul { margin: 0 0 16px; padding-left: 22px; }
.crm-help-body ul li { margin: 0 0 7px; }

/* Numbered steps get a green step badge instead of plain numbers. */
.crm-help-body ol {
    counter-reset: hlp-step;
    list-style: none;
    margin: 0 0 18px;
    padding-left: 0;
}
.crm-help-body ol > li {
    counter-increment: hlp-step;
    position: relative;
    padding-left: 40px;
    margin: 0 0 12px;
}
.crm-help-body ol > li::before {
    content: counter(hlp-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--crm-brand-bg);
    border: 1px solid var(--crm-divider);
    color: var(--crm-brand-strong);
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crm-help-body table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 13.5px; }
.crm-help-body th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crm-text-faint);
    padding: 8px 12px;
    border-bottom: 1px solid var(--crm-border);
}
.crm-help-body td { padding: 10px 12px; border-bottom: 1px solid var(--crm-divider-subtle); vertical-align: top; }
.crm-help-body tr:last-child td { border-bottom: none; }
.crm-help-body kbd {
    font-family: var(--crm-font-mono);
    font-size: 11.5px;
    background: var(--crm-surface-content);
    border: 1px solid var(--crm-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 7px;
    color: var(--crm-text-strong);
}
.crm-help-body code {
    font-family: var(--crm-font-mono);
    font-size: 12.5px;
    background: var(--crm-surface-subtle);
    border: 1px solid var(--crm-border);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- Diagrams ---- */
.crm-help-figure {
    margin: 22px 0 26px;
    padding: 18px;
    background: var(--crm-surface-sidebar);
    border: 1px solid var(--crm-border);
    border-radius: 14px;
}
.crm-help-figure svg { display: block; width: 100%; height: auto; }
.crm-help-figure-narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.crm-help-figure figcaption { margin-top: 10px; font-size: 12px; color: var(--crm-text-faint); text-align: center; }

/* ---- Phone screenshots ---- */
.crm-help-shot { margin: 20px auto 26px; max-width: 300px; }

/* Text + phone mockup side by side: prose on the left, the phone on the
   right, so iPhone articles stay compact and readable. */
.crm-help-media-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin: 16px 0 26px;
}
.crm-help-media-text { flex: 1; min-width: 0; }
.crm-help-media-text > :last-child { margin-bottom: 0; }
.crm-help-media-row .crm-help-shot {
    flex: 0 0 240px;
    max-width: 240px;
    margin: 4px 0 0;
}
@media (max-width: 760px) {
    .crm-help-media-row { flex-direction: column; }
    .crm-help-media-row .crm-help-shot { margin: 0 auto; }
}
.crm-help-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--crm-border);
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(22, 50, 92, 0.08);
}
.crm-help-shot figcaption { margin-top: 9px; font-size: 12px; color: var(--crm-text-faint); text-align: center; }
.crm-help-shot-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0 26px;
}
.crm-help-shot-row .crm-help-shot { flex: 1 1 0; min-width: 200px; max-width: 280px; margin: 0; }

/* ---- Callouts ---- */
.crm-help-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 18px 0 22px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 13.5px;
    line-height: 1.6;
}
.crm-help-callout p { margin: 0; }
.crm-help-callout-tag {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    margin-top: 2px;
    color: #ffffff;
}
.crm-help-callout.is-tip { background: var(--crm-brand-bg-soft); border-color: var(--crm-divider); }
.crm-help-callout.is-tip .crm-help-callout-tag { background: var(--crm-brand); }
.crm-help-callout.is-note { background: #f4f8fc; border-color: #d6e4f3; }
.crm-help-callout.is-note .crm-help-callout-tag { background: #16325c; }

/* ---- Prev / next pager ---- */
.crm-help-pager {
    display: flex;
    gap: 16px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--crm-divider-subtle);
}
.crm-help-pager a {
    flex: 1;
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    background: var(--crm-surface-content);
}
.crm-help-pager a.is-next { text-align: right; }
.crm-help-pager a:hover { border-color: var(--crm-brand); background: var(--crm-brand-bg-soft); }
.crm-help-pager-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crm-text-faint);
}
.crm-help-pager-title { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--crm-text); }
.crm-help-pager a:hover .crm-help-pager-title { color: var(--crm-brand-strong); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    /* Single column: fall back to one normal page scroll. */
    .crm-main:has(.crm-help-page-article) { overflow: auto; }
    .crm-help-page-article { height: auto; }
    .crm-help-layout { grid-template-columns: 1fr; gap: 0; height: auto; }
    .crm-help-toc { height: auto; max-height: 320px; margin-bottom: 28px; }
    .crm-help-article { height: auto; overflow-y: visible; }
}
@media (max-width: 860px) {
    .crm-help-page { padding: 24px 20px 60px; }
    .crm-help-grid { grid-template-columns: 1fr; }
    .crm-help-hero h1 { font-size: 34px; }
    .crm-help-article { padding: 24px 22px 32px; }
}