* {margin: 0; padding: 0; box-sizing: border-box;}


        
:root {
    --primary: #1ba8af; --primary-dark: #148a90; --secondary: #0d5c6a;
    --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6;
    --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6;
    --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af;
    --border: #e5e7eb; --shadow: rgba(0, 0, 0, 0.1); --sidebar-width: 190px;
    --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
}

[data-theme="dark"] {
    --primary: #1ba8af; --primary-dark: #22c4cc; --secondary: #148a90;
    --success: #34d399; --danger: #f87171; --warning: #fbbf24; --info: #60a5fa;
    --bg-primary: #0a0a0a; --bg-secondary: #1a1a1a; --bg-tertiary: #2a2a2a;
    --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5); --border: #333; --shadow: rgba(0, 0, 0, 0.5);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-secondary); color: var(--text-primary);
    line-height: 1.4; font-size: 14px; font-weight: var(--font-regular);
    transition: background-color 0.3s, color 0.3s;
}

.app-loader {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.5rem;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

[data-theme="dark"] .app-loader {
    background: rgba(10, 10, 10, 0.85);
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loader-logo {
    font-size: 2rem; font-weight: 800;
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; letter-spacing: -0.5px;
}

.app-loader-spinner {
    width: 48px; height: 48px;
    border: 4px solid rgba(27, 168, 175, 0.2);
    border-top-color: #1ba8af;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.app-loader-text {
    font-size: 0.85rem; font-weight: 500;
    color: var(--text-secondary);
    animation: pulse-text 1.5s ease-in-out infinite;
}


* {transition: background-color 0.3s, border-color 0.3s, color 0.3s;}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-bold); color: var(--text-primary);
    letter-spacing: -0.02em; line-height: 1.2;
}
h1 {font-size: 2rem;} h2 {font-size: 1.5rem;} h3 {font-size: 1.25rem;}
h4 {font-size: 1.1rem;} h5 {font-size: 1rem;} h6 {font-size: 0.9rem;}

.text-heading {font-weight: var(--font-bold); color: var(--text-primary);}
.text-subheading {font-weight: var(--font-semibold); color: var(--text-primary);}
.text-body {font-weight: var(--font-regular); color: var(--text-primary);}
.text-label {
    font-weight: var(--font-medium); color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem;
}
.text-caption {font-weight: var(--font-regular); color: var(--text-tertiary); font-size: 0.8rem;}
.text-primary-color {color: var(--text-primary);}
.text-secondary-color {color: var(--text-secondary);}
.text-tertiary-color {color: var(--text-tertiary);}

.btn-view-all-notes {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border: none; padding: 0.5rem 1rem; border-radius: 8px;
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s;
    white-space: nowrap; box-shadow: 0 2px 8px rgba(27, 168, 175, 0.3);
}

.consolidated-meeting-block {
    background: var(--bg-secondary); border-radius: 12px; padding: 1.5rem;
    margin-bottom: 1.5rem; border-left: 4px solid #667eea;
}
.consolidated-meeting-header {margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border);}
.consolidated-meeting-title {font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem;}
.consolidated-meeting-meta {display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary);}
.consolidated-meeting-meta-item {display: flex; align-items: center; gap: 0.35rem;}
.consolidated-meeting-notes {
    font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap;
    color: var(--text-primary); margin-bottom: 1rem;
}
.consolidated-meeting-nextsteps, .consolidated-meeting-participants {
    background: var(--bg-tertiary); padding: 1rem; border-radius: 8px; margin-top: 1rem;
}
.consolidated-meeting-nextsteps-title, .consolidated-meeting-participants-title {
    font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; margin-bottom: 0.5rem;
}
.consolidated-meeting-nextsteps-content {font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap;}
.consolidated-participant-item {
    font-size: 0.85rem; margin-bottom: 0.5rem; padding: 0.5rem;
    background: var(--bg-primary); border-radius: 6px;
}
.consolidated-participant-name {font-weight: 600; margin-bottom: 0.25rem;}
.consolidated-participant-details {font-size: 0.75rem; color: var(--text-secondary);}

.upcoming-meetings-section {
    display: none; background: var(--bg-primary); border-radius: 12px;
    padding: 1rem; box-shadow: 0 1px 4px var(--shadow); margin-bottom: 1rem;
}
.upcoming-meetings-section.active {display: block;}
.upcoming-meetings-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
.upcoming-meetings-title {font-size: 1.1rem; font-weight: var(--font-bold); display: flex; align-items: center; gap: 0.5rem;}
.upcoming-meetings-filters {display: flex; gap: 0.35rem;}
.upcoming-filter-btn {
    padding: 0.35rem 0.75rem; border: 1px solid var(--border); background: transparent;
    color: var(--text-secondary); border-radius: 6px; cursor: pointer;
    font-size: 0.75rem; transition: all 0.2s; font-weight: 600;
}
.upcoming-filter-btn:hover {background: var(--bg-secondary);}
.upcoming-filter-btn.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747;
}
.upcoming-meetings-list {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 500px; overflow-y: auto; overflow-x: hidden;
}
.upcoming-meeting-row {
    display: grid; grid-template-columns: 80px 1fr auto;
    align-items: center; gap: 1rem; padding: 0.75rem;
    background: var(--bg-secondary); border-radius: 8px;
    transition: all 0.2s; cursor: pointer; border-left: 3px solid transparent;
}
.upcoming-meeting-row:hover {
    background: var(--bg-tertiary); transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}
.upcoming-meeting-row.today {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), var(--bg-secondary));
}
.upcoming-meeting-row.soon {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), var(--bg-secondary));
}
.upcoming-meeting-row.upcoming {border-left-color: #10b981;}
.upcoming-meeting-row.starting-soon {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), var(--bg-secondary));
    animation: pulse-starting 2s infinite;
}
.upcoming-meeting-row.happening-now {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), var(--bg-secondary));
    animation: pulse-happening 1.5s infinite;
}
.upcoming-meeting-row.just-finished {
    border-left-color: #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), var(--bg-secondary));
}

@keyframes pulse-starting {
    0%, 100% {box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); transform: translateX(0);}
    50% {box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); transform: translateX(2px);}
}
@keyframes pulse-happening {
    0%, 100% {box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); transform: translateX(0);}
    50% {box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); transform: translateX(4px);}
}
@keyframes pulse-glow {
    0%, 100% {box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);}
    50% {box-shadow: 0 0 16px rgba(239, 68, 68, 0.8);}
}
@keyframes pulse-glow-orange {
    0%, 100% {box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);}
    50% {box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);}
}
@keyframes pulse-glow-red {
    0%, 100% {box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);}
    50% {box-shadow: 0 0 24px rgba(239, 68, 68, 0.9);}
}

.upcoming-meeting-date {
    padding: 0.2rem 0.1rem; border-radius: 10px; text-align: center;
    font-weight: 700; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.upcoming-meeting-date.today {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white; animation: pulse-glow 2s infinite;
}
.upcoming-meeting-date.soon {background: linear-gradient(135deg, #f59e0b, #d97706); color: white;}
.upcoming-meeting-date.upcoming {background: linear-gradient(135deg, #10b981, #059669); color: white;}
.upcoming-meeting-date.starting-soon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white; animation: pulse-glow-orange 2s infinite;
}
.upcoming-meeting-date.happening-now {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white; animation: pulse-glow-red 1.5s infinite;
}
.upcoming-meeting-date.just-finished {background: linear-gradient(135deg, #10b981, #059669); color: white;}

.upcoming-date-day {
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; opacity: 0.9; padding: 0.1rem 0.75rem;
}
.upcoming-date-date {font-size: 0.75rem; font-weight: 700; margin-top: 0.15rem; padding: 0.1rem 0.75rem;}
.upcoming-meeting-details {flex: 1; min-width: 0;}
.upcoming-meeting-time-title {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.35rem; flex-wrap: wrap;
}
.upcoming-meeting-time {font-weight: 700; font-size: 0.85rem; color: var(--text-primary);}
.upcoming-meeting-title {font-size: 0.9rem; font-weight: 600; color: var(--text-primary);}
.upcoming-meeting-meta {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.75rem; color: var(--text-secondary); flex-wrap: wrap;
}
.upcoming-meeting-meta-item {display: flex; align-items: center; gap: 0.25rem;}
.upcoming-prep-status {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 600;
}
.upcoming-prep-status.none {background: rgba(239, 68, 68, 0.15); color: #ef4444;}
.upcoming-prep-status.ready {background: rgba(16, 185, 129, 0.15); color: #10b981;}
.upcoming-meeting-actions {display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s;}
.upcoming-meeting-row:hover .upcoming-meeting-actions {opacity: 1;}
.upcoming-action-btn {
    background: var(--bg-tertiary); border: none; color: var(--text-primary);
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.upcoming-action-btn:hover {background: var(--primary); color: white; transform: scale(1.05);}
.upcoming-action-btn.delete:hover {background: var(--danger);}
.upcoming-action-btn svg {width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;}
.upcoming-meetings-empty {text-align: center; padding: 1rem; color: var(--text-secondary);}
.upcoming-empty-icon {font-size: 1.5rem; margin-bottom: 0.35rem; opacity: 0.5;}
.upcoming-empty-text {margin-bottom: 0.75rem; font-size: 0.85rem;}

.upcoming-meeting-status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.upcoming-meeting-status.starting-soon {
    background: rgba(245, 158, 11, 0.2); color: #f59e0b; animation: pulse-text 2s infinite;
}
.upcoming-meeting-status.happening-now {
    background: rgba(239, 68, 68, 0.2); color: #ef4444; animation: pulse-text 1.5s infinite;
}
.upcoming-meeting-status.just-finished {background: rgba(16, 185, 129, 0.2); color: #10b981;}

@keyframes pulse-text {
    0%, 100% {opacity: 1;}
    50% {opacity: 0.7;}
}

.meeting-highlight-flash {animation: highlightFlash 3s ease-out;}
@keyframes highlightFlash {
    0% {box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); background: rgba(16, 185, 129, 0.2);}
    50% {box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); background: rgba(16, 185, 129, 0.15);}
    100% {box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); background: var(--bg-secondary);}
}

.btn-schedule-meeting {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 8px;
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
    transition: all 0.2s; white-space: nowrap;
}

.customer-activity-section,
.all-customers-section {
    display: none;
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 4px var(--shadow);
    margin-bottom: 1rem;
    position: relative;
    /* Enable resize functionality */
    resize: vertical;
    overflow: hidden;  /* Changed from 'auto' to 'hidden' - prevents outer scrollbar */
    min-height: 150px;
    height: 350px; /* Default height for proper inner scroll calculation */
}

.customer-activity-section::after,
.all-customers-section::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 0 0 10px 10px;
    border-color: transparent transparent var(--text-tertiary) transparent;
    opacity: 0.4;
}

.customer-activity-section.active,
.all-customers-section.active {
    display: block;
}

.customer-activity-section .activity-list {
    max-height: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
}

.all-customers-section .customers-list {
    height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden;
}

.customer-activity-section.active,
.all-customers-section.active { display: block; }
.customer-activity-section .activity-list { max-height: calc(100% - 20px); overflow-y: auto; }



.activity-list {margin-top: 0.75rem; overflow-y: auto;}
.activity-header-row {
    display: grid; grid-template-columns: 20px 1fr 1fr 1fr 1fr 40px;
    align-items: center; gap: 1rem; padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem; border-bottom: 2px solid var(--border);
    position: sticky; top: 0; background: var(--bg-primary); z-index: 10;
}
.activity-header-cell {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-secondary);
}
.activity-header-cell.right {text-align: right;}
.activity-row {
    display: grid; grid-template-columns: 20px 1fr 1fr 1fr 1fr 40px;
    align-items: center; gap: 1rem; padding: 0.65rem 0.75rem;
    background: var(--bg-secondary); border-radius: 8px; margin-bottom: 0.35rem;
    transition: all 0.2s; cursor: pointer; border-left: 3px solid transparent;
}
.activity-row:hover {
    background: var(--bg-tertiary); transform: translateX(4px);
    box-shadow: 0 2px 8px var(--shadow);
}

.activity-note-cell { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.activity-note-input { flex: 1; padding: 0.15rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.7rem; min-width: 0; resize: none; overflow: hidden; font-family: inherit; line-height: 1.4; height: 24px; min-height: 24px; }
.activity-note-input:focus { outline: none; border-color: var(--primary); }
.activity-note-input::placeholder { color: var(--text-tertiary); }
.activity-note-text { font-size: 0.75rem; color: var(--text-secondary); cursor: pointer; flex: 1; word-break: break-word; }
.activity-note-text:hover { color: var(--primary); }

.activity-row.recent {border-left-color: #10b981;}
.activity-row.recent:hover {background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), var(--bg-tertiary));}
.activity-row.warning {border-left-color: #f59e0b;}
.activity-row.warning:hover {background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), var(--bg-tertiary));}
.activity-row.overdue {border-left-color: #ef4444;}
.activity-row.overdue:hover {background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), var(--bg-tertiary));}

.activity-status-dot {width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;}
.activity-status-dot.recent {background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);}
.activity-status-dot.warning {background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);}
.activity-status-dot.overdue {
    background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    animation: pulse-red 2s infinite;
}

.customer-row {
    display: grid; grid-template-columns: 20px 1.5fr 1fr 1.5fr 0.8fr 40px;
    align-items: center; gap: 1rem; padding: 0.65rem 0.75rem;
    background: var(--bg-secondary); border-radius: 8px; margin-bottom: 0.35rem;
    transition: all 0.2s; cursor: pointer; border-left: 3px solid transparent;
}
.customer-row:hover {
    background: var(--bg-tertiary); transform: translateX(4px);
    box-shadow: 0 2px 8px var(--shadow); border-left-color: var(--primary);
}
.customer-row.pinned { border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.05); }
.customer-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; background: white; padding: 2px; }
.customer-name-cell { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.customer-name-cell .pin-star { font-size: 1rem; }
.customer-website-cell a { color: var(--primary); text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; gap: 0.25rem; }
.customer-website-cell a:hover { text-decoration: underline; }
.customer-address-cell { font-size: 0.8rem; color: var(--text-secondary); }
.customer-address-cell a { color: var(--text-secondary); text-decoration: none; display: flex; align-items: center; gap: 0.25rem; }
.customer-address-cell a:hover { color: var(--primary); }
.customer-industry-badge {
    padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600;
    background: var(--bg-tertiary); color: var(--text-secondary); text-align: center;
}
.customer-row-actions { display: flex; gap: 0.15rem; opacity: 0; transition: opacity 0.2s; justify-content: flex-end; }
.customer-row:hover .customer-row-actions { opacity: 1; }

@keyframes pulse-red {
    0%, 100% {opacity: 1;}
    50% {opacity: 0.6;}
}
@keyframes pulse {
    0%, 100% {transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);}
    50% {transform: scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);}
}

