/* ================================================================
   Cold Calling — Scoped styles (.cc-*)
   ================================================================ */

/* ---- Stat Card Color Accents ---- 
.cc-stat-card-total { border-top: 3px solid var(--primary-color); }
.cc-stat-card-total .stat-value { color: var(--primary-color); }

.cc-stat-card-hot { border-top: 3px solid #f97316; }
.cc-stat-card-hot .stat-value { color: #f97316; }

.cc-stat-card-converted { border-top: 3px solid #10b981; }
.cc-stat-card-converted .stat-value { color: #10b981; }

.cc-stat-card-overdue { border-top: 3px solid var(--danger-color); }
.cc-stat-card-overdue .stat-value { color: var(--danger-color); }
*/

.cc-stat-card-total .stat-value { color: #fff; }
.cc-stat-card-hot .stat-value  { color: #6cb4dd; }
.cc-stat-card-converted .stat-value  { color: var(--success-color); }
.cc-stat-card-overdue .stat-value { color: var(--danger-color); }

/* ---- Form Section Labels (Edit Modal) ---- */
.cc-form-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

/* ---- Delete Button ---- */
.cc-delete-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.15s;
}
.cc-delete-btn:hover {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* ---- List Select ---- */
/* Cap the collapsed width so a long list name can't push neighboring controls
   off-screen; the native dropdown overlay still shows the full option text on click. */
.cc-list-select {
    min-width: 140px;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* When the <select> is open, let individual <option> elements render at natural width
   (most browsers already honor this for the overlay, but making the rule explicit avoids
   any inherited truncation in Firefox/Safari). */
.cc-list-select option {
    max-width: none;
    text-overflow: clip;
    white-space: normal;
}

/* ---- Upload Screen ---- */
.cc-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg-card-inner);
}
.cc-dropzone:hover,
.cc-dropzone.cc-drag-over {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-card-inner));
}
.cc-dropzone-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 12px;
    display: block;
}
.cc-dropzone-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.cc-dropzone-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.cc-upload-note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
.cc-upload-note i {
    margin-right: 5px;
    color: var(--primary-color);
}

/* ---- Topbar ---- */
.cc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0 12px;
}
.cc-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cc-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cc-filename {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: monospace;
}

