/* Cookiy AI — Live CRM Dashboard Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========== APPLE HIG LIGHT TOKENS ========== */
:root {
    --system-bg:              #FFFFFF;
    --system-bg-secondary:    #F2F2F7;
    --system-bg-tertiary:     #FFFFFF;
    --system-fill:            rgba(120,120,128,0.20);
    --system-fill-secondary:  rgba(120,120,128,0.16);
    --system-fill-tertiary:   rgba(120,120,128,0.12);
    --system-fill-quaternary: rgba(120,120,128,0.08);
    --system-separator:       rgba(60,60,67,0.29);
    --system-separator-opaque: #C6C6C8;
    --label-primary:    #000000;
    --label-secondary:  rgba(60,60,67,0.60);
    --label-tertiary:   rgba(60,60,67,0.30);
    --label-quaternary: rgba(60,60,67,0.18);
    --tint-blue:    #007AFF;
    --tint-green:   #34C759;
    --tint-red:     #FF3B30;
    --tint-orange:  #FF9500;
    --tint-yellow:  #FFCC00;
    --tint-indigo:  #5856D6;
    --tint-teal:    #5AC8FA;
    --tint-pink:    #FF2D55;
    --tint-gray:    #8E8E93;
    --cookiy-amber: #DD9058;
    --glass-surface:        rgba(255,255,255,0.72);
    --glass-surface-hover:  rgba(255,255,255,0.82);
    --glass-surface-active: rgba(255,255,255,0.92);
    --glass-border:         rgba(0,0,0,0.06);
    --glass-border-focus:   rgba(0,122,255,0.50);
    --glass-shadow:         0 4px 24px rgba(0,0,0,0.08);
    --glass-shadow-elevated: 0 8px 32px rgba(0,0,0,0.12);

    /* Apple HIG Typography Scale */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Inter', sans-serif;
    --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

    --text-large-title: 700 34px/1.12 var(--font-sans);
    --text-title1: 700 28px/1.14 var(--font-sans);
    --text-title2: 600 22px/1.18 var(--font-sans);
    --text-title3: 600 20px/1.20 var(--font-sans);
    --text-headline: 600 17px/1.24 var(--font-sans);
    --text-body: 400 17px/1.47 var(--font-sans);
    --text-callout: 400 16px/1.38 var(--font-sans);
    --text-subheadline: 400 15px/1.33 var(--font-sans);
    --text-footnote: 400 13px/1.38 var(--font-sans);
    --text-caption1: 400 12px/1.33 var(--font-sans);
    --text-caption2: 400 11px/1.27 var(--font-sans);

    /* Letter-spacing (kerning) */
    --tracking-tight: -0.02em;
    --tracking-normal: -0.01em;
    --tracking-wide: 0.02em;
    --tracking-caps: 0.06em;
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    background: var(--system-bg-secondary);
    color: var(--label-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.47;
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
}

/* Apple HIG Type Classes */
h1, .text-title1 { letter-spacing: var(--tracking-tight); line-height: 1.14; }
h2, .text-title2 { letter-spacing: var(--tracking-tight); line-height: 1.18; }
h3, .text-title3 { letter-spacing: var(--tracking-tight); line-height: 1.20; }
.text-headline { letter-spacing: var(--tracking-normal); line-height: 1.24; }
.text-caption, .text-caps {
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
}

::selection {
    background: rgba(0,122,255,0.20);
    color: #000000;
}

/* ========== SCROLLBAR (global) ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #F2F2F7;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

/* ========== HEADER ========== */
#app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 8px;
}

/* User menu in header */
.user-menu { display:flex; align-items:center; gap:8px; font-size:0.8rem; margin-left:auto; }
.user-menu .user-name { color:var(--label-secondary); font-weight:500; }
.user-menu .user-role { padding:2px 8px; border-radius:10px; font-size:0.65rem; font-weight:600; text-transform:uppercase; }
.user-menu .badge-admin { background:rgba(255,159,10,0.15); color:#FF9500; }
.user-menu .badge-manager { background:rgba(10,132,255,0.15); color:#007AFF; }
.user-menu .badge-rep { background:rgba(94,92,230,0.15); color:#5856D6; }
.user-menu .logout-btn { padding:4px 10px; background:rgba(255,69,58,0.15); color:#FF3B30; border-radius:6px; text-decoration:none; font-weight:500; font-size:0.75rem; border:1px solid rgba(255,69,58,0.25); }
.user-menu .logout-btn:hover { background:rgba(255,69,58,0.25); }

.header-left h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--label-primary);
}

.header-accent {
    color: #DD9058;
    font-weight: 400;
}

.refresh-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--label-secondary);
    background: var(--glass-surface);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.header-stats {
    display: flex;
    gap: 16px;
}

.stat-box {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 10px 20px;
    text-align: center;
    min-width: 90px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #DD9058;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ========== FILTER BAR ========== */
#filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--system-bg-secondary);
    border-bottom: 1px solid var(--system-separator);
    flex-wrap: wrap;
}

#filter-search {
    flex: 1;
    min-width: 180px;
    max-width: 300px;
    padding: 8px 14px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--label-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#filter-search:focus {
    border-color: rgba(10,132,255,0.50);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15);
}

#filter-search::placeholder {
    color: var(--label-tertiary);
}

#filter-bar select {
    padding: 8px 12px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--label-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

#filter-bar select:focus {
    border-color: rgba(10,132,255,0.50);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15);
}

/* ========== TABS ========== */
#tab-bar {
    display: flex;
    gap: 0;
    padding: 0 24px;
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    color: var(--label-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
    color: var(--label-primary);
}

.tab-btn.active {
    color: var(--label-primary);
    border-bottom-color: #007AFF;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ========== PIPELINE TOOLBAR (List/Kanban toggle) ========== */
.pipeline-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px 0;
    background: var(--system-bg-secondary);
}

.view-toggle-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
}

.view-toggle-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--glass-surface);
    color: var(--label-secondary);
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.view-toggle-btn:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.06);
}

.view-toggle-btn:hover {
    background: var(--glass-surface-hover);
    color: var(--label-primary);
}

.view-toggle-btn.active {
    background: #007AFF;
    color: #fff;
}

.pipeline-total-label {
    font-size: 0.75rem;
    color: var(--label-tertiary);
    font-weight: 500;
}

.table-toolbar-inline {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========== PIPELINE LIST VIEW ========== */
.pipeline-list-wrap {
    padding: 12px 24px 24px;
}

.pipeline-list-stage {
    margin-bottom: 24px;
}

.pipeline-list-stage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pipeline-list-stage-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--label-secondary);
}

.pipeline-list-stage-count {
    background: var(--system-fill-quaternary);
    color: var(--label-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

.pipeline-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: var(--glass-surface);
    border-radius: 13px;
    overflow: hidden;
}

.pipeline-list-table thead tr {
    background: rgba(120,120,128,0.04);
}

.pipeline-list-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--label-secondary);
    border-bottom: 1px solid var(--system-separator);
}

.pipeline-list-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--glass-border);
    color: var(--label-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.pipeline-list-row {
    cursor: pointer;
    transition: background 0.1s;
}

.pipeline-list-row:hover {
    background: var(--glass-surface-hover);
}

.pipeline-list-row:last-child td {
    border-bottom: none;
}

/* ========== KANBAN BOARD ========== */
.kanban-board {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    overflow-x: auto;
    min-height: calc(100vh - 220px);
    align-items: flex-start;
    background: var(--system-bg-secondary);
}

.kanban-column {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    background: rgba(120,120,128,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
}

.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    background: rgba(120,120,128,0.04);
    border-radius: 13px 13px 0 0;
    z-index: 2;
}

.kanban-col-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--label-secondary);
}

