/* ═══════════════════════════════════════════════════════════════════════════════
   RETAIL INVESTMENT TEAM CRM - ROBOTO TYPOGRAPHY
   Professional & Refined Style
   ═══════════════════════════════════════════════════════════════════════════════ */

/* IMPORT ROBOTO FONT */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: #f9fafb;
    color: #5a6c7d;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== ROBOTO TYPOGRAPHY SYSTEM ========== */

/* Page Titles */
h1, .page-title, .crm-title {
    font-size: 32px;
    font-weight: 500;
    color: #2c3e50;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    line-height: 1.2;
}

/* Section Titles / Card Titles */
h2, .section-title, .card-title, .tile-title, .lead-title {
    font-size: 20px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 14px;
    line-height: 1.3;
}

/* Subsection Titles */
h3 {
    font-size: 16px;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.3;
}

/* Regular Paragraphs */
p {
    font-size: 14px;
    font-weight: 400;
    color: #5a6c7d;
    line-height: 1.6;
}

/* ========== TILE VIEW TYPOGRAPHY ========== */

/* Contact Name */
.contact-name, .lead-contact-name {
    font-size: 16px;
    font-weight: 500;
    color: #34495e;
    margin-bottom: 10px;
}

/* Contact Information (phone, email) */
.contact-info, .contact-phone, .contact-email {
    font-size: 14px;
    font-weight: 400;
    color: #5a6c7d;
    line-height: 1.6;
    margin-bottom: 7px;
}

/* Labels (MESSAGE, NOTES, etc.) */
.field-label, .section-label, label.uppercase {
    font-size: 11px;
    font-weight: 700;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 14px;
    margin-bottom: 5px;
}

/* Message/Description Text */
.message-text, .description-text, .notes-text {
    font-size: 14px;
    font-weight: 400;
    color: #4a5568;
    line-height: 1.5;
}

/* ========== TABLE VIEW TYPOGRAPHY ========== */

/* Table Headers */
.table thead th, table.data-table th {
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 15px;
}

/* Table Cell - Regular Data */
.table tbody td, table.data-table td {
    font-size: 14px;
    font-weight: 400;
    color: #5a6c7d;
    line-height: 1.5;
    padding: 12px 15px;
}

/* Table Cell - Names/Primary Text */
.table tbody td.name-cell,
.table tbody td.primary-text {
    font-weight: 500;
    color: #2c3e50;
}

/* Table Cell - Status Tags */
.status-tag, .table tbody td .status {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pagination Text */
.pagination-info, .row-count {
    font-size: 13px;
    font-weight: 400;
    color: #7f8c8d;
}

/* ========== BUTTONS & UI ELEMENTS ========== */

/* Primary Buttons */
.btn-primary, button.primary, .btn {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Secondary Buttons */
.btn-secondary, button.secondary {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Navigation Links */
.nav-link, nav a {
    font-size: 15px;
    font-weight: 500;
    color: #2c3e50;
}

/* Form Input Fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    font-size: 14px;
    font-weight: 400;
    color: #2c3e50;
    line-height: 1.5;
}

/* Form Labels */
label, .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #34495e;
    margin-bottom: 6px;
}

/* Placeholder Text */
::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #95a5a6;
}

/* ========== RESPONSIVE TYPOGRAPHY ========== */

/* Mobile adjustments (screens under 768px) */
@media (max-width: 768px) {
    h1, .page-title, .crm-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    h2, .section-title, .card-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .contact-name {
        font-size: 15px;
    }

    .table thead th, table.data-table th {
        font-size: 12px;
        padding: 10px 12px;
    }

    .table tbody td, table.data-table td {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* ========== ENHANCED MOBILE & TABLET OPTIMIZATIONS ========== */

/* iPad Specific (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Table optimizations for iPad */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 100%;
        font-size: 13px;
    }

    .table th, .table td {
        padding: 8px 12px;
        white-space: nowrap;
    }

    /* Button sizing for iPad */
    .btn, .action-btn {
        padding: 8px 16px;
        font-size: 14px;
        min-height: 44px; /* iOS touch target */
    }

    /* Navigation tabs for iPad */
    .tabs, .pipeline-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .tab, .pipeline-tab {
        flex: 1;
        min-width: 120px;
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* iPhone and small mobile (under 768px) */
@media (max-width: 768px) {
    /* Hide system test button and debug controls on mobile */
    .system-test-btn,
    button[onclick*="system"],
    button[onclick*="test"],
    button[onclick*="Test"],
    button[onclick*="Suite"],
    .test-suite-btn,
    .debug-btn,
    .system-btn,
    button[title*="test" i],
    button[title*="system" i],
    .btn[data-action*="test"],
    .btn[data-action*="system"] {
        display: none !important;
    }

    /* Table responsiveness - stack tables vertically on mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px; /* full width on mobile */
    }

    .table {
        width: 100%;
        min-width: 600px; /* minimum width to prevent cramping */
        font-size: 12px;
    }

    .table th {
        font-size: 11px;
        padding: 8px 6px;
        white-space: nowrap;
    }

    .table td {
        font-size: 12px;
        padding: 8px 6px;
        word-break: break-word;
    }

    /* Button optimizations for mobile */
    .btn, .action-btn {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px; /* iOS touch target standard */
        border-radius: 8px;
    }

    /* Make small buttons more touchable */
    .btn-sm, .btn-xs {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 40px;
    }

    /* Navigation tabs - stack or scroll horizontally */
    .tabs, .pipeline-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 8px; /* space for scrollbar */
    }

    .tab, .pipeline-tab {
        flex: 0 0 auto;
        min-width: 100px;
        font-size: 12px;
        padding: 10px 12px;
        white-space: nowrap;
    }

    /* Modal optimizations for mobile */
    .modal-content {
        margin: 20px 16px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .modal-header {
        padding: 16px;
        font-size: 18px;
    }

    .modal-body {
        padding: 16px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    /* Form fields in modals */
    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
        min-height: 44px;
    }

    /* Action buttons in tables - make them larger and easier to tap */
    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .action-buttons .btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    /* Tiles view optimizations */
    .tiles-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 16px;
        padding: 16px;
    }

    .tile {
        padding: 16px;
        border-radius: 8px;
    }

    /* Status badges - make them more readable */
    .status-badge {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
    }

    /* Export and filter buttons */
    .export-controls,
    .filter-controls {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

    .export-controls .btn,
    .filter-controls .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Extra small devices (under 480px) */
@media (max-width: 480px) {
    /* Even more compact for small phones */
    .table {
        min-width: 500px;
        font-size: 11px;
    }

    .table th, .table td {
        padding: 6px 4px;
    }

    .btn, .action-btn {
        font-size: 13px;
        padding: 10px 12px;
    }

    .tab, .pipeline-tab {
        font-size: 11px;
        padding: 8px 10px;
        min-width: 80px;
    }

    /* Stack form fields vertically */
    .form-row {
        flex-direction: column;
    }

    .form-group {
        width: 100% !important;
    }
}

/* iOS Momentum Scrolling */
.table-container,
.property-grid,
.modal-body,
[id*="Container"],
[class*="scroll"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* CSS VARIABLES - ROBOTO PROFESSIONAL COLOR SCHEME */
:root {
    /* Primary Brand Colors */
    --primary-color: #0d7e6e;
    --primary-dark: #0a6b5e;
    --secondary-color: #2c5f5f;

    /* Status Colors */
    --success-color: #22c55e;
    --warning-color: #fbbf24;
    --danger-color: #ef4444;
    --info-color: #60a5fa;

    /* Roboto Typography Colors */
    --text-heading: #2c3e50;
    --text-heading-alt: #34495e;
    --text-body: #5a6c7d;
    --text-message: #4a5568;
    --text-label: #7f8c8d;
    --text-placeholder: #95a5a6;

    /* Gray Scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}

/* HEADER STYLING - MATCHES MOCKUP */
.header {
    background: var(--primary-color);
    color: white;
    padding: 16px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.logo-text h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: white;
}

.logo-text p {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
    color: white;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sync-status {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.sync-status.success {
    background: rgba(34, 197, 94, 0.2);
    color: white;
}

/* NAVIGATION - MATCHES MOCKUP STYLE */
.nav-container {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 24px;
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
}

.nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

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

.nav-section-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-right: 16px;
    min-width: 60px;
}

.nav-tab {
    background: rgba(13, 126, 110, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(13, 126, 110, 0.2);
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.nav-tab:hover {
    background: rgba(13, 126, 110, 0.2);
    border-color: rgba(13, 126, 110, 0.3);
}

.nav-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* MAIN CONTENT */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 20px 24px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* TAB CONTENT */
.tab-content {
    display: none;
}

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

/* SECTIONS - MATCHES MOCKUP CARDS */
.content-section,
.section {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
}

.section-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* BUTTONS - MATCHES MOCKUP STYLE */
.btn,
.action-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    min-width: 80px;
    min-height: 44px;
    height: auto;
    justify-content: center;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.btn:hover,
.action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-toggle {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-toggle.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Active state for toggle buttons */
.btn.active {
    background: var(--primary-dark) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

/* ═══════════════════════════════════════════════════════════════
   VIEW TOGGLE BUTTONS - Table/Tiles Switch
   ═══════════════════════════════════════════════════════════════ */

/* Container for buttons */
.section-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* Style the toggle buttons */
.btn-toggle {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-toggle i {
    font-size: 0.875rem;
}

.btn-toggle:hover {
    color: var(--gray-900);
    background: var(--gray-50);
    border-color: var(--gray-400);
}

/* Active state for selected view */
.btn-toggle.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.btn-toggle.active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* PIPELINE STYLING - MATCHES MOCKUP EXACTLY */
.pipeline-container {
    display: flex;
    gap: 12px;
    overflow-x: visible;
    padding-bottom: 16px;
    width: 100%;
}

.pipeline-stage {
    min-width: 0;
    flex: 1 1 0;
    max-width: calc((100% - 48px) / 5); /* 5 columns with 12px gaps */
}

.stage-header {
    padding: 12px;
    border-radius: 8px 8px 0 0;
    border-top: 4px solid;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stage-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.stage-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stage-count {
    background: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.stage-value {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 4px;
}

/* STAGE COLORS - MATCHES MOCKUP */
.stage-prospect .stage-header {
    background: rgba(96, 165, 250, 0.2);
    border-top-color: #60a5fa;
    color: #1e40af;
}

.stage-lead .stage-header {
    background: rgba(251, 191, 36, 0.2);
    border-top-color: #fbbf24;
    color: #92400e;
}

.stage-property-tour .stage-header {
    background: rgba(251, 146, 60, 0.2);
    border-top-color: #fb923c;
    color: #9a3412;
}

.stage-loi .stage-header {
    background: rgba(251, 146, 60, 0.2);
    border-top-color: #fb923c;
    color: #9a3412;
}

.stage-offer .stage-header {
    background: rgba(167, 139, 250, 0.2);
    border-top-color: #a78bfa;
    color: #5b21b6;
}

.stage-lease .stage-header {
    background: rgba(167, 139, 250, 0.2);
    border-top-color: #a78bfa;
    color: #5b21b6;
}

.stage-psa .stage-header {
    background: rgba(45, 212, 191, 0.2);
    border-top-color: #2dd4bf;
    color: #134e4a;
}

.stage-deal-won .stage-header {
    background: rgba(34, 197, 94, 0.2);
    border-top-color: #22c55e;
    color: #166534;
}

.stage-deal-lost .stage-header {
    background: rgba(239, 68, 68, 0.2);
    border-top-color: #ef4444;
    color: #991b1b;
}

/* DEAL CARDS - MATCHES MOCKUP */
.deal-card {
    background: white;
    border-left: 4px solid;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}

.deal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.deal-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.stage-prospect .deal-card {
    border-left-color: #60a5fa;
}

.stage-lead .deal-card {
    border-left-color: #fbbf24;
}

.stage-property-tour .deal-card,
.stage-loi .deal-card {
    border-left-color: #fb923c;
}

.stage-offer .deal-card,
.stage-lease .deal-card {
    border-left-color: #a78bfa;
}

.stage-psa .deal-card {
    border-left-color: #2dd4bf;
}

.stage-deal-won .deal-card {
    border-left-color: #22c55e;
}

.stage-deal-lost .deal-card {
    border-left-color: #ef4444;
}

.deal-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.deal-card-contact {
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: 4px;
}

.deal-card-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 8px 0;
}

/* NEW CARD LAYOUT WITH COLORED HEADERS */
.deal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 16px;
    margin: -16px -16px 12px -16px;
    border-radius: 6px 6px 0 0;
}

.deal-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.deal-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.2;
    flex: 1;
}

.deal-card-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
}

.deal-card-contact {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 6px;
    line-height: 1.4;
}

.deal-card-commission {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 8px 0;
}

.deal-card-date {
    font-size: 12px;
    color: #9ca3af;
    margin-top: auto;
    padding-top: 8px;
}

/* COLORED HEADERS FOR LEASE PIPELINE */
.deal-card-header-prospect {
    background: rgba(96, 165, 250, 0.15);
    border-bottom: 2px solid #60a5fa;
}

.deal-card-header-lead {
    background: rgba(251, 191, 36, 0.15);
    border-bottom: 2px solid #fbbf24;
}

.deal-card-header-loi {
    background: rgba(251, 146, 60, 0.15);
    border-bottom: 2px solid #fb923c;
}

.deal-card-header-lease {
    background: rgba(167, 139, 250, 0.15);
    border-bottom: 2px solid #a78bfa;
}

.deal-card-header-deal-lost {
    background: rgba(239, 68, 68, 0.15);
    border-bottom: 2px solid #ef4444;
}

/* COLORED HEADERS FOR ACQUISITION PIPELINE */
.deal-card-header-target-property {
    background: rgba(96, 165, 250, 0.15);
    border-bottom: 2px solid #60a5fa;
}

.deal-card-header-initial-contact {
    background: rgba(251, 191, 36, 0.15);
    border-bottom: 2px solid #fbbf24;
}

.deal-card-header-evaluating {
    background: rgba(251, 146, 60, 0.15);
    border-bottom: 2px solid #fb923c;
}

.deal-card-header-meeting {
    background: rgba(167, 139, 250, 0.15);
    border-bottom: 2px solid #a78bfa;
}

.deal-card-header-bov {
    background: rgba(45, 212, 191, 0.15);
    border-bottom: 2px solid #2dd4bf;
}

.deal-card-header-listing-won {
    background: rgba(34, 197, 94, 0.15);
    border-bottom: 2px solid #22c55e;
}

.deal-card-header-follow-up {
    background: rgba(239, 68, 68, 0.15);
    border-bottom: 2px solid #ef4444;
}

/* COLORED HEADERS FOR SALES PIPELINE */
.deal-card-header-property-tour {
    background: rgba(251, 146, 60, 0.15);
    border-bottom: 2px solid #fb923c;
}

.deal-card-header-offer {
    background: rgba(167, 139, 250, 0.15);
    border-bottom: 2px solid #a78bfa;
}

.deal-card-header-psa {
    background: rgba(45, 212, 191, 0.15);
    border-bottom: 2px solid #2dd4bf;
}

.deal-card-header-deal-won {
    background: rgba(34, 197, 94, 0.15);
    border-bottom: 2px solid #22c55e;
}

.deal-card-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

/* Deal Card Notes Section */
.deal-card-notes-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.deal-card-notes-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deal-card-notes {
    width: 100%;
    min-height: 50px;
    max-height: 100px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    background: #f9fafb;
    transition: all 0.2s;
}

.deal-card-notes:hover {
    background: white;
    border-color: #d1d5db;
}

.deal-card-notes:focus {
    outline: none;
    background: white;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

.deal-card-notes::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Enhanced Acquisition Pipeline Card Styles */
.new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
    animation: pulse-new 2s infinite;
    letter-spacing: 0.5px;
}

@keyframes pulse-new {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(34, 197, 94, 0.5);
    }
}

.acquisition-card .deal-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    margin: 0;
    grid-template-columns: unset;
}

.acquisition-card .deal-card-section {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-200);
}

.acquisition-card .deal-card-section:last-of-type {
    border-bottom: none;
}

.acquisition-card .deal-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.acquisition-card .deal-card-phone {
    font-size: 13px;
    color: var(--primary-color);
    margin-top: 4px;
}

.acquisition-card .deal-card-phone i {
    font-size: 11px;
    margin-right: 4px;
}

.acquisition-card .deal-card-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.acquisition-card .detail-item {
    font-size: 12px;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: 4px;
}

.acquisition-card .detail-item i {
    color: var(--primary-color);
    font-size: 11px;
}

.acquisition-card .deal-card-tenant {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.5;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: 4px;
    max-height: 60px;
    overflow-y: auto;
}

.acquisition-card .deal-card-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--success-color);
    margin: 10px 0;
    padding: 8px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 4px;
}

.acquisition-card .deal-card-date {
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-600);
}

.acquisition-card .deal-card-quick-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0;
    padding: 10px 0;
    border-top: 1px solid var(--gray-200);
}

.quick-action-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid var(--primary-color);
    background: white;
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.quick-action-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(44, 122, 123, 0.2);
}

.quick-action-btn i {
    font-size: 11px;
}

.quick-action-btn.primary {
    background: var(--primary-color);
    color: white;
    flex: 1 1 100%;
    border-color: var(--primary-color);
}

.quick-action-btn.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.acquisition-card .deal-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--gray-200);
}