/* ---- Stats ---- */
.cc-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-primary);
    flex-wrap: wrap;
}
.cc-stats span { display: flex; align-items: center; gap: 4px; }
.cc-stats em    { font-style: normal; color: var(--text-secondary); }
.cc-stat-blue   { color: #3b82f6; }
.cc-stat-green  { color: #22c55e; }
.cc-stat-emerald{ color: #10b981; }
.cc-stat-red    { color: var(--danger-color); }

/* ---- Search ---- */
.cc-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cc-search-wrap i {
    position: absolute;
    left: 9px;
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
}
.cc-search {
    padding-left: 28px !important;
    width: 245px;
    height: 34px;
    font-size: 13px;
}

/* ---- No-phone toggle ---- */
.cc-no-phone-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    margin-left: 6px;
    user-select: none;
}
.cc-no-phone-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cc-toggle-track {
    position: relative;
    width: 34px;
    height: 18px;
    background: #bdc3cc;
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cc-no-phone-toggle input:checked ~ .cc-toggle-track {
    background: var(--primary-color, #4f46e5);
}
.cc-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
}
.cc-no-phone-toggle input:checked ~ .cc-toggle-track .cc-toggle-thumb {
    left: 18px;
}
.cc-toggle-lbl {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---- Filter Pills ---- */
.cc-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--bg-card-inner);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.cc-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.cc-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.cc-pill.active .cc-pill-count { color: rgba(255,255,255,0.75); }
.cc-pill-count {
    font-size: 12px;
    color: var(--text-secondary);
}
.cc-pill-hot { }
.cc-pill-hot.active   { background: #f97316; border-color: #f97316; }
.cc-pill-hot:hover:not(.active) { border-color: #f97316; color: #f97316; }
.cc-pill-danger.active { background: var(--danger-color); border-color: var(--danger-color); }
.cc-pill-danger:hover:not(.active) { border-color: var(--danger-color); color: var(--danger-color); }

/* ---- Table ---- */
.cc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cc-table thead tr {
    background: var(--bg-card-inner);
    border-bottom: 2px solid var(--border-color);
}
.cc-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.cc-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.cc-table tbody tr {
    transition: background 0.1s;
}
.cc-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-card)) !important;
}

/* Row variants */
.cc-row-dnc      { opacity: 0.45; }
.cc-row-converted{ background: color-mix(in srgb, #10b981 8%, var(--bg-card)) !important; }
.cc-row-alt      { background: var(--bg-card-inner); }

/* Sortable headers */
.cc-sortable { cursor: pointer; }
.cc-sortable:hover { color: var(--text-primary); }
.cc-sort-icon { margin-left: 4px; color: var(--border-color); font-size: 10px; }
.cc-sort-active { color: var(--primary-color) !important; }

/* Responsive column hiding */
@media (max-width: 768px) { .cc-hide-sm { display: none; } }
@media (max-width: 1024px){ .cc-hide-md { display: none; } }

/* Name cell */
.cc-td-name {
    font-weight: 600;
    color: var(--text-primary);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-log-count {
    font-size: 11px;
    font-weight: normal;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Phone link */
.cc-phone {
    color: var(--primary-color);
    text-decoration: none;
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cc-phone:hover { text-decoration: underline; }
.cc-phone i { font-size: 11px; opacity: 0.7; }

/* Follow-up badge */
.cc-fu {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--bg-card-inner);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.cc-fu-over {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
    border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
}
.cc-fu-today {
    background: color-mix(in srgb, var(--warning-color) 15%, transparent);
    color: #b45309;
    border-color: color-mix(in srgb, var(--warning-color) 35%, transparent);
}

/* Inline note editing */
.cc-inline-note {
    cursor: text;
    display: block;
    min-width: 120px;
}
.cc-note-text {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-inline-note:hover .cc-note-text { color: var(--text-primary); }
.cc-note-empty {
    font-size: 12px;
    color: var(--border-color);
    font-style: italic;
}
.cc-inline-note:hover .cc-note-empty { color: var(--text-secondary); }
.cc-inline-input {
    font-size: 12px !important;
    padding: 3px 7px !important;
    height: auto !important;
    min-width: 130px;
}

/* Status badge (overrides global .badge base) */
.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
}
/* Status pills — flat pastel solids at the same brightness and
   saturation so the whole column reads as one visual weight. Every
   pill has white text, a white icon, and a dusty mid-tone hue that
   differs only in warmth. No gradients, no borders, no tint-on-
   dark-card — just a solid pastel fill. The previous versions used
   either saturated brights (original "RGB") or dim tinted washes
   (intermediate), both of which looked inconsistent against the
   rest of the app. These are picked at HSL ~22% saturation, ~48%
   lightness, so no one hue reads louder than its neighbours. */
.cc-s-default  { background: #5e6270; color: #ffffff; border: none; }
.cc-s-orange   { background: #8f6a52; color: #ffffff; border: none; }
.cc-s-yellow   { background: #8a7544; color: #ffffff; border: none; }
.cc-s-green    { background: #5a8a65; color: #ffffff; border: none; }
.cc-s-red      { background: #8a5a5a; color: #ffffff; border: none; }
.cc-s-blue     { background: #5e7aa0; color: #ffffff; border: none; }
.cc-s-muted    { background: #4d5260; color: #c9ccd4; border: none; }
.cc-s-danger   { background: #8a5a5a; color: #ffffff; border: none; }
.cc-s-emerald  { background: #4d8a7a; color: #ffffff; border: none; }

/* Icons and text inside every pill stay white across both themes.
   The hue of the pill itself is the only thing that changes. */
.cc-status-badge > i,
[class*="cc-s-"] > i {
    color: #ffffff !important;
}
html[data-theme="dark"] .cc-fu-today  { color: #fbbf24; }

/* ===== Log Call modal (web match for Android LogCallSheet) ===== */
.lc-modal { max-width: 520px; }
.lc-section-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
}
.lc-stage-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-stage-pill {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    background: var(--bg-card-inner);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.lc-stage-pill:hover { background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card-inner)); }
.lc-stage-pill.active {
    background: color-mix(in srgb, var(--primary-color) 22%, var(--bg-card-inner));
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    color: var(--text-primary);
}
.lc-outcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lc-outcome-btn {
    padding: 12px 14px;
    background: var(--bg-card-inner);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.lc-outcome-btn:hover { background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card-inner)); }
.lc-outcome-btn.active {
    background: color-mix(in srgb, var(--primary-color) 22%, var(--bg-card-inner));
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}
.lc-fu-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-fu-pill {
    padding: 8px 14px;
    background: var(--bg-card-inner);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.lc-fu-pill:hover { background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card-inner)); }
.lc-fu-pill.active {
    background: color-mix(in srgb, var(--primary-color) 30%, var(--bg-card-inner));
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    color: #fff;
}

/* FTA Completion Modal reuses lc-stage-pill / lc-fu-pill but wraps a
   hidden radio so native form semantics (formData.get, radio groups)
   keep working. These rules hide the radio, make the label click like
   a button, and wire the "active" look to :checked — matches the
   Log Activity / Log Call modal visual language. */
.lc-pill-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.lc-pill-label input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.lc-stage-pill.lc-pill-label:has(input:checked) {
    background: color-mix(in srgb, var(--primary-color) 22%, var(--bg-card-inner));
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    color: var(--text-primary);
}
.lc-fu-pill.lc-pill-label:has(input:checked) {
    background: color-mix(in srgb, var(--primary-color) 30%, var(--bg-card-inner));
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    color: #fff;
}
.lc-hist-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg-card-inner);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.lc-hist-toggle:hover { background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card-inner)); }
.lc-hist-body {
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--bg-card-inner);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
}

/* Status trigger (clickable status cell) */
.cc-status-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 2px;
    border-radius: 14px;
    transition: opacity 0.15s;
    user-select: none;
}
.cc-status-trigger:hover { opacity: 0.8; }

/* Status dropdown (appended to body) */
.cc-status-dropdown {
    position: absolute;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 230px;
}
.cc-status-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    background: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
    transition: background 0.1s;
}
.cc-status-opt:hover { background: var(--bg-card-inner); }
.cc-opt-desc {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Actions column */
.cc-td-actions {
    white-space: nowrap;
    overflow: visible;   /* never clip the buttons */
    padding-right: 8px;
}
.cc-log-btn  { margin-right: 4px; }
.cc-notes-btn{ }

/* Empty state */
.cc-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.cc-empty i {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.4;
}
.cc-empty p { font-size: 14px; margin: 0; }

/* ---- Log Call Modal — Quick Status Grid ---- */
.cc-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.cc-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card-inner);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.cc-quick-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-card-inner));
}
.cc-quick-btn.cc-active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

/* ---- Notes Modal — Meta & History ---- */
.cc-notes-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}
.cc-notes-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cc-notes-extra {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.cc-notes-extra span { display: inline-flex; align-items: center; gap: 4px; }
.cc-hist-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.cc-hist-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 10px;
    background: var(--bg-card-inner);
    border-radius: 6px;
    margin-bottom: 5px;
    font-size: 13px;
}
.cc-hist-time {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    padding-top: 2px;
}
.cc-hist-note {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    padding-top: 2px;
}

/* ---- Phone column — never wrap ---- */
.cc-td-phone { white-space: nowrap; }

/* ---- Checkbox column ---- */
.cc-th-check,
.cc-td-check {
    width: 36px;
    min-width: 36px;
    padding: 9px 8px 9px 12px;
    text-align: center;
}
.cc-td-check input[type="checkbox"],
.cc-th-check input[type="checkbox"] {
    cursor: pointer;
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
}

/* ---- Selected row highlight ---- */
.cc-row-selected {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card)) !important;
}

/* ---- Bulk actions bar ---- */
.cc-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card-inner));
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color));
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color));
    font-size: 13px;
    color: var(--text-primary);
}
.cc-bulk-bar > i { color: var(--primary-color); }
#cc-bulk-count { font-weight: 600; }