.customer-banner-detail {display: flex; align-items: center; gap: 0.5rem;}
.activity-customer {
    font-weight: 700; font-size: 0.9rem; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-meeting {
    font-size: 0.85rem; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-time {
    font-size: 0.85rem; color: var(--text-secondary);
    text-align: right; white-space: nowrap;
}
.activity-time.overdue {color: #ef4444; font-weight: 600;}
.activity-time.warning {color: #f59e0b; font-weight: 600;}
.activity-time.recent {color: #10b981; font-weight: 600;}
.activity-arrow {
    color: var(--text-secondary); font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.activity-row:hover .activity-arrow {color: var(--primary); transform: translateX(4px);}

.quick-add-contacts {
    background: var(--bg-tertiary); border-radius: 8px;
    padding: 0.75rem; margin-bottom: 1rem; display: none;
}
.quick-add-contacts.active {display: block;}
.quick-add-contacts-title {
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.quick-add-contacts-list {display: flex; flex-direction: column; gap: 0.35rem;}
.quick-add-contact-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem;
    background: var(--bg-primary); border-radius: 6px; cursor: pointer;
    transition: all 0.2s; border: 1px solid transparent;
}
.quick-add-contact-item:hover {
    border-color: var(--primary); transform: translateX(4px);
    background: var(--bg-secondary);
}
.quick-add-contact-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.quick-add-contact-info {flex: 1; min-width: 0;}
.quick-add-contact-name {font-size: 0.85rem; font-weight: 600; margin-bottom: 0.125rem;}
.quick-add-contact-details {
    font-size: 0.7rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quick-add-contact-icon {
    color: var(--primary); font-size: 1rem;
    opacity: 0; transition: opacity 0.2s;
}
.quick-add-contact-item:hover .quick-add-contact-icon {opacity: 1;}

.follow-up-meeting-item {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem;
    border: 2px solid var(--border); border-radius: 8px; margin-bottom: 0.5rem;
    cursor: pointer; transition: all 0.2s; background: var(--bg-primary);
}
.follow-up-meeting-item:hover {
    background: var(--bg-tertiary); border-color: var(--primary);
    transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow);
}
.follow-up-meeting-item.selected {
    background: linear-gradient(135deg, rgba(0, 206, 200, 0.1), rgba(0, 168, 163, 0.05));
    border-color: var(--primary); border-width: 2px;
}
.follow-up-meeting-item input[type="checkbox"] {
    margin-top: 0.25rem; cursor: pointer; width: 18px; height: 18px; flex-shrink: 0;
}
.follow-up-meeting-info {flex: 1; min-width: 0;}
.follow-up-meeting-title {
    font-weight: 600; color: var(--text-primary);
    margin-bottom: 0.25rem; font-size: 0.95rem;
}
.follow-up-meeting-meta {
    display: flex; gap: 1rem; font-size: 0.85rem;
    color: var(--text-secondary); margin-bottom: 0.25rem; flex-wrap: wrap;
}
.follow-up-meeting-preview {
    font-size: 0.85rem; color: var(--text-secondary); font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.follow-up-step h3 {font-size: 1.1rem; font-weight: 600;}
#followUpMeetingsList:empty::before {
    content: 'No meetings found'; display: block; text-align: center;
    padding: 2rem; color: var(--text-secondary); font-style: italic;
}
.follow-up-type-option input[type="radio"]:checked ~ div {color: var(--text-primary);}
.follow-up-type-option input[type="radio"]:not(:checked) ~ div {opacity: 0.6;}
.follow-up-type-option:has(input[type="radio"]:checked) {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(0, 206, 200, 0.1), rgba(0, 168, 163, 0.05)) !important;
}

.customer-profile-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;}
.customer-profile-section {
    background: var(--bg-secondary); padding: 1rem;
    border-radius: 8px; border-left: 3px solid var(--primary);
}
.customer-profile-section-title {
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; margin-bottom: 0.75rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.customer-info-item {
    display: flex; align-items: start; gap: 0.5rem;
    margin-bottom: 0.5rem; font-size: 0.85rem;
}
.customer-info-icon {
    color: var(--primary); font-size: 1rem;
    flex-shrink: 0; margin-top: 0.1rem;
}
.customer-info-content {flex: 1;}
.customer-info-label {
    font-size: 0.7rem; color: var(--text-secondary); font-weight: 600;
    text-transform: uppercase; margin-bottom: 0.15rem;
}
.customer-info-value {color: var(--text-primary); word-break: break-word;}
.customer-info-value a {color: var(--primary); text-decoration: none;}
.customer-info-value a:hover {text-decoration: underline;}

.customer-header-banner {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    padding: 1.5rem; border-radius: 12px; margin-top: 1.5rem; margin-bottom: 1rem;
    display: none; box-shadow: 0 4px 12px rgba(27, 168, 175, 0.3);
}
.customer-header-banner.active {display: flex; flex-direction: column;}
.customer-banner-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 2rem; margin-bottom: 0.25rem; width: 100%;
}
.customer-header-left {display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0;}
.customer-header-icon {
    font-size: 3rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; width: 56px; height: 56px;
}
.customer-header-icon img {box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s;}
.customer-header-icon img:hover {transform: scale(1.05);}
.customer-header-info {flex: 1; min-width: 0;}
.customer-header-title {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.25rem;
}
.customer-header-name {
    font-size: 1.75rem; font-weight: var(--font-bold);
    color: white; margin-bottom: 0; line-height: 1.2; letter-spacing: -0.02em;
}
.customer-header-name {
    cursor: pointer;
    transition: opacity 0.2s;
}

.customer-header-name:hover {
    opacity: 0.9;
    text-decoration: underline;
}
.customer-header-company {
    font-size: 0.9rem; color: rgba(255, 255, 255, 0.9);
    display: flex; align-items: center; gap: 0.5rem;
}
.customer-header-actions {display: flex; gap: 0.5rem; align-items: flex-start; flex-shrink: 0;}
.customer-header-btn {
    background: rgba(255, 255, 255, 0.2); border: none; color: white;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    font-size: 1.1rem; display: flex; align-items: center;
    justify-content: center; transition: all 0.2s; flex-shrink: 0;
}
.customer-header-btn:hover {background: rgba(255, 255, 255, 0.3); transform: scale(1.05);}
.customer-header-btn#bannerPinBtn span {font-size: 1.2rem; line-height: 1;}
.customer-header-btn#bannerPinBtn:hover span {color: #fbbf24;}.customer-header-btn.delete:hover {background: var(--danger);}
.customer-banner-details {
    display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    align-items: center; width: 100%;
}
.customer-banner-detail-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.customer-banner-detail-icon svg {
    width: 14px; height: 14px; stroke: rgba(255, 255, 255, 0.9);
    fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.customer-banner-detail-content {display: flex; align-items: center; gap: 0.35rem;}
.customer-banner-detail-label {
    font-size: 0.65rem; color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase; font-weight: 600;
    letter-spacing: 0.05em; white-space: nowrap;
}
.customer-banner-detail-value {font-size: 0.85rem; color: white; white-space: nowrap;}
.customer-banner-detail-value a {
    color: white; text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.customer-banner-detail-value a:hover {border-bottom-style: solid;}

.sticky-action-bar {
    position: sticky; top: 0; background: var(--bg-primary);
    border-bottom: 2px solid var(--border); padding: 1rem 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
}

.sticky-action-bar-title {
    font-size: 1.1rem; font-weight: 700;
    display: flex; align-items: center; gap: 0.5rem;
}
.sticky-action-bar-actions {display: flex; gap: 0.5rem;}
.btn-large {
    padding: 0.75rem 1.5rem; font-size: 0.95rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}

.form-input.error, .form-textarea.error, .customer-combobox-input.error {
    border-color: var(--danger) !important; animation: shake 0.3s;
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    25% {transform: translateX(-10px);}
    75% {transform: translateX(10px);}
}
.field-error-message {
    color: var(--danger); font-size: 0.75rem; margin-top: 0.35rem;
    font-weight: 600; display: flex; align-items: center;
    gap: 0.35rem; animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-5px);}
    to {opacity: 1; transform: translateY(0);}
}
.form-section.error {border-color: var(--danger); animation: pulse 0.5s;}

.customer-combobox {position: relative;}
.customer-combobox-input {
    width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border);
    border-radius: 8px; background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.9rem; transition: all 0.2s;
}
.customer-combobox-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 206, 200, 0.1);
}
.customer-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-primary); border: 2px solid var(--primary);
    border-radius: 8px; margin-top: 0.5rem; max-height: 250px;
    overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 206, 200, 0.3), 0 0 0 1px rgba(0, 206, 200, 0.1);
    z-index: 100;
}
.customer-dropdown.active {display: block; animation: dropdownSlide 0.2s ease-out;}
@keyframes dropdownSlide {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}
.customer-dropdown-item {
    padding: 0.75rem 1rem; cursor: pointer; transition: all 0.2s;
    border-bottom: 1px solid var(--border);
}
.customer-dropdown-item:last-child {border-bottom: none;}
.customer-dropdown-item:hover {background: var(--bg-secondary); padding-left: 1.25rem;}
.customer-dropdown-item.new-customer {
    color: var(--primary); font-weight: 700;
    background: linear-gradient(90deg, rgba(0, 206, 200, 0.1), transparent);
}
.customer-dropdown-item.new-customer:hover {
    background: linear-gradient(90deg, rgba(0, 206, 200, 0.2), transparent);
}
.customer-dropdown-item-name {font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem;}
.customer-dropdown-item-email {font-size: 0.75rem; color: var(--text-secondary);}

.form-section {
    background: var(--bg-secondary); border-radius: 12px; padding: 1.25rem;
    margin-bottom: 1rem; border: 2px solid transparent;
    transition: all 0.3s; position: relative; overflow: visible;
}
.form-section:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 206, 200, 0.1);
}
.form-section-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem; cursor: pointer;
}
.form-section-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; flex-shrink: 0;
}
.form-section-title {font-size: 1rem; font-weight: 700; flex: 1;}
.form-section-toggle {
    width: 24px; height: 24px; border-radius: 6px; background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.form-section.collapsed .form-section-toggle {transform: rotate(-90deg);}
.form-section-content {
    max-height: 1000px; overflow: visible;
    transition: max-height 0.3s ease-out; position: relative;
}
.form-section.collapsed .form-section-content {max-height: 0; overflow: hidden;}

.template-btn {
    padding: 0.5rem 1rem; background: var(--bg-tertiary);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 0.5rem;
}


.participant-grid {display: grid; gap: 0.75rem;}
.participant-card {
    background: var(--bg-tertiary); border-radius: 8px; padding: 1rem;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 1rem; align-items: start;
}
.participant-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 1.25rem;
}
.participant-details {flex: 1;}
.participant-card-name {font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem;}
.participant-card-meta {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    font-size: 0.75rem; color: var(--text-secondary);
}
.participant-card-meta span {display: flex; align-items: center; gap: 0.25rem;}