.acquisition-card .deal-card-parcel-id {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    font-family: 'Courier New', monospace;
    background: var(--gray-100);
    padding: 4px 8px;
    border-radius: 3px;
    display: inline-block;
}

/* Acquisition Pipeline Stage Colors */
.pipeline-stage[data-stage="Target Property"] .stage-header {
    background: rgba(96, 165, 250, 0.2) !important;
    border-top: 4px solid #60a5fa !important;
    color: #1e40af !important;
}

.pipeline-stage[data-stage="Target Property"] .deal-card {
    border-left: 4px solid #60a5fa !important; /* Blue */
}

.pipeline-stage[data-stage="Initial Contact"] .stage-header {
    background: rgba(251, 191, 36, 0.2) !important;
    border-top: 4px solid #fbbf24 !important;
    color: #92400e !important;
}

.pipeline-stage[data-stage="Initial Contact"] .deal-card {
    border-left: 4px solid #fbbf24 !important; /* Yellow */
}

.pipeline-stage[data-stage="Evaluating"] .stage-header {
    background: rgba(251, 146, 60, 0.2) !important;
    border-top: 4px solid #fb923c !important;
    color: #9a3412 !important;
}

.pipeline-stage[data-stage="Evaluating"] .deal-card {
    border-left: 4px solid #fb923c !important; /* Orange */
}

.pipeline-stage[data-stage="Meeting"] .stage-header {
    background: rgba(167, 139, 250, 0.2) !important;
    border-top: 4px solid #a78bfa !important;
    color: #5b21b6 !important;
}

.pipeline-stage[data-stage="Meeting"] .deal-card {
    border-left: 4px solid #a78bfa !important; /* Purple */
}

.pipeline-stage[data-stage="BOV"] .stage-header {
    background: rgba(45, 212, 191, 0.2) !important;
    border-top: 4px solid #2dd4bf !important;
    color: #134e4a !important;
}

.pipeline-stage[data-stage="BOV"] .deal-card {
    border-left: 4px solid #2dd4bf !important; /* Teal */
}

.pipeline-stage[data-stage="Listing Won"] .stage-header {
    background: rgba(34, 197, 94, 0.2) !important;
    border-top: 4px solid #22c55e !important;
    color: #166534 !important;
}

.pipeline-stage[data-stage="Listing Won"] .deal-card {
    border-left: 4px solid #22c55e !important; /* Green */
}

.pipeline-stage[data-stage="Follow Up"] .stage-header {
    background: rgba(239, 68, 68, 0.2) !important;
    border-top: 4px solid #ef4444 !important;
    color: #991b1b !important;
}

.pipeline-stage[data-stage="Follow Up"] .deal-card {
    border-left: 4px solid #ef4444 !important; /* Red */
}

.pipeline-stage[data-stage="Deal Lost"] .stage-header {
    background: rgba(148, 163, 184, 0.2) !important;
    border-top: 4px solid #94a3b8 !important;
    color: #475569 !important;
}

.pipeline-stage[data-stage="Deal Lost"] .deal-card {
    border-left: 4px solid #94a3b8 !important; /* Gray */
}

/* ============================================
   OPTIMIZED TILE LAYOUTS
   Compact spacing with proper content sizing
   ============================================ */

/* Grid container - compact spacing */
.property-grid {
    display: grid;
    gap: 1rem;
}

