/* 线索列表的桌面表格（index.html 里的 .lead-pool-record-table，行由 app.js 的 renderLeads 画）。
   Twelve columns that fit beside the side menu; an ordinary lead is two lines high.
   Every rule here names .lead-pool-record-table (or the box that scrolls it, .lead-list-scroll, or the menu of a row's
   actions, .lead-row-menu), so the other tables that share .leads-table keep their look, and the phone cards
   (renderLeadsMobileList) are not touched.
   No text is smaller than 12px: Chrome in Chinese draws nothing smaller, so a smaller size would only make the
   widths differ from one browser to the next. */

/* The columns. The eleven before 操作 are 1,190px. 操作 is as wide as the most links one row of the list has
   (--lead-action-need); renderLeads puts the class on the table: three links (the administrator) 176px, two (an entry
   or delivery account) 118px, one or none (a city manager, a salesperson, the boss) 72px. The table is never narrower
   than its columns. 来源 holds the eight-character account names the page itself lists. */
.leads-table.lead-pool-record-table {
    --lead-action-need: 176px;
    --lead-action-width: var(--lead-action-need);
    min-width: calc(1190px + var(--lead-action-width));
}

.leads-table.lead-pool-record-table.lead-actions-2 {
    --lead-action-need: 118px;
}

.leads-table.lead-pool-record-table.lead-actions-1 {
    --lead-action-need: 72px;
}

.lead-pool-record-table .lead-col-check {
    width: 36px;
}

.lead-pool-record-table .lead-col-record {
    width: 220px;
}

.lead-pool-record-table .lead-col-city {
    width: 48px;
}

.lead-pool-record-table .lead-col-contact {
    width: 172px;
}

.lead-pool-record-table .lead-col-source {
    width: 110px;
}

.lead-pool-record-table .lead-col-creator {
    width: 70px;
}

.lead-pool-record-table .lead-col-owner {
    width: 100px;
}

.lead-pool-record-table .lead-col-wechat {
    width: 92px;
}

.lead-pool-record-table .lead-col-grade {
    width: 78px;
}

.lead-pool-record-table .lead-col-stage {
    width: 112px;
}

.lead-pool-record-table .lead-col-remark {
    width: 152px;
}

.lead-pool-record-table .lead-col-action {
    width: var(--lead-action-width);
}

.leads-table.lead-pool-record-table th,
.leads-table.lead-pool-record-table td {
    padding: 8px 6px;
    font-size: 13px;
    line-height: 18px;
}

.leads-table.lead-pool-record-table th,
.leads-table.lead-pool-record-table .date-group-row td {
    font-size: 12px;
}

/* 客户记录 and 联系方式 are read down the column, so they start at the same place in every row. */
.leads-table.lead-pool-record-table th.col-left,
.leads-table.lead-pool-record-table td.col-left {
    padding-left: 10px;
    text-align: left;
}

/* 客户记录: the name and what is special about the lead on the first line (several tags wrap under the name),
   number / order of the day / time of entry on the second. */
.lead-pool-record-table .lead-cell-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-height: 20px;
}