.meddpicc-visual-tracker {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin-bottom: 1.5rem;
}
.meddpicc-tracker-item {
    background: var(--bg-secondary); border-radius: 10px; padding: 1rem;
    text-align: center; border: 2px solid transparent;
    transition: all 0.3s; cursor: pointer;
}
.meddpicc-tracker-item:hover {border-color: var(--primary); transform: translateY(-2px);}
.meddpicc-tracker-item.completed {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
}
/* Per-field tracker colors */
.meddpicc-tracker-item[data-mfield="Metrics"].completed { border-color: #f472b6; background: linear-gradient(135deg, rgba(244,114,182,.15), rgba(244,114,182,.05)); }
.meddpicc-tracker-item[data-mfield="EconomicBuyer"].completed { border-color: #fb923c; background: linear-gradient(135deg, rgba(251,146,60,.15), rgba(251,146,60,.05)); }
.meddpicc-tracker-item[data-mfield="DecisionCriteria"].completed { border-color: #fbbf24; background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(251,191,36,.05)); }
.meddpicc-tracker-item[data-mfield="DecisionProcess"].completed { border-color: #a3e635; background: linear-gradient(135deg, rgba(163,230,53,.15), rgba(163,230,53,.05)); }
.meddpicc-tracker-item[data-mfield="PaperProcess"].completed { border-color: #34d399; background: linear-gradient(135deg, rgba(52,211,153,.15), rgba(52,211,153,.05)); }
.meddpicc-tracker-item[data-mfield="Pain"].completed { border-color: #22d3ee; background: linear-gradient(135deg, rgba(34,211,238,.15), rgba(34,211,238,.05)); }
.meddpicc-tracker-item[data-mfield="Champion"].completed { border-color: #818cf8; background: linear-gradient(135deg, rgba(129,140,248,.15), rgba(129,140,248,.05)); }
.meddpicc-tracker-item[data-mfield="Competition"].completed { border-color: #c084fc; background: linear-gradient(135deg, rgba(192,132,252,.15), rgba(192,132,252,.05)); }
.meddpicc-tracker-icon {
    width: 48px; height: 48px; border-radius: 50%; background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.5rem; font-size: 1.5rem; transition: all 0.3s;
}
.meddpicc-tracker-item.completed .meddpicc-tracker-icon {background: var(--success); color: white;}
.meddpicc-tracker-label {font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);}
.meddpicc-tracker-item.completed .meddpicc-tracker-label {color: var(--success);}
/* Per-field tracker icon & label colors */
.meddpicc-tracker-item[data-mfield="Metrics"].completed .meddpicc-tracker-icon { background: #f472b6; }
.meddpicc-tracker-item[data-mfield="Metrics"].completed .meddpicc-tracker-label { color: #f472b6; }
.meddpicc-tracker-item[data-mfield="EconomicBuyer"].completed .meddpicc-tracker-icon { background: #fb923c; }
.meddpicc-tracker-item[data-mfield="EconomicBuyer"].completed .meddpicc-tracker-label { color: #fb923c; }
.meddpicc-tracker-item[data-mfield="DecisionCriteria"].completed .meddpicc-tracker-icon { background: #fbbf24; }
.meddpicc-tracker-item[data-mfield="DecisionCriteria"].completed .meddpicc-tracker-label { color: #fbbf24; }
.meddpicc-tracker-item[data-mfield="DecisionProcess"].completed .meddpicc-tracker-icon { background: #a3e635; }
.meddpicc-tracker-item[data-mfield="DecisionProcess"].completed .meddpicc-tracker-label { color: #a3e635; }
.meddpicc-tracker-item[data-mfield="PaperProcess"].completed .meddpicc-tracker-icon { background: #34d399; }
.meddpicc-tracker-item[data-mfield="PaperProcess"].completed .meddpicc-tracker-label { color: #34d399; }
.meddpicc-tracker-item[data-mfield="Pain"].completed .meddpicc-tracker-icon { background: #22d3ee; }
.meddpicc-tracker-item[data-mfield="Pain"].completed .meddpicc-tracker-label { color: #22d3ee; }
.meddpicc-tracker-item[data-mfield="Champion"].completed .meddpicc-tracker-icon { background: #818cf8; }
.meddpicc-tracker-item[data-mfield="Champion"].completed .meddpicc-tracker-label { color: #818cf8; }
.meddpicc-tracker-item[data-mfield="Competition"].completed .meddpicc-tracker-icon { background: #c084fc; }
.meddpicc-tracker-item[data-mfield="Competition"].completed .meddpicc-tracker-label { color: #c084fc; }

.meeting-type-pills {display: flex; gap: 0.5rem; flex-wrap: wrap;}
.meeting-type-pill {
    padding: 0.75rem 1.25rem; border: 2px solid var(--border);
    border-radius: 10px; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 600; background: var(--bg-secondary);
}
.meeting-type-pill:hover {border-color: var(--primary); transform: translateY(-2px);}
.meeting-type-pill.selected {
    border-color: #023747;
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%); color: white;
}
.meeting-type-icon {font-size: 1.25rem;}

.enhanced-editor-wrapper {
    border: 2px solid var(--border); border-radius: 12px;
    overflow: hidden; transition: all 0.2s;
}
.enhanced-editor-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 206, 200, 0.1);
}
.enhanced-editor-toolbar {
    background: var(--bg-tertiary); padding: 0.75rem;
    border-bottom: 1px solid var(--border); display: flex;
    gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.toolbar-group {
    display: flex; gap: 0.25rem; padding-right: 0.75rem;
    border-right: 1px solid var(--border);
}
.toolbar-group:last-child {border-right: none;}
.enhanced-editor-content {
    min-height: 200px; padding: 1rem; background: var(--bg-primary);
    font-size: 0.9rem; line-height: 1.6;
}

.smart-suggestions {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.05));
    border-radius: 10px; padding: 1rem; margin-bottom: 1rem; border-left: 4px solid #667eea;
}
.smart-suggestions-title {
    font-size: 0.8rem; font-weight: 700; color: #667eea;
    margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.suggestion-pills {display: flex; flex-wrap: wrap; gap: 0.5rem;}
.suggestion-pill {
    padding: 0.5rem 1rem; background: white; border: 1px solid #667eea;
    border-radius: 8px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;
}
[data-theme="dark"] .suggestion-pill {background: var(--bg-secondary);}
.suggestion-pill:hover {background: #667eea; color: white; transform: translateY(-2px);}

.form-progress {
    display: flex; gap: 0.5rem; margin-bottom: 1.5rem;
    padding: 1rem; background: var(--bg-secondary); border-radius: 10px;
}
.progress-step {
    flex: 1; height: 6px; background: var(--bg-tertiary);
    border-radius: 3px; position: relative; overflow: hidden;
}
.progress-step.completed {background: var(--success);}
.progress-step.active {background: var(--primary);}
.progress-step.active::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(100%);}
}

.sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-width);
    height: 100vh; background: linear-gradient(135deg, #023747 0%, #127c87 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 0.6rem 0 0.6rem; z-index: 101;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column;
    overflow: hidden;
}
[data-theme="dark"] .sidebar {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border-right: 1px solid var(--border);
}
.sidebar-customers-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
    margin-right: -0.5rem;
    padding-right: 0.5rem;
}

.sidebar-customers-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-customers-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.sidebar-customers-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-customers-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .sidebar-customers-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .sidebar-customers-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 221, 0.3);
}

[data-theme="dark"] .sidebar-customers-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 221, 0.5);
}

[data-theme="dark"] .sidebar-logo {text-shadow: 0 0 20px rgba(0, 229, 221, 0.5);}
[data-theme="dark"] .action-btn {background: rgba(0, 229, 221, 0.05);}
[data-theme="dark"] .action-btn:hover {
    background: rgba(0, 229, 221, 0.15);
    box-shadow: 0 4px 12px rgba(0, 229, 221, 0.2);
}

.sidebar-logo {
    font-size: 1.25rem; font-weight: 800; color: white;
    margin-bottom: 1.5rem; padding: 0 0.4rem;
    letter-spacing: -0.5px; position: relative;
}
.sidebar-logo::after {
    content: ''; position: absolute; bottom: -0.5rem;
    left: 0.5rem; right: 0.5rem; height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.3;
}

.sidebar-title {
    font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5); font-weight: var(--font-bold);
    margin: 1.25rem 0 0.6rem; display: flex; justify-content: space-between;
    align-items: center; padding: 0 0.4rem;
}
.sidebar-title-btn {
    background: rgba(0, 206, 200, 0.15); border: 1px solid rgba(0, 206, 200, 0.3);
    color: var(--primary); cursor: pointer; font-size: 0.85rem;
    padding: 0.2rem 0.4rem; border-radius: 5px; transition: all 0.2s; font-weight: 700;
}
.sidebar-title-btn:hover {background: rgba(0, 206, 200, 0.25); transform: scale(1.1);}

.action-btn {
    width: 100%; padding: 0.5rem 0.6rem; border: none; border-radius: 8px;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.9);
    position: relative; overflow: hidden;
}
.action-btn::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}
.action-btn:hover::before {left: 100%;}
.action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.action-btn-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; flex-shrink: 0; transition: all 0.3s;
    position: relative; z-index: 1; background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.action-btn:hover .action-btn-icon {
    transform: scale(1.1); background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
.action-btn-icon svg {
    width: 15px; height: 15px; stroke: rgba(255, 255, 255, 0.9);
    fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.action-btn:hover .action-btn-icon svg {stroke: white;}

.btn-sign-in {
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 8px;
    cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s;
    display: flex; align-items: center; gap: 0.5rem; margin-left: auto;
}
.btn-sign-in:hover {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747;
    transform: translateY(-2px); box-shadow: 0 4px 10px rgba(27, 168, 175, 0.5);
}

.btn-sign-in svg {width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;}

.action-btn .notification-badge {
    position: absolute; top: 0.5rem; right: 0.5rem; background: #ef4444;
    color: white; font-size: 0.65rem; font-weight: 700;
    padding: 0.125rem 0.4rem; border-radius: 10px;
    min-width: 18px; text-align: center; animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% {transform: scale(1);}
    50% {transform: scale(1.1);}
}

.meeting-action-btn.share {background: rgba(59, 130, 246, 0.9);}
.meeting-action-btn.share:hover {background: #3b82f6; color: white;}

.share-modal-tabs {
    display: flex; gap: 0.35rem; margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}
.share-modal-tab {
    padding: 0.5rem 1rem; background: transparent; border: none;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.2s; white-space: nowrap;
}
.share-modal-tab:hover {color: var(--text-primary); background: var(--bg-secondary);}
.share-modal-tab.active {
    color: white;
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    border-bottom-color: #023747;
    border-radius: 6px 6px 0 0;
}
.share-tab-content {display: none;}
.share-tab-content.active {display: block;}

.permission-option {
    padding: 0.75rem; border: 2px solid var(--border); border-radius: 8px;
    margin-bottom: 0.5rem; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: start; gap: 0.75rem;
}
.permission-option:hover {border-color: var(--primary); background: var(--bg-secondary);}
.permission-option input[type="radio"]:checked ~ div {color: var(--text-primary);}
.permission-option:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(0, 206, 200, 0.1), rgba(0, 168, 163, 0.05));
}

.shared-with-list {display: flex; flex-direction: column; gap: 0.75rem;}
.shared-user-card {
    background: var(--bg-secondary); border-radius: 8px; padding: 0.75rem;
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center;
}
.shared-user-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 0.9rem;
}
.shared-user-info {flex: 1;}
.shared-user-name {font-weight: 600; font-size: 0.9rem; margin-bottom: 0.125rem;}
.shared-user-email {font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem;}
.shared-user-meta {display: flex; gap: 0.5rem; font-size: 0.7rem; align-items: center;}
.shared-permission-badge {padding: 0.125rem 0.5rem; border-radius: 6px; font-weight: 600;}
.shared-permission-badge.view {background: rgba(59, 130, 246, 0.15); color: #3b82f6;}
.shared-permission-badge.edit {background: rgba(16, 185, 129, 0.15); color: #10b981;}
.shared-status-badge {padding: 0.125rem 0.5rem; border-radius: 6px; font-weight: 600;}
.shared-status-badge.accepted {background: rgba(16, 185, 129, 0.15); color: #10b981;}
.shared-status-badge.pending {background: rgba(245, 158, 11, 0.15); color: #f59e0b;}
.shared-user-actions {display: flex; gap: 0.35rem;}

.link-sharing-section {background: var(--bg-secondary); padding: 1rem; border-radius: 8px;}
.link-toggle {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.link-url-box {display: flex; gap: 0.5rem; margin-bottom: 1rem;}
.link-url-input {
    flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg-tertiary);
    color: var(--text-primary); font-size: 0.85rem; font-family: 'Courier New', monospace;
}

.shared-meetings-section {
    display: none; background: var(--bg-primary); border-radius: 12px;
    padding: 1rem; box-shadow: 0 1px 4px var(--shadow); margin-bottom: 1rem;
}
.shared-meetings-section.active {display: block;}
.shared-filter-bar {
    display: flex; gap: 0.5rem; margin-bottom: 1rem;
    flex-wrap: wrap; align-items: center;
}
.shared-filter-select {
    padding: 0.5rem 0.75rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.85rem; cursor: pointer;
}
.shared-status-filter {display: flex; gap: 0.35rem;}
.shared-status-btn {
    padding: 0.35rem 0.75rem; border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary); border-radius: 6px;
    cursor: pointer; font-size: 0.75rem; transition: all 0.2s;
}
.shared-status-btn.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747;
}
.shared-meetings-grid {display: flex; flex-direction: column; gap: 0.75rem;}
.shared-meeting-card {
    background: var(--bg-secondary); border-radius: 10px; padding: 1rem;
    border-left: 4px solid; transition: all 0.2s; cursor: pointer;
}
.shared-meeting-card:hover {transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow);}
.shared-meeting-card.pending {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), var(--bg-secondary));
}
.shared-meeting-card.accepted {border-left-color: #10b981;}
.shared-meeting-card.shared-by-me {border-left-color: #3b82f6;}
.shared-card-header {
    display: flex; justify-content: space-between;
    align-items: start; margin-bottom: 0.75rem;
}
.shared-card-badge {
    padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.7rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.shared-card-badge.new {background: #3b82f6; color: white; animation: pulse-badge 2s infinite;}
.shared-card-badge.accepted {background: rgba(16, 185, 129, 0.2); color: #10b981;}
.shared-card-badge.shared {background: rgba(59, 130, 246, 0.2); color: #3b82f6;}
.shared-card-title {font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem;}
.shared-card-meta {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.75rem;
}
.shared-card-meta-item {display: flex; align-items: center; gap: 0.35rem;}
.shared-card-preview {
    background: var(--bg-tertiary); padding: 0.75rem; border-radius: 6px;
    font-size: 0.85rem; color: var(--text-secondary);
    margin-bottom: 0.75rem; font-style: italic;
}
.shared-card-actions {display: flex; gap: 0.5rem; flex-wrap: wrap;}
.shared-action-btn {
    padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 0.35rem;
}
.shared-action-btn.primary {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747;
}
.shared-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(27, 168, 175, 0.5);
}
.shared-action-btn.secondary {background: transparent; color: var(--text-secondary);}
.shared-action-btn.secondary:hover {background: var(--bg-tertiary); color: var(--text-primary);}
.shared-action-btn.danger {
    background: transparent; color: var(--danger); border-color: var(--danger);
}
.shared-action-btn.danger:hover {background: var(--danger); color: white;}

.shared-meeting-banner {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white; padding: 1rem 1.5rem; border-radius: 12px; margin-bottom: 1rem; display: none;
}
.shared-meeting-banner.active {display: block;}
.shared-banner-content {
    display: flex; justify-content: space-between;
    align-items: center; gap: 1rem;
}
.shared-banner-info {flex: 1;}
.shared-banner-title {
    font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.shared-banner-meta {font-size: 0.85rem; opacity: 0.9;}
.shared-banner-actions {display: flex; gap: 0.5rem;}

.collaborators-indicator {
    background: var(--bg-secondary); border-radius: 8px;
    padding: 0.75rem; margin-bottom: 1rem; display: none;
}
.collaborators-indicator.active {display: block;}
.collaborators-list {display: flex; flex-direction: column; gap: 0.35rem;}
.collaborator-item {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
}
.collaborator-status {width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;}
.collaborator-status.online {background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);}
.collaborator-status.offline {background: var(--text-tertiary);}

.accept-meeting-options {display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem;}
.accept-option {
    padding: 1rem; border: 2px solid var(--border); border-radius: 8px;
    cursor: pointer; transition: all 0.2s;
}
.accept-option:hover {border-color: var(--primary); background: var(--bg-secondary);}
.accept-option input[type="radio"]:checked ~ div {color: var(--text-primary);}
.accept-option:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(0, 206, 200, 0.1), rgba(0, 168, 163, 0.05));
}
.accept-option-title {font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem;}
.accept-option-desc {font-size: 0.8rem; color: var(--text-secondary);}

.category-filter {
    padding: 0.45rem 0.6rem; border: none; background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 1); border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem;
    margin-bottom: 0.4rem; transition: all 0.3s;
    position: relative; overflow: visible; white-space: nowrap;
    width: 100%;
}

.category-filter-content {display: contents;}
.category-filter-name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: left;}
.category-filter::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--primary);
    transform: scaleY(0); transition: transform 0.3s;
}
.category-filter:hover {background: rgba(255, 255, 255, 0.08); transform: translateX(4px);}
.category-filter:hover::before {transform: scaleY(1);}
.category-filter.active {
    background: linear-gradient(135deg, rgba(0, 206, 200, 0.2), rgba(0, 168, 163, 0.15));
    color: white; border-left: 3px solid var(--primary); font-weight: 600;
}
.category-filter.active::before {transform: scaleY(1);}
.category-dot {width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor;}
.customer-count {
    font-size: 0.6rem; background: rgba(0, 206, 200, 0.15);
    color: var(--primary); padding: 0.15rem 0.4rem; border-radius: 5px;
    font-weight: 700; min-width: 20px; text-align: center; flex-shrink: 0;
}
.customer-filter-actions {display: flex; gap: 0.25rem; margin-left: auto; flex-shrink: 0; opacity: 0; transition: opacity 0.2s;}
.category-filter:hover .customer-filter-actions {opacity: 1;}
.customer-filter-btn {
    background: transparent; border: none; color: rgba(255, 255, 255, 0.6);
    width: 18px; height: 18px; border-radius: 4px; cursor: pointer;
    font-size: 0.6rem; display: flex; align-items: center;
    justify-content: center; transition: all 0.2s; padding: 0;
}
.customer-filter-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white; transform: scale(1.1);
}
.customer-filter-btn.delete:hover {background: var(--danger); color: white;}
.customer-filter-btn svg {
    width: 10px; height: 10px; stroke: currentColor;
    fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.category-filter.active .customer-count {background: rgba(255, 255, 255, 0.2); color: white;}

/* ========== PINNED CUSTOMERS STYLES - START ========== */
.pin-star {
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
}

.pin-star:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.pin-star.pinned {
    opacity: 1;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.pin-star.pinned:hover {
    color: #fcd34d;
    transform: scale(1.15);
}

.category-filter.pinned-customer {
    background: rgba(251, 191, 36, 0.08);
    border-left: 2px solid #fbbf24;
}

.category-filter.pinned-customer .category-filter-name {
    font-weight: 600;
}
.category-filter.pinned-customer .customer-count { display: none; }

.priority-section-header {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.priority-section-header .star-icon {
    color: #fbbf24;
}

.priority-section-empty {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 0.5rem 0.6rem;
    text-align: center;
}

.priority-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.3), transparent);
    margin: 0.75rem 0.5rem;
}

@keyframes pinBounce {
    0% { transform: scale(1); }
    25% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pin-star.animate {
    animation: pinBounce 0.4s ease-out;
}
/* ========== PINNED CUSTOMERS STYLES - END ========== */

/* ========== MONETIZATION STYLES - START ========== */
.customer-slots-container{padding:0.75rem 0.6rem;margin-bottom:0.5rem}
.customer-slots-label{font-size:0.55rem;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);font-weight:700;margin-bottom:0.5rem;display:flex;justify-content:space-between;align-items:center}
.customer-slots-bar{height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;margin-bottom:0.35rem}
.customer-slots-fill{height:100%;border-radius:3px;transition:width 0.3s,background 0.3s}
.customer-slots-fill.normal{background:var(--primary)}
.customer-slots-fill.warning{background:#f59e0b}
.customer-slots-fill.limit{background:#ef4444}
.customer-slots-text{font-size:0.7rem;color:rgba(255,255,255,0.7);display:flex;justify-content:space-between;align-items:center}
.customer-slots-upgrade{color:var(--primary);cursor:pointer;font-weight:600;transition:all 0.2s}
.customer-slots-upgrade:hover{text-decoration:underline;color:#00E5DD}
.frozen-customer{opacity:0.5;position:relative}
.frozen-customer::after{content:'VIEW ONLY';position:absolute;right:4.5rem;top:50%;transform:translateY(-50%);font-size:0.5rem;background:rgba(107,114,128,0.8);color:white;padding:0.15rem 0.4rem;border-radius:3px;font-weight:700;letter-spacing:0.05em;pointer-events:none}
.frozen-banner{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:0.75rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:-0.75rem -1.5rem 1rem -1.5rem;font-size:0.85rem;font-weight:500}
.frozen-banner button{background:#92400e;color:white;border:none;padding:0.4rem 1rem;border-radius:6px;font-weight:600;cursor:pointer;white-space:nowrap}
.upgrade-modal-content{max-width:1000px !important;width:98% !important}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:1.5rem 0}
.plan-card{background:var(--bg-secondary);border:2px solid var(--border);border-radius:10px;padding:1.25rem 1rem;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;display:flex;flex-direction:column;min-height:240px}
.plan-card:hover{border-color:#023747;transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow);background:linear-gradient(135deg,#023747 0%,#1ba8af 100%)}
.plan-card.current{border-color:var(--primary);background:linear-gradient(135deg,rgba(0,206,200,0.1),rgba(0,168,163,0.05))}
.plan-card.popular::before{content:'POPULAR';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-size:0.6rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:4px;letter-spacing:0.05em}
.plan-card.current:hover{background:linear-gradient(135deg,rgba(0,206,200,0.1),rgba(0,168,163,0.05)) !important}
.plan-card.current:hover .plan-name,.plan-card.current:hover .plan-price,.plan-card.current:hover .plan-price span,.plan-card.current:hover .plan-limit{color:var(--text-primary) !important}
.plan-card:hover .plan-name,.plan-card:hover .plan-price,.plan-card:hover .plan-price span,.plan-card:hover .plan-limit{color:white}
.plan-name{font-size:0.85rem;font-weight:700;color:var(--text-secondary);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.05em}
.plan-price{font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1}
.plan-price span{font-size:0.85rem;font-weight:500;color:var(--text-secondary)}
.plan-limit{font-size:0.85rem;color:var(--text-secondary);margin:1rem 0;padding:0.75rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.plan-btn{width:100%;padding:0.6rem;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:auto}
.plan-btn.primary{background:linear-gradient(135deg,#023747,#1ba8af);color:white}
.plan-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(27,168,175,0.4)}
.plan-btn.secondary{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}
.billing-toggle{display:flex;justify-content:center;gap:0.5rem;align-items:center;margin-top:1rem;font-size:0.85rem;color:var(--text-secondary)}
.billing-toggle button{padding:0.4rem 1rem;border:1px solid var(--border);background:transparent;border-radius:6px;cursor:pointer;font-weight:500;transition:all 0.2s}

.billing-toggle button.active{background:linear-gradient(135deg,#023747 0%,#1ba8af 100%);color:white;border-color:#023747}
@media(max-width:600px){.plans-grid{grid-template-columns:1fr 1fr}.plan-price{font-size:1.5rem}}
/* ========== MONETIZATION STYLES - END ========== */

.header {
    position: sticky; top: 0; background: var(--bg-primary);
    border-bottom: 1px solid var(--border); padding: 0.75rem 1.5rem;
    margin-left: var(--sidebar-width); z-index: 100; box-shadow: 0 1px 4px var(--shadow);
}
.header-content {
    display: flex; gap: 1rem; align-items: center;
    justify-content: space-between; padding: 0 1rem;
}
.search-bar {flex: 1; max-width: 400px; position: relative;}
.search-bar input {
    width: 100%; padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-secondary); color: var(--text-primary); font-size: 0.85rem;
}
.search-bar input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 206, 200, 0.1);
}
.search-icon {
    position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-secondary); pointer-events: none;
}
.header-actions {display: flex; gap: 0.35rem;}
.btn-icon {
    background: transparent; border: none; padding: 0.5rem;
    border-radius: 6px; cursor: pointer; font-size: 1rem;
    color: var(--text-secondary); transition: all 0.2s;
}
.btn-add-note {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 206, 200, 0.3);
}
.btn-add-note:hover {transform: scale(1.1) rotate(90deg); box-shadow: 0 4px 12px rgba(0, 206, 200, 0.5);}
.btn-add-note svg {width: 18px; height: 18px;}
.btn-icon:hover {background: var(--bg-secondary); color: var(--text-primary);}
.btn-icon.danger:hover {background: rgba(239, 68, 68, 0.1); color: var(--danger);}
.btn-icon svg {width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;}

.container {
    margin-left: var(--sidebar-width); padding: 1rem;
    display: grid; grid-template-columns: 1fr 280px; gap: 1rem;
    transition: grid-template-columns 0.3s ease;
}
.container.kanban-mode, .container.form-mode {grid-template-columns: 1fr;}
.container.sidebar-collapsed {grid-template-columns: 1fr 50px;}
.main-content {display: flex; flex-direction: column; gap: 1rem;}

.inline-form-container {
    display: none; background: var(--bg-primary); border-radius: 12px;
    padding: 1.5rem 2rem; box-shadow: 0 4px 12px var(--shadow);
    animation: slideIn 0.3s ease-out; overflow: visible;
    max-width: 60%; width: 100%; margin: 0 auto; position: relative; z-index: 200;
}
.inline-form-container.active {display: block;}
@keyframes slideIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}


.meeting-tabs-container {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
    padding-bottom: 0; border-bottom: 2px solid var(--border);
    overflow-x: visible; flex-wrap: wrap;
}
.meeting-tab {
    padding: 0.5rem 0.65rem; border: 2px solid var(--border);
    background: var(--bg-secondary); color: var(--text-secondary);
    border-radius: 8px 8px 0 0; cursor: pointer; font-size: 0.8rem;
    font-weight: 600; transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 0.35rem;
    position: relative; user-select: none; margin-bottom: -2px;
}
.meeting-tab:hover {background: var(--bg-tertiary); transform: translateY(-2px);}
.meeting-tab.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border: 2px solid var(--border);
    border-bottom: 2px solid var(--bg-primary);
    box-shadow: 0 2px 6px rgba(27, 168, 175, 0.3); z-index: 1;
}
.meeting-tab.drag-over {
    background: rgba(0, 206, 200, 0.2); border-color: var(--primary);
    border-style: dashed; animation: pulse 0.5s infinite;
}
.meeting-tab-icon {font-size: 1rem;}
.meeting-tab-count {
    background: rgba(255, 255, 255, 0.2); padding: 0.125rem 0.35rem;
    border-radius: 10px; font-size: 0.7rem; font-weight: 700; margin-right: 0.75rem;
}
.meeting-tab.active .meeting-tab-count {background: rgba(255, 255, 255, 0.3);}
.meeting-tab-edit {
    display: none; position: absolute; top: 1.25rem; right: -0.25rem;
    background: var(--primary); color: white; width: 20px; height: 20px;
    border-radius: 50%; align-items: center; justify-content: center;
    cursor: pointer; border: 2px solid var(--bg-primary); z-index: 10;
}
.meeting-tab:hover .meeting-tab-edit {display: flex;}
.meeting-tab-actions {
    display: none; position: absolute; top: -0.25rem; right: -0.25rem;
    background: var(--danger); color: white; width: 20px; height: 20px;
    border-radius: 50%; align-items: center; justify-content: center;
    font-size: 0.7rem; cursor: pointer; border: 2px solid var(--bg-primary); z-index: 10;
}
.meeting-tab:hover .meeting-tab-actions {display: flex;}
.meeting-tab-actions:hover {transform: scale(1.1);}
.btn-add-tab {
    background: var(--bg-secondary); border: 2px dashed var(--border);
    color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 8px;
    cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all 0.2s;
    white-space: nowrap; display: flex; align-items: center; gap: 0.5rem;
}

.meetings-drop-zone {
    display: none; border: 3px dashed var(--primary);
    background: rgba(0, 206, 200, 0.1); border-radius: 12px; padding: 3rem;
    text-align: center; color: var(--primary); font-weight: 600;
    font-size: 1rem; margin-bottom: 1rem; animation: pulse 1s infinite;
}
.meetings-drop-zone.active {display: block;}
.meeting-card-dragging {opacity: 0.5; transform: rotate(2deg);}
.meetings-empty-tab {text-align: center; padding: 3rem 1rem; color: var(--text-secondary);}
.meetings-empty-tab-icon {font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;}
.tab-context-menu {
    position: fixed; background: var(--bg-primary); border: 2px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px var(--shadow);
    z-index: 10000; display: none; min-width: 150px;
}
.tab-context-menu.active {display: block;}
.tab-context-menu-item {
    padding: 0.75rem 1rem; cursor: pointer; display: flex; align-items: center;
    gap: 0.5rem; font-size: 0.85rem; transition: all 0.2s;
    border-bottom: 1px solid var(--border);
}
.tab-context-menu-item:last-child {border-bottom: none;}
.tab-context-menu-item:hover {background: var(--bg-secondary); padding-left: 1.25rem;}
.tab-context-menu-item.delete:hover {background: rgba(239, 68, 68, 0.1); color: var(--danger);}

.customer-CustomerInfos-section, .customer-meetings-section {
    display: none; background: var(--bg-primary); border-radius: 12px;
    padding: 1rem; box-shadow: 0 1px 4px var(--shadow);
}
.customer-participants-section {
    display: none; background: var(--bg-primary); border-radius: 12px;
    padding: 1rem; box-shadow: 0 1px 4px var(--shadow); margin-bottom: 1rem;
}
.customer-participants-section.active {display: block;}
.participants-overview-grid {display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem;}
.participant-overview-card {
    display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr 40px;
    align-items: center; gap: 0.75rem; padding: 0.4rem 0.5rem;
    background: var(--bg-secondary); border-radius: 6px; margin-bottom: 0.15rem;
    transition: all 0.2s; cursor: pointer; border-left: 3px solid transparent;
}
.participant-overview-actions {
    position: absolute; top: 0.75rem; right: 0.75rem;
    display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s;
}
.participant-overview-card:hover .participant-overview-actions {opacity: 1;}
.participant-action-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); width: 24px; height: 24px;
    border-radius: 4px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: all 0.2s;
}
[data-theme="dark"] .participant-action-btn {background: transparent; color: var(--text-secondary);}
[data-theme="dark"] .btn-primary {box-shadow: 0 0 20px rgba(0, 229, 221, 0.3);}
[data-theme="dark"] .btn-primary:hover {box-shadow: 0 0 30px rgba(0, 229, 221, 0.5);}
[data-theme="dark"] .task-card:hover,
[data-theme="dark"] .customer-overview-card:hover,
[data-theme="dark"] .meeting-card:hover {box-shadow: 0 4px 20px rgba(0, 229, 221, 0.15);}
[data-theme="dark"] .sidebar {box-shadow: 4px 0 30px rgba(0, 0, 0, 0.7);}
[data-theme="dark"] .modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); border: 1px solid var(--border);
}
.participant-action-btn:hover {
    background: var(--bg-tertiary); border-color: var(--primary); color: var(--primary);
}
.participant-action-btn.delete:hover {background: var(--danger); border-color: var(--danger); color: white;}
.btn-add-participant {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s;
}

.btn-add-meeting {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 8px;
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s;
}
.participant-action-btn svg {
    width: 16px; height: 16px; stroke: currentColor;
    fill: none; stroke-width: 2;
}
.participant-overview-card:hover {
    background: var(--bg-tertiary); transform: translateX(4px);
    box-shadow: 0 2px 8px var(--shadow); border-left-color: var(--primary);
}
.participant-overview-header {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.participant-overview-avatar {
    width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 700; backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.participant-overview-info {flex: 1;}
.participant-overview-name {font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem;}
.participant-overview-role {font-size: 0.75rem; opacity: 0.9;}
.participant-overview-details {font-size: 0.75rem; line-height: 1.6; opacity: 0.95;}
.participant-overview-detail {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;
}
.participant-header-row {
    display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr 40px;
    align-items: center; gap: 0.75rem; padding: 0.35rem 0.5rem;
    margin-bottom: 0.25rem; border-bottom: 2px solid var(--border);
}
.participant-header-cell {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-secondary);
}
.participant-header-cell.right {text-align: right;}
.participant-overview-name-single {
    font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.participant-overview-role-single {
    font-size: 0.8rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.participant-overview-email-single {
    font-size: 0.8rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.participant-overview-phone-single {
    font-size: 0.8rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.participant-overview-actions-single {
    display: flex; gap: 0.15rem; opacity: 0;
    transition: opacity 0.2s; justify-content: flex-end;
}
.participant-overview-card:hover .participant-overview-actions-single {opacity: 1;}
.participant-overview-meetings {
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.7rem; opacity: 0.9;
}
.customer-CustomerInfos-section.active, .customer-meetings-section.active {display: block;}

.meeting-type-icon-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem; margin: 1rem 0; max-width: 100%; overflow: hidden;
}
.meeting-type-icon-option {
    background: var(--bg-secondary); border: 2px solid var(--border);
    border-radius: 8px; padding: 0.75rem; font-size: 1rem;
    cursor: pointer; transition: all 0.2s; display: flex;
    align-items: center; justify-content: center; aspect-ratio: 1;
}
.meeting-type-icon-option:hover {
    background: var(--bg-tertiary); border-color: var(--primary); transform: scale(1.1);
}
.meeting-type-icon-option.selected {
    background: var(--primary); border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 206, 200, 0.4);
}

.empty-state-compact {
    text-align: center; padding: 1.5rem 0.35rem; color: var(--text-secondary);
    background: var(--bg-secondary); border-radius: 8px;
    font-size: 0.8rem;
}
.empty-state-compact-icon {font-size: 1.25rem; margin-bottom: 0.25rem; opacity: 0.5;}
.empty-state-add-btn {
    margin-top: 0.5rem; padding: 0.35rem 0.75rem; background: transparent;
    border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.35rem; transition: all 0.2s;
}

.empty-state-add-btn[style*="#c43a00"]:hover {
    background: linear-gradient(135deg, #4a2000 0%, #d44500 100%) !important;
    box-shadow: 0 8px 24px rgba(61, 26, 0, 0.6) !important;
}

.customer-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border); cursor: pointer;
    user-select: none; transition: all 0.2s;
}
.customer-section-header:hover {
    background: var(--bg-tertiary); margin-left: -0.5rem;
    margin-right: -0.5rem; padding-left: 0.5rem;
    padding-right: 0.5rem; border-radius: 6px;
}
.customer-section-toggle {
    width: 24px; height: 24px; border-radius: 6px; background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; font-size: 0.75rem; flex-shrink: 0;
}
.customer-participants-section.collapsed .customer-section-toggle,
.customer-CustomerInfos-section.collapsed .customer-section-toggle,
.customer-meetings-section.collapsed .customer-section-toggle {transform: rotate(-180deg);}
#customerParticipantsGrid, #customerParticipantsEmpty, #customerCustomerInfosList,
#customerCustomerInfosEmpty, #customerMeetingsList, #customerMeetingsEmpty,
.meeting-tabs-container {
    max-height: 1500px; overflow: visible;
    transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;
}
.customer-participants-section.collapsed #customerParticipantsGrid,
.customer-participants-section.collapsed #customerParticipantsEmpty,
.customer-CustomerInfos-section.collapsed #customerCustomerInfosList,
.customer-CustomerInfos-section.collapsed #customerCustomerInfosEmpty,
.customer-meetings-section.collapsed #customerMeetingsList,
.customer-meetings-section.collapsed #customerMeetingsEmpty,
.customer-meetings-section.collapsed .meeting-tabs-container {
    max-height: 0; overflow: hidden; padding: 0; margin: 0; border: none;
}
.customer-participants-section.collapsed #customerParticipantsEmpty,
.customer-CustomerInfos-section.collapsed #customerCustomerInfosEmpty,
.customer-meetings-section.collapsed #customerMeetingsEmpty {opacity: 0;}
.customer-participants-section.collapsed .btn-add-participant,
.customer-CustomerInfos-section.collapsed .btn-add-meeting,
.customer-meetings-section.collapsed .btn-add-meeting {display: none;}
.section-count-badge {
    color: var(--text-primary); font-size: 0.85rem;
    font-weight: 600; margin-left: 0.35rem; opacity: 0.7;
}
.customer-section-title {
    font-size: 1rem; font-weight: var(--font-semibold); color: var(--text-primary);
}

.customer-meeting-summary, .customer-CustomerInfo-summary {
    background: var(--bg-secondary); border-radius: 8px;
    padding: 0.75rem; margin-bottom: 0.5rem;
}
.meetings-overview-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 0.75rem; margin-top: 0.75rem; justify-items: start; width: 100%;
}


.customer-meeting-summary {
    background: var(--bg-secondary); border-radius: 10px; padding: 1rem;
    color: var(--text-primary); transition: all 0.3s; cursor: grab;
    position: relative; overflow: hidden; display: flex;
    flex-direction: column; width: 100%; min-width: 0;
    border-left: 3px solid #127c87;
}
.customer-meeting-summary:active {cursor: grabbing;}
.customer-meeting-summary:hover {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 2px #10b981;
}
.customer-meeting-summary::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.customer-meeting-summary:hover::before {opacity: 1;}
.meeting-summary-header {
    display: flex; justify-content: space-between;
    align-items: start; margin-bottom: 0.75rem;
}
.meeting-summary-icon {
    width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 0.75rem; backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.meeting-summary-title {font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3;}
.meeting-summary-date {font-size: 0.75rem; opacity: 0.9; margin-bottom: 0.75rem;}
.meeting-summary-notes {
    background: var(--bg-tertiary); border-radius: 6px; padding: 0.75rem;
    margin-bottom: 0.75rem; font-size: 0.8rem; line-height: 1.5;
    flex: 1; position: relative;
}
.meeting-summary-notes-content {
    max-height: 60px; overflow: hidden; transition: max-height 0.3s ease-out;
    white-space: pre-wrap; word-break: break-word;
    line-height: 1.5; margin: 0;
}
.meeting-summary-notes-content.expanded {max-height: 500px;}
.meeting-summary-notes-toggle {
    background: var(--bg-tertiary); border: none; color: var(--text-primary);
    padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.7rem;
    font-weight: 600; cursor: pointer !important; margin-top: 0.5rem;
    transition: all 0.2s; width: 100%;
}

.meeting-summary-meta {
    display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem;
    opacity: 0.95; padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.meeting-summary-meta-item {display: flex; align-items: center; gap: 0.35rem;}
.meeting-summary-actions {
    position: absolute; top: 0.75rem; right: 0.75rem;
    display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; z-index: 1;
}
.customer-meeting-summary:hover .meeting-summary-actions {opacity: 1;}
.meeting-action-btn {
    background: rgba(255, 255, 255, 0.9); border: none; color: var(--text-primary);
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer !important;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .meeting-action-btn {background: rgba(31, 41, 55, 0.95); color: white;}
.meeting-action-btn:hover {transform: scale(1.1);}
.meeting-action-btn.delete:hover {background: var(--danger); color: white;}
.meeting-action-btn svg {
    width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
}
.meddpicc-mini-progress {display: flex; align-items: center; gap: 0.35rem;}
.meddpicc-mini-bar {
    flex: 1; height: 4px; background: rgba(255, 255, 255, 0.2);
    border-radius: 2px; overflow: hidden; min-width: 40px;
}
.meddpicc-mini-fill {height: 100%; background: rgba(255, 255, 255, 0.8); transition: width 0.3s;}
.meddpicc-mini-score {font-size: 0.7rem; font-weight: 700; white-space: nowrap;}
.customer-CustomerInfo-summary {border-left: 3px solid #127c87;}
.meeting-summary-content {
    color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 0.5rem;
    white-space: pre-wrap; max-height: 60px; overflow: hidden;
}
.meeting-summary-content.expanded {max-height: none;}
.meeting-expand-btn {
    background: transparent; border: none; color: var(--primary);
    cursor: pointer; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0;
}
.meeting-expand-btn:hover {color: var(--primary-dark);}
.CustomerInfo-badge {
    display: inline-block; padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white; border-radius: 8px; font-size: 0.7rem;
    font-weight: 600; margin-left: 0.35rem;
}
.customer-overview-grid {grid-template-columns: 1fr;}

.meddpicc-progress {
    margin: 0.75rem 0; padding: 0.75rem;
    background: var(--bg-tertiary); border-radius: 8px;
}
.meddpicc-progress-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 0.5rem;
}
.meddpicc-progress-title {font-weight: 600; font-size: 0.8rem; color: var(--text-secondary);}
.meddpicc-progress-score {font-weight: 700; font-size: 0.9rem; color: var(--primary);}
.meddpicc-progress-bar {
    height: 6px; background: var(--bg-secondary); border-radius: 3px;
    overflow: hidden; margin-bottom: 0.5rem;
}
.meddpicc-progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s;
}
.meddpicc-items {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem;}
.meddpicc-item {display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem;}
.meddpicc-item-icon {
    width: 16px; height: 16px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 0.6rem; flex-shrink: 0;
}
.meddpicc-item-icon.completed {background: var(--success); color: white;}
.meddpicc-item-icon.incomplete {background: var(--bg-secondary); color: var(--text-secondary);}

.tasks-section {
    background: var(--bg-primary); border-radius: 12px;
    padding: 1rem; box-shadow: 0 1px 4px var(--shadow);
}
.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;
}
.section-title {
    font-size: 1.1rem; font-weight: var(--font-bold);
    color: var(--text-primary); letter-spacing: -0.02em;
}
.view-toggle {display: flex; gap: 0.35rem;}
.view-btn {
    padding: 0.35rem 0.75rem; border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary); border-radius: 6px;
    cursor: pointer; font-size: 0.75rem; transition: all 0.2s;
}
.view-btn.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747; box-shadow: 0 2px 6px rgba(27, 168, 175, 0.3);
}
.task-filters {display: flex; gap: 0.35rem; margin-bottom: 0.75rem; flex-wrap: wrap;}
.filter-btn {
    padding: 0.35rem 0.75rem; border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary); border-radius: 6px;
    cursor: pointer; font-size: 0.75rem; transition: all 0.2s;
}
.filter-btn.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747; box-shadow: 0 2px 6px rgba(27, 168, 175, 0.3);
}
.tasks-list {display: flex; flex-direction: column; gap: 0.5rem;}
.kanban-board {
    display: none; grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem; margin-top: 0.5rem;
}
.kanban-board.active {display: grid;}
.kanban-column {
    background: var(--bg-secondary); border-radius: 8px;
    padding: 0.75rem; min-height: 400px;
}
.kanban-column-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);
}
.kanban-column-title {
    font-size: 0.9rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.35rem;
}
.kanban-column-count {
    background: var(--bg-tertiary); padding: 0.125rem 0.5rem;
    border-radius: 6px; font-size: 0.75rem; font-weight: 600;
}
.kanban-cards {display: flex; flex-direction: column; gap: 0.5rem; min-height: 350px;}
.kanban-cards.drag-over {
    background: var(--bg-tertiary); border-radius: 6px;
    border: 2px dashed var(--primary);
}
.task-card {
    background: var(--bg-secondary); border: 2px solid transparent;
    border-radius: 10px; padding: 0.75rem; cursor: move;
    transition: all 0.2s; display: flex; gap: 0.5rem;
    position: relative; animation: slideIn 0.2s ease-out;
}
[data-theme="dark"] .task-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(26, 26, 26, 0.8) 100%);
    border: 1px solid var(--border);
}