/* Desktop only: 4 columns for tiles */
@media (min-width: 769px) {
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.8rem !important;
        padding: 1rem !important;
        align-items: stretch !important;
    }

    /* 4 tiles per row for Prospecting and Pipeline sections */
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesPipelineContainer,
    #leasePipelineContainer {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.8rem !important;
    }

    /* 4 tiles per row for Sales/Lease Leads */
    #salesLeadsTilesGrid,
    #leaseLeadsTilesGrid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.8rem !important;
    }
}

/* Pagination should span all columns */
.property-grid .pagination-container {
    grid-column: 1 / -1;
}

/* Responsive grid for smaller screens */
@media (max-width: 1400px) {
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Prospecting and Pipeline: 4 columns on smaller desktops */
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesPipelineContainer,
    #leasePipelineContainer {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Small desktop / Large tablet landscape - 1200px */
@media (max-width: 1200px) {
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Prospecting and Pipeline: 2 columns on tablets */
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesPipelineContainer,
    #leasePipelineContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .nav-content {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 1024px) {
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* iPhone landscape / Small tablet - 812px */
@media (max-width: 812px) {
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 1rem !important;
    }

    /* Ensure all specific tile grids use single column */
    #salesLeadsTilesGrid,
    #leaseLeadsTilesGrid,
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesListingsTilesGrid,
    #leaseListingsTilesGrid,
    #currentPropertiesTilesGrid,
    #expiredListingsTilesGrid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .nav-tab {
        font-size: 14px;
        padding: 10px 16px;
    }
}

@media (max-width: 768px) {
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    /* Ensure all specific tile grids use single column */
    #salesLeadsTilesGrid,
    #leaseLeadsTilesGrid,
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesListingsTilesGrid,
    #leaseListingsTilesGrid,
    #currentPropertiesTilesGrid,
    #expiredListingsTilesGrid {
        grid-template-columns: 1fr !important;
    }
}

/* Large phones - 480px */
@media (max-width: 480px) {
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.5rem !important;
    }

    /* Ensure all specific tile grids use single column with compact spacing */
    #salesLeadsTilesGrid,
    #leaseLeadsTilesGrid,
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesListingsTilesGrid,
    #leaseListingsTilesGrid,
    #currentPropertiesTilesGrid,
    #expiredListingsTilesGrid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.5rem !important;
    }

    .header {
        padding: 12px 16px;
    }

    .logo-text h1 {
        font-size: 1.1rem;
    }

    .logo-text p {
        font-size: 0.75rem;
    }

    .nav-tab {
        font-size: 13px;
        padding: 8px 12px;
        min-height: 44px;
    }

    .btn,
    .action-btn {
        font-size: 14px;
        padding: 10px 12px;
    }
}

/* iPhone specific optimization - Portrait mode */
@media only screen
  and (max-width: 428px)
  and (orientation: portrait) {
    /* Force single column for ALL tile grids on iPhone portrait */
    .property-grid,
    .tiles-grid,
    [class*="TilesGrid"],
    [class*="TilesContainer"],
    [id*="TilesGrid"],
    [id*="TilesContainer"],
    #salesLeadsTilesGrid,
    #leaseLeadsTilesGrid,
    #salesProspectingTilesGrid,
    #leaseProspectingTilesGrid,
    #salesListingsTilesGrid,
    #leaseListingsTilesGrid,
    #currentPropertiesTilesGrid,
    #expiredListingsTilesGrid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.5rem !important;
        width: 100% !important;
    }

    /* Ensure tiles take full width */
    .property-tile,
    [class*="tile"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Property tiles with appropriate heights */
.property-tile {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    height: 700px !important;
    min-height: 700px !important;
    max-height: 700px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.property-tile:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* All Listing tiles - 400px tall (Sales, Current Properties, Expired) */
#salesListingsTilesGrid .property-tile,
#currentPropertiesTilesGrid .property-tile,
#expiredListingsTilesGrid .property-tile {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

/* Expanded state for listing tiles (Sales, Current Properties, Expired) */
#salesListingsTilesGrid .property-tile.expanded,
#currentPropertiesTilesGrid .property-tile.expanded,
#expiredListingsTilesGrid .property-tile.expanded {
    max-height: none !important;
    height: auto !important;
    min-height: 400px !important;
    overflow: visible !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(13, 126, 110, 0.15) !important;
}

/* COMPACT TILES FOR LEADS/PROSPECTING/LEASE LISTINGS SECTIONS */
#salesLeadsTilesGrid .property-tile,
#salesProspectingTilesGrid .property-tile,
#leaseLeadsTilesGrid .property-tile,
#leaseProspectingTilesGrid .property-tile,
#leaseListingsGroupedTiles .property-tile {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Expanded state for compact tiles */
#salesLeadsTilesGrid .property-tile.expanded,
#salesProspectingTilesGrid .property-tile.expanded,
#leaseLeadsTilesGrid .property-tile.expanded,
#leaseProspectingTilesGrid .property-tile.expanded,
#leaseListingsGroupedTiles .property-tile.expanded {
    max-height: none !important;
    height: auto !important;
    min-height: 180px !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(13, 126, 110, 0.15) !important;
}

/* Compact contact info for leads/prospecting tiles */
#salesLeadsTilesGrid .property-tile .contact-info,
#salesProspectingTilesGrid .property-tile .contact-info,
#leaseLeadsTilesGrid .property-tile .contact-info,
#leaseProspectingTilesGrid .property-tile .contact-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
}

#salesLeadsTilesGrid .property-tile .contact-row,
#salesProspectingTilesGrid .property-tile .contact-row,
#leaseLeadsTilesGrid .property-tile .contact-row,
#leaseProspectingTilesGrid .property-tile .contact-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
}

#salesLeadsTilesGrid .property-tile .contact-icon,
#salesProspectingTilesGrid .property-tile .contact-icon,
#leaseLeadsTilesGrid .property-tile .contact-icon,
#leaseProspectingTilesGrid .property-tile .contact-icon {
    width: 12px !important;
    text-align: center !important;
    color: var(--primary-color) !important;
    flex-shrink: 0 !important;
}

#salesLeadsTilesGrid .property-tile .contact-text,
#salesProspectingTilesGrid .property-tile .contact-text,
#leaseLeadsTilesGrid .property-tile .contact-text,
#leaseProspectingTilesGrid .property-tile .contact-text {
    color: #4a5568 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
}

/* Notes section for expandable content */
#salesLeadsTilesGrid .property-tile .notes-section,
#salesProspectingTilesGrid .property-tile .notes-section,
#leaseLeadsTilesGrid .property-tile .notes-section,
#leaseProspectingTilesGrid .property-tile .notes-section,
#leaseListingsGroupedTiles .property-tile .notes-section {
    flex: 1 !important;
    min-height: 60px !important;
    margin-bottom: 8px !important;
}

#salesLeadsTilesGrid .property-tile .notes-preview,
#salesProspectingTilesGrid .property-tile .notes-preview,
#leaseLeadsTilesGrid .property-tile .notes-preview,
#leaseProspectingTilesGrid .property-tile .notes-preview,
#salesListingsTilesGrid .property-tile .notes-preview,
#leaseListingsGroupedTiles .property-tile .notes-preview,
#expiredListingsTilesGrid .property-tile .notes-preview {
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

#salesLeadsTilesGrid .property-tile .notes-preview.collapsed,
#salesProspectingTilesGrid .property-tile .notes-preview.collapsed,
#leaseLeadsTilesGrid .property-tile .notes-preview.collapsed,
#leaseProspectingTilesGrid .property-tile .notes-preview.collapsed,
#salesListingsTilesGrid .property-tile .notes-preview.collapsed,
#leaseListingsGroupedTiles .property-tile .notes-preview.collapsed,
#expiredListingsTilesGrid .property-tile .notes-preview.collapsed {
    max-height: 40px !important;
    position: relative !important;
}

#salesLeadsTilesGrid .property-tile .notes-preview.collapsed::after,
#salesProspectingTilesGrid .property-tile .notes-preview.collapsed::after,
#leaseLeadsTilesGrid .property-tile .notes-preview.collapsed::after,
#leaseProspectingTilesGrid .property-tile .notes-preview.collapsed::after,
#salesListingsTilesGrid .property-tile .notes-preview.collapsed::after,
#leaseListingsGroupedTiles .property-tile .notes-preview.collapsed::after,
#expiredListingsTilesGrid .property-tile .notes-preview.collapsed::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 15px !important;
    background: linear-gradient(transparent, white) !important;
}

#salesLeadsTilesGrid .property-tile .notes-preview.expanded,
#salesProspectingTilesGrid .property-tile .notes-preview.expanded,
#leaseLeadsTilesGrid .property-tile .notes-preview.expanded,
#leaseProspectingTilesGrid .property-tile .notes-preview.expanded,
#salesListingsTilesGrid .property-tile .notes-preview.expanded,
#leaseListingsGroupedTiles .property-tile .notes-preview.expanded,
#expiredListingsTilesGrid .property-tile .notes-preview.expanded {
    max-height: none !important;
}

/* Note items styling */
#salesLeadsTilesGrid .property-tile .note-item,
#salesProspectingTilesGrid .property-tile .note-item,
#leaseLeadsTilesGrid .property-tile .note-item,
#leaseProspectingTilesGrid .property-tile .note-item,
#salesListingsTilesGrid .property-tile .note-item,
#expiredListingsTilesGrid .property-tile .note-item {
    background: #f8fafc !important;
    border-left: 3px solid #cbd5e0 !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 0 4px 4px 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

#salesLeadsTilesGrid .property-tile .note-item.recent,
#salesProspectingTilesGrid .property-tile .note-item.recent,
#leaseLeadsTilesGrid .property-tile .note-item.recent,
#leaseProspectingTilesGrid .property-tile .note-item.recent,
#salesListingsTilesGrid .property-tile .note-item.recent,
#expiredListingsTilesGrid .property-tile .note-item.recent {
    border-left-color: var(--primary-color) !important;
    background: #f0fdf4 !important;
}

#salesLeadsTilesGrid .property-tile .note-item.urgent,
#salesProspectingTilesGrid .property-tile .note-item.urgent,
#leaseLeadsTilesGrid .property-tile .note-item.urgent,
#leaseProspectingTilesGrid .property-tile .note-item.urgent {
    border-left-color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* Show more/less button */
