/* Rivo Locators — CRM tab styles (extracted from index.html)
   Loaded via <link rel='stylesheet' href='crm.css'> in index.html's <head>.
   Every rule here is scoped under #crm-root; see the note at the top of the
   original block for why. Keep this file and index.html deployed together. */

      /* ============================================================
         CRM TAB — ported from the standalone "Rivo Concierge" tool.
         Every rule is scoped under #crm-root so its (fairly generic)
         class names — .card, .btn, .actions, .panel, .row2, etc. —
         can never leak out and affect the rest of the app, and vice
         versa. Its own --navy/--paper/... design tokens are declared
         on #crm-root itself rather than :root, for the same reason.
         ============================================================ */
      #crm-root {
        --crm-navy: #0b1d3a;
        --crm-navy-2: #14294f;
        --crm-white: #ffffff;
        --crm-paper: #f4f5f7;
        --crm-line: #d8dce3;
        --crm-ink: #1c2430;
        --crm-ink-soft: #5b6472;
        --crm-cancel: #7a2a2a;
        --crm-cancel-soft: #f6ebeb;
        --crm-ok: #2f5d3a;
        --crm-ok-soft: #eaf2ec;
        display: block;
        background: var(--crm-paper);
        color: var(--crm-ink);
        font-family:
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Helvetica,
          Arial,
          sans-serif;
      }
      #crm-root * {
        box-sizing: border-box;
      }
      /* The CRM's own sub-navigation lives in the main app's black sidebar
         now (index.html), not here — see CRM.switchPanel() in crm.js and
         the "S.tab === 'crm'" branch in index.html's sidebar-building
         code. #crm-root is just the one full-width panel area. */
      #crm-root .crm-shell {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 20px 60px;
      }
      /* Web/desktop gets a much wider working area so the Leads grid
         (and every other panel) isn't squeezed into a narrow column with
         a horizontal scrollbar on a normal laptop/monitor. Mobile is
         already narrower than this, so this media query never touches it. */
      @media (min-width: 1100px) {
        #crm-root .crm-shell {
          max-width: 1500px;
        }
      }
      #crm-root .panel {
        display: none;
      }
      #crm-root .panel.active {
        display: block;
      }
      #crm-root .layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      @media (max-width: 800px) {
        #crm-root .layout {
          grid-template-columns: 1fr;
        }
      }
      #crm-root .card {
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        padding: 20px;
      }
      #crm-root .card h2 {
        font-size: 15px;
        margin: 0 0 14px;
        color: var(--crm-navy);
      }
      #crm-root .card h3 {
        font-size: 12px;
        text-transform: none;
        color: var(--crm-ink-soft);
        margin: 18px 0 4px;
        padding-top: 12px;
        border-top: 1px solid var(--crm-line);
      }
      #crm-root .card h3:first-of-type {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
      }
      #crm-root label {
        display: block;
        font-size: 12px;
        color: var(--crm-ink-soft);
        margin: 12px 0 4px;
      }
      #crm-root label:first-of-type {
        margin-top: 0;
      }
      #crm-root input,
      #crm-root textarea,
      #crm-root select {
        width: 100%;
        padding: 9px 10px;
        border: 1px solid var(--crm-line);
        background: var(--crm-white);
        font-size: 14px;
        font-family: inherit;
        color: var(--crm-ink);
      }
      #crm-root textarea {
        resize: vertical;
        min-height: 60px;
      }
      #crm-root .row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      #crm-root .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        border: 1px solid var(--crm-navy);
        background: var(--crm-navy);
        color: var(--crm-white);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
      }
      #crm-root .btn i {
        font-size: 15px;
        line-height: 1;
      }
      #crm-root .btn:hover {
        background: var(--crm-navy-2);
      }
      #crm-root .btn.secondary {
        background: var(--crm-white);
        color: var(--crm-navy);
      }
      #crm-root .btn.secondary:hover {
        background: var(--crm-paper);
      }
      #crm-root .btn.danger {
        background: var(--crm-cancel);
        border-color: var(--crm-cancel);
      }
      #crm-root .btn.danger:hover {
        background: #5f2020;
      }
      #crm-root .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      /* Small round icon-only buttons — currently the "Mark done all" /
         "Skip all" pair above the lead detail modal's Next Action list.
         Their explanatory note is the native title-attribute tooltip
         (same pattern as the "Auto-Assign" / "Regenerate" text buttons
         elsewhere in this file), so no custom tooltip markup is needed
         here — just something that reads clearly as clickable at a glance
         without a text label. */
      #crm-root .crm-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid var(--crm-navy);
        background: var(--crm-white);
        color: var(--crm-navy);
        font-size: 15px;
        cursor: pointer;
        padding: 0;
      }
      #crm-root .crm-icon-btn:hover {
        background: var(--crm-navy);
        color: var(--crm-white);
      }
      #crm-root .actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;
      }
      #crm-root .preview {
        border: 1px solid var(--crm-line);
        background: var(--crm-paper);
        padding: 0;
        min-height: 120px;
      }
      #crm-root .preview .empty {
        padding: 30px 20px;
        color: var(--crm-ink-soft);
        font-size: 13px;
        text-align: center;
      }
      #crm-root .email-doc {
        background: var(--crm-white);
        font-family: Georgia, "Times New Roman", Times, serif;
        color: #111111;
        font-size: 14px;
        line-height: 1.25;
      }
      #crm-root .email-logo {
        padding: 0;
        line-height: 0;
      }
      #crm-root .email-logo img {
        width: 100%;
        max-width: 600px;
        display: block;
        border: 0;
      }
      #crm-root .email-body {
        padding: 20px 22px;
      }
      #crm-root .email-body p {
        margin: 0 0 12px;
      }
      #crm-root .email-body hr {
        border: none;
        border-top: 1px solid #d8dce3;
        margin: 16px 0;
      }
      #crm-root .email-body .field {
        margin: 0 0 2px;
      }
      #crm-root .status-msg {
        margin-top: 14px;
        padding: 10px 12px;
        font-size: 13px;
        display: none;
      }
      #crm-root .status-msg.show {
        display: block;
      }
      #crm-root .status-msg.ok {
        background: var(--crm-ok-soft);
        color: var(--crm-ok);
        border: 1px solid var(--crm-ok);
      }
      #crm-root .status-msg.err {
        background: var(--crm-cancel-soft);
        color: var(--crm-cancel);
        border: 1px solid var(--crm-cancel);
      }
      #crm-root .status-msg.warn {
        background: #fdeecb;
        color: #a05a00;
        border: 1px solid #a05a00;
      }
      #crm-root .warn-box {
        background: var(--crm-cancel-soft);
        border: 1px solid var(--crm-cancel);
        color: var(--crm-cancel);
        padding: 12px 14px;
        font-size: 13px;
        margin-bottom: 16px;
      }
      #crm-root .activity {
        margin-top: 32px;
      }
      #crm-root .activity h2 {
        font-size: 15px;
        color: var(--crm-navy);
        margin: 0 0 10px;
      }
      #crm-root .activity-item {
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        border-left: 3px solid var(--crm-navy);
        padding: 10px 14px;
        margin-bottom: 8px;
        font-size: 13px;
      }
      #crm-root .activity-item.cancel {
        border-left-color: var(--crm-cancel);
      }
      #crm-root .activity-item .meta {
        color: var(--crm-ink-soft);
        font-size: 11px;
        margin-top: 2px;
      }
      #crm-root .activity-empty {
        color: var(--crm-ink-soft);
        font-size: 13px;
      }
      /* -------- Leads list rows + lead detail modal -------- */
      #crm-root .crm-lead-row {
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        padding: 12px 14px;
        margin-bottom: 8px;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
      }
      #crm-root .crm-lead-row:hover {
        border-color: var(--crm-navy);
        background: var(--crm-paper);
      }
      #crm-root .crm-lead-row-name {
        font-weight: 600;
        font-size: 14px;
      }
      #crm-root .crm-lead-row-meta {
        font-size: 12px;
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-modal-overlay {
        position: fixed;
        /* Longhand instead of the "inset: 0" shorthand on purpose — older
           mobile browsers/WebViews (older Safari/iOS, older Android
           WebView, various in-app browsers) don't support "inset" at all
           and silently drop the whole declaration. A fixed-position box
           with no top/right/bottom/left set renders at its normal
           in-flow ("static") position instead of covering the screen —
           which is exactly what this looked like: the lead modal's own
           fields rendering interleaved with the Leads panel behind it
           instead of covering it. top/right/bottom/left have been
           supported forever and do the same thing everywhere. */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(11, 29, 58, 0.55);
        z-index: 1000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 16px;
        /* NOT overflow-y:auto here anymore — see the note on .crm-modal-box
           below for why that combination (scrolling on the SAME element as
           position:fixed) was the real bug. This element only ever needs to
           center/cover the screen now; .crm-modal-box handles its own
           scrolling. */
      }
      #crm-root .crm-modal-box {
        /* Fallback literal alongside the var() on purpose — belt-and-suspenders
           for the same "popup looks see-through on mobile" symptom this modal
           has already had a positioning fix for (see the note on
           .crm-modal-overlay above): if --crm-white ever failed to resolve for
           any reason, background: var(--crm-white) alone computes to fully
           transparent rather than white, silently losing the opaque card
           behind and letting whatever's underneath show through. The fallback
           guarantees an opaque white card either way. */
        background: var(--crm-white, #ffffff);
        max-width: 560px;
        width: 100%;
        margin: auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        /* This is the actual fix for "the bottom part loses its white
           background once you scroll a tall popup" (screen-recorded and
           confirmed): the scrolling used to happen on .crm-modal-overlay
           itself — the SAME element that's position:fixed. A fixed element
           that also owns its own overflow-y:auto scrolling is a well-known
           bad combination on real phone browsers/WebViews: the fixed
           element's painted background gets sized to roughly one screen's
           worth at layout time and doesn't reliably extend/repaint as you
           scroll further content into view inside it, so content past that
           point renders with no background behind it — exactly the "readable
           text with no white behind it, page bleeding through" look in the
           recording, and why it only ever showed up once a popup was tall
           enough to actually need scrolling.
           Moving the scrolling onto .crm-modal-box instead — a plain,
           non-fixed block that just happens to sit inside a fixed
           container — means the element that scrolls is no longer the same
           element that's pinned to the viewport, which is the standard fix
           for this exact class of bug. max-height leaves room for
           .crm-modal-overlay's own 40px top/bottom padding above; the mobile
           breakpoint below overrides this to fill the full screen instead,
           since that padding is 0 there. */
        max-height: calc(100vh - 80px);
        overflow-y: auto;
      }
      #crm-root .crm-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--crm-line);
      }
      #crm-root .crm-modal-tabs {
        display: inline-flex;
        background: var(--crm-paper);
        border: 1px solid var(--crm-line);
        border-radius: 999px;
        padding: 3px;
        gap: 2px;
      }
      #crm-root .crm-modal-tab {
        border: none;
        background: transparent;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--crm-ink-soft);
        cursor: pointer;
        border-radius: 999px;
      }
      #crm-root .crm-modal-tab.active {
        background: var(--crm-white);
        color: var(--crm-navy);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      }
      #crm-root .crm-modal-close {
        border: none;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        color: var(--crm-ink-soft);
        cursor: pointer;
        padding: 4px 8px;
      }
      #crm-root .crm-modal-close:hover {
        color: var(--crm-ink);
      }
      #crm-root .crm-modal-body {
        padding: 18px 16px 24px;
      }
      /* Wraps the Contacts detail view (#clients-detail-view — see
         clientsPanelHtml()/openClientModal()) — same white card look
         as .crm-modal-box, minus everything that makes it a popup
         (position:fixed, the backdrop, max-width/centering, its own
         scroll container). It renders in the page's normal flow, right
         where the Contacts list was, and #main's own scrolling handles
         a tall one — no mobile scroll-lock needed here either, since
         nothing else on the page is being covered. */
      #crm-root .crm-inline-detail {
        background: var(--crm-white, #ffffff);
        border: 1px solid var(--crm-line);
      }
      #crm-root .crm-ov-fields {
        margin-bottom: 20px;
      }
      #crm-root .crm-ov-row {
        display: flex;
        gap: 14px;
        padding: 7px 0;
        border-bottom: 1px solid var(--crm-line);
        font-size: 13px;
        align-items: center;
      }
      #crm-root .crm-ov-label {
        flex: 0 0 130px;
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-ov-value {
        flex: 1;
      }
      #crm-root .crm-ov-value select,
      #crm-root .crm-ov-value input {
        width: auto;
      }
      /* Deals' Overview tab only (dealOverviewTabHtml()) — two side-by-side
         columns of .crm-ov-row pairs instead of one long stacked list, so
         the Deal Information section reads the same two-column way a Deal
         record view commonly does. Leads'/Contacts' own Overview tabs
         don't use this wrapper and keep their existing single column. */
      #crm-root .crm-deal-ov-cols {
        display: flex;
        gap: 32px;
        align-items: flex-start;
      }
      #crm-root .crm-deal-ov-col {
        flex: 1;
        min-width: 0;
      }
      #crm-root .crm-next-action h3 {
        font-size: 12px;
        text-transform: none;
        color: var(--crm-ink-soft);
        margin: 0 0 8px;
        padding-top: 0;
        border-top: none;
      }
      /* "Lead Information" / "Marketing" / "Notes" sections on the Overview
         tab — same section-header look as "Next Action" above, just with
         breathing room between each stacked section. */
      #crm-root .crm-detail-section {
        margin-top: 24px;
      }
      #crm-root .crm-detail-section h3 {
        font-size: 12px;
        text-transform: none;
        color: var(--crm-ink-soft);
        margin: 0 0 8px;
        padding-top: 0;
        border-top: none;
      }
      #crm-root .crm-detail-section textarea {
        font-family: inherit;
        font-size: 13px;
        resize: vertical;
      }
      #crm-root .crm-task-row {
        border: 1px solid var(--crm-line);
        border-top: none;
        padding: 8px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        font-size: 13px;
      }
      #crm-root .crm-task-row:first-child {
        border-top: 1px solid var(--crm-line);
      }
      #crm-root .crm-task-row.done {
        opacity: 0.6;
      }
      #crm-root .crm-task-row.done .crm-task-title {
        text-decoration: line-through;
      }
      #crm-root .crm-task-title-input {
        font: inherit;
        color: inherit;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 2px 5px;
        margin: -2px -5px;
        min-width: 120px;
        max-width: 100%;
      }
      #crm-root .crm-task-title-input:hover,
      #crm-root .crm-task-title-input:focus {
        background: #fff;
        border-color: var(--crm-line);
        outline: none;
      }
      #crm-root .crm-task-title-input[readonly] {
        cursor: default;
      }
      #crm-root .crm-task-title-input[readonly]:hover,
      #crm-root .crm-task-title-input[readonly]:focus {
        background: transparent;
        border-color: transparent;
      }
      #crm-root .crm-task-row-main {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      #crm-root .crm-task-row-actions {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      /* Per-row "⋯" overflow menu (Skip / Mark done) — crmTaskOverflowMenuHtml()
         in crm.js. Same <details>/<summary> self-contained-dropdown
         approach as .crm-accounts-nhood (Accounts tab's neighborhood
         multi-select), just a small round icon button instead of a wide
         text summary. */
      #crm-root .crm-task-menu {
        position: relative;
      }
      #crm-root .crm-task-menu > summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid var(--crm-line);
        background: var(--crm-white);
        color: var(--crm-ink-soft);
        font-size: 13px;
        cursor: pointer;
      }
      #crm-root .crm-task-menu > summary::-webkit-details-marker {
        display: none;
      }
      #crm-root .crm-task-menu > summary:hover {
        background: var(--crm-paper);
        color: var(--crm-ink);
      }
      #crm-root .crm-task-menu-panel {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 20;
        margin-top: 4px;
        min-width: 150px;
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        padding: 4px;
        gap: 2px;
      }
      #crm-root .crm-task-menu-panel button {
        width: 100%;
        justify-content: flex-start;
        border: none;
        background: transparent;
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--crm-ink);
      }
      #crm-root .crm-task-menu-panel button:hover {
        background: var(--crm-paper);
      }
      #crm-root .crm-task-badge {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: 999px;
        white-space: nowrap;
      }
      #crm-root .crm-task-badge.today {
        background: #fdeecb;
        color: #a05a00;
      }
      #crm-root .crm-task-badge.overdue {
        background: var(--crm-cancel-soft);
        color: var(--crm-cancel);
      }
      #crm-root .crm-task-badge.upcoming {
        background: var(--crm-paper);
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-task-badge.done {
        background: var(--crm-ok-soft);
        color: var(--crm-ok);
      }
      #crm-root .crm-task-time {
        color: var(--crm-ink-soft);
        font-size: 11px;
      }
      #crm-root .crm-task-time-input {
        font: inherit;
        color: var(--crm-ink-soft);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 2px 4px;
        margin: -2px -4px;
        max-width: 168px;
      }
      #crm-root .crm-task-time-input:hover,
      #crm-root .crm-task-time-input:focus {
        background: #fff;
        border-color: var(--crm-line);
        color: var(--crm-ink);
        outline: none;
      }
      #crm-root .crm-task-time-input[readonly] {
        cursor: default;
      }
      /* Tasks tab's Leads/Contacts/Deals grouping (renderTasksPanel()) —
         same quiet section-header look as .crm-detail-section h3, just
         with its own class so it isn't affected by any future change to
         that one, plus a soft parenthetical count. */
      #crm-root .crm-task-group {
        margin-bottom: 28px;
      }
      #crm-root .crm-task-group:last-child {
        margin-bottom: 0;
      }
      #crm-root .crm-task-group-title {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 700;
        color: var(--crm-ink-soft);
        margin: 0 0 8px;
      }
      #crm-root .crm-task-group-count {
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
      }
      #crm-root .crm-task-time-input[readonly]:hover,
      #crm-root .crm-task-time-input[readonly]:focus {
        background: transparent;
        border-color: transparent;
        color: var(--crm-ink-soft);
      }
      /* -------- CRM ▸ Tools ▸ Lead Rotation (admin-only) -------- */
      #crm-root .crm-rotation-row {
        border: 1px solid var(--crm-line);
        border-top: none;
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        background: var(--crm-white);
      }
      #crm-root .crm-rotation-row:first-child {
        border-top: 1px solid var(--crm-line);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      #crm-root .crm-rotation-row:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
      #crm-root .crm-rotation-row-main {
        min-width: 180px;
      }
      #crm-root .crm-rotation-name {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--crm-ink);
      }
      #crm-root .crm-rotation-market {
        font-weight: 400;
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-rotation-you {
        font-weight: 700;
        font-size: 11px;
        color: var(--crm-navy);
        background: var(--crm-paper);
        border-radius: 999px;
        padding: 1px 7px;
        vertical-align: middle;
      }
      #crm-root .crm-rotation-meta {
        font-size: 11px;
        color: var(--crm-ink-soft);
        margin-top: 2px;
      }
      #crm-root .crm-rotation-row-side {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      /* rotationRowHtml()'s pencil button (next to the market badge) —
         opens the "Edit markets" modal (openEditAgentMarkets()). Plain
         icon button, no border/background of its own so it reads as part
         of the name line rather than a separate control. */
      #crm-root .crm-rotation-edit-markets {
        border: none;
        background: none;
        cursor: pointer;
        color: var(--crm-ink-soft);
        padding: 0;
        margin-left: 4px;
        vertical-align: middle;
        font-size: 11px;
      }
      #crm-root .crm-rotation-edit-markets:hover {
        color: var(--crm-navy);
      }
      /* "Next in rotation, by market" preview (rotationNextByMarketHtml()) —
         one row per CRM_MARKETS entry, read-only, showing who
         pickRoundRobinAgent() would currently pick for that market. Same
         bordered-row look as .crm-rotation-row right below it, just
         compact (no side actions), since this is purely informational. */
      #crm-root .crm-rotation-next-grid {
        border-radius: 8px;
        overflow: hidden;
      }
      #crm-root .crm-rotation-next-row {
        border: 1px solid var(--crm-line);
        border-top: none;
        padding: 8px 12px;
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        background: var(--crm-white);
        font-size: 12.5px;
      }
      #crm-root .crm-rotation-next-row:first-child {
        border-top: 1px solid var(--crm-line);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      #crm-root .crm-rotation-next-row:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
      #crm-root .crm-rotation-next-market {
        font-weight: 700;
        color: var(--crm-ink);
        min-width: 150px;
      }
      /* Admin-only clickable variant of the market label above — opens
         Market Management (openMarketManageModal()) for that one market.
         A plain <button> reset to look like the same bold text, just with
         a pointer cursor and an underline on hover so it still reads as
         interactive. */
      #crm-root .crm-rotation-market-link {
        border: none;
        background: none;
        padding: 0;
        text-align: left;
        cursor: pointer;
        font: inherit;
      }
      #crm-root .crm-rotation-market-link:hover {
        text-decoration: underline;
        color: var(--crm-navy);
      }
      #crm-root .crm-rotation-next-name {
        font-weight: 600;
        color: var(--crm-navy);
      }
      #crm-root .crm-rotation-next-none {
        color: var(--crm-cancel);
        font-style: italic;
      }
      #crm-root .crm-rotation-next-note {
        color: var(--crm-ink-soft);
        font-size: 11px;
      }
      /* Plain checkbox visually restyled into a track+knob switch — the
         real <input type=checkbox> stays in the DOM (just visually hidden)
         so this keeps working with keyboard focus/screen readers instead
         of being a div faking a control. */
      #crm-root .crm-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
      }
      #crm-root .crm-toggle input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
      }
      #crm-root .crm-toggle-track {
        position: relative;
        width: 34px;
        height: 20px;
        border-radius: 999px;
        background: var(--crm-line);
        transition: background 0.15s ease;
        flex-shrink: 0;
      }
      #crm-root .crm-toggle-track::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--crm-white);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        transition: transform 0.15s ease;
      }
      #crm-root .crm-toggle input:checked + .crm-toggle-track {
        background: var(--crm-navy);
      }
      #crm-root .crm-toggle input:checked + .crm-toggle-track::after {
        transform: translateX(14px);
      }
      #crm-root .crm-toggle input:focus-visible + .crm-toggle-track {
        outline: 2px solid var(--crm-navy);
        outline-offset: 2px;
      }
      #crm-root .crm-toggle-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--crm-ink-soft);
        min-width: 66px;
      }
      /* -------- Lead modal: Timeline History (grouped by date,
         newest first, with a connecting line + icon per event) -------- */
      #crm-root .crm-tl-group {
        margin-bottom: 22px;
      }
      #crm-root .crm-tl-date-pill {
        display: inline-block;
        background: var(--crm-paper);
        color: var(--crm-ink-soft);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 4px 12px;
        border-radius: 999px;
        margin-bottom: 12px;
      }
      #crm-root .crm-tl-items {
        position: relative;
        padding-left: 6px;
      }
      #crm-root .crm-tl-item {
        position: relative;
        display: flex;
        gap: 12px;
        padding-bottom: 18px;
        padding-left: 30px;
      }
      #crm-root .crm-tl-item::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 26px;
        bottom: -4px;
        width: 2px;
        background: var(--crm-line);
      }
      #crm-root .crm-tl-item:last-child::before {
        display: none;
      }
      #crm-root .crm-tl-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--crm-navy);
        color: var(--crm-white);
        font-size: 14px;
        flex-shrink: 0;
      }
      #crm-root .crm-tl-icon.skip {
        background: var(--crm-cancel-soft);
        color: var(--crm-cancel);
      }
      #crm-root .crm-tl-icon.status {
        background: var(--crm-ok-soft);
        color: var(--crm-ok);
      }
      #crm-root .crm-tl-content {
        flex: 1;
        min-width: 0;
      }
      #crm-root .crm-tl-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--crm-ink);
      }
      #crm-root .crm-tl-detail {
        font-size: 12.5px;
        color: var(--crm-ink-soft);
        margin-top: 2px;
      }
      #crm-root .crm-tl-meta {
        font-size: 11.5px;
        color: var(--crm-ink-soft);
        margin-top: 4px;
      }
      /* -------- Leads: List View / Kanban View toggle -------- */
      #crm-root .crm-view-toggle {
        display: inline-flex;
        border: 1px solid var(--crm-line);
        margin-bottom: 12px;
        overflow: hidden;
      }
      #crm-root .crm-view-toggle-btn {
        border: none;
        border-right: 1px solid var(--crm-line);
        background: var(--crm-white);
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--crm-ink-soft);
        cursor: pointer;
      }
      #crm-root .crm-view-toggle-btn:last-child {
        border-right: none;
      }
      #crm-root .crm-view-toggle-btn.active {
        background: var(--crm-navy);
        color: var(--crm-white);
      }
      /* -------- Leads: List View table -------- */
      #crm-root .crm-lead-table {
        border: 1px solid var(--crm-line);
        background: var(--crm-white);
        overflow-x: auto;
      }
      #crm-root .crm-lead-thead,
      #crm-root .crm-lead-trow {
        display: grid;
        grid-template-columns: 80px 1fr 1.3fr 95px 95px 90px 105px;
        gap: 8px;
        align-items: center;
        min-width: 800px;
      }
      #crm-root .crm-lead-thead {
        background: var(--crm-paper);
        border-bottom: 1px solid var(--crm-line);
        padding: 9px 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-lead-trow {
        padding: 10px 12px;
        border-bottom: 1px solid var(--crm-line);
        font-size: 13px;
        cursor: pointer;
      }
      #crm-root .crm-lead-trow:last-child {
        border-bottom: none;
      }
      #crm-root .crm-lead-trow:hover {
        background: var(--crm-paper);
      }
      #crm-root .crm-lead-trow.today {
        background: #fdf6ea;
      }
      #crm-root .crm-lead-trow.overdue {
        background: var(--crm-cancel-soft);
      }
      #crm-root .crm-lt-col.crm-lt-email {
        color: var(--crm-ink-soft);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #crm-root .crm-lt-col.crm-lt-status,
      #crm-root .crm-lt-col.crm-lt-locator,
      #crm-root .crm-lt-col.crm-lt-activity {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #crm-root .crm-lt-col.crm-lt-locator,
      #crm-root .crm-lt-col.crm-lt-activity {
        color: var(--crm-ink-soft);
        font-size: 12px;
      }
      #crm-root .crm-lt-col.crm-lt-phone {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #crm-root .crm-lt-col.crm-lt-phone a {
        color: var(--crm-navy);
        text-decoration: none;
      }
      #crm-root .crm-lt-col.crm-lt-phone a:hover {
        text-decoration: underline;
      }
      #crm-root .crm-lt-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 999px;
        white-space: nowrap;
        display: inline-block;
      }
      #crm-root .crm-lt-badge.today {
        background: #fdeecb;
        color: #a05a00;
      }
      #crm-root .crm-lt-badge.overdue {
        background: var(--crm-cancel-soft);
        color: var(--crm-cancel);
      }
      #crm-root .crm-lt-badge.upcoming {
        background: var(--crm-paper);
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-lt-badge.done {
        background: var(--crm-ok-soft);
        color: var(--crm-ok);
      }
      #crm-root .crm-lt-badge.status {
        background: var(--crm-paper);
        color: var(--crm-navy);
        border: 1px solid var(--crm-line);
      }
      /* -------- Leads: Kanban View -------- */
      #crm-root .crm-kanban {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 8px;
      }
      #crm-root .crm-kanban-col {
        flex: 0 0 240px;
        background: var(--crm-paper);
        border: 1px solid var(--crm-line);
        display: flex;
        flex-direction: column;
        max-height: 560px;
      }
      #crm-root .crm-kanban-col-head {
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 700;
        color: var(--crm-navy);
        border-bottom: 1px solid var(--crm-line);
        background: var(--crm-white);
      }
      #crm-root .crm-kanban-count {
        color: var(--crm-ink-soft);
        font-weight: 400;
        margin-left: 3px;
      }
      /* Deals Board's column header only (dealsKanbanHtml()) — a dollar
         total under the name/count, summing expected_revenue across every
         deal currently in that stage. Leads'/Contacts' own Kanban columns
         never show this (no dollar figure to total there). */
      #crm-root .crm-kanban-col-total {
        color: var(--crm-ink-soft);
        font-weight: 600;
        font-size: 12px;
        margin-top: 2px;
      }
      #crm-root .crm-kanban-col-body {
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
      }
      #crm-root .crm-kanban-card {
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        padding: 10px;
        font-size: 13px;
        cursor: pointer;
      }
      #crm-root .crm-kanban-card:hover {
        border-color: var(--crm-navy);
      }
      #crm-root .crm-kanban-card[draggable="true"] {
        cursor: grab;
        /* Safari/WebKit needs this explicitly, or it can ignore the
           draggable="true" attribute on a plain <div> entirely — dragging
           just does nothing, no error, no console output. user-select:none
           stops a click-drag over the name/email text from starting a text
           selection instead of a native drag, which is the other common
           way this silently "does nothing" on trackpads. */
        -webkit-user-drag: element;
        user-select: none;
        -webkit-user-select: none;
      }
      #crm-root .crm-kanban-card.dragging {
        opacity: 0.4;
        cursor: grabbing;
      }
      #crm-root .crm-kanban-col-body.crm-kanban-drop-hover {
        background: var(--crm-ok-soft);
        outline: 2px dashed var(--crm-ok);
        outline-offset: -4px;
      }
      #crm-root .crm-kanban-card-name {
        font-weight: 600;
        margin-bottom: 2px;
      }
      #crm-root .crm-kanban-card-email {
        color: var(--crm-ink-soft);
        font-size: 12px;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #crm-root .crm-kanban-empty {
        color: var(--crm-ink-soft);
        font-size: 12px;
        padding: 4px 2px;
      }
      /* Contacts tab — a List-View grid table (clientListTableHtml() in
         crm.js) matching the Leads grid's own look, row click opens
         #crm-client-modal (same pattern as the Leads table opening
         #crm-lead-modal). Reuses the Leads table's .crm-lt-col cell
         classes (email/status/locator/activity/phone) for identical
         column styling; only the table/row/head wrapper classes are
         new, since the column count/widths differ (no "next action"
         icon column here). */
      #crm-root .crm-client-table {
        border: 1px solid var(--crm-line);
        background: var(--crm-white);
        overflow-x: auto;
      }
      #crm-root .crm-client-thead,
      #crm-root .crm-client-trow {
        display: grid;
        grid-template-columns: 80px 1fr 1.3fr 130px 100px 110px 105px 36px;
        gap: 8px;
        align-items: center;
        min-width: 870px;
      }
      #crm-root .crm-client-trow.today {
        background: #fdf6ea;
      }
      #crm-root .crm-client-trow.overdue {
        background: var(--crm-cancel-soft);
      }
      /* Delete column (see clientListTableHtml(), now unused/dead code
         since Contacts moved to Kanban-only — kept for the class name)
         and the same delete icon reused on each Contacts Kanban card
         (clientsKanbanHtml()) — icon-only, kept out of the row/card's
         own onclick (opens the contact) via event.stopPropagation() on
         the button itself. */
      #crm-root .crm-client-trow .crm-lt-delete-btn,
      #crm-root .crm-kanban-card .crm-lt-delete-btn {
        border: none;
        background: none;
        color: var(--crm-ink-soft);
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }
      #crm-root .crm-client-trow .crm-lt-delete-btn:hover,
      #crm-root .crm-kanban-card .crm-lt-delete-btn:hover {
        color: var(--crm-cancel);
      }
      /* Convert-to-Contact shortcut on each Leads Kanban card
         (leadKanbanHtml()) — same icon-button treatment as the delete
         icon above, but a neutral/navy hover instead of red since
         Convert isn't destructive. */
      #crm-root .crm-kanban-card .crm-kanban-convert-btn {
        border: none;
        background: none;
        color: var(--crm-ink-soft);
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }
      #crm-root .crm-kanban-card .crm-kanban-convert-btn:hover {
        color: var(--crm-navy);
      }
      #crm-root .crm-client-thead {
        background: var(--crm-paper);
        border-bottom: 1px solid var(--crm-line);
        padding: 9px 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-client-trow {
        padding: 10px 12px;
        border-bottom: 1px solid var(--crm-line);
        font-size: 13px;
        cursor: pointer;
      }
      #crm-root .crm-client-trow:last-child {
        border-bottom: none;
      }
      #crm-root .crm-client-trow:hover {
        background: var(--crm-paper);
      }
      /* Accounts tab's property directory — same CSS-grid thead/trow
         table pattern as .crm-lead-*/.crm-client-* above (see
         accountsTableHtml()/accountRowHtml() in crm.js), just under its
         own column set: 12 columns of property data, all visible at
         once (no card layout hiding anything behind a toggle). Wider
         than either of those two, so it needs its own min-width and
         scrolls horizontally within its own box rather than the page. */
      #crm-root .crm-accounts-table {
        border: 1px solid var(--crm-line);
        background: var(--crm-white);
        overflow-x: auto;
      }
      #crm-root .crm-accounts-thead,
      #crm-root .crm-accounts-trow {
        display: grid;
        grid-template-columns:
          170px 190px 110px 130px 140px 120px 110px 100px 120px 130px 190px
          190px 180px 160px;
        gap: 10px;
        align-items: start;
        min-width: 2170px;
      }
      #crm-root .crm-accounts-thead {
        background: var(--crm-paper);
        border-bottom: 1px solid var(--crm-line);
        padding: 9px 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--crm-ink-soft);
        position: sticky;
        top: 0;
        z-index: 1;
      }
      #crm-root .crm-accounts-trow {
        padding: 10px 12px;
        border-bottom: 1px solid var(--crm-line);
        font-size: 12.5px;
      }
      #crm-root .crm-accounts-trow:last-child {
        border-bottom: none;
      }
      #crm-root .crm-accounts-trow:hover {
        background: var(--crm-paper);
      }
      #crm-root .crm-accounts-col {
        overflow-wrap: break-word;
        line-height: 1.4;
      }
      /* Accounts tab Neighborhood filter — a native <details>/<summary>
         multi-select (accountsNhoodFilterHtml() in crm.js) styled to sit
         flush with the plain <select>s next to it (City/Management/
         Sends-or-escorts/Approval Rate — see the shared #crm-root
         input/select rule above for the look this matches). */
      #crm-root .crm-accounts-nhood {
        position: relative;
        flex: 0 0 160px;
        min-width: 0;
      }
      #crm-root .crm-accounts-nhood > summary {
        list-style: none;
        padding: 9px 10px;
        border: 1px solid var(--crm-line);
        background: var(--crm-white);
        font-size: 14px;
        color: var(--crm-ink);
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #crm-root .crm-accounts-nhood > summary::-webkit-details-marker {
        display: none;
      }
      #crm-root .crm-accounts-nhood > summary::after {
        content: "▾";
        float: right;
        margin-left: 8px;
        color: var(--crm-ink-soft);
      }
      #crm-root .crm-accounts-nhood-panel {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 20;
        margin-top: 4px;
        min-width: 230px;
        max-height: 260px;
        overflow-y: auto;
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
      }
      #crm-root .crm-accounts-nhood-actions {
        display: flex;
        gap: 6px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--crm-line);
        position: sticky;
        top: 0;
        background: var(--crm-white);
      }
      #crm-root .crm-accounts-nhood-actions button {
        flex: 1;
        font-size: 11px;
        font-weight: 600;
        padding: 5px;
        border: 1px solid var(--crm-line);
        background: var(--crm-paper);
        cursor: pointer;
        color: var(--crm-ink);
      }
      #crm-root .crm-accounts-nhood-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        margin: 0;
        font-size: 12.5px;
        font-weight: 400;
        color: var(--crm-ink);
        cursor: pointer;
        border-bottom: 1px solid var(--crm-line);
      }
      #crm-root .crm-accounts-nhood-row:last-child {
        border-bottom: none;
      }
      #crm-root .crm-accounts-nhood-row input {
        width: auto;
        padding: 0;
        accent-color: var(--crm-navy);
        cursor: pointer;
        flex-shrink: 0;
      }
      #crm-root .crm-accounts-nhood-empty {
        padding: 12px 10px;
        font-size: 12px;
        color: var(--crm-ink-soft);
        font-style: italic;
      }
      /* Notes section (Overview tab of #crm-client-modal) — each saved
         note plus an inline delete icon, mirroring .activity-item but
         with room on the right for the delete button. Leads' own Notes
         section (leadNotesSectionHtml()) has no per-note delete; this
         one does, so it needs its own slightly different row markup. */
      #crm-root .crm-note-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }
      #crm-root .crm-note-row .crm-note-body {
        flex: 1;
        min-width: 0;
      }
      #crm-root .crm-note-delete {
        border: none;
        background: none;
        color: var(--crm-ink-soft);
        cursor: pointer;
        padding: 2px 4px;
        flex-shrink: 0;
      }
      #crm-root .crm-note-delete:hover {
        color: var(--crm-cancel);
      }
      @media (max-width: 900px) {
        #crm-root .crm-shell {
          padding: 14px 12px 50px;
        }
        #crm-root .row2 {
          grid-template-columns: 1fr;
          gap: 0;
        }
        #crm-root .crm-modal-overlay {
          padding: 0;
          align-items: stretch;
          /* Forced full-bleed + opaque here too, in case anything else on the
             page carries a competing rule at this same breakpoint — this is
             the one place mobile actually sees this element, so it gets the
             belt-and-suspenders treatment. */
          background: rgba(11, 29, 58, 0.55) !important;
        }
        #crm-root .crm-modal-box {
          max-width: none;
          margin: 0;
          min-height: 100%;
          /* .crm-modal-overlay has no padding at this breakpoint (unlike the
             40px top/bottom the base rule leaves room for), so the box's own
             scrollable area should be the full screen height here, not the
             desktop calc() that assumes that padding exists. */
          max-height: 100%;
          width: 100%;
          background: #ffffff !important;
        }
        #crm-root .crm-ov-label {
          flex: 0 0 110px;
        }
        #crm-root .crm-deal-ov-cols {
          flex-direction: column;
          gap: 0;
        }
        #crm-root .crm-kanban-col {
          flex-basis: 200px;
        }
      }
      /* Self-built "search as you type" dropdown (dealSearchOptionsHtml()
         in crm.js) used for the Deals module's Contact / Account Name
         fields instead of a native <datalist> — datalist suggestions are
         unreliable across browsers (notably Safari, which has long had
         bugs where no suggestions show at all), so these fields render
         their own filtered option list in a small panel under the input. */
      #crm-root .crm-search-dd {
        position: relative;
      }
      #crm-root .crm-search-dd-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        margin-top: 2px;
        background: var(--crm-white);
        border: 1px solid var(--crm-line);
        border-radius: 6px;
        max-height: 220px;
        overflow-y: auto;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      }
      #crm-root .crm-search-dd-opt {
        padding: 7px 10px;
        font-size: 12.5px;
        line-height: 1.3;
        cursor: pointer;
        color: var(--crm-ink);
      }
      #crm-root .crm-search-dd-opt:hover {
        background: var(--crm-paper);
      }
      #crm-root .crm-search-dd-empty {
        padding: 7px 10px;
        font-size: 12px;
        color: var(--crm-ink-soft);
      }