[data-theme="dark"] .customer-CustomerInfo-summary div[style*="color: #000000"] {color: #ffffff !important;}
[data-theme="dark"] .participant-overview-card {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, rgba(26, 26, 26, 0.8) 100%);
    border: 1px solid var(--border);
}
.task-card:hover {box-shadow: 0 4px 12px var(--shadow); transform: translateY(-2px);}
.task-card.overdue {border-left: 3px solid var(--danger);}
.task-card.due-soon {border-left: 3px solid var(--warning);}
.task-card.dragging {opacity: 0.5; transform: rotate(2deg);}
.task-card.color-red {border-color: #ef4444;}
.task-card.color-orange {border-color: #f97316;}
.task-card.color-yellow {border-color: #eab308;}
.task-card.color-green {border-color: #10b981;}
.task-card.color-blue {border-color: #3b82f6;}
.task-card.color-purple {border-color: #8b5cf6;}
.task-card.color-pink {border-color: #ec4899;}
.task-card.priority-low-auto {border-color: #10b981;}
.task-card.priority-medium-auto {border-color: #f97316;}
.task-card.priority-high-auto {border-color: #ef4444;}

.task-number {
    position: absolute; top: -8px; left: 8px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 10;
}
.task-checkbox {
    width: 24px; height: 24px; border: 2px solid var(--border);
    border-radius: 6px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    background: var(--bg-primary); flex-shrink: 0; transition: all 0.2s;
}
.task-checkbox:hover {border-color: var(--primary); transform: scale(1.05);}
.task-checkbox.completed {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: var(--primary);
}
.task-checkbox svg {
    width: 14px; height: 14px; stroke: white; stroke-width: 3;
    fill: none; opacity: 0; transform: scale(0); transition: all 0.2s;
}
.task-checkbox.completed svg {opacity: 1; transform: scale(1);}
.task-content {flex: 1;}
.task-header {display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem;}
.task-title {
    font-size: 0.9rem; font-weight: var(--font-semibold);
    flex: 1; color: var(--text-primary);
}
.task-title.completed {text-decoration: line-through; opacity: 0.5;}
.task-badges {display: flex; gap: 0.35rem; flex-wrap: wrap;}
.task-priority, .task-category {
    padding: 0.125rem 0.5rem; border-radius: 6px;
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
}
.priority-high {background: rgba(239, 68, 68, 0.15); color: var(--danger);}
.priority-medium {background: rgba(245, 158, 11, 0.15); color: var(--warning);}
.priority-low {background: rgba(16, 185, 129, 0.15); color: var(--success);}
.task-customer {
    padding: 0.25rem 0.75rem; border-radius: 8px; font-size: 0.75rem;
    font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.task-meeting-badge {
    padding: 0.125rem 0.5rem; border-radius: 6px; font-size: 0.65rem;
    font-weight: 600; background: rgba(139, 92, 246, 0.15); color: #8b5cf6;
    display: flex; align-items: center; gap: 0.25rem;
}
.task-due-date {
    display: flex; align-items: center; gap: 0.35rem;
    color: var(--text-secondary); font-size: 0.75rem; margin-bottom: 0.35rem;
    padding: 0.25rem 0.5rem; background: var(--bg-tertiary);
    border-radius: 6px; width: fit-content;
}
.task-due-date.overdue {
    background: rgba(239, 68, 68, 0.1); color: var(--danger); font-weight: 600;
}
.task-due-date.due-soon {
    background: rgba(245, 158, 11, 0.1); color: var(--warning); font-weight: 600;
}
.task-description {
    color: var(--text-secondary); font-size: 0.8rem;
    margin-bottom: 0.35rem; white-space: pre-wrap;
}
[data-theme="dark"] .task-description {color: var(--text-secondary); opacity: 0.9;}
[data-theme="dark"] .meeting-summary-date,
[data-theme="dark"] .customer-overview-label {
    color: var(--text-secondary); opacity: 0.85;
}
[data-theme="dark"] .inline-form-container {
    border: 1px solid var(--border); box-shadow: 0 0 40px rgba(0, 229, 221, 0.1);
}
[data-theme="dark"] .customer-header-banner {
    border: 1px solid rgba(0, 229, 221, 0.2);
    box-shadow: 0 4px 20px rgba(0, 229, 221, 0.15);
}
[data-theme="dark"] .form-section {border: 1px solid var(--border);}
[data-theme="dark"] .form-section:hover {
    border-color: rgba(0, 229, 221, 0.3);
    box-shadow: 0 0 20px rgba(0, 229, 221, 0.1);
}
[data-theme="dark"] .meeting-tab.active {
    box-shadow: 0 2px 6px rgba(0, 229, 221, 0.4), 0 0 20px rgba(0, 229, 221, 0.2);
}

.subtasks-container {
    margin: 0.35rem 0; padding-left: 0.5rem; border-left: 2px solid var(--border);
}
.subtask-item {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0; font-size: 0.75rem;
}
.subtask-checkbox {
    width: 14px; height: 14px; border: 2px solid var(--border);
    border-radius: 3px; cursor: pointer; flex-shrink: 0;
}
.subtask-checkbox.completed {background: var(--primary); border-color: var(--primary);}
.subtask-text.completed {text-decoration: line-through; opacity: 0.6;}
.task-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.35rem; gap: 0.5rem;
}
.task-tags {display: flex; gap: 0.35rem; flex-wrap: wrap; flex: 1;}
.tag {
    padding: 0.125rem 0.5rem; background: var(--bg-tertiary);
    border-radius: 6px; font-size: 0.7rem; color: var(--text-secondary);
}
.task-actions {display: flex; gap: 0.25rem;}
.task-btn {
    background: transparent; border: none; padding: 0.35rem;
    border-radius: 6px; cursor: pointer; color: var(--text-secondary); transition: all 0.2s;
}
.task-btn:hover {background: var(--bg-tertiary); color: var(--primary);}
.task-btn.delete:hover {background: rgba(239, 68, 68, 0.1); color: var(--danger);}
.task-btn.archive:hover {background: rgba(245, 158, 11, 0.1); color: var(--warning);}
.task-btn svg {width: 14px; height: 14px;}

.color-picker {display: flex; gap: 0.35rem; margin-top: 0.35rem;}
.color-option {
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
    border: 2px solid transparent; transition: all 0.2s;
}
.color-option:hover {transform: scale(1.1);}
.color-option.selected {border: 2px solid var(--text-primary); transform: scale(1.05);}

.notes-container {
    background: var(--bg-primary); border-radius: 12px; padding: 2.5rem 1rem 1rem 1rem;
    box-shadow: 0 1px 4px var(--shadow); position: sticky; top: 80px;
    max-height: calc(100vh - 100px); overflow-y: auto;
    transition: all 0.3s ease;
    min-height: 120px;
}
.notes-container.has-notes {
    min-height: 200px;
}
.notes-container.empty-notes {
    min-height: 120px;
}
.notes-container.hidden {display: none;}
.notes-container.collapsed-right {
    width: 50px !important; min-width: 50px; padding: 1rem 0.5rem; overflow: hidden;
}
.notes-container.collapsed-right .notes-section-content,
.notes-container.collapsed-right .timeline-section-content,
.notes-container.collapsed-right .section-title span,
.notes-container.collapsed-right .btn-add-note {
    display: none;
}
.notes-container.collapsed-right .collapsible-section-header {
    writing-mode: vertical-rl; text-orientation: mixed;
    justify-content: center; padding: 1rem 0;
}
.notes-container.collapsed-right .collapse-btn {
    transform: rotate(180deg);
}

/* Timeline Section */
.timeline-section {
    margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem;
}
.timeline-section:last-child {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.section-header-simple {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.25rem 0; margin-bottom: 0.5rem;
}
.timeline-section-content {
    max-height: 400px; overflow-y: auto; overflow-x: hidden;
}
.notes-section-content {
    flex: 1; overflow-y: auto;
}

/* Timeline Items */
.timeline-list {
    position: relative; padding-left: 2rem; margin-left: 0.5rem;
}
.timeline-list::before {
    content: ''; position: absolute; left: 0.35rem; top: 0.5rem; bottom: 0.5rem;
    width: 2px; background: linear-gradient(to bottom, var(--primary), var(--border));
    border-radius: 1px;
}
.timeline-item {
    position: relative; padding: 0.5rem 2rem 0.5rem 0.75rem;
    transition: all 0.2s;
}
.timeline-item:hover {
    background: var(--bg-secondary); 
    padding-left: 1.25rem;
    border-radius: 6px;
}
.timeline-dot {
    position: absolute; left: -1.96rem; top: 0.75rem; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid var(--bg-primary); z-index: 1;
    transition: all 0.2s;
}
.timeline-dot.meeting { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.timeline-dot.meeting-upcoming { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.timeline-dot.task-done { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.timeline-dot.task-pending { background: #6b7280; box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2); }
.timeline-dot.note { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); }
.timeline-dot.customer { background: var(--primary); box-shadow: 0 0 0 3px rgba(0, 206, 200, 0.2); }
.timeline-dot.prep { background: #ec4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2); }
.timeline-item:hover .timeline-dot {
    transform: scale(1.3);
}
.timeline-item-header {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.15rem;
}
.timeline-item-icon {
    font-size: 0.85rem;
}
.timeline-item-title {
    font-size: 0.8rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.timeline-item-meta {
    font-size: 0.7rem; color: var(--text-secondary);
    display: flex; align-items: center; gap: 0.35rem;
}
.timeline-item-type {
    background: var(--bg-tertiary); padding: 0.1rem 0.4rem; border-radius: 4px;
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
}
.timeline-date-separator {
    font-size: 0.65rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 0 0.25rem 0;
    border-top: 1px dashed var(--border); margin-top: 0.5rem;
}
.timeline-date-separator:first-child {
    border-top: none; margin-top: 0; padding-top: 0;
}
.timeline-empty {
    text-align: center; padding: 1.5rem 0.5rem; color: var(--text-secondary);
    font-size: 0.8rem;
}
.timeline-empty-icon {
    font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.5;
}

.sidebar-collapse-btn {
    position: absolute; top: 0.5rem; right: 0.5rem; background: var(--bg-tertiary);
    border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; color: var(--text-secondary); font-size: 0.8rem; z-index: 10;
}

.notes-container.collapsed-right .sidebar-collapse-btn {
    position: static; margin: 0 auto 1rem auto;
}

.notes-list {display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem;}
.note-box {
    border-radius: 10px; padding: 0.75rem; color: white;
    cursor: move; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative; animation: slideIn 0.2s ease-out;
}
[data-theme="dark"] .note-box {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 221, 0.1);
}
[data-theme="dark"] .note-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 221, 0.2);
}
.note-box:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.note-box.dragging {opacity: 0.7;}
.note-number {
    position: absolute; top: -10px; left: 8px;
    background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px);
    color: white; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 5;
}
.note-content {
    margin-bottom: 0.5rem; line-height: 1.4;
    white-space: pre-wrap; font-size: 0.8rem;
}
.note-actions {display: flex; justify-content: flex-end; gap: 0.35rem;}
.note-btn {
    background: rgba(255, 255, 255, 0.2); border: none; color: white;
    padding: 0.35rem; border-radius: 6px; cursor: pointer;
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; transition: all 0.2s;
}
.note-btn:hover {background: rgba(255, 255, 255, 0.3);}
.note-btn svg {width: 14px; height: 14px;}

.modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1000;
    align-items: center; justify-content: center; overflow-y: auto; padding: 1rem 0;
}
.modal.active {display: flex;}
body:has(.modal.active) { overflow: hidden; }
body:has(.modal.active) .container { overflow: hidden; }
body:has(.modal.active) .main-content { overflow: hidden; }
.modal-content {
    background: var(--bg-primary); border-radius: 12px; padding: 1.25rem;
    max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3); margin: auto;
}
.modal-content.large {max-width: 800px;}
.modal-content.xlarge {max-width: 1200px; width: 95%;}
.modal-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 1rem;
}
.modal-title {
    font-size: 1.25rem; font-weight: var(--font-bold);
    color: var(--text-primary); letter-spacing: -0.02em;
}
.close-btn {
    background: transparent; border: none; font-size: 1.5rem;
    cursor: pointer; padding: 0.25rem; border-radius: 6px;
    color: var(--text-secondary); transition: all 0.2s; line-height: 1;
}
.close-btn:hover {background: var(--bg-secondary); transform: rotate(90deg);}

.modal-tabs {
    display: flex; gap: 0.35rem; margin-bottom: 1rem;
    border-bottom: 2px solid var(--border); overflow-x: auto;
}
.modal-tab {
    padding: 0.5rem 1rem; background: transparent; border: none;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 0.35rem;
}
.modal-tab:hover {color: var(--text-primary); background: var(--bg-secondary);}
.modal-tab.active {
    color: white;
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    border-bottom-color: #023747;
    border-radius: 6px 6px 0 0;
}
.tab-content {display: none;}
.tab-content.active {display: block; animation: fadeIn 0.2s ease-out;}

.form-group {margin-bottom: 0.75rem;}
.form-label {
    display: block; margin-bottom: 0.35rem; font-weight: var(--font-medium);
    font-size: 0.8rem; color: var(--text-primary);
}
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.85rem; font-family: inherit;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 206, 200, 0.1);
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 2px rgba(0, 229, 221, 0.2), 0 0 20px rgba(0, 229, 221, 0.1);
}
.form-textarea {resize: vertical; min-height: 80px;}
.form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;}
.form-row-3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem;}
.form-footer {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--border);
}

/* Timeline Delete Button */
.timeline-item-actions {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.timeline-item:hover .timeline-item-actions {
    opacity: 1;
}

.timeline-delete-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.timeline-delete-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.timeline-delete-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.btn {
    padding: 0.5rem 1rem; border: none; border-radius: 8px;
    font-size: 0.85rem; font-weight: var(--font-semibold);
    cursor: pointer; transition: all 0.2s; letter-spacing: 0.01em;
}
.btn-primary {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; box-shadow: 0 2px 6px rgba(27, 168, 175, 0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #034857 0%, #1bb8bf 100%);
    transform: translateY(-1px); box-shadow: 0 4px 10px rgba(27, 168, 175, 0.5);
}
.btn-secondary {
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover {background: var(--bg-tertiary);}
.btn-danger {background: var(--danger); color: white;}
.btn-danger:hover {background: #dc2626; transform: translateY(-1px);}

.rich-text-toolbar {
    display: flex; gap: 0.35rem; padding: 0.5rem;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-bottom: none; border-radius: 8px 8px 0 0; flex-wrap: wrap;
}
.rich-text-btn {
    padding: 0.4rem 0.6rem; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
    transition: all 0.2s; min-width: 34px; display: flex;
    align-items: center; justify-content: center; gap: 0.25rem;
}
.rich-text-btn svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rich-text-btn:hover {
    background: var(--primary); color: white;
    border-color: var(--primary); transform: translateY(-1px);
}
.rich-text-select {
    padding: 0.3rem 0.4rem; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
    font-family: inherit; transition: all 0.2s; appearance: auto;
}
.rich-text-select:hover { border-color: var(--primary); }
.rich-text-select:focus { outline: none; border-color: var(--primary); }

/* Color picker */
.rich-text-color-picker { position: relative; display: inline-flex; }
.color-indicator {
    display: block; width: 14px; height: 3px; border-radius: 1px;
    background: #000; margin-top: 1px;
}
.color-dropdown {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 4px;
    background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px; gap: 4px; z-index: 20;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 4px 16px var(--shadow);
}
.color-dropdown.show { display: grid; }
.color-swatch {
    width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s;
}
.color-swatch:hover { transform: scale(1.2); border-color: var(--text-primary); }
.rich-text-btn.active {
    background: var(--primary); color: white; border-color: var(--primary);
}
.rich-text-editor {
    width: 100%; min-height: 150px; padding: 0.75rem;
    border: 1px solid var(--border); border-radius: 0 0 8px 8px;
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: 0.85rem; font-family: inherit; overflow-y: auto; line-height: 1.6;
}

.customer-activity-section.fullscreen {
    position: fixed; top: 60px; left: var(--sidebar-width); right: 0; bottom: 0;
    z-index: 1000; margin: 0; border-radius: 0; height: auto !important;
    background: var(--bg-primary); padding: 1.5rem;
}
.customer-activity-section.fullscreen .activity-list {
    max-height: calc(100vh - 170px);
}

.all-customers-section.fullscreen {
    position: fixed; top: 60px; left: var(--sidebar-width); right: 0; bottom: 0;
    z-index: 1000; margin: 0; border-radius: 0; height: auto !important;
    background: var(--bg-primary); padding: 1.5rem;
}
.all-customers-section.fullscreen .customers-list {
    height: calc(100vh - 170px);
}

.fullscreen-btn {
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); padding: 0.35rem 0.75rem; border-radius: 6px;
    cursor: pointer; font-size: 0.75rem; transition: all 0.2s;
}

/* Auth Styles */
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 0.8rem; cursor: pointer;
}
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ========== AI BUTTON STYLES - START ========== */
/* ✅ KEEP THIS - Works for both local and Firebase */

.ai-btn {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.1)) !important;
    border: 1px solid rgba(102, 126, 234, 0.4) !important;
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.ai-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-color: #667eea !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ai-btn:active {
    transform: translateY(0);
}

/* Loading state for editor */
.editor-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.editor-loading::after {
    content: '🤖 AI is improving your text...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow);
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    z-index: 10;
    border: 2px solid var(--primary);
}

[data-theme="dark"] .editor-loading::after {
    background: var(--bg-secondary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 40px rgba(102, 126, 234, 0.3);
}

/* AI improvement badge styles */
/* AI Inline Comparison */
.ai-inline-comparison {
    border: 2px solid var(--primary);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.5rem;
    resize: vertical;
    min-height: 250px;
    height: 450px;
}
.ai-inline-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(2,55,71,.08), rgba(27,168,175,.06));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-inline-title {
    font-size: 0.85rem; font-weight: 700; color: var(--primary);
}
.ai-inline-actions { display: flex; gap: 0.5rem; }
.ai-inline-actions .btn-sm {
    padding: 0.3rem 0.75rem; font-size: 0.75rem; border-radius: 6px;
}
.ai-inline-columns {
    display: grid; grid-template-columns: 1fr 1fr;
    flex: 1; overflow: hidden;
    height: calc(100% - 42px);
}
.ai-inline-col {
    display: flex; flex-direction: column; overflow: hidden;
}
.ai-inline-col:first-child {
    border-right: 1px solid var(--border);
}
.ai-inline-label {
    padding: 0.4rem 0.75rem; font-size: 0.7rem; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--border); background: var(--bg-secondary);
    flex-shrink: 0;
}
.ai-editable-hint {
    text-transform: none; font-weight: 500; font-style: italic;
    color: var(--primary); letter-spacing: 0; font-size: 0.65rem;
}
.ai-inline-content {
    padding: 0.75rem; overflow-y: auto; flex: 1;
    font-size: 0.85rem; line-height: 1.7; color: var(--text-primary);
    min-height: 0;
}
.ai-inline-content.ai-original {
    opacity: 0.6; background: var(--bg-secondary);
}
.ai-inline-content.ai-improved {
    background: rgba(16,185,129,.03);
    cursor: text;
}
.ai-inline-content.ai-improved:focus {
    outline: none; background: rgba(16,185,129,.06);
}
@media (max-width: 700px) {
    .ai-inline-columns { grid-template-columns: 1fr; }
    .ai-inline-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ========== AI BUTTON STYLES - END ========== */

.rich-text-editor:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 206, 200, 0.1);
}
.rich-text-editor ul, .rich-text-editor ol {margin-left: 1.5rem; margin-bottom: 0.5rem;}
.rich-text-editor li {margin-bottom: 0.25rem;}
.rich-text-editor p {margin-bottom: 0.5rem;}
.rich-text-editor strong {font-weight: 700;}
.rich-text-editor em {font-style: italic;}
.rich-text-editor u {text-decoration: underline;}

.meddpicc-toolbar, .action-item-toolbar {
    margin-top: 0.5rem; padding: 0.75rem; background: var(--bg-tertiary);
    border-radius: 8px; border: 1px solid var(--border);
}
.meddpicc-toolbar-label, .action-item-toolbar-label {
    font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.35rem;
}
.meddpicc-toolbar-label svg, .action-item-toolbar-label svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.meddpicc-toolbar-buttons, .action-item-toolbar-buttons {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.meddpicc-quick-btn, .action-item-quick-btn {
    padding: 0.4rem 0.75rem; background: var(--bg-primary);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.75rem; font-weight: 500; cursor: pointer;
    transition: all 0.2s; color: var(--text-primary); white-space: nowrap;
    display: flex; align-items: center; gap: 0.35rem; position: relative;
}
.meddpicc-info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%; background: var(--text-secondary);
    color: white; font-size: 0.6rem; font-weight: 700;
    cursor: help; margin-left: 0.25rem; position: relative;
}
.meddpicc-info-icon:hover {background: var(--primary);}
.meddpicc-tooltip {
    position: fixed; bottom: auto; left: 50%; transform: translateX(-50%) translateY(-100%);
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.75rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 10000; width: 320px; display: none; pointer-events: none;
}
.meddpicc-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border);
}
.meddpicc-tooltip::before {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 5px solid transparent;
    border-top-color: var(--bg-primary); z-index: 1;
}
.meddpicc-info-icon:hover .meddpicc-tooltip {display: block;}
.meddpicc-quick-btn:hover .meddpicc-tooltip {display: block;}
.meddpicc-tooltip-title {
    font-weight: 700; font-size: 0.8rem; margin-bottom: 0.35rem; color: var(--primary);
}
.meddpicc-tooltip-description {font-size: 0.75rem; line-height: 1.4; color: var(--text-primary);}
.meddpicc-quick-btn:hover {
    background: var(--primary); color: white;
    border-color: var(--primary); transform: translateY(-1px);
}
.meddpicc-quick-btn.meddpicc-filled {
    background: var(--primary); color: white;
    border-color: var(--primary);
}
/* Per-button colors when filled */
.meddpicc-quick-btn[data-field="metrics"].meddpicc-filled { background: #f472b6; border-color: #f472b6; }
.meddpicc-quick-btn[data-field="economicBuyer"].meddpicc-filled { background: #fb923c; border-color: #fb923c; }
.meddpicc-quick-btn[data-field="decisionCriteria"].meddpicc-filled { background: #fbbf24; border-color: #fbbf24; color: #422006; }
.meddpicc-quick-btn[data-field="decisionProcess"].meddpicc-filled { background: #a3e635; border-color: #a3e635; color: #1a2e05; }
.meddpicc-quick-btn[data-field="paperProcess"].meddpicc-filled { background: #34d399; border-color: #34d399; color: #022c22; }
.meddpicc-quick-btn[data-field="pain"].meddpicc-filled { background: #22d3ee; border-color: #22d3ee; color: #083344; }
.meddpicc-quick-btn[data-field="champion"].meddpicc-filled { background: #818cf8; border-color: #818cf8; }
.meddpicc-quick-btn[data-field="competition"].meddpicc-filled { background: #c084fc; border-color: #c084fc; }
.meddpicc-quick-btn.meddpicc-filled:hover {
    opacity: 0.85; transform: translateY(-1px);
}
.action-item-quick-btn:hover {
    background: var(--success); color: white;
    border-color: var(--success); transform: translateY(-1px);
}
.meddpicc-quick-btn.success-flash, .action-item-quick-btn.success-flash {
    background: var(--success); color: white;
    border-color: var(--success); animation: successPulse 0.5s ease-out;
}
@keyframes successPulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.05);}
    100% {transform: scale(1);}
}

.task-status {
    padding: 0.125rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.task-status:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.status-todo {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}
.status-todo:hover {
    background: rgba(107, 114, 128, 0.25);
}
.status-in-progress {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}
.status-in-progress:hover {
    background: rgba(59, 130, 246, 0.25);
}
.status-done {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.status-done:hover {
    background: rgba(16, 185, 129, 0.25);
}

.subtasks-form {margin-top: 0.35rem;}
.subtask-input-group {display: flex; gap: 0.35rem; margin-bottom: 0.35rem;}
.subtask-input {flex: 1;}
.btn-add-subtask {
    padding: 0.35rem 0.75rem; background: var(--bg-tertiary);
    border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; color: var(--text-primary); font-size: 0.8rem;
}
.btn-add-subtask:hover {
    background: var(--primary); color: white; border-color: var(--primary);
}
.btn-remove-subtask {
    padding: 0.35rem; background: var(--danger); color: white;
    border: none; border-radius: 6px; cursor: pointer;
}

.participants-list {
    margin-top: 0.5rem; padding: 0.75rem;
    background: var(--bg-secondary); border-radius: 6px;
}
.participant-item {
    padding: 0.5rem; background: var(--bg-tertiary); border-radius: 6px;
    margin-bottom: 0.35rem; display: flex; justify-content: space-between; align-items: center;
}
.participant-info {flex: 1;}
.participant-name {font-weight: 600; margin-bottom: 0.125rem; font-size: 0.8rem;}
.participant-role {font-size: 0.75rem; color: var(--text-secondary);}
.btn-remove-participant {
    background: var(--danger); color: white; border: none;
    padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
}

.meeting-tasks-list {
    margin-top: 0.5rem; padding: 0.75rem; background: var(--bg-secondary);
    border-radius: 6px; max-height: 200px; overflow-y: auto;
}
.meeting-task-preview {
    padding: 0.5rem; background: var(--bg-tertiary); border-radius: 6px;
    margin-bottom: 0.35rem; display: flex; justify-content: space-between;
    align-items: center; font-size: 0.8rem;
}
.btn-remove-meeting-task {
    background: var(--danger); color: white; border: none;
    padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
}

.export-content {background: var(--bg-secondary); border-radius: 8px; padding: 0.75rem;}
.export-preview {
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.75rem; margin-bottom: 0.5rem;
    max-height: 300px; overflow-y: auto; font-family: 'Courier New', monospace;
    font-size: 0.75rem; white-space: pre-wrap;
}
.export-actions {display: flex; gap: 0.35rem;}
.btn-export {
    flex: 1; padding: 0.5rem 1rem; border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.8rem; font-weight: var(--font-semibold);
    cursor: pointer; transition: all 0.2s; background: var(--bg-secondary);
    color: var(--text-primary); box-shadow: none;
}


.customer-list {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 350px; overflow-y: auto;
}
.customer-item {
    padding: 0.75rem; background: var(--bg-secondary); border-radius: 6px;
    display: flex; justify-content: space-between; align-items: center;
}
.customer-info {flex: 1;}
.customer-name {font-weight: 600; margin-bottom: 0.125rem; font-size: 0.85rem;}
.customer-email {font-size: 0.75rem; color: var(--text-secondary);}
.customer-actions {display: flex; gap: 0.35rem;}

.modal-content.fullscreen {
    position: fixed;
    top: 60px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    max-width: none !important;
    width: auto !important;
    max-height: none !important;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal:has(.modal-content.fullscreen) {
    overflow: hidden;
    padding: 0;
}

.modal-content.fullscreen .modal-header {
    flex-shrink: 0;
}

.modal-content.fullscreen .modal-tabs {
    flex-shrink: 0;
}

.modal-content.fullscreen .tab-content.active {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.fullscreen #consolidatedNotesContent {
    flex: 1;
    max-height: none;
    height: 100%;
    overflow-y: auto;
}

/* Default (non-fullscreen) state for consolidated notes */
#consolidatedNotesContent {
    max-height: 70vh;
    overflow-y: auto;
}

.modal-content.fullscreen .export-preview {
    max-height: calc(100vh - 250px);
}

.tags-overview-content {
    display: grid; grid-template-columns: 250px 1fr; gap: 1rem; max-height: 70vh;
}
.tags-list-section {
    border-right: 1px solid var(--border); padding-right: 1rem; overflow-y: auto;
}
.tag-item {
    padding: 0.5rem; background: var(--bg-secondary); border-radius: 6px;
    margin-bottom: 0.35rem; cursor: pointer; transition: all 0.2s;
    display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem;
}
.tag-item:hover {background: var(--bg-tertiary); transform: translateX(2px);}
.tag-item.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white;
}
.tag-item-name {font-weight: 600;}
.tag-item-count {
    font-size: 0.75rem; background: var(--bg-tertiary);
    padding: 0.125rem 0.35rem; border-radius: 4px;
}
.tag-item.active .tag-item-count {background: rgba(255, 255, 255, 0.2);}
.customers-by-tag-section {overflow-y: auto;}
.customer-tag-card {
    background: var(--bg-secondary); border-radius: 8px;
    padding: 0.75rem; margin-bottom: 0.5rem;
}
.customer-tag-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 0.5rem;
}
.customer-tag-name {font-size: 1rem; font-weight: 600;}
.meetings-count-badge {
    background: var(--primary); color: white;
    padding: 0.125rem 0.5rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 600;
}
.meetings-list-compact {display: flex; flex-direction: column; gap: 0.35rem;}
.meeting-compact-item {
    padding: 0.5rem; background: var(--bg-tertiary);
    border-radius: 6px; font-size: 0.8rem;
}
.meeting-compact-date {
    color: var(--text-secondary); font-size: 0.7rem; margin-top: 0.125rem;
}

.meeting-card {
    background: var(--bg-secondary); border-radius: 8px;
    padding: 0.75rem; margin-bottom: 0.5rem; border-left: 3px solid #667eea;
}
.meeting-header {
    display: flex; justify-content: space-between;
    align-items: start; margin-bottom: 0.5rem;
}
.meeting-info h3 {font-size: 0.95rem; margin-bottom: 0.25rem;}
.meeting-date {color: var(--text-secondary); font-size: 0.75rem;}
.meeting-notes {
    color: var(--text-secondary); font-size: 0.8rem;
    margin-bottom: 0.5rem; white-space: pre-wrap;
}
.meeting-tasks {margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border);}
.meeting-tasks-title {
    font-size: 0.75rem; font-weight: 600;
    margin-bottom: 0.35rem; color: var(--text-secondary);
}
.meeting-task-item {
    padding: 0.35rem; background: var(--bg-tertiary);
    border-radius: 4px; margin-bottom: 0.25rem; font-size: 0.75rem;
}
.meeting-tag {
    display: inline-block; padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white; border-radius: 8px; font-size: 0.7rem;
    font-weight: 600; margin-right: 0.35rem; margin-bottom: 0.35rem;
}

.meddpicc-section {margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid var(--border);}
.meddpicc-section-title {
    font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.35rem;
}
.meddpicc-grid, .meddpicc-form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;}
.meddpicc-field {background: var(--bg-tertiary); padding: 0.5rem; border-radius: 6px;}
.meddpicc-field-label {
    font-size: 0.65rem; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; margin-bottom: 0.25rem;
    display: flex; align-items: center; gap: 0.25rem;
}
.meddpicc-field-value {font-size: 0.75rem; color: var(--text-primary); white-space: pre-wrap;}
.meddpicc-field.empty .meddpicc-field-value {
    color: var(--text-secondary); font-style: italic;
}

.empty-state {
    text-align: center; padding: 2rem 1rem; color: var(--text-secondary);
    background: var(--bg-secondary); border-radius: 8px; margin: 0.5rem 0;
}
.empty-state-icon {font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5;}

.confirm-modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    z-index: 1001; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out;
}
.confirm-modal.active {display: flex;}
.confirm-content {
    background: var(--bg-primary); border-radius: 12px; padding: 1.25rem;
    max-width: 400px; width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    text-align: center; animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}
.confirm-icon {font-size: 2rem; margin-bottom: 0.5rem;}
.confirm-title {font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem;}
.confirm-message {
    color: var(--text-secondary); margin-bottom: 1rem;
    line-height: 1.4; font-size: 0.85rem;
}
.confirm-actions {display: flex; gap: 0.5rem; justify-content: center;}

.toast {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%) translateY(100px);
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.75rem 1rem; box-shadow: 0 4px 12px var(--shadow);
    z-index: 1001; transition: transform 0.3s; font-size: 0.85rem;
}
.toast.active {transform: translateX(-50%) translateY(0);}
.toast.success {border-left: 3px solid var(--success);}
.toast.error {border-left: 3px solid var(--danger);}

@media (max-width: 1200px) {
    .container {grid-template-columns: 1fr;}
    .notes-container {position: relative; top: 0; max-height: none;}
    .kanban-board {grid-template-columns: 1fr;}
    .form-row-3 {grid-template-columns: 1fr;}
    .tags-overview-content {grid-template-columns: 1fr;}
    .tags-list-section {
        border-right: none; border-bottom: 1px solid var(--border);
        padding-right: 0; padding-bottom: 0.5rem; margin-bottom: 0.5rem;
    }
    .meddpicc-items {grid-template-columns: repeat(2, 1fr);}
    .meddpicc-grid, .meddpicc-form-grid {grid-template-columns: 1fr;}
    .customer-overview-grid {grid-template-columns: 1fr;}
}
@media (max-width: 768px) {
    :root {--sidebar-width: 0;}
    .sidebar {transform: translateX(-100%);}
    .header, .container {margin-left: 0;}
    .form-row {grid-template-columns: 1fr;}
    .modal-content.xlarge, .modal-content.large {width: 95%; padding: 1rem;}
    .modal-tabs {overflow-x: scroll;}
    .inline-form-container {padding: 1rem 1.5rem; max-width: 100%;}
}

/* ========== CONSOLIDATED GREEN GRADIENT HOVER - START ========== */
.fullscreen-btn:hover,
.sidebar-collapse-btn:hover,
.btn-schedule-meeting:hover,
.btn-add-meeting:hover,
.btn-add-participant:hover,
.btn-add-tab:hover,
.empty-state-add-btn:hover,
.btn-view-all-notes:hover,
.meeting-summary-notes-toggle:hover,
.rich-text-btn:hover,
.meddpicc-quick-btn:hover,
.template-btn:hover,
.btn-export:hover {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%) !important;
    color: white !important;
    border-color: #023747 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(27, 168, 175, 0.5);
}
/* ========== CONSOLIDATED GREEN GRADIENT HOVER - END ========== */