#salesLeadsTilesGrid .property-tile .show-more-btn,
#salesProspectingTilesGrid .property-tile .show-more-btn,
#leaseLeadsTilesGrid .property-tile .show-more-btn,
#leaseProspectingTilesGrid .property-tile .show-more-btn,
#salesListingsTilesGrid .property-tile .show-more-btn,
#expiredListingsTilesGrid .property-tile .show-more-btn {
    background: none !important;
    border: 1px solid #cbd5e0 !important;
    color: var(--primary-color) !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 4px 0 8px 0 !important;
    align-self: flex-start !important;
    transition: all 0.2s !important;
}

/* Show more/less button in tile headers */
.tile-header .show-more-btn {
    background: white !important;
    border: 1px solid #ddd !important;
    color: #4a5568 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.tile-header .show-more-btn:hover {
    background: #f7fafc !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

#salesLeadsTilesGrid .property-tile .show-more-btn:hover,
#salesProspectingTilesGrid .property-tile .show-more-btn:hover,
#leaseLeadsTilesGrid .property-tile .show-more-btn:hover,
#leaseProspectingTilesGrid .property-tile .show-more-btn:hover {
    background: #f7fafc !important;
    border-color: var(--primary-color) !important;
}

/* Compact action buttons - two row layout */
#salesLeadsTilesGrid .property-tile .action-buttons,
#salesProspectingTilesGrid .property-tile .action-buttons,
#leaseLeadsTilesGrid .property-tile .action-buttons,
#leaseProspectingTilesGrid .property-tile .action-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* Adjust grid auto-rows for listing grids - 400px */
#salesListingsTilesGrid,
#currentPropertiesTilesGrid,
#expiredListingsTilesGrid {
    grid-auto-rows: 400px !important;
}

/* Lease Listings - 4 tiles per row - SIMPLIFIED (no property-group wrapper anymore) */
#leaseListingsGroupedTiles .property-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.8rem !important; /* Consistent with other 4-column layouts */
    padding: 0.75rem !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
}

/* Lease listing tiles now 320px - styles already defined above */

/* TABLE & REPORT ACTION BUTTONS - Icon-only, no background, colored icons */
.table .action-buttons button,
.table .action-btn,
.leads-table .action-btn,
#enhancedLeadReportModal .action-btn,
#propertyLeadReportTable .action-btn,
table .action-btn {
    background: transparent !important;
    border: none !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
}

/* Specific icon colors - Always visible, not just on hover */
.table .action-btn.btn-chart,
.table .action-btn[onclick*="LeadReport"],
.table .action-btn[onclick*="leadReport"] {
    color: #3b82f6 !important;
}

.table .action-btn.btn-pipeline,
.table .action-btn[onclick*="Pipeline"] {
    color: var(--primary-color) !important;
}

.table .action-btn.btn-email,
.table .action-btn[onclick*="email"],
.table .action-btn[onclick*="Email"] {
    color: #3b82f6 !important;
}

.table .action-btn.btn-call,
.table .action-btn[onclick*="call"],
.table .action-btn[onclick*="Call"] {
    color: #10b981 !important;
}

.table .action-btn.btn-edit,
.table .action-btn[onclick*="edit"],
.table .action-btn[onclick*="Edit"] {
    color: #f59e0b !important;
}

.table .action-btn.btn-delete,
.table .action-btn[onclick*="delete"],
.table .action-btn[onclick*="Delete"] {
    color: #ef4444 !important;
}

.table .action-btn.btn-followup,
.table .action-btn[onclick*="followUp"],
.table .action-btn[onclick*="FollowUp"] {
    color: #8b5cf6 !important;
}

/* Hover effects - slight background and scale */
.table .action-buttons button:hover,
.table .action-btn:hover,
.leads-table .action-btn:hover,
#enhancedLeadReportModal .action-btn:hover,
#propertyLeadReportTable .action-btn:hover,
table .action-btn:hover {
    background: var(--gray-100) !important;
    transform: scale(1.15) !important;
}

/* Tile Header with status indicator and checkbox */
.property-tile .tile-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.property-tile .company-name {
    flex: 1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
    margin-right: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Status indicators in header */
.property-tile .status-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.property-tile .status-indicator.has-notes {
    background-color: #22c55e !important; /* Green for notes */
}

.property-tile .status-indicator.urgent {
    background-color: #ef4444 !important; /* Red for urgent */
}

.property-tile .status-indicator.follow-up {
    background-color: #3b82f6 !important; /* Blue for follow-up */
}

/* Contact info - fixed space */
.property-tile > p {
    flex: 0 0 auto !important;
    margin: 0.4rem 0 !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
}

.property-badge {
    background: var(--primary-color);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
    width: fit-content;
    flex: 0 0 auto !important;
}

/* Price - fixed space */
.property-tile .price {
    flex: 0 0 auto !important;
    margin: 0.5rem 0 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

/* Tile details grid - if present */
.tile-details {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0.75rem 0 !important;
}

.tile-detail-item {
    display: flex !important;
    flex-direction: column !important;
}

.tile-detail-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.25rem !important;
}

.tile-detail-value {
    font-size: 0.85rem !important;
    color: var(--gray-900) !important;
    font-weight: 500 !important;
}

/* Message section - TRUNCATED */
.property-tile [style*="margin: 8px 0"] {
    flex: 0 0 auto !important;
    margin: 0.75rem 0 !important;
}

.property-tile .tile-message {
    display: block !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    flex: 0 0 auto !important;
}

/* Notes section - TRUNCATED */
.notes-section {
    flex: 0 0 auto !important;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--gray-200) !important;
    background: var(--gray-50);
    padding: 10px;
    border-radius: 6px;
}

.notes-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.4rem !important;
    flex: 0 0 auto !important;
}

.tile-notes-content {
    display: block !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    flex: 0 0 auto !important;
}

/* Truncated state - 3 lines with ellipsis */
.tile-message.tile-content-truncated,
.tile-notes-content.tile-content-truncated,
.tile-content-truncated,
.tile-message:not(.tile-content-full):not(.expanded),
.tile-notes-content:not(.tile-content-full):not(.expanded) {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 4.5em !important;
    line-height: 1.5em !important;
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 4px;
    max-width: 100%;
    word-wrap: break-word;
    word-break: break-word;
}

/* Expanded state - shows more but stays in bounds */
.tile-message.tile-content-full,
.tile-notes-content.tile-content-full,
.tile-content-full,
.tile-message.expanded,
.tile-notes-content.expanded {
    display: -webkit-box !important;
    -webkit-line-clamp: 8 !important;
    line-clamp: 8 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 12em !important;
    line-height: 1.5em !important;
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 4px;
    word-wrap: break-word;
    word-break: break-word;
}

/* Show more/less button */
.show-more-btn,
.tile-expand-btn {
    display: inline-block !important;
    color: var(--primary-color) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0 !important;
    margin: 0.25rem 0 !important;
    text-decoration: underline !important;
    flex: 0 0 auto !important;
}

.show-more-btn:hover,
.tile-expand-btn:hover {
    color: var(--primary-dark, #0a8270) !important;
}

/* Status dropdown - fixed space */
.property-tile select {
    width: 100% !important;
    padding: 0.5rem !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    margin: 0.5rem 0 !important;
    flex: 0 0 auto !important;
}

/* Status container */
.property-tile > div[style*="margin-top: 1rem"] {
    flex: 0 0 auto !important;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--gray-200) !important;
}

/* TABLES - MATCHES MOCKUP */
.table-container {
    overflow-x: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #1f2937;
}

.table thead {
    background: var(--primary-color);
    color: white !important;
    position: sticky;
    top: 0;
}

.table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white !important;
}

/* Ensure ALL elements in table header are white */
.table thead th,
.table thead th *,
.table thead input[type="checkbox"] + label,
.table thead a {
    color: white !important;
}

.table th.right {
    text-align: right;
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
}

.table td.right {
    text-align: right;
}

/* Column width constraints for better fit */
.table th:has(input[type="checkbox"]),
.table td:has(input[type="checkbox"]) {
    width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 12px 8px;
}

/* Property column */
.table th:nth-child(2),
.table td:nth-child(2) {
    width: 180px;
    max-width: 200px;
}

/* Contact column (3rd column - name, phone, email stacked) */
.table th:nth-child(3),
.table td:nth-child(3),
.table th.contact,
.table td.contact {
    width: 200px;
    max-width: 220px;
    vertical-align: top;
    line-height: 1.6;
}

/* Contact column text styling */
.table td.contact {
    font-size: 14px;
}

.table td.contact .contact-name {
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    display: block;
    margin-bottom: 4px;
}

.table td.contact .contact-phone,
.table td.contact .contact-email {
    font-size: 13px;
    color: #5a6c7d;
    display: block;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Message column */
.table th:nth-child(4),
.table td:nth-child(4) {
    min-width: 200px;
    max-width: 300px;
}

/* Status column */
.table th:nth-child(5),
.table td:nth-child(5) {
    width: 120px;
    max-width: 140px;
}

/* Notes column */
.table th:nth-child(6),
.table td:nth-child(6) {
    min-width: 150px;
    max-width: 250px;
}

/* Actions column */
.table th:nth-child(7),
.table td:nth-child(7) {
    width: 200px;
    text-align: center;
}

.table tbody tr:nth-child(even) {
    background: var(--gray-50);
}

.table tbody tr:hover {
    background: var(--gray-100);
}

/* Lease Listings Sub-Table Column Widths */
.sub-table {
    width: 100%;
    table-layout: auto;
}

.sub-table th:nth-child(1),
.sub-table td:nth-child(1) {
    width: 12%;
    min-width: 100px;
}

.sub-table th:nth-child(2),
.sub-table td:nth-child(2) {
    width: 12%;
    min-width: 100px;
    text-align: right;
}

.sub-table th:nth-child(3),
.sub-table td:nth-child(3) {
    width: 10%;
    min-width: 80px;
    text-align: right;
}

.sub-table th:nth-child(4),
.sub-table td:nth-child(4) {
    width: 10%;
    min-width: 80px;
    text-align: right;
}

.sub-table th:nth-child(5),
.sub-table td:nth-child(5) {
    width: 15%;
    min-width: 120px;
    text-align: right;
}

.sub-table th:nth-child(6),
.sub-table td:nth-child(6) {
    width: 25%;
    min-width: 150px;
}

.sub-table th:nth-child(7),
.sub-table td:nth-child(7) {
    width: 8%;
    min-width: 60px;
    text-align: center;
}

.sub-table th:nth-child(8),
.sub-table td:nth-child(8) {
    width: 8%;
    min-width: 80px;
    text-align: center;
}

/* FILTERS */
.table-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-input,
.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
    background: white;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 126, 110, 0.1);
}

