/* LeadTrak Pro - Cloud CRM Styles */
/* Matches desktop LeadTrak Pro index.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --bg-primary:#f8fafc; --bg-secondary:#ffffff; --bg-card:#ffffff;
    --bg-card-hover:#f1f5f9; --bg-input:#f8fafc; --border-color:#e2e8f0;
    --text-primary:#1e293b; --text-secondary:#475569; --text-muted:#94a3b8;
    --accent-blue:#3b82f6; --accent-green:#10b981; --accent-orange:#f59e0b;
    --accent-red:#ef4444; --accent-purple:#8b5cf6;
}
body { font-family:'DM Sans',sans-serif; background:#f5f5f5; color:var(--text-primary); min-height:100vh; }
.crm-page { min-height:100vh; display:flex; flex-direction:column; }
.crm-header {
    background:linear-gradient(135deg,#1976d2 0%,#1565c0 100%);
    color:white; padding:16px 20px; display:flex; align-items:center;
    justify-content:space-between; position:sticky; top:0; z-index:100;
}
.crm-header h1 { font-size:22px; font-weight:600; }
.header-actions { display:flex; gap:8px; }
.header-btn {
    background:rgba(255,255,255,0.2); border:none; border-radius:50%;
    width:40px; height:40px; display:flex; align-items:center;
    justify-content:center; color:white; cursor:pointer; transition:background 0.2s;
}
.header-btn:hover { background:rgba(255,255,255,0.3); }
.header-nav { display:none; align-items:center; gap:4px; margin-left:16px; padding-left:16px; border-left:1px solid rgba(255,255,255,0.25); }
.header-nav-link { text-decoration:none; color:rgba(255,255,255,0.8); font-size:13px; font-weight:600; padding:6px 10px; border-radius:6px; transition:all 0.2s; }
.header-nav-link:hover { background:rgba(255,255,255,0.15); color:white; }
.crm-content { flex:1; padding:16px; padding-bottom:100px; overflow-y:auto; }
.crm-loading { display:flex; align-items:center; justify-content:center; padding:60px 20px; color:#666; font-size:14px; }
/* Stats Grid */
.stats-grid-2x2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.stat-box {
    background:white; border-radius:8px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.1);
    cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
}
.stat-box:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.stat-number { display:block; font-size:22px; font-weight:700; font-family:'JetBrains Mono',monospace; margin-bottom:4px; }
.stat-number.blue { color:#1976d2; } .stat-number.grey { color:#616161; }
.stat-number.red { color:#d32f2f; } .stat-number.green { color:#388e3c; }
.stat-number.orange { color:#f57c00; } .stat-number.purple { color:#7c3aed; }
.stat-label { font-size:11px; color:#666; text-transform:uppercase; letter-spacing:0.5px; }
@media (max-width:767px) { .stats-grid-2x2 > .stat-box:last-child:nth-child(odd) { grid-column: span 2; } }
.stat-sub { display:block; font-size:12px; color:#888; font-family:'JetBrains Mono',monospace; margin-top:2px; }
/* Sales Filter Banner */
.sales-filter-banner { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#e3f2fd; border-radius:8px; margin-bottom:12px; font-size:13px; color:#1565c0; }
.sales-filter-banner button { background:none; border:none; color:#1565c0; font-size:13px; cursor:pointer; font-weight:600; padding:4px 8px; border-radius:6px; }
.sales-filter-banner button:hover { background:rgba(21,101,192,0.1); }
/* Section Cards */
.section-card { background:white; border-radius:8px; padding:16px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.section-card h3 { font-size:15px; font-weight:600; color:#333; margin:0 0 12px 0; }
.section-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-header-row h3 { margin:0; }
/* Monthly Stats */
.monthly-stats-bar { display:flex; gap:8px; border-radius:8px; }
.monthly-stat { flex:1; padding:12px 8px; text-align:center; border-radius:8px; }
.monthly-stat.blue { background:#e3f2fd; color:#1565c0; }
.monthly-stat.grey { background:#f5f5f5; color:#616161; }
.monthly-stat.green { background:#e8f5e9; color:#2e7d32; }
.monthly-value { display:block; font-size:14px; font-weight:700; font-family:'JetBrains Mono',monospace; margin-bottom:2px; }
.monthly-label { font-size:9px; text-transform:uppercase; opacity:0.9; }
/* Quick Actions */
.quick-actions-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quick-action-btn {
    padding:14px 20px; border:none; border-radius:8px; font-size:15px; font-weight:600;
    cursor:pointer; transition:opacity 0.2s; font-family:'DM Sans',sans-serif;
}
.quick-action-btn:hover { opacity:0.9; }
.quick-action-btn.blue { background:#e3f2fd; color:#1565c0; }
.quick-action-btn.green { background:#e8f5e9; color:#2e7d32; }
.add-btn { background:#e3f2fd; color:#1565c0; border:none; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.add-btn:hover { background:#bbdefb; }
/* Tasks */
.task-row {
    display:flex; align-items:flex-start; gap:12px; padding:12px;
    background:#fafafa; border-radius:6px; border-left:4px solid #d32f2f; margin-bottom:8px;
}
.task-indicator { width:4px; min-height:40px; border-radius:2px; flex-shrink:0; }
.task-indicator.blue { background:#1976d2; } .task-indicator.red { background:#d32f2f; }
.task-info { flex:1; }
.task-text { font-size:14px; color:#333; margin:0 0 4px 0; line-height:1.4; }
.task-date-label { font-size:12px; color:#999; }
.done-btn {
    background:#ffebee; color:#c62828; border:1px solid #ffcdd2; padding:8px 16px;
    border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0;
}
.done-btn:hover { background:#ffcdd2; }
.empty-text { color:#999; font-size:14px; text-align:center; padding:20px; }
/* Dashboard Task List */
.dashboard-tasks-list { }
.dashboard-task-item {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border-bottom:1px solid #f0f0f0; transition:background 0.15s;
}
.dashboard-task-item:last-child { border-bottom:none; }
.dashboard-task-item:hover { background:#f8f9fa; }
.task-complete-btn {
    width:28px; height:28px; border-radius:50%; border:2px solid #10b981;
    background:transparent; color:#10b981; font-size:14px; font-weight:700;
    cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    transition:all 0.15s;
}
.task-complete-btn:hover { background:#10b981; color:white; }
.task-content { flex:1; min-width:0; }
.task-desc { font-size:14px; color:#333; line-height:1.4; }
.task-due { font-size:12px; color:#999; margin-top:2px; }
.task-delete-btn {
    width:28px; height:28px; border:none; background:transparent; color:#ccc;
    font-size:20px; cursor:pointer; flex-shrink:0; display:flex; align-items:center;
    justify-content:center; border-radius:4px; transition:all 0.15s;
}
.task-delete-btn:hover { background:#ffebee; color:#c62828; }
/* Customer Cards */
.customer-card-mobile {
    background:white; border-radius:8px; padding:16px; margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,0.1); border-left:4px solid #1976d2; cursor:pointer;
    transition:box-shadow 0.15s;
}
.customer-card-mobile:hover { box-shadow:0 4px 12px rgba(0,0,0,0.12); }
.customer-card-mobile.paid { border-left-color:#388e3c; }
.customer-card-mobile.pending { border-left-color:#388e3c; }
.customer-card-mobile.cancelled { border-left-color:#ff9800; background:#fff8e1; }
.customer-header-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
.customer-name { font-size:18px; font-weight:600; color:#333; flex:1; }
.customer-amount-box { text-align:right; flex-shrink:0; }
.customer-amount-value { font-size:20px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.customer-amount-value.sale { color:#388e3c; } .customer-amount-value.quoted { color:#1976d2; }
.customer-amount-label { font-size:11px; font-weight:600; color:#666; text-transform:uppercase; }
.customer-status-badge {
    display:inline-block; font-size:10px; font-weight:600; padding:2px 8px;
    border-radius:4px; margin-bottom:8px;
}
.customer-status-badge.appointment { background:#e8f5e9; color:#2e7d32; }
.customer-status-badge.not-sold { background:#ffebee; color:#c62828; }
.customer-status-badge.sold { background:#e3f2fd; color:#1565c0; }
.customer-status-badge.paid { background:#e8f5e9; color:#2e7d32; }
.customer-status-badge.cancelled { background:#fff3e0; color:#e65100; }
.customer-status-badge.callback { background:#fff8e1; color:#f57f17; }
.customer-detail-row { display:flex; align-items:center; gap:8px; font-size:13px; color:#666; margin-bottom:4px; }
.customer-detail-row a { color:#1976d2; text-decoration:none; }
/* Schedule / Day View */
.task-date-header {
    font-size:13px; font-weight:600; color:#666; text-transform:uppercase; letter-spacing:0.5px;
    padding:8px 16px; background:#f0f0f0; border-radius:6px; margin-bottom:8px;
}
.day-view-item {
    display:flex; align-items:flex-start; gap:12px; background:white; border-radius:10px;
    padding:14px; box-shadow:0 1px 4px rgba(0,0,0,0.08); cursor:pointer;
    transition:transform 0.15s; border-left:4px solid #1976d2; margin-bottom:8px;
}
.day-view-item.sold { border-left-color:#388e3c; }
.day-view-item.not-sold { border-left-color:#d32f2f; }
.day-view-item.callback { border-left-color:#f9a825; }
.day-view-item.cancelled { border-left-color:#9e9e9e; background:#fafafa; }
.day-item-time { font-size:14px; font-weight:700; color:#1976d2; min-width:60px; text-align:center; padding-top:2px; }
.day-item-content { flex:1; min-width:0; }
.day-item-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.day-item-badge {
    font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;
    text-transform:uppercase; flex-shrink:0;
}
.day-item-badge.appt { background:#e3f2fd; color:#1565c0; }
.day-item-badge.sold { background:#e8f5e9; color:#2e7d32; }
.day-item-badge.callback { background:#fff8e1; color:#f57f17; }
.day-item-badge.not-sold { background:#ffebee; color:#c62828; }
.day-item-badge.cancelled { background:#eee; color:#757575; }
.day-item-name { font-size:16px; font-weight:600; color:#333; overflow:hidden; text-overflow:ellipsis; }
.day-item-name.clickable { color:#1976d2; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; transition:text-decoration-color 0.2s; }
.day-item-name.clickable:hover { text-decoration-color:#1976d2; }
.day-item-address { font-size:13px; color:#666; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Sales */
.sales-summary-bar { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.sales-total-box { background:#f5f5f5; color:#616161; padding:16px; border-radius:8px; text-align:center; border:1px solid #e0e0e0; }
.sales-total-value { font-size:28px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.sales-total-label { font-size:12px; text-transform:uppercase; opacity:0.9; }
.sales-split-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sales-split-box { padding:14px; border-radius:8px; text-align:center; border:1px solid; }
.sales-split-box.paid { background:#e8f5e9; color:#2e7d32; border-color:#c8e6c9; }
.sales-split-box.pending { background:#e3f2fd; color:#1565c0; border-color:#bbdefb; }
.sales-split-value { font-size:20px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.sales-split-label { font-size:11px; text-transform:uppercase; }
.sale-card-mobile {
    background:white; border-radius:8px; padding:16px; margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,0.1); border-left:4px solid #1976d2;
}
.sale-card-mobile.paid { border-left-color:#388e3c; }
.sale-header { display:flex; justify-content:space-between; align-items:flex-start; }
.sale-amount-main { font-size:18px; font-weight:700; font-family:'JetBrains Mono',monospace; color:#1976d2; }
.sale-commission { font-size:12px; color:#666; }
.paid-badge { display:inline-block; margin-top:6px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px; background:#d1fae5; color:#065f46; }
/* Search */
.search-input-mobile { width:100%; padding:12px 16px; border:1px solid #e0e0e0; border-radius:8px; font-size:16px; background:#fafafa; font-family:'DM Sans',sans-serif; }
.search-input-mobile:focus { outline:none; border-color:#1976d2; background:white; }
/* Bottom Nav */
.crm-bottom-nav {
    position:fixed; bottom:0; left:0; right:0; display:flex; background:white;
    border-top:1px solid #e0e0e0; padding:8px 0;
    padding-bottom:max(8px, env(safe-area-inset-bottom)); z-index:100;
}
.crm-nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:8px 4px; background:none; border:none; color:#666; cursor:pointer;
    font-size:11px; font-family:'DM Sans',sans-serif; transition:color 0.2s;
}
.crm-nav-item:hover { color:#1976d2; }
.crm-nav-item.active { color:#1976d2; }
.nav-icon { font-size:20px; }
/* Modals */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex;
    align-items:center; justify-content:center; z-index:1000; padding:20px;
    animation:fadeIn 0.2s ease;
}
.modal-content {
    background:white; width:100%; max-width:400px; max-height:90vh; border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column; padding:24px;
    animation:slideUp 0.3s ease;
}
.modal-content h3 { font-size:20px; font-weight:600; margin:0 0 16px 0; color:var(--text-primary); }
.modal-full { max-width:600px !important; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:12px; border:1px solid var(--border-color); border-radius:8px;
    font-size:16px; background:var(--bg-primary); font-family:'DM Sans',sans-serif;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--accent-blue); }
.form-group textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-actions { display:flex; gap:12px; margin-top:20px; justify-content:flex-end; }
.btn-secondary {
    padding:12px 24px; border:1px solid var(--border-color); background:var(--bg-primary);
    border-radius:8px; font-size:15px; font-weight:500; cursor:pointer; color:var(--text-primary); font-family:'DM Sans',sans-serif;
}
.btn-primary {
    padding:12px 24px; border:none; background:#e3f2fd; color:#1565c0; border-radius:8px;
    font-size:15px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
}
.btn-primary:hover { background:#bbdefb; }
.btn-danger {
    padding:12px 24px; background:#ffebee; color:#c62828; border:1px solid #ffcdd2;
    border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-right:auto; font-family:'DM Sans',sans-serif;
}
.btn-danger:hover { background:#ffcdd2; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
/* Action Buttons Row */
.action-buttons-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.action-btn-mobile {
    flex:1; min-width:60px; padding:8px 10px; border:none; border-radius:6px;
    font-size:12px; font-weight:600; cursor:pointer; text-align:center;
    text-decoration:none; display:inline-block; font-family:'DM Sans',sans-serif;
}
.action-btn-mobile.call { background:#e3f2fd; color:#1565c0; }
.action-btn-mobile.text { background:#e8f5e9; color:#2e7d32; }
.action-btn-mobile.map { background:#fff3e0; color:#e65100; }
.action-btn-mobile.edit { background:#f5f5f5; color:#616161; }
.action-btn-mobile.delete { background:#ffebee; color:#c62828; }
.action-btn-mobile.energy { background:#fff3e0; color:#e65100; }
.action-btn-mobile.quote { background:#ede7f6; color:#4527a0; }
.action-btn-mobile.sold { background:#e8f5e9; color:#2e7d32; }
.action-btn-mobile.install { background:#e3f2fd; color:#1565c0; }
.action-btn-mobile.paid-btn { background:#e8f5e9; color:#2e7d32; }
/* Follow-up Scripts */
.followup-title { font-size:18px; font-weight:700; color:#1976d2; margin-bottom:16px; }
.followup-field { margin-bottom:14px; }
.followup-label { display:block; font-size:11px; font-weight:600; color:#999; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.followup-select { width:100%; padding:12px; border:1px solid #e0e0e0; border-radius:8px; font-size:15px; background:#fafafa; font-family:'DM Sans',sans-serif; }
.followup-select:focus { outline:none; border-color:#1976d2; }
.message-preview {
    background:#f8f9fa; border:1px solid #e0e0e0; border-radius:10px; padding:16px;
    font-size:14px; color:#333; line-height:1.6; margin:16px 0; white-space:pre-wrap;
    max-height:200px; overflow-y:auto;
}
.followup-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.followup-btn {
    padding:14px; border:none; border-radius:8px; font-size:15px; font-weight:600;
    cursor:pointer; text-align:center; font-family:'DM Sans',sans-serif; transition:opacity 0.2s;
}
.followup-btn.text { background:#e8f5e9; color:#2e7d32; }
.followup-btn.email { background:#e3f2fd; color:#1565c0; }
.followup-btn.call { background:#fff3e0; color:#e65100; }
.followup-btn.disabled { opacity:0.4; cursor:not-allowed; }
/* Customer Select List */
.customer-select-list { max-height:400px; overflow-y:auto; }
.customer-select-item {
    display:block; width:100%; text-align:left; padding:12px 14px; background:#fafafa;
    border:1px solid #e8e8e8; border-radius:8px; margin-bottom:6px; cursor:pointer;
    transition:all 0.15s; font-family:'DM Sans',sans-serif;
}
.customer-select-item:hover { background:#e3f2fd; border-color:#bbdefb; }
.customer-select-item.selected { background:#e3f2fd; border-color:#1976d2; border-width:2px; }
.customer-select-name { font-size:15px; font-weight:600; color:#333; display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.customer-select-info { font-size:12px; color:#999; }
.status-badge { font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; }
.status-badge.not-sold { background:#ffebee; color:#c62828; }
.status-badge.sold { background:#e8f5e9; color:#2e7d32; }
/* Year Select */
.year-select { width:100%; padding:12px; border:1px solid #e0e0e0; border-radius:8px; font-size:16px; font-weight:600; background:#fafafa; font-family:'DM Sans',sans-serif; }
.year-select:focus { outline:none; border-color:#1976d2; }
/* ═══════════════════════════════════════════════ */
/* CUSTOMER DETAIL PAGE                           */
/* ═══════════════════════════════════════════════ */
.detail-page { padding:12px; padding-bottom:100px; }
.detail-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.detail-back-btn { background:none; border:2px solid #1976d2; color:#1976d2; padding:8px 16px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; }
.detail-back-btn:hover { background:#e3f2fd; }
.detail-title { font-size:22px; font-weight:700; color:#1e293b; flex:1; }
.detail-section { background:white; border-radius:10px; padding:16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.detail-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:#94a3b8; margin:0 0 12px; }
.detail-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.detail-section-header .detail-section-title { margin:0; }
.detail-add-btn { padding:6px 14px; border:2px solid #1976d2; background:white; color:#1976d2; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.detail-add-btn:hover:not(:disabled) { background:#e3f2fd; }
.detail-add-btn:disabled { opacity:0.4; cursor:not-allowed; border-color:#ccc; color:#999; }
.detail-notes { width:100%; padding:12px; border:1px solid #e0e0e0; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; resize:vertical; background:#fafafa; }
.detail-notes:focus { outline:none; border-color:#1976d2; background:white; }
.detail-actions { margin-bottom:12px; }
.detail-save-btn { width:100%; padding:14px; font-size:16px; font-weight:700; border-radius:8px; }
.detail-danger-zone { margin-top:24px; padding-top:16px; border-top:1px dashed #e0e0e0; }
.detail-danger-zone .btn-danger { width:100%; padding:12px; font-size:14px; opacity:0.7; }
.detail-danger-zone .btn-danger:hover { opacity:1; }
.detail-empty-box { background:#f8fafc; border:2px dashed #e0e0e0; border-radius:8px; padding:24px; text-align:center; color:#94a3b8; font-size:14px; }
.detail-page .form-group { margin-bottom:12px; }
.detail-page .form-group label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#64748b; margin-bottom:4px; }
.detail-page .form-group input, .detail-page .form-group select { width:100%; padding:10px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:14px; font-family:'DM Sans',sans-serif; background:#fafafa; }
.detail-page .form-group input:focus, .detail-page .form-group select:focus { outline:none; border-color:#1976d2; background:white; }
.detail-page .form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:480px) { .detail-page .form-row { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════ */
/* SALES MONTH SEPARATORS                         */
/* ═══════════════════════════════════════════════ */
.month-separator { margin:20px 0 12px 0; padding:12px 16px; background:linear-gradient(135deg,#1e3a5f,#2563eb); border-radius:10px; color:#fff; }
.month-separator-label { font-size:18px; font-weight:700; letter-spacing:0.5px; }
.month-separator-stats { font-size:13px; color:rgba(255,255,255,0.8); margin-top:2px; }

/* ═══════════════════════════════════════════════ */
/* QUOTE CARDS & PHOTO GRID                       */
/* ═══════════════════════════════════════════════ */
.quote-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:0; margin-bottom:12px; border-left:4px solid #94a3b8; overflow:hidden; transition:box-shadow 0.2s, border-color 0.2s; }
.quote-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.08); border-color:#cbd5e1; }
.quote-card.quote-sent { border-left-color:#42A5F5; }
.quote-card.quote-sold { border-left-color:#4CAF50; }
.quote-card-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 10px; }
.quote-card-title { font-weight:700; font-size:16px; color:#1e293b; font-family:'DM Sans',sans-serif; }
.quote-card-badge { font-size:11px; font-weight:600; text-transform:uppercase; padding:3px 10px; border-radius:10px; background:#e2e8f0; color:#64748b; letter-spacing:0.3px; }
.quote-sent .quote-card-badge { background:#e3f2fd; color:#1565C0; }
.quote-sold .quote-card-badge { background:#e8f5e9; color:#2e7d32; }
.quote-card-meta { font-size:12px; color:#94a3b8; padding:0 16px 8px; }

/* Pricing summary box */
.quote-pricing { margin:0 12px 10px; padding:12px 14px; background:linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border-radius:8px; border:1px solid #bbf7d0; }
.quote-pricing-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; font-size:13px; color:#475569; }
.quote-pricing-row.retail { color:#94a3b8; }
.quote-pricing-row.discount { color:#94a3b8; font-style:italic; }
.quote-pricing-row.finance { font-weight:700; font-size:16px; color:#166534; padding:6px 0 2px; border-top:1px solid #bbf7d0; margin-top:4px; }
.quote-pricing-row.cash { font-size:13px; color:#475569; padding-bottom:0; }
.quote-pricing-label { }
.quote-pricing-value { font-family:'JetBrains Mono',monospace; font-weight:600; }
.quote-pricing-row.finance .quote-pricing-value { font-size:18px; }

/* Window list */
.quote-win-list { padding:0 12px 8px; }
.quote-win-item { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:6px; background:#fff; margin-bottom:4px; border:1px solid #f1f5f9; font-size:13px; }
.quote-win-item:hover { background:#f8fafc; }
.quote-win-style { font-weight:600; color:#1e293b; min-width:130px; }
.quote-win-size { font-family:'JetBrains Mono',monospace; font-size:12px; color:#64748b; min-width:80px; }
.quote-win-specs { color:#94a3b8; font-size:12px; flex:1; }
.quote-win-price { font-family:'JetBrains Mono',monospace; font-weight:600; color:#1e293b; text-align:right; min-width:60px; }

/* Photo grid inside quote card */
.quote-photos { padding:4px 12px 12px; }
.quote-photos-title { font-size:12px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); gap:6px; }
.photo-thumb { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid #e2e8f0; transition:transform 0.2s, border-color 0.2s; }
.photo-thumb:hover { transform:scale(1.05); border-color:#42A5F5; }

/* Quote card footer link */
.quote-card-footer { padding:8px 16px 12px; display:flex; justify-content:space-between; align-items:center; }
.quote-card-link { font-size:12px; color:#42A5F5; font-weight:600; text-decoration:none; cursor:pointer; }
.quote-card-link:hover { text-decoration:underline; }
.quote-card-delete { font-size:11px; color:#ef4444; cursor:pointer; padding:4px 10px; border-radius:6px; transition:background 0.2s; }
.quote-card-delete:hover { background:#fef2f2; text-decoration:underline; }

/* Old tag style kept for backwards compat */
.quote-card-windows { display:flex; flex-wrap:wrap; gap:4px; padding:0 12px 8px; }
.quote-win-tag { font-size:11px; background:#e2e8f0; color:#475569; padding:2px 8px; border-radius:4px; }

/* ═══════════════════════════════════════════════ */
/* CALENDAR STYLES                                */
/* ═══════════════════════════════════════════════ */
.calendar-content { padding:8px; overflow-x:auto; }
.calendar-header-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:10px 14px; background:white; border-radius:8px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.cal-month-title { font-size:20px; font-weight:700; color:#1e293b; margin:0; min-width:160px; text-align:center; }
.cal-header-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cal-nav-btn { padding:7px 14px; background:white; border:2px solid #2196f3; border-radius:6px; color:#2196f3; font-size:13px; font-weight:600; cursor:pointer; }
.cal-nav-btn:hover { background:#e3f2fd; }
.cal-today-btn { padding:7px 14px; background:#607d8b; border:none; border-radius:6px; color:white; font-size:13px; font-weight:600; cursor:pointer; }
.cal-today-btn:hover { background:#546e7a; }
.cal-toggle-btn { padding:7px 14px; background:white; border:2px solid #9e9e9e; border-radius:6px; color:#616161; font-size:12px; font-weight:600; cursor:pointer; }
.cal-toggle-btn:hover { background:#f5f5f5; }
.cal-toggle-btn.active { background:#ff5722; border-color:#ff5722; color:white; }
.cal-add-appt-btn { padding:7px 14px; background:#1976d2; border:none; border-radius:6px; color:white; font-size:13px; font-weight:600; cursor:pointer; }
.cal-add-appt-btn:hover { background:#1565c0; }

/* Quick Appt Customer Search */
.qa-suggestions { position:absolute; top:100%; left:0; right:0; background:white; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.15); max-height:240px; overflow-y:auto; z-index:100; margin-top:2px; }
.qa-suggestion-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid #f0f0f0; transition:background 0.1s; }
.qa-suggestion-item:last-child { border-bottom:none; }
.qa-suggestion-item:hover { background:#e3f2fd; }
.qa-sug-name { font-weight:600; font-size:14px; color:#212121; display:flex; align-items:center; gap:8px; }
.qa-sug-status { font-size:10px; font-weight:600; padding:1px 6px; border-radius:4px; }
.qa-sug-status.appointment { background:#e8f5e9; color:#2e7d32; }
.qa-sug-status.not-sold { background:#ffebee; color:#c62828; }
.qa-sug-status.sold { background:#e3f2fd; color:#1565c0; }
.qa-sug-status.paid { background:#e8f5e9; color:#2e7d32; }
.qa-sug-status.callback { background:#fff8e1; color:#f57f17; }
.qa-sug-status.cancelled { background:#fff3e0; color:#e65100; }
.qa-sug-detail { font-size:12px; color:#757575; margin-top:2px; }
.qa-matched-tag { display:inline-block; margin-top:6px; padding:4px 10px; background:#e8f5e9; color:#2e7d32; border-radius:6px; font-size:12px; font-weight:600; }

.view-toggle { display:flex; background:#f0f0f0; border-radius:6px; padding:2px; gap:2px; }
.view-toggle-btn { padding:6px 12px; border:none; background:transparent; border-radius:4px; font-size:12px; font-weight:600; color:#666; cursor:pointer; }
.view-toggle-btn.active { background:white; color:#1976d2; box-shadow:0 1px 3px rgba(0,0,0,0.1); }

/* Month Grid */
.full-month-calendar { background:white; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); overflow:hidden; min-width:320px; }
.cal-day-headers { display:grid; grid-template-columns:repeat(7,1fr); background:#2196f3; }
.cal-day-header { padding:10px 4px; text-align:center; font-size:11px; font-weight:700; color:white; letter-spacing:0.5px; }
.cal-grid { display:flex; flex-direction:column; }
.cal-week { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid #e0e0e0; }
.cal-week:last-child { border-bottom:none; }
.cal-day-cell { min-height:100px; padding:3px; border-right:1px solid #e0e0e0; background:white; display:flex; flex-direction:column; cursor:pointer; transition:background 0.15s; overflow:hidden; }
.cal-day-cell:last-child { border-right:none; }
.cal-day-cell:hover { background:#f8fafc; }
.cal-day-cell.other-month { background:#fafafa; }
.cal-day-cell.other-month .cal-day-number { color:#bdbdbd; }
.cal-day-cell.today { background:#fff8e1; }
.cal-day-number { font-size:13px; font-weight:600; color:#424242; padding:2px 4px; text-align:right; flex-shrink:0; }
.cal-day-number.today { color:#f57c00; font-weight:700; }
.cal-day-items { flex:1; display:flex; flex-direction:column; gap:1px; overflow:hidden; padding:0 1px; }
.cal-item { display:flex; align-items:center; gap:3px; padding:2px 4px; border-radius:3px; font-size:10px; line-height:1.3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.cal-item:hover { opacity:0.85; }
.cal-item.appt { background:#e3f2fd; border-left:3px solid #1976d2; color:#1565c0; }
.cal-item.sold { background:#e8f5e9; border-left:3px solid #4caf50; color:#2e7d32; }
.cal-item.install { background:#eceff1; border-left:3px solid #607d8b; color:#455a64; }
.cal-item.task { background:#ffebee; border-left:3px solid #d32f2f; color:#c62828; }
.cal-item.cancelled { background:#fff3e0; border-left:3px solid #ff9800; color:#e65100; }
.cal-item.not-sold { background:#e3f2fd; border-left:3px solid #d32f2f; color:#1565c0; }
.cal-item.callback { background:#fff8e1; border-left:3px solid #f9a825; color:#f57f17; }
.cal-item-label { font-weight:700; font-size:9px; flex-shrink:0; }
.cal-item-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-item-more { font-size:9px; color:#757575; font-weight:600; padding:1px 4px; text-align:center; }

/* Legend */
.cal-legend { display:flex; gap:16px; padding:10px 14px; background:white; border-radius:8px; margin-top:10px; box-shadow:0 1px 3px rgba(0,0,0,0.1); flex-wrap:wrap; }
.cal-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#616161; }
.cal-legend-dot { width:14px; height:14px; border-radius:3px; }
.cal-legend-dot.appt { background:#e3f2fd; border-left:3px solid #1976d2; }
.cal-legend-dot.sold { background:#e8f5e9; border-left:3px solid #4caf50; }
.cal-legend-dot.install { background:#eceff1; border-left:3px solid #607d8b; }
.cal-legend-dot.cancelled { background:#fff3e0; border-left:3px solid #ff9800; }
.cal-legend-dot.callback { background:#fff8e1; border-left:3px solid #f9a825; }

/* Day View */
.day-view { flex:1; overflow-y:auto; padding:0 8px; }
.day-view-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; }
.day-view-empty .empty-icon { font-size:48px; margin-bottom:16px; opacity:0.5; }
.day-view-empty p { font-size:16px; color:#666; margin:0 0 20px; }
.day-view-list { display:flex; flex-direction:column; gap:10px; padding:8px 0; }
.day-view-item { display:flex; align-items:flex-start; gap:12px; background:white; border-radius:10px; padding:14px; box-shadow:0 1px 4px rgba(0,0,0,0.08); border-left:4px solid #1976d2; }
.day-view-item.appt { border-left-color:#1976d2; }
.day-view-item.sold { border-left-color:#388e3c; }
.day-view-item.install { border-left-color:#757575; }
.day-view-item.not-sold { border-left-color:#d32f2f; }
.day-view-item.callback { border-left-color:#f9a825; }
.day-view-item.cancelled { border-left-color:#9e9e9e; background:#fafafa; }
.day-item-time { font-size:14px; font-weight:700; color:#1976d2; min-width:60px; text-align:center; padding-top:2px; }
.day-item-content { flex:1; min-width:0; }
.day-item-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.day-item-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; text-transform:uppercase; flex-shrink:0; }
.day-item-badge.appt { background:#e3f2fd; color:#1565c0; }
.day-item-badge.sold { background:#e8f5e9; color:#2e7d32; }
.day-item-badge.install { background:#f5f5f5; color:#616161; }
.day-item-badge.not-sold { background:#ffebee; color:#c62828; }
.day-item-badge.cancelled { background:#eee; color:#757575; }
.day-item-name { font-size:16px; font-weight:600; color:#333; overflow:hidden; text-overflow:ellipsis; }
.day-item-name.clickable { color:#1976d2; cursor:pointer; }
.day-item-name.clickable:hover { text-decoration:underline; }
.day-item-address { font-size:13px; color:#666; margin-top:4px; }
.day-item-phone { font-size:13px; margin-top:4px; color:#1976d2; font-weight:500; }
.day-item-actions { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.day-action-btn { display:inline-flex; align-items:center; gap:3px; padding:8px 12px; border:none; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; }
.day-action-btn.call { background:#e8f5e9; color:#2e7d32; }
.day-action-btn.call:hover { background:#c8e6c9; }
.day-action-btn.text { background:#e3f2fd; color:#1565c0; }
.day-action-btn.text:hover { background:#bbdefb; }
.day-action-btn.map { background:#fff3e0; color:#e65100; }
.day-action-btn.map:hover { background:#ffe0b2; }

@media(max-width:600px) { .form-row { grid-template-columns:1fr; } .modal-full { max-width:100%!important; } .cal-day-cell { min-height:70px; } .cal-item { font-size:9px; } .cal-day-header { font-size:10px; padding:8px 2px; } .calendar-header-bar { flex-direction:column; align-items:stretch; } .cal-month-title { font-size:18px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE: Hide desktop-only elements
   ═══════════════════════════════════════════════════════════════════════════ */
.crm-sidebar { display:none; }
.crm-status-bar { display:none; }
.header-search { display:none; }
.header-subtitle { display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (768px+) — Suite-style sidebar + split views
   ═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:768px) {
    /* --- App Container --- */
    .crm-page { height:100vh; overflow:hidden; }
    .crm-main-layout { display:flex; flex:1; overflow:hidden; }

    /* --- Header --- */
    .crm-header {
        background:linear-gradient(135deg,#007acc 0%,#005a9e 100%);
        padding:10px 24px; position:relative;
    }
    .crm-header h1 { font-size:22px; font-weight:600; letter-spacing:-0.5px; }
    .header-subtitle { display:inline; font-weight:300; opacity:0.8; font-size:13px; margin-left:6px; }
    .header-nav { display:flex; }
    .header-search {
        display:flex; align-items:center; gap:8px;
        background:rgba(255,255,255,0.15); border-radius:20px; padding:6px 16px;
    }
    .header-search svg { opacity:0.7; flex-shrink:0; }
    .header-search input {
        background:transparent; border:none; color:white; font-size:14px;
        width:200px; outline:none; font-family:'DM Sans',sans-serif;
    }
    .header-search input::placeholder { color:rgba(255,255,255,0.6); }

    /* --- Sidebar Navigation --- */
    .crm-sidebar {
        display:flex; width:180px; background:white;
        border-right:1px solid #e0e0e0; flex-direction:column;
        padding:12px 0; flex-shrink:0;
    }
    .crm-sidebar-item {
        display:flex; align-items:center; gap:10px;
        padding:11px 20px; cursor:pointer; color:#555;
        font-size:14px; border-left:3px solid transparent;
        transition:all 0.15s; user-select:none;
    }
    .crm-sidebar-item:hover { background:#f5f5f5; color:#007acc; }
    .crm-sidebar-item.active {
        background:#e8f4fc; color:#007acc;
        border-left-color:#007acc; font-weight:600;
    }
    .sidebar-icon { font-size:16px; flex-shrink:0; }
    .sidebar-spacer { flex:1; }
    .sidebar-badge {
        background:#ef4444; color:white; font-size:10px; font-weight:700;
        padding:1px 6px; border-radius:10px; margin-left:auto;
    }

    /* --- Hide mobile bottom nav --- */
    .crm-bottom-nav { display:none; }

    /* --- Content area --- */
    .crm-content {
        flex:1; padding:20px; padding-bottom:20px;
        overflow-y:auto; background:#f0f2f5;
    }

    /* --- Status bar --- */
    .crm-status-bar {
        display:flex; background:white; border-top:1px solid #e0e0e0;
        padding:6px 24px; font-size:11px; color:#999;
        justify-content:space-between;
    }

    /* --- Modal adjustments --- */
    .modal-content { max-width:500px; }
    .modal-full { max-width:700px!important; }

    /* ═══════════════════════════════════════════════
       DASHBOARD — 5-column stats grid
       ═══════════════════════════════════════════════ */
    .stats-grid-2x2 {
        grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:20px;
    }
    .stat-box { padding:20px; }
    .stat-number { font-size:26px; }
    .quick-actions-row { grid-template-columns:repeat(3,auto); justify-content:start; gap:12px; }
    .quick-action-btn { padding:10px 20px; font-size:14px; }

    /* ═══════════════════════════════════════════════
       CUSTOMERS — Split-view (list + detail)
       ═══════════════════════════════════════════════ */
    .dk-split-view {
        display:flex; gap:20px; height:calc(100vh - 140px);
    }
    .dk-customer-list {
        width:360px; background:white; border-radius:8px;
        box-shadow:0 1px 3px rgba(0,0,0,0.08);
        display:flex; flex-direction:column; flex-shrink:0;
    }
    .dk-customer-list-header {
        padding:14px 16px; border-bottom:1px solid #eee;
        display:flex; flex-direction:column; gap:10px;
    }
    .dk-customer-list-header .dk-header-row {
        display:flex; justify-content:space-between; align-items:center;
    }
    .dk-customer-list-header h3 { margin:0; font-size:15px; color:#333; }
    .dk-list-search {
        width:100%; padding:9px 12px; border:1px solid #ddd;
        border-radius:6px; font-size:14px; font-family:'DM Sans',sans-serif;
    }
    .dk-list-search:focus { outline:none; border-color:#007acc; box-shadow:0 0 0 3px rgba(0,122,204,0.1); }
    .dk-customer-list-items { flex:1; overflow-y:auto; }
    .dk-cust-item {
        padding:10px 16px; border-bottom:1px solid #f0f0f0;
        cursor:pointer; transition:background 0.15s;
        border-left:3px solid transparent;
    }
    .dk-cust-item:hover { background:#f8f9fa; }
    .dk-cust-item.active { background:#e8f4fc; border-left-color:#007acc; }
    .dk-cust-item.sale { border-left-color:#28a745; }
    .dk-cust-item .dk-name { font-weight:600; font-size:14px; color:#333; }
    .dk-cust-item .dk-info { font-size:12px; color:#666; margin-top:2px; }
    .dk-cust-item .dk-status {
        display:inline-block; font-size:9px; font-weight:600; padding:1px 6px;
        border-radius:3px; margin-left:8px; vertical-align:middle;
    }
    .dk-cust-item .dk-status.appointment { background:#e8f5e9; color:#2e7d32; }
    .dk-cust-item .dk-status.not-sold { background:#ffebee; color:#c62828; }
    .dk-cust-item .dk-status.paid { background:#e8f5e9; color:#2e7d32; }
    .dk-cust-item .dk-status.pending { background:#fff3e0; color:#e65100; }
    .dk-cust-item .dk-status.cancelled { background:#f5f5f5; color:#616161; }
    .dk-customer-detail {
        flex:1; background:white; border-radius:8px;
        box-shadow:0 1px 3px rgba(0,0,0,0.08);
        padding:24px; overflow-y:auto;
    }
    .dk-detail-header {
        display:flex; justify-content:space-between; align-items:center;
        margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid #eee;
    }
    .dk-detail-header h2 { font-size:20px; color:#333; margin:0; }
    .dk-detail-empty {
        display:flex; flex-direction:column; align-items:center;
        justify-content:center; height:100%; color:#999; font-size:15px;
    }
    .dk-detail-empty .empty-icon { font-size:48px; margin-bottom:12px; opacity:0.4; }
    .dk-form-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
    .dk-form-row.two-col { grid-template-columns:1fr 1fr; }
    .dk-form-group { margin-bottom:0; }
    .dk-form-group label {
        display:block; font-size:11px; font-weight:600;
        color:#555; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px;
    }
    .dk-form-group input, .dk-form-group select, .dk-form-group textarea {
        width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:6px;
        font-size:14px; font-family:'DM Sans',sans-serif;
    }
    .dk-form-group input:focus, .dk-form-group select:focus { outline:none; border-color:#007acc; box-shadow:0 0 0 3px rgba(0,122,204,0.1); }
    .dk-form-group textarea { resize:vertical; min-height:80px; }
    .dk-actions { display:flex; gap:10px; margin-top:16px; }
    .dk-actions .btn-primary { padding:10px 24px; background:#007acc; color:white; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; }
    .dk-actions .btn-primary:hover { background:#005a9e; }
    .dk-actions .btn-danger { padding:10px 24px; margin-left:auto; }

    /* ═══════════════════════════════════════════════
       SALES — Desktop table view
       ═══════════════════════════════════════════════ */
    .dk-sales-layout { display:flex; flex-direction:column; height:calc(100vh - 140px); }
    .dk-sales-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
    .dk-sales-header .year-select { width:auto; padding:8px 12px; font-size:14px; }
    .dk-sales-summary {
        display:flex; gap:16px; margin-bottom:16px;
    }
    .dk-sales-stat {
        background:white; border-radius:8px; padding:16px 20px;
        box-shadow:0 1px 3px rgba(0,0,0,0.08); flex:1; text-align:center;
    }
    .dk-sales-stat .stat-val { font-size:24px; font-weight:700; font-family:'JetBrains Mono',monospace; }
    .dk-sales-stat .stat-lbl { font-size:11px; color:#666; text-transform:uppercase; margin-top:2px; }
    .dk-sales-stat.grey { background:#f5f5f5; } .dk-sales-stat.grey .stat-val { color:#616161; }
    .dk-sales-stat.green { background:#e8f5e9; } .dk-sales-stat.green .stat-val { color:#2e7d32; }
    .dk-sales-stat.blue { background:#e3f2fd; } .dk-sales-stat.blue .stat-val { color:#1565c0; }
    .dk-sales-stat.orange { background:#fff3e0; } .dk-sales-stat.orange .stat-val { color:#e65100; }
    .dk-sales-table-wrap {
        flex:1; overflow-y:auto; background:white; border-radius:8px;
        box-shadow:0 1px 3px rgba(0,0,0,0.08);
    }
    .dk-sales-table { width:100%; border-collapse:collapse; font-size:13px; }
    .dk-sales-table th {
        background:#f8f9fa; padding:10px 12px; text-align:left;
        font-weight:600; color:#555; border-bottom:2px solid #dee2e6;
        text-transform:uppercase; font-size:11px; letter-spacing:0.5px;
        position:sticky; top:0; z-index:5;
    }
    .dk-sales-table td { padding:10px 12px; border-bottom:1px solid #eee; vertical-align:middle; }
    .dk-sales-table tr:hover { background:#f8f9fa; }
    .dk-sales-table tr.row-paid { background:#d4edda; }
    .dk-sales-table tr.row-pending { background:#fff3cd; }
    .dk-sales-table .month-divider {
        background:#e8f5e9!important; color:#2e7d32;
        font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.5px;
    }
    .dk-sales-table .month-divider td {
        padding:8px 12px!important; border-top:1px solid #c8e6c9!important;
    }
    .dk-sales-table .btn-sm {
        padding:4px 10px; font-size:11px; border:none; border-radius:4px;
        cursor:pointer; font-weight:600;
    }
    .dk-sales-table .btn-mark-paid { background:#e8f5e9; color:#2e7d32; }
    .dk-sales-table .btn-mark-paid:hover { background:#c8e6c9; }
    .dk-sales-table .btn-delete-sale { background:none; color:#ccc; font-size:13px; margin-left:6px; padding:4px 6px; }
    .dk-sales-table .btn-delete-sale:hover { color:#ef4444; background:#fef2f2; }

    /* ═══════════════════════════════════════════════
       CALENDAR — Larger desktop cells
       ═══════════════════════════════════════════════ */
    .cal-day-cell { min-height:120px; padding:4px 6px; }
    .cal-item { font-size:11px; padding:2px 5px; }
    .cal-item-name { max-width:130px; }
    .cal-day-number { font-size:14px; }
    .cal-month-title { font-size:22px; }
    .calendar-header-bar { flex-wrap:nowrap; }

    /* ═══════════════════════════════════════════════
       FOLLOW-UP — Side-by-side layout
       ═══════════════════════════════════════════════ */
    .dk-followup-layout {
        display:flex; gap:20px; height:calc(100vh - 140px);
    }
    .dk-followup-scripts {
        width:420px; flex-shrink:0; overflow-y:auto;
    }
    .dk-followup-customers {
        flex:1; overflow-y:auto;
    }

    /* ═══════════════════════════════════════════════
       EMAIL CLIENT — 3-panel layout
       ═══════════════════════════════════════════════ */
    .ec-container { display:flex; flex-direction:column; height:calc(100vh - 140px); }
    .ec-header {
        display:flex; justify-content:space-between; align-items:center;
        padding:12px 16px; background:white; border-radius:8px;
        box-shadow:0 1px 3px rgba(0,0,0,0.08); margin-bottom:12px;
    }
    .ec-header-left { display:flex; align-items:center; gap:12px; }
    .ec-header-left h2 { margin:0; font-size:18px; color:#333; }
    .ec-status {
        font-size:12px; padding:3px 10px; border-radius:12px; font-weight:600;
    }
    .ec-status.connected { background:#e8f5e9; color:#2e7d32; }
    .ec-status.disconnected { background:#ffebee; color:#c62828; }
    .ec-header-right { display:flex; gap:8px; }
    .ec-btn {
        padding:7px 16px; border:none; border-radius:6px; font-size:13px;
        font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
    }
    .ec-btn.primary { background:#007acc; color:white; }
    .ec-btn.primary:hover { background:#005a9e; }
    .ec-btn.secondary { background:#f5f5f5; color:#333; border:1px solid #ddd; }
    .ec-btn.secondary:hover { background:#eee; }
    .ec-layout { display:flex; flex:1; overflow:hidden; gap:0; background:white; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
    .ec-folders {
        width:180px; background:#f8fafc; border-right:1px solid #e0e0e0;
        padding:8px; flex-shrink:0; overflow-y:auto;
    }
    .ec-folder {
        display:flex; align-items:center; gap:8px;
        padding:9px 12px; border-radius:6px; cursor:pointer;
        font-size:13px; color:#475569; transition:all 0.15s;
    }
    .ec-folder:hover { background:#e2e8f0; }
    .ec-folder.active { background:#e3f2fd; color:#1565c0; font-weight:600; }
    .ec-folder .ec-folder-badge {
        margin-left:auto; background:#ef4444; color:white;
        font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px;
    }
    .ec-list-panel {
        width:320px; border-right:1px solid #e0e0e0;
        display:flex; flex-direction:column; flex-shrink:0;
    }
    .ec-list-header {
        padding:12px 14px; border-bottom:1px solid #eee;
        font-size:13px; font-weight:600; color:#333;
        display:flex; justify-content:space-between; align-items:center;
    }
    .ec-list-items { flex:1; overflow-y:auto; }
    .ec-email-item {
        padding:10px 14px; border-bottom:1px solid #f0f0f0;
        cursor:pointer; transition:background 0.15s;
        border-left:3px solid transparent;
    }
    .ec-email-item:hover { background:#f8f9ff; }
    .ec-email-item.active { background:#e8f4fc; border-left-color:#007acc; }
    .ec-email-item.unread { border-left-color:#3b82f6; }
    .ec-email-item.unread .ec-email-subject { font-weight:700; }
    .ec-email-from { font-weight:600; font-size:13px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ec-email-date { font-size:11px; color:#999; white-space:nowrap; }
    .ec-email-subject { font-size:13px; color:#444; margin:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ec-email-snippet { font-size:12px; color:#999; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ec-email-tags { display:flex; gap:4px; margin-top:4px; }
    .ec-email-tag {
        font-size:10px; font-weight:600; padding:1px 6px; border-radius:3px;
    }
    .ec-email-tag.appointment { background:#e3f2fd; color:#1565c0; }
    .ec-email-tag.commission { background:#fff3e0; color:#e65100; }
    .ec-email-tag.imported { background:#e8f5e9; color:#2e7d32; }
    .ec-detail-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; }
    .ec-detail-empty {
        display:flex; flex-direction:column; align-items:center;
        justify-content:center; height:100%; color:#999; font-size:15px;
    }
    .ec-detail-empty .empty-icon { font-size:48px; margin-bottom:12px; opacity:0.4; }
    .ec-detail-header { padding:16px 20px; border-bottom:1px solid #eee; }
    .ec-detail-subject { font-size:18px; font-weight:600; color:#333; margin-bottom:8px; }
    .ec-detail-meta { font-size:13px; color:#666; display:flex; justify-content:space-between; }
    .ec-detail-body { flex:1; overflow-y:auto; padding:16px 20px; font-size:14px; color:#333; line-height:1.6; white-space:pre-line; word-break:break-word; }
    .ec-email-frame { width:100%; border:none; min-height:300px; flex:1; padding:0 4px; }
    .ec-detail-actions {
        padding:12px 20px; border-top:1px solid #eee;
        display:flex; gap:8px;
    }

    /* Attachment cards */
    .ec-attachments-section {
        padding: 12px 20px;
        border-top: 1px solid #eee;
        background: #fafbfc;
    }
    .ec-attachments-label {
        font-size: 13px;
        font-weight: 600;
        color: #555;
        margin-bottom: 8px;
    }
    .ec-attachments-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ec-attachment-card {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        text-decoration: none;
        color: #333;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }
    .ec-attachment-card:hover {
        background: #e3f2fd;
        border-color: #90caf9;
    }
    .ec-att-icon { font-size: 18px; }
    .ec-att-name {
        font-weight: 500;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ec-att-size { color: #999; font-size: 12px; }
    .ec-att-dl { color: #007acc; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE EMAIL CLIENT (shown below 768px as stacked panels)
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:767px) {
    .ec-container { padding:0; }
    .ec-layout { flex-direction:column; }
    .ec-folders { display:none; }
    .ec-list-panel { width:100%; border-right:none; }
    .ec-detail-panel { display:none; }
    .ec-detail-panel.mobile-active {
        display:flex; position:fixed; inset:0; z-index:200;
        background:white; flex-direction:column;
    }
    .ec-mobile-back {
        display:flex; align-items:center; gap:8px; padding:12px 16px;
        border-bottom:1px solid #eee; cursor:pointer; color:#007acc;
        font-weight:600; font-size:14px;
    }
    .ec-mobile-folder-select {
        display:block; width:100%; padding:10px; border:1px solid #e0e0e0;
        border-radius:6px; font-size:14px; margin-bottom:8px; font-family:'DM Sans',sans-serif;
    }

    /* Mobile attachment cards — larger touch targets */
    .ec-attachments-section {
        padding: 12px 0;
        margin-top: 12px;
        border-top: 1px solid #eee;
        background: transparent;
    }
    .ec-attachments-list { flex-direction: column; }
    .ec-attachment-card {
        padding: 12px 14px;
        min-height: 44px;
    }
    .ec-att-name { max-width: 60vw; }
}

/* Email iframe — base styles (mobile modals use inline styles, not desktop media query) */
.ec-email-frame { width:100%; border:none; min-height:250px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL ATTACHMENTS — Base styles (all viewports)
   ═══════════════════════════════════════════════════════════════════════════ */
.ec-attachments-section {
    padding: 12px 16px;
    margin-top: 12px;
    border-top: 1px solid #eee;
    background: #fafbfc;
}
.ec-attachments-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}
.ec-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ec-attachment-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s, border-color 0.15s;
}
.ec-attachment-card:hover {
    background: #e3f2fd;
    border-color: #90caf9;
}
.ec-att-icon { font-size: 18px; }
.ec-att-name {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-att-size { color: #999; font-size: 12px; }
.ec-att-dl { color: #007acc; font-size: 14px; }

/* ═══════════════════════════════════════════════
   APPOINTMENT RESULT PANEL (Schedule Day View)
   ═══════════════════════════════════════════════ */

/* Result badge — shown on day view appointment cards */
.result-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.result-badge.sold { background: #e8f5e9; color: #2e7d32; }
.result-badge.hot { background: #fff3e0; color: #e65100; border: 1px solid #ffb74d; }
.result-badge.warm { background: #fffde7; color: #f57f17; border: 1px solid #fff176; }
.result-badge.cold { background: #f5f5f5; color: #757575; }

/* Notes/follow-up preview on day cards */
.result-notes-preview {
    font-size: 12px; color: #555; margin-top: 4px;
    padding: 4px 8px; background: #f8f9fa; border-radius: 4px;
    border-left: 3px solid #ffb74d;
}
.result-followup-preview {
    font-size: 12px; color: #1565c0; margin-top: 2px; font-weight: 500;
}

/* "Enter Result" / "Edit Result" button */
.day-action-btn.result {
    background: #fff3e0; color: #e65100;
    border: 1px solid #ffcc80;
}
.day-action-btn.result:hover { background: #ffe0b2; }

/* Collapsible inline result panel */
.result-panel {
    margin-top: 10px;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
}
.result-panel-inner {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
}

/* Form rows inside result panel */
.result-form-row {
    display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.result-form-group {
    flex: 1; min-width: 120px;
}
.result-form-group.full { flex: 1 1 100%; }
.result-form-group label {
    display: block; font-size: 11px; font-weight: 600; color: #888;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
}

/* Form elements */
.result-select, .result-date-input {
    width: 100%; padding: 8px 10px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    background: white;
}
.result-select:focus, .result-date-input:focus, .result-notes-input:focus {
    outline: none; border-color: #ffb74d; box-shadow: 0 0 0 2px rgba(255, 183, 77, 0.2);
}
.result-notes-input {
    width: 100%; padding: 8px 10px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    resize: vertical; min-height: 60px;
}

/* Follow-up row (date + priority inline) */
.result-followup-row {
    display: flex; gap: 10px; margin-bottom: 8px;
    padding: 8px; background: #fff8e1; border-radius: 6px;
    border: 1px dashed #ffb74d;
}

/* Save button */
.result-save-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 20px; background: #e65100; color: white;
    border: none; border-radius: 6px; font-size: 14px; font-weight: 600;
    cursor: pointer; width: 100%;
    justify-content: center;
    transition: background 0.15s;
}
.result-save-btn:hover { background: #bf360c; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .result-followup-row { flex-direction: column; }
    .result-form-group { min-width: 100%; }
}