/* ========== SVG ICON SYSTEM ========== */
.cn-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* MEDDPICC tracker icons with SVG */
.meddpicc-tracker-icon .cn-ico,
.meddpicc-tracker-icon .cn-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.meddpicc-tracker-icon .cn-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* MEDDPICC quick-add buttons with SVG */
.meddpicc-quick-btn .cn-ico,
.meddpicc-quick-btn .cn-icon {
    width: 0.85rem;
    height: 0.85rem;
}
.meddpicc-quick-btn .cn-ico {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
}
.meddpicc-quick-btn.meddpicc-filled .cn-ico svg,
.meddpicc-quick-btn.meddpicc-filled .cn-icon svg {
    stroke: white;
}


/* ========== NOTES VIEWER & COMBINER ========== */
.combine-layout {
    display: grid; grid-template-columns: 260px 1fr;
    gap: 1rem; height: 100%;
}
.combine-picker {
    border-right: 2px solid var(--border); padding-right: 1rem;
    overflow-y: auto;
}
.combine-picker-item {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.6rem 0.5rem; border-radius: 8px; cursor: pointer;
    transition: all 0.2s; border: 1px solid transparent;
}
.combine-picker-item:hover { background: var(--bg-secondary); }
.combine-picker-item.selected {
    background: linear-gradient(135deg, rgba(0, 206, 200, 0.08), rgba(0, 168, 163, 0.04));
    border-color: var(--primary);
}
.combine-picker-item input[type="checkbox"] {
    margin-top: 0.2rem; cursor: pointer; flex-shrink: 0;
    width: 16px; height: 16px; accent-color: var(--primary);
}
.combine-picker-info { flex: 1; min-width: 0; }
.combine-picker-title {
    font-weight: 600; font-size: 0.85rem; margin-bottom: 0.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combine-picker-date { font-size: 0.7rem; color: var(--text-secondary); }
.combine-picker-type {
    display: inline-block; font-size: 0.65rem; font-weight: 600;
    padding: 0.1rem 0.4rem; border-radius: 4px; margin-top: 0.2rem;
}
.combine-picker-type.call {
    background: rgba(59, 130, 246, 0.15); color: #3b82f6;
}
.combine-picker-type.meeting {
    background: rgba(16, 185, 129, 0.15); color: #10b981;
}

/* Side-by-side panels */
.combine-panels {
    display: flex; gap: 1rem; overflow-x: auto;
    align-items: stretch;
}
.combine-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; color: var(--text-tertiary); font-style: italic;
    font-size: 0.9rem;
}
.combine-panel {
    flex: 1; min-width: 320px;
    background: var(--bg-secondary); border-radius: 10px;
    border: 2px solid var(--border); overflow: hidden;
    display: flex; flex-direction: column;
}
.combine-panel-header {
    padding: 0.75rem 1rem; border-bottom: 2px solid var(--border);
    background: var(--bg-tertiary);
}
.combine-panel-title {
    font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem;
}
.combine-panel-meta {
    font-size: 0.75rem; color: var(--text-secondary);
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.combine-panel-body {
    padding: 1rem 1.25rem; font-size: 0.88rem; line-height: 1.75;
    flex: 1; overflow-y: auto; color: var(--text-primary);
}
.combine-panel-body .combine-panel-notes-text {
    white-space: pre-wrap; word-break: break-word;
}
.combine-panel-body .combine-panel-notes-text p { margin-bottom: 0.5rem; }
.combine-panel-body .combine-panel-notes-text ul,
.combine-panel-body .combine-panel-notes-text ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
.combine-panel-section-label {
    font-size: 0.9rem; font-weight: 700;
    color: #023747; margin: 1rem 0 0.5rem;
    padding-left: 0.6rem;
    border-left: 3px solid #023747;
    letter-spacing: 0.01em;
}
.combine-panel-section-label:first-child { margin-top: 0; }
[data-theme="dark"] .combine-panel-section-label { color: #1ba8af; border-left-color: #1ba8af; }

/* Clickable meeting cards */
.customer-meeting-summary { cursor: pointer; }
.customer-meeting-summary:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 206, 200, 0.15);
}