/* ---- Inline-editable cells (company, last called) ---- */
.cc-editable-cell { cursor: pointer; }
.cc-editable-cell:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-card));
    border-radius: 4px;
    outline: 1px dashed color-mix(in srgb, var(--primary-color) 40%, transparent);
    outline-offset: 2px;
}

.cc-cell-empty {
    font-size: 12px;
    color: var(--border-color);
    font-style: italic;
}

/* ---- Inline datetime input ---- */
.cc-datetime-input {
    font-size: 12px !important;
    padding: 3px 7px !important;
    height: auto !important;
    min-width: 175px;
    border-radius: 4px;
}

/* ================================================================
   TABLE — fixed layout with horizontal scroll
   ================================================================ */
.cc-table {
    table-layout: fixed;
}
.cc-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
/* Resizable th */
.cc-th-resizable {
    position: relative;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-th-label { pointer-events: none; }

/* Column resize handle */
.cc-col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}
.cc-col-resize-handle:hover,
.cc-col-resize-handle:active {
    background: var(--primary-color);
    opacity: 0.4;
}

/* Column drag feedback */
.cc-col-dragging { opacity: 0.5; background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card-inner)); }
.cc-col-drag-over { outline: 2px dashed var(--primary-color); outline-offset: -2px; }

/* ================================================================
   VIEW SWITCHER
   ================================================================ */
