/* Keyp Projects - Custom Styles */

/* ============================================================================
   MOBILE RESPONSIVENESS
   ============================================================================ */

/* Prevent horizontal overflow on mobile — use clip instead of hidden
   so that position:sticky still works on the header */
html, body {
    max-width: 100vw;
    overflow-x: clip;
}

/* ============================================================================
   MOBILE COMPACT TOOLBAR (single row, <640px)
   ============================================================================ */

/* Uniform icon button for mobile toolbar */
.mobile-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Mobile toolbar: spread items across full width */
@media (max-width: 639px) {
    #mobileToolbar {
        justify-content: space-between;
    }
    
    /* Compact project selector on mobile */
    #mobileToolbar .project-selector-container button {
        padding: 4px 6px;
        font-size: 0.75rem;
    }
    
    /* View toggle compact on mobile */
    #mobileToolbar .view-toggle {
        flex-shrink: 0;
    }
    
    #mobileToolbar .view-btn {
        padding: 6px;
    }
    
    /* Search overlay animation */
    #mobileSearchOverlay {
        animation: mobileSearchSlideIn 0.15s ease;
    }
    
    @keyframes mobileSearchSlideIn {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Make sure project dropdown is correctly positioned for mobile */
    #mobileToolbar .project-dropdown,
    #mobileToolbar #projectDropdown {
        left: 0;
        right: auto;
    }
    
    /* Filter dropdown max-height for small screens */
    #mobileFilterDropdown {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* Mobile filter option active state */
.mobile-filter-option.text-keyp-accent {
    background: rgba(233, 69, 96, 0.1);
    font-weight: 600;
}

/* Extra-small screens (iPhone SE 375px) */
@media (max-width: 389px) {
    .mobile-toolbar-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 6px;
    }
    
    #mobileToolbar .project-selector-container button {
        max-width: 100px;
        padding: 3px 4px;
        font-size: 0.7rem;
    }
    
    #mobileToolbar .view-btn {
        padding: 5px;
    }
    
    #mobileToolbar .view-btn i {
        width: 14px;
        height: 14px;
    }
    
    .mobile-toolbar-btn i {
        width: 14px;
        height: 14px;
    }
    
    #mobileToolbar {
        gap: 3px !important;
    }
}

/* Leads stats bar mobile */
@media (max-width: 768px) {
    .leads-stats-bar {
        padding: 0;
        gap: 0;
        overflow-x: hidden;
        flex-wrap: nowrap;
        background: none !important;
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;
    }
    
    .leads-funnel {
        flex: 1;
        gap: 6px;
        justify-content: space-evenly;
        width: 100%;
    }
    
    .leads-stat-item {
        min-width: 0;
        flex: 1;
        padding: 6px 2px;
    }
    
    .leads-stat-arrow {
        display: none !important;
    }
    
    .leads-stat-icon {
        display: none !important;
    }
    
    .leads-stat-count {
        font-size: 1rem;
    }
    
    .leads-stat-label {
        font-size: 0.6rem;
    }
    
    .leads-stat-value,
    .leads-stat-lost {
        display: none;
    }
    
    .leads-stat-label {
        font-size: 0.6rem;
    }
    
    .leads-stat-value {
        padding: 3px 8px;
        font-size: 0.75rem;
    }
}

/* Main content area: prevent overflow */
main {
    max-width: 100vw;
    overflow-x: auto;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e94560;
}

/* Column styling */
.kanban-column {
    min-width: 280px;
    max-width: 320px;
    flex: 1;
}