/* Participant tags in panel header */
.combine-panel-participants {
    display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem;
}
.combine-participant-tag {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.75rem;
    font-weight: 600; background: var(--bg-primary); border: 1px solid var(--border);
    color: var(--text-primary);
}
.combine-participant-detail {
    font-weight: 400; color: var(--text-secondary); font-size: 0.7rem;
    margin-left: 0.15rem;
}

/* Edit button in panel header */
.combine-panel-edit-btn {
    padding: 0.35rem 0.75rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg-primary); cursor: pointer; font-size: 0.75rem;
    font-weight: 600; color: var(--text-secondary); white-space: nowrap;
    transition: all 0.2s; flex-shrink: 0;
}
.combine-panel-edit-btn:hover {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747;
    transform: translateY(-1px); box-shadow: 0 2px 8px rgba(27, 168, 175, 0.4);
}

@media (max-width: 768px) {
    .combine-layout { grid-template-columns: 1fr; }
    .combine-picker { border-right: none; border-bottom: 2px solid var(--border); padding-right: 0; padding-bottom: 1rem; max-height: 200px; }
    .combine-panels { flex-direction: column; }
    .combine-panel { max-width: 100%; min-width: 100%; }
}


/* ========== MEETINGS VIEW TOGGLE ========== */
.meetings-view-toggle {
    display: flex; gap: 2px; margin-left: auto; flex-shrink: 0;
    background: var(--bg-tertiary); border-radius: 6px; padding: 2px;
}
.meetings-view-btn {
    width: 28px; height: 28px; border: none; border-radius: 5px;
    background: transparent; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-tertiary);
    transition: all 0.2s;
}
.meetings-view-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.meetings-view-btn.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; box-shadow: 0 1px 4px rgba(27, 168, 175, 0.3);
}

