/* ═══════════════════════════════════════════════════════════════ v2-entity-details.css — V2 Professional Design System Companion to v2-design-system.css & massMailingPremium.css Same palette, same radius, same shadows. ═══════════════════════════════════════════════════════════════ */ /* ── Variable Reference (from v2-design-system.css) ───────── --v2-brand-blue: #2b5797 --v2-brand-blue-hover: #1e40af Text: #1e293b, #475569, #64748b, #94a3b8 Borders: #e2e8f0, #f1f5f9 Backgrounds: #f8fafc, #ffffff Radius: 12px (cards), 30px (pills), 8px (small) ────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════ */ /* SECTION 1: V2 Card & Layout — GLOBAL for ALL detail pages */ /* ═══════════════════════════════════════════════════════════ */ .cd-main-content .v2-card { background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; border: 1px solid #e2e8f0 !important; padding: 25px !important; width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; } .v2-body-container { padding: 0 5px !important; box-sizing: border-box !important; max-width: 100% !important; margin-top: 10px !important; } /* --- Appt Flex Grid (Replacing Metro UI grid/row/span) --- */ .appt-grid { display: block !important; width: 100% !important; box-sizing: border-box !important; } .appt-row { display: flex !important; flex-wrap: wrap !important; margin: 0 -10px !important; } .appt-col-4 { flex: 1 1 33.33% !important; max-width: 33.33% !important; padding: 0 10px !important; box-sizing: border-box !important; } .appt-col-12 { flex: 1 1 100% !important; max-width: 100% !important; padding: 0 10px !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 2: Config Section Headers — GLOBAL */ /* Same pattern as massMailingPremium.css config cards */ /* ═══════════════════════════════════════════════════════════ */ .cd-main-content .config-section-title { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; margin-bottom: 20px !important; color: #1e293b !important; font-size: 1.1rem !important; font-weight: 700 !important; padding-bottom: 15px !important; border-bottom: 1px solid #f1f5f9 !important; } /* ═══════════════════════════════════════════════════════════ */ /* COMPACT MODE — tighter spacing for task + appointment pages*/ /* ═══════════════════════════════════════════════════════════ */ #pageTaskDetails .v2-card, #pageTaskNotes .v2-card, #pageTaskHistory .v2-card, #pageAppointmentDetails .v2-card, #pageAppointmentNotes .v2-card, #pageAppointmentFollow .v2-card, #pagePhoneCallDetails .v2-card, #pagePhoneCallNotes .v2-card, #pagePhoneCallHistory .v2-card, #pageOpportunityDetails .v2-card, #pageOpportunityActivities .v2-card, #pageOpportunityDocuments .v2-card, #pageOpportunityNotes .v2-card, #pageOpportunityDetails .v2-card, #pageOpportunityActivities .v2-card, #pageOpportunityDocuments .v2-card, #pageOpportunityNotes .v2-card, #pageOpportunityFollow .v2-card, #pageTicketDetails .v2-card, #pageTicketTimeLine .v2-card, #pageTicketActivities .v2-card, #pageTicketFiles .v2-card, #pageTicketHistory .v2-card, #pageMassMailingDetails .v2-card, #pageMassMailingFilters .v2-card, #pageMassMailingMapping .v2-card, #pageMassMailingMain .v2-card, #pageMassMailingVerify .v2-card, #pageMassMailingStats .v2-card, #pageMassMailingTracking .v2-card, #pageMassMailingConfig .v2-card, #pageVendorDetails .v2-card, #pageVendorAddress .v2-card, #pageVendorBank .v2-card, #pageVendorNotes .v2-card, #pageVendorMap .v2-card, #pageVendorContacts .v2-card, #pageVendorActivities .v2-card, #pageVendorDocuments .v2-card, #pageVendorDocuments .v2-card, #pageVendorFiles .v2-card, #pageVendorHistory .v2-card, #pageLeadDetails .v2-card, #pageLeadAddress .v2-card, #pageLeadMore .v2-card, #pageLeadActivities .v2-card, #pageLeadFiles .v2-card, #pageLeadNotes .v2-card, #pageLeadHistory .v2-card, #pageAccountDetails .v2-card, #pageAccountAddress .v2-card, #pageAccountNotes .v2-card, #pageAccountHistory .v2-card, #pageContactDetails .v2-card, #pageProductDetails .v2-card, #pageDunningMain .v2-card, #pageSubscriptionMain .v2-card, #pageExpenseDetails .v2-card, #pageExpenseFiles .v2-card, #pageExpenseHistory .v2-card { padding: 16px !important; border-radius: 12px !important; margin-bottom: 10px !important; } #pageTaskDetails .v2-card+.v2-card, #pageAppointmentDetails .v2-card+.v2-card, #pagePhoneCallDetails .v2-card+.v2-card, #pageOpportunityDetails .v2-card+.v2-card, #pageTicketDetails .v2-card+.v2-card, #pageMassMailingDetails .v2-card+.v2-card, #pageVendorDetails .v2-card+.v2-card, #pageLeadDetails .v2-card+.v2-card, #pageAccountDetails .v2-card+.v2-card, #pageContactDetails .v2-card+.v2-card, #pageProductDetails .v2-card+.v2-card, #pageDunningMain .v2-card+.v2-card, #pageSubscriptionMain .v2-card+.v2-card, #pageExpenseDetails .v2-card+.v2-card { margin-top: 0 !important; } #pageTaskDetails .config-section-title, #pageTaskNotes .config-section-title, #pageTaskHistory .config-section-title, #pageAppointmentDetails .config-section-title, #pageAppointmentNotes .config-section-title, #pageAppointmentFollow .config-section-title, #pagePhoneCallDetails .config-section-title, #pagePhoneCallNotes .config-section-title, #pagePhoneCallHistory .config-section-title, #pageOpportunityDetails .config-section-title, #pageOpportunityNotes .config-section-title, #pageOpportunityDetails .config-section-title, #pageOpportunityNotes .config-section-title, #pageOpportunityFollow .config-section-title, #pageTicketDetails .config-section-title, #pageTicketTimeLine .config-section-title, #pageTicketActivities .config-section-title, #pageTicketFiles .config-section-title, #pageTicketHistory .config-section-title, #pageMassMailingDetails .config-section-title, #pageMassMailingFilters .config-section-title, #pageMassMailingMapping .config-section-title, #pageMassMailingMain .config-section-title, #pageMassMailingVerify .config-section-title, #pageMassMailingStats .config-section-title, #pageMassMailingTracking .config-section-title, #pageMassMailingConfig .config-section-title, #pageDunningConfig .config-section-title, #pageVendorDetails .config-section-title, #pageVendorAddress .config-section-title, #pageVendorBank .config-section-title, #pageVendorNotes .config-section-title, #pageVendorContacts .config-section-title, #pageVendorActivities .config-section-title, #pageVendorDocuments .config-section-title, #pageVendorFiles .config-section-title, #pageVendorHistory .config-section-title, #pageLeadDetails .config-section-title, #pageLeadAddress .config-section-title, #pageLeadMore .config-section-title, #pageLeadActivities .config-section-title, #pageLeadFiles .config-section-title, #pageLeadNotes .config-section-title, #pageLeadHistory .config-section-title, #pageAccountDetails .config-section-title, #pageAccountAddress .config-section-title, #pageAccountNotes .config-section-title, #pageAccountHistory .config-section-title, #pageContactDetails .config-section-title, #pageContactMore .config-section-title, #pageContactAddress .config-section-title, #pageProductDetails .config-section-title, #pageDunningMain .config-section-title, #pageSubscriptionMain .config-section-title, #pageExpenseDetails .config-section-title, #pageExpenseHistory .config-section-title { gap: 10px !important; margin-bottom: 12px !important; font-size: 0.95rem !important; padding-bottom: 8px !important; } /* Fix vertical misalignment of the '+' button in list headers */ .v2-list-header .config-section-title { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Modernize inline add-button-blue to Premium Orange Standard */ .v2-list-header .add-button-blue { background-image: none !important; width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 50% !important; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important; box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3) !important; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s !important; margin: 0 !important; } .v2-list-header .add-button-blue::before { content: "+" !important; font-family: Arial, sans-serif !important; font-weight: 300 !important; } .v2-list-header .add-button-blue:hover { transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4) !important; } #pageTaskDetails .config-section-title i, #pageTaskNotes .config-section-title i, #pageTaskHistory .config-section-title i, #pageAppointmentDetails .config-section-title i, #pageAppointmentNotes .config-section-title i, #pageAppointmentFollow .config-section-title i, #pagePhoneCallDetails .config-section-title i, #pagePhoneCallNotes .config-section-title i, #pagePhoneCallHistory .config-section-title i, #pageOpportunityDetails .config-section-title i, #pageOpportunityNotes .config-section-title i, #pageOpportunityDetails .config-section-title i, #pageOpportunityNotes .config-section-title i, #pageOpportunityFollow .config-section-title i, #pageTicketDetails .config-section-title i, #pageTicketTimeLine .config-section-title i, #pageTicketActivities .config-section-title i, #pageTicketFiles .config-section-title i, #pageTicketHistory .config-section-title i, #pageMassMailingDetails .config-section-title i, #pageMassMailingFilters .config-section-title i, #pageMassMailingMapping .config-section-title i, #pageMassMailingMain .config-section-title i, #pageMassMailingVerify .config-section-title i, #pageMassMailingStats .config-section-title i, #pageMassMailingTracking .config-section-title i, #pageMassMailingConfig .config-section-title i, #pageDunningConfig .config-section-title i, #pageVendorDetails .config-section-title i, #pageVendorAddress .config-section-title i, #pageVendorBank .config-section-title i, #pageVendorNotes .config-section-title i, #pageVendorContacts .config-section-title i, #pageVendorActivities .config-section-title i, #pageVendorDocuments .config-section-title i, #pageVendorFiles .config-section-title i, #pageVendorHistory .config-section-title i, #pageLeadDetails .config-section-title i, #pageLeadAddress .config-section-title i, #pageLeadMore .config-section-title i, #pageLeadActivities .config-section-title i, #pageLeadFiles .config-section-title i, #pageLeadNotes .config-section-title i, #pageLeadHistory .config-section-title i, #pageAccountDetails .config-section-title i, #pageAccountAddress .config-section-title i, #pageAccountNotes .config-section-title i, #pageAccountHistory .config-section-title i, #pageContactDetails .config-section-title i, #pageContactMore .config-section-title i, #pageContactAddress .config-section-title i, #pageProductDetails .config-section-title i { flex-shrink: 0 !important; } /* Appointment Specific Entity Icon Style */ .appointment-entity-icon { background: #dcfce7 !important; /* Soft green for activities/calendar */ color: #16a34a !important; } /* Contact Specific Entity Icon Style */ .contact-entity-icon { background: #dbeafe !important; color: #2563eb !important; } /* Product Specific Entity Icon Style */ .product-entity-icon { background: #fef3c7 !important; color: #d97706 !important; } /* Lead Specific Colorful Icons - Matching Global System */ #pageLeadDetails .config-section-title i.icon-info-2 { background: #dbeafe !important; color: #2563eb !important; } #pageLeadDetails .config-section-title i.icon-stats-up { background: #fef3c7 !important; color: #d97706 !important; } #pageLeadDetails .config-section-title i.icon-bookmark-3 { background: #d1fae5 !important; color: #047857 !important; } #pageLeadDetails .config-section-title i.icon-mail { background: #ffe4e6 !important; color: #e11d48 !important; } #pageLeadDetails .config-section-title i.icon-pencil { background: rgba(99, 102, 241, 0.12) !important; color: #6366f1 !important; } #pageLeadAddress .config-section-title i.icon-location { background: #e0e7ff !important; color: #4338ca !important; } #pageLeadMore .config-section-title i.icon-user { background: #e0f2fe !important; color: #0284c7 !important; } #pageLeadMore .config-section-title i.icon-cancel { background: #f1f5f9 !important; color: #475569 !important; } #pageLeadMore .config-section-title i.icon-calendar { background: #e0e7ff !important; color: #4f46e5 !important; } /* Contact Specific Colorful Icons — Details tab */ #pageContactDetails .config-section-title i.icon-info-2 { background: #dbeafe !important; color: #2563eb !important; } #pageContactDetails .config-section-title i.icon-link { background: #e0e7ff !important; color: #4338ca !important; } #pageContactDetails .config-section-title i.icon-mail { background: #ffe4e6 !important; color: #e11d48 !important; } #pageContactDetails .config-section-title i.icon-bookmark-3 { background: #d1fae5 !important; color: #047857 !important; } #pageContactDetails .config-section-title i.icon-pencil { background: rgba(99, 102, 241, 0.12) !important; color: #6366f1 !important; } /* Contact Specific Colorful Icons — More tab */ #pageContactMore .config-section-title i.icon-earth { background: #e0f2fe !important; color: #0284c7 !important; } #pageContactMore .config-section-title i.icon-briefcase { background: #fef3c7 !important; color: #d97706 !important; } #pageContactMore .config-section-title i.icon-blocked { background: #f1f5f9 !important; color: #475569 !important; } /* Contact Specific Colorful Icons — Address tab */ #pageContactAddress .config-section-title i.icon-location { background: #e0e7ff !important; color: #4338ca !important; } #pageLeadActivities .config-section-title i.icon-search { background: #ede9fe !important; color: #7c3aed !important; } #pageTaskDetails .appt-row.mt-20, #pageAppointmentDetails .appt-row.mt-20, #pagePhoneCallDetails .appt-row.mt-20, #pageOpportunityDetails .appt-row.mt-20, #pageTicketDetails .appt-row.mt-20, #pageMassMailingDetails .appt-row.mt-20, #pageVendorDetails .appt-row.mt-20, #pageLeadDetails .appt-row.mt-20, #pageLeadAddress .appt-row.mt-20, #pageLeadMore .appt-row.mt-20, #pageDunningMain .appt-row.mt-20, #pageSubscriptionMain .appt-row.mt-20, #pageExpenseDetails .appt-row.mt-20 { margin-top: 10px !important; } #pageTaskDetails .appt-row.mt-15, #pageAppointmentDetails .appt-row.mt-15, #pagePhoneCallDetails .appt-row.mt-15, #pageOpportunityDetails .appt-row.mt-15, #pageTicketDetails .appt-row.mt-15, #pageMassMailingDetails .appt-row.mt-15, #pageVendorDetails .appt-row.mt-15, #pageLeadDetails .appt-row.mt-15, #pageLeadAddress .appt-row.mt-15, #pageLeadMore .appt-row.mt-15, #pageDunningMain .appt-row.mt-15, #pageSubscriptionMain .appt-row.mt-15, #pageExpenseDetails .appt-row.mt-15 { margin-top: 6px !important; } #pageTaskDetails .mt-15, #pageAppointmentDetails .mt-15, #pagePhoneCallDetails .mt-15, #pageOpportunityDetails .mt-15, #pageTicketDetails .mt-15, #pageMassMailingDetails .mt-15, #pageVendorDetails .mt-15, #pageLeadDetails .mt-15, #pageLeadAddress .mt-15, #pageLeadMore .mt-15, #pageAccountDetails .mt-15, #pageAccountAddress .mt-15, #pageContactDetails .mt-15, #pageProductDetails .mt-15, #pageDunningMain .mt-15, #pageSubscriptionMain .mt-15, #pageExpenseDetails .mt-15, #pageExpenseHistory .mt-15 { margin-top: 8px !important; } #pageTaskDetails .v2-label-modern, #pageAppointmentDetails .v2-label-modern, #pagePhoneCallDetails .v2-label-modern, #pageOpportunityDetails .v2-label-modern, #pageTicketDetails .v2-label-modern, #pageMassMailingDetails .v2-label-modern, #pageVendorDetails .v2-label-modern, #pageVendorAddress .v2-label-modern, #pageVendorBank .v2-label-modern, #pageVendorNotes .v2-label-modern, #pageVendorContacts .v2-label-modern, #pageLeadDetails .v2-label-modern, #pageLeadAddress .v2-label-modern, #pageLeadMore .v2-label-modern, #pageLeadActivities .v2-label-modern, #pageAccountDetails .v2-label-modern, #pageAccountAddress .v2-label-modern, #pageContactDetails .v2-label-modern, #pageProductDetails .v2-label-modern, #pageDunningMain .v2-label-modern, #pageSubscriptionMain .v2-label-modern, #pageExpenseDetails .v2-label-modern, #pageExpenseHistory .v2-label-modern, #pageMassMailingDetails .v2-input-icon-wrapper label, #pageMassMailingDetails .mapping-input-group label, #pageMassMailingDetails h4[id^="label"], #pageMassMailingDetails .v2-table-header h4, #pageMassMailingDetails .v2-table-wrapper h4, #pageMassMailingDetails h4.labelRecipientsFound { font-size: 10px !important; margin-bottom: 3px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #64748b !important; /* Grey color like Tasks */ font-weight: 700 !important; } #pageTaskDetails .v2-input, #pageAppointmentDetails .v2-input, #pagePhoneCallDetails .v2-input, #pageOpportunityDetails .v2-input, #pageTicketDetails .v2-input, #pageMassMailingDetails .v2-input, #pageVendorDetails .v2-input, #pageVendorAddress .v2-input, #pageVendorBank .v2-input, #pageVendorNotes .v2-input, #pageLeadDetails .v2-input, #pageLeadAddress .v2-input, #pageLeadMore .v2-input, #pageAccountDetails .v2-input, #pageAccountAddress .v2-input, #pageContactDetails .v2-input, #pageProductDetails .v2-input, #pageDunningMain .v2-input, #pageSubscriptionMain .v2-input, #pageExpenseDetails .v2-input, #pageExpenseHistory .v2-input { padding: 6px 10px !important; font-size: 13px !important; } /* --- Compact Table Styling (Mass Mailing) --- */ #pageMassMailingDetails .v2-modern-table th { padding: 8px 12px !important; font-size: 10px !important; background: #f8fafc !important; color: #64748b !important; font-weight: 700 !important; text-transform: uppercase !important; } #pageMassMailingDetails .v2-modern-table td { padding: 6px 12px !important; font-size: 11px !important; color: #1e293b !important; vertical-align: middle !important; } #pageMassMailingDetails .v2-modern-table .v2-input, #pageMassMailingDetails .v2-modern-table select, #pageMassMailingDetails .v2-modern-table input { height: 32px !important; padding: 4px 8px !important; font-size: 11px !important; min-height: auto !important; } #pageMassMailingDetails .v2-modern-table .v2-ptr-add, #pageMassMailingDetails .v2-modern-table a { font-size: 11px !important; } #pageMassMailingDetails .v2-select-wrapper { margin: 4px 0 !important; } #pageMassMailingDetails .v2-select-wrapper::after { right: 10px !important; font-size: 0.7rem !important; } /* Native date/time picker inputs */ #pageTaskDetails input[type="date"], #pageAppointmentDetails input[type="date"], #pagePhoneCallDetails input[type="date"], #pageOpportunityDetails input[type="date"], #pageTicketDetails input[type="date"], #pageLeadDetails input[type="date"], #pageTaskDetails input[type="time"], #pageAppointmentDetails input[type="time"], #pagePhoneCallDetails input[type="time"], #pageLeadDetails input[type="time"] { cursor: pointer; min-height: 34px; accent-color: var(--primary-color, #2563eb); } #pageTaskDetails .v2-card.mt-15, #pageAppointmentDetails .v2-card.mt-15, #pagePhoneCallDetails .v2-card.mt-15, #pageOpportunityDetails .v2-card.mt-15, #pageTicketDetails .v2-card.mt-15, #pageMassMailingDetails .v2-card.mt-15, #pageVendorDetails .v2-card.mt-15, #pageLeadDetails .v2-card.mt-15, #pageLeadAddress .v2-card.mt-15, #pageLeadMore .v2-card.mt-15, #pageAccountDetails .v2-card.mt-15, #pageAccountAddress .v2-card.mt-15, #pageContactDetails .v2-card.mt-15, #pageContactMore .v2-card.mt-15, #pageContactAddress .v2-card.mt-15, #pageProductDetails .v2-card.mt-15, #pageDunningMain .v2-card.mt-15, #pageSubscriptionMain .v2-card.mt-15, #pageExpenseDetails .v2-card.mt-15 { margin-top: 8px !important; } /* Opportunity – probability gauge */ .opp-chart-container { margin-top: 8px; max-width: 200px; } /* Field separator – light line between field groups */ .appt-field-separator { border: none; border-top: 1px solid #e2e8f0; margin: 18px 0 4px; } /* Opportunity progress bar – inline label */ .opp-progress-label { margin: 0 !important; font-size: 0.8rem; white-space: nowrap; min-width: auto; } /* Compact progress bar – header strip */ .task-header-progress { display: flex; align-items: center; gap: 10px; padding: 6px 16px; background: #f1f5f9; border-top: 1px solid #e2e8f0; } .task-progress-input { width: 52px !important; min-width: 52px; text-align: center; font-weight: 600; font-size: 0.85rem; padding: 3px 6px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; } .task-progress-bar-track { flex: 1; height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden; } .task-progress-bar-fill { height: 100%; border-radius: 5px; transition: width 0.4s ease, background 0.4s ease; min-width: 0; } .task-progress-label { font-size: 0.8rem; font-weight: 600; color: #475569; min-width: 32px; text-align: right; } /* Tab badge styles moved to v2-design-system.css (global) */ @media (max-width: 480px) { .task-header-progress { gap: 8px; padding: 5px 10px; } .task-progress-input { width: 44px !important; min-width: 44px; font-size: 0.8rem; } .task-progress-bar-track { height: 8px; } } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 2.1: JQTE (Rich Text Editor) Premium Styling */ /* Ported from massMailingPremium.css */ /* ═══════════════════════════════════════════════════════════ */ /* Main JQTE Container */ #pageAppointmentDetails .jqte, #pageAppointmentNotes .jqte, #pageTaskDetails .jqte, #pageTaskNotes .jqte, #pageTicketDetails .jqte, #pageTicketTimeLine .jqte { border: 1px solid #e2e8f0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important; background: white !important; margin-top: 10px !important; } /* Focused State */ .jqte_focused { border-color: #2b5797 !important; box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1) !important; } /* Toolbar Modernization */ .jqte_toolbar { background: #e5e7eb !important; border-bottom: 1px solid #cbd5e1 !important; padding: 8px 12px !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; } /* Tool Buttons */ .jqte_tool { border-radius: 6px !important; border: 1px solid transparent !important; margin: 0 !important; padding: 6px 8px !important; transition: all 0.2s ease !important; background: white !important; } .jqte_tool:hover { background: #e2e8f0 !important; border-color: #cbd5e1 !important; transform: translateY(-1px) !important; } /* Active/Pressed Tool State */ .jqte_tool_depressed { background: #2b5797 !important; border-color: #2b5797 !important; } .jqte_tool_depressed .jqte_tool_icon { opacity: 1 !important; filter: brightness(0) invert(1) !important; } /* Editor Area */ .jqte_editor { padding: 16px !important; min-height: 200px !important; font-size: 14px !important; line-height: 1.6 !important; color: #1e293b !important; background: white !important; } #appointment .frame, #taskDetails .frame { min-height: calc(100vh - 150px) !important; } #appointment .textarea, #taskDetails .textarea { height: calc(100vh - 130px) !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 3: Quick Actions Card */ /* ═══════════════════════════════════════════════════════════ */ .appt-quick-actions { background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important; border: 1px solid #dbeafe !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 20px !important; padding: 12px 20px !important; } .appt-qa-header { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 0.85rem !important; font-weight: 700 !important; color: #2b5797 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 0 !important; } .appt-qa-header i { width: 30px !important; height: 30px !important; background: #2b5797 !important; color: white !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.9rem !important; } .appt-qa-buttons { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; } .appt-qa-btn { padding: 6px 16px !important; font-size: 0.8rem !important; border-radius: 25px !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 4: Textarea (Notes) */ /* ═══════════════════════════════════════════════════════════ */ .appt-textarea { -webkit-appearance: none !important; appearance: none !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 16px 20px !important; color: #1e293b !important; font-size: 0.95rem !important; font-weight: 500 !important; width: 100% !important; min-height: 120px !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; resize: vertical !important; line-height: 1.6 !important; } .appt-textarea:focus { background: #ffffff !important; border-color: #2b5797 !important; box-shadow: 0 0 0 4px rgba(43, 87, 151, 0.1) !important; outline: none !important; } .appt-textarea-full { -webkit-appearance: none !important; appearance: none !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 20px 24px !important; color: #1e293b !important; font-size: 0.95rem !important; font-weight: 500 !important; width: 100% !important; min-height: 350px !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; resize: vertical !important; line-height: 1.6 !important; } .appt-textarea-full:focus { background: #ffffff !important; border-color: #2b5797 !important; box-shadow: 0 0 0 4px rgba(43, 87, 151, 0.1) !important; outline: none !important; } .appt-char-count { display: block !important; text-align: right !important; font-size: 0.75rem !important; color: #94a3b8 !important; margin-top: 4px !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 5: Sidebar Labels */ /* ═══════════════════════════════════════════════════════════ */ .appt-sidebar-title { font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #2b5797 !important; margin-bottom: 10px !important; padding-bottom: 6px !important; border-bottom: 2px solid #eff6ff !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 6: Button Harmonization (scoped overrides) */ /* ═══════════════════════════════════════════════════════════ */ /* Harmonize Header Buttons with Tab Pills */ .cd-main-content .v2-nav-header .v2-btn-blue, .cd-main-content .v2-nav-header .v2-btn-danger-red { height: 28px !important; padding: 0 16px !important; font-size: 0.8rem !important; font-weight: 700 !important; border-radius: 30px !important; line-height: normal !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; } .cd-main-content .v2-nav-header .v2-btn-blue i, .cd-main-content .v2-nav-header .v2-btn-danger-red i { font-size: 1rem !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 7: Table Header Refinements */ /* ═══════════════════════════════════════════════════════════ */ #pageAppointmentDetails .v2-table-header h4, #pageAppointmentFollow .v2-table-header h4, #pageTaskDetails .v2-table-header h4, #pageTaskHistory .v2-table-header h4 { font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #64748b !important; margin-bottom: 10px !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 8: Modal */ /* ═══════════════════════════════════════════════════════════ */ .appt-selected-results { padding: 12px !important; background: #f8fafc !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; min-height: 40px !important; } .appt-modal-actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; } .appt-btn-cancel { color: #64748b !important; font-weight: 600 !important; text-decoration: none !important; padding: 6px 16px !important; border-radius: 30px !important; transition: all 0.2s ease !important; } .appt-btn-cancel:hover { background: #f1f5f9 !important; color: #1e293b !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 9: Billing Label */ /* ═══════════════════════════════════════════════════════════ */ .appt-price-label { font-size: 0.95rem !important; font-weight: 700 !important; color: #2b5797 !important; padding: 0 !important; } .appt-price-container { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 12px 16px !important; min-height: 48px !important; display: flex !important; align-items: center !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 10: Typography (Inter) */ /* ═══════════════════════════════════════════════════════════ */ #pageAppointmentDetails, #pageAppointmentNotes, #pageAppointmentFollow, #pageTaskDetails, #pageTaskNotes, #pageTaskHistory, #pageTicketDetails, #pageTicketTimeLine, #pageTicketActivities, #pageTicketFiles, #pageTicketHistory, #pageMassMailingDetails, #pageMassMailingFilters, #pageMassMailingMapping, #pageMassMailingMain, #pageMassMailingVerify, #pageMassMailingStats, #pageMassMailingTracking, #pageMassMailingConfig, #pageVendorDetails, #pageVendorAddress, #pageVendorBank, #pageVendorNotes, #pageVendorMap, #pageVendorContacts, #pageVendorActivities, #pageVendorDocuments, #pageVendorFiles, #pageVendorHistory { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 11: Nav Block Scoping (65px symmetry) */ /* Same as mass mailing's 130px unified block */ /* ═══════════════════════════════════════════════════════════ */ /* Notices table overflow handling */ .notices th, .notices td { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 200px !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 12: Spacing Utilities */ /* ═══════════════════════════════════════════════════════════ */ .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mb-30 { margin-bottom: 30px !important; } /* ═══════════════════════════════════════════════════════════ */ /* SECTION 13: Responsive */ /* ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* --- Quick Actions Card Responsiveness --- */ .appt-quick-actions { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; padding: 20px !important; } .appt-qa-header { width: 100% !important; margin-bottom: 5px !important; } .appt-qa-buttons { flex-direction: column !important; width: 100% !important; gap: 8px !important; } .appt-qa-btn { width: 100% !important; justify-content: flex-start !important; padding: 12px 16px !important; } /* --- Grid Stacking --- */ .appt-col-4, .appt-col-12 { flex: 1 1 100% !important; max-width: 100% !important; margin-bottom: 20px !important; } .appt-col-4:last-child, .appt-col-12:last-child { margin-bottom: 0 !important; } .v2-body-container { padding: 0 0px !important; } /* ══ LEAD LIST MOBILE ══ */ /* Lead header */ #pageLead .v2-list-header { height: 52px !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 12px !important; background: #ffffff !important; border-radius: 12px 12px 0 0 !important; border-bottom: 1px solid #e2e8f0 !important; } #pageLead .v2-list-header .v2-header-icon { width: 28px !important; height: 28px !important; } #pageLead .v2-list-header .nav-title { font-size: 0.95rem !important; font-weight: 800 !important; color: #2b5797 !important; flex: 1 1 auto !important; margin: 0 !important; } #pageLead .v2-list-header .nav-add-button { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #f59e0b !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important; } /* Lead tabs */ #pageLead .cd-tab-filter-wrapper { border-radius: 0 0 12px 12px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-top: none !important; margin: 0 0 10px 0 !important; } #pageLead .pt-10 { padding-top: 0 !important; } #pageLead .activities-type-tabs { display: flex !important; gap: 6px !important; padding: 8px 12px !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } #pageLead .activities-type-tabs::-webkit-scrollbar { display: none; } #pageLead .activities-type-tabs .leadStatus { height: 30px !important; padding: 0 12px !important; border-radius: 30px !important; font-weight: 600 !important; font-size: 0.75rem !important; color: #475569 !important; display: inline-flex !important; align-items: center !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; white-space: nowrap !important; flex-shrink: 0 !important; text-decoration: none !important; } #pageLead .activities-type-tabs .leadStatus.selectedFilter { background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%) !important; color: #ffffff !important; border-color: #2b5797 !important; } /* Lead search */ #pageLead .v2-search-wrapper { padding: 8px 12px !important; background: #ffffff !important; } #pageLead .v2-search-wrapper input { width: 100% !important; padding: 8px 0 !important; font-size: 0.85rem !important; border: none !important; border-bottom: 2px solid #e2e8f0 !important; border-radius: 0 !important; box-sizing: border-box !important; } /* Filter: listPremium.css handles responsive sidebar → FAB transition */ /* (no display:none here — that blocks the slide-over panel) */ /* Gallery full width */ #pageLead .cd-gallery { width: 100% !important; padding-right: 0 !important; } /* Content card */ #pageLead .v2-content-card { background: #ffffff !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; overflow: hidden !important; } /* Layout */ #pageLead .page-region-content { min-height: auto !important; } #pageLead #listview_leads { height: calc(100vh - 260px) !important; overflow-y: auto !important; } } /* --- JQTE Simplified Toolbar for Mobile --- */ @media (max-width: 768px) { /* Only keeping essential tools for small screens */ .jqte_tool_1, .jqte_tool_2, .jqte_tool_3, .jqte_tool_6, .jqte_tool_9, .jqte_tool_10, .jqte_tool_11, .jqte_tool_12, .jqte_tool_13, .jqte_tool_14, .jqte_tool_15, .jqte_tool_16, .jqte_tool_18, .jqte_tool_20, .jqte_tool_21 { display: none !important; } .jqte_toolbar { justify-content: center !important; padding: 10px !important; background: #f1f5f9 !important; } } /* ═══════════════════════════════════════════════════════════ TASK — CO-OWNER ZONE + PILLS (compact inline bar) ═══════════════════════════════════════════════════════════ */ .task-coowners-zone { background: #f8fafc; border: 1px solid #e9edf2; border-radius: 10px; padding: 10px 14px; } .task-coowners-label { display: block; font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 8px; letter-spacing: 0.3px; text-transform: uppercase; } .task-owners-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .task-owner-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .task-owner-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px; font-size: 11px; color: #475569; line-height: 1; white-space: nowrap; transition: border-color 0.15s, box-shadow 0.15s; cursor: default; } .task-owner-pill:hover { border-color: #94a3b8; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .task-owner-primary { border-color: #a78bfa; background: linear-gradient(135deg, #f5f3ff, #ede9fe); } .task-owner-primary:hover { border-color: #8b5cf6; } .task-owner-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-size: 9px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.3px; } .task-owner-primary .task-owner-avatar { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 0 0 2px #ddd6fe; } .task-owner-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .task-owner-x { color: #cbd5e1; font-size: 13px; cursor: pointer; line-height: 1; padding: 0 1px; margin-left: 1px; transition: color 0.15s; display: none; } .task-owner-pill:hover .task-owner-x { display: inline; } .task-owner-x:hover { color: #ef4444; } /* "+" add button styled as compact select */ .task-owner-add-select { appearance: none; -webkit-appearance: none; padding: 3px 8px; border: 1px dashed #cbd5e1; border-radius: 20px; background: #fafbfc; color: #64748b; font-size: 11px; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 28px; text-align: center; } .task-owner-add-select:hover { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; } .task-owner-add-select:focus { outline: none; border-color: #3b82f6; } /* Pending (not yet saved) pill */ .task-owner-pending { border-style: dashed; opacity: 0.7; } /* Read-only mode: hide interactive elements */ .task-messages-readonly .task-message-input-bar { display: none; } .task-messages-readonly .task-message-actions { display: none !important; } .task-messages-readonly .task-msg-row-own:hover .task-message-actions { display: none !important; } .task-coowners-readonly .task-owner-add-select { display: none; } .task-coowners-readonly .task-owner-x { display: none !important; } /* ═══════════════════════════════════════════════════════════ TASK — SHARED NOTES / CONVERSATION (Premium Chat Design) ═══════════════════════════════════════════════════════════ */ .task-conversation-container { display: flex; flex-direction: column; height: calc(100vh - 240px); min-height: 350px; max-height: 700px; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 12px; overflow: hidden; } .task-messages-list { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; } .task-messages-list::-webkit-scrollbar { width: 5px; } .task-messages-list::-webkit-scrollbar-track { background: transparent; } .task-messages-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .task-messages-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Empty state */ .task-messages-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #94a3b8; text-align: center; padding: 40px 20px; } .task-messages-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; } .task-messages-empty p { margin: 0; font-size: 14px; font-weight: 500; } .task-messages-empty-sub { font-size: 12px !important; color: #cbd5e1; margin-top: 4px !important; } /* ── Date separators ── */ .task-messages-date-sep { display: flex; align-items: center; gap: 12px; padding: 16px 0 8px; } .task-messages-date-sep::before, .task-messages-date-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #dde3ec, transparent); } .task-messages-date-sep span { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; } /* ══════════════════════════════════════ MESSAGE ROW — shared layout ══════════════════════════════════════ */ .task-msg-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px; max-width: 80%; } /* ── Own messages: left side (with gradient) ── */ .task-msg-row-own { margin-right: auto; } .task-msg-avatar-own { box-shadow: none; } .task-msg-author-own { font-weight: 600; font-size: 12px; color: rgba(255, 255, 255, 0.85); } .task-msg-bubble-own { background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); color: #fff; padding: 10px 14px; border-radius: 18px 18px 18px 4px; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25); max-width: 100%; word-wrap: break-word; } .task-msg-body-own { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; } .task-msg-time-own { font-size: 10px; opacity: 0.65; } .task-msg-time-own em { font-style: italic; } /* ── Others' messages: left side ── */ .task-msg-row-other { margin-right: auto; } .task-msg-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.3px; } .task-msg-bubble-other { background: #fff; padding: 10px 14px; border-radius: 18px 18px 18px 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); max-width: 100%; word-wrap: break-word; } .task-msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .task-msg-author { font-weight: 600; font-size: 12px; color: #6366f1; } .task-msg-body-other { font-size: 13.5px; line-height: 1.45; color: #334155; white-space: pre-wrap; } .task-msg-time { font-size: 10px; color: #94a3b8; } .task-msg-time em { font-style: italic; } /* ── Actions (edit/delete) — visible on hover of own messages ── */ .task-message-actions { display: none; gap: 4px; flex-shrink: 0; align-self: center; } .task-msg-row-own:hover .task-message-actions { display: flex; } .task-message-action-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.04); border: none; border-radius: 50%; cursor: pointer; font-size: 13px; color: #64748b; transition: background 0.15s, color 0.15s, transform 0.1s; } .task-message-action-btn:hover { background: rgba(0, 0, 0, 0.08); color: #334155; transform: scale(1.12); } .task-msg-delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } /* Input bar */ .task-message-input-bar { border-top: 1px solid #e2e8f0; padding: 14px 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); } .task-message-input-row { display: flex; gap: 10px; align-items: flex-end; } .task-message-textarea { flex: 1; resize: none; min-height: 50px; max-height: 150px; overflow-y: auto; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 14px; font-size: 13px; line-height: 1.5; font-family: inherit; background: #fafbfc; transition: border-color 0.2s, box-shadow 0.2s; } .task-message-textarea:focus { outline: none; border-color: #6366f1; background: #fff; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .task-message-send-btn { flex-shrink: 0; padding: 10px 20px; border-radius: 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: none; box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3); transition: transform 0.15s, box-shadow 0.15s; min-height: 42px; } .task-message-send-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4); } .task-message-send-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3); } .task-message-options { margin-top: 8px; padding-left: 4px; } .task-notify-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; cursor: pointer; transition: color 0.15s; } .task-notify-label:hover { color: #475569; } .task-notify-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: #6366f1; } /* ═══════════════════════════════════════════════════════════ COLLAPSIBLE SCHEDULE CARD (native
/) ═══════════════════════════════════════════════════════════ */ .task-schedule-summary { cursor: pointer; user-select: none; list-style: none; } .task-schedule-summary::-webkit-details-marker { display: none; } .task-schedule-summary::after { content: "▸"; margin-left: auto; font-size: 14px; color: #94a3b8; transition: transform 0.2s ease; display: inline-block; } .task-schedule-details[open]>.task-schedule-summary::after { transform: rotate(90deg); } .task-schedule-summary:hover { opacity: 0.85; } .task-schedule-optional { font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 6px; } /* ═══════════════════════════════════════════════════════════ FILE DROP ZONE + FILE LIST ═══════════════════════════════════════════════════════════ */ .file-drop-zone { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.2s ease; background: #f8fafc; } .file-drop-zone:hover { border-color: var(--v2-brand-blue, #2b5797); background: #eff6ff; } .file-drop-zone-active { border-color: var(--v2-brand-blue, #2b5797) !important; background: #dbeafe !important; transform: scale(1.01); } .file-drop-icon { font-size: 2rem; color: #94a3b8; display: block; margin-bottom: 8px; } .file-drop-zone:hover .file-drop-icon, .file-drop-zone-active .file-drop-icon { color: var(--v2-brand-blue, #2b5797); } .file-drop-text { color: #64748b; font-size: 0.9rem; margin: 0; } .file-drop-or { color: #94a3b8; font-size: 0.8rem; } .file-drop-limits { margin: 8px 0 0; color: #94a3b8; font-size: 0.72rem; letter-spacing: 0.02em; } .file-date-col { width: 130px; text-align: center; } .file-date-cell { color: #64748b; font-size: 0.82rem; white-space: nowrap; text-align: center; } .file-delete-cell { width: 40px; text-align: center; } #filesTable .fileName { cursor: pointer; padding-left: 10px; } #filesTable .fileName:hover { color: var(--v2-brand-blue, #2b5797); text-decoration: underline; } /* ═══════════════════════════════════════════════════════ */ /* FILE CARDS — Premium List */ /* ═══════════════════════════════════════════════════════ */ .file-card-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .file-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; transition: all 0.2s ease; } .file-card:hover { background: #f1f5f9; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .file-card-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 10px; font-size: 16px; gap: 1px; } .file-card-badge i { font-size: 16px; } .file-card-ext { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .file-card-body { flex: 1; min-width: 0; cursor: pointer; } .file-card-name { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-card-body:hover .file-card-name { color: var(--v2-brand-blue, #2b5797); text-decoration: underline; } .file-card-meta { font-size: 12px; color: #94a3b8; margin-top: 1px; } .file-card-delete { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 8px; border: none; background: transparent; color: #94a3b8; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .file-card-delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } /* ═══════════════════════════════════════════════════════════ MOBILE RESPONSIVE — Conversation + Owner Pills ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .task-conversation-container { height: calc(100vh - 200px); min-height: 280px; max-height: none; } .task-messages-list { padding: 12px; } .task-msg-row { max-width: 90%; } .task-msg-avatar { width: 26px; height: 26px; font-size: 10px; } .task-message-input-bar { padding: 10px 12px; } .task-message-textarea { font-size: 14px; min-height: 44px; } .task-message-send-btn { padding: 8px 14px; min-height: 38px; } /* Always show actions on mobile (no hover) */ .task-message-actions { display: flex; } .task-owner-pills { gap: 4px; } .task-owner-pill { font-size: 10px; } /* Always show × on mobile (no hover) */ .task-owner-x { display: inline; } } /* ================================================================ Attendee avatar images (replaces inline styles from appointment.js) ================================================================ */ .attendee-avatar { float: left; margin: 0 10px 0 0; } .attendee-avatar-photo { border: 1px rgb(101, 140, 143) solid; } .attendee-avatar-default { width: 32px; height: 32px; } /* ═══════════════════════════════════════════════════════ */ /* HISTORY TIMELINE — Premium Cards */ /* ═══════════════════════════════════════════════════════ */ .history-timeline { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } .history-date-sep { display: flex; align-items: center; gap: 12px; padding: 8px 0 4px; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; } .history-date-sep::before, .history-date-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #e2e8f0, transparent); } .history-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.2s ease; } .history-card:hover { background: #f1f5f9; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateX(2px); } .history-card-badge { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; border-radius: 10px; font-size: 16px; font-weight: 700; } .history-card-body { flex: 1; min-width: 0; } .history-card-title { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .history-card-meta { display: flex; gap: 12px; margin-top: 2px; font-size: 12px; color: #94a3b8; } .history-card-meta i { margin-right: 3px; font-size: 11px; } .history-card-arrow { font-size: 18px; color: #cbd5e1; font-weight: 300; transition: color 0.2s; } .history-card:hover .history-card-arrow { color: #3b82f6; } /* ═══════════════════════════════════════════════════════ */ /* HISTORY DETAIL MODAL — Premium Redesign */ /* ═══════════════════════════════════════════════════════ */ .history-detail-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .history-detail-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; } .history-detail-row:last-child { border-bottom: none; } .history-detail-label { min-width: 110px; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; } .history-detail-value { font-size: 13px; color: #1e293b; word-break: break-word; } .history-detail-action-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .history-detail-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e8f0; } .history-detail-section-title { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .history-detail-field-card { display: flex; padding: 8px 12px; border-radius: 8px; background: #f8fafc; margin-bottom: 6px; } .history-detail-field-label { min-width: 140px; font-size: 12px; font-weight: 600; color: #475569; } .history-detail-field-value { font-size: 13px; color: #1e293b; flex: 1; word-break: break-word; } .history-detail-description-box { padding: 10px 14px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px; color: #334155; line-height: 1.5; max-height: 200px; overflow-y: auto; margin-top: 6px; } /* Modal — title visibility & size constraint */ #modalActionHistory { max-width: 560px; text-align: left; } #modalActionHistory h2 { color: #1e293b; font-size: 16px; font-weight: 700; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0; } #modalActionHistory #tableHistoryDetails { max-height: 50vh; overflow-y: auto; padding-right: 4px; } #modalActionHistory .remodal-confirm { margin-top: 12px; } @media (max-width: 768px) { .history-card { padding: 8px 10px; gap: 10px; } .history-card-badge { width: 30px; height: 30px; min-width: 30px; font-size: 14px; } .history-card-title { font-size: 12px; } .history-card-meta { flex-direction: column; gap: 2px; } .history-detail-row { flex-direction: column; gap: 2px; } .history-detail-field-card { flex-direction: column; gap: 2px; } } /* ═══════════════════════════════════════════════════════════════ Extracted inline styles — taskDetails.html zero-inline cleanup ═══════════════════════════════════════════════════════════════ */ /* Spinner shown on send-message button while saving */ @keyframes taskBtnSpin { to { transform: rotate(360deg); } } .task-btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: taskBtnSpin 0.6s linear infinite; vertical-align: middle; } /* Optimistic (unsaved) message row */ .task-msg-optimistic { opacity: 0.6; } /* Schedule grid top padding */ .appt-grid-padded { padding-top: 15px; } /* ═══════════════════════════════════════════════════════════════ Extracted inline styles — phoneCall.html zero-inline cleanup ═══════════════════════════════════════════════════════════════ */ /* Search results container (was inline height:350px;overflow:auto) */ .appt-search-results { height: 350px; overflow: auto; } /* ═══════════════════════════════════════════════════════════════ V2 BOTTOM NAVIGATION BAR Scrollable pill-style bottom nav for detail pages ═══════════════════════════════════════════════════════════════ */ /* [STYLES MOVED TO mobileMenu.css] */ /* ── "Others" Slide-up Panel ── */ .v2-nav-more-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 910; background: #ffffff; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15); padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); max-height: 60vh; overflow-y: auto; } .v2-nav-more-panel.open { transform: translateY(0); } .v2-nav-more-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; } .v2-nav-more-panel-header h4 { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0; } .v2-nav-more-close { width: 30px; height: 30px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; font-size: 16px; color: #64748b; transition: all 0.15s ease; } .v2-nav-more-close:hover { background: #e2e8f0; color: #1e293b; } .v2-nav-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .v2-nav-more-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 8px; border-radius: 12px; background: #f8fafc; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; } .v2-nav-more-item:hover { background: #eef2ff; border-color: #c7d2fe; } .v2-nav-more-item i { font-size: 22px; color: #2b5797; margin-bottom: 6px; } .v2-nav-more-item span { font-size: 11px; font-weight: 600; color: #475569; text-align: center; white-space: nowrap; } .v2-nav-more-item.danger i { color: #ef4444; } .v2-nav-more-item.danger span { color: #ef4444; } /* Backdrop overlay */ .v2-nav-more-backdrop { position: fixed; inset: 0; z-index: 905; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .v2-nav-more-backdrop.visible { opacity: 1; pointer-events: auto; } /* Bottom padding on main content when nav is present */ .has-bottom-nav .page-region-content { padding-bottom: 80px !important; } /* [RESPONSIVE RULES MOVED TO mobileMenu.css] */ /* ═══════════════════════════════════════════════════════════════ V2 MOBILE MAIN MENU — Full "More" Panel Used on menu.html as the primary mobile navigation ═══════════════════════════════════════════════════════════════ */ /* ── Mobile Menu Dashboard Cards ── */ .v2-menu-dashboard { padding: 15px; padding-bottom: 85px; } .v2-menu-welcome { background: linear-gradient(135deg, #2b5797 0%, #1e3a6e 100%); border-radius: 16px; padding: 20px; color: #ffffff; margin-bottom: 15px; display: flex; align-items: center; gap: 15px; } .v2-menu-welcome-avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); object-fit: cover; } .v2-menu-welcome-text h3 { margin: 0; font-size: 16px; font-weight: 700; color: #ffffff; } .v2-menu-welcome-text p { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.7); } /* Quick Stats Row */ .v2-menu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; } .v2-menu-stat-card { background: #ffffff; border-radius: 12px; padding: 12px 8px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.2s ease; } .v2-menu-stat-card:active { transform: scale(0.96); background: #f8fafc; } .v2-menu-stat-card i { font-size: 22px; color: #2b5797; display: block; margin-bottom: 6px; } .v2-menu-stat-card .stat-count { font-size: 18px; font-weight: 800; color: #1e293b; display: block; line-height: 1; margin-bottom: 4px; } .v2-menu-stat-card .stat-label { font-size: 9px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Full Screen "More" Panel ── */ /* [PANEL STYLES MOVED TO mobileMenu.css] */ /* ═══════════════════════════════════════════════════════════ QUICK NOTES — Premium Messaging Bubble Design (LEFT aligned) ═══════════════════════════════════════════════════════════ */ /* Container for the bubble in read mode */ .qnotes-bubble-wrap { padding: 4px 0 8px; } /* ═══════════════════════════════════════════════════════ NOTES ICON — VIOLET on ALL sections with class .qnotes-card A single universal rule covers Quick Notes + Internal Notes tabs on every entity page (Account, Contact, Lead, Task, Appointment…) ══════════════════════════════════════════════════════ */ .qnotes-card .config-section-title i { color: #6366f1 !important; background: rgba(99, 102, 241, 0.12) !important; border-radius: 8px !important; } /* Row wrapper */ .qnotes-msg-row { width: 100% !important; } /* The bubble — full width, left-aligned, bubble style */ .qnotes-bubble { display: block !important; width: 100% !important; background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important; color: #fff !important; padding: 14px 18px !important; border-radius: 4px 18px 18px 18px !important; box-shadow: 0 4px 18px rgba(99, 102, 241, 0.22) !important; word-wrap: break-word !important; word-break: break-word !important; box-sizing: border-box !important; } /* Body text — renders jqte HTML output cleanly inside the bubble */ .qnotes-body { font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; color: #fff !important; } /* Neutralize

margins from jqte inside the bubble */ .qnotes-body p { margin: 0 0 4px 0 !important; color: #fff !important; } .qnotes-body p:last-child { margin-bottom: 0 !important; } .qnotes-body ul, .qnotes-body ol { margin: 4px 0 !important; padding-left: 20px !important; color: #fff !important; } .qnotes-body li { color: #fff !important; } .qnotes-body strong, .qnotes-body em, .qnotes-body u, .qnotes-body a { color: #fff !important; } /* Force ALL child elements white — overrides inline style="color:..." from jqte */ .qnotes-body * { color: #fff !important; } /* Empty state */ .qnotes-empty { display: flex; align-items: center; gap: 8px; padding: 16px 18px; color: #94a3b8; font-size: 13px; background: #f8fafc; border: 1.5px dashed #e2e8f0; border-radius: 12px; } .qnotes-empty i { font-size: 14px; opacity: 0.5; } /* Edit mode wrapper — jqte lives here, styled cleanly */ .qnotes-edit-wrap .jqte { border: 1.5px solid #e2e8f0 !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .qnotes-edit-wrap .jqte:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important; } .qnotes-edit-wrap .jqte_tool { background: #f8fafc !important; } .qnotes-edit-wrap .jqte_editor { min-height: 90px !important; padding: 12px 16px !important; font-size: 14px !important; line-height: 1.55 !important; color: #1e293b !important; background: #fff !important; } /* Document Options Preview Polish */ #documentHeader table td, #documentHeader table tr { border: none !important; } #documentsOptions .cd-main-content { margin-top: 15px; } /* ── Modern Document Templates Gallery (V2) ── */ #auto-loop { display: grid !important; grid-template-columns: repeat(auto-fill, 180px) !important; justify-content: start !important; gap: 16px !important; padding: 15px 10px !important; } #auto-loop .gallery { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; overflow: hidden !important; transition: all 0.2s ease !important; display: flex !important; flex-direction: column !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important; margin: 0 !important; } #auto-loop .gallery:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important; transform: translateY(-2px) !important; border-color: #cbd5e1 !important; } #auto-loop .gallery a { order: 1 !important; display: block !important; width: 100% !important; height: auto !important; background: #f8fafc !important; border-bottom: 1px solid #f1f5f9 !important; } #auto-loop .gallery img.imageTemplate, #auto-loop .gallery img { width: 100% !important; height: auto !important; display: block !important; } #auto-loop .gallery span.white { display: block !important; order: 2 !important; padding: 12px 14px 4px 14px !important; margin: 0 !important; font-size: 0.9rem !important; font-weight: 600 !important; color: #1e293b !important; background: #ffffff !important; text-align: left !important; border-bottom: none !important; } #auto-loop .gallery .desc { order: 3 !important; padding: 6px 14px 16px 14px !important; margin-top: auto !important; text-align: center !important; } #auto-loop .gallery .btnTemplate { width: auto !important; padding: 8px 18px !important; background: #3b82f6 !important; color: white !important; border: none !important; border-radius: 6px !important; font-size: 0.85rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; } #auto-loop .gallery .btnTemplate:hover { background: #2563eb !important; } /* ═══════════════════════════════════════════════════════════════ DOCUMENT OPTIONS V2 - Layout and Spacing Fixes ═══════════════════════════════════════════════════════════════ */ /* Fix the large gap and add rounded corners */ #documentsOptions .cd-filter { background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; border: 1px solid #e2e8f0 !important; overflow: hidden !important; width: 250px !important; padding-top: 20px !important; } #documentsOptions .cd-gallery { background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; border: 1px solid #e2e8f0 !important; overflow: hidden !important; width: calc(100% - 270px) !important; /* 250px + 20px gap */ float: right !important; padding: 20px !important; margin-top: 0 !important; } /* Remove unwanted horizontal lines in sidebar */ #documentsOptions .cd-filter-block { border-bottom: none !important; } /* Fix "Factura proforma" header pushed down by aligning top */ #documentsOptions #documentHeader > table > tbody > tr > td { vertical-align: top !important; } #documentsOptions #documentHeader > table > tr > td { vertical-align: top !important; } /* Force titles to be large and bold */ #documentsOptions .docopt-doc-title { font-size: 24px !important; font-weight: bold !important; } #documentsOptions .docopt-doc-date { font-size: 14px !important; font-weight: bold !important; } /* ═══════════════════════════════════════════════════════════ */ /* GLOBAL MOBILE OVERRIDES FOR ENTITY CARDS */ /* Must be here to beat source-order specificity of line 22 */ /* ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Beat #pageAccountDetails .v2-card (Specificity 1,1,0) */ .cd-main-content [id^="page"] .v2-card, body [id^="page"] .v2-card, .cd-main-content .v2-card { padding: 15px !important; width: auto !important; box-sizing: border-box !important; margin: 0 10px 12px 10px !important; overflow: hidden !important; } /* Fix auxiliary divs like Select All that stick out of cards on mobile */ .cd-main-content [id^="page"] .divContactActions, body [id^="page"] .divContactActions { margin: 0 15px 8px 25px !important; } /* Beat #pageAccountDetails .v2-input (Specificity 1,1,0) */ .cd-main-content [id^="page"] .v2-input, body [id^="page"] .v2-input, .cd-main-content .v2-input { width: 100% !important; box-sizing: border-box !important; } .v2-body-container { padding: 0 !important; width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } } /* ═══════════════════════════════════════════════════════════ */ /* GLOBAL BUGFIX: Legacy Metro UI .frame padding */ /* Removed all horizontal padding to let 10px margins breathe */ /* Enforce strict horizontal bounds to match dashboard math */ /* ═══════════════════════════════════════════════════════════ */ .page-control .frames .frame { padding: 12px 0 !important; overflow-x: hidden !important; width: 100% !important; box-sizing: border-box !important; }