/* FORMS */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 0.6rem;
    color: var(--primary-color);
    letter-spacing: 0.01em;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.6;
    background: white;
    transition: all 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 126, 110, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Helper text below form fields */
.form-helper {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Form actions (buttons at bottom of forms) */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
}

.form-actions .btn {
    min-width: 120px;
    padding: 0.875rem 1.5rem;
    font-size: 15px;
    font-weight: 600;
}

/* IMPROVED FORM LAYOUTS FOR MODALS */
#editLeadModalContent,
#editProspectModalContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
}

#editLeadModalContent .form-group,
#editProspectModalContent .form-group {
    margin-bottom: 0;
}

#editLeadModalContent .form-group:has(textarea),
#editProspectModalContent .form-group:has(textarea),
#editLeadModalContent .form-actions,
#editProspectModalContent .form-actions {
    grid-column: 1 / -1;
}

#editLeadModalContent .form-label,
#editProspectModalContent .form-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

#editLeadModalContent .form-input,
#editLeadModalContent .form-select,
#editLeadModalContent .form-textarea,
#editProspectModalContent .form-input,
#editProspectModalContent .form-select,
#editProspectModalContent .form-textarea {
    font-size: 15px;
    padding: 1rem;
    line-height: 1.6;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    transition: all 0.2s;
}

#editLeadModalContent .form-input:focus,
#editLeadModalContent .form-select:focus,
#editLeadModalContent .form-textarea:focus,
#editProspectModalContent .form-input:focus,
#editProspectModalContent .form-select:focus,
#editProspectModalContent .form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 126, 110, 0.1);
    outline: none;
}

#editLeadModalContent .form-textarea,
#editProspectModalContent .form-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Modal responsive design */
@media (max-width: 768px) {
    #editLeadModalContent,
    #editProspectModalContent {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .modal-header {
        padding: 1.5rem 2rem;
    }

    .modal-body {
        padding: 2rem;
    }

    .modal-footer {
        padding: 1.5rem 2rem;
    }

    .modal-content {
        max-width: 95%;
    }
}

/* Lead Report Modal - Larger Size */
#leadReportModal .modal-content {
    max-width: 1400px !important;
    width: 95% !important;
    max-height: 90vh;
}

#leadReportModal .modal-body {
    padding: 24px;
}

#leadReportModal table {
    width: 100%;
    font-size: 14px;
}

#leadReportModal th {
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 600;
}

#leadReportModal td {
    padding: 10px;
    line-height: 1.5;
}

/* MODALS - MATCHES MOCKUP - Fixed z-index layering */
.modal {
    display: none;
    position: fixed;
    z-index: 2100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* Modal stacking for nested modals - prevents freezing */
.modal.modal-level-1 { z-index: 2100 !important; }
.modal.modal-level-2 { z-index: 2300 !important; }
.modal.modal-level-3 { z-index: 2500 !important; }

/* Ensure export/edit modals always appear on top */
.modal[id*="export"], .modal[id*="edit"], .modal[id*="Email"], .modal[id*="fieldSelector"] {
    z-index: 2600 !important;
}

/* Ensure modal content is always above other elements */
.modal-content {
    position: relative;
    z-index: 1;
}

/* Fix table headers and checkboxes within modals */
.modal thead {
    z-index: 50 !important; /* Higher than default 10 */
}

.modal .tile-checkbox {
    z-index: 50 !important; /* Higher than default 10 */
}

.modal.show {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content-large {
    max-width: 1400px;
    width: 95%;
}

.modal-content-medium {
    max-width: 900px;
    width: 90%;
}

.modal-header {
    padding: 2rem 2.5rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* Modern gradient accent bar for all modals */
.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

.modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    font-size: 1.25rem;
    color: white;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
    opacity: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    opacity: 1;
    transform: scale(1.05);
}

.modal-body {
    padding: 3rem;
    line-height: 1.6;
}

.modal-footer {
    padding: 2rem 3rem;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    background: var(--gray-50);
}

.modal-footer .btn {
    min-width: 120px;
    padding: 0.875rem 1.5rem;
    font-size: 15px;
    font-weight: 600;
}

/* STANDARDIZED MODAL FORM STYLING - Applied to all modals */
.modal .form-group,
.modal .modal-content .form-group {
    margin-bottom: 1.5rem;
}

.modal .form-label,
.modal .modal-content .form-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    display: block;
}

.modal .form-input,
.modal .form-select,
.modal .form-textarea,
.modal .modal-content .form-input,
.modal .modal-content .form-select,
.modal .modal-content .form-textarea {
    width: 100%;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
}

.modal .form-input:focus,
.modal .form-select:focus,
.modal .form-textarea:focus,
.modal .modal-content .form-input:focus,
.modal .modal-content .form-select:focus,
.modal .modal-content .form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(44, 122, 123, 0.1);
    outline: none;
}

.modal .form-textarea,
.modal .modal-content .form-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Standardized modal content padding */
.modal .modal-content > div:not(.modal-header):not(.modal-footer) {
    padding: 2.5rem;
}

/* Form actions styling - consistent across all modals */
.modal .form-actions,
.modal .modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem 2.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    margin-top: auto;
}

.modal .form-actions .btn,
.modal .modal-footer .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* Grid layout for modal forms - standardized 2-column */
.modal .modal-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}

.modal .modal-content-grid .form-group:has(textarea),
.modal .modal-content-grid .form-actions {
    grid-column: 1 / -1;
}

/* ACTION BUTTONS - ALWAYS at bottom */
.property-tile .action-buttons,
.action-buttons {
    margin-top: auto !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--gray-200) !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
}

.action-buttons .full-width {
    grid-column: 1 / -1;
}

/* Button sizing - 2 per row with 44px touch targets */
.property-tile .action-btn,
.action-btn {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    text-align: center !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* Ensure consistent button sizing for Sales Listings and Current Properties */
/* Uniform action buttons for all listing tiles */
#salesListingsTilesGrid .property-tile .action-btn,
#currentPropertiesTilesGrid .property-tile .action-btn,
#leaseListingsGroupedTiles .property-tile .action-btn,
#expiredListingsTilesGrid .property-tile .action-btn {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    height: auto !important;
}

/* Uniform action button container for all listing tiles */
#salesListingsTilesGrid .property-tile .action-buttons,
#currentPropertiesTilesGrid .property-tile .action-buttons,
#leaseListingsGroupedTiles .property-tile .action-buttons,
#expiredListingsTilesGrid .property-tile .action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Button icons */
.property-tile .action-btn i {
    font-size: 0.75rem !important;
}

/* Word wrapping for all content */
.property-tile * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .property-tile {
        height: auto !important;
        min-height: 400px !important;
        max-height: none !important;
    }

    .property-tile .action-buttons {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .property-tile .action-btn {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* Responsive table - card layout for mobile */
    .table-container {
        overflow-x: visible;
    }

    .table thead {
        display: none;
    }

    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        padding: 1rem;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .table td {
        border: none;
        padding: 0.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 44px;
    }

    .table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-700);
        flex: 0 0 40%;
        text-transform: uppercase;
        font-size: 12px;
    }

    .table td:has(input[type="checkbox"]) {
        justify-content: flex-start;
    }

    .table td:has(input[type="checkbox"]):before {
        content: "Select: ";
    }

    /* Action buttons in mobile cards */
    .table td .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
        justify-content: flex-end;
    }
}

.btn-prospect {
    background: #60a5fa;
    color: white;
}

.btn-lead {
    background: #fbbf24;
    color: #1f2937;
    font-weight: 600;
}

.btn-tour {
    background: #fb923c;
    color: white;
}

.btn-offer {
    background: #a78bfa;
    color: white;
}

.btn-psa {
    background: #2dd4bf;
    color: #1f2937;
    font-weight: 600;
}

.btn-won {
    background: #22c55e;
    color: white;
}

.btn-lost {
    background: #ef4444;
    color: white;
}

.btn-email {
    background: #64748b;
    color: white;
}

.btn-call {
    background: #2563eb;
    color: white;
}

.btn-follow {
    background: #06b6d4;
    color: white;
}

.btn-edit {
    background: #f97316;
    color: white;
}

.btn-delete {
    background: #dc2626;
    color: white;
}

.btn-add {
    background: var(--primary-color);
    color: white;
}

.btn-report {
    background: #059669;
    color: white;
}

.btn-pipeline {
    background: #60a5fa;
    color: white;
}

.btn-followup {
    background: #14b8a6;
    color: white;
}

.btn-flyer {
    background: #ec4899;
    color: white;
}

/* STATUS BADGES */
.days-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.days-new {
    background: #22c55e;
    color: white;
}

.days-active {
    background: #fbbf24;
    color: #1f2937;
}

.days-aging {
    background: #fb923c;
    color: white;
}

.days-stale {
    background: #ef4444;
    color: white;
}

/* UTILITY CLASSES */
.hidden {
    display: none !important;
}

.empty-state {
    text-align: center;
    color: var(--gray-500);
    padding: 2rem;
    font-style: italic;
}

/* NOTIFICATIONS */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success-color);
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification.error {
    background: var(--danger-color);
}

/* ANALYTICS CARDS */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.metric-label {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.metric-change {
    font-size: 12px;
    font-weight: 600;
}

.metric-change.positive {
    color: var(--success-color);
}

/* DRAG AND DROP */
.pipeline-stage.drag-over {
    background: rgba(13, 126, 110, 0.05);
    border: 2px dashed var(--primary-color);
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROPERTY TILE BORDER FIX - ENSURES ALL TILES HAVE COLORED BORDERS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ENHANCED PROPERTY COLOR CLASSES - FIXES MISSING BORDERS */
.property-color-0,
.property-tile.property-color-0 {
    border-left: 4px solid #3b82f6 !important;
}

.property-color-1,
.property-tile.property-color-1 {
    border-left: 4px solid #10b981 !important;
}

.property-color-2,
.property-tile.property-color-2 {
    border-left: 4px solid #f59e0b !important;
}

.property-color-3,
.property-tile.property-color-3 {
    border-left: 4px solid #ef4444 !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    /* Modal forms on tablets */
    #leadReportModal .modal-content {
        width: 92% !important;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pipeline-container {
        flex-direction: column;
    }

    .pipeline-stage {
        min-width: 100%;
    }

    .table-filters {
        flex-direction: column;
    }

    /* Modal forms stack to single column on mobile */
    #editLeadModalContent,
    #editProspectModalContent {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 16px;
    }

    /* Lead report modal takes full width on mobile */
    #leadReportModal .modal-content {
        width: 98% !important;
        max-height: 95vh;
    }

    #leadReportModal table {
        font-size: 12px;
    }

    #leadReportModal th,
    #leadReportModal td {
        padding: 8px 6px;
    }
}