/* Task assignee line under every task row (taskAssigneeHtml() in crm.js) —
   full width so it always sits BELOW the task's title/actions. */
#crm-root .crm-task-assignee {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--crm-ink-soft);
  margin-top: 2px;
}
#crm-root .crm-task-assignee strong {
  color: var(--crm-ink);
  font-weight: 600;
}
#crm-root .crm-task-assignee-select {
  width: auto;
  padding: 2px 6px;
  font-size: 11.5px;
  border-radius: 4px;
}
#crm-root .crm-task-assignee-by {
  font-style: italic;
}

/* ---------- Lead Rotation: by-market grid (names per market) ---------- */
#crm-root .crm-rotation-next-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
}
#crm-root .crm-rotation-next-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#crm-root .crm-rotation-next-head .crm-rotation-next-market {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
#crm-root .crm-rotation-market-link {
  padding: 3px 8px 3px 4px;
  margin-left: -4px;
  border-radius: 6px;
  color: var(--crm-navy);
}
#crm-root .crm-rotation-market-link:hover {
  background: var(--crm-paper);
  text-decoration: none;
}
#crm-root .crm-mkt-chev {
  font-size: 12px;
  color: var(--crm-ink-soft);
}
#crm-root .crm-rotation-next-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
#crm-root .crm-rotation-next-label {
  color: var(--crm-ink-soft);
  font-size: 11.5px;
}
#crm-root .crm-mkt-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  background: var(--crm-paper);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
#crm-root .crm-mkt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-basis: 100%;
}
#crm-root .crm-mkt-chip {
  font-size: 11.5px;
  background: var(--crm-ok-soft);
  color: var(--crm-ok);
  border-radius: 999px;
  padding: 2px 9px;
}
#crm-root .crm-mkt-chip.off {
  background: var(--crm-paper);
  color: var(--crm-ink-soft);
  text-decoration: line-through;
}
#crm-root .crm-cities-hint {
  font-size: 12.5px;
  color: var(--crm-ink-soft);
  background: var(--crm-white);
  border: 1px dashed var(--crm-line);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---------- Market Management popup ---------- */