.cc-view-switcher {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.cc-view-btn {
    background: var(--bg-card-inner);
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.cc-view-btn:last-child { border-right: none; }
.cc-view-btn:hover { background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card-inner)); color: var(--primary-color); }
.cc-view-btn.active { background: var(--primary-color); color: #fff; }

/* ================================================================
   COLUMN PICKER DROPDOWN
   ================================================================ */
.cc-col-picker-wrap { position: relative; }
.cc-col-picker-dd {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 4px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
}
.cc-col-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 5px;
    color: var(--text-primary);
    transition: background 0.1s;
    user-select: none;
}
.cc-col-pick-row:hover { background: var(--bg-card-inner); }
.cc-col-pick-row input { cursor: pointer; accent-color: var(--primary-color); }

/* ================================================================
   KANBAN VIEW
   ================================================================ */
.cc-kanban {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    min-height: 300px;
}
.cc-kanban-lane {
    flex: 0 0 240px;
    min-width: 240px;
    background: var(--bg-card-inner);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
}
.cc-kanban-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.cc-kanban-cnt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1px 7px;
}
.cc-kanban-cards {
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.cc-kanban-empty {
    text-align: center;
    font-size: 12px;
    color: var(--border-color);
    padding: 20px 0;
    font-style: italic;
}
.cc-kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: default;
    transition: box-shadow 0.15s;
}
.cc-kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.cc-kc-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-kc-company {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.cc-kc-phone { margin-bottom: 6px; }
.cc-kc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 6px;
}
.cc-kc-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ================================================================
   SPLIT VIEW
   ================================================================ */
.cc-split-container {
    display: flex;
    height: 70vh;
    min-height: 400px;
    overflow: hidden;
}
.cc-split-left {
    width: 340px;
    flex: 0 0 340px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.cc-split-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-card-inner);
}
.cc-split-cfg-dd {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 12px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.cc-split-items {
    overflow-y: auto;
    flex: 1;
}
.cc-split-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.1s;
}
.cc-split-item:hover { background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-card)); }
.cc-split-item-active {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card)) !important;
    border-left: 3px solid var(--primary-color);
    padding-left: 11px;
}
.cc-si-row1, .cc-si-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.cc-si-row2 { margin-top: 3px; }
.cc-si-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.cc-si-tr {
    font-size: 11px;
    flex-shrink: 0;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-si-bl {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.cc-si-br {
    font-size: 11px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.cc-split-empty-list {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}
.cc-split-empty-list i { font-size: 28px; opacity: .4; display: block; margin-bottom: 8px; }
.cc-split-empty-list p { font-size: 13px; margin: 0; }

/* Resizable divider */
.cc-split-divider {
    width: 5px;
    background: var(--border-color);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cc-split-divider:hover { background: var(--primary-color); }

/* Right detail panel */
.cc-split-right {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-card);
}
.cc-split-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    gap: 12px;
}
.cc-split-placeholder i { font-size: 32px; opacity: .35; }
.cc-split-placeholder p { font-size: 14px; margin: 0; }

/* Detail panel content */
.cc-detail { height: 100%; display: flex; flex-direction: column; }
.cc-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card-inner);
    flex-shrink: 0;
}
.cc-detail-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cc-detail-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.cc-detail-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cc-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cc-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    align-items: start;
}
.cc-detail-field-wide {
    grid-column: span 2;
}
.cc-detail-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}
.cc-detail-field-icon {
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    padding-top: 2px;
}
.cc-detail-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.cc-detail-field-val {
    color: var(--text-primary);
    font-size: 13px;
}
.cc-detail-notes .cc-detail-field-val {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-card-inner);
    padding: 8px 10px;
    border-radius: 6px;
    max-height: 100px;
    overflow-y: auto;
}
.cc-detail-history {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    grid-column: span 2;
}