/* PROPERTY GROUP STYLING */
.property-group {
    margin-bottom: 2rem;
}

.property-group h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.sub-table {
    margin-top: 1rem;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* LEAD REPORT SPECIFIC STYLING */
.lead-report-btn {
    background: var(--info-color) !important;
    color: white !important;
}

.lead-report-btn:hover {
    background: #2563eb !important;
}

/* ADDITIONAL BUTTON HOVER EFFECTS */
.btn-prospect:hover {
    background: #3b82f6;
}

.btn-lead:hover {
    background: #f59e0b;
    color: white;
}

.btn-tour:hover {
    background: #ea580c;
}

.btn-offer:hover {
    background: #7c3aed;
}

.btn-psa:hover {
    background: #0d9488;
    color: white;
}

.btn-won:hover {
    background: #16a34a;
}

.btn-lost:hover {
    background: #dc2626;
}

.btn-email:hover {
    background: #475569;
}

.btn-call:hover {
    background: #1d4ed8;
}

.btn-follow:hover {
    background: #0891b2;
}

.btn-edit:hover {
    background: #ea580c;
}

.btn-delete:hover {
    background: #b91c1c;
}

.btn-report:hover {
    background: #047857;
}

.btn-pipeline:hover {
    background: #3b82f6;
}

.btn-followup:hover {
    background: #0d9488;
}

.btn-flyer:hover {
    background: #db2777;
}

/* FORM STYLING IMPROVEMENTS */
.contact {
    white-space: nowrap;
}

/* COLOR CODING CLASSES */
.price-low {
    color: #059669;
    font-weight: 600;
}

.price-mid {
    color: #2563eb;
    font-weight: 600;
}

.price-high {
    color: #7c3aed;
    font-weight: 600;
}

.low-price {
    color: #059669;
    font-weight: 600;
}

.med-price {
    color: #2563eb;
    font-weight: 600;
}

.high-price {
    color: #7c3aed;
    font-weight: 600;
}

.low-days {
    color: #22c55e;
    font-weight: 600;
}

.med-days {
    color: #f59e0b;
    font-weight: 600;
}

.high-days {
    color: #ef4444;
    font-weight: 600;
}

.low-ppsf {
    color: #059669;
    font-weight: 600;
}

.med-ppsf {
    color: #2563eb;
    font-weight: 600;
}

.high-ppsf {
    color: #7c3aed;
    font-weight: 600;
}

.cap-low {
    color: #dc2626;
    font-weight: 600;
}

.cap-mid {
    color: #ea580c;
    font-weight: 600;
}

.cap-high {
    color: #059669;
    font-weight: 600;
}

/* PROPERTY COLOR CLASSES */
.property-color-0 {
    border-left: 4px solid #3b82f6;
}

.property-color-1 {
    border-left: 4px solid #10b981;
}

.property-color-2 {
    border-left: 4px solid #f59e0b;
}

.property-color-3 {
    border-left: 4px solid #ef4444;
}

/* SIZE CLASSES */
.size-small {
    background: #d1fae5;
}

.size-medium {
    background: #dbeafe;
}

.size-large {
    background: #e9d5ff;
}

/* ============================================
   ENHANCED LEAD REPORT MODAL STYLES
   ============================================ */

/* Status dropdown color coding matching mockup - applies to tables, Enhanced and Property Lead Reports */
.table .status-dropdown.status-active,
#enhancedLeadReportModal .status-dropdown.status-active,
#propertyLeadReportTable .status-dropdown.status-active {
    background: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.table .status-dropdown.status-followup,
.table .status-dropdown.status-follow-up,
#enhancedLeadReportModal .status-dropdown.status-followup,
#enhancedLeadReportModal .status-dropdown.status-follow-up,
#propertyLeadReportTable .status-dropdown.status-followup,
#propertyLeadReportTable .status-dropdown.status-follow-up {
    background: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

.table .status-dropdown.status-dead,
#enhancedLeadReportModal .status-dropdown.status-dead,
#propertyLeadReportTable .status-dropdown.status-dead {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

/* Action button hover effects matching mockup */
#enhancedLeadReportModal .action-btn:hover {
    background: #e5e5e5 !important;
}

#enhancedLeadReportModal .action-btn.delete:hover {
    background: #ffebee !important;
}

/* Table row hover effect */
#enhancedLeadReportModal .leads-table tbody tr:hover,
#enhancedLeadReportTable tbody tr:hover,
#propertyLeadReportTable tbody tr:hover {
    background: #f8f9fa !important;
}

/* Header button hover effects */
#enhancedLeadReportModal .btn-light:hover {
    background: #f0f0f0 !important;
}

/* Bulk action button hover effects */
#enhancedLeadReportModal .btn-secondary:hover {
    background: #5a6268 !important;
}

#enhancedLeadReportModal .btn-danger:hover {
    background: #c82333 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OPTION 2: ADD LEAD, ADD LISTING, FOLLOW UP & EDIT MODALS - CARD STYLE WITH ICONS
   Additional modal styling for Add Lead, Add Listing, Follow Up and Edit functions
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ADD LEAD MODAL - OPTION 2 STYLING */
#addLeadModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#addLeadModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#addLeadModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#addLeadModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#addLeadModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#addLeadModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#addLeadModal .modal-body,
#addLeadModalContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Override the existing two-column grid layout if present */
#addLeadModalContent {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Form Labels with Icons */
#addLeadModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#addLeadModal .form-label i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Form Inputs */
#addLeadModal .form-input,
#addLeadModal .form-select,
#addLeadModal .form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

#addLeadModal .form-input:focus,
#addLeadModal .form-select:focus,
#addLeadModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 126, 110, 0.1);
}

#addLeadModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal Footer */
#addLeadModal .modal-footer,
#addLeadModal .form-actions {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#addLeadModal .btn {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#addLeadModal .btn:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
}

#addLeadModal .btn:first-child:hover {
    background: var(--gray-200);
}

#addLeadModal .btn:last-child,
#addLeadModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.2);
}

#addLeadModal .btn:last-child:hover,
#addLeadModal .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 126, 110, 0.3);
}

/* ADD LISTING MODAL - OPTION 2 STYLING */
#addListingModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
    max-width: 900px;
}

#addListingModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#addListingModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#addListingModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#addListingModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#addListingModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#addListingModal .modal-body,
#addListingModalContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Override the existing two-column grid layout if present */
#addListingModalContent {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Form Labels with Icons */
#addListingModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#addListingModal .form-label i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Form Inputs */
#addListingModal .form-input,
#addListingModal .form-select,
#addListingModal .form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

#addListingModal .form-input:focus,
#addListingModal .form-select:focus,
#addListingModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 126, 110, 0.1);
}

#addListingModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal Footer */
#addListingModal .modal-footer,
#addListingModal .form-actions {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#addListingModal .btn {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#addListingModal .btn:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
}

#addListingModal .btn:first-child:hover {
    background: var(--gray-200);
}

#addListingModal .btn:last-child,
#addListingModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.2);
}

#addListingModal .btn:last-child:hover,
#addListingModal .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 126, 110, 0.3);
}

/* FOLLOW UP MODAL - OPTION 2 STYLING */
#followUpModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#followUpModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#followUpModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#followUpModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#followUpModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#followUpModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#followUpModal .modal-body,
#followUpContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Form Labels with Icons */
#followUpModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#followUpModal .form-label i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Form Inputs */
#followUpModal .form-input,
#followUpModal .form-select,
#followUpModal .form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

#followUpModal .form-input:focus,
#followUpModal .form-select:focus,
#followUpModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 126, 110, 0.1);
}

#followUpModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal Footer */
#followUpModal .modal-footer,
#followUpModal .form-actions {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#followUpModal .btn {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#followUpModal .btn:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
}

#followUpModal .btn:first-child:hover {
    background: var(--gray-200);
}

#followUpModal .btn:last-child,
#followUpModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.2);
}

#followUpModal .btn:last-child:hover,
#followUpModal .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 126, 110, 0.3);
}

/* EDIT LEAD MODAL - OPTION 2 STYLING */
#editLeadModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#editLeadModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#editLeadModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#editLeadModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#editLeadModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#editLeadModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#editLeadModal .modal-body,
#editLeadModalContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Override existing grid layout for new styling */
#editLeadModal #editLeadModalContent {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Form Labels with Icons */
#editLeadModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#editLeadModal .form-label i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Form Inputs */
#editLeadModal .form-input,
#editLeadModal .form-select,
#editLeadModal .form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

#editLeadModal .form-input:focus,
#editLeadModal .form-select:focus,
#editLeadModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 126, 110, 0.1);
}

#editLeadModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal Footer */
#editLeadModal .modal-footer,
#editLeadModal .form-actions {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#editLeadModal .btn {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#editLeadModal .btn:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
}

#editLeadModal .btn:first-child:hover {
    background: var(--gray-200);
}

#editLeadModal .btn:last-child,
#editLeadModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.2);
}

#editLeadModal .btn:last-child:hover,
#editLeadModal .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 126, 110, 0.3);
}

/* EDIT LISTING MODAL - OPTION 2 STYLING */
#editListingModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
    max-width: 900px;
}

#editListingModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#editListingModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#editListingModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#editListingModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#editListingModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#editListingModal .modal-body,
#editListingModalContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Override the existing two-column grid layout if present */
#editListingModalContent {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Form Labels with Icons */
#editListingModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#editListingModal .form-label i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Form Inputs */
#editListingModal .form-input,
#editListingModal .form-select,
#editListingModal .form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

#editListingModal .form-input:focus,
#editListingModal .form-select:focus,
#editListingModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 126, 110, 0.1);
}

#editListingModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal Footer */
#editListingModal .modal-footer,
#editListingModal .form-actions {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#editListingModal .btn {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#editListingModal .btn:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
}

#editListingModal .btn:first-child:hover {
    background: var(--gray-200);
}

#editListingModal .btn:last-child,
#editListingModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.2);
}

#editListingModal .btn:last-child:hover,
#editListingModal .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 126, 110, 0.3);
}

/* ADD PROSPECT MODALS (SALES & LEASE) - OPTION 2 STYLING */
#addProspectModal .modal-content,
#addSalesProspectModal .modal-content,
#addLeaseProspectModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#addProspectModal .modal-header,
#addSalesProspectModal .modal-header,
#addLeaseProspectModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#addProspectModal .modal-header::before,
#addSalesProspectModal .modal-header::before,
#addLeaseProspectModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#addProspectModal .modal-title,
#addSalesProspectModal .modal-title,
#addLeaseProspectModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#addProspectModal .modal-close,
#addSalesProspectModal .modal-close,
#addLeaseProspectModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#addProspectModal .modal-close:hover,
#addSalesProspectModal .modal-close:hover,
#addLeaseProspectModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#addProspectModal .modal-body,
#addProspectModalContent,
#addSalesProspectModal .modal-body,
#addSalesProspectModalContent,
#addLeaseProspectModal .modal-body,
#addLeaseProspectModalContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

#addProspectModalContent,
#addSalesProspectModalContent,
#addLeaseProspectModalContent {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

#addProspectModal .form-label,
#addSalesProspectModal .form-label,
#addLeaseProspectModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#addProspectModal .form-label i,
#addSalesProspectModal .form-label i,
#addLeaseProspectModal .form-label i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

#addProspectModal .form-input,
#addProspectModal .form-select,
#addProspectModal .form-textarea,
#addSalesProspectModal .form-input,
#addSalesProspectModal .form-select,
#addSalesProspectModal .form-textarea,
#addLeaseProspectModal .form-input,
#addLeaseProspectModal .form-select,
#addLeaseProspectModal .form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

#addProspectModal .form-input:focus,
#addProspectModal .form-select:focus,
#addProspectModal .form-textarea:focus,
#addSalesProspectModal .form-input:focus,
#addSalesProspectModal .form-select:focus,
#addSalesProspectModal .form-textarea:focus,
#addLeaseProspectModal .form-input:focus,
#addLeaseProspectModal .form-select:focus,
#addLeaseProspectModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 126, 110, 0.1);
}

#addProspectModal .form-textarea,
#addSalesProspectModal .form-textarea,
#addLeaseProspectModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

#addProspectModal .modal-footer,
#addProspectModal .form-actions,
#addSalesProspectModal .modal-footer,
#addSalesProspectModal .form-actions,
#addLeaseProspectModal .modal-footer,
#addLeaseProspectModal .form-actions {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 2px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#addProspectModal .btn,
#addSalesProspectModal .btn,
#addLeaseProspectModal .btn {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#addProspectModal .btn:first-child,
#addSalesProspectModal .btn:first-child,
#addLeaseProspectModal .btn:first-child {
    background: var(--gray-100);
    color: var(--gray-700);
}

#addProspectModal .btn:first-child:hover,
#addSalesProspectModal .btn:first-child:hover,
#addLeaseProspectModal .btn:first-child:hover {
    background: var(--gray-200);
}

#addProspectModal .btn:last-child,
#addProspectModal .btn-primary,
#addSalesProspectModal .btn:last-child,
#addSalesProspectModal .btn-primary,
#addLeaseProspectModal .btn:last-child,
#addLeaseProspectModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.2);
}

#addProspectModal .btn:last-child:hover,
#addProspectModal .btn-primary:hover,
#addSalesProspectModal .btn:last-child:hover,
#addSalesProspectModal .btn-primary:hover,
#addLeaseProspectModal .btn:last-child:hover,
#addLeaseProspectModal .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 126, 110, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TILE CHECKBOX STYLING - FOR LEADS AND PROSPECTING TILES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Checkbox container positioning */
.property-tile .tile-checkbox {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: var(--primary-color) !important;
    margin: 0 !important;
}

/* Enhanced checkbox styling with better visibility */
.property-tile input[type="checkbox"].tile-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.property-tile input[type="checkbox"].tile-checkbox:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(13, 126, 110, 0.2);
}

.property-tile input[type="checkbox"].tile-checkbox:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.property-tile input[type="checkbox"].tile-checkbox:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
}

/* RESPONSIVE DESIGN FOR ADD/EDIT MODALS */
@media (max-width: 768px) {
    #addLeadModal .modal-header,
    #addListingModal .modal-header,
    #followUpModal .modal-header,
    #editLeadModal .modal-header,
    #editListingModal .modal-header,
    #addProspectModal .modal-header,
    #addSalesProspectModal .modal-header,
    #addLeaseProspectModal .modal-header {
        padding: 1.5rem 1.5rem;
    }

    #addLeadModal .modal-title,
    #addListingModal .modal-title,
    #followUpModal .modal-title,
    #editLeadModal .modal-title,
    #editListingModal .modal-title,
    #addProspectModal .modal-title,
    #addSalesProspectModal .modal-title,
    #addLeaseProspectModal .modal-title {
        font-size: 1.25rem;
    }

    #addLeadModalContent,
    #addListingModalContent,
    #followUpContent,
    #editLeadModalContent,
    #editListingModalContent,
    #addProspectModalContent,
    #addSalesProspectModalContent,
    #addLeaseProspectModalContent {
        padding: 1.5rem;
    }

    #addLeadModal .form-section,
    #addListingModal .form-section,
    #editListingModal .form-section {
        padding: 1rem;
    }

    #addLeadModal .form-row-option2,
    #addListingModal .form-row-option2,
    #editListingModal .form-row-option2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #addLeadModal .modal-footer,
    #addLeadModal .form-actions,
    #addListingModal .modal-footer,
    #addListingModal .form-actions,
    #followUpModal .modal-footer,
    #followUpModal .form-actions,
    #editLeadModal .modal-footer,
    #editLeadModal .form-actions,
    #editListingModal .modal-footer,
    #editListingModal .form-actions,
    #addProspectModal .modal-footer,
    #addProspectModal .form-actions,
    #addSalesProspectModal .modal-footer,
    #addSalesProspectModal .form-actions,
    #addLeaseProspectModal .modal-footer,
    #addLeaseProspectModal .form-actions {
        padding: 1rem 1.5rem;
        flex-direction: column;
    }

    #addLeadModal .btn,
    #addListingModal .btn,
    #followUpModal .btn,
    #editLeadModal .btn,
    #editListingModal .btn,
    #addProspectModal .btn,
    #addSalesProspectModal .btn,
    #addLeaseProspectModal .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FULLSCREEN MAP MODE WITH COLLAPSIBLE NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hide header and nav when map is active in fullscreen */
body.map-fullscreen-active .header,
body.map-fullscreen-active #mainNav {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

/* Show header and nav on hover */
body.map-fullscreen-active .header:hover,
body.map-fullscreen-active #mainNav:hover,
body.map-fullscreen-active .header.show,
body.map-fullscreen-active #mainNav.show {
    transform: translateY(0);
}

/* Make header and nav slide down on top edge hover */
body.map-fullscreen-active .header,
body.map-fullscreen-active #mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
}

/* Add hover trigger zone at top of screen */
body.map-fullscreen-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1999;
    pointer-events: auto;
}

/* Ensure map content stays below when nav appears */
body.map-fullscreen-active .map-fullscreen {
    z-index: 1000;
}

/* Smooth transitions for all elements */
.header,
#mainNav {
    transition: transform 0.3s ease-in-out;
}

/* Override for map fullscreen mode */
.map-fullscreen.active {
    display: block !important;
}

.map-fullscreen:not(.active) {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DEAL MODAL STYLING (Sales/Lease/Acquisition Pipeline)
   ═══════════════════════════════════════════════════════════════════════════════ */

#dealModal .modal-content {
    max-width: 800px;
}

#dealModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: none;
}

#dealModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
}

#dealModal .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

#dealModal .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
}

#dealModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

#dealModal #dealModalContent {
    padding: 2.5rem;
    background: white;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

#dealModal .form-group {
    margin-bottom: 0;
}

#dealModal .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

#dealModal .form-input,
#dealModal .form-select,
#dealModal .form-textarea {
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
}

#dealModal .form-input:focus,
#dealModal .form-select:focus,
#dealModal .form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(44, 122, 123, 0.1);
}

#dealModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

#dealModal .form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 2px solid var(--gray-100);
    margin-top: 0.5rem;
}

#dealModal .form-actions .btn {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

#dealModal .form-actions .btn:first-child {
    background: var(--primary-color);
    color: white;
}

#dealModal .form-actions .btn:first-child:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 122, 123, 0.3);
}

#dealModal .form-actions .btn:last-child {
    background: var(--gray-500);
    color: white;
}

#dealModal .form-actions .btn:last-child:hover {
    background: var(--gray-600);
}