#crm-root .crm-mm-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--crm-ink-soft);
  margin: 0 0 6px;
}
#crm-root .crm-mm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--crm-white);
}
#crm-root .crm-mm-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--crm-navy);
  color: var(--crm-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
#crm-root .crm-mm-avatar.sm {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 9px;
}
#crm-root .crm-mm-info {
  flex: 1;
  min-width: 0;
}
#crm-root .crm-mm-name {
  font-size: 13.5px;
  font-weight: 600;
}
#crm-root .crm-mm-sub {
  font-size: 11.5px;
  color: var(--crm-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#crm-root .crm-mm-status.on { color: var(--crm-ok); font-weight: 600; }
#crm-root .crm-mm-status.off { color: var(--crm-ink-soft); font-style: italic; }
#crm-root .crm-mm-status.cap { color: var(--crm-cancel); font-weight: 600; }
#crm-root .crm-mm-btn {
  padding: 6px 10px;
  font-size: 12px;
  flex-shrink: 0;
}
#crm-root .crm-mm-search {
  margin-bottom: 8px;
  border-radius: 6px;
}
#crm-root .crm-mm-others {
  max-height: 260px;
  overflow-y: auto;
}
#crm-root .crm-mm-empty {
  font-size: 12.5px;
  color: var(--crm-ink-soft);
  padding: 12px;
  border: 1px dashed var(--crm-line);
  border-radius: 8px;
  margin-bottom: 6px;
}
#crm-root .crm-mm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin: 0;
  font-size: 13px;
  color: var(--crm-ink);
  cursor: pointer;
}
#crm-root .crm-mm-check input { width: auto; }