@media (max-width: 768px) {
    .kanban-column {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Mobile column collapse/expand */
.column-collapse-chevron {
    display: none;
}

@media (max-width: 768px) {
    .column-collapse-chevron {
        display: block;
        transition: transform 0.2s ease;
    }

    .kanban-column .column-header {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        border-radius: 8px;
        padding: 8px;
        margin: -4px -4px 12px -4px;
        transition: background 0.15s ease;
    }

    .kanban-column .column-header:active {
        background: rgba(255, 255, 255, 0.05);
    }

    .kanban-column.column-collapsed {
        padding-bottom: 8px;
    }

    .kanban-column.column-collapsed .column-header {
        margin-bottom: 0;
    }

    .kanban-column.column-collapsed .column-collapsible {
        display: none;
    }
}

/* Card styling */
.kanban-card {
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

/* Drop zone styling */
.kanban-column.drag-over .card-container {
    background: rgba(233, 69, 96, 0.1);
    border: 2px dashed #e94560;
    border-radius: 8px;
}

/* Label dots */
.label-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.label-dot.red { background-color: #ef4444; }
.label-dot.orange { background-color: #f97316; }
.label-dot.yellow { background-color: #eab308; }
.label-dot.green { background-color: #22c55e; }
.label-dot.blue { background-color: #3b82f6; }
.label-dot.purple { background-color: #a855f7; }

/* Label button selected state */
.label-btn.selected {
    ring: 2px;
    ring-color: white;
    transform: scale(1.2);
}

/* Due date badge */
.due-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.due-badge.overdue {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.due-badge.soon {
    background: rgba(234, 179, 8, 0.3);
    color: #fde047;
}

/* Add card button */
.add-card-btn {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.add-card-btn:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
    color: #e94560;
}

/* Modal animation */
#cardModal {
    transition: opacity 0.2s ease;
}

#cardModal.show {
    display: flex !important;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#cardModal > div {
    animation: slideIn 0.2s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Column header count badge */
.column-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Empty state */
.empty-state {
    color: #a0a0a0;
    font-size: 0.875rem;
    padding: 1rem;
    text-align: center;
    font-style: italic;
}

/* Settings/New Project Modal animation */
#settingsModal.show,
#newProjectModal.show,
#columnIconPickerModal.show {
    display: flex !important;
    animation: fadeIn 0.2s ease;
}

#settingsModal > div,
#newProjectModal > div,
#columnIconPickerModal > div {
    animation: slideIn 0.2s ease;
}

/* Columns Editor */
.column-editor-item {
    transition: background-color 0.15s ease;
}

.column-editor-item:hover {
    background-color: rgba(15, 52, 96, 0.5);
}

.column-drag-handle {
    cursor: move;
}

.column-title-input {
    background: transparent;
}

.column-title-input:focus {
    background: rgba(15, 52, 96, 0.5);
}

/* Column Icon Picker */
.column-icon-option {
    transition: all 0.15s ease;
}

.column-icon-option:hover {
    transform: scale(1.1);
}

/* Preset buttons */
.preset-btn {
    transition: all 0.15s ease;
}

.preset-btn:hover {
    border-color: #e94560;
}

/* ============================================================================
   LEADS FEATURES
   ============================================================================ */

/* Leads Statistics Bar */
.leads-stats-bar {
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 52, 96, 0.9) 100%);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    overflow-x: auto;
    animation: slideDown 0.3s ease;
    max-width: 800px;
    margin: 0 auto;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leads-funnel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.leads-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 70px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.leads-stat-item:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1);
}

.leads-stat-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e94560;
}

.leads-stat-label {
    font-size: 0.75rem;
    color: #a0a0a0;
    white-space: nowrap;
}

.leads-stat-arrow {
    color: #4a5568;
    font-size: 1rem;
    opacity: 0.5;
}

.leads-stat-lost {
    font-size: 0.75rem;
    color: #f87171;
    opacity: 0.8;
    padding: 4px 10px;
    background: rgba(248, 113, 113, 0.1);
    border-radius: 8px;
    cursor: default;
}

.leads-stat-value {
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Overdue Card Highlighting */
.kanban-card.card-overdue {
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2), inset 0 0 0 1px rgba(239, 68, 68, 0.1);
    animation: pulseOverdue 2s ease-in-out infinite;
}

@keyframes pulseOverdue {
    0%, 100% {
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.2), inset 0 0 0 1px rgba(239, 68, 68, 0.1);
    }
    50% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.35), inset 0 0 0 1px rgba(239, 68, 68, 0.2);
    }
}

.kanban-card.card-due-soon {
    border-color: rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.15);
}

/* Lead Quick Action Buttons */
.lead-quick-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.kanban-card:hover .lead-quick-actions {
    opacity: 1;
    transform: translateY(0);
}

/* Always visible on mobile */
@media (max-width: 768px) {
    .lead-quick-actions {
        opacity: 1;
        transform: translateY(0);
    }
}

.lead-quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 6px;
    color: #e94560;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
}

.lead-quick-action:hover {
    background: rgba(233, 69, 96, 0.3);
    transform: scale(1.1);
    color: #fff;
}

.lead-quick-action i {
    pointer-events: none;
}

/* Column Header Colors for Leads */
.column-header {
    transition: all 0.2s ease;
    padding: 4px 8px;
    margin: -4px -8px;
    margin-bottom: 8px !important;
    border-radius: 8px;
}

.column-header-new {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
}

.column-header-contacted {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, transparent 100%);
}

.column-header-followup {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, transparent 100%);
}

.column-header-won {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.15) 0%, transparent 100%);
}

.column-header-lost {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, transparent 100%);
}

/* Enhanced Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1.5rem 1rem;
}

.empty-state-icon {
    opacity: 0.5;
    color: #a0a0a0;
}

/* Column header icon */
.column-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column-icon i, .column-icon svg {
    width: 1rem;
    height: 1rem;
}

/* Leads Fields Section Animation */
.leads-fields-section {
    animation: fadeInSlide 0.2s ease;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth Preset Transition */
#board {
    transition: opacity 0.15s ease;
}

/* Filter dropdown enhancement */
#filterDropdown optgroup {
    font-weight: 600;
    color: #e94560;
}

#filterDropdown option {
    padding: 4px 8px;
}

/* ============================================================================
   Mobile Drag Overlay (Grid of drop targets)
   ============================================================================ */

.mobile-drag-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    padding-top: 60px;
    padding-bottom: 40px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mobile-drag-overlay.show {
    opacity: 1;
}

.mobile-drag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 400px) {
    .mobile-drag-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.mobile-drag-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 3px solid rgba(255, 255, 255, 0.15);
    transition: all 0.15s ease;
    min-height: 110px;
}

.mobile-drag-target.hover {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.7);
    transform: scale(1.05);
}

.mobile-drag-target.current {
    background: rgba(100, 100, 100, 0.2);
    border-color: rgba(100, 100, 100, 0.4);
    opacity: 0.5;
}

.mobile-drag-target-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.15s ease;
}

.mobile-drag-target.hover .mobile-drag-target-icon {
    background: rgba(34, 197, 94, 0.4);
    transform: scale(1.1);
}

.mobile-drag-target-icon svg {
    width: 26px;
    height: 26px;
    color: #e0e0e0;
}

.mobile-drag-target.hover .mobile-drag-target-icon svg {
    color: #fff;
}

.mobile-drag-target.current .mobile-drag-target-icon svg {
    color: #888;
}

.mobile-drag-target-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e0e0e0;
    text-align: center;
}

.mobile-drag-target.hover .mobile-drag-target-label {
    color: #fff;
}

.mobile-drag-target.current .mobile-drag-target-label {
    color: #888;
}

.mobile-drag-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 2px dashed rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 1rem;
    font-weight: 600;
    align-self: center;
    width: 90%;
    max-width: 400px;
    transition: all 0.2s;
}