/* ========== MEETINGS LIST VIEW ========== */
.meetings-list-view { margin-top: 0.5rem; }
.meetings-list-header {
    display: grid; grid-template-columns: 2fr 1.2fr 0.8fr 1.5fr 0.8fr 110px;
    gap: 0.75rem; padding: 0.5rem 0.75rem; margin-bottom: 0.25rem;
    border-bottom: 2px solid var(--border);
}
.meetings-list-header > div {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-secondary);
}
.meetings-list-row {
    display: grid; grid-template-columns: 2fr 1.2fr 0.8fr 1.5fr 0.8fr 110px;
    gap: 0.75rem; padding: 0.6rem 0.75rem; align-items: center;
    background: var(--bg-secondary); border-radius: 8px; margin-bottom: 0.3rem;
    cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent;
}
.meetings-list-row:hover {
    background: var(--bg-tertiary); transform: translateX(4px);
    box-shadow: 0 2px 8px var(--shadow); border-left-color: var(--primary);
}
.mlr-title { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-date { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.mlr-type { font-size: 0.8rem; }
.mlr-participants { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-notes { font-size: 0.8rem; }
.mlr-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; justify-content: flex-end; align-items: center; }
.meetings-list-row:hover .mlr-actions { opacity: 1; }
.mlr-actions .meeting-action-btn {
    width: 26px; height: 26px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.mlr-actions .meeting-action-btn svg { width: 13px; height: 13px; }


/* ========== SETTINGS PANEL ========== */
.settings-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.settings-gear-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-secondary); cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-secondary);
    transition: all 0.2s; flex-shrink: 0;
}
.settings-gear-btn:hover {
    color: var(--text-primary); background: var(--bg-tertiary);
    transform: rotate(30deg);
}
.settings-gear-btn svg { width: 18px; height: 18px; }

.settings-panel {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 32px var(--shadow);
    min-width: 220px; z-index: 1000; padding: 0.5rem;
    animation: settingsSlide 0.15s ease-out;
}
.settings-panel.active { display: block; }
@keyframes settingsSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.settings-panel-header {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-secondary);
    padding: 0.5rem 0.75rem 0.35rem;
}
.settings-item {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.75rem; border: none; background: transparent;
    color: var(--text-primary); font-size: 0.85rem; font-weight: 500;
    cursor: pointer; border-radius: 8px; transition: all 0.15s;
    text-align: left;
}
.settings-item:hover { background: var(--bg-secondary); }
.settings-item svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--text-secondary); }
.settings-item:hover svg { stroke: var(--primary); }
.settings-item.danger { color: var(--danger); }
.settings-item.danger svg { stroke: var(--danger); }
.settings-item.danger:hover { background: rgba(239, 68, 68, 0.08); }
.settings-divider {
    height: 1px; background: var(--border); margin: 0.35rem 0.5rem;
}


/* ========== ACCOUNT SETTINGS ROWS ========== */
.settings-card {
    background: var(--bg-secondary); border-radius: 10px;
    border: 1px solid var(--border); overflow: hidden;
}
.settings-card-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; gap: 1rem;
}
.settings-card-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.settings-card-desc { font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.15rem; }

/* On/Off toggle radio group */
.toggle-switch-group {
    display: flex; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); flex-shrink: 0;
}
.toggle-radio {
    cursor: pointer; display: flex; align-items: center;
}
.toggle-radio input { display: none; }
.toggle-radio span {
    padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600;
    color: var(--text-secondary); background: var(--bg-primary);
    transition: all 0.15s; user-select: none;
}
.toggle-radio input:checked + span {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white;
}

/* Threshold rows */
.settings-thresholds {
    border-top: 1px solid var(--border); padding: 0.5rem 1rem 0.75rem;
}
.settings-threshold-row {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0;
}
.settings-threshold-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.settings-number {
    width: 56px; padding: 0.3rem 0.4rem; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg-primary); color: var(--text-primary);
    font-size: 0.85rem; text-align: center; font-weight: 600;
}
.settings-number:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,206,200,0.15); }


/* Settings card buttons (export/import/clear) */
.settings-card-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.65rem 1rem; border: none; background: transparent;
    color: var(--text-primary); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.settings-card-btn:hover { background: var(--bg-tertiary); }
.settings-card-btn svg { flex-shrink: 0; stroke: var(--text-secondary); }
.settings-card-btn:hover svg { stroke: var(--primary); }

/* Settings select dropdown */
.settings-select {
    padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary); font-size: 0.8rem;
    font-weight: 600; cursor: pointer; min-width: 130px;
}
.settings-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,206,200,0.15); }


/* ========== TABLES ========== */
#tablesSection {
    grid-column: 1 / -1;
}
.container.tables-mode { grid-template-columns: 1fr !important; }
.container.tables-mode .notes-container { display: none; }