/* ---------- City Management tab ---------- */
#crm-root .crm-cities-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#crm-root .crm-city-add {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 260px;
  max-width: 520px;
}
#crm-root .crm-city-add input { flex: 1; border-radius: 6px; }
#crm-root .crm-city-add .btn { white-space: nowrap; border-radius: 6px; }
#crm-root .crm-cities-summary {
  font-size: 12px;
  color: var(--crm-ink-soft);
  margin-bottom: 12px;
}
#crm-root .crm-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
#crm-root .crm-city-card {
  background: var(--crm-white);
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#crm-root .crm-city-card.inactive { opacity: 0.6; }
#crm-root .crm-city-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
#crm-root .crm-city-pin { color: var(--crm-navy); font-size: 16px; }
#crm-root .crm-city-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
}
#crm-root .crm-city-name:hover,
#crm-root .crm-city-name:focus {
  border-color: var(--crm-line);
  background: var(--crm-white);
  outline: none;
}
#crm-root .crm-city-card .crm-toggle-label { min-width: 52px; }
#crm-root .crm-city-del {
  border: none;
  background: none;
  color: var(--crm-ink-soft);
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
}
#crm-root .crm-city-del:hover { color: var(--crm-cancel); }
#crm-root .crm-city-card-meta {
  font-size: 11.5px;
  color: var(--crm-ink-soft);
}
#crm-root .crm-city-agents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#crm-root .crm-city-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  background: var(--crm-paper);
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  padding: 3px 4px 3px 4px;
}
#crm-root .crm-city-agent.off { color: var(--crm-ink-soft); text-decoration: line-through; }
#crm-root .crm-city-agent-x {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--crm-ink-soft);
  font-size: 15px;
  line-height: 1;
  padding: 0 5px;
}
#crm-root .crm-city-agent-x:hover { color: var(--crm-cancel); }
#crm-root .crm-city-noagents {
  font-size: 12px;
  color: var(--crm-cancel);
  font-style: italic;
}
#crm-root .crm-city-addagent {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
#crm-root .crm-city-addagent select { flex: 1; border-radius: 6px; padding: 7px 8px; font-size: 13px; }
#crm-root .crm-city-addagent .btn { padding: 7px 12px; font-size: 12px; white-space: nowrap; border-radius: 6px; }
@media (max-width: 600px) {
  #crm-root .crm-city-grid { grid-template-columns: 1fr; }
}