/* Won / Lost column tinting */
.kanban-column[data-stage="won"] .kanban-col-header { background: rgba(48,209,88,0.08); border-bottom-color: rgba(48,209,88,0.25); }
.kanban-column[data-stage="won"] { background: rgba(48,209,88,0.04); border-color: rgba(48,209,88,0.15); }
.kanban-column[data-stage="won"] .kanban-col-title { color: #34C759; }
.kanban-column[data-stage="won"] .kanban-col-count { background: rgba(48,209,88,0.15); color: #34C759; }
.kanban-column[data-stage="lost"] .kanban-col-header { background: rgba(255,69,58,0.08); border-bottom-color: rgba(255,69,58,0.25); }
.kanban-column[data-stage="lost"] { background: rgba(255,69,58,0.04); border-color: rgba(255,69,58,0.15); }
.kanban-column[data-stage="lost"] .kanban-col-title { color: #FF3B30; }
.kanban-column[data-stage="lost"] .kanban-col-count { background: rgba(255,69,58,0.15); color: #FF3B30; }

.kanban-col-count {
    background: var(--system-fill-quaternary);
    color: var(--label-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.kanban-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanban-col-body::-webkit-scrollbar {
    width: 4px;
}

.kanban-col-body::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-col-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

/* ========== LEAD CARD ========== */
.lead-card {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 12px;
    cursor: pointer;
    border-left: 4px solid rgba(0,0,0,0.06);
    box-shadow: var(--glass-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
    position: relative;
}

.lead-card:hover {
    transform: translateY(-2px);
    background: var(--glass-surface-hover);
    box-shadow: var(--glass-shadow-elevated);
}

.lead-card.priority-hot    { border-left-color: #FF3B30; }
.lead-card.priority-warm   { border-left-color: #FF9500; }
.lead-card.priority-nurture { border-left-color: #34C759; }
.lead-card.priority-park   { border-left-color: #8E8E93; }

.card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--label-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-title {
    font-size: 0.75rem;
    color: var(--label-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-company {
    font-size: 0.75rem;
    color: #DD9058;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.card-icp {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(221,144,88,0.15);
    color: #DD9058;
}

.card-icp.high { background: rgba(48,209,88,0.15); color: #34C759; }
.card-icp.medium { background: rgba(255,214,10,0.15); color: #FFCC00; }
.card-icp.low { background: rgba(255,69,58,0.15); color: #FF3B30; }

.card-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.card-priority-dot.hot    { background: #FF3B30; }
.card-priority-dot.warm   { background: #FF9500; }
.card-priority-dot.nurture { background: #34C759; }
.card-priority-dot.park   { background: #8E8E93; }

.card-rep {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--label-secondary);
}

.rep-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.rep-avatar.c { background: #e91e63; }
.rep-avatar.w { background: #9c27b0; }
.rep-avatar.s { background: #457b9d; }
.rep-avatar.v { background: #2d6a4f; }
.rep-avatar.l { background: #DD9058; }
.rep-avatar.j { background: #4caf50; }
.rep-avatar.unknown { background: #8E8E93; }

.card-days {
    font-size: 0.65rem;
    color: var(--label-tertiary);
}

/* ========== EMPTY COLUMN ========== */
.kanban-empty {
    text-align: center;
    color: var(--label-tertiary);
    font-size: 0.8rem;
    padding: 24px 8px;
}

/* ========== TABLE ========== */
.table-wrapper {
    padding: 16px 24px;
    overflow-x: auto;
}

#leads-table {
    width: 100%;
    border-collapse: collapse;
}

#leads-table th {
    background: var(--system-bg-secondary);
    color: var(--label-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--system-separator);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

#leads-table th:hover {
    color: #007AFF;
}

#leads-table th.sort-asc::after { content: " \u25B2"; font-size: 0.6rem; }
#leads-table th.sort-desc::after { content: " \u25BC"; font-size: 0.6rem; }

#leads-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.85rem;
    color: var(--label-primary);
    white-space: nowrap;
}

#leads-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

#leads-table tbody tr:nth-child(even) {
    background: rgba(120,120,128,0.02);
}

#leads-table tbody tr:hover {
    background: rgba(120,120,128,0.08) !important;
}

.table-priority {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.table-priority.hot    { background: rgba(255,69,58,0.15); color: #FF3B30; }
.table-priority.warm   { background: rgba(255,159,10,0.15); color: #FF9500; }
.table-priority.nurture { background: rgba(48,209,88,0.15); color: #34C759; }
.table-priority.park   { background: rgba(142,142,147,0.15); color: #8E8E93; }

.table-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: rgba(221,144,88,0.15);
    color: #DD9058;
}

/* ========== MODAL ========== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-content {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 24px;
    box-shadow: var(--glass-shadow-elevated);
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--label-secondary);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--label-primary);
}

/* Modal sections */
.modal-section {
    margin-bottom: 20px;
}

.modal-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #007AFF;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--system-separator);
}

.modal-profile-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 4px;
}

.modal-profile-title {
    font-size: 0.9rem;
    color: var(--label-secondary);
    margin-bottom: 2px;
}

.modal-profile-company {
    font-size: 0.95rem;
    color: var(--label-secondary);
    margin-bottom: 12px;
}

.modal-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.modal-field-label {
    color: var(--label-secondary);
    min-width: 80px;
    flex-shrink: 0;
}

.modal-field-value {
    color: var(--label-primary);
    word-break: break-word;
}

.modal-field-value a {
    color: #007AFF;
    text-decoration: none;
}

.modal-field-value a:hover {
    text-decoration: underline;
    color: #40A0FF;
}

/* ── Editable Profile Fields ── */
.editable-field { cursor: pointer; }
.editable-field:hover { background: var(--glass-surface); border-radius: 4px; }
.modal-field-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(10,132,255,0.50);
    border-radius: 4px;
    font-size: 0.82rem;
    font-family: inherit;
    background: var(--glass-surface);
    color: var(--label-primary);
    outline: none;
}
.modal-field-input:focus { box-shadow: 0 0 0 2px rgba(10,132,255,0.20); }
.modal-field-empty { color: var(--label-tertiary); font-style: italic; font-size: 0.78rem; }
select.modal-field-input { cursor: pointer; }

/* ── Enrich Buttons ── */
.btn-enrich-company {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,122,255,0.25);
  background: rgba(0,122,255,0.08);
  color: #007AFF;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-enrich-company:hover { background: rgba(0,122,255,0.15); }
.btn-enrich-company:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-enrich-company.enrich-success {
  background: rgba(52,199,89,0.08);
  border-color: rgba(52,199,89,0.25);
  color: #34C759;
}

.btn-enrich-phone {
  padding: 1px 6px;
  border: none;
  background: none;
  color: #007AFF;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 4px;
  border-radius: 4px;
}
.btn-enrich-phone:hover { background: rgba(0,122,255,0.08); }
.btn-enrich-phone:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-enrich-phone.enrich-success { color: #34C759; }
.btn-enrich-phone.enrich-empty { color: #8E8E93; font-style: italic; font-size: 0.8em; }
.btn-enrich-company.enrich-empty { color: #8E8E93; font-style: italic; font-size: 0.85em; background: rgba(142,142,147,0.08); }

.enrich-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(0,122,255,0.20);
  border-top-color: #007AFF;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  vertical-align: middle;
}

/* ── Collapsible Sections ── */
.modal-section-collapsible .modal-section-body { display: none; }
.modal-section-collapsible.open .modal-section-body { display: block; }
.section-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.section-toggle:hover { color: #007AFF; }
.section-chevron { font-size: 0.6rem; transition: transform 0.2s; }
.modal-section-collapsible.open .section-chevron { transform: rotate(0deg); }
.modal-section-collapsible:not(.open) .section-chevron { transform: rotate(-90deg); }

/* ── Tag Chips ── */
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 10px;
    background: rgba(221,144,88,0.15); color: #DD9058; font-size: 0.72rem; font-weight: 500;
}
.tag-chip-x { cursor: pointer; font-size: 0.8rem; opacity: 0.5; margin-left: 2px; }
.tag-chip-x:hover { opacity: 1; color: #FF3B30; }
.tag-chip-input {
    border: none; outline: none; background: transparent;
    font-size: 0.75rem; min-width: 60px; padding: 2px 4px; font-family: inherit; color: var(--label-primary);
}
.tag-chip-input::placeholder { color: var(--label-tertiary); }

/* ── Sync Badge ── */
.modal-sync-badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 8px; margin-left: 8px; }
.modal-sync-badge.saving { background: rgba(255,159,10,0.15); color: #FF9500; }
.modal-sync-badge.synced { background: rgba(48,209,88,0.15); color: #34C759; }
.modal-sync-badge.error { background: rgba(255,69,58,0.15); color: #FF3B30; }

.modal-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.modal-badge.sent    { background: rgba(48,209,88,0.15); color: #34C759; }
.modal-badge.drafted { background: rgba(221,144,88,0.15); color: #DD9058; }
.modal-badge.replied { background: rgba(10,132,255,0.15); color: #007AFF; }
.modal-badge.meeting { background: rgba(94,92,230,0.15); color: #5856D6; }
.modal-badge.new     { background: var(--glass-surface); color: var(--label-secondary); }
.modal-badge.scored  { background: rgba(221,144,88,0.15); color: #DD9058; }
.modal-badge.approved { background: rgba(48,209,88,0.15); color: #34C759; }
.modal-badge.assigned { background: rgba(255,214,10,0.15); color: #FFCC00; }

.modal-message {
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 12px;
    margin-bottom: 8px;
}

.modal-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.modal-message-channel {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #007AFF;
}

.modal-message-date {
    font-size: 0.7rem;
    color: var(--label-tertiary);
}

.modal-message-subject {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--label-primary);
    margin-bottom: 4px;
}

.modal-message-body {
    font-size: 0.8rem;
    color: var(--label-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.modal-message-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Assign button */
.modal-assign-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--system-separator);
}

.modal-assign-bar select {
    padding: 8px 12px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--label-primary);
    font-size: 0.85rem;
    font-family: inherit;
    flex: 1;
}

.btn-assign {
    padding: 8px 20px;
    background: #007AFF;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-assign:hover {
    background: #0070DD;
}

.btn-assign:disabled {
    background: var(--glass-surface);
    color: var(--label-tertiary);
    cursor: not-allowed;
}

/* Signals tags */
.signal-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    background: rgba(10,132,255,0.10);
    color: #007AFF;
    margin: 2px 4px 2px 0;
}

/* Loading spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--label-secondary);
    font-size: 0.9rem;
}

.loading-spinner::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.06);
    border-top-color: #007AFF;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 10px;
}

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

/* Toast notification */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--glass-border);
    color: var(--label-primary);
    padding: 12px 20px;
    border-radius: 13px;
    font-size: 0.85rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    animation: toast-in 0.3s ease;
}

.toast.success { border-left: 4px solid var(--tint-green); }
.toast.error { border-left: 4px solid var(--tint-red); }

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

/* ========== EVENT BADGES ========== */
.event-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin: 2px;
    white-space: nowrap;
}

.event-speaker {
    background: #F2F2F7;
    color: #DD9058;
}

.event-attendee {
    background: #e3f2fd;
    color: #1565c0;
}

.event-sponsor {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Event items in modal */
.modal-events-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #F2F2F7;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
}

.modal-event-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--label-primary);
}

.modal-event-role {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    color: var(--label-secondary);
}

/* ========== RESPONSIVE — TABLET (≤1024px) ========== */
@media (max-width: 1024px) {
    #app-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .stat-box {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
    }

    .kanban-board {
        padding: 12px;
    }

    .kanban-column {
        min-width: 220px;
    }
}

/* ========== RESPONSIVE — MOBILE (≤768px) ========== */
@media (max-width: 768px) {
    html { font-size: 13px; }

    /* ── Header ── */
    #app-header {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .header-left h1 { font-size: 1.2rem; }

    .header-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .stat-box {
        padding: 6px 4px;
        min-width: 0;
    }

    .stat-value { font-size: 1.2rem; }
    .stat-label { font-size: 0.6rem; }

    /* ── Filter Bar ── */
    #filter-bar {
        padding: 10px 16px;
        gap: 8px;
    }

    #filter-search {
        min-width: 100%;
        max-width: 100%;
        order: -1;
    }

    #filter-bar select {
        flex: 1 1 45%;
        min-width: 0;
        font-size: 0.8rem;
        padding: 8px 8px;
    }

    /* ── Tab Bar — scrollable on mobile ── */
    #tab-bar {
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        flex-wrap: nowrap;
    }

    #tab-bar::-webkit-scrollbar { display: none; }

    .tab-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Kanban — vertical stack on mobile ── */
    .kanban-board {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        overflow-x: visible;
        min-height: auto;
    }

    .kanban-column {
        min-width: 100%;
        max-width: 100%;
        max-height: none;
    }

    .kanban-col-body {
        max-height: 300px;
    }

    /* ── Tables — horizontal scroll with touch ── */
    .table-wrapper {
        padding: 12px 16px;
        -webkit-overflow-scrolling: touch;
    }

    #leads-table td,
    #leads-table th {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    #events-table td,
    #events-table th {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    /* ── Modal — full screen on mobile ── */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        padding: 20px 16px;
    }

    .modal-profile-name { font-size: 1.2rem; }
    .modal-assign-bar { flex-direction: column; align-items: stretch; }
    .modal-assign-bar select { width: 100%; }
    .btn-assign { width: 100%; text-align: center; }

    /* ── Tasks — single column ── */
    .tasks-header { padding: 16px 16px 8px; }
    .tasks-header h2 { font-size: 1.1rem; }

    /* ── KB — single column ── */
    .kb-header { padding: 16px 16px 0; }
    .kb-upload-area { margin: 12px 16px; padding: 20px; }
    .kb-upload-icon { font-size: 28px; }
    .kb-file-row { padding: 8px 12px; gap: 6px; }
    .kb-file-date { display: none; }

    /* ── Events ── */
    .events-header { padding: 16px 16px 0; }
    .events-summary { padding: 12px 16px; gap: 8px; }
    .events-summary .stat-box { min-width: 70px; padding: 8px 10px; }
    .events-controls { width: 100%; }
    .events-controls select { flex: 1; }

    /* ── Social ── */
    .social-header { padding: 16px 16px 0; }
    .social-controls { width: 100%; }
    .social-controls select { flex: 1; }

    /* ── Toast — bottom center on mobile ── */
    .toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

/* ========== RESPONSIVE — SMALL MOBILE (≤480px) ========== */
@media (max-width: 480px) {
    .header-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .stat-value { font-size: 1rem; }

    #filter-bar select {
        flex: 1 1 100%;
    }

    .tab-btn {
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .lead-card {
        padding: 10px;
    }

    .card-name { font-size: 0.85rem; }

    .task-card { padding: 12px; }
    .task-assign-btn { padding: 6px 8px; font-size: 0.7rem; }
    .task-approve-btn { padding: 6px 10px; font-size: 0.7rem; }

    .modal-content { padding: 16px 12px; }

    .kb-categories { padding: 0 16px 16px; }

    .social-card { padding: 12px; }
    .social-score { font-size: 24px; }
}

/* ========== OVERVIEW TAB ========== */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px 24px;
}
.overview-card {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 20px 24px;
    box-shadow: var(--glass-shadow);
}
.overview-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: #DD9058;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--system-separator);
}
.overview-full { grid-column: 1 / -1; }
.overview-half { grid-column: span 1; }

/* ── Overview Tables ── */
.overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.overview-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--label-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--system-separator);
}
.overview-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--glass-border);
    color: var(--label-primary);
}
.overview-table tbody tr:hover {
    background: var(--glass-surface);
}
.overview-table .rep-name { font-weight: 600; }
.overview-table .num-hot { color: #FF3B30; font-weight: 600; }
.overview-table .num-replied { color: #34C759; font-weight: 600; }
.overview-table .num-meetings { color: #007AFF; font-weight: 600; }

/* ── Funnel Bars ── */
.funnel-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding-top: 10px;
}
.funnel-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.funnel-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.4s ease;
}
.funnel-label {
    font-size: 11px;
    color: var(--label-secondary);
    text-align: center;
    white-space: nowrap;
}
.funnel-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--label-primary);
}

/* ── Activity Chart (bar chart) ── */
.activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 140px;
    padding-top: 10px;
}
.activity-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.activity-bar-group {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    width: 100%;
    height: 100px;
}
.activity-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}
.activity-bar.created { background: rgba(0,0,0,0.15); }
.activity-bar.sent { background: #DD9058; }
.activity-bar.replied { background: #34C759; }
.activity-date-label {
    font-size: 10px;
    color: var(--label-tertiary);
    transform: rotate(-45deg);
    white-space: nowrap;
}
.activity-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
    font-size: 11px;
    color: var(--label-secondary);
}
.activity-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.activity-legend .leg-created::before { background: rgba(0,0,0,0.15); }
.activity-legend .leg-sent::before { background: #DD9058; }
.activity-legend .leg-replied::before { background: #34C759; }

@media (max-width: 768px) {
    .overview-grid { grid-template-columns: 1fr; }
    .overview-half { grid-column: span 1; }
}

/* ========== TASK BADGE ========== */
.task-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: #DD9058;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
}

/* ========== TASKS VIEW ========== */
.tasks-header {
    padding: 24px 24px 12px;
}
.tasks-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 4px;
}
.tasks-subtitle {
    font-size: 0.85rem;
    color: var(--label-secondary);
}
.tasks-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    padding: 12px 24px 24px;
}
.tasks-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--label-tertiary);
    font-size: 0.95rem;
}

/* ========== TASK CARD ========== */
.task-card {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 16px;
    box-shadow: var(--glass-shadow);
    border-left: 4px solid rgba(0,0,0,0.06);
    transition: transform 0.2s, opacity 0.4s, box-shadow 0.2s, background 0.15s;
}
.task-card:hover {
    transform: translateY(-2px);
    background: var(--glass-surface-hover);
    box-shadow: var(--glass-shadow-elevated);
}
.task-card.priority-border-hot { border-left-color: #FF3B30; }
.task-card.priority-border-warm { border-left-color: #FF9500; }
.task-card.priority-border-nurture { border-left-color: #34C759; }
.task-card.priority-border-park { border-left-color: #8E8E93; }

.task-card.fade-out {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.task-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 6px;
    margin: -6px -6px 10px -6px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.task-card-top:hover {
    background: rgba(0,0,0,0.03);
}
.task-card-details:hover {
    color: #6366f1 !important;
}
.task-card-info { flex: 1; min-width: 0; }
.task-card-name { font-weight: 700; font-size: 0.95rem; color: var(--label-primary); }
.task-card-title { font-size: 0.8rem; color: var(--label-secondary); margin-top: 2px; }
.task-card-company { font-size: 0.8rem; color: #DD9058; margin-top: 2px; }

.task-card-scores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
}

.task-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}
.task-priority-badge.hot { background: rgba(255,69,58,0.15); color: #FF3B30; }
.task-priority-badge.warm { background: rgba(255,159,10,0.15); color: #FF9500; }
.task-priority-badge.nurture { background: rgba(48,209,88,0.15); color: #34C759; }
.task-priority-badge.park { background: rgba(142,142,147,0.15); color: #8E8E93; }

.task-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    font-size: 0.75rem;
}
.task-email-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.task-email-status.verified { background: rgba(48,209,88,0.15); color: #34C759; }
.task-email-status.unverified { background: var(--glass-surface); color: var(--label-secondary); }
.task-email-addr { color: var(--label-secondary); }
.task-region { color: var(--label-tertiary); }

.task-card-actions {
    border-top: 1px solid var(--system-separator);
    padding-top: 10px;
}
.task-assign-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.task-assign-label {
    font-size: 0.7rem;
    color: var(--label-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.task-assign-btn {
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    background: var(--glass-surface);
    color: var(--label-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.task-assign-btn:hover {
    background: #007AFF;
    border-color: #007AFF;
    color: #fff;
}
.task-assign-btn:disabled {
    background: rgba(120,120,128,0.04);
    color: var(--label-quaternary);
    cursor: not-allowed;
    border-color: rgba(0,0,0,0.06);
}

.task-approve-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.task-approve-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.task-approve-btn.email { background: rgba(48,209,88,0.15); color: #34C759; }
.task-approve-btn.email:hover { background: rgba(48,209,88,0.25); }
.task-approve-btn.inmail { background: rgba(10,132,255,0.15); color: #007AFF; }
.task-approve-btn.inmail:hover { background: rgba(10,132,255,0.25); }
.task-approve-btn.both { background: rgba(221,144,88,0.15); color: #DD9058; }
.task-approve-btn.both:hover { background: rgba(221,144,88,0.25); }
.task-approve-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.task-skip-btn {
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    background: var(--glass-surface);
    color: var(--label-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.task-skip-btn:hover { background: var(--glass-surface-hover); color: var(--label-primary); }
.task-skip-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ========== ENHANCED MODAL — ACTIVITIES TIMELINE ========== */
.modal-section-accent {
    color: #007AFF !important;
}
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 24px;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--system-fill-quaternary);
}
.timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    position: relative;
}
.timeline-dot {
    position: absolute;
    left: -20px;
    top: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 2px solid #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    z-index: 1;
}
.timeline-content { flex: 1; }
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.timeline-channel {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #007AFF;
    letter-spacing: 0.3px;
}
.timeline-date {
    font-size: 0.7rem;
    color: var(--label-tertiary);
}
.timeline-desc {
    font-size: 0.8rem;
    color: var(--label-secondary);
    line-height: 1.4;
}

/* ========== ENHANCED MODAL — INTEL GRID ========== */
.intel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.intel-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.intel-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--label-secondary);
}
.intel-value {
    font-size: 0.85rem;
    color: var(--label-primary);
    word-break: break-word;
}
.intel-value a {
    color: #007AFF;
    text-decoration: none;
}
.intel-value a:hover {
    text-decoration: underline;
}

/* ========== ENHANCED MODAL — OUTREACH HISTORY ========== */
.outreach-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.outreach-history-item {
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.oh-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    flex-wrap: wrap;
}
.oh-channel {
    font-weight: 700;
    text-transform: uppercase;
    color: #007AFF;
    font-size: 0.65rem;
}
.oh-status {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(221,144,88,0.15);
    color: #DD9058;
}
.oh-status.sent { background: rgba(48,209,88,0.15); color: #34C759; }
.oh-status.draft { background: rgba(255,159,10,0.15); color: #FF9500; }
.oh-opened { color: #34C759; font-weight: 600; font-size: 0.7rem; }
.oh-not-opened { color: var(--label-tertiary); font-size: 0.7rem; }
.oh-date { color: var(--label-tertiary); font-size: 0.7rem; margin-left: auto; }
.oh-subject {
    font-size: 0.8rem;
    color: var(--label-primary);
    margin-top: 4px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .tasks-list { grid-template-columns: 1fr; }
    .intel-grid { grid-template-columns: 1fr; }
}

/* ========== KNOWLEDGE BASE TAB ========== */

/* Apple dark background for the entire KB section */
#kb-section {
    background: var(--system-bg-secondary);
    min-height: 100%;
}
#kb-view {
    background: var(--system-bg-secondary);
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

.kb-header { padding: 20px 24px 0; }
.kb-header h2 { font-size: 20px; font-weight: 700; color: var(--label-primary); }
.kb-subtitle { font-size: 13px; color: var(--label-secondary); margin-top: 4px; display: block; }

.kb-upload-area {
    margin: 16px 24px;
    padding: 32px;
    border: 2px dashed rgba(0,0,0,0.12);
    border-radius: 13px;
    text-align: center;
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.kb-upload-area.kb-drag-over {
    border-color: #007AFF;
    background: rgba(10,132,255,0.08);
}
.kb-upload-icon { font-size: 36px; margin-bottom: 8px; }
.kb-upload-text { font-size: 14px; color: var(--label-secondary); }
.kb-browse-link { color: #007AFF; cursor: pointer; text-decoration: underline; font-weight: 600; }
.kb-category-select {
    margin-top: 12px;
    padding: 6px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 13px;
    background: var(--glass-surface);
    color: var(--label-primary);
}
.kb-category-select:focus { border-color: rgba(10,132,255,0.50); outline: none; box-shadow: 0 0 0 3px rgba(10,132,255,0.15); }
.kb-category-select option { background: var(--system-bg-secondary); color: var(--label-primary); }

.kb-categories {
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.kb-category-card {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.kb-category-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(120,120,128,0.04);
}
.kb-cat-icon { font-size: 18px; }
.kb-cat-label { font-weight: 600; font-size: 14px; color: var(--label-primary); flex: 1; }
.kb-cat-count { font-size: 12px; color: var(--label-secondary); background: var(--system-fill-quaternary); padding: 2px 8px; border-radius: 10px; }

.kb-file-list { padding: 4px 0; }
.kb-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--glass-border);
    cursor: default;
    transition: background 0.15s;
}
.kb-file-row:hover { background: var(--glass-surface); }
.kb-file-row:last-child { border-bottom: none; }

.kb-file-ext {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    min-width: 36px;
    text-align: center;
}
.ext-pdf { background: #FF3B30; }
.ext-pptx { background: #DD9058; }
.ext-docx { background: #007AFF; }
.ext-md { background: #34C759; }
.ext-other { background: #8E8E93; }

.kb-file-name { flex: 1; font-size: 13px; color: var(--label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-file-size { font-size: 12px; color: var(--label-tertiary); min-width: 50px; text-align: right; }
.kb-file-date { font-size: 12px; color: var(--label-tertiary); min-width: 60px; }

.kb-file-view {
    font-size: 11px;
    padding: 3px 10px;
    border: 1px solid rgba(10,132,255,0.30);
    border-radius: 4px;
    background: rgba(10,132,255,0.10);
    color: #007AFF;
    cursor: pointer;
    transition: all 0.15s;
}
.kb-file-view:hover { background: #007AFF; color: var(--label-primary); border-color: #007AFF; }

.kb-file-delete {
    font-size: 12px;
    padding: 2px 6px;
    border: none;
    background: none;
    color: var(--label-tertiary);
    cursor: pointer;
    transition: color 0.15s;
}
.kb-file-delete:hover { color: #FF3B30; }

.kb-empty { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--label-tertiary); }

.kb-file-content {
    background: rgba(120,120,128,0.04);
    border: 1px solid var(--glass-border);
    padding: 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 500px;
    overflow-y: auto;
    color: var(--label-primary);
    font-family: 'SF Mono', 'Fira Code', 'Inter', monospace;
}

@media (max-width: 768px) {
    .kb-categories { grid-template-columns: 1fr; }
}

/* ========== EVENTS TAB ========== */
.events-header {
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.events-header h2 { font-size: 20px; font-weight: 700; color: var(--label-primary); }
.events-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.events-controls select {
    padding: 6px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-surface);
    font-size: 12px;
    color: var(--label-primary);
}
.events-summary {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    flex-wrap: wrap;
}
.events-summary .stat-box {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 12px 18px;
    min-width: 90px;
    text-align: center;
}
.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.industry-tag { background: var(--system-fill-quaternary); padding: 2px 8px; border-radius: 10px; font-size: 11px; color: var(--label-secondary); white-space: nowrap; }
.event-name { font-weight: 600; color: var(--label-primary); }
.event-focus { font-size: 11px; color: var(--label-secondary); margin-top: 2px; }
.event-row:hover { background: var(--glass-surface); cursor: pointer; }
.event-sponsoring { background: rgba(221,144,88,0.08); border-left: 3px solid #DD9058; }
.event-sponsoring:hover { background: rgba(221,144,88,0.15); }
.sponsor-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #DD9058; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle; margin-left: 6px; }
.btn-sm {
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--glass-surface);
    font-size: 11px;
    cursor: pointer;
    color: var(--label-primary);
}
.btn-sm:hover { background: var(--glass-surface-hover); border-color: rgba(0,0,0,0.08); }
.btn-green { background: rgba(48,209,88,0.15); border-color: rgba(48,209,88,0.30); color: #34C759; }
.btn-green:hover { background: rgba(48,209,88,0.25); }
.btn-orange { background: rgba(221,144,88,0.15); border-color: rgba(221,144,88,0.30); color: #DD9058; }
.btn-orange:hover { background: rgba(221,144,88,0.25); }
.btn-grey { background: rgba(142,142,147,0.15); border-color: rgba(142,142,147,0.30); color: #8E8E93; }
.btn-blue { background: rgba(10,132,255,0.15); border-color: rgba(10,132,255,0.30); color: #007AFF; }

.badge-green { background: rgba(48,209,88,0.15); color: #34C759; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-orange { background: rgba(221,144,88,0.15); color: #DD9058; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-grey { background: rgba(142,142,147,0.15); color: #8E8E93; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-blue { background: rgba(10,132,255,0.15); color: #007AFF; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.status-badge { font-weight: 500; }

/* Event modal extras */
.modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.modal-header-row h2 { font-size: 20px; font-weight: 700; color: var(--label-primary); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.modal-warning { background: rgba(255,159,10,0.15); border: 1px solid rgba(255,159,10,0.30); border-radius: 10px; padding: 10px; margin-top: 10px; font-size: 13px; color: #FF9500; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ========== SOCIAL MEDIA TAB ========== */
.social-header {
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.social-header h2 { font-size: 20px; font-weight: 700; color: var(--label-primary); }
.social-controls {
    display: flex;
    gap: 8px;
}
.social-controls select {
    padding: 6px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-surface);
    font-size: 12px;
    color: var(--label-primary);
}
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    padding: 16px 24px;
}
.social-card {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    padding: 16px;
    box-shadow: var(--glass-shadow);
}
.social-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.social-card-meta { font-size: 11px; color: var(--label-secondary); margin-bottom: 10px; }
.platform-badge {
    background: var(--system-fill-quaternary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--label-secondary);
}
.social-post {
    border-top: 1px solid var(--system-separator);
    padding: 8px 0;
}
.social-post-date { font-size: 11px; color: var(--label-secondary); }
.social-post-summary { font-size: 13px; margin-top: 4px; color: var(--label-primary); }
.social-post-engagement {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--label-secondary);
}
.social-score {
    font-size: 28px;
    font-weight: 700;
    margin: 8px 0;
}
.social-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    font-size: 12px;
    color: var(--label-secondary);
    margin-bottom: 10px;
}
.social-recs { font-size: 12px; color: var(--label-secondary); }
.social-recs ul { margin: 6px 0 0 16px; }
.social-recs li { margin-bottom: 4px; }
.social-empty, .social-empty-inline {
    text-align: center;
    padding: 40px 24px;
    color: var(--label-secondary);
}
.social-empty h3 { color: var(--label-primary); margin-bottom: 8px; }
.social-empty-inline { padding: 12px 0; font-size: 12px; }
.social-section { padding: 0; }

@media (max-width: 768px) {
    .social-grid { grid-template-columns: 1fr; }
    .modal-grid { grid-template-columns: 1fr; }
    .events-controls { flex-direction: column; }
}

/* ========== REP BADGE (small, inline in Lead Table) ========== */
.table-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rep-badge-sm {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
}
.rep-badge-sm.c { background: #e91e63; }
.rep-badge-sm.w { background: #9c27b0; }
.rep-badge-sm.s { background: #457b9d; }
.rep-badge-sm.v { background: #2d6a4f; }
.rep-badge-sm.l { background: #DD9058; }
.rep-badge-sm.j { background: #4caf50; }
.rep-badge-sm.unknown { background: #8E8E93; }

/* ========== ASSIGN + NOTIFY MODAL ========== */
.assign-modal-overlay {
    z-index: 1100;
}
.assign-modal {
    max-width: 520px;
    border-top: 4px solid #007AFF;
}
.assign-modal-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: #007AFF;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.assign-modal-lead {
    background: #F2F2F7;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.assign-modal-lead-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--label-primary);
    margin-bottom: 2px;
}
.assign-modal-lead-title {
    font-size: 0.85rem;
    color: var(--label-tertiary);
}
.assign-modal-lead-company {
    font-size: 0.9rem;
    color: #6E6E73;
    margin-top: 2px;
}
.assign-modal-lead-country {
    font-size: 0.8rem;
    color: var(--label-tertiary);
    margin-top: 2px;
}
.assign-modal-lead-email {
    font-size: 0.8rem;
    color: var(--label-tertiary);
    margin-top: 4px;
}
.assign-modal-rep {
    font-size: 0.9rem;
    color: var(--label-secondary);
    margin-bottom: 18px;
    padding: 10px 14px;
    background: var(--system-bg-tertiary);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
}
.assign-modal-rep-label {
    font-size: 0.75rem;
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.assign-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.assign-modal-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    text-align: center;
}
.assign-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.assign-modal-btn.lark {
    background: #1565c0;
    color: #fff;
}
.assign-modal-btn.lark:hover:not(:disabled) {
    background: #0d47a1;
}
.assign-modal-btn.email {
    background: #2e7d32;
    color: #fff;
}
.assign-modal-btn.email:hover:not(:disabled) {
    background: #1b5e20;
}
.assign-modal-btn.only {
    background: #757575;
    color: #fff;
}
.assign-modal-btn.only:hover:not(:disabled) {
    background: #616161;
}
.assign-modal-btn.cancel {
    background: #f5f5f5;
    color: var(--label-tertiary);
    border: 1px solid rgba(0,0,0,0.06);
}
.assign-modal-btn.cancel:hover:not(:disabled) {
    background: rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .assign-modal {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }
    .assign-modal-actions {
        gap: 6px;
    }
}

/* ── Lead Table Upgrade ── */
.table-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 24px 0; }
.table-toolbar button { padding:6px 12px; border:1px solid var(--glass-border); border-radius:6px; background:var(--glass-surface); color:var(--label-primary); font-size:0.78rem; cursor:pointer; font-family:inherit; }
.table-toolbar button:hover { background:var(--glass-surface-hover); }
.pagination-bar { display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 0; font-size:0.82rem; color:var(--label-primary); }
.pagination-bar button { padding:6px 14px; border:1px solid var(--glass-border); border-radius:6px; background:var(--glass-surface); color:var(--label-primary); cursor:pointer; font-family:inherit; }
.pagination-bar button:disabled { opacity:0.4; cursor:default; }
.pagination-bar button:hover:not(:disabled) { background:var(--glass-surface-hover); }
.bulk-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(255,214,10,0.10); border:1px solid rgba(255,214,10,0.25); border-radius:13px; margin:0 24px 8px; font-size:0.82rem; color:#FFCC00; }
.bulk-bar button { padding:5px 12px; border:none; border-radius:6px; font-size:0.78rem; cursor:pointer; font-family:inherit; font-weight:600; }
.bulk-bar button:nth-child(2) { background:#34C759; color:#fff; }
.bulk-bar button:nth-child(3) { background:#FF3B30; color:#fff; }
.bulk-bar button:nth-child(4) { background:#8E8E93; color:#fff; }
.bulk-bar button:last-child { background:transparent; color:var(--label-secondary); text-decoration:underline; }
.inline-edit-input { width:100%; padding:4px 6px; border:2px solid #007AFF; border-radius:4px; font-size:inherit; font-family:inherit; background:var(--glass-surface); color:var(--label-primary); }
.col-toggle-wrap { position:relative; }
.col-toggle-dropdown { position:absolute; top:100%; left:0; background:rgba(28,28,30,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:13px; padding:8px; box-shadow:var(--glass-shadow); z-index:20; display:none; min-width:180px; }
.col-toggle-dropdown.open { display:block; }
.col-toggle-dropdown label { display:flex; align-items:center; gap:6px; padding:4px 0; font-size:0.78rem; cursor:pointer; color:var(--label-primary); }
#leads-table thead { position:sticky; top:0; z-index:10; background:var(--system-bg-secondary); }
.chk-col { width:36px; text-align:center; }
.lead-age { color:var(--label-tertiary); font-size:0.75rem; }

/* ========== CODE REVIEW — PROPOSAL EXECUTION TRACKING — Apple Dark ========== */
.rv-prop-summary { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.rv-prop-count { font-size:0.72rem; font-weight:600; padding:3px 10px; border-radius:12px; }
.rv-prop-count.completed { background:rgba(48,209,88,0.15); color:#34C759; }
.rv-prop-count.in_progress { background:rgba(255,159,10,0.15); color:#FF9500; }
.rv-prop-count.approved { background:rgba(10,132,255,0.15); color:#007AFF; }
.rv-prop-count.proposed { background:var(--glass-surface); color:var(--label-secondary); }
.rv-prop-count.rejected { background:rgba(255,69,58,0.15); color:#FF3B30; }

.rv-proposal-row { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:14px; margin-bottom:10px; transition:border-color 0.2s, background 0.2s; color:var(--label-primary); }
.rv-proposal-row.completed { border-left:3px solid #34C759; }
.rv-proposal-row.in_progress { border-left:3px solid #FF9500; }
.rv-proposal-row.approved { border-left:3px solid #007AFF; }
.rv-proposal-row.rejected { border-left:3px solid #FF3B30; opacity:0.7; }
.rv-prop-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rv-prop-type { font-weight:600; font-size:0.82rem; text-transform:capitalize; color:var(--label-primary); }
.rv-prop-badge { font-size:0.68rem; font-weight:600; padding:2px 8px; border-radius:6px; text-transform:capitalize; }
.rv-prop-desc { font-size:0.82rem; color:var(--label-primary); margin-bottom:4px; }
.rv-prop-target { font-size:0.72rem; color:var(--label-secondary); margin-bottom:6px; }
.rv-prop-target code { background:var(--system-fill-quaternary); color:#DD9058; padding:1px 5px; border-radius:3px; font-family:'SF Mono','Fira Code',monospace; font-size:0.7rem; }
.rv-prop-times { font-size:0.68rem; color:var(--label-tertiary); margin-top:6px; }
.rv-prop-actions { display:flex; gap:4px; margin-left:auto; }
.rv-prop-actions button { font-size:0.72rem; padding:4px 10px; border-radius:6px; border:none; cursor:pointer; font-weight:500; }
.approve-btn { background:rgba(48,209,88,0.15); color:#34C759; border:1px solid rgba(48,209,88,0.25); }
.approve-btn:hover { background:rgba(48,209,88,0.25); }
.reject-btn { background:rgba(255,69,58,0.15); color:#FF3B30; border:1px solid rgba(255,69,58,0.25); }
.reject-btn:hover { background:rgba(255,69,58,0.25); }

/* Progress bar */
.rv-progress-track { height:6px; background:var(--system-fill-quaternary); border-radius:3px; margin:8px 0; position:relative; overflow:visible; }
.rv-progress-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
.rv-progress-text { position:absolute; right:0; top:-16px; font-size:0.65rem; font-weight:600; color:var(--label-secondary); }

/* Execution log */
.rv-exec-log { background:rgba(120,120,128,0.04); border:1px solid var(--glass-border); border-radius:10px; padding:6px 10px; margin-top:6px; }
.rv-log-entry { font-size:0.72rem; color:var(--label-primary); padding:2px 0; border-bottom:1px solid var(--glass-border); }
.rv-log-entry:last-child { border-bottom:none; }
.rv-log-time { color:var(--label-tertiary); font-size:0.65rem; margin-right:6px; }

/* ========== LEAD TABLE UPGRADE ========== */

/* Lead Avatar */
.lead-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; color: white;
    font-size: 11px; font-weight: 700; margin-right: 8px; vertical-align: middle;
    flex-shrink: 0;
}

/* Score Bar */
.score-bar-wrap {
    display: flex; align-items: center; gap: 6px;
}
.score-bar {
    height: 6px; border-radius: 3px; background: #007AFF;
    min-width: 2px; max-width: 60px;
}
.score-num {
    font-size: 12px; font-weight: 600; color: var(--label-secondary); min-width: 24px;
}

/* Rep Dot */
.rep-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.rep-dot.cheryl { background: #e91e63; }
.rep-dot.willy { background: #9c27b0; }
.rep-dot.seema { background: #2196f3; }
.rep-dot.vishan { background: #4caf50; }
.rep-dot.lava { background: #ff9800; }
.rep-dot.joven { background: #009688; }

/* Table Row Improvements */
#leads-table tbody tr { cursor: pointer; transition: background 0.15s; }
#leads-table tbody tr:hover { background: #F2F2F7 !important; }
#leads-table td { padding: 10px 12px; vertical-align: middle; }
.lead-name-cell { display: flex; align-items: center; white-space: nowrap; }

/* Status badge color variants */
.table-status.status-sent { background: rgba(45,106,79,0.1); color: #2d6a4f; }
.table-status.status-drafted { background: rgba(221,144,88,0.1); color: #DD9058; }
.table-status.status-replied { background: rgba(69,123,157,0.1); color: #457b9d; }
.table-status.status-meeting { background: rgba(156,39,176,0.1); color: #9c27b0; }
.table-status.status-scored { background: rgba(221,144,88,0.1); color: #DD9058; }
.table-status.status-approved { background: rgba(45,106,79,0.1); color: #2d6a4f; }
.table-status.status-assigned { background: rgba(233,196,106,0.15); color: #b8860b; }
.table-status.status-new { background: rgba(142,142,147,0.15); color: #8E8E93; }

/* Upgraded Pagination */
.pagination-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 24px; font-size: 0.82rem; flex-wrap: wrap; color: var(--label-primary);
}
.pagination-info { color: var(--label-secondary); font-size: 0.8rem; }
.pagination-pages {
    display: flex; align-items: center; gap: 4px;
}
.pagination-pages button {
    padding: 6px 12px; border: 1px solid var(--glass-border); border-radius: 6px;
    background: var(--glass-surface); color: var(--label-primary); cursor: pointer; font-family: inherit; font-size: 0.8rem;
    transition: background 0.15s, border-color 0.15s;
}
.pagination-pages button:disabled { opacity: 0.4; cursor: default; }
.pagination-pages button:hover:not(:disabled) { background: var(--glass-surface-hover); border-color: rgba(0,0,0,0.08); }
.pagination-pages button.page-active {
    background: #007AFF; color: #fff; border-color: #007AFF;
    font-weight: 600; opacity: 1;
}
.pagination-ellipsis { color: var(--label-tertiary); padding: 0 4px; font-size: 0.9rem; }

/* ========== ADD LEAD BUTTON & MODAL ========== */
.add-lead-btn {
    background: #007AFF; color: white; border: none; padding: 8px 16px;
    border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.add-lead-btn:hover { background: #0070DD; }

.add-lead-modal { max-width: 500px; }
.add-lead-header { font-size: 18px; font-weight: 700; color: var(--label-primary); margin-bottom: 16px; }
.add-lead-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--system-separator); }
.add-lead-tab { padding: 8px 20px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--label-secondary); border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.add-lead-tab.active { color: #007AFF; border-bottom-color: #007AFF; }
.add-lead-hint { font-size: 13px; color: var(--label-secondary); margin-bottom: 12px; }
.add-lead-input { width: 100%; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 10px; font-size: 14px; margin-bottom: 10px; box-sizing: border-box; background: var(--glass-surface); color: var(--label-primary); }
.add-lead-input:focus { border-color: rgba(10,132,255,0.50); outline: none; box-shadow: 0 0 0 2px rgba(10,132,255,0.15); }
.add-lead-input.half { width: 48%; display: inline-block; }
.add-lead-row { display: flex; gap: 4%; }
.add-lead-submit { width: 100%; padding: 10px; background: #007AFF; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.add-lead-submit:hover { background: #0070DD; }
.add-lead-submit:disabled { background: var(--glass-surface); color: var(--label-tertiary); cursor: wait; }
.add-lead-success { background: rgba(48,209,88,0.15); border: 1px solid rgba(48,209,88,0.30); border-radius: 10px; padding: 12px; color: #34C759; font-size: 13px; margin-top: 12px; }

/* ========== LEAD DETAIL MODAL — TABBED LAYOUT ========== */

/* Modal Tabs */
.modal-tabs { display: flex; border-bottom: 2px solid var(--system-separator); margin-bottom: 16px; gap: 0; }
.modal-tab { padding: 10px 20px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--label-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.modal-tab.active { color: #007AFF; border-bottom-color: #007AFF; }
.modal-tab:hover { color: #007AFF; }
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }

/* Profile Header */
.modal-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.modal-profile-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.modal-profile-info h2 { margin: 0; font-size: 20px; color: var(--label-primary); }
.modal-profile-info .modal-subtitle { color: var(--label-secondary); font-size: 14px; margin-top: 2px; }

/* Quick Actions */
.modal-actions-row { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.modal-action-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--glass-surface); color: var(--label-primary); cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; font-family: inherit; }
.modal-action-btn:hover { border-color: #007AFF; color: #007AFF; background: rgba(10,132,255,0.10); }
.modal-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-action-btn.primary { background: #007AFF; color: white; border-color: #007AFF; }

/* ICP Ring */
.icp-ring { width: 80px; height: 80px; position: relative; flex-shrink: 0; }
.icp-ring svg { position: absolute; top: 0; left: 0; }
.icp-ring-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 22px; font-weight: 700; color: #DD9058; }

/* Scoring Bars */
.score-dimension { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.score-dimension-label { width: 120px; font-size: 12px; color: var(--label-secondary); flex-shrink: 0; }
.score-dimension-bar { flex: 1; height: 8px; background: var(--system-fill-quaternary); border-radius: 4px; overflow: hidden; }
.score-dimension-fill { height: 100%; background: #007AFF; border-radius: 4px; transition: width 0.3s ease; }
.score-dimension-val { width: 36px; text-align: right; font-size: 12px; font-weight: 600; color: var(--label-primary); flex-shrink: 0; }

/* Signal Tags (enhanced for modal) */
.modal-tab-content .signal-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; background: rgba(10,132,255,0.10); color: #007AFF; border: 1px solid rgba(10,132,255,0.20); margin: 2px; }

/* Activity Timeline */
.modal-tab-content .activity-timeline { position: relative; padding-left: 24px; }
.modal-tab-content .activity-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--system-fill-quaternary); }
.modal-tab-content .activity-item { position: relative; margin-bottom: 16px; }
.modal-tab-content .activity-item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #007AFF; border: 2px solid rgba(28,28,30,0.95); }
.activity-date { font-size: 11px; color: var(--label-tertiary); }
.activity-text { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }

/* Message Cards */
.message-card { border: 1px solid var(--glass-border); border-radius: 13px; padding: 12px; margin-bottom: 12px; background: rgba(120,120,128,0.04); }
.message-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.message-channel-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.message-channel-badge.email { background: rgba(48,209,88,0.15); color: #34C759; }
.message-channel-badge.inmail { background: rgba(10,132,255,0.15); color: #007AFF; }
.message-channel-badge.linkedin { background: rgba(10,132,255,0.15); color: #007AFF; }
.message-body { font-size: 13px; color: var(--label-secondary); white-space: pre-wrap; max-height: 200px; overflow-y: auto; }

/* ── Responsive: Modal tabs on mobile ── */
@media (max-width: 768px) {
    .modal-tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .modal-tab { padding: 8px 14px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
    .modal-profile-header { gap: 12px; }
    .modal-profile-avatar { width: 48px; height: 48px; font-size: 18px; }
    .modal-profile-info h2 { font-size: 16px; }
    .modal-actions-row { gap: 6px; }
    .modal-action-btn { padding: 5px 10px; font-size: 11px; }
    .score-dimension-label { width: 90px; font-size: 11px; }
}

/* Intel Blocks */
.intel-block { background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 13px; padding: 12px; margin-bottom: 10px; }
.intel-block-title { font-size: 12px; font-weight: 700; color: #DD9058; text-transform: uppercase; margin-bottom: 4px; }
.intel-block-text { font-size: 13px; color: var(--label-secondary); line-height: 1.5; }

/* HubSpot Activity Link */
.hubspot-activity-link { margin-bottom: 16px; }
.hubspot-note { font-size: 12px; color: var(--label-tertiary); margin-top: 6px; }

/* Generate Message Bar */
.generate-msg-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px; background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 13px; }
.generate-hint { font-size: 12px; color: var(--label-secondary); }

/* KB Email Templates */
.kb-templates-header h3 { color: var(--label-primary); font-size: 16px; margin-bottom: 8px; }
.kb-template-stats { display: flex; gap: 16px; margin-bottom: 16px; }
.kb-template-stats span { font-size: 13px; color: var(--label-secondary); background: var(--glass-surface); border: 1px solid var(--glass-border); padding: 4px 10px; border-radius: 4px; }
.kb-section-title { font-size: 13px; font-weight: 700; color: #DD9058; text-transform: uppercase; margin: 16px 0 8px; }
.kb-template-card { border: 1px solid var(--glass-border); border-radius: 13px; padding: 10px; margin-bottom: 8px; background: var(--glass-surface); }
.kb-template-card.replied { border-left: 3px solid #34C759; }
.kb-template-card.opened { border-left: 3px solid #FF9500; }
.kb-template-meta { font-size: 11px; color: var(--label-secondary); margin-bottom: 4px; }
.kb-template-subject { font-size: 13px; font-weight: 600; color: var(--label-primary); margin-bottom: 4px; }
.kb-template-body { font-size: 12px; color: var(--label-secondary); white-space: pre-wrap; max-height: 100px; overflow-y: auto; }

/* ========== SOCIAL MEDIA REDESIGN ========== */

/* Pill tabs */
.social-pill-tabs { display:flex; gap:4px; }
.social-pills { display:flex; gap:4px; margin-bottom:16px; padding:0 24px; }
.social-pill { padding:8px 20px; border-radius:20px; background:var(--glass-surface); border:1px solid var(--glass-border); font-size:12px; font-weight:600; cursor:pointer; color:var(--label-secondary); transition:all 0.15s; }
.social-pill:hover { background:var(--glass-surface-hover); border-color:rgba(0,0,0,0.08); color:var(--label-primary); }
.social-pill.active { background:#007AFF; color:#fff; border-color:#007AFF; }

/* Summary stats bar */
.social-summary-bar { display:flex; gap:12px; padding:0 24px 16px; flex-wrap:wrap; }
.social-summary-stat { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:12px 18px; min-width:140px; text-align:center; }
.social-summary-stat .ss-value { font-size:22px; font-weight:700; color:var(--label-primary); }
.social-summary-stat .ss-label { font-size:11px; color:var(--label-secondary); margin-top:2px; }

/* Threat badges */
.threat-badge { display:inline-block; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.threat-high { background:rgba(255,69,58,0.15); color:#FF3B30; animation:threat-pulse 2s infinite; }
.threat-medium { background:rgba(255,159,10,0.15); color:#FF9500; }
.threat-low { background:rgba(48,209,88,0.15); color:#34C759; }
@keyframes threat-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,69,58,0.3); } 50% { box-shadow:0 0 0 6px rgba(255,69,58,0); } }

/* Threat distribution row */
.threat-dist-row { display:flex; gap:12px; padding:0 24px 12px; }
.threat-dist-item { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--label-primary); }
.threat-dist-dot { width:12px; height:12px; border-radius:50%; }
.threat-dist-dot.high { background:#FF3B30; }
.threat-dist-dot.medium { background:#FF9500; }
.threat-dist-dot.low { background:#34C759; }

/* Follower comparison chart */
.follower-chart { padding:0 24px 20px; }
.follower-chart h4 { font-size:13px; font-weight:600; margin-bottom:10px; color:var(--label-primary); }
.follower-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.follower-label { width:120px; font-size:12px; font-weight:500; color:var(--label-secondary); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.follower-track { flex:1; height:20px; background:var(--glass-surface); border-radius:4px; overflow:hidden; position:relative; }
.follower-fill { height:100%; border-radius:4px; transition:width 0.6s ease; min-width:2px; }
.follower-fill.cookiy { background:linear-gradient(90deg,#DD9058,#FF9500); }
.follower-fill.competitor { background:linear-gradient(90deg,#007AFF,#5AC8FA); }
.follower-value { width:70px; font-size:11px; color:var(--label-secondary); text-align:right; }

/* Enhanced competitor cards */
.comp-card { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:16px; box-shadow:var(--glass-shadow); }
.comp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.comp-header strong { font-size:15px; color:var(--label-primary); }
.comp-stats { display:flex; gap:16px; font-size:12px; color:var(--label-secondary); margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--system-separator); flex-wrap:wrap; }
.comp-stats span { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.comp-themes { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.comp-theme-pill { background:var(--system-fill-quaternary); padding:2px 8px; border-radius:10px; font-size:10px; color:var(--label-secondary); }
.comp-observations { background:rgba(255,214,10,0.08); border:1px solid rgba(255,214,10,0.20); border-radius:10px; padding:8px 10px; font-size:12px; color:#FFCC00; margin-top:10px; }
.comp-post { padding:8px 0; border-top:1px solid rgba(84,84,88,0.65); }
.comp-post-date { font-size:11px; color:var(--label-secondary); }
.comp-post-summary { font-size:12px; color:var(--label-primary); margin-top:2px; }
.comp-post-engagement { display:flex; gap:8px; margin-top:4px; }
.comp-eng-bar { height:6px; border-radius:3px; background:var(--system-fill-quaternary); flex:1; max-width:80px; overflow:hidden; }
.comp-eng-fill { height:100%; border-radius:3px; }
.comp-eng-fill.likes { background:#007AFF; }
.comp-eng-fill.comments { background:#5856D6; }
.comp-eng-label { font-size:10px; color:var(--label-secondary); }

/* Rep audit redesign */
.rep-overview { display:flex; gap:12px; padding:0 24px 16px; flex-wrap:wrap; color:var(--label-primary); }
.rep-overview-card { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:14px 20px; text-align:center; min-width:140px; }
.rep-overview-card .ro-value { font-size:26px; font-weight:700; color:var(--label-primary); }
.rep-overview-card .ro-label { font-size:11px; color:var(--label-secondary); margin-top:2px; }
.rep-overview-card .ro-name { font-size:12px; color:var(--label-secondary); font-weight:500; }

/* Rubric panel */
.rubric-toggle { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:10px 16px; margin:0 24px 16px; cursor:pointer; font-size:13px; font-weight:600; color:var(--label-secondary); display:flex; align-items:center; gap:8px; }
.rubric-toggle:hover { background:var(--glass-surface-hover); color:var(--label-primary); }
.rubric-panel { display:none; margin:0 24px 16px; background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:16px; }
.rubric-panel.open { display:block; }
.rubric-dim { margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--system-separator); }
.rubric-dim:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.rubric-dim-name { font-size:13px; font-weight:700; color:var(--label-primary); margin-bottom:4px; }
.rubric-dim-desc { font-size:11px; color:var(--label-secondary); margin-bottom:6px; }
.rubric-criteria { font-size:12px; color:var(--label-secondary); }
.rubric-criteria li { margin-bottom:2px; }
.rubric-pts { color:#DD9058; font-weight:600; }

/* Rep card redesign */
.rep-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); gap:16px; padding:16px 24px; }
.rep-card { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:18px; border-left:4px solid rgba(0,0,0,0.08); box-shadow:var(--glass-shadow); }
.rep-card.tier-green { border-left-color:#34C759; }
.rep-card.tier-yellow { border-left-color:#FF9500; }
.rep-card.tier-red { border-left-color:#FF3B30; }
.rep-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.rep-card-info h4 { font-size:15px; font-weight:700; margin-bottom:2px; color:var(--label-primary); }
.rep-card-info .rep-role { font-size:12px; color:var(--label-secondary); }
.rep-score-circle { width:56px; height:56px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; border:3px solid; }
.rep-score-circle .score-num { font-size:18px; line-height:1; }
.rep-score-circle .score-grade { font-size:10px; }
.rep-key-issue { background:rgba(255,69,58,0.10); border:1px solid rgba(255,69,58,0.20); border-radius:6px; padding:8px 10px; font-size:12px; color:#FF3B30; margin-bottom:12px; }

/* Dimension bars */
.dim-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor:pointer; }
.dim-row:hover .dim-label { color:#007AFF; }
.dim-label { width:130px; font-size:11px; font-weight:500; color:var(--label-secondary); white-space:nowrap; }
.dim-track { flex:1; height:10px; background:var(--system-fill-quaternary); border-radius:5px; position:relative; overflow:visible; }
.dim-fill { height:100%; border-radius:5px; transition:width 0.4s; }
.dim-avg-tick { position:absolute; width:2px; height:16px; top:-3px; background:rgba(0,0,0,0.20); border-radius:1px; opacity:0.6; }
.dim-value { width:42px; font-size:11px; text-align:right; color:var(--label-secondary); font-weight:600; }
.dim-rubric-expand { display:none; margin:-4px 0 8px 138px; background:rgba(120,120,128,0.04); border:1px solid var(--glass-border); border-radius:6px; padding:8px 10px; font-size:11px; color:var(--label-secondary); }
.dim-rubric-expand.open { display:block; }

/* Rep recommendations */
.rep-recs { margin-top:12px; }
.rep-recs h5 { font-size:12px; font-weight:600; color:var(--label-primary); margin-bottom:6px; }
.rep-recs ol { margin:0 0 0 16px; padding:0; }
.rep-recs li { font-size:11px; color:var(--label-secondary); margin-bottom:4px; }
.rep-linkedin-link { display:inline-block; margin-top:8px; font-size:11px; color:#007AFF; text-decoration:none; font-weight:500; }
.rep-linkedin-link:hover { text-decoration:underline; }

/* Trends timeline */
.trend-item { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:16px; margin-bottom:10px; margin:0 24px 10px; }
.trend-item.critical { border-left:4px solid #FF3B30; animation:threat-pulse 2s infinite; }
.trend-item.high { border-left:4px solid #FF9500; }
.trend-item.medium { border-left:4px solid #007AFF; }
.trend-item.low { border-left:4px solid #8E8E93; }
.trend-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.trend-title { font-size:14px; font-weight:700; color:var(--label-primary); }
.trend-date { font-size:11px; color:var(--label-tertiary); }
.trend-summary { font-size:13px; color:var(--label-secondary); line-height:1.5; margin-bottom:8px; }
.trend-competitors { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.trend-comp-pill { background:rgba(10,132,255,0.12); color:#007AFF; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:500; }
.trend-actions { background:rgba(48,209,88,0.10); border:1px solid rgba(48,209,88,0.20); border-radius:6px; padding:8px 10px; font-size:12px; color:#34C759; }
.trend-relevance-badge { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.trend-relevance-badge.critical { background:rgba(255,69,58,0.15); color:#FF3B30; }
.trend-relevance-badge.high { background:rgba(255,159,10,0.15); color:#FF9500; }
.trend-relevance-badge.medium { background:rgba(10,132,255,0.15); color:#007AFF; }
.trend-relevance-badge.low { background:var(--system-fill-quaternary); color:var(--label-secondary); }

/* ── Competitor action bar ───────────────────────────────────────────────── */
.comp-action-bar { display:flex; gap:8px; padding:0 4px 12px; flex-wrap:wrap; }
.comp-action-btn { padding:7px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; border:none; transition:opacity 0.15s; }
.comp-action-btn.suggest { background:#007AFF; color:#fff; }
.comp-action-btn.refresh { background:var(--glass-surface); color:var(--label-secondary); border:1px solid var(--glass-border); }
.comp-action-btn:hover { opacity:0.85; }
.comp-action-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Pending badge */
.pending-badge { background:rgba(255,159,10,0.15); color:#FF9500; border:1px solid rgba(255,159,10,0.25); padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }

/* Pending competitor card */
.comp-card-pending { border-style:dashed; opacity:0.8; }
.rep-card.tier-pending { border-left-color:#FF9500; }

/* Post details */
.comp-post-body { margin:4px 0; }
.comp-post-text { font-size:12px; color:var(--label-secondary); line-height:1.5; }
.comp-post-toggle { font-size:11px; color:#007AFF; cursor:pointer; font-weight:500; display:inline-block; margin-top:2px; }
.comp-post-screenshot { display:block; width:100%; max-height:200px; object-fit:cover; border-radius:6px; margin-top:6px; border:1px solid var(--glass-border); }
.comp-post-footer { display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px; }
.comp-post-link { font-size:11px; color:#007AFF; text-decoration:none; font-weight:500; white-space:nowrap; }
.comp-post-link:hover { text-decoration:underline; }

/* Suggest competitors modal */
.suggest-item { padding:14px; border-bottom:1px solid var(--glass-border); }
.suggest-item:last-child { border-bottom:none; }
.suggest-name { font-size:14px; margin-bottom:4px; color:var(--label-primary); }
.suggest-category { font-size:11px; color:var(--label-tertiary); font-weight:400; margin-left:6px; }
.suggest-desc { font-size:12px; color:var(--label-secondary); margin-bottom:4px; }
.suggest-why { font-size:11px; color:#FF9500; background:rgba(255,159,10,0.10); padding:4px 8px; border-radius:4px; margin-bottom:8px; }
.suggest-actions { display:flex; gap:8px; align-items:center; }
.suggest-accept-btn { background:rgba(48,209,88,0.15); color:#34C759; border:1px solid rgba(48,209,88,0.25); padding:6px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.suggest-reject-btn { background:rgba(255,69,58,0.15); color:#FF3B30; border:1px solid rgba(255,69,58,0.25); padding:6px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.suggest-accept-btn:hover { opacity:0.85; }
.suggest-reject-btn:hover { opacity:0.85; }

/* ══════════════════════════════════════════════════════════
   EVENT ROUTE PLANNER
══════════════════════════════════════════════════════════ */

.rp-modal-header { margin-bottom:20px; }
.rp-modal-header h2 { font-size:18px; font-weight:700; color:var(--label-primary); margin-bottom:4px; }
.rp-modal-subtitle { font-size:13px; color:var(--label-tertiary); }

.rp-section { margin-bottom:18px; }
.rp-section-title { font-size:13px; font-weight:700; color:var(--label-primary); margin-bottom:6px; }
.rp-section-hint { font-size:11px; color:var(--label-tertiary); font-weight:400; }

.rp-selected-events { display:flex; flex-wrap:wrap; gap:8px; }
.rp-event-chip {
    display:flex; flex-direction:column; gap:2px;
    background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:8px;
    padding:7px 10px; font-size:12px; min-width:160px; max-width:220px;
    position:relative; color:var(--label-primary);
}
.rp-chip-remove {
    position:absolute; top:4px; right:7px; cursor:pointer;
    color:var(--label-tertiary); font-size:15px; line-height:1;
}
.rp-chip-remove:hover { color:#FF3B30; }
.rp-chip-meta { font-size:11px; color:var(--label-tertiary); margin-top:2px; }
.rp-empty-hint { font-size:12px; color:var(--label-tertiary); font-style:italic; padding:8px 0; }

.rp-textarea {
    width:100%; min-height:110px; padding:10px; border:1px solid var(--glass-border);
    border-radius:8px; font-size:12px; font-family:inherit; resize:vertical;
    background:var(--glass-surface); color:var(--label-primary); line-height:1.6;
}
.rp-textarea-sm { min-height:64px; }
.rp-textarea:focus { outline:none; border-color:rgba(10,132,255,0.50); box-shadow:0 0 0 2px rgba(10,132,255,0.15); }

.rp-actions { display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.rp-submit-btn {
    background:#007AFF; color:#fff; border:none; padding:10px 22px;
    border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
    transition:opacity 0.15s;
}
.rp-submit-btn:hover { opacity:0.88; }
.rp-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }
.rp-cancel-btn {
    background:transparent; color:var(--label-secondary); border:1px solid var(--glass-border); padding:9px 18px;
    border-radius:8px; font-size:13px; cursor:pointer;
}
.rp-cancel-btn:hover { background:var(--glass-surface); }

/* Loading */
.rp-loading { display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px; color:var(--label-secondary); font-size:13px; }
.rp-spinner {
    width:28px; height:28px; border:3px solid rgba(0,0,0,0.08); border-top-color:#007AFF;
    border-radius:50%; animation:spin 0.75s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.rp-error { background:rgba(255,69,58,0.12); border:1px solid rgba(255,69,58,0.25); color:#FF3B30; padding:12px 16px; border-radius:10px; font-size:13px; }

/* Result container */
.rp-result-container { background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:13px; padding:20px; backdrop-filter:blur(20px); }
.rp-result-title { font-size:15px; font-weight:700; color:var(--label-primary); margin-bottom:12px; }
.rp-result-section-title { font-size:12px; font-weight:700; color:var(--label-tertiary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; }
.rp-result-stats { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.rp-stat { background:var(--glass-surface); border-radius:8px; padding:6px 12px; font-size:12px; color:var(--label-secondary); border:1px solid var(--glass-border); }
.rp-stat strong { color:var(--label-primary); }

/* Timeline */
.rp-timeline { display:flex; flex-direction:column; gap:0; margin-bottom:24px; }
.rp-timeline-stop { display:flex; align-items:flex-start; gap:0; position:relative; }
.rp-timeline-dot {
    width:26px; height:26px; min-width:26px; border-radius:50%; background:#007AFF;
    color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center;
    justify-content:center; z-index:1; margin-right:12px; flex-shrink:0;
}
.rp-timeline-dot.dot-cluster { background:#DD9058; }
.rp-timeline-line {
    position:absolute; left:13px; top:26px; width:2px;
    height:calc(100% - 6px); background:var(--glass-surface-hover); z-index:0;
}
.rp-timeline-content { padding:0 0 20px; flex:1; }
.rp-stop-date { font-size:11px; color:var(--label-tertiary); margin-bottom:2px; }
.rp-stop-name { font-size:13px; font-weight:700; color:var(--label-primary); margin-bottom:3px; }
.rp-stop-location { font-size:12px; color:var(--label-secondary); margin-bottom:3px; }
.rp-stop-rep { font-size:12px; color:#007AFF; font-weight:600; margin-bottom:2px; }
.rp-stop-travel { font-size:11px; color:var(--label-tertiary); font-style:italic; margin-bottom:2px; }
.rp-cluster-note { font-size:11px; color:#DD9058; margin-top:3px; }

/* Rep table */
.rp-rep-table-wrap { margin-bottom:20px; }
.rp-rep-table { width:100%; border-collapse:collapse; font-size:12px; }
.rp-rep-table th { text-align:left; padding:6px 10px; border-bottom:2px solid var(--system-separator); font-weight:700; color:var(--label-secondary); }
.rp-rep-table td { padding:7px 10px; border-bottom:1px solid var(--system-separator); color:var(--label-primary); vertical-align:top; }
.rp-event-tag { background:rgba(10,132,255,0.12); color:#007AFF; border-radius:6px; padding:2px 6px; font-size:11px; display:inline-block; margin:2px 2px 0 0; }

/* Recommendations */
.rp-recommendations { margin-top:4px; }
.rp-rec-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.rp-rec-list li {
    font-size:12px; color:var(--label-secondary); background:rgba(255,159,10,0.08); border-left:3px solid #FF9500;
    padding:7px 10px; border-radius:4px;
}

/* ========== DRAG & DROP ========== */
.kanban-col-body.drag-over { border: 2px dashed rgba(10,132,255,0.50); background: rgba(10,132,255,0.06); border-radius: 8px; }
.lead-card.dragging { opacity: 0.4; }
.lead-card[draggable] { cursor: grab; }
.lead-card[draggable]:active { cursor: grabbing; }
.card-deal { font-size: 0.7rem; color: #34C759; font-weight: 600; margin-top: 3px; }
.card-next-action { font-size: 0.65rem; color: var(--label-tertiary); margin-top: 2px; }

/* ========== PIPELINE METRICS BAR ========== */
.metrics-bar { display: flex; gap: 12px; padding: 12px 16px; background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 13px; margin-bottom: 12px; backdrop-filter: blur(20px); }
.metric-item { flex: 1; text-align: center; }
.metric-val { font-size: 1.2rem; font-weight: 700; color: var(--label-primary); }
.metric-label { font-size: 0.65rem; color: var(--label-tertiary); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

/* ========== SAVED VIEWS BAR ========== */
.saved-views-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.saved-views-select { padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 6px; font-size: 0.8rem; font-family: inherit; background: var(--glass-surface); color: var(--label-primary); }
.btn-save-view { padding: 5px 12px; background: #007AFF; color: #fff; border: none; border-radius: 6px; font-size: 0.75rem; cursor: pointer; font-family: inherit; }
.btn-save-view:hover { opacity: 0.85; }

/* ========== ACTIVITY FEED ========== */
.activity-feed-panel { background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 13px; padding: 12px 16px; margin-top: 12px; max-height: 320px; overflow-y: auto; backdrop-filter: blur(20px); }
.activity-feed-title { font-size: 0.85rem; font-weight: 700; color: var(--label-primary); margin-bottom: 8px; }
.activity-feed-list { display: flex; flex-direction: column; gap: 6px; }
.activity-feed-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--glass-border); }
.activity-feed-item:last-child { border-bottom: none; }
.activity-icon { font-size: 0.85rem; color: #007AFF; min-width: 18px; text-align: center; margin-top: 2px; }
.activity-detail { flex: 1; min-width: 0; }
.activity-lead { font-size: 0.75rem; font-weight: 600; color: var(--label-primary); }
.activity-company { font-size: 0.7rem; color: var(--label-tertiary); }
.activity-desc { font-size: 0.7rem; color: var(--label-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-date { font-size: 0.65rem; color: var(--label-tertiary); white-space: nowrap; margin-top: 2px; }

/* ========== SEQUENCES TAB ========== */
#sequences-view { background: var(--system-bg-secondary); min-height: 100%; }
#seq-modal-overlay, #enroll-modal-overlay, #gmail-wizard-overlay { display: none; }

/* ══════════════════════════════════════════
   Learning Vault — KB Tab Section
   ══════════════════════════════════════════ */

.vault-section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.vault-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.vault-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--label-primary);
  margin: 0 0 4px 0;
  letter-spacing: -0.2px;
}

.vault-subtitle {
  font-size: 12px;
  color: var(--label-secondary);
  display: block;
}

.vault-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  flex-shrink: 0;
}

.vault-stat {
  font-size: 12px;
  color: var(--label-secondary);
  font-weight: 500;
}

.vault-stat span {
  color: #DD9058;
  font-weight: 600;
}

.vault-stat-divider {
  color: var(--label-quaternary);
  font-size: 12px;
}

/* Agent Augmentation Cards */
.vault-agents {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.vault-agent-card {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}

.vault-agent-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--label-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vault-agent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #DD9058;
  box-shadow: 0 0 6px rgba(221,144,88,0.50);
  display: inline-block;
  flex-shrink: 0;
}

.vault-agent-rules {
  font-size: 20px;
  font-weight: 700;
  color: #DD9058;
  line-height: 1;
  margin-bottom: 2px;
}

.vault-agent-label {
  font-size: 10px;
  color: var(--label-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.vault-agent-augmented {
  font-size: 10px;
  color: var(--label-tertiary);
  margin-top: 6px;
}

/* Two-column layout */
.vault-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .vault-columns { grid-template-columns: 1fr; }
}

.vault-col {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}

.vault-col-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--label-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 14px;
  background: rgba(120,120,128,0.04);
  border-bottom: 1px solid var(--glass-border);
}

.vault-list {
  padding: 0;
}

/* Mistake rows */
.vault-mistake-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: start;
  font-size: 12px;
}

.vault-mistake-row:last-child { border-bottom: none; }

.vault-severity {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vault-severity.critical { background: rgba(255,69,58,0.15); color: #FF3B30; }
.vault-severity.high     { background: rgba(255,159,10,0.15);  color: #FF9500; }
.vault-severity.medium   { background: rgba(255,214,10,0.12);  color: #FFCC00; }
.vault-severity.low      { background: rgba(48,209,88,0.12); color: #34C759; }

.vault-mistake-agent {
  font-size: 10px;
  color: #DD9058;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.vault-mistake-text {
  color: var(--label-primary);
  line-height: 1.4;
  font-size: 12px;
}

.vault-mistake-date {
  font-size: 10px;
  color: var(--label-tertiary);
  white-space: nowrap;
}

/* Rule rows */
.vault-rule-row {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 12px;
}

.vault-rule-row:last-child { border-bottom: none; }

.vault-rule-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.vault-rule-agent-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(221,144,88,0.10);
  border: 1px solid rgba(221,144,88,0.20);
  color: #DD9058;
  font-weight: 600;
}

.vault-rule-type-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
  color: #6E6E73;
}

.vault-rule-applied {
  margin-left: auto;
  font-size: 10px;
  color: #AEAEB2;
}

.vault-rule-text {
  color: #1D1D1F;
  line-height: 1.4;
  font-size: 12px;
}

.vault-empty {
  padding: 20px 14px;
  color: #AEAEB2;
  font-size: 12px;
  text-align: center;
}

.vault-loading {
  padding: 20px 14px;
  color: #AEAEB2;
  font-size: 12px;
  text-align: center;
  font-style: italic;
}

/* Theme toggle and light mode overrides removed — light-only mode */