/* Full-width fields for Notes */
#dealModal .form-group:has(#dealNotes) {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE & IPHONE RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    /* Full-screen modals on mobile */
    .modal-content {
        max-width: 100vw !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
    }

    /* Make modal headers sticky on mobile */
    .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* Scrollable table containers */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }

    /* Ensure tables don't break layout */
    .table {
        min-width: 800px !important;
    }

    /* Stack navigation rows vertically */
    .nav-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .nav-tab {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Increase touch targets */
    .btn, button, a.btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Stack filter controls vertically */
    .table-filters {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .filter-input {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    /* Pipeline cards stack on mobile */
    .pipeline-container {
        flex-direction: column !important;
    }

    .pipeline-column {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Tile grids become single column */
    .tiles-grid {
        grid-template-columns: 1fr !important;
    }

    /* Hide less critical columns in tables */
    th.hide-mobile,
    td.hide-mobile {
        display: none !important;
    }

    /* Make header compact on mobile */
    .header {
        padding: 12px 16px !important;
    }

    .logo-text h1 {
        font-size: 18px !important;
    }

    .logo-text p {
        display: none !important;
    }

    /* Filters bar compact */
    .filters-bar {
        padding: 12px 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Section headers */
    .section-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .section-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Map controls on mobile */
    .map-header {
        padding: 10px !important;
        font-size: 12px !important;
    }

    .map-controls {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .map-controls input {
        min-width: unset !important;
        width: 100% !important;
    }

    /* Cesium map takes full screen on mobile */
    #cesiumContainer {
        height: 100vh !important;
        width: 100vw !important;
    }

    /* Deal modal single column on mobile */
    #dealModal #dealModalContent {
        grid-template-columns: 1fr !important;
        padding: 1.5rem !important;
    }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {
    /* Even more compact on very small screens */
    .nav-tab {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .nav-section-label {
        font-size: 11px !important;
    }

    /* Smaller fonts in tables */
    .table {
        font-size: 12px !important;
    }

    .table th {
        font-size: 10px !important;
        padding: 8px 4px !important;
    }

    .table td {
        font-size: 12px !important;
        padding: 8px 4px !important;
    }

    /* Compact buttons */
    .btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Hide button text, show only icons on very small screens */
    .btn i {
        margin-right: 0 !important;
    }

    /* Single column forms */
    .modal-body {
        padding: 12px !important;
    }

    .form-row {
        flex-direction: column !important;
    }

    .form-group {
        width: 100% !important;
    }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce header height in landscape */
    .header {
        padding: 8px 16px !important;
    }

    .nav-container {
        padding: 8px 16px !important;
    }

    /* More vertical space for content */
    .main-content {
        height: calc(100vh - 120px) !important;
    }
}

/* iPhone-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iPhone notch */
    .header {
        padding-top: env(safe-area-inset-top) !important;
    }

    /* Fix for iPhone bottom bar */
    .footer-bar,
    .modal-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    /* Prevent zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Fix fixed positioning on iOS */
    .modal {
        position: fixed !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Smooth scrolling on iOS */
    .table-container,
    .modal-content {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROPERTY DATABASE EXTERNAL LINK
   ═══════════════════════════════════════════════════════════════════════════════ */

.nav-tab-external {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #667eea;
}

.nav-tab-external:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Main layout structure */
.crm-layout {
    display: flex;
    height: calc(100vh - 80px); /* Account for header height */
    overflow: hidden;
    margin-top: 0;
}

/* Sidebar navigation */
.crm-sidebar {
    width: 180px;
    background: #f8f9fa;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 1rem 0;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

/* Main content area */
.crm-main {
    flex: 1;
    overflow-y: auto;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    max-width: none; /* Remove width constraints for full content area */
}

/* Sidebar sections */
.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

/* Sidebar menu items */
.sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 2px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: calc(100% - 16px);
    text-align: left;
}

.sidebar-item:hover {
    background: #e5e7eb;
    color: #1f2937;
    transform: translateX(2px);
}

.sidebar-item.active {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(13, 126, 110, 0.3);
}

.sidebar-item.active:hover {
    background: var(--primary-dark);
    transform: translateX(0);
}

/* Sidebar icons */
.sidebar-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Sidebar text */
.sidebar-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Content header */
.content-header {
    background: white;
    padding: 1rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.content-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
}

.content-subtitle {
    font-size: 14px;
    color: var(--text-body);
    margin: 4px 0 0 0;
}

/* Content body */
.content-body {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

/* Hide original navigation when sidebar is active */
.crm-layout .original-navigation {
    display: none;
}

/* Responsive design for sidebar */
@media (max-width: 768px) {
    .crm-sidebar {
        width: 60px;
    }

    .sidebar-text {
        display: none;
    }

    .sidebar-section-title {
        display: none;
    }

    .sidebar-item {
        justify-content: center;
        padding: 12px;
    }

    .sidebar-icon {
        margin-right: 0;
        font-size: 16px;
    }
}
/* Table Sort Indicators */
.sort-indicator {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
}

.sort-indicator::after {
    content: '⬍';
}

.sort-indicator.asc {
    opacity: 1;
}

.sort-indicator.asc::after {
    content: '▲';
}

.sort-indicator.desc {
    opacity: 1;
}

.sort-indicator.desc::after {
    content: '▼';
}

/* ============================================================================
   LOADING STATES - Skeleton Screens & Spinners
   ============================================================================ */

/* Skeleton screen base styles */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    pointer-events: none;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton for table rows */
.skeleton-table-row {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.skeleton-table-cell {
    height: 16px;
    border-radius: 4px;
}

.skeleton-table-cell.small {
    flex: 0 0 60px;
}

.skeleton-table-cell.medium {
    flex: 0 0 120px;
}

.skeleton-table-cell.large {
    flex: 1;
}

/* Skeleton for tile cards */
.skeleton-tile {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.skeleton-tile-header {
    height: 20px;
    width: 70%;
    margin-bottom: 12px;
}

.skeleton-tile-line {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-tile-line.short {
    width: 40%;
}

.skeleton-tile-line.medium {
    width: 60%;
}

.skeleton-tile-line.long {
    width: 85%;
}

/* Skeleton for pipeline stages */
.skeleton-pipeline {
    display: flex;
    gap: 16px;
    padding: 20px;
    overflow-x: auto;
}

.skeleton-stage {
    flex: 0 0 280px;
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    min-height: 400px;
}

.skeleton-stage-header {
    height: 24px;
    width: 80%;
    margin-bottom: 16px;
}

.skeleton-deal-card {
    background: white;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.skeleton-deal-title {
    height: 16px;
    width: 90%;
    margin-bottom: 8px;
}

.skeleton-deal-line {
    height: 12px;
    margin-bottom: 6px;
}

/* Loading spinner overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* Loading text with dots animation */
.loading-text {
    color: #6b7280;
    font-size: 14px;
    margin-top: 12px;
}

.loading-text::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* ============================================================================
   MOBILE OPTIMIZATIONS - Responsive Design
   ============================================================================ */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    /* Header and navigation */
    .crm-header {
        padding: 12px 16px;
    }

    .crm-header h1 {
        font-size: 20px;
    }

    /* Tabs - horizontal scroll instead of wrapping */
    .tab-bar,
    .pipeline-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .tab,
    .pipeline-tab {
        font-size: 13px;
        padding: 10px 14px;
        min-width: 100px;
    }

    /* Filter controls - stack vertically */
    .filter-controls {
        flex-direction: column;
        gap: 12px;
    }

    .filter-controls > * {
        width: 100%;
    }

    .filter-select,
    .filter-input {
        width: 100% !important;
        max-width: 100%;
    }

    /* View toggle buttons */
    .view-toggle {
        justify-content: center;
        margin-top: 12px;
    }

    /* Tables - allow horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 800px; /* Force horizontal scroll for wide tables */
    }

    th, td {
        font-size: 13px;
        padding: 10px 8px;
    }

    /* Cards/Tiles - better for mobile */
    .tiles-container,
    #salesLeadsTilesView,
    #leaseLeadsTilesView,
    #salesProspectingTilesView,
    #leaseProspectingTilesView,
    #salesListingsTilesView,
    #leaseListingsTilesView,
    #expiredListingsTilesView,
    #currentPropertiesTilesView,
    .leads-tiles-container,
    .prospects-tiles-container,
    .listings-tiles-container,
    [class*="tiles-container"],
    [class*="TilesView"] {
        grid-template-columns: 1fr !important; /* Force single column on mobile */
        gap: 12px;
        padding: 12px;
    }

    /* Tiles - consistent sizing and layout */
    .tile,
    .lead-tile,
    .prospect-tile,
    .listing-tile,
    .property-tile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .tile-header {
        font-size: 16px !important;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .tile-body {
        font-size: 14px !important;
        line-height: 1.6;
    }

    /* Show More button - consistent position at bottom */
    .show-more-btn,
    .tile-actions,
    [class*="show-more"],
    [class*="ShowMore"] {
        width: 100% !important;
        margin-top: 12px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .show-more-btn button {
        width: 100% !important;
        max-width: 300px;
    }

    /* Table readability on mobile */
    .table-container table {
        font-size: 12px !important;
        min-width: 100% !important;
    }

    .table-container th,
    .table-container td {
        padding: 8px 4px !important;
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    /* Current Properties table - make scrollable */
    #currentPropertiesTableBody,
    #currentPropertiesTable,
    [id*="currentProperties"] table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
    }

    #currentPropertiesTable tbody,
    #currentPropertiesTable thead,
    #currentPropertiesTable tr {
        display: table !important;
        width: 100% !important;
    }

    /* Pipeline - horizontal scroll */
    .pipeline-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
    }

    .pipeline-stage {
        min-width: 280px;
        flex-shrink: 0;
    }

    /* Modals - full screen on mobile */
    .modal {
        padding: 10px;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 12px 12px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-body {
        padding: 16px;
    }

    /* Form inputs - larger touch targets */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px;
        min-height: 44px; /* Apple recommended touch target */
    }

    /* Buttons - larger touch targets */
    button,
    .btn,
    .action-btn {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 15px;
    }

    /* Action buttons in cards */
    .tile-actions button,
    .deal-card-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Checkboxes - larger touch targets */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin: 4px;
    }

    /* Hide less important columns on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Sync status */
    .sync-status {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* Analytics charts */
    .analytics-container {
        padding: 12px;
    }

    .chart-container {
        height: 250px; /* Smaller charts on mobile */
    }

    /* Notifications/Toasts */
    .notification,
    .crm-error-toast,
    .crm-success-toast {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: calc(100% - 20px);
    }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
    .crm-header h1 {
        font-size: 18px;
    }

    .tab,
    .pipeline-tab {
        font-size: 12px;
        padding: 8px 12px;
        min-width: 80px;
    }

    th, td {
        font-size: 12px;
        padding: 8px 6px;
    }

    .tile-header {
        font-size: 14px;
    }

    .tile-body {
        font-size: 12px;
    }

    .modal-content {
        border-radius: 8px 8px 0 0;
    }

    .pipeline-stage {
        min-width: 260px;
    }

    /* Stack filter buttons vertically */
    .filter-row {
        flex-direction: column;
    }

    /* Smaller property database button */
    .property-database-btn {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* Landscape mode optimization */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        max-height: 95vh;
    }

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

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

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .btn:hover,
    button:hover,
    .tab:hover {
        transform: none;
    }

    /* Add active state feedback */
    .btn:active,
    button:active,
    .tab:active {
        transform: scale(0.97);
        opacity: 0.8;
    }

    /* Make scrollable areas more obvious */
    .pipeline-board::after,
    .tab-bar::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.5));
        pointer-events: none;
    }
}