/* City Management: multi-agent add picker */
#crm-root .crm-city-addbtn {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 6px;
}
#crm-root .crm-city-picker {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  padding: 8px;
  background: var(--crm-paper);
}
#crm-root .crm-city-picker-top {
  display: flex;
  gap: 8px;
  align-items: center;
}
#crm-root .crm-city-picker-top .crm-mm-search {
  margin: 0;
  flex: 1;
  padding: 7px 9px;
  font-size: 13px;
}
#crm-root .crm-city-picker-all {
  border: none;
  background: none;
  color: var(--crm-navy);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#crm-root .crm-city-picker-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 6px 0;
  background: var(--crm-white);
  border: 1px solid var(--crm-line);
  border-radius: 6px;
  padding: 2px 8px;
}
#crm-root .crm-city-picker-list .crm-mm-check {
  border-bottom: 1px solid var(--crm-line);
}
#crm-root .crm-city-picker-list .crm-mm-check:last-child {
  border-bottom: none;
}
#crm-root .crm-city-picker-email {
  color: var(--crm-ink-soft);
  font-size: 11.5px;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#crm-root .crm-city-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#crm-root .crm-city-picker-actions .btn {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 6px;
}
#crm-root .crm-mm-footer-link {
  margin-top: 12px;
  font-size: 12.5px;
}

/* ---------- Accounts ▸ Units tab ---------- */
#crm-root .crm-units-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
#crm-root .crm-units-stat {
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: var(--crm-white);
  padding: 12px 14px;
}
#crm-root .crm-units-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--crm-ink-soft);
  margin-bottom: 4px;
}
#crm-root .crm-units-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--crm-navy);
}
#crm-root .crm-units-stat-value.now,
#crm-root .crm-unit-now {
  color: var(--crm-ok);
}
#crm-root .crm-unit-now { font-weight: 600; }
#crm-root .crm-units-table {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--crm-white);
}
#crm-root .crm-units-thead,
#crm-root .crm-units-trow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}
#crm-root .crm-units-thead {
  background: var(--crm-paper);
  border-bottom: 1px solid var(--crm-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-ink-soft);
}
#crm-root .crm-units-trow {
  border-bottom: 1px solid var(--crm-line);
  font-size: 13px;
}
#crm-root .crm-units-trow:last-child { border-bottom: none; }
#crm-root .crm-units-trow:hover { background: var(--crm-paper); }
#crm-root .crm-units-fp { font-weight: 600; }
#crm-root .crm-units-sub { font-size: 11.5px; color: var(--crm-ink-soft); }
#crm-root .crm-units-price { font-weight: 600; }
@media (max-width: 600px) {
  #crm-root .crm-units-summary { grid-template-columns: 1fr; }
  #crm-root .crm-units-thead,
  #crm-root .crm-units-trow { grid-template-columns: 1.6fr 0.8fr 0.9fr 1.1fr; font-size: 12px; }
}
#crm-root .crm-units-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#crm-root .crm-units-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}
#crm-root .crm-units-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--crm-ink-soft);
  font-size: 14px;
}
#crm-root .crm-units-search input {
  padding-left: 32px;
  border-radius: 6px;
}
#crm-root .crm-units-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  white-space: nowrap;
}
#crm-root .crm-units-sort select {
  width: auto;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
}
#crm-root .crm-units-count {
  font-size: 11.5px;
  color: var(--crm-ink-soft);
  margin: 0 0 6px;
}

/* Smaller "Assigned to" line under tasks (per request) — !important so it
   wins over the generic #crm-root input/select sizing and any app-wide
   select styles in index.html. */
#crm-root .crm-task-assignee {
  font-size: 10.5px !important;
  gap: 4px;
  margin-top: 0;
}
#crm-root .crm-task-assignee i { font-size: 11px; }
#crm-root .crm-task-assignee strong { font-size: 10.5px !important; }
#crm-root .crm-task-assignee .crm-task-assignee-select,
#crm-root .crm-task-row .crm-task-assignee select {
  font-size: 10.5px !important;
  padding: 1px 4px !important;
  height: 22px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  width: auto !important;
  max-width: 170px;
  border-radius: 4px;
}
#crm-root .crm-task-assignee-by { font-size: 10px; }
/* Note author line ("who added the note") — same small size. */
#crm-root .crm-note-row .meta { font-size: 10.5px; }

/* Properties to Tour: dropdown (client favorites) + input + Add */
#crm-root .crm-ptt-row { align-items: flex-start; }
#crm-root .crm-ptt-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  max-width: 420px;
}
#crm-root .crm-ptt-add select {
  flex: 1 1 100%;
  width: 100% !important;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 6px;
}
#crm-root .crm-ptt-add input {
  flex: 1 1 200px;
  width: auto !important;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 6px;
}
#crm-root .crm-ptt-add .btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}
#crm-root .crm-ptt-hint {
  font-size: 10.5px;
  color: var(--crm-ink-soft);
  margin-top: 4px;
}

/* Searchable Agent / Locator pickers (enhanceAgentSelect() in crm.js) */
#crm-root .crm-agent-combo {
  position: relative;
  min-width: 160px;
  vertical-align: middle;
}
#crm-root .crm-agent-combo-input {
  width: 100% !important;
  cursor: text;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--crm-ink-soft) 50%),
    linear-gradient(135deg, var(--crm-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#crm-root .crm-agent-combo-input:focus {
  outline: none;
  border-color: var(--crm-navy);
}
#crm-root .crm-agent-combo .crm-search-dd-panel {
  min-width: 220px;
  z-index: 1100;
}
#crm-root .crm-search-dd-opt.active,
#crm-root .crm-search-dd-opt:hover {
  background: var(--crm-paper);
}
#crm-root .crm-search-dd-opt.selected {
  font-weight: 700;
  color: var(--crm-navy);
}
#crm-root .crm-task-assignee .crm-agent-combo { min-width: 140px; }
#crm-root .crm-task-assignee .crm-agent-combo-input { padding-right: 22px !important; }

/* Next Action: one Call / Text / Email bar on top (nextActionContactBarHtml) */
#crm-root .crm-na-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
#crm-root .crm-na-btn {
  padding: 6px 14px;
  font-size: 12.5px;
  border-radius: 999px;
}
#crm-root .crm-na-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* "Which email?" picker (openEmailTaskPicker) */
#crm-root .crm-email-task-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: var(--crm-white);
  cursor: pointer;
  font-size: 13px;
  color: var(--crm-ink);
}
#crm-root .crm-email-task-opt:hover {
  border-color: var(--crm-navy);
  background: var(--crm-paper);
}
#crm-root .crm-email-task-title {
  flex: 1;
  font-weight: 600;
}

/* Task "⋮" menu (Mark done / Skip) — opens on hover or click */
#crm-root .crm-task-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--crm-line);
  background: var(--crm-white);
  color: var(--crm-ink-soft);
  font-size: 14px;
  cursor: pointer;
}
#crm-root .crm-task-menu-btn:hover,
#crm-root .crm-task-menu.open .crm-task-menu-btn {
  background: var(--crm-paper);
  color: var(--crm-ink);
}
#crm-root .crm-task-menu .crm-task-menu-panel {
  display: none;
  margin-top: 0;
  top: 100%;
}
/* invisible bridge so moving the mouse from the dots to the menu keeps it open */
#crm-root .crm-task-menu::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 6px;
}
#crm-root .crm-task-menu:hover .crm-task-menu-panel,
#crm-root .crm-task-menu.open .crm-task-menu-panel {
  display: flex;
}
/* 2026-11-11: opened by tap/click, the panel is moved to #crm-root so no list or
   card can cut it off (crm.js toggleTaskMenu()). */
#crm-root .crm-task-menu-panel.crm-task-menu-float {
  display: flex;
  position: fixed;
  right: auto;
  margin-top: 0;
  z-index: 100000;
  min-width: 170px;
  border-radius: 10px;
}
/* Phones: same floating menu (right side), bigger tap targets. */
#crm-root .crm-task-menu-panel.crm-task-menu-touch {
  min-width: 180px;
  padding: 6px;
  gap: 4px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
#crm-root .crm-task-menu-panel.crm-task-menu-touch button {
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 8px;
}
/* Touch screens: no hover-opened copy left behind inside the row. */
@media (hover: none) {
  #crm-root .crm-task-menu:not(.open):hover .crm-task-menu-panel {
    display: none;
  }
}

/* Properties to Tour v2 — chips + multi-select from favorited units */
#crm-root .crm-ptt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 460px;
  margin-bottom: 6px;
}
#crm-root .crm-ptt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: var(--crm-paper);
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
}
#crm-root .crm-ptt-chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--crm-ink-soft);
  font-size: 15px;
  line-height: 1;
  padding: 0 5px;
}
#crm-root .crm-ptt-chip button:hover { color: var(--crm-cancel); }
#crm-root .crm-ptt-empty { font-size: 12px; color: var(--crm-ink-soft); font-style: italic; }
#crm-root .crm-ptt-open { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
#crm-root .crm-ptt-picker {
  max-width: 460px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--crm-white);
}
#crm-root .crm-ptt-picker .crm-mm-check {
  border-bottom: 1px solid var(--crm-line);
  font-size: 12.5px;
}
#crm-root .crm-ptt-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}
#crm-root .crm-ptt-picker-actions .btn { padding: 6px 12px; font-size: 12px; border-radius: 6px; }

/* Call / Text / Email in the record header, next to the tabs */
#crm-root .crm-modal-header { flex-wrap: wrap; }
#crm-root .crm-hdr-actions { display: flex; align-items: center; margin-right: auto; margin-left: 4px; }
#crm-root .crm-hdr-actions .crm-na-bar { margin: 0; flex-wrap: nowrap; }
#crm-root .crm-hdr-actions .crm-na-btn { padding: 5px 12px; font-size: 12px; }
@media (max-width: 700px) {
  #crm-root .crm-hdr-actions { order: 3; width: 100%; margin: 6px 0 0; }
}

/* "Assigned to" as a clickable name; click pops up the agent search */
#crm-root .crm-assignee-pick { position: relative; display: inline-block; }
#crm-root .crm-assignee-link {
  border: none;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--crm-navy);
  cursor: pointer;
}
#crm-root .crm-assignee-link:hover { text-decoration: underline; }
#crm-root .crm-assignee-link i { font-size: 10px; }
#crm-root .crm-assignee-pop {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 60;
  background: var(--crm-white);
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px;
  min-width: 230px;
}
#crm-root .crm-assignee-pick.open .crm-assignee-pop { display: block; }
#crm-root .crm-assignee-pop .crm-agent-combo { display: block !important; min-width: 0; }
#crm-root .crm-assignee-pop .crm-agent-combo-input {
  font-size: 12.5px !important;
  height: 30px !important;
  padding: 4px 26px 4px 8px !important;
  max-width: none !important;
}