.leads-table.lead-pool-record-table .lead-cell-name {
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.lead-pool-record-table .lead-cell-grade {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.leads-table.lead-pool-record-table .lead-cell-meta {
    margin-top: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    text-overflow: ellipsis;
}

/* The tags are as high as the name's line, so a tagged row is no higher than a plain one. */
.lead-pool-record-table .lead-cell-head .badge,
.lead-pool-record-table .lead-cell-head .beijing-pending-chip,
.lead-pool-record-table .lead-cell-head .lead-unread-feedback-badge {
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    padding: 0 6px;
    font-size: 12px;
    line-height: 16px;
}

.lead-pool-record-table .lead-cell-head .beijing-pending-chip {
    border: 1px solid transparent;
}

.lead-pool-record-table .lead-tag-pool {
    color: #5d6b82;
    background: rgba(241, 245, 249, 0.92);
    border-color: rgba(148, 163, 184, 0.45);
}

/* The second line of a cell: 线索池 under 城市, 来源账号 under 来源, 到店时间 under 跟进状态, 原归属 under 客户公海. */
.lead-pool-record-table .lead-cell-sub,
.lead-pool-record-table .col-city .lead-pool-cell {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
}

.lead-pool-record-table .lead-cell-stack,
.lead-pool-record-table .col-city .lead-city-cell {
    display: block;
}

/* A name longer than its column ends in an ellipsis (the title has all of it) instead of lying over the next column. */
.lead-pool-record-table .col-city .lead-city-cell,
.lead-pool-record-table .col-city .lead-pool-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-pool-record-table .lead-city-cell,
.lead-pool-record-table .lead-source-cell {
    font-size: 13px;
}

.lead-pool-record-table .col-source .lead-source-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-pool-record-table .col-source .lead-source-cell.is-prospect {
    display: inline-flex;
    min-height: 18px;
    font-size: 12px;
}

/* A long 微信 or 小红书 account goes to the next line, and breaks if it is longer than a line, instead of running
   into the next column. */
.lead-pool-record-table .lead-cell-contact,
.lead-pool-record-table .lead-cell-contact.mixed {
    line-height: 18px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.leads-table.lead-pool-record-table .lead-xhs-cell {
    justify-content: flex-start;
}

/* The select is as wide as its column lets it be (it used to be 88px in a narrower cell and was cut). */
.leads-table.lead-pool-record-table .status-select {
    width: 100%;
    max-width: 88px;
}

/* The stage pill and the visit time under it are together as high as two lines of text. */
.lead-pool-record-table .lead-quality-badge,
.lead-pool-record-table .lead-follow-stage-badge {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    line-height: 14px;
}

/* 备注: both buttons side by side, each saying which remark it is. */
.lead-pool-record-table .lead-remark-pair {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.lead-pool-record-table .lead-remark-pair .remark-action-btn {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 1px 6px;
    font-size: 12px;
    line-height: 18px;
}

/* 操作: 编辑线索 stands first and 删除线索 last in every row, with or without 录错更正 between them, so each link is
   in the same place all the way down the column. */
.lead-pool-record-table .lead-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 6px;
}

.leads-table.lead-pool-record-table .lead-row-actions .text-action {
    margin: 0;
}

/* A link that is alone in its row (a city manager's 编辑线索) stands in the middle, under the header. */
.leads-table.lead-pool-record-table .lead-row-actions .text-action:first-child:nth-last-child(2) {
    margin: 0 auto;
}

/* The button the links of a row are folded into when the list is narrow (below); lead-row-menu.js opens its menu.
   Not shown while the links themselves are. */
.lead-pool-record-table .lead-row-more {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    cursor: pointer;
}

.lead-pool-record-table .lead-row-more::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
}

.lead-pool-record-table .lead-row-more:hover,
.lead-pool-record-table .lead-row-more[aria-expanded="true"] {
    border-color: var(--primary);
    background: #fff;
}

/* ---- Narrow windows ----
   What counts is the width of the box that scrolls the table (.lead-list-scroll), not of the window: the side menu and
   the scrollbars take theirs first. A browser without container queries shows the wide table above and scrolls it.
   1. Under 1,366px the columns move together: 2px less padding on either side of every cell, each column as wide as
      its longest ordinary content. The eleven before 操作 are 1,085px. The links stay while they fit on one line.
   2. When they no longer do, they are folded into one button per row (40px); an account with one link keeps the
      link (58px). A 1,536px laptop is here: 1,164px beside the side menu, 1,149px (1,145px with the wider scrollbars
      of older Windows) when the page has a scrollbar of its own as well.
   3. Under 1,143px the two remark buttons stand one over the other (备注 75px) and four columns give a little: 990px.
      A 1,440px laptop is here.
   4. When even that does not fit, the table scrolls sideways. Not scrolled, 操作 then lies over the whole of the
      column it would otherwise cut in two (备注; narrower still, 跟进状态 as well) and over nothing else. */
.lead-list-scroll {
    container: lead-list / inline-size;
}

@container lead-list (width < 1366px) {
    .leads-table.lead-pool-record-table {
        --lead-action-need: 166px;
        min-width: calc(1085px + var(--lead-action-width));
    }

    .leads-table.lead-pool-record-table.lead-actions-2 {
        --lead-action-need: 112px;
    }

    .leads-table.lead-pool-record-table.lead-actions-1 {
        --lead-action-need: 58px;
    }

    .leads-table.lead-pool-record-table th,
    .leads-table.lead-pool-record-table td {
        padding-right: 4px;
        padding-left: 4px;
    }

    .leads-table.lead-pool-record-table th.col-left,
    .leads-table.lead-pool-record-table td.col-left {
        padding-left: 8px;
    }

    .lead-pool-record-table .lead-col-check {
        width: 24px;
    }

    .lead-pool-record-table .lead-col-record {
        width: 204px;
    }

    .lead-pool-record-table .lead-col-city {
        width: 36px;
    }

    .lead-pool-record-table .lead-col-contact {
        width: 168px;
    }

    .lead-pool-record-table .lead-col-source {
        width: 97px;
    }

    .lead-pool-record-table .lead-col-creator {
        width: 61px;
    }

    .lead-pool-record-table .lead-col-owner {
        width: 93px;
    }

    .lead-pool-record-table .lead-col-wechat {
        width: 81px;
    }

    .lead-pool-record-table .lead-col-grade {
        width: 70px;
    }

    .lead-pool-record-table .lead-col-stage {
        width: 106px;
    }

    .lead-pool-record-table .lead-col-remark {
        width: 145px;
    }

    .lead-pool-record-table .lead-quality-badge {
        min-width: 60px;
    }

    .lead-pool-record-table .lead-remark-pair {
        gap: 4px;
    }
}

/* Three links no longer fit under 1,085px + 166px, two under 1,085px + 112px: one button. */
@container lead-list (width < 1251px) {
    .leads-table.lead-pool-record-table:not(.lead-actions-2):not(.lead-actions-1) {
        --lead-action-need: 40px;
    }

    .lead-pool-record-table:not(.lead-actions-2):not(.lead-actions-1) .lead-row-actions .text-action {
        display: none;
    }

    .lead-pool-record-table:not(.lead-actions-2):not(.lead-actions-1) .lead-row-more {
        display: flex;
    }
}

@container lead-list (width < 1197px) {
    .leads-table.lead-pool-record-table.lead-actions-2 {
        --lead-action-need: 40px;
    }

    .lead-pool-record-table.lead-actions-2 .lead-row-actions .text-action {
        display: none;
    }

    .lead-pool-record-table.lead-actions-2 .lead-row-more {
        display: flex;
    }
}

@container lead-list (width < 1143px) {
    .leads-table.lead-pool-record-table {
        min-width: calc(990px + var(--lead-action-width));
    }

    .lead-pool-record-table .lead-col-record {
        width: 197px;
    }

    .lead-pool-record-table .lead-col-source {
        width: 84px;
    }

    .lead-pool-record-table .lead-col-creator {
        width: 57px;
    }

    .lead-pool-record-table .lead-col-stage {
        width: 105px;
    }

    .lead-pool-record-table .lead-col-remark {
        width: 75px;
    }

    .lead-pool-record-table .lead-remark-pair {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .lead-pool-record-table .lead-remark-pair .remark-action-btn {
        padding: 0 6px;
        line-height: 16px;
    }
}

/* From here on the table is wider than its box. 操作 is as wide as what shows of 备注 (the ten columns before 备注
   are 915px), and never narrower than its own content. With one link the column is 18px wider than with the button,
   so its turn comes 18px earlier. */
@container lead-list (width < 1048px) {
    .leads-table.lead-pool-record-table.lead-actions-1 {
        --lead-action-width: max(var(--lead-action-need), calc(100cqw - 915px));
    }
}

@container lead-list (width < 1030px) {
    .leads-table.lead-pool-record-table:not(.lead-actions-1) {
        --lead-action-width: max(var(--lead-action-need), calc(100cqw - 915px));
    }
}

/* Narrower still: over 跟进状态 (105px) too. */
@container lead-list (width < 973px) {
    .leads-table.lead-pool-record-table.lead-actions-1 {
        --lead-action-width: max(var(--lead-action-need), calc(100cqw - 810px));
    }
}

@container lead-list (width < 955px) {
    .leads-table.lead-pool-record-table:not(.lead-actions-1) {
        --lead-action-width: max(var(--lead-action-need), calc(100cqw - 810px));
    }
}

/* The menu of a row's actions (lead-row-menu.js). A child of the page body, placed against the button by the script:
   inside the table it would be cut by the box that scrolls the table. Its items are copies of the row's links. */
.lead-row-menu {
    position: fixed;
    z-index: 900;
    min-width: 128px;
    padding: 4px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(18, 53, 116, 0.18);
}

.lead-row-menu .lead-row-menu-item {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
}

.lead-row-menu .lead-row-menu-item:hover,
.lead-row-menu .lead-row-menu-item:focus-visible {
    background: rgba(47, 111, 255, 0.1);
}

/* Reached with the keyboard, the item says so with a line inside its own box (the menu has no room around it). */
.lead-row-menu .lead-row-menu-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}