.mobile-drag-delete svg {
    width: 22px;
    height: 22px;
}

.mobile-drag-delete.hover {
    background: rgba(239, 68, 68, 0.85);
    border: 2px solid #ef4444;
    transform: scale(1.08);
    color: #fff;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.mobile-drag-overlay.delete-hover {
    background: rgba(180, 30, 30, 0.9);
}

/* Cancel button removed — drop outside targets to cancel */

/* ============================================================================
   SWIPE-TO-DELETE
   ============================================================================ */

.swipe-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.swipe-delete-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 24px;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transition: background 0.2s ease;
    border-radius: 12px;
    pointer-events: none;
}

.swipe-delete-bg.triggered {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

/* Undo delete toast */
.undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    min-width: 280px;
    max-width: calc(100vw - 48px);
}

.undo-toast-timer {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.undo-toast-timer-bar {
    width: 100%;
    height: 100%;
    background: #e94560;
    border-radius: 2px;
}

.undo-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.undo-toast-text {
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.undo-toast-btn {
    padding: 6px 16px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.8);
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.undo-toast-btn:active {
    background: rgba(99, 102, 241, 1);
}

/* Floating card that follows finger */
.floating-drag-card {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9) rotate(-3deg);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    background: var(--keyp-card, #1a365d);
}

.floating-drag-card.show {
    opacity: 1;
    transform: scale(1.05) rotate(-2deg);
}

/* Prevent text selection while dragging */
body.mobile-dragging {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body.mobile-dragging * {
    user-select: none;
    -webkit-user-select: none;
}

/* Card Image Thumbnails */
.card-image-strip {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.card-thumb-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-thumb-more {
    font-size: 0.7rem;
    color: #a0a0a0;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Attachment Upload */
.attachment-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(15, 52, 96, 0.2);
}

.attachment-drop-zone:hover {
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.1);
}

.attachment-drop-zone.drag-over {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    transform: scale(1.02);
}

.attachment-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.attachment-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.attachment-thumb:hover .attachment-thumb-remove {
    opacity: 1;
}

.attachment-uploading {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-uploading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: #e94560;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================================================
   CALENDAR VIEW
   ============================================================================ */

/* ============================================================================
   CARD QUICK-MOVE MENU
   ============================================================================ */

.card-move-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0;
}

.kanban-card:hover .card-move-btn {
    opacity: 1;
}

.card-move-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.card-move-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    background: #16213e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 140px;
    z-index: 30;
    overflow: hidden;
}

.card-move-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #eaeaea;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.1s ease;
}

.card-move-option:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

/* Always show move button on mobile */
@media (max-width: 768px) {
    .card-move-btn {
        opacity: 1;
    }
}

/* ============================================================================
   BOARD STATS BAR
   ============================================================================ */

.board-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.8) 0%, rgba(15, 52, 96, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.board-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.board-stat:hover {
    background: rgba(255, 255, 255, 0.08);
}

.board-stat-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: #eaeaea;
}

.board-stat-label {
    font-size: 0.75rem;
    color: #a0a0a0;
}

.board-stat.stat-warning {
    background: rgba(234, 179, 8, 0.1);
}

.board-stat.stat-danger {
    background: rgba(239, 68, 68, 0.1);
    animation: pulseSubtle 2s ease-in-out infinite;
}

@keyframes pulseSubtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.board-stat.stat-success {
    opacity: 0.7;
}

.board-stat-shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.board-stat-shortcut:hover {
    opacity: 1;
}

.board-stat-shortcut kbd {
    display: inline-block;
    font-family: monospace;
    font-size: 0.75rem;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .board-stats-bar {
        gap: 8px;
        padding: 8px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    
    .board-stat-shortcut {
        display: none;
    }
    
    .board-stat-label {
        display: none;
    }
    
    .board-stat {
        flex-shrink: 0;
    }
}

/* Two-month grid for desktop */
.calendar-two-month-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
@media (max-width: 1200px) {
    .calendar-two-month-grid { gap: 20px; }
}

/* ---- Shared Calendar Header ---- */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 2px;
}
.cal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cal-nav-arrows {
    display: flex;
    gap: 2px;
}
.cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.cal-nav-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}
.cal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #eaeaea;
    line-height: 1.3;
}
.cal-title-main {
    color: #fff;
}
.cal-today-badge {
    display: inline-block;
    background: #e94560;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}
.cal-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cal-source-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cal-source-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.cal-source-pill.active {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border-color: var(--pill-color, rgba(255,255,255,0.15));
}
.cal-source-pill:hover {
    background: rgba(255,255,255,0.1);
}
.cal-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-view-toggle {
    display: flex;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.cal-view-btn {
    padding: 7px 10px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}
.cal-view-btn:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04);
}
.cal-view-btn.active {
    color: #e94560;
    background: rgba(233, 69, 96, 0.12);
}