/* Lead Rotation: per-market agent list hidden until the arrow is clicked */
#crm-root .crm-mkt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  color: var(--crm-ink-soft);
}
#crm-root .crm-mkt-toggle i { font-size: 14px; transition: transform 0.15s ease; }
#crm-root .crm-mkt-toggle.open i { transform: rotate(180deg); }
#crm-root .crm-mkt-toggle:hover .crm-mkt-count { background: var(--crm-line); color: var(--crm-ink); }

/* Role Management */
#crm-root .crm-role-list {
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: var(--crm-white);
  overflow: hidden;
}
#crm-root .crm-role-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--crm-line);
}
#crm-root .crm-role-row:last-child { border-bottom: none; }
#crm-root .crm-role-seg {
  display: inline-flex;
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  padding: 2px;
  background: var(--crm-paper);
  flex-shrink: 0;
}
#crm-root .crm-role-opt {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  border-radius: 999px;
  cursor: pointer;
}
#crm-root .crm-role-opt:hover { color: var(--crm-ink); }
#crm-root .crm-role-opt.on { color: #fff; }
#crm-root .crm-role-opt.on.agent { background: #5b6472; }
#crm-root .crm-role-opt.on.concierge { background: #a05a00; }
#crm-root .crm-role-opt.on.admin { background: var(--crm-navy); }
#crm-root .crm-role-opt.on.ar { background: #0f766e; }
@media (max-width: 600px) {
  #crm-root .crm-role-row { flex-wrap: wrap; }
  #crm-root .crm-role-seg { margin-left: 44px; }
}

/* Role Management — search bar + groups by role */
#crm-root .crm-role-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: var(--crm-white);
  padding: 0 12px;
  margin: 0 0 8px;
}
#crm-root .crm-role-searchbar i { color: var(--crm-ink-soft); font-size: 16px; }
#crm-root .crm-role-searchbar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: 13.5px;
  margin: 0;
  box-shadow: none;
}
#crm-root .crm-role-group { margin-bottom: 16px; }
#crm-root .crm-role-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: var(--crm-white);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crm-ink-soft);
  margin: 0 0 6px;
}
#crm-root .crm-role-group-head:hover { background: var(--crm-paper); }
#crm-root .crm-role-group-arrow {
  margin-left: auto;
  font-size: 16px;
  transition: transform 0.15s ease;
}
#crm-root .crm-role-group-head.open .crm-role-group-arrow { transform: rotate(180deg); }
#crm-root .crm-role-group-head.agent i { color: #5b6472; }
#crm-root .crm-role-group-head.concierge i { color: #a05a00; }
#crm-root .crm-role-group-head.admin i { color: var(--crm-navy); }
#crm-root .crm-role-group-head.ar i { color: #0f766e; }
#crm-root .crm-role-group-count {
  background: var(--crm-paper);
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  color: var(--crm-ink);
}

/* Notes — Zoho-style list (newest first) above the composer */
#crm-root .crm-detail-section .crm-notes-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
#crm-root .crm-notes-empty { margin-bottom: 12px; }
#crm-root .crm-note-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 8px;
}
#crm-root .crm-note-card + .crm-note-card { margin-top: 4px; }
#crm-root .crm-note-card:hover { background: #f8f9fb; }
#crm-root .crm-nc-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--crm-navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  margin-top: 1px;
}
#crm-root .crm-nc-main { flex: 1; min-width: 0; }
#crm-root .crm-nc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--crm-ink-soft);
}
#crm-root .crm-nc-tag { color: var(--crm-ink-soft); }
#crm-root .crm-nc-sep { color: var(--crm-ink-soft); }
#crm-root .crm-nc-client { color: #4a56d8; font-weight: 500; }
#crm-root .crm-nc-dot { color: #b6bcc6; font-size: 10px; margin: 0 2px; }
#crm-root .crm-nc-when { display: inline-flex; align-items: center; gap: 4px; color: var(--crm-ink-soft); }
#crm-root .crm-nc-when i { color: var(--crm-navy); font-size: 13px; }
#crm-root .crm-nc-by { color: var(--crm-ink-soft); }
#crm-root .crm-nc-author { color: var(--crm-ink-soft); font-weight: 500; }
#crm-root .crm-tip { position: relative; cursor: default; }
#crm-root .crm-tip:hover,
#crm-root .crm-tip:focus { text-decoration: underline dotted; outline: none; }
#crm-root .crm-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  white-space: pre;
  background: var(--crm-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 50;
}
#crm-root .crm-tip:hover::after,
#crm-root .crm-tip:focus::after { opacity: 1; transform: translateY(0); }
#crm-root .crm-nc-actions {
  flex-shrink: 0;
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
#crm-root .crm-note-card:hover .crm-nc-actions,
#crm-root .crm-nc-actions:focus-within { opacity: 1; }
@media (hover: none) { #crm-root .crm-nc-actions { opacity: 1; } }
#crm-root .crm-nc-act {
  border: none;
  background: none;
  color: var(--crm-ink-soft);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
}
#crm-root .crm-nc-act:hover { background: var(--crm-paper); color: var(--crm-ink); }
#crm-root .crm-nc-act.danger:hover { color: var(--crm-cancel); background: var(--crm-cancel-soft); }
#crm-root .crm-nc-body { margin-top: 0; }
#crm-root .crm-nc-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--crm-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
#crm-root .crm-nc-body.expanded .crm-nc-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}
#crm-root .crm-nc-more {
  border: none;
  background: none;
  padding: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-navy);
  cursor: pointer;
}
#crm-root .crm-nc-more:hover { text-decoration: underline; }
#crm-root .crm-nc-edit {
  width: 100%;
  min-height: 60px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}
#crm-root .crm-note-composer textarea {
  width: 100%;
  min-height: 56px;
  margin: 0;
  resize: vertical;
}
#crm-root .crm-note-hint {
  font-size: 11px;
  color: var(--crm-ink-soft);
  margin-top: 4px;
}
#crm-root .crm-note-hint kbd {
  font-family: inherit;
  font-size: 10.5px;
  padding: 0 4px;
  border: 1px solid var(--crm-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--crm-white);
}
/* Timeline: show full multi-line note text */
#crm-root .crm-tl-detail { white-space: pre-wrap; overflow-wrap: anywhere; }
#crm-root .crm-nc-edited { color: var(--crm-ink-soft); font-style: italic; }

/* Lead Overview — Zoho-style layout (summary → Next Action → details → notes) */
#crm-root .crm-lead-summary .crm-ov-row { border-bottom: none; padding: 6px 0; }
#crm-root .crm-lead-summary .crm-ov-label,
#crm-root .crm-ov-2col .crm-ov-label,
#crm-root .crm-ov-wide .crm-ov-label {
  text-align: right;
  font-size: 12.5px;
}
#crm-root .crm-lead-summary .crm-ov-value { font-weight: 500; color: var(--crm-ink); }
#crm-root .crm-ov-empty { color: var(--crm-ink-soft); font-weight: 400; }
#crm-root .crm-phone-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 6px;
  background: var(--crm-ok-soft);
  color: var(--crm-ok);
  font-size: 13px;
  vertical-align: middle;
  text-decoration: none;
}
#crm-root .crm-phone-chip:hover { background: #d7eadb; }
#crm-root .crm-lead-details {
  margin-top: 20px;
  border-top: 1px solid var(--crm-line);
}
#crm-root .crm-lead-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 12px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--crm-ink);
  cursor: pointer;
}
#crm-root .crm-lead-details-toggle i { transition: transform 0.15s ease; }
#crm-root .crm-lead-details.collapsed .crm-lead-details-toggle i { transform: rotate(-90deg); }
#crm-root .crm-lead-details.collapsed .crm-lead-details-body { display: none; }
#crm-root .crm-lead-details .crm-detail-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--crm-ink);
}
#crm-root .crm-ov-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  align-items: start;
}
#crm-root .crm-ov-col { min-width: 0; }
#crm-root .crm-ov-2col .crm-ov-row,
#crm-root .crm-ov-wide .crm-ov-row { border-bottom: none; padding: 6px 0; }
@media (max-width: 900px) {
  #crm-root .crm-ov-2col { grid-template-columns: 1fr; }
}
/* Next Action: date + action item on one line */
#crm-root .crm-next-action .crm-task-row-main {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}
#crm-root .crm-next-action .crm-task-row-main .crm-task-title-input {
  flex: 1 1 auto;
  min-width: 0;
}
#crm-root .crm-next-action .crm-task-badge,
#crm-root .crm-next-action .crm-task-time-input { flex-shrink: 0; }

/* Task due date: calendar icon hidden until hover / focus (edit on hover) */
#crm-root input[type="date"].crm-task-time-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
  transition: opacity 0.12s ease;
  cursor: pointer;
}
#crm-root input[type="date"].crm-task-time-input:not([readonly]):hover::-webkit-calendar-picker-indicator,
#crm-root input[type="date"].crm-task-time-input:not([readonly]):focus::-webkit-calendar-picker-indicator {
  opacity: 1;
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
#crm-root input[type="date"].crm-task-time-input:not([readonly]):hover { cursor: pointer; }
#crm-root input[type="date"].crm-task-time-input { width: 128px; }
#crm-root input.crm-friendly-date[readonly] { cursor: pointer; }
#crm-root input.crm-friendly-date.crm-task-time-input { width: 110px; }
#crm-root input.crm-friendly-date[readonly]:not([data-locked]):hover {
  background: #fff;
  border-color: var(--crm-line);
}

/* Deal Overview — Contact Person card | Next Action side by side */
#crm-root .crm-deal-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  margin: 8px 0 4px;
  background: var(--crm-white);
}
#crm-root .crm-deal-contact-card { padding: 14px 16px; }
#crm-root .crm-deal-top-na {
  padding: 14px 16px;
  border-left: 1px solid var(--crm-line);
  min-width: 0;
}
#crm-root .crm-deal-top-na .crm-next-action { margin: 0; }
#crm-root .crm-deal-contact-card h3,
#crm-root .crm-deal-top-na h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--crm-ink);
  margin: 0 0 10px;
}
#crm-root .crm-dcc-row { display: flex; gap: 12px; align-items: flex-start; }
#crm-root .crm-dcc-info { font-size: 13px; line-height: 1.7; min-width: 0; overflow-wrap: anywhere; }
#crm-root .crm-dcc-info i { color: var(--crm-ink-soft); font-size: 14px; margin-right: 4px; }
#crm-root .crm-dcc-name { font-weight: 700; color: var(--crm-ink); text-decoration: none; }
#crm-root .crm-dcc-name:hover { text-decoration: underline; }
@media (max-width: 900px) {
  #crm-root .crm-deal-top { grid-template-columns: 1fr; }
  #crm-root .crm-deal-top-na { border-left: none; border-top: 1px solid var(--crm-line); }
}