/* ================================================================
   STAGE BAR (split view detail header)
   ================================================================ */
.cc-stage-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 10px 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cc-stage-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-right: none;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
}
.cc-stage-btn:first-child { border-radius: 6px 0 0 6px; }
.cc-stage-btn:last-child  { border-radius: 0 6px 6px 0; border-right: 1px solid var(--border-color); }
.cc-stage-btn:hover:not(.cc-stage-active) {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card));
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
}
.cc-stage-past {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-card));
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, var(--border-color));
}
.cc-stage-active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: 600;
}
/* Disqualified active state */
.cc-stage-btn[data-stage="disqualified"].cc-stage-active {
    background: var(--danger-color);
    border-color: var(--danger-color);
}
/* Converted active state */
.cc-stage-btn[data-stage="converted"].cc-stage-active {
    background: #10b981;
    border-color: #10b981;
}
.cc-stage-arrow {
    font-size: 9px;
    color: var(--border-color);
    flex-shrink: 0;
    pointer-events: none;
}

/* ================================================================
   NAME LINK — clickable name cell opens split view
   ================================================================ */
.cc-name-link {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    transition: color 0.15s;
}
.cc-name-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Source badge — "FV" for Field Visit (prospecting) leads */
.cc-src-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background: #7c3aed;
    border-radius: 3px;
    padding: 1px 4px;
    vertical-align: middle;
    margin-right: 2px;
    line-height: 14px;
}

/* ================================================================
   SAR MODAL — force dark theme
   ================================================================ */
#cc-sar-modal .modal,
#cc-history-only-modal .modal {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

/* ================================================================
   SAR COLUMN
   ================================================================ */
.cc-sar-click {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: underline dotted;
}
.cc-sar-click:hover { opacity: .8; }
.cc-sar-empty.cc-sar-click { color: var(--text-secondary); font-weight: normal; text-decoration: none; }
.cc-sar-empty.cc-sar-click:hover { color: var(--primary-color); }

/* SAR formula display inside modal */
.cc-sar-formula { margin-top: 16px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.cc-sar-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border-color); }
.cc-sar-row:last-child { border-bottom: none; }
.cc-sar-total { background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-card-inner)); font-size: 14px; }

/* ================================================================
   PRODUCT INLINE SELECT
   ================================================================ */
.cc-product-sel {
    height: 28px;
    font-size: 12px;
    padding: 2px 6px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-primary);
    width: 100%;
    max-width: 110px;
}

/* ================================================================
   NOTES CELL (inline note + history button on same row)
   ================================================================ */
.cc-notes-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cc-note-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cc-notes-hist-btn {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 11px;
    opacity: .7;
}
.cc-notes-hist-btn:hover { opacity: 1; }
.cc-note-add-inline {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: text;
}
.cc-note-add-inline:hover .cc-note-text   { text-decoration: underline dotted; }
.cc-note-add-inline .cc-note-empty        { color: var(--text-secondary); font-style: italic; font-size: 12px; }
.cc-inline-note-ta {
    flex: 1;
    font-size: 12px;
    min-height: 48px;
    resize: vertical;
    font-family: inherit;
}

/* ================================================================
   CALL HISTORY MODAL — entry styles
   ================================================================ */