/* ---- Month View ---- */
.calendar-month-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: #eaeaea;
    text-align: center;
    margin-bottom: 16px;
}
.calendar-container {
    max-width: 1200px;
    margin: 0 auto;
}
/* Consistent container for all calendar views */
.cal-view-container {
    max-width: 1200px;
    margin: 0 auto;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.calendar-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px;
    margin-bottom: 8px;
}
.calendar-weekday {
    text-align: center;
    padding: 10px;
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 4px;
    height: calc(100vh - 260px);
    margin-bottom: 0;
}
.calendar-day {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: rgba(15, 52, 96, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
}
.calendar-day:hover {
    background: rgba(15, 52, 96, 0.4);
    border-color: rgba(255,255,255,0.1);
}
.calendar-day.empty {
    background: rgba(15, 52, 96, 0.06);
    border-color: transparent;
    cursor: default;
}
.calendar-day.empty:hover {
    background: rgba(15, 52, 96, 0.06);
    border-color: transparent;
}
.calendar-day.today {
    background: rgba(233, 69, 96, 0.1);
    border-color: rgba(233, 69, 96, 0.35);
}
.calendar-day.today .day-number {
    background: #e94560;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.day-number {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
}
.calendar-task-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.calendar-task-item {
    font-size: 0.68rem;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: grab;
    transition: all 0.15s ease;
    border-left: 2px solid #3b82f6;
}
.calendar-task-item:hover {
    background: rgba(59, 130, 246, 0.25);
    transform: translateX(2px);
}
.calendar-task-item.done {
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    border-left-color: #22c55e;
    text-decoration: line-through;
    opacity: 0.6;
}
.calendar-task-item.overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-left-color: #ef4444;
}
.calendar-task-item.henry {
    background: rgba(168, 85, 247, 0.15);
    color: #d8b4fe;
    border-left-color: #a855f7;
}
.calendar-task-item[data-label="red"] { border-left-color: #ef4444; }
.calendar-task-item[data-label="orange"] { border-left-color: #f97316; }
.calendar-task-item[data-label="yellow"] { border-left-color: #eab308; }
.calendar-task-item[data-label="green"] { border-left-color: #22c55e; }
.calendar-task-item[data-label="blue"] { border-left-color: #3b82f6; }
.calendar-task-item[data-label="purple"] { border-left-color: #a855f7; }
.calendar-task-item.zoho-event {
    background: rgba(168, 85, 247, 0.12);
    border-left-color: #a855f7;
    color: #c4b5fd;
    font-size: 0.65rem;
}
.zoho-time {
    color: #a78bfa;
    font-weight: 600;
    margin-right: 3px;
}
.calendar-task-more {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    padding: 2px 6px;
    text-align: center;
}

/* ---- Day View Timeline ---- */
.cal-day-container {
    max-width: 1200px;
    margin: 0 auto;
}
.cal-allday {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-allday-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 56px;
    padding-top: 6px;
    text-align: right;
}
.cal-allday-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.cal-event {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.cal-event-zoho {
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.cal-event-task {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.cal-event-task.done {
    opacity: 0.4;
    text-decoration: line-through;
}
.cal-event:hover { filter: brightness(1.2); }

/* Timeline */
.cal-timeline {
    --minute-height: 0.9px;
    position: relative;
    height: calc(24 * 60 * var(--minute-height));
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 200px);
    margin: 0 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.cal-hour-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
}
.cal-hour-row[data-hour="0"]  { top: calc(0 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="1"]  { top: calc(1 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="2"]  { top: calc(2 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="3"]  { top: calc(3 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="4"]  { top: calc(4 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="5"]  { top: calc(5 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="6"]  { top: calc(6 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="7"]  { top: calc(7 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="8"]  { top: calc(8 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="9"]  { top: calc(9 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="10"] { top: calc(10 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="11"] { top: calc(11 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="12"] { top: calc(12 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="13"] { top: calc(13 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="14"] { top: calc(14 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="15"] { top: calc(15 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="16"] { top: calc(16 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="17"] { top: calc(17 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="18"] { top: calc(18 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="19"] { top: calc(19 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="20"] { top: calc(20 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="21"] { top: calc(21 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="22"] { top: calc(22 * 60 * var(--minute-height)); }
.cal-hour-row[data-hour="23"] { top: calc(23 * 60 * var(--minute-height)); }

.cal-hour-label {
    width: 56px;
    min-width: 56px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.25);
    text-align: right;
    padding-right: 12px;
    padding-top: 0;
    line-height: 1;
    transform: translateY(-6px);
    user-select: none;
}
.cal-hour-slot-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(60 * var(--minute-height));
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
}
.cal-quarter-slot {
    flex: 1;
    position: relative;
}
.cal-quarter-slot:not(:first-child) {
    border-top: 1px dashed rgba(255,255,255,0.03);
}

/* Drag indicator overlay */
.cal-drag-indicator {
    position: absolute;
    left: 56px;
    right: 0;
    background: rgba(233, 69, 96, 0.15);
    border: 2px solid rgba(233, 69, 96, 0.6);
    border-radius: 8px;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #e94560;
}

/* Create-drag indicator */
.cal-create-indicator {
    position: absolute;
    left: 56px;
    right: 0;
    background: rgba(59, 130, 246, 0.15);
    border: 2px dashed rgba(59, 130, 246, 0.5);
    border-radius: 8px;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
}

/* Now indicator */
.cal-now-line {
    position: absolute;
    left: 56px;
    right: 0;
    height: 2px;
    background: #e94560;
    z-index: 10;
    pointer-events: none;
}
.cal-now-dot {
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e94560;
}

/* Event blocks on timeline */
.cal-event-block {
    position: absolute;
    left: 56px;
    right: 0;
    border-radius: 6px;
    padding: 6px 10px;
    overflow: hidden;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
    min-height: 22px;
    backdrop-filter: blur(8px);
}
.cal-event-block:hover {
    filter: brightness(1.15);
    z-index: 6;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.cal-event-zoho-block {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-left: 3px solid #a855f7;
}
.cal-event-task-block {
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-left: 3px solid #3b82f6;
    cursor: grab;
}
.cal-event-task-block.done {
    opacity: 0.4;
    border-left-color: #22c55e;
}
.cal-event-task-block.overdue {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}
.cal-event-block-time {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 2px;
}
.cal-event-block-title {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-event-block-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
}

/* Add button */
.cal-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.cal-add-btn:hover {
    background: rgba(233, 69, 96, 0.06);
    border-color: rgba(233, 69, 96, 0.25);
    color: #e94560;
}

/* ---- List / Agenda View ---- */
.cal-list-container {
    max-width: 1200px;
    margin: 0 auto;
}
.cal-list-group {
    margin-bottom: 24px;
}
.cal-list-date-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-list-date-day {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}
.cal-list-date-day.today {
    color: #e94560;
}
.cal-list-date-full {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}
.cal-list-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cal-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(15, 52, 96, 0.2);
    border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.15s;
}
.cal-list-item:hover {
    background: rgba(15, 52, 96, 0.35);
    border-color: rgba(255,255,255,0.08);
}
.cal-list-item.done {
    opacity: 0.4;
}
.cal-list-item-time {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    min-width: 44px;
    text-align: right;
}
.cal-list-item-content {
    flex: 1;
    min-width: 0;
}
.cal-list-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-list-item.done .cal-list-item-title {
    text-decoration: line-through;
    color: rgba(255,255,255,0.4);
}
.cal-list-item-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.cal-list-item-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-list-item-indicator.zoho { background: #a855f7; }
.cal-list-item-indicator.task { background: #3b82f6; }
.cal-list-zoho .cal-list-item-time { color: #a78bfa; }
.cal-list-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.25);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Legacy compat */
.day-popup { display: none; }

/* View Toggle (board/calendar) */
.view-toggle {
    display: flex;
    background: rgba(15, 52, 96, 0.5);
    border-radius: 8px;
    overflow: hidden;
}
.view-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #a0a0a0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.view-btn:hover { color: #eaeaea; }
.view-btn.active { background: #e94560; color: #fff; }

/* Calendar Responsive */
@media (max-width: 768px) {
    .calendar-day {
        min-height: 70px;
        padding: 4px;
    }
    .day-number { font-size: 0.8rem; }
    .calendar-task-item { font-size: 0.6rem; padding: 2px 4px; }
    .calendar-weekday { font-size: 0.65rem; padding: 6px 2px; }
    .cal-title { font-size: 1rem; }
    .cal-event-block { left: 48px; right: 6px; }
    .cal-hour-label { width: 42px; min-width: 42px; font-size: 10px; padding-right: 6px; }
    .cal-now-line { left: 42px; }
    .cal-allday-label { min-width: 42px; font-size: 10px; }
}

/* ============================================================================
   CONTACTS
   ============================================================================ */

/* Contact Search Autocomplete Dropdown */
.contact-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #16213e;
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    max-height: 200px;
    overflow-y: auto;
    z-index: 60;
}

.contact-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.contact-search-item:last-child {
    border-bottom: none;
}

.contact-search-item:hover {
    background: rgba(233, 69, 96, 0.15);
}

.contact-search-create:hover {
    background: rgba(34, 197, 94, 0.15) !important;
}

.contact-search-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(233, 69, 96, 0.1));
    border: 1px solid rgba(233, 69, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: #e94560;
    flex-shrink: 0;
}

.contact-search-item-info {
    flex: 1;
    min-width: 0;
}

.contact-search-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-search-item-detail {
    font-size: 0.7rem;
    color: #a0a0a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contacts Panel List Items */
.contacts-panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.contacts-panel-item:hover {
    background: rgba(15, 52, 96, 0.6);
    border-color: rgba(233, 69, 96, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contacts-panel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(233, 69, 96, 0.08));
    border: 1px solid rgba(233, 69, 96, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #e94560;
    flex-shrink: 0;
}

.contacts-panel-info {
    flex: 1;
    min-width: 0;
}

.contacts-panel-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-panel-detail {
    font-size: 0.75rem;
    color: #a0a0a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacts-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(233, 69, 96, 0.15);
    color: #e94560;
    flex-shrink: 0;
}

/* Contact linked card items */
.contact-linked-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8rem;
}

.contact-linked-card:hover {
    background: rgba(15, 52, 96, 0.5);
    border-color: rgba(233, 69, 96, 0.2);
}

.contact-linked-card-title {
    flex: 1;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-linked-card-column {
    font-size: 0.65rem;
    color: #a0a0a0;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Contacts panel empty state */
.contacts-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3rem 1rem;
    text-align: center;
}

.contacts-empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contact detail links (phone/email in list) */
.contact-detail-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin-top: 2px;
}

.contact-detail-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.15s ease;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

.contact-detail-link:hover {
    color: #e94560;
}

.contact-detail-link i,
.contact-detail-link svg {
    flex-shrink: 0;
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    color: inherit;
}

/* Contact Quick Actions in panel */
.contact-quick-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.contact-quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.contact-quick-action:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

/* Linked contact action buttons (call/email) */
.linked-contact-action {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.linked-contact-action svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.linked-contact-action:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.3);
    color: #e94560;
}

/* Date/Time inputs mobile fix */
input[type="date"],
input[type="time"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* Card modal mobile overflow fix */
#cardModal > div {
    max-width: 100%;
    box-sizing: border-box;
}
#cardForm {
    max-width: 100%;
    box-sizing: border-box;
}
#cardForm > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Timeline */
.timeline-list::-webkit-scrollbar {
  width: 4px;
}
.timeline-list::-webkit-scrollbar-track {
  background: transparent;
}
.timeline-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.timeline-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* ============================================================================
   CONTACT ACTION VIEW
   ============================================================================ */

/* Header / Card */
.contact-action-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px 16px;
    background: rgba(15, 52, 96, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(15, 52, 96, 0.5);
}

.contact-action-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #0f3460);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.contact-action-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #eaeaea;
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.contact-action-company {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin: 0 0 10px 0;
}

.contact-action-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #c0c0c0;
    margin: 3px 0;
}

.contact-action-detail i,
.contact-action-detail svg {
    width: 14px !important;
    height: 14px !important;
    color: #a0a0a0;
    flex-shrink: 0;
}

/* Action Buttons Grid */
.contact-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.contact-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    text-decoration: none;
    min-height: 48px;
}

.contact-action-btn i,
.contact-action-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
}

/* Call Button - Green */
.contact-action-call {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
.contact-action-call:hover {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.4);
}

/* Email Button - Blue */
.contact-action-email {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}
.contact-action-email:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.4);
}

/* Edit Button - Neutral */
.contact-action-edit {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #c0c0c0;
}
.contact-action-edit:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #eaeaea;
}

/* If only one action button + edit, make them full width */
.contact-action-buttons:has(.contact-action-call):has(.contact-action-email) .contact-action-edit {
    grid-column: 1 / -1;
}

/* Create Lead Section */
.contact-action-create-lead {
    margin-top: 2px;
}

.contact-action-create-lead-row {
    display: flex;
    gap: 8px;
}

.contact-action-lead-select {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid rgba(15, 52, 96, 0.8);
    border-radius: 10px;
    padding: 10px 14px;
    color: #eaeaea;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: auto;
    min-height: 48px;
}
.contact-action-lead-select:focus {
    outline: none;
    border-color: #e94560;
}

/* Create Lead Button - Accent */
.contact-action-create-lead-btn {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.35);
    color: #e94560;
    white-space: nowrap;
    flex-shrink: 0;
}
.contact-action-create-lead-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: rgba(233, 69, 96, 0.5);
}

/* Linked Leads Section */
.contact-action-section {
    background: rgba(15, 52, 96, 0.15);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(15, 52, 96, 0.3);
}

.contact-action-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.contact-action-section-title i,
.contact-action-section-title svg {
    width: 16px !important;
    height: 16px !important;
}

.contact-action-linked-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-action-linked-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(26, 26, 46, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.contact-action-linked-card:hover {
    background: rgba(26, 26, 46, 0.9);
    border-color: rgba(233, 69, 96, 0.3);
}

.contact-action-linked-card-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.contact-action-linked-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-action-linked-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.contact-action-linked-card-col {
    font-size: 0.7rem;
    color: #a0a0a0;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* --- Leads History in Contact Action View --- */

.leads-history-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #a0a0a0;
    margin-bottom: 10px;
    padding: 0 2px;
}

.leads-history-summary .summary-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #a0a0a0;
}

.leads-history-summary .summary-value {
    color: #4ade80;
    font-weight: 600;
}

.lead-history-card {
    background: rgba(26, 26, 46, 0.6);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.lead-history-card.expanded {
    border-color: rgba(233, 69, 96, 0.25);
}

.lead-history-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 8px;
}

.lead-history-card-header:hover {
    background: rgba(26, 26, 46, 0.9);
}

.lead-history-card-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.lead-history-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-history-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lead-status-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lead-status-badge.status-blue    { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.lead-status-badge.status-yellow  { background: rgba(234,179,8,0.2); color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
.lead-status-badge.status-orange  { background: rgba(249,115,22,0.2); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.lead-status-badge.status-green   { background: rgba(34,197,94,0.2); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.lead-status-badge.status-red     { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.lead-status-badge.status-gray    { background: rgba(255,255,255,0.06); color: #a0a0a0; border: 1px solid rgba(255,255,255,0.1); }

.lead-history-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 8px 12px;
    font-size: 0.7rem;
    color: #a0a0a0;
}

.lead-history-card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.lead-history-card-meta .meta-item i,
.lead-history-card-meta .meta-item svg {
    width: 11px !important;
    height: 11px !important;
}

.lead-history-chevron {
    transition: transform 0.25s ease;
    color: #a0a0a0;
    flex-shrink: 0;
}

.lead-history-card.expanded .lead-history-chevron {
    transform: rotate(180deg);
}

.lead-history-timeline-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lead-history-card.expanded .lead-history-timeline-wrap {
    max-height: 2000px;
}

.lead-history-timeline {
    padding: 0 12px 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lead-history-timeline .lead-timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    color: #a0a0a0;
    font-size: 0.75rem;
}

.lead-history-timeline .lead-timeline-empty i,
.lead-history-timeline .lead-timeline-empty svg {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.3;
    margin-bottom: 6px;
}

.lead-history-timeline .timeline-entry-mini {
    display: flex;
    gap: 10px;
    position: relative;
}

.lead-history-timeline .timeline-entry-mini .tl-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lead-history-timeline .timeline-entry-mini .tl-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.lead-history-timeline .timeline-entry-mini .tl-icon i,
.lead-history-timeline .timeline-entry-mini .tl-icon svg {
    width: 12px !important;
    height: 12px !important;
}

.lead-history-timeline .timeline-entry-mini .tl-line {
    width: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    margin: 3px 0;
}

.lead-history-timeline .timeline-entry-mini .tl-content {
    flex: 1;
    padding-bottom: 10px;
}

.lead-history-timeline .timeline-entry-mini .tl-bubble {
    background: rgba(15, 15, 30, 0.5);
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.lead-history-timeline .timeline-entry-mini .tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.lead-history-timeline .timeline-entry-mini .tl-author {
    font-size: 0.7rem;
    font-weight: 500;
}

.lead-history-timeline .timeline-entry-mini .tl-time {
    font-size: 0.6rem;
    color: #a0a0a0;
}

.lead-history-timeline .timeline-entry-mini .tl-text {
    font-size: 0.78rem;
    color: #ddd;
    line-height: 1.4;
}

.lead-history-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 6px;
    margin-top: 6px;
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 6px;
    color: #e94560;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lead-history-open-btn:hover {
    background: rgba(233, 69, 96, 0.2);
}

.lead-history-open-btn i,
.lead-history-open-btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* Mobile: single column for action buttons on very small screens */
@media (max-width: 360px) {
    .contact-action-buttons {
        grid-template-columns: 1fr;
    }
    .contact-action-buttons .contact-action-edit {
        grid-column: auto;
    }
}

/* ============================================================================
   Chat Bubbles (Card Modal)
   ============================================================================ */

.chat-bubble-row {
    display: flex;
    margin-bottom: 8px;
}

.chat-bubble-right {
    justify-content: flex-end;
}

.chat-bubble-left {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
}

.chat-bubble-user {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-bottom-right-radius: 4px;
}

.chat-bubble-henry {
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
}

.chat-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.chat-bubble-time {
    font-size: 0.6rem;
    color: #a0a0a0;
    white-space: nowrap;
}

.chat-system-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
    margin: 4px 0;
    font-size: 0.7rem;
    color: #a0a0a0;
    text-align: center;
    flex-wrap: wrap;
}

/* ============================================================================
   Chat Bubble Images
   ============================================================================ */

.chat-bubble-image {
    display: block;
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.15s;
}

.chat-bubble-image:hover {
    opacity: 0.85;
}

/* ============================================================================
   Codeword Badge (Board Cards)
   ============================================================================ */

.codeword-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: #e94560;
    background: rgba(233, 69, 96, 0.1);
    padding: 1px 8px;
    border-radius: 9999px;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

/* ============================================================================
   Multi-Select Card Styling
   ============================================================================ */

.kanban-card.card-selected {
    ring: 2px;
    outline: 2px solid #e94560;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.3), 0 4px 15px rgba(233, 69, 96, 0.15) !important;
    position: relative;
}

.kanban-card.card-selected::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    background: #e94560;
    border-radius: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* Selection bar animation */
#selectionBar {
    animation: selectionBarSlideUp 0.2s ease-out;
}

@keyframes selectionBarSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ============================================================================
   EMAIL COMPOSE POPUP
   ============================================================================ */

/* Toolbar buttons */
.email-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #a0a0a0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.email-toolbar-btn:hover {
    background: rgba(15, 52, 96, 0.6);
    color: #eaeaea;
}

.email-toolbar-btn:active {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

/* Contenteditable placeholder */
#emailComposeBody:empty::before {
    content: attr(data-placeholder);
    color: #a0a0a0;
    pointer-events: none;
    opacity: 0.6;
}

/* Rich text body styling */
#emailComposeBody a {
    color: #e94560;
    text-decoration: underline;
}

#emailComposeBody ul,
#emailComposeBody ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

#emailComposeBody ul {
    list-style: disc;
}

#emailComposeBody ol {
    list-style: decimal;
}

/* ============================================================================
   THREE THINGS — DAILY FOCUS
   ============================================================================ */

/* Badge on toolbar icon */
.tt-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

.tt-badge-unset {
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    background: #e94560;
    border: 1.5px solid #16213e;
}

.tt-badge-progress {
    background: #e94560;
    color: #fff;
    border: 1.5px solid #16213e;
}

.tt-badge-done {
    background: #22c55e;
    color: #fff;
    border: 1.5px solid #16213e;
}

/* Panel slide animation (same as chat) */
#threeThingsPanel {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slots */
.tt-slot {
    transition: all 0.2s ease;
}

.tt-slot-completed {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.tt-slot-empty {
    background: transparent;
}

.tt-slot-empty:hover {
    border-color: rgba(233, 69, 96, 0.3);
    background: rgba(233, 69, 96, 0.03);
}

/* Checkbox animation */
.tt-check {
    transition: color 0.2s ease, transform 0.15s ease;
}

.tt-check:active {
    transform: scale(0.85);
}

.tt-slot-completed .tt-check {
    animation: ttCheckPop 0.3s ease;
}

@keyframes ttCheckPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Celebration header animation */
.tt-celebration {
    animation: ttCelebrate 0.5s ease;
}

@keyframes ttCelebrate {
    0% { opacity: 0; transform: translateY(-4px); }
    50% { transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Mobile: always show remove button */
@media (max-width: 768px) {
    .tt-slot .group-hover\:opacity-100 {
        opacity: 1 !important;
    }
}

/* ============================================================================
   MOBILE DAY VIEW (Timeline — Outlook-inspired)
   ============================================================================ */

.mobile-day-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.mobile-day-view.show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Day View Header ---------- */

.dv-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    background: #16213e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    min-height: 52px;
    -webkit-user-select: none;
    user-select: none;
}

.dv-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(15, 52, 96, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.dv-back-btn:active {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.dv-header-center {
    flex: 1;
    min-width: 0;
    text-align: center;
    cursor: pointer;
}

.dv-header-date {
    font-size: 1.05rem;
    font-weight: 700;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-date-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.dv-date-today {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.dv-date-tomorrow {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.dv-date-past {
    background: rgba(255, 255, 255, 0.08);
    color: #a0a0a0;
}

.dv-header-nav {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.dv-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.12s ease;
}

.dv-nav-btn:active {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    transform: scale(0.92);
}

/* ---------- Day View Body (scrollable) ---------- */

.dv-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
}

/* ---------- All Day Section ---------- */

.dv-allday-section {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 52, 96, 0.15);
}

.dv-allday-label {
    flex-shrink: 0;
    width: 52px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 8px;
    text-align: right;
}

.dv-allday-tasks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ---------- Timeline ---------- */

.dv-timeline {
    position: relative;
    padding-bottom: 40px;
}

.dv-hour-row {
    display: flex;
    min-height: 64px;
    position: relative;
}

.dv-hour-label {
    flex-shrink: 0;
    width: 52px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #a0a0a0;
    text-align: right;
    padding: 0 8px 0 0;
    position: relative;
    top: -7px;
}

.dv-hour-content {
    flex: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: 4px 12px 4px 8px;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dv-hour-content:active {
    background: rgba(233, 69, 96, 0.04);
}

.dv-hour-line {
    display: none;
}

/* ---------- Current Time Indicator ---------- */

.dv-time-indicator {
    position: absolute;
    left: 48px;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: top 1s linear;
}

.dv-time-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e94560;
    flex-shrink: 0;
    margin-left: -5px;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.5);
}

.dv-time-line {
    flex: 1;
    height: 2px;
    background: #e94560;
    box-shadow: 0 0 6px rgba(233, 69, 96, 0.3);
}

/* ---------- Task Cards (Day View) ---------- */

.dv-task-card {
    background: #0f3460;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dv-task-card:active {
    transform: scale(0.98);
    background: rgba(15, 52, 96, 0.9);
    border-color: rgba(233, 69, 96, 0.3);
}

.dv-task-overdue {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: inset 3px 0 0 #ef4444;
}

.dv-task-done {
    opacity: 0.55;
    border-color: rgba(34, 197, 94, 0.2);
}

.dv-task-done .dv-task-title {
    text-decoration: line-through;
    color: #a0a0a0;
}

.dv-task-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.dv-task-labels {
    display: flex;
    gap: 3px;
}

.dv-henry {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.dv-task-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: #e94560;
    background: rgba(233, 69, 96, 0.12);
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: auto;
}

.dv-task-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #eaeaea;
    line-height: 1.3;
}

.dv-task-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.dv-task-col {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #a0a0a0;
}

/* ---------- Empty State ---------- */

.dv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: #a0a0a0;
    text-align: center;
}

.dv-empty-state i, .dv-empty-state svg {
    opacity: 0.3;
}

.dv-empty-text {
    font-size: 1rem;
    font-weight: 500;
    color: #a0a0a0;
}

.dv-empty-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dv-empty-add:active {
    background: rgba(233, 69, 96, 0.3);
    transform: scale(0.97);
}

/* ---------- FAB (Floating Action Button) ---------- */

.dv-fab {
    position: absolute;
    bottom: 24px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.45);
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 10;
}

.dv-fab:active {
    transform: scale(0.9);
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

/* ---------- Slide Animations ---------- */

.dv-slide-left {
    animation: dvSlideOutLeft 0.18s ease forwards;
}

.dv-slide-right {
    animation: dvSlideOutRight 0.18s ease forwards;
}

.dv-slide-enter-right {
    animation: dvSlideInRight 0.22s ease forwards;
}

.dv-slide-enter-left {
    animation: dvSlideInLeft 0.22s ease forwards;
}

@keyframes dvSlideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}

@keyframes dvSlideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

@keyframes dvSlideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dvSlideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---------- Desktop Day View Enhancements ---------- */
@media (min-width: 640px) {
    .dv-header {
        padding: 14px 24px 12px;
        max-width: 900px;
        margin: 0 auto;
    }

    .dv-header-date {
        font-size: 1.2rem;
    }

    .dv-allday-section {
        max-width: 900px;
        margin: 0 auto;
        padding: 12px 24px;
    }

    .dv-allday-label {
        width: 72px;
        font-size: 0.75rem;
    }

    .dv-timeline {
        max-width: 900px;
        margin: 0 auto;
    }

    .dv-hour-label {
        width: 72px;
        font-size: 0.75rem;
    }

    .dv-hour-content {
        padding: 6px 24px 6px 12px;
        min-height: 68px;
    }

    .dv-hour-content:hover {
        background: rgba(233, 69, 96, 0.03);
    }

    .dv-task-card {
        padding: 12px 16px;
    }

    .dv-task-card:hover {
        border-color: rgba(233, 69, 96, 0.4);
        background: rgba(15, 52, 96, 0.85);
    }

    .dv-task-title {
        font-size: 0.95rem;
    }

    .dv-time-indicator {
        left: 68px;
    }

    .dv-fab {
        bottom: 32px;
        right: calc(50% - 450px + 20px);
    }

    .dv-back-btn:hover {
        background: rgba(233, 69, 96, 0.2);
        color: #e94560;
    }

    .dv-nav-btn:hover {
        background: rgba(233, 69, 96, 0.2);
        color: #e94560;
    }

    .dv-empty-add:hover {
        background: rgba(233, 69, 96, 0.25);
    }
}

/* ============================================================================
   ACTIVITY LOGS (Leads)
   ============================================================================ */

.log-entry {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(30, 30, 46, 0.5);
    border: 1px solid rgba(49, 50, 68, 0.5);
    transition: background 0.15s ease;
}

.log-entry:hover {
    background: rgba(49, 50, 68, 0.3);
}

.log-entry-date {
    font-size: 0.75rem;
    color: #e94560;
    font-weight: 500;
}

.log-entry-notes {
    font-size: 0.875rem;
    color: #e0e0e0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

.log-entry-images {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.log-entry-images img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid rgba(49, 50, 68, 0.5);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.log-entry-images img:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.log-delete-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.log-entry:hover .log-delete-btn {
    opacity: 1;
}

.log-image-preview-thumb {
    position: relative;
    display: inline-block;
}

.log-image-preview-thumb img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid rgba(49, 50, 68, 0.5);
}

.log-image-preview-thumb .log-img-remove {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}