/* Tasks tab — toolbar, due-date tabs, selectable rows */
#crm-root .crm-tt-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: var(--crm-white);
  position: sticky;
  top: 0;
  z-index: 5;
}
#crm-root .crm-tt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; }
#crm-root .crm-tt-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
#crm-root .crm-tt-sep { width: 1px; height: 22px; background: var(--crm-line); margin: 0 4px; }
#crm-root .crm-tt-selcount { margin-left: auto; font-size: 12.5px; color: var(--crm-ink-soft); }
#crm-root .crm-tt-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--crm-line);
  margin: 14px 0 16px;
}
#crm-root .crm-tt-tab {
  border: none;
  background: none;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#crm-root .crm-tt-tab:hover { color: var(--crm-ink); }
#crm-root .crm-tt-tab.active { color: var(--crm-navy); border-bottom-color: var(--crm-navy); }
#crm-root .crm-tt-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--crm-paper);
  color: var(--crm-ink-soft);
}
#crm-root .crm-tt-tab.active .crm-tt-count { background: var(--crm-navy); color: #fff; }
#crm-root .crm-tt-tab.has-overdue .crm-tt-count { background: var(--crm-cancel-soft); color: var(--crm-cancel); }
#crm-root .crm-tt-tab.has-overdue.active .crm-tt-count { background: var(--crm-cancel); color: #fff; }
#crm-root .crm-tt-list {
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: var(--crm-white);
  overflow: hidden;
}
#crm-root .crm-tt-row {
  display: grid;
  grid-template-columns: 20px auto 100px 18px minmax(0, 1fr) minmax(0, 220px) minmax(0, 160px);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--crm-line);
  font-size: 13px;
  cursor: pointer;
  margin: 0;
}
#crm-root .crm-tt-row:last-child { border-bottom: none; }
#crm-root .crm-tt-row:hover { background: #fafbfc; }
#crm-root .crm-tt-row.selected { background: #eef3fb; }
#crm-root .crm-tt-check { margin: 0; width: 16px; height: 16px; cursor: pointer; }
#crm-root .crm-tt-due { color: var(--crm-ink-soft); font-size: 12.5px; white-space: nowrap; }
#crm-root .crm-tt-kind { color: var(--crm-ink-soft); font-size: 14px; }
#crm-root .crm-tt-title { font-weight: 600; color: var(--crm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#crm-root .crm-tt-parent { color: #4a56d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
#crm-root .crm-tt-parent:hover { text-decoration: underline; }
#crm-root .crm-tt-assignee { color: var(--crm-ink-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#crm-root .crm-tt-selall { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font: inherit; }
#crm-root .crm-tt-selall input { margin: 0; }
@media (max-width: 900px) {
  #crm-root .crm-tt-row { grid-template-columns: 20px auto minmax(0, 1fr); }
  #crm-root .crm-tt-due, #crm-root .crm-tt-kind, #crm-root .crm-tt-assignee { display: none; }
  #crm-root .crm-tt-parent { grid-column: 3; }
}

/* Account ▸ Units — grouped by floorplan (collapsible, with unit counter) */
#crm-root .crm-units-fpgroups { display: flex; flex-direction: column; gap: 8px; }
#crm-root .crm-units-fpgroup {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: var(--crm-white);
  overflow: hidden;
}
#crm-root .crm-units-fphead {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--crm-ink);
}
#crm-root .crm-units-fphead:hover { background: var(--crm-paper); }
#crm-root .crm-units-fparrow {
  font-size: 16px;
  color: var(--crm-ink-soft);
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
#crm-root .crm-units-fpgroup.open .crm-units-fparrow { transform: rotate(0deg); }
#crm-root .crm-units-fpname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#crm-root .crm-units-fpmeta {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--crm-ink-soft);
  white-space: nowrap;
}
#crm-root .crm-units-fpmeta strong { color: var(--crm-ink); }
#crm-root .crm-units-fpcount {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--crm-paper);
  border: 1px solid var(--crm-line);
  color: var(--crm-ink);
}
#crm-root .crm-units-fpgroup.open .crm-units-fpcount { background: var(--crm-navy); border-color: var(--crm-navy); color: #fff; }
#crm-root .crm-units-fptable { border: none; border-top: 1px solid var(--crm-line); border-radius: 0; }
#crm-root .crm-units-fptable .crm-units-thead,
#crm-root .crm-units-fptable .crm-units-trow { grid-template-columns: 1.4fr 1fr 1.3fr; padding-left: 40px; }
@media (max-width: 600px) {
  #crm-root .crm-units-fpmeta { display: none; }
  #crm-root .crm-units-fptable .crm-units-thead,
  #crm-root .crm-units-fptable .crm-units-trow { padding-left: 12px; }
}

/* Account ▸ Units — property settings, bed tabs, filters */
#crm-root .crm-units-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: var(--crm-white);
}
#crm-root .crm-units-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--crm-ink);
  cursor: pointer;
  padding-bottom: 6px;
}
#crm-root .crm-units-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
#crm-root .crm-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--crm-line);
  transition: background 0.15s ease;
  flex-shrink: 0;
}
#crm-root .crm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
#crm-root .crm-units-toggle input:checked + .crm-switch { background: var(--crm-ok); }
#crm-root .crm-units-toggle input:checked + .crm-switch::after { transform: translateX(16px); }
#crm-root .crm-units-toggle input:focus-visible + .crm-switch { outline: 2px solid var(--crm-navy); outline-offset: 2px; }
#crm-root .crm-units-setfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  min-width: 180px;
  flex: 1;
  max-width: 260px;
}
#crm-root .crm-units-setfield input { margin: 0; padding: 7px 9px; font-size: 13px; border-radius: 6px; }
#crm-root .crm-units-beds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
#crm-root .crm-units-bedchip {
  border: 1px solid var(--crm-line);
  background: var(--crm-white);
  color: var(--crm-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#crm-root .crm-units-bedchip span {
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--crm-paper);
  color: var(--crm-ink-soft);
}
#crm-root .crm-units-bedchip:hover { background: var(--crm-paper); }
#crm-root .crm-units-bedchip.active { background: var(--crm-navy); border-color: var(--crm-navy); color: #fff; }
#crm-root .crm-units-bedchip.active span { background: rgba(255, 255, 255, 0.2); color: #fff; }
#crm-root .crm-units-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  white-space: nowrap;
}
#crm-root .crm-units-filter input { width: 90px; margin: 0; padding: 7px 8px; font-size: 13px; border-radius: 6px; }
#crm-root .crm-units-filter input[type="date"] { width: 150px; }
#crm-root .crm-units-clear { font-size: 12px; white-space: nowrap; }

/* Properties to Tour — compact "+" icon inside the box */
#crm-root .crm-ptt-wrap { position: relative; width: 100%; max-width: 460px; }
#crm-root .crm-ptt-wrap textarea {
  width: 100%;
  min-height: 70px;
  padding-right: 44px;
  box-sizing: border-box;
  display: block;
  margin: 0;
}
#crm-root .crm-ptt-plus {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--crm-line);
  background: var(--crm-white);
  color: var(--crm-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#crm-root .crm-ptt-plus:hover:not([disabled]),
#crm-root .crm-ptt-plus.open {
  background: var(--crm-navy);
  border-color: var(--crm-navy);
  color: #fff;
}
#crm-root .crm-ptt-plus.open i { transform: rotate(45deg); }
#crm-root .crm-ptt-plus i { transition: transform 0.15s ease; }
#crm-root .crm-ptt-plus[disabled] { opacity: 0.4; cursor: not-allowed; }
#crm-root .crm-ptt-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c9a84c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}
#crm-root .crm-ptt-picker-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--crm-ink-soft);
  margin-bottom: 6px;
}
#crm-root .crm-ptt-wrap + .crm-ptt-picker { margin-top: 6px; }

/* ===== Theme update (Oct 2026): solid buttons black, name initials gold =====
   Outline / transparent buttons (.btn.secondary etc.) are unchanged. */
#crm-root {
  --crm-btn: #111111;
  --crm-btn-hover: #2b2b2b;
  --crm-gold: #c9a84c;
}
#crm-root .btn:not(.secondary):not(.danger) {
  background: var(--crm-btn);
  border-color: var(--crm-btn);
  color: #fff;
}
#crm-root .btn:not(.secondary):not(.danger):hover { background: var(--crm-btn-hover); border-color: var(--crm-btn-hover); }
#crm-root .crm-icon-btn:hover,
#crm-root .crm-view-toggle-btn.active,
#crm-root .crm-role-opt.on.admin,
#crm-root .crm-units-bedchip.active,
#crm-root .crm-ptt-plus:hover:not([disabled]),
#crm-root .crm-ptt-plus.open,
#crm-root .crm-tt-tab.active .crm-tt-count,
#crm-root .crm-units-fpgroup.open .crm-units-fpcount {
  background: var(--crm-btn);
  border-color: var(--crm-btn);
  color: #fff;
}
/* Name initials — gold circle, dark letters */
#crm-root .crm-mm-avatar,
#crm-root .crm-nc-avatar {
  background: var(--crm-gold);
  color: #1c2430;
}

/* ---- Overview fields: no overflow on phones / narrow panels (Oct 15, 2026) ----
   The 2 columns now stack based on the space the record panel actually has
   (not just the screen width), and inputs/selects can never be wider than
   their column. On very narrow screens the label sits above its field. */
#crm-root .crm-ov-2col {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
#crm-root .crm-ov-row { min-width: 0; }
#crm-root .crm-ov-label { min-width: 0; overflow-wrap: anywhere; }
#crm-root .crm-ov-value {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#crm-root .crm-ov-value input,
#crm-root .crm-ov-value select,
#crm-root .crm-ov-value textarea,
#crm-root .crm-ov-value .crm-agent-combo,
#crm-root .crm-ov-value > div {
  max-width: 100%;
  box-sizing: border-box;
}
#crm-root .crm-ov-value input,
#crm-root .crm-ov-value select,
#crm-root .crm-ov-value textarea { min-width: 0; }
@media (max-width: 900px) {
  #crm-root .crm-ov-2col { grid-template-columns: 1fr; column-gap: 0; }
  #crm-root .crm-ov-value input,
  #crm-root .crm-ov-value select,
  #crm-root .crm-ov-value textarea,
  #crm-root .crm-ov-value .crm-agent-combo { width: 100%; }
}
@media (max-width: 520px) {
  #crm-root .crm-ov-2col .crm-ov-row,
  #crm-root .crm-ov-wide .crm-ov-row,
  #crm-root .crm-lead-summary .crm-ov-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  #crm-root .crm-ov-2col .crm-ov-label,
  #crm-root .crm-ov-wide .crm-ov-label,
  #crm-root .crm-lead-summary .crm-ov-label {
    flex: none;
    text-align: left;
    font-size: 12px;
  }
}