.cc-hist-entry {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.cc-hist-entry:last-child {
    border-bottom: none;
}
.cc-hist-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.cc-hist-entry-date {
    font-size: 11px;
    color: var(--text-secondary);
}
.cc-hist-notes-ta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg, var(--bg-secondary));
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 56px;
}
.cc-hist-notes-ta:focus {
    outline: none;
    border-color: var(--primary-color);
}
.cc-hist-save-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.cc-hist-save-status {
    font-size: 12px;
    color: var(--text-secondary);
}
.cc-hist-save-status.cc-hist-save-ok  { color: #22c55e; }
.cc-hist-save-status.cc-hist-save-err { color: #ef4444; }
.cc-hist-only-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}
.cc-sar-set-btn {
    font-size: 11px;
    padding: 2px 8px;
    opacity: .75;
    border-style: dashed;
}
.cc-sar-set-btn:hover { opacity: 1; }

.cc-hist-pinned {
    padding: 14px 16px 12px;
    border-bottom: 2px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-card));
}
.cc-hist-pinned-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin-bottom: 8px;
}
.cc-hist-add-section {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}
.cc-hist-add-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.cc-hist-list .cc-hist-entry:first-child { border-top: none; }

/* Read-only history entries (stage change, field update) */
.cc-hist-entry.cc-hist-readonly {
    background: color-mix(in srgb, var(--bg-secondary) 50%, var(--bg-card));
}
.cc-hist-change {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-primary);
    padding: 6px 0 2px;
}
.cc-hist-change-arrow {
    font-size: 10px;
    color: var(--primary-color);
    opacity: .7;
}
.cc-hist-empty {
    opacity: .45;
    font-style: italic;
}
.cc-badge-stage {
    background: color-mix(in srgb, #8b5cf6 18%, transparent);
    color: #c4b5fd;
    border: 1px solid color-mix(in srgb, #8b5cf6 35%, transparent);
}
.cc-badge-field {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #fcd34d;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}

/* ================================================================
   COMPACT MODE
   ================================================================ */

/* --- Compact ON (default) --- */
.cc-table.cc-compact td {
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0; /* forces overflow:hidden to apply within column width */
}
/* Two-line clamp for compact-mode notes. The Notes cell markup is
   <div.cc-notes-cell display:flex>
     <span.cc-note-add-inline flex:1 min-width:0>
       <span.cc-note-text>actual text</span>
     </span>
     <button.cc-notes-btn/>
   </div>
   Earlier attempts used -webkit-box on the outer span, but that
   combines badly with the inline flex:1 on the same element and
   most browsers either ignored line-clamp entirely or left the cell
   full-height. Using block-layout with an explicit max-height tied
   to line-height forces a hard 2-line ceiling that works everywhere,
   and overflow:hidden clips the third+ line. The !importants are
   there because the inline style="flex:1;min-width:0;" sets a
   display-adjacent layout that otherwise wins. */
.cc-table.cc-compact .cc-note-add-inline {
    display: block !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    max-height: calc(1.35em * 2) !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.cc-table.cc-compact .cc-note-text {
    display: inline;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* The outer flex cell needs items aligned at the top so the 2-line
   note block lines up with the edit pencil instead of getting pushed
   down by center-align. The inline style sets align-items:center —
   override it here only in compact mode so the notes look tidy. */
.cc-table.cc-compact .cc-notes-cell {
    align-items: flex-start !important;
}
/* Phone and action columns never clip */
.cc-table.cc-compact .cc-td-phone,
.cc-table.cc-compact .cc-td-check,
.cc-table.cc-compact .cc-td-actions {
    white-space: nowrap;
    max-width: none;
    overflow: visible;
}

/* --- Compact OFF --- */
.cc-table:not(.cc-compact) td {
    vertical-align: top;
    padding: 10px 12px;
}
.cc-table:not(.cc-compact) .cc-td-name,
.cc-table:not(.cc-compact) .cc-td-name .cc-name-link {
    white-space: normal;
    overflow: visible;
    max-width: none;
}
.cc-table:not(.cc-compact) .cc-inline-company {
    white-space: normal;
    overflow: visible;
}
.cc-table:not(.cc-compact) .cc-note-add-inline {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cc-table:not(.cc-compact) .cc-note-text {
    white-space: normal;
}
/* Phone/check/actions stay single-line even in expanded */
.cc-table:not(.cc-compact) .cc-td-phone,
.cc-table:not(.cc-compact) .cc-td-check,
.cc-table:not(.cc-compact) .cc-td-actions {
    white-space: nowrap;
    vertical-align: middle;
}