/* Tabs */
.tbl-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.tbl-tab {
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-bottom: none;
    border-radius: 8px 8px 0 0; background: transparent; color: var(--text-secondary);
    font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    position: relative; top: 2px;
}
.tbl-tab:hover { background: var(--bg-secondary); color: var(--text-primary); }
.tbl-tab.active {
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; border-color: #023747;
}
.tbl-tab-name { cursor: pointer; }
.tbl-tab-actions { display: flex; gap: 0.1rem; opacity: 0; transition: opacity 0.15s; margin-left: 0.25rem; }
.tbl-tab:hover .tbl-tab-actions { opacity: 1; }
.tbl-tab.active .tbl-tab-actions { opacity: 0.8; }
.tbl-tab-btn {
    width: 18px; height: 18px; border: none; background: transparent; color: inherit;
    cursor: pointer; font-size: 0.7rem; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; opacity: 0.7;
}
.tbl-tab-btn:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.tbl-tab-btn-del:hover { color: #ef4444; }
.tbl-tab-add {
    border: 1px dashed var(--border); border-bottom: none; color: var(--text-tertiary);
    font-size: 1.1rem; padding: 0.5rem 0.85rem; font-weight: 400;
}
.tbl-tab-add:hover { border-color: var(--primary); color: var(--primary); }
.tbl-tab-name-input {
    border: 1px solid var(--primary); border-radius: 4px; padding: 0.15rem 0.4rem;
    font-size: 0.8rem; font-weight: 600; font-family: inherit;
    background: var(--bg-primary); color: var(--text-primary); outline: none;
    box-shadow: 0 0 0 2px rgba(0,206,200,0.2);
}

/* Table */
.tbl-scroll { overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tbl-th {
    padding: 0.55rem 0.75rem; text-align: left; font-size: 0.7rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-secondary); border-bottom: 2px solid var(--border);
    background: var(--bg-secondary); white-space: nowrap; overflow: hidden;
}
.tbl-th-name { overflow: hidden; text-overflow: ellipsis; cursor: text; display: inline-flex; align-items: center; }
.tbl-th-name:hover { color: var(--primary); }
.tbl-th-edit-icon {
    width: 0; height: 14px; opacity: 0; margin-left: 0;
    transition: width 0.2s ease, opacity 0.2s ease, margin-left 0.2s ease;
    flex-shrink: 0;
}
.tbl-th-name:hover .tbl-th-edit-icon {
    width: 14px; opacity: 1; margin-left: 4px;
}
.tbl-th-type { font-size: 0.55rem; color: var(--text-tertiary); font-weight: 500; text-transform: capitalize; }
.tbl-th-num {
    width: 40px; min-width: 40px; max-width: 40px; text-align: center;
    font-size: 0.7rem; color: var(--text-tertiary); font-weight: 600;
    border-bottom: 2px solid var(--border); background: var(--bg-secondary); padding: 0.55rem 0.25rem;
}
.tbl-td {
    padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border);
    font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; overflow: hidden;
}
.tbl-td-num {
    text-align: center; font-size: 0.75rem; color: var(--text-tertiary);
    border-bottom: 1px solid var(--border); padding: 0.55rem 0.25rem;
    width: 40px; min-width: 40px;
}
.tbl-td-empty { color: var(--text-tertiary); }
.tbl-row:hover { background: var(--bg-secondary); }
.tbl-empty { color: var(--text-tertiary); }
.tbl-placeholder { color: var(--text-tertiary); font-style: italic; font-size: 0.8rem; opacity: 0.6; }
.tbl-inline-select {
    width: 100%; padding: 0.2rem 0.3rem; border: 1px solid var(--border);
    border-radius: 4px; background: var(--bg-primary); color: var(--text-primary);
    font-size: 0.8rem; cursor: pointer; outline: none;
    appearance: auto;
}
.tbl-inline-select:focus { border-color: var(--primary); }
.tbl-currency { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Badges */
.tbl-badge {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600;
}
.tbl-badge-prospect    { background: rgba(59,130,246,0.15); color: #3b82f6; }
.tbl-badge-active      { background: rgba(16,185,129,0.15); color: #10b981; }
.tbl-badge-negotiation { background: rgba(245,158,11,0.15); color: #f59e0b; }
.tbl-badge-won         { background: rgba(16,185,129,0.25); color: #059669; }
.tbl-badge-lost        { background: rgba(239,68,68,0.15); color: #ef4444; }
.tbl-badge-high        { color: #ef4444; }
.tbl-badge-high::before   { content: '● '; }
.tbl-badge-medium      { color: #f59e0b; }
.tbl-badge-medium::before { content: '● '; }
.tbl-badge-low         { color: #10b981; }
.tbl-badge-low::before    { content: '● '; }

/* Summary */
.tbl-summary { background: var(--bg-secondary); }
.tbl-td-sum { font-weight: 700; font-size: 0.8rem; color: var(--text-secondary); }

/* Add row */
.tbl-add-row {
    padding: 0.55rem 1rem; color: var(--text-tertiary); font-size: 0.8rem;
    cursor: pointer; transition: all 0.15s;
}
.tbl-add-row:hover { color: var(--primary); background: var(--bg-secondary); border-radius: 0 0 8px 8px; }

/* Cell editing */
.tbl-td { cursor: pointer; }
.tbl-td:hover { background: rgba(0, 206, 200, 0.05); }
.tbl-td-editing { padding: 0.2rem 0.35rem; background: var(--bg-secondary) !important; }
.tbl-cell-input {
    width: 100%; padding: 0.3rem 0.5rem; border: 1px solid var(--primary);
    border-radius: 4px; background: var(--bg-primary); color: var(--text-primary);
    font-size: 0.85rem; outline: none; box-shadow: 0 0 0 2px rgba(0,206,200,0.15);
    font-family: inherit;
}
.tbl-cell-textarea {
    resize: vertical; min-height: 2rem; max-height: 200px;
    line-height: 1.5; white-space: pre-wrap;
}

/* Row delete */
.tbl-td-actions {
    width: 36px; min-width: 36px; max-width: 36px; text-align: center;
    border-bottom: 1px solid var(--border); padding: 0;
}
.tbl-row-del {
    width: 24px; height: 24px; border: none; background: transparent;
    color: var(--text-tertiary); cursor: pointer; font-size: 1rem;
    border-radius: 4px; opacity: 0; transition: all 0.15s;
}
.tbl-row:hover .tbl-row-del { opacity: 1; }
.tbl-row-del:hover { background: rgba(239,68,68,0.1); color: #ef4444; }


/* Table toolbar */
.tbl-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.tbl-toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tbl-toolbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tbl-toolbar-title { font-size: 1.1rem; font-weight: 700; margin-right: 0.5rem; }
.tbl-tool-btn {
    padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary); color: var(--text-primary); font-size: 0.8rem;
    font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.tbl-tool-btn:hover { background: var(--bg-tertiary); border-color: var(--primary); }
.tbl-search {
    padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary); color: var(--text-primary); font-size: 0.8rem; width: 180px;
}
.tbl-search:focus { outline: none; border-color: var(--primary); }

/* Column header content */
.tbl-th-content { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.tbl-th-label { cursor: pointer; display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; }
.tbl-th-sort { color: var(--primary); font-size: 0.8rem; }
.tbl-th-actions { display: flex; gap: 0.1rem; flex-shrink: 0; }
.tbl-th-btn {
    width: 20px; height: 20px; border: none; background: transparent;
    color: var(--text-tertiary); cursor: pointer; font-size: 0.7rem;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.tbl-th-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }


/* ========== CONTEXT MENUS ========== */
.ctx-menu {
    display: none; position: fixed; z-index: 10000;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 32px var(--shadow);
    padding: 0.4rem; min-width: 200px;
    animation: ctxSlide 0.12s ease-out;
}
.ctx-menu.active { display: block; }
@keyframes ctxSlide {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.ctx-item {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.75rem; border: none; background: transparent;
    color: var(--text-primary); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; border-radius: 6px; transition: background 0.1s;
    text-align: left;
}
.ctx-item:hover { background: var(--bg-secondary); }
.ctx-item svg { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--text-secondary); }
.ctx-item:hover svg { stroke: var(--primary); }
.ctx-divider { height: 1px; background: var(--border); margin: 0.25rem 0.5rem; }

/* Table row selection */
.tbl-row.selected { background: rgba(0, 206, 200, 0.08); }
.tbl-row.selected td { background: rgba(0, 206, 200, 0.04); }
.tbl-select-cb { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }


/* ========== COLUMN TYPE PICKER ========== */
.col-type-panel {
    display: none; position: fixed; z-index: 9999;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 12px 40px var(--shadow);
    width: 300px; padding: 0.85rem; max-height: 85vh; overflow-y: auto;
}
.col-type-panel.active { display: block; animation: colTypePanelSlide 0.12s ease-out; }
@keyframes colTypePanelSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.col-type-section-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0.35rem 0 0.3rem; padding: 0 0.15rem; }
.col-type-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }
.col-type-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.2rem; }
.col-type-opt {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.4rem 0.25rem; border: 1.5px solid transparent; border-radius: 6px;
    cursor: pointer; transition: all 0.12s; font-size: 0.65rem; font-weight: 600;
    color: var(--text-secondary); background: transparent;
}
.col-type-opt:hover { background: var(--bg-secondary); border-color: var(--border); }
.col-type-opt.active { border-color: #023747; background: rgba(2,55,71,0.06); color: #023747; }
[data-theme="dark"] .col-type-opt.active { color: var(--primary); border-color: var(--primary); }
.col-type-ico {
    width: 28px; height: 28px; border-radius: 6px; display: flex;
    align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.col-type-ico.ct-text { background: #dbeafe; color: #3b82f6; }
.col-type-ico.ct-select { background: #ede9fe; color: #8b5cf6; }
.col-type-ico.ct-date { background: #fce7f3; color: #ec4899; }
.col-type-ico.ct-checkbox { background: #e0e7ff; color: #6366f1; }
.col-type-ico.ct-customer { background: linear-gradient(135deg, #023747, #1ba8af); color: white; }
.col-type-ico.ct-priority { background: #fee2e2; color: #ef4444; }

.col-type-info { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 5px; padding: 0.4rem 0.5rem; font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.4rem; line-height: 1.35; }
.col-type-save { width: 100%; padding: 0.4rem; border: none; border-radius: 6px; background: linear-gradient(135deg, #023747 0%, #1ba8af 100%); color: white; font-size: 0.72rem; font-weight: 700; cursor: pointer; margin-top: 0.5rem; }
.col-type-save:hover { opacity: 0.9; }
.col-type-delete { width: 100%; padding: 0.3rem; border: 1px solid var(--danger); border-radius: 6px; background: transparent; color: var(--danger); font-size: 0.65rem; font-weight: 600; cursor: pointer; margin-top: 0.25rem; }
.col-type-delete:hover { background: rgba(239,68,68,0.06); }

/* Select options editor */
.col-opt-list { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.col-opt-item { display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.4rem; background: var(--bg-secondary); border-radius: 5px; font-size: 0.75rem; }
.col-opt-color {
    width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
    cursor: pointer; border: 2px solid rgba(0,0,0,0.1); transition: transform 0.1s;
}
.col-opt-color:hover { transform: scale(1.15); }
.col-opt-color-input { width: 0; height: 0; padding: 0; border: none; position: absolute; opacity: 0; }
.col-opt-name { flex: 1; border: none; background: transparent; font-size: 0.72rem; outline: none; color: var(--text-primary); font-family: inherit; }
.col-opt-remove { width: 14px; height: 14px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 0.7rem; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.col-opt-remove:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
.col-opt-add { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.4rem; color: var(--primary); font-size: 0.68rem; font-weight: 600; cursor: pointer; border-radius: 5px; border: 1px dashed var(--border); background: transparent; width: 100%; margin-top: 0.15rem; }
.col-opt-add:hover { background: rgba(0,206,200,0.05); border-color: var(--primary); }

/* Column header config button */
.tbl-th .col-cfg-trigger {
    width: 22px; height: 22px; border: 1.5px solid #023747; background: var(--bg-primary);
    color: #023747; cursor: pointer; font-size: 0.75rem; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s; margin-left: auto; flex-shrink: 0;
}
.col-cfg-trigger:hover { background: #023747; color: white; }
.col-cfg-trigger.open { background: #023747; color: white; }


/* Customer link in table cells */
.tbl-customer-link {
    font-weight: 600; color: #023747; cursor: pointer;
    text-decoration: none; transition: all 0.15s;
    border-bottom: 1px dashed transparent;
}
[data-theme="dark"] .tbl-customer-link { color: #ffffff; }
.tbl-customer-link:hover {
    color: #1ba8af; border-bottom-color: #1ba8af;
}


/* Column resize */
.tbl-th { position: relative; overflow: visible; }
.tbl-col-resizer {
    position: absolute; right: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 5;
    background: linear-gradient(90deg, transparent 2px, #d1d5db 2px, #d1d5db 4px, transparent 4px);
}
.tbl-col-resizer:hover {
    background: linear-gradient(90deg, transparent 1px, #023747 1px, #023747 5px, transparent 5px);
}
body.tbl-resizing { cursor: col-resize !important; user-select: none !important; }
body.tbl-resizing * { cursor: col-resize !important; }


/* Context menu cell color picker */
.ctx-color-label {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-tertiary);
    padding: 0.25rem 0.75rem 0.15rem;
}
.ctx-color-grid {
    display: flex; gap: 0.3rem; padding: 0.25rem 0.75rem 0.35rem; flex-wrap: wrap;
}
.ctx-color-swatch {
    width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
    transition: transform 0.1s; border: 1px solid rgba(0,0,0,0.06);
}
.ctx-color-swatch:hover { transform: scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }


/* Activity note textarea improvements */
.activity-note-filled {
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}


.tbl-th-type-label {
    font-size: 0.55rem; color: var(--text-tertiary); font-weight: 500;
    text-transform: capitalize; margin-left: 0.25rem; white-space: nowrap;
}


/* ========== TABLE CUSTOM DROPDOWN ========== */
.tbl-dropdown {
    position: fixed; z-index: 10000;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px var(--shadow);
    min-width: 220px; max-height: 320px; overflow-y: auto;
    padding: 0.4rem; animation: ctxSlide 0.12s ease-out;
}
.tbl-dropdown-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer;
    font-size: 0.85rem; transition: background 0.1s;
}
.tbl-dropdown-item:hover { background: var(--bg-secondary); }
.tbl-dropdown-item.selected { background: var(--bg-tertiary); font-weight: 600; }
.tbl-dropdown-badge {
    display: inline-block; padding: 0.15rem 0.5rem; border-radius: 5px;
    font-size: 0.75rem; font-weight: 600;
}
.tbl-dropdown-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.tbl-dropdown-divider { height: 1px; background: var(--border); margin: 0.25rem 0.3rem; }
.tbl-dropdown-new {
    color: var(--primary); font-weight: 600; font-size: 0.8rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.tbl-dropdown-search {
    width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--border);
    border-radius: 5px; font-size: 0.8rem; margin-bottom: 0.3rem;
    background: var(--bg-secondary); color: var(--text-primary); outline: none;
}
.tbl-dropdown-search:focus { border-color: var(--primary); }


/* Sort button in column header */
.tbl-sort-btn {
    width: 18px; height: 18px; border: none; background: transparent;
    color: var(--text-tertiary); cursor: pointer; font-size: 0.7rem;
    border-radius: 4px; display: inline-flex; align-items: center;
    justify-content: center; margin-left: 0.15rem; transition: all 0.12s;
    flex-shrink: 0;
}
.tbl-sort-btn:hover { background: var(--bg-tertiary); color: var(--primary); }


/* ========== ONBOARDING TOUR ========== */
.tour-tooltip {
    position: fixed; z-index: 99999;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    padding: 1rem 1.25rem; width: 280px;
    animation: tourFadeIn 0.2s ease-out;
}
@keyframes tourFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.tour-tooltip-title {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.tour-tooltip-text {
    font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;
    margin-bottom: 0.75rem;
}
.tour-tooltip-footer {
    display: flex; justify-content: space-between; align-items: center;
}
.tour-tooltip-counter {
    font-size: 0.7rem; color: var(--text-tertiary); font-weight: 600;
}
.tour-tooltip-btns { display: flex; gap: 0.5rem; }
.tour-btn-skip {
    padding: 0.35rem 0.75rem; border: none; background: transparent;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; border-radius: 6px;
}
.tour-btn-skip:hover { background: var(--bg-secondary); }
.tour-btn-next {
    padding: 0.35rem 0.85rem; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; font-size: 0.8rem; font-weight: 700; cursor: pointer;
    transition: all 0.15s;
}
.tour-btn-next:hover { opacity: 0.9; transform: translateY(-1px); }

/* Tour restart button in header */
.tour-restart-btn {
    width: 32px; height: 32px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: all 0.15s; flex-shrink: 0;
}
.tour-restart-btn:hover { color: var(--primary); border-color: var(--primary); }
.tour-restart-btn svg { width: 16px; height: 16px; }


/* Email verification banner */
.verify-banner {
    display: none; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.6rem 1.5rem; margin-left: var(--sidebar-width);
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05));
    border-bottom: 2px solid rgba(245,158,11,0.3);
    font-size: 0.8rem; color: var(--text-primary); font-weight: 500;
}
.verify-banner-btn {
    padding: 0.3rem 0.75rem; border-radius: 6px; font-size: 0.75rem;
    font-weight: 600; cursor: pointer; white-space: nowrap; border: none;
    background: linear-gradient(135deg, #023747 0%, #1ba8af 100%);
    color: white; transition: all 0.15s;
}
.verify-banner-btn:hover { opacity: 0.9; }
.verify-banner-btn.secondary {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary);
}
.verify-banner-btn.secondary:hover { background: var(--bg-secondary); }