/* "Retrieving records…" loading message (crmLoadingHtml) */
#crm-root .crm-loading-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--crm-ink-soft);
}
#crm-root .crm-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-top-color: var(--crm-gold, #c9a84c);
  border-radius: 50%;
  display: inline-block;
  animation: crmSpin .8s linear infinite;
  flex: none;
}
@keyframes crmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #crm-root .crm-spinner { animation: none; } }
/* ---------- Kanban: empty columns collapse to a strip (crm.js kanbanColOpenHtml()) ---------- */
#crm-root .crm-kanban-strip {
  display: none;
}
#crm-root .crm-kanban-col.crm-kanban-col-empty:not(.expanded) {
  flex: 0 0 44px;
  min-width: 44px;
  cursor: pointer;
}
#crm-root .crm-kanban-col.crm-kanban-col-empty:not(.expanded) > .crm-kanban-col-head,
#crm-root .crm-kanban-col.crm-kanban-col-empty:not(.expanded) > .crm-kanban-col-body {
  display: none;
}
#crm-root .crm-kanban-col.crm-kanban-col-empty:not(.expanded) > .crm-kanban-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  min-height: 220px;
  height: 100%;
  background: var(--crm-white);
}
#crm-root .crm-kanban-col.crm-kanban-col-empty:not(.expanded):hover > .crm-kanban-strip {
  background: var(--crm-paper);
}
#crm-root .crm-kanban-strip-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--crm-navy);
}
#crm-root .crm-kanban-strip-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  background: var(--crm-paper);
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ---------- Kanban card: "# N" open-task count (crm.js kanbanTaskCountBadgeHtml()) ---------- */
#crm-root .crm-kanban-task-count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--crm-paper);
  color: var(--crm-navy);
  border: 1px solid var(--crm-line);
}
#crm-root .crm-kanban-task-count.overdue {
  background: var(--crm-cancel-soft);
  color: var(--crm-cancel);
  border-color: var(--crm-cancel);
}

/* ---------- "Needs an owner" summary + popup (crm.js renderOwnerSummary / openOwnerQueue) ---------- */
#crm-root .crm-oq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--crm-white);
  border: 1px solid var(--crm-line);
  border-left: 4px solid #d99a1e;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
#crm-root .crm-oq-card.crm-oq-done {
  border-left-color: var(--crm-ok);
  font-size: 12.5px;
  color: var(--crm-ink-soft);
  padding: 8px 12px;
}
#crm-root .crm-oq-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fdeecb; color: #a05a00; font-size: 18px;
}
#crm-root .crm-oq-icon.ok { width: 24px; height: 24px; flex-basis: 24px; font-size: 15px; background: var(--crm-ok-soft); color: var(--crm-ok); }
#crm-root .crm-oq-text { flex: 1; min-width: 180px; }
#crm-root .crm-oq-title { font-size: 14px; font-weight: 700; color: var(--crm-ink); }
#crm-root .crm-oq-sub { font-size: 12px; color: var(--crm-ink-soft); margin-top: 1px; }
#crm-root .crm-oq-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#crm-root .crm-oq-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
}
#crm-root .crm-oq-pill strong { font-weight: 800; }
#crm-root .crm-oq-pill.warn { background: #fdeecb; color: #8a4b00; border-color: #f1cf8a; }
#crm-root .crm-oq-pill.info { background: #e8f0fe; color: #1d4ed8; border-color: #bfd3fb; }
#crm-root .crm-oq-pill:hover { filter: brightness(0.97); }
#crm-root .crm-oq-pill:disabled { opacity: 0.45; cursor: default; }
#crm-root .crm-oq-link {
  border: none; background: none; cursor: pointer; padding: 4px 2px;
  font-size: 12.5px; font-weight: 700; color: var(--crm-navy);
  display: inline-flex; align-items: center; gap: 2px;
}
#crm-root .crm-oq-link:hover { text-decoration: underline; }
#crm-root .crm-oq-count {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--crm-paper); font-size: 11px; font-weight: 700;
}
#crm-root .crm-oq-row {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--crm-white); border: 1px solid var(--crm-line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit;
}
#crm-root .crm-oq-row:hover { border-color: var(--crm-navy); background: var(--crm-paper); }
#crm-root .crm-oq-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#crm-root .crm-oq-row-name { font-size: 13.5px; font-weight: 700; color: var(--crm-ink); }
#crm-root .crm-oq-row-sub, #crm-root .crm-oq-row-meta {
  font-size: 11.5px; color: var(--crm-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#crm-root .crm-oq-row-meta { font-size: 11px; }
#crm-root .crm-oq-empty {
  text-align: center; padding: 28px 10px; color: var(--crm-ink-soft); font-size: 13px;
}
#crm-root .crm-oq-empty i { font-size: 26px; display: block; margin-bottom: 6px; color: var(--crm-ok); }
@media (max-width: 600px) {
  #crm-root .crm-oq-pills { width: 100%; }
}

/* Account ▸ Units: floorplan images (2026-10-29) */
#crm-root .crm-units-fpthumb {
  width: 64px;
  height: 48px;
  flex: 0 0 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #f5f5f4;
  border: 1px solid var(--crm-line);
  cursor: zoom-in;
}
#crm-root .crm-units-fpthumb.none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--crm-ink-soft);
  font-size: 20px;
  cursor: default;
  opacity: .6;
}
#crm-root .crm-units-fpimgwrap {
  padding: 4px 12px 10px 40px;
}
#crm-root .crm-units-fpimg {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  background: #f5f5f4;
  border: 1px solid var(--crm-line);
  cursor: zoom-in;
}
@media (max-width: 600px) {
  #crm-root .crm-units-fpthumb { width: 48px; height: 36px; flex-basis: 48px; }
  #crm-root .crm-units-fpimgwrap { padding-left: 12px; }
}

/* Contact Overview — Deals card (2026-10-30) */
#crm-root .crm-cd-item { margin-bottom: 10px; }
#crm-root .crm-cd-item:last-child { margin-bottom: 0; }
#crm-root .crm-cd-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
#crm-root .crm-cd-amt { background: #e5484d; color: #fff; font-weight: 700; font-size: 12px; padding: 1px 6px; border-radius: 3px; }
#crm-root .crm-cd-stage { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 2px 12px; border-radius: 999px; color: #fff; background: #3b82f6; }
#crm-root .crm-cd-stage.won { background: #22a33a; }
#crm-root .crm-cd-stage.lost { background: #8a8f98; }

/* Client Next Action: deal tasks (2026-11-04) */
#crm-root .crm-na-deal-tag { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--crm-ink-soft); background:var(--crm-paper); border-radius:20px; padding:1px 8px; margin:6px 0 -2px; text-decoration:none; }
#crm-root .crm-na-deal-tag:hover { color:var(--crm-ink); text-decoration:underline; }

/* Required fields (2026-11-05) */
#crm-root .crm-req { color: #b91c1c; margin-left: 2px; font-weight: 700; }
#crm-root .crm-field-bad { border-color: #dc2626 !important; background: #fef2f2 !important; }

/* Account ▸ Units: Townhome / Dens tags (2026-11-06) */
#crm-root .crm-units-proptags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: var(--crm-white);
}
#crm-root .crm-units-propname { font-weight: 700; font-size: 14px; }
#crm-root .crm-units-taghint { font-size: 11px; color: var(--crm-ink-soft); }
#crm-root .crm-units-tagset { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
#crm-root .crm-unittag-toggle { margin: 0; gap: 6px; position: relative; }
#crm-root .crm-unittag-toggle input { left: 0; top: 0; }
#crm-root .crm-unittag-toggle .crm-toggle-label { font-size: 12px; color: var(--crm-ink); min-width: 0; }
#crm-root .crm-unittag-toggle.mixed .crm-toggle-track { background: #9aa6b8; }
#crm-root .crm-unittag-toggle.mixed .crm-toggle-track::after { transform: translateX(7px); }
#crm-root .crm-unittag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #e8eef8;
  color: var(--crm-navy);
}
#crm-root .crm-unittag.dens { background: #eaf2ec; color: #2f5d3a; }
#crm-root .crm-unittag.lofts { background: #f4ecf8; color: #6b3d8a; }
#crm-root .crm-units-fpheadrow { display: flex; align-items: center; gap: 8px; }
#crm-root .crm-units-fpheadrow .crm-units-fphead { flex: 1; min-width: 0; }
#crm-root .crm-units-fptags { padding-right: 12px; flex-shrink: 0; }
#crm-root .crm-units-fptable .crm-units-thead,
#crm-root .crm-units-fptable .crm-units-trow { grid-template-columns: 1.3fr 1fr 1.2fr 1.6fr; }
@media (max-width: 700px) {
  #crm-root .crm-units-fpheadrow { flex-wrap: wrap; }
  #crm-root .crm-units-fptags { padding: 0 12px 10px 40px; }
  #crm-root .crm-units-fptable .crm-units-thead,
  #crm-root .crm-units-fptable .crm-units-trow { grid-template-columns: 1fr 1fr 1fr; }
  #crm-root .crm-units-fptable .crm-units-trow > .crm-units-tagset { grid-column: 1 / -1; }
  #crm-root .crm-units-fptable .crm-units-thead > div:last-child { display: none; }
}

/* Tasks: sort bar (2026-11-06) */
#crm-root .crm-tt-sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
#crm-root .crm-tt-sortlabel { font-size: 12px; font-weight: 600; color: var(--crm-ink-soft); margin-right: 2px; }
#crm-root .crm-tt-sortbtn {
  border: 1px solid var(--crm-line);
  background: var(--crm-white);
  color: var(--crm-ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#crm-root .crm-tt-sortbtn:hover { background: var(--crm-paper); }
#crm-root .crm-tt-sortbtn.active { background: var(--crm-navy); border-color: var(--crm-navy); color: #fff; }
#crm-root .crm-tt-sortdir { font-weight: 500; opacity: 0.85; }

/* Email Management tabs (2026-11-07) — shown at the top of the Guest Card, Cancel Tour,
   Email Campaign and Customized Template panels. */
#crm-root #crm-email-mgmt-strip { margin: 0 0 18px; }
#crm-root .crm-email-mgmt-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--crm-line);
}
#crm-root .crm-email-mgmt-tab {
  border: none;
  background: none;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--crm-ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
#crm-root .crm-email-mgmt-tab:hover { color: var(--crm-ink); }
#crm-root .crm-email-mgmt-tab.active { color: var(--crm-navy); border-bottom-color: var(--crm-navy); }
@media (max-width: 700px) {
  #crm-root .crm-email-mgmt-tabs { flex-wrap: nowrap; overflow-x: auto; }
  #crm-root .crm-email-mgmt-tab { white-space: nowrap; }
}

/* Qualification ▸ "Anything to Note?" checkboxes (2026-11-09) */
#crm-root .crm-qn { display: flex; flex-direction: column; gap: 8px; }
#crm-root .crm-qn-item { display: flex; flex-direction: column; gap: 5px; }
#crm-root .crm-qn-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--crm-ink); cursor: pointer; margin: 0; }
#crm-root .crm-qn-opt input { width: 16px; height: 16px; margin: 0; accent-color: #a8873e; cursor: pointer; }
#crm-root .crm-qn-res { display: flex; align-items: center; gap: 8px; margin-left: 24px; font-size: 12.5px; color: var(--crm-ink-soft); }
#crm-root .crm-qn-res select { width: auto; min-width: 90px; padding: 4px 8px; font-size: 12.5px; }

/* New Lead / New Client pop-ups — Anything to Note? checkboxes (2026-11-12) */
#crm-root .crm-qf {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
}
#crm-root .crm-qf.crm-field-bad {
  border-color: #c0392b;
  background: #fdf3f2;
}
#crm-root label.crm-qf-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  font-size: 13px;
  color: var(--crm-ink);
  cursor: pointer;
}
#crm-root label.crm-qf-opt input {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}