/**
* RealtyDirector X AI - Admin Styles
* Modern Gradient Design
*/
/* ============================================
LOGO STYLES
============================================ */
/* Main header row - everything in one line on desktop */
.recrm-page-header-row {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
flex-wrap: wrap;
}
/* Logo styling */
.recrm-header-logo {
max-width: 200px;
height: auto;
display: block;
flex-shrink: 0; /* Don't let logo shrink */
border-radius: 6px; /* Slightly rounded corners */
}
/* Page title - let it grow but not too much */
.recrm-page-header-row .wp-heading-inline {
margin: 0;
flex-shrink: 0; /* Don't shrink the title */
}
/* Header actions (agent badge, button) - push to right */
.recrm-page-header-row .recrm-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-left: auto; /* Push to the right end */
}
/* Add New Interest button stays in line */
.recrm-page-header-row .page-title-action {
margin-left: auto; /* Push to right if no other elements */
}
/* Mobile logo adjustments */
@media (max-width: 782px) {
.recrm-header-logo {
max-width: 80px; /* Smaller logo on mobile to fit with title */
height: auto;
}
.recrm-page-header-row {
flex-direction: row; /* Keep logo and title in same row */
align-items: center;
gap: 10px;
flex-wrap: wrap; /* Allow actions to wrap to next line */
}
.recrm-page-header-row .wp-heading-inline {
font-size: 16px; /* Smaller font to fit with logo */
text-align: left;
flex: 1; /* Take remaining space */
min-width: 0; /* Allow text to shrink */
line-height: 1.2;
}
.recrm-page-header-row .recrm-header-actions {
width: 100%; /* Full width - forces wrap to new line */
margin-left: 0;
justify-content: center;
flex-basis: 100%; /* Force to new line */
}
.recrm-page-header-row .page-title-action {
margin-left: 0;
}
}
/* ==========================================================================
CSS Variables - Modern Color Scheme
========================================================================== */
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--accent-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--warning-gradient: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
--info-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--page-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--card-bg: rgba(255, 255, 255, 0.95);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
}
/* ==========================================================================
Layout
========================================================================== */
.recrm-leads-page {
margin: 20px 20px 0 0;
min-height: 100vh;
background: var(--page-gradient);
padding: 20px;
border-radius: var(--radius-sm);
}
/* Disable heavy gradient on mobile portrait to prevent flashing/black screen */
@media screen and (max-width: 782px) and (orientation: portrait) {
/* Force GPU acceleration off for problematic elements */
.recrm-leads-page {
background: #667eea;
background-image: none;
min-height: auto;
padding: 5px; /* Reduced from 10px to make cards wider */
margin: 0;
border-radius: 0;
will-change: auto;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Optimize scrolling performance */
html, body {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
/* Prevent layout shifts */
.wrap {
contain: layout style;
}
}
/* Page Title - White Text */
.recrm-leads-page h1,
.recrm-leads-page .wp-heading-inline,
.recrm-frontend-dashboard h1,
.recrm-frontend-dashboard .wp-heading-inline {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: 600;
font-size: 21px !important; /* Reduced from default 23px */
}
/* Header line separator */
.recrm-leads-page .wp-header-end {
border-color: rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
Filters Section - Modern Card Style
========================================================================== */
.recrm-filters-section {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: none;
box-shadow: var(--shadow-lg);
padding: 16px; /* Reduced from 20px to save horizontal space */
margin: 20px 0;
border-radius: var(--radius-lg);
}
/* Disable heavy effects on mobile portrait to prevent GPU issues and black screen */
@media screen and (max-width: 782px) and (orientation: portrait) {
.recrm-filters-section,
.recrm-table-container,
.recrm-modal-header,
.recrm-detail-section {
background: #ffffff;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.recrm-modal-overlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(0, 0, 0, 0.5);
}
/* Disable hover effects that cause transforms on mobile */
.recrm-filters-section:hover,
.recrm-table-container:hover,
.recrm-detail-section:hover {
transform: none !important;
box-shadow: var(--shadow-lg) !important;
}
/* Reduce box shadows for better performance */
.recrm-filters-section,
.recrm-table-container,
.recrm-detail-section {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
}
/* Only apply hover effects on desktop */
@media (hover: hover) and (pointer: fine) {
.recrm-filters-section {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.recrm-filters-section:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-2px);
}
}
.recrm-filters-row {
display: flex;
flex-wrap: wrap;
gap: 8px; /* Reduced from 10px to help fit Clear Filter button in same row */
align-items: center;
}
.recrm-filter {
flex: 1 1 auto;
/* min-width removed - set per screen size in media queries */
}
/* Desktop only - set min-width for filter containers */
@media (min-width: 783px) {
.recrm-filter {
min-width: 120px; /* Reduced from 150px to fit Clear Filter button in same row */
}
}
.recrm-filter input[type="text"],
.recrm-filter select,
#recrm-search,
#recrm-filter-priority,
#recrm-filter-pipeline,
#recrm-filter-stage,
#recrm-filter-agent {
width: 100%; /* Full width by default, constrained on desktop only via media query */
}
/* ==========================================================================
Bulk Actions
========================================================================== */
.recrm-bulk-actions {
margin: 15px 0;
display: flex;
gap: 12px;
align-items: center;
}
/* Match clean dropdown styling for bulk actions and filters with high specificity */
#recrm-bulk-action,
.recrm-bulk-actions select#recrm-bulk-action,
#recrm-filter-priority,
select#recrm-filter-priority,
#recrm-filter-pipeline,
select#recrm-filter-pipeline,
#recrm-filter-stage,
select#recrm-filter-stage,
#recrm-filter-agent,
select#recrm-filter-agent,
#recrm-search,
input#recrm-search,
.recrm-frontend-dashboard #recrm-bulk-action,
.recrm-frontend-dashboard .recrm-bulk-actions select#recrm-bulk-action,
.recrm-frontend-dashboard #recrm-filter-priority,
.recrm-frontend-dashboard select#recrm-filter-priority,
.recrm-frontend-dashboard #recrm-filter-pipeline,
.recrm-frontend-dashboard select#recrm-filter-pipeline,
.recrm-frontend-dashboard #recrm-filter-stage,
.recrm-frontend-dashboard select#recrm-filter-stage,
.recrm-frontend-dashboard #recrm-filter-agent,
.recrm-frontend-dashboard select#recrm-filter-agent,
.recrm-frontend-dashboard #recrm-search,
.recrm-frontend-dashboard input#recrm-search {
padding: 7px 10px !important; /* Reduced from 8px 12px to save space */
height: auto !important;
line-height: 1.5 !important;
font-size: 12px !important; /* Reduced from 14px */
border-radius: var(--radius-sm) !important;
border: 1px solid #dcdcde !important;
background: #fff !important;
color: #1e293b !important;
transition: all 0.2s ease !important;
box-shadow: none !important;
}
/* Desktop only - constrain width */
@media (min-width: 783px) {
#recrm-filter-priority,
select#recrm-filter-priority,
#recrm-filter-pipeline,
select#recrm-filter-pipeline,
#recrm-filter-stage,
select#recrm-filter-stage,
#recrm-filter-agent,
select#recrm-filter-agent,
#recrm-search,
input#recrm-search {
max-width: 180px !important; /* Reduced from 240px to fit Clear Filter button in same row */
min-width: 150px !important; /* Reduced from 200px */
}
/* Shortcode view - apply same desktop constraints */
.recrm-frontend-dashboard #recrm-filter-priority,
.recrm-frontend-dashboard select#recrm-filter-priority,
.recrm-frontend-dashboard #recrm-filter-pipeline,
.recrm-frontend-dashboard select#recrm-filter-pipeline,
.recrm-frontend-dashboard #recrm-filter-stage,
.recrm-frontend-dashboard select#recrm-filter-stage,
.recrm-frontend-dashboard #recrm-filter-agent,
.recrm-frontend-dashboard select#recrm-filter-agent,
.recrm-frontend-dashboard #recrm-search,
.recrm-frontend-dashboard input#recrm-search {
max-width: 180px !important;
min-width: 150px !important;
}
/* Shortcode view - filter container min-width */
.recrm-frontend-dashboard .recrm-filter {
min-width: 120px;
}
/* Shortcode view - filter row gap */
.recrm-frontend-dashboard .recrm-filters-row {
gap: 8px;
}
/* Shortcode view - section padding */
.recrm-frontend-dashboard .recrm-filters-section {
padding: 16px;
}
}
/* Search field specific */
#recrm-search,
input#recrm-search {
cursor: text !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
/* Dropdowns specific */
#recrm-bulk-action,
.recrm-bulk-actions select#recrm-bulk-action,
#recrm-filter-priority,
select#recrm-filter-priority,
#recrm-filter-pipeline,
select#recrm-filter-pipeline,
#recrm-filter-stage,
select#recrm-filter-stage,
#recrm-filter-agent,
select#recrm-filter-agent {
cursor: pointer !important;
appearance: auto !important;
-webkit-appearance: menulist !important;
-moz-appearance: menulist !important;
}
#recrm-bulk-action:hover,
.recrm-bulk-actions select#recrm-bulk-action:hover,
#recrm-filter-priority:hover,
select#recrm-filter-priority:hover,
#recrm-filter-pipeline:hover,
select#recrm-filter-pipeline:hover,
#recrm-filter-stage:hover:not(:disabled),
select#recrm-filter-stage:hover:not(:disabled),
#recrm-filter-agent:hover,
select#recrm-filter-agent:hover,
#recrm-search:hover,
input#recrm-search:hover {
border-color: #8c8f94 !important;
}
#recrm-bulk-action:focus,
.recrm-bulk-actions select#recrm-bulk-action:focus,
#recrm-filter-priority:focus,
select#recrm-filter-priority:focus,
#recrm-filter-pipeline:focus,
select#recrm-filter-pipeline:focus,
#recrm-filter-stage:focus,
select#recrm-filter-stage:focus,
#recrm-filter-agent:focus,
select#recrm-filter-agent:focus,
#recrm-search:focus,
input#recrm-search:focus {
border-color: #2271b1 !important;
outline: 1px solid #2271b1 !important;
outline-offset: -1px !important;
box-shadow: none !important;
}
/* Clear Filters Button - Modern Secondary Style */
#recrm-clear-filters,
button#recrm-clear-filters,
.recrm-frontend-dashboard #recrm-clear-filters,
.recrm-frontend-dashboard button#recrm-clear-filters {
padding: 8px 16px !important; /* Reduced horizontal padding from 20px to 16px */
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #dcdcde !important;
border-radius: var(--radius-sm) !important;
color: #1e293b !important;
font-size: 12px !important; /* Reduced from 14px */
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: none !important;
height: auto !important;
line-height: 1.5 !important;
}
#recrm-clear-filters::before,
button#recrm-clear-filters::before {
content: '✕';
margin-right: 6px;
font-weight: bold;
}
#recrm-clear-filters:hover,
button#recrm-clear-filters:hover {
border-color: #8c8f94 !important;
background: #fff !important;
transform: none !important;
}
#recrm-clear-filters:active,
button#recrm-clear-filters:active {
border-color: #646970 !important;
transform: none !important;
}
/* Match button styling with pipeline action buttons */
#recrm-apply-bulk,
.recrm-bulk-actions button#recrm-apply-bulk,
.recrm-frontend-dashboard #recrm-apply-bulk,
.recrm-frontend-dashboard .recrm-bulk-actions button#recrm-apply-bulk {
padding: 8px 16px !important; /* Reduced horizontal padding from 24px to 16px */
background: var(--primary-gradient) !important;
border: none !important;
border-radius: var(--radius-sm) !important;
color: var(--primary-button-text, #fff) !important; /* Auto text color */
font-size: 12px !important; /* Reduced from 14px */
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
height: auto !important;
line-height: 1.5 !important;
}
#recrm-apply-bulk::before {
content: '✓';
margin-right: 6px;
font-weight: bold;
}
#recrm-apply-bulk:hover,
.recrm-bulk-actions button#recrm-apply-bulk:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
background: linear-gradient(135deg, #7b8ff7 0%, #8a5db8 100%) !important;
}
#recrm-apply-bulk:active,
.recrm-bulk-actions button#recrm-apply-bulk:active {
transform: translateY(0) !important;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}
#recrm-apply-bulk:disabled,
.recrm-bulk-actions button#recrm-apply-bulk:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* ==========================================================================
Leads Table
========================================================================== */
.recrm-table-container {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: none;
box-shadow: var(--shadow-lg);
margin: 20px 0;
border-radius: var(--radius-lg);
overflow: hidden;
transition: all 0.3s ease;
}
.recrm-table-container:hover {
box-shadow: var(--shadow-xl);
}
.recrm-leads-table {
width: 100%;
border-collapse: collapse;
}
.recrm-leads-table {
table-layout: auto;
}
.recrm-leads-table th,
.recrm-leads-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
vertical-align: top;
}
/* Column widths */
.recrm-leads-table th:nth-child(1), /* Checkbox */
.recrm-leads-table td:nth-child(1) {
width: 35px;
min-width: 35px;
max-width: 35px;
}
.recrm-leads-table th:nth-child(2), /* Contact */
.recrm-leads-table td:nth-child(2) {
width: 18%;
min-width: 180px;
}
.recrm-leads-table th:nth-child(3), /* Priority - reduced by 30% */
.recrm-leads-table td:nth-child(3) {
width: 7%;
}
.recrm-leads-table th:nth-child(4), /* Pipeline - reduced by 30% */
.recrm-leads-table td:nth-child(4) {
width: 8.4%;
}
.recrm-leads-table th:nth-child(5), /* Stage */
.recrm-leads-table td:nth-child(5) {
width: 12%;
}
.recrm-leads-table th:nth-child(6), /* Assigned To */
.recrm-leads-table td:nth-child(6) {
width: 12%;
}
.recrm-leads-table th:nth-child(7), /* Last Summary - increased by 60% from Priority & Pipeline */
.recrm-leads-table td:nth-child(7) {
width: 21.6%;
}
.recrm-leads-table th:nth-child(8), /* Actions */
.recrm-leads-table td:nth-child(8) {
width: 10%;
}
.recrm-leads-table th:nth-child(9), /* Actions */
.recrm-leads-table td:nth-child(9) {
width: 11%;
}
/* Pipeline and Assigned To badges - Modern Gradient Style */
.recrm-pipeline-badge {
display: inline-block;
background: var(--accent-gradient);
color: white;
border-radius: var(--radius-sm);
border: none;
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
white-space: normal;
word-wrap: break-word;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
max-width: 100%;
}
.recrm-pipeline-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.recrm-assigned-badge {
display: inline-block;
background: var(--success-gradient);
color: var(--assigned-badge-text, white); /* Auto text color, fallback to white */
border-radius: var(--radius-sm);
border: none;
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
white-space: normal;
word-wrap: break-word;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
max-width: 100%;
}
.recrm-assigned-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Ensure time ago text aligns to the right in all badges */
.recrm-leads-table td[data-label="Stage"] > div,
.recrm-leads-table td[data-label="Assigned To"] > div,
.recrm-leads-table td[data-label="Priority"] > div,
.recrm-leads-table td[data-label="Pipeline"] > div {
direction: ltr !important;
}
/* Time ago spans within badges - ensure right alignment */
.recrm-leads-table td[data-label="Stage"] > div > div:first-child,
.recrm-leads-table td[data-label="Assigned To"] > div > div:first-child {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
/* Explicit styling for time ago text - always on the right */
.recrm-leads-table td[data-label="Stage"] > div > div:first-child > span:last-child,
.recrm-leads-table td[data-label="Assigned To"] > div > div:first-child > span:last-child {
margin-left: auto !important;
padding-left: 8px !important;
text-align: right !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.recrm-leads-table th {
background: #ffffff;
color: #1d2327;
font-weight: 600;
border: none;
padding: 15px 12px;
font-size: 13px;
letter-spacing: 0.3px;
border-bottom: 2px solid rgba(102, 126, 234, 0.2);
}
.recrm-leads-table tbody tr {
transition: all 0.3s ease;
}
.recrm-leads-table tbody tr:hover {
background: rgba(102, 126, 234, 0.05);
transform: scale(1.002);
}
.recrm-leads-table .check-column {
width: 35px;
min-width: 35px;
max-width: 35px;
text-align: center;
}
/* Ensure consistent checkbox column width in shortcode view */
.recrm-frontend-dashboard .recrm-leads-table th:nth-child(1),
.recrm-frontend-dashboard .recrm-leads-table td:nth-child(1),
.recrm-frontend-dashboard .recrm-leads-table .check-column {
width: 35px !important;
min-width: 35px !important;
max-width: 35px !important;
}
.recrm-loading {
text-align: center;
padding: 40px !important;
color: #787c82;
white-space: nowrap;
min-width: 150px;
}
/* Status Badges - Modern Gradient Style with Auto Text Color */
.recrm-status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
border: none;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
color: white; /* Default fallback - most gradients are dark */
}
.recrm-status-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.recrm-status-new { background: var(--primary-gradient); }
.recrm-status-active { background: var(--info-gradient); }
.recrm-status-in_progress { background: var(--warning-gradient); }
.recrm-status-answered { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }
.recrm-status-fulfilled { background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); }
.recrm-status-cancelled { background: linear-gradient(135deg, #ed213a 0%, #93291e 100%); }
.recrm-status-expired { background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%); }
.recrm-status-closed { background: linear-gradient(135deg, #606c88 0%, #3f4c6b 100%); }
.recrm-status-escalated { background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%); }
/* Badge labels - show on both desktop and mobile */
.recrm-badge-label {
display: block;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.5px;
margin-bottom: 2px;
opacity: 0.9;
line-height: 1.2;
}
/* Priority Badges - Modern Gradient Style with Auto Text Color */
.recrm-priority-badge {
display: inline-block;
padding: 6px 16px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
white-space: normal;
word-wrap: break-word;
border: none;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
color: white; /* Default fallback - most gradients are dark */
max-width: 100%;
}
.recrm-priority-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.recrm-priority-low { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.recrm-priority-medium { background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%); }
.recrm-priority-high { background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%); }
.recrm-priority-urgent { background: linear-gradient(135deg, #ed213a 0%, #93291e 100%); }
/* Stage Badge - Modern Gradient Style */
.recrm-stage-badge {
display: inline-block;
padding: 6px 16px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
white-space: normal;
word-wrap: break-word;
color: white;
border: none;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
max-width: 100%;
}
.recrm-stage-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Contact Info */
.recrm-contact-info {
display: flex;
flex-direction: column;
gap: 4px; /* Increased from 2px for better spacing */
}
/* Force all icons in contact info to be dark gray */
.recrm-contact-info .dashicons {
color: #6b7280 !important;
}
.recrm-contact-info .recrm-contact-name .dashicons {
color: #4b5563 !important; /* Avatar icon slightly darker */
}
/* Contact Name - Larger and Higher Contrast with Avatar Icon */
.recrm-contact-name {
font-weight: 600;
font-size: 13px; /* Reduced from 15px */
color: #1d2327; /* High contrast dark color (was inheriting lighter color) */
line-height: 1; /* Reduced from 1.4 to save vertical space */
display: grid;
grid-template-columns: 24px 1fr; /* Icon column (reduced) + text column */
align-items: center;
gap: 6px;
}
.recrm-contact-name .dashicons {
flex-shrink: 0; /* Don't shrink the icon */
color: #4b5563; /* Dark gray for avatar icon */
justify-self: center; /* Center icon in its column */
font-size: 20px !important; /* Reduced from 24px */
width: 20px !important;
height: 20px !important;
}
/* Contact Details - Align with name text (skip icon column) */
.recrm-contact-details {
font-size: 12px;
color: #787c82;
line-height: 1.5;
margin-left: 30px; /* Align with text (24px icon + 6px gap) */
}
/* Contact details icons - Force dark gray color on all dashicons */
.recrm-contact-details .dashicons,
.recrm-contact-details .dashicons-phone,
.recrm-contact-details .dashicons-email,
.recrm-contact-details .dashicons-email-alt,
.recrm-contact-details .dashicons-calendar,
.recrm-contact-details .dashicons-calendar-alt,
.recrm-contact-details .dashicons-tag,
.recrm-contact-details .dashicons-share,
.recrm-contact-details .dashicons-share-alt,
.recrm-contact-details .dashicons-share-alt2,
.recrm-contact-details .dashicons-chart-line,
.recrm-contact-details .dashicons-money,
.recrm-contact-details .dashicons-money-alt {
display: inline-block !important;
vertical-align: middle !important;
margin-right: 4px !important;
line-height: 1 !important;
color: #6b7280 !important; /* Medium dark gray for detail icons */
}
/* Actions */
.recrm-actions {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.recrm-action-btn {
padding: 6px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
border: none;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
font-weight: 500;
}
.recrm-action-btn:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Loading spinner for view button */
.recrm-view-lead.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.recrm-view-lead.loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
top: 50%;
left: 50%;
margin-left: -7px;
margin-top: -7px;
border: 2px solid rgba(102, 126, 234, 0.2);
border-radius: 50%;
border-top-color: #667eea;
animation: recrm-spinner 0.8s linear infinite;
}
@keyframes recrm-spinner {
to { transform: rotate(360deg); }
}
/* ==========================================================================
Note Forms - Modern Design
========================================================================== */
.recrm-note-form {
background: rgba(102, 126, 234, 0.03);
padding: 20px;
border-radius: var(--radius-md);
margin-top: 15px;
border: 2px solid rgba(102, 126, 234, 0.1);
}
.recrm-note-form textarea,
.recrm-note-form select {
width: 100%;
border: 2px solid rgba(102, 126, 234, 0.2) !important;
border-radius: var(--radius-md) !important;
padding: 10px 14px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
background: white !important;
margin-bottom: 12px;
}
.recrm-note-form textarea:focus,
.recrm-note-form select:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
outline: none !important;
}
.recrm-note-form select {
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px !important;
padding-right: 40px !important;
}
.recrm-note-form-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.recrm-note-form-row select {
flex: 1;
margin-bottom: 0 !important;
}
.recrm-note-form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* ==========================================================================
Detail Modal Buttons - Modern Design
========================================================================== */
/* Section header buttons (Add Note, Change Stage, Add Tag) */
.recrm-detail-section-header .button,
.recrm-quick-change-stage,
.recrm-add-note-btn,
.recrm-add-tag-btn {
border: none !important;
border-radius: var(--radius-md) !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
box-shadow: var(--shadow-sm) !important;
min-height: 36px !important;
line-height: 1.4 !important;
}
/* Add Note and Change Stage buttons - Light gray gradient */
.recrm-quick-change-stage,
.recrm-add-note-btn {
background: linear-gradient(135deg, #dcdcdc 0%, #d1d1d1 100%) !important;
color: #3c434a !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border: 1px solid #c5c5c5 !important;
}
.recrm-quick-change-stage:hover,
.recrm-add-note-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
background: linear-gradient(135deg, #c9c9c9 0%, #bfbfbf 100%) !important;
}
.recrm-quick-change-stage:disabled,
.recrm-add-note-btn:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* Add Tag button - Keep purple gradient */
.recrm-add-tag-btn {
background: var(--primary-gradient) !important;
color: white !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.recrm-add-tag-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}
.recrm-add-tag-btn:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* Note form action buttons */
.recrm-note-form-actions .button {
border: none !important;
border-radius: var(--radius-md) !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
min-height: 38px !important;
line-height: 1.4 !important;
}
.recrm-note-form-actions .button-primary,
.recrm-save-note,
.recrm-update-note {
background: var(--primary-gradient) !important;
color: white !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}
.recrm-note-form-actions .button-primary:hover,
.recrm-save-note:hover,
.recrm-update-note:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}
.recrm-note-form-actions .button-secondary,
.recrm-cancel-note,
.recrm-cancel-edit-note {
background: rgba(255, 255, 255, 0.9) !important;
color: #667eea !important;
box-shadow: var(--shadow-sm) !important;
border: 1px solid rgba(102, 126, 234, 0.2) !important;
}
.recrm-note-form-actions .button-secondary:hover,
.recrm-cancel-note:hover,
.recrm-cancel-edit-note:hover {
background: rgba(255, 255, 255, 1) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
border-color: rgba(102, 126, 234, 0.4) !important;
}
/* Icon buttons (Edit, Delete) - Hidden by default, shown on hover/tap */
.recrm-icon-btn {
border: none !important;
background: transparent !important;
padding: 6px !important;
cursor: pointer !important;
border-radius: var(--radius-sm) !important;
transition: all 0.3s ease !important;
color: #d6d6d6 !important;
min-width: auto !important;
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important; /* Hidden by default */
pointer-events: none !important;
}
/* Show icon buttons on hover of parent container */
.recrm-detail-value:hover .recrm-icon-btn,
.recrm-detail-row:hover .recrm-icon-btn,
.recrm-note-card:hover .recrm-icon-btn,
.recrm-interest-field-actions:hover .recrm-icon-btn,
.recrm-pipeline-field:hover .recrm-icon-btn,
.recrm-pipeline-card:hover .recrm-icon-btn,
.recrm-stage-card:hover .recrm-icon-btn {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Mobile - show ONLY when field is tapped/focused (not always visible) */
@media screen and (max-width: 782px) {
/* Keep icons hidden by default on mobile */
.recrm-icon-btn {
opacity: 0 !important;
pointer-events: none !important;
}
/* Show when parent is tapped/active */
.recrm-detail-value:active .recrm-icon-btn,
.recrm-detail-row:active .recrm-icon-btn,
.recrm-note-card:active .recrm-icon-btn,
.recrm-interest-field-actions:active .recrm-icon-btn,
.recrm-pipeline-field:active .recrm-icon-btn,
.recrm-pipeline-card:active .recrm-icon-btn,
.recrm-stage-card:active .recrm-icon-btn {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Show when field is focused (for input fields) */
.recrm-detail-value:focus-within .recrm-icon-btn,
.recrm-detail-row:focus-within .recrm-icon-btn,
.recrm-interest-field-actions:focus-within .recrm-icon-btn,
.recrm-pipeline-field:focus-within .recrm-icon-btn {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Keep visible while button itself is being tapped */
.recrm-icon-btn:active {
opacity: 1 !important;
pointer-events: auto !important;
}
}
.recrm-icon-btn:hover {
background: rgba(102, 126, 234, 0.1) !important;
transform: scale(1.1) !important;
}
.recrm-icon-btn.recrm-delete-note {
color: #ef4444 !important;
}
.recrm-icon-btn.recrm-delete-note:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
.recrm-icon-btn:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
transform: none !important;
pointer-events: none !important;
}
/* ==========================================================================
Pagination
========================================================================== */
.recrm-pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: var(--card-bg);
backdrop-filter: blur(10px);
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.05);
flex-wrap: wrap;
gap: 15px;
}
.recrm-pagination-info {
color: #787c82;
}
.recrm-pagination-controls {
display: flex;
gap: 10px;
align-items: center;
}
#recrm-page-numbers {
display: flex;
gap: 5px;
}
.recrm-page-number {
padding: 6px 12px;
border: none;
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
border-radius: var(--radius-sm);
min-width: 36px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
font-weight: 500;
}
.recrm-page-number:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.recrm-page-number.active {
background: var(--primary-gradient);
color: #fff;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.recrm-per-page label {
display: flex;
align-items: center;
gap: 5px;
}
/* ==========================================================================
Modals
========================================================================== */
.recrm-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 100000 !important;
display: none;
align-items: flex-start; /* Changed from center to allow full height */
justify-content: center;
padding: 0 20px 2.5vh 20px; /* No top padding, small bottom padding, horizontal padding */
overflow-y: auto; /* Enable scrolling if modal exceeds viewport */
}
.recrm-modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(102, 126, 234, 0.25);
backdrop-filter: blur(8px);
z-index: 1;
pointer-events: auto; /* Overlay blocks background clicks */
}
.recrm-modal-content {
position: relative;
z-index: 2;
background: #fff;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
max-width: 600px;
width: 90%;
max-height: 97.5vh !important; /* Don't exceed screen height */
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0 auto; /* Center horizontally, no vertical margin */
transform: translate3d(0, 0, 0);
border: none;
pointer-events: auto; /* Modal content is clickable */
}
/* ONLY large detail modals get full height */
#recrm-detail-modal .recrm-modal-content,
#recrm-add-interest-modal .recrm-modal-content,
#recrm-assets-main-modal .recrm-modal-content {
height: 97.5vh !important; /* Full height for main modals */
}
.recrm-modal-large .recrm-modal-content {
max-width: 1000px;
}
.recrm-modal-header {
padding: 24px;
border-bottom: none;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
background: var(--primary-gradient);
color: white;
}
.recrm-modal-header h2 {
margin: 0;
font-size: 18px;
color: white;
font-weight: 600;
flex: 1; /* Allow h2 to take available space */
min-width: 0; /* Allow text to shrink on small screens */
}
.recrm-modal-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.recrm-modal-refresh {
background: rgba(255, 255, 255, 0.2);
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: white;
padding: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: all 0.3s ease;
opacity: 0.9;
}
.recrm-modal-refresh:hover {
background: rgba(255, 255, 255, 0.3);
color: white;
opacity: 1;
transform: scale(1.1);
}
.recrm-modal-refresh.recrm-refreshing {
animation: recrm-spin 1s linear infinite;
pointer-events: none;
opacity: 0.6;
}
@keyframes recrm-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Card Color Picker */
.recrm-card-color-btn {
margin-right: 8px !important;
}
.recrm-color-palette {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 10px;
}
.recrm-color-option {
position: relative;
border: 3px solid #ddd;
border-radius: 8px;
padding: 40px 10px 10px 10px;
cursor: pointer;
transition: all 0.2s;
min-height: 80px;
}
.recrm-color-option:hover {
border-color: #667eea;
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.recrm-color-option.recrm-color-selected {
border-color: #667eea;
border-width: 3px;
}
#recrm-color-picker-modal .recrm-modal-content {
max-width: 400px;
}
.recrm-modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: white;
padding: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: all 0.3s ease;
opacity: 0.9;
}
.recrm-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
color: white;
opacity: 1;
transform: scale(1.1);
}
.recrm-modal-body {
padding: 20px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.recrm-modal-footer {
padding: 20px 24px;
border-top: none;
display: flex;
justify-content: flex-start; /* Changed to allow delete buttons on left, close on right */
align-items: center;
gap: 12px;
background: rgba(102, 126, 234, 0.05);
flex: 0 0 auto;
min-height: 70px;
box-sizing: border-box;
flex-wrap: wrap; /* Allow buttons to wrap on small screens */
}
/* Mobile responsive footer */
@media screen and (max-width: 782px) {
.recrm-modal-footer {
padding: 15px;
gap: 10px;
justify-content: center; /* Center buttons on mobile */
}
}
.recrm-modal-footer .button {
min-height: 40px !important;
height: auto !important;
line-height: 1.4 !important;
padding: 10px 20px !important;
white-space: normal !important; /* Allow text to wrap */
word-wrap: break-word !important;
cursor: pointer !important;
min-width: 100px !important;
max-width: 100% !important; /* Don't exceed container */
font-size: 14px !important;
text-align: center !important;
display: inline-block !important;
box-sizing: border-box !important;
border-radius: var(--radius-md) !important;
border: none !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
}
/* Mobile button sizing */
@media screen and (max-width: 782px) {
.recrm-modal-footer .button {
flex: 1 1 auto; /* Flex grow on mobile */
min-width: 80px !important;
max-width: calc(50% - 5px) !important; /* Two buttons per row max */
font-size: 13px !important;
padding: 8px 12px !important;
}
}
/* Primary button gradient */
.recrm-modal-footer .button-primary {
background: var(--primary-gradient) !important;
color: white !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}
.recrm-modal-footer .button-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}
/* Secondary button modern style */
.recrm-modal-footer .button-secondary {
background: rgba(255, 255, 255, 0.9) !important;
color: #667eea !important;
box-shadow: var(--shadow-sm) !important;
}
.recrm-modal-footer .button-secondary:hover {
background: rgba(255, 255, 255, 1) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
/* Add Interest Modal - Disabled button styling */
#recrm-add-interest-modal .button:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Add Interest Modal - Hidden buttons */
#recrm-add-interest-prev,
#recrm-add-interest-next,
#recrm-add-interest-skip,
#recrm-add-interest-save {
transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
/* Ensure modal displays correctly when shown */
.recrm-modal[style*="display: block"],
.recrm-modal[style*="display:block"] {
display: flex !important;
}
/* Prevent modal parts from escaping container */
.recrm-modal * {
box-sizing: border-box;
}
.recrm-modal-content > * {
position: relative;
z-index: auto;
}
/* WordPress admin bar compatibility */
.admin-bar .recrm-modal {
top: 0 !important;
}
/* Ensure no weird positioning from WordPress */
.recrm-modal,
.recrm-modal * {
transform: none !important;
}
/* Modals opened on top of other modals need higher z-index */
#recrm-stage-modal,
#recrm-assign-modal {
z-index: 100001 !important;
}
/* Sub-modals should be centered on all screen sizes */
#recrm-assign-modal,
#recrm-stage-modal,
#recrm-edit-field-modal,
#recrm-agent-picker-modal,
#recrm-fulltext-modal,
#recrm-badge-edit-modal {
align-items: center !important; /* Center vertically */
justify-content: center !important; /* Center horizontally */
}
/* Form Groups */
.recrm-form-group {
margin-bottom: 20px;
}
.recrm-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: #1d2327;
}
.recrm-form-group .required {
color: #d63638;
}
.recrm-form-group input[type="text"],
.recrm-form-group input[type="email"],
.recrm-form-group input[type="tel"],
.recrm-form-group input[type="number"],
.recrm-form-group select,
.recrm-form-group textarea {
width: 100%;
border: 2px solid rgba(102, 126, 234, 0.2) !important;
border-radius: var(--radius-md) !important;
padding: 10px 14px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
background: white !important;
color: #1d2327 !important;
}
.recrm-form-group input[type="text"]:focus,
.recrm-form-group input[type="email"]:focus,
.recrm-form-group input[type="tel"]:focus,
.recrm-form-group input[type="number"]:focus,
.recrm-form-group select:focus,
.recrm-form-group textarea:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
outline: none !important;
}
/* Select dropdown modern styling */
.recrm-form-group select {
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px !important;
padding-right: 40px !important;
}
/* Textarea modern styling */
.recrm-form-group textarea {
resize: vertical !important;
min-height: 100px !important;
font-family: inherit !important;
line-height: 1.5 !important;
}
/* Select options styling */
.recrm-form-group select option {
padding: 10px !important;
font-size: 14px !important;
}
/* Placeholder styling */
.recrm-form-group input::placeholder,
.recrm-form-group textarea::placeholder {
color: #8c8f94 !important;
opacity: 1 !important;
}
/* Edit field modal inputs inherit styling */
#recrm-edit-field-modal .recrm-form-group input,
#recrm-edit-field-modal .recrm-form-group select,
#recrm-edit-field-modal .recrm-form-group textarea {
border: 2px solid rgba(102, 126, 234, 0.2) !important;
border-radius: var(--radius-md) !important;
padding: 10px 14px !important;
font-size: 14px !important;
}
#recrm-edit-field-modal .recrm-form-group input:focus,
#recrm-edit-field-modal .recrm-form-group select:focus,
#recrm-edit-field-modal .recrm-form-group textarea:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
outline: none !important;
}
/* Field notes and disabled states */
.recrm-form-group label .recrm-field-note {
font-weight: 400;
font-size: 12px;
color: #646970;
font-style: italic;
margin-left: 5px;
}
.recrm-form-group select:disabled,
.recrm-form-group input:disabled,
.recrm-form-group textarea:disabled {
background-color: #f6f7f7 !important;
color: #646970 !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
border-color: rgba(102, 126, 234, 0.1) !important;
}
.recrm-form-group .description {
margin: 5px 0 0 0;
font-size: 12px;
color: #646970;
line-height: 1.5;
}
/* Lead Summary in Modals */
.recrm-lead-summary {
background: #f6f7f7;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
}
.recrm-lead-summary-row {
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.recrm-lead-summary-label {
font-weight: 600;
min-width: 100px;
}
/* Lead Detail Modal */
.recrm-detail-section {
margin-bottom: 30px;
background: var(--card-bg);
backdrop-filter: blur(10px);
padding: 24px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: none;
transition: all 0.3s ease;
}
.recrm-detail-section:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-2px);
}
.recrm-detail-section h3 {
margin: 0 0 20px 0;
padding-bottom: 15px;
border-bottom: 2px solid transparent;
border-image: var(--primary-gradient) 1;
font-size: 16px;
font-weight: 600;
color: #667eea;
}
.recrm-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.recrm-detail-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.recrm-detail-label {
font-weight: 600;
color: #787c82;
font-size: 13px;
}
.recrm-detail-value {
width: 100%;
background: rgba(255, 255, 255, 0.9);
padding: 10px 40px 10px 16px;
border-radius: var(--radius-md);
border: none;
box-shadow: var(--shadow-sm);
min-height: 24px;
position: relative;
transition: all 0.3s ease;
}
.recrm-detail-value:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
background: #ffffff;
}
/* Full width detail row for long content */
.recrm-detail-row-full {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 8px;
}
.recrm-detail-row-full .recrm-detail-label {
min-width: auto;
}
.recrm-detail-row-full .recrm-detail-value {
width: 100%;
}
/* Visual separator between sections */
.recrm-detail-separator {
grid-column: 1 / -1;
height: 1px;
background: #dcdcde;
margin: 15px 0;
}
/* Message box styling */
.recrm-message-box {
background: #f6f7f7;
padding: 12px 15px;
border-radius: 4px;
border-left: 3px solid #2271b1;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 200px;
overflow-y: auto;
}
/* Interest Fields Container */
.recrm-interest-fields-container {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(102, 126, 234, 0.2);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
margin-bottom: 20px;
}
.recrm-interest-fields-container:hover {
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
/* Interest Field Boxes - Modern Style */
.recrm-interest-field-box {
margin-bottom: 15px;
}
.recrm-interest-field-box:last-of-type {
margin-bottom: 0;
}
.recrm-interest-field-label {
display: block;
font-weight: 600;
font-size: 14px;
color: #667eea;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Interest Field Actions Container */
.recrm-interest-field-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(102, 126, 234, 0.15);
}
.recrm-interest-field-input,
.recrm-interest-field-textarea {
flex: 1;
width: 100%;
padding: 12px 16px;
border: 2px solid rgba(102, 126, 234, 0.3);
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
background: white;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) inset;
}
.recrm-interest-field-input:focus,
.recrm-interest-field-textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05) inset;
}
.recrm-interest-field-input:readonly,
.recrm-interest-field-textarea:readonly,
.recrm-interest-field-input:disabled,
.recrm-interest-field-textarea:disabled {
background: #f9f9f9;
cursor: default;
opacity: 1;
color: #2c3338;
border-color: #dcdcde;
}
.recrm-interest-field-textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
/* Edit button for interest fields - match other edit buttons */
.recrm-interest-field-actions .recrm-edit-interest-fields-btn {
background: transparent;
color: #d6d6d6;
border: none;
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.recrm-interest-field-actions .recrm-edit-interest-fields-btn:hover {
color: #667eea;
background: rgba(102, 126, 234, 0.1);
}
.recrm-interest-field-actions .recrm-edit-interest-fields-btn .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}
/* Save button for interest fields */
.recrm-interest-field-actions .recrm-save-interest-fields-btn {
background: linear-gradient(135deg, #46b450 0%, #2e7d32 100%);
color: white;
border: none;
padding: 8px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(70, 180, 80, 0.3);
}
.recrm-interest-field-actions .recrm-save-interest-fields-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(70, 180, 80, 0.5);
}
.recrm-interest-field-actions .recrm-save-interest-fields-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Cancel button for interest fields */
.recrm-interest-field-actions .recrm-cancel-interest-fields-btn {
background: white;
color: #2c3338;
border: 1px solid #dcdcde;
padding: 8px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.recrm-interest-field-actions .recrm-cancel-interest-fields-btn:hover {
background: #f6f7f7;
border-color: #8c8f94;
}
/* Communications Timeline - Chat Style */
.recrm-communications-timeline {
max-height: 400px;
overflow-y: auto;
padding: 10px;
background: #f6f7f7;
border-radius: 8px;
}
.recrm-communication-item {
display: flex;
margin-bottom: 12px;
clear: both;
}
/* Incoming messages (received) - align left */
.recrm-communication-item.incoming {
justify-content: flex-start;
}
.recrm-communication-item.incoming .recrm-communication-bubble {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: none;
border-radius: 18px 18px 18px 4px;
max-width: 70%;
padding: 12px 16px;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.recrm-communication-item.incoming .recrm-communication-bubble:hover {
box-shadow: var(--shadow-lg);
transform: translateX(3px);
}
/* Outgoing messages (sent) - align right */
.recrm-communication-item.outgoing {
justify-content: flex-end;
}
.recrm-communication-item.outgoing .recrm-communication-bubble {
background: linear-gradient(135deg, #dcf8c6 0%, #b2e89c 100%);
border: none;
border-radius: 18px 18px 4px 18px;
max-width: 70%;
padding: 12px 16px;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.recrm-communication-item.outgoing .recrm-communication-bubble:hover {
box-shadow: var(--shadow-lg);
transform: translateX(-3px);
}
.recrm-communication-bubble {
display: inline-block;
max-width: 100%;
overflow: hidden;
}
.recrm-communication-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-size: 11px;
color: #787c82;
gap: 10px;
}
.recrm-communication-channel {
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
color: #2271b1;
}
.recrm-communication-item.outgoing .recrm-communication-channel {
color: #4a8f2a;
}
.recrm-communication-message {
color: #1d2327;
line-height: 1.5;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
font-size: 13px;
position: relative;
display: block;
max-width: 100%;
}
/* Delivery Status Ticks for WhatsApp */
.recrm-delivery-tick {
display: inline-block;
margin-left: 6px;
font-size: 11px;
vertical-align: middle;
}
.recrm-delivery-tick.double {
color: #4a8f2a;
font-weight: bold;
}
.recrm-delivery-tick.single {
color: #8696a0;
font-weight: bold;
}
.recrm-delivery-tick.failed {
color: #ef396a;
font-weight: bold;
}
/* Loading Spinner */
.recrm-loading-spinner {
text-align: center;
padding: 40px;
color: #787c82;
}
/* ==========================================================================
Responsive
========================================================================== */
@media screen and (max-width: 782px) {
/* Fix vertical loading text on mobile */
.recrm-loading {
display: block !important;
width: 100% !important;
min-width: 100% !important;
white-space: nowrap !important;
text-align: center !important;
padding: 30px 20px !important;
}
.recrm-loading-spinner {
width: 100% !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Use flex-wrap instead of column to allow last 2 items in same row */
.recrm-filters-row {
display: flex;
flex-direction: row !important; /* Override column */
flex-wrap: wrap !important; /* Allow wrapping */
gap: 10px;
}
/* First filters take full width (force to new line) */
.recrm-filter {
width: 100%;
flex: 0 0 100%; /* Force full width */
}
/* Last 2 filters (checkbox and button) share same row */
.recrm-filter:nth-last-child(2),
.recrm-filter:nth-last-child(1) {
width: auto !important;
flex: 0 0 auto !important; /* Natural width */
display: inline-flex !important;
align-items: center !important;
}
/* Checkbox stays on left */
.recrm-filter:nth-last-child(2) {
margin-bottom: 0 !important;
}
/* Button aligns to right */
.recrm-filter:nth-last-child(1) {
margin-left: auto !important; /* Push to right */
margin-bottom: 0 !important;
}
/* Target ONLY the filter wrappers that contain dropdowns/search - by their children IDs */
#recrm-search:not([type="checkbox"]),
#recrm-filter-priority,
#recrm-filter-pipeline,
#recrm-filter-stage,
#recrm-filter-agent {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 16px !important; /* Prevent zoom on iOS */
}
/* Also target with element+ID for higher specificity */
input#recrm-search,
select#recrm-filter-priority,
select#recrm-filter-pipeline,
select#recrm-filter-stage,
select#recrm-filter-agent {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Generic targeting of text inputs and selects in filters */
.recrm-filter input[type="text"],
.recrm-filter select:not(#recrm-bulk-action) {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Checkbox label stays inline */
.recrm-filter label {
width: auto !important;
}
/* Clear button stays auto width */
#recrm-clear-filters,
button#recrm-clear-filters {
width: auto !important;
min-width: auto !important;
}
/* Bulk action - flexible width to fit with button */
#recrm-bulk-action {
max-width: none !important;
width: auto !important;
min-width: 0 !important;
flex: 1 !important;
}
/* Shortcode view - prevent iOS zoom on focus */
.recrm-frontend-dashboard #recrm-search,
.recrm-frontend-dashboard #recrm-filter-priority,
.recrm-frontend-dashboard #recrm-filter-pipeline,
.recrm-frontend-dashboard #recrm-filter-stage,
.recrm-frontend-dashboard #recrm-filter-agent,
.recrm-frontend-dashboard #recrm-clear-filters {
font-size: 16px !important; /* Prevent iOS zoom */
}
/* Bulk action and apply button - side by side on mobile */
.recrm-frontend-dashboard #recrm-bulk-action {
max-width: none !important;
width: auto !important;
min-width: 0 !important;
flex: 1 !important;
font-size: 16px !important; /* Prevent iOS zoom */
}
.recrm-frontend-dashboard #recrm-apply-bulk {
max-width: none !important;
width: auto !important;
min-width: 0 !important;
font-size: 16px !important; /* Prevent iOS zoom */
}
/* Shortcode mobile: Filter wrappers full width */
.recrm-frontend-dashboard .recrm-filter {
width: 100% !important;
}
/* Shortcode: Use wrap instead of column to allow last 2 in same row */
.recrm-frontend-dashboard .recrm-filters-row {
display: flex !important;
flex-direction: row !important; /* Override column */
flex-wrap: wrap !important;
gap: 8px !important; /* Reduced from 10px to match admin view */
}
/* Shortcode: First filters take full width */
.recrm-frontend-dashboard .recrm-filter {
flex: 0 0 100% !important; /* Force full width for dropdowns */
}
/* Shortcode: Last 2 filters share same row */
.recrm-frontend-dashboard .recrm-filter:nth-last-child(2),
.recrm-frontend-dashboard .recrm-filter:nth-last-child(1) {
width: auto !important;
flex: 0 0 auto !important; /* Natural width */
display: inline-flex !important;
align-items: center !important;
}
/* Checkbox stays on left */
.recrm-frontend-dashboard .recrm-filter:nth-last-child(2) {
margin-bottom: 0 !important;
}
/* Button aligns to right */
.recrm-frontend-dashboard .recrm-filter:nth-last-child(1) {
margin-left: auto !important; /* Push to right */
margin-bottom: 0 !important;
}
/* Shortcode mobile: Target specific filter dropdowns by ID */
.recrm-frontend-dashboard #recrm-search,
.recrm-frontend-dashboard input#recrm-search,
.recrm-frontend-dashboard #recrm-filter-priority,
.recrm-frontend-dashboard select#recrm-filter-priority,
.recrm-frontend-dashboard #recrm-filter-pipeline,
.recrm-frontend-dashboard select#recrm-filter-pipeline,
.recrm-frontend-dashboard #recrm-filter-stage,
.recrm-frontend-dashboard select#recrm-filter-stage,
.recrm-frontend-dashboard #recrm-filter-agent,
.recrm-frontend-dashboard select#recrm-filter-agent {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Generic filter inputs and selects */
.recrm-frontend-dashboard .recrm-filter input[type="text"],
.recrm-frontend-dashboard .recrm-filter select:not(#recrm-bulk-action) {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Checkbox label and button stay auto */
.recrm-frontend-dashboard #recrm-clear-filters,
.recrm-frontend-dashboard button#recrm-clear-filters {
width: auto !important;
min-width: auto !important;
}
/* Shortcode filters-row already configured above - removed conflicting column direction */
/* Frontend bulk actions - keep horizontal on mobile */
.recrm-frontend-dashboard .recrm-bulk-actions {
flex-direction: row !important; /* Keep horizontal */
width: 100% !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
.recrm-frontend-dashboard .recrm-bulk-actions select {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.recrm-frontend-dashboard .recrm-bulk-actions button {
flex: 0 0 auto !important;
padding: 8px 16px !important;
}
/* Checkbox filter styling for mobile */
.recrm-filter label {
font-size: 12px; /* Reduced from 14px */
white-space: nowrap;
width: auto;
max-width: 100%;
}
.recrm-filter input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
}
.recrm-filter label span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recrm-pagination {
flex-direction: column;
align-items: flex-start;
}
.recrm-modal-content {
width: 95%;
}
.recrm-detail-grid {
grid-template-columns: 1fr 1fr; /* Two columns for paired fields */
gap: 10px;
}
/* Default: All fields full width (separate rows) */
.recrm-detail-row {
grid-column: 1 / -1; /* Span all columns by default */
}
/* ONLY these fields are paired side by side: */
/* First Name and Last Name - Side by side (50% each) */
.recrm-field-firstname {
grid-column: 1; /* First column */
}
.recrm-field-lastname {
grid-column: 2; /* Second column */
}
/* Country and City - Side by side (50% each) */
.recrm-field-country {
grid-column: 1; /* First column */
}
.recrm-field-city {
grid-column: 2; /* Second column */
}
/* Preferred Language and Status - Side by side (50% each) */
.recrm-field-language {
grid-column: 1; /* First column */
}
.recrm-field-status {
grid-column: 2; /* Second column */
}
/* Ensure these fields are ALWAYS full width (separate rows): */
/* Phone, Email, Telegram, Instagram, WhatsApp */
.recrm-detail-row:has([data-field="phone"]),
.recrm-detail-row:has([data-field="email"]),
.recrm-detail-row:has([data-field="telegram"]),
.recrm-detail-row:has([data-field="instagram"]),
.recrm-detail-row:has([data-field="whatsapp"]),
/* Pipeline details */
.recrm-detail-row:has([data-field="pipeline"]),
.recrm-detail-row:has([data-field="stage"]),
.recrm-detail-row:has([data-field="priority"]),
.recrm-detail-row:has([data-field="interest_status"]),
/* Custom fields */
.recrm-custom-field-row {
grid-column: 1 / -1 !important; /* Force full width */
}
}
/* ==========================================================================
Utilities
========================================================================== */
.recrm-hidden {
display: none !important;
}
.recrm-text-muted {
color: #787c82;
}
.recrm-text-success {
color: #00a32a;
}
.recrm-text-error {
color: #d63638;
}
.recrm-text-warning {
color: #dba617;
}
/* ==========================================================================
Contact Tags
========================================================================== */
.recrm-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
background: #f0f0f1;
color: #1d2327;
margin: 2px;
white-space: nowrap;
}
/* Contact Tags in Detail View - Modern Gradient Style */
.recrm-contact-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
transition: all 0.2s ease;
white-space: nowrap;
}
.recrm-contact-tag:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* Interest Tags in Detail View - Modern Gradient Style */
.recrm-interest-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* color will be set dynamically based on category */
border-radius: 20px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
transition: all 0.2s ease;
white-space: nowrap;
}
.recrm-interest-tag:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* Old tag color classes - kept for backwards compatibility but with updated styling */
.recrm-tag-general, .recrm-tag-vip, .recrm-tag-hot, .recrm-tag-cold,
.recrm-tag-investor, .recrm-tag-buyer, .recrm-tag-seller, .recrm-tag-tenant, .recrm-tag-landlord {
/* Use gradient instead of flat colors */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
/* color will be set dynamically based on category */
}
/* ==========================================================================
Contact Action Buttons
========================================================================== */
.recrm-contact-actions {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap; /* Allow buttons to wrap to next line if needed */
align-items: center;
}
/* ==========================================================================
Contact Action Buttons - Simple Neutral Style (matching property buttons)
========================================================================== */
.recrm-contact-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
border: none;
transition: all 0.2s ease;
margin: 0 8px 8px 0;
cursor: pointer;
line-height: 1;
white-space: nowrap;
/* Simple neutral gray background */
background: #f0f2f5 !important;
color: #4a5568 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.recrm-contact-action-btn:hover {
background: #e4e7eb !important;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
text-decoration: none !important;
color: #4a5568 !important;
}
.recrm-contact-action-btn:active {
transform: translateY(0);
}
/* All buttons use same neutral style - no color differentiation */
.recrm-contact-action-btn:not(.recrm-whatsapp):not(.recrm-email):not(.recrm-telegram):not(.recrm-instagram),
.recrm-contact-action-btn.recrm-whatsapp,
.recrm-contact-action-btn.recrm-email,
.recrm-contact-action-btn.recrm-telegram,
.recrm-contact-action-btn.recrm-instagram {
background: #f0f2f5 !important;
color: #4a5568 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
padding: 8px 16px !important;
}
/* Primary button in contact actions (matches footer Save button style) */
.recrm-contact-actions .button-primary {
background: var(--primary-gradient) !important;
color: white !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
border: none !important;
padding: 10px 20px !important;
border-radius: var(--radius-md) !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
}
.recrm-contact-actions .button-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}
.recrm-contact-action-btn:not(.recrm-whatsapp):not(.recrm-email):not(.recrm-telegram):not(.recrm-instagram):hover,
.recrm-contact-action-btn.recrm-whatsapp:hover,
.recrm-contact-action-btn.recrm-email:hover,
.recrm-contact-action-btn.recrm-telegram:hover,
.recrm-contact-action-btn.recrm-instagram:hover {
background: #e4e7eb !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
color: #4a5568 !important;
}
/* ===========================
* SECTION HEADERS WITH BUTTONS
* =========================== */
.recrm-detail-section-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 15px;
}
/* Share & Action buttons container */
.recrm-header-actions {
display: flex !important;
flex-wrap: nowrap !important;
gap: 5px !important;
align-items: center !important;
flex-shrink: 0 !important; /* Don't let buttons shrink */
}
.recrm-detail-section-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
flex-wrap: nowrap !important; /* Always keep on same row */
}
.recrm-detail-section-header h3 {
margin: 0 !important;
flex: 1 1 auto !important;
min-width: 0 !important; /* Allow text to truncate if needed */
}
/* Documents and Share buttons in section headers - 10% darker */
.recrm-detail-section-header .button-secondary,
.recrm-detail-section-header .recrm-manage-assets-btn,
.recrm-detail-section-header .recrm-share-interest-btn {
background: linear-gradient(135deg, #dcdcdc 0%, #d1d1d1 100%) !important;
color: #3c434a !important;
border: 1px solid #c5c5c5 !important;
}
.recrm-detail-section-header .button-secondary:hover,
.recrm-detail-section-header .recrm-manage-assets-btn:hover,
.recrm-detail-section-header .recrm-share-interest-btn:hover {
background: linear-gradient(135deg, #c9c9c9 0%, #bfbfbf 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Color picker button styling */
.recrm-card-color-btn {
background: #f0f0f1 !important;
border: 1px solid #c3c4c7 !important;
color: #2271b1 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.recrm-card-color-btn:hover {
background: #2271b1 !important;
border-color: #2271b1 !important;
color: white !important;
}
.recrm-card-color-btn .dashicons {
margin: 0 !important;
}
/* Share button - icon only styling */
.recrm-share-interest-btn .dashicons {
margin: 0 !important;
}
.recrm-detail-section-header .recrm-share-interest-btn {
min-width: 32px !important;
padding: 6px 8px !important;
}
/* CRITICAL: Force header to stay as single row - highest specificity */
div.recrm-detail-section div.recrm-detail-section-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
}
div.recrm-detail-section div.recrm-detail-section-header h3 {
flex: 1 1 auto !important;
margin: 0 !important;
margin-right: 10px !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
div.recrm-detail-section div.recrm-detail-section-header div.recrm-header-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
flex-shrink: 0 !important;
gap: 5px !important;
align-items: center !important;
}
.recrm-detail-section-header .button {
margin-left: 10px;
}
.recrm-detail-section-header .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 3px;
}
/* ===========================
* INTEREST TAGS
* =========================== */
.recrm-interest-tags-section {
margin: 20px 0;
}
.recrm-tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
/* Inline tags container (in contact information) */
.recrm-tags-inline-container {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.recrm-empty-tags {
color: #8c8f94;
font-style: italic;
font-size: 13px;
}
.recrm-add-contact-tag-btn-inline,
.recrm-add-interest-tag-btn-inline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px dashed #8c8f94;
background: transparent;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
margin-left: 4px;
}
.recrm-add-contact-tag-btn-inline:hover,
.recrm-add-interest-tag-btn-inline:hover {
background: #f0f0f1;
border-color: #667eea;
border-style: solid;
}
.recrm-add-contact-tag-btn-inline .dashicons,
.recrm-add-interest-tag-btn-inline .dashicons {
font-size: 16px;
line-height: 1;
color: #667eea;
}
/* Tag styles moved to dedicated "Tag Badges" section below for consistency */
/* .tag-other styling now handled by dynamic CSS */
.recrm-tag-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: rgba(255, 255, 255, 0.3);
border: none;
border-radius: 50%;
color: white;
font-size: 16px;
font-weight: bold;
line-height: 1;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.recrm-tag-remove:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.recrm-add-tag-btn .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
color: white;
}
.recrm-add-note-btn .dashicons,
.recrm-quick-change-stage .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
color: #3c434a;
}
/* Tag selection modal - Modern styles defined below in Tag Badges section */
/* ===========================
* INTEREST NOTES
* =========================== */
.recrm-interest-notes-section {
margin: 20px 0;
}
.recrm-notes-list {
margin-top: 15px;
}
.recrm-note-card {
padding: 15px;
margin-bottom: 15px;
background: #f9f9f9;
border-left: 4px solid #2271b1;
border-radius: 4px;
transition: all 0.2s ease;
}
.recrm-note-card:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.recrm-note-priority-low {
border-left-color: #4caf50;
}
.recrm-note-priority-medium {
border-left-color: #2271b1;
}
.recrm-note-priority-high {
border-left-color: #ff9800;
}
.recrm-note-priority-urgent {
border-left-color: #f44336;
}
.recrm-note-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.recrm-note-author {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: #1d2327;
}
.recrm-note-author .dashicons {
color: #2271b1;
}
.recrm-note-actions {
display: flex;
align-items: center;
gap: 8px;
}
.recrm-note-date {
font-size: 12px;
color: #646970;
}
.recrm-note-meta {
display: flex;
gap: 15px;
font-size: 12px;
color: #646970;
margin-bottom: 10px;
}
.recrm-note-type {
display: flex;
align-items: center;
gap: 4px;
}
.recrm-note-priority-badge {
padding: 2px 6px;
background: #f0f0f1;
border-radius: 3px;
text-transform: capitalize;
}
.recrm-note-content {
color: #1d2327;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
background: #ffffff;
padding: 10px 12px;
border-radius: 6px;
border: 1px solid #e0e0e0;
margin-top: 8px;
}
/* Note forms */
.recrm-note-form {
padding: 15px;
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
margin-bottom: 15px;
}
.recrm-note-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #8c8f94;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
resize: vertical;
}
.recrm-note-form-row {
display: flex;
gap: 10px;
margin: 10px 0;
}
.recrm-note-form-row select {
flex: 1;
padding: 6px 8px;
border: 1px solid #8c8f94;
border-radius: 4px;
font-size: 13px;
}
.recrm-note-form-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.recrm-note-edit-form {
margin-top: 15px;
padding: 15px;
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
}
.recrm-note-edit-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #8c8f94;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
resize: vertical;
}
.recrm-edit-note-content {
width: 100%;
}
/* Icon buttons in notes */
.recrm-note-card .recrm-icon-btn {
padding: 4px;
background: transparent;
border: none;
cursor: pointer;
color: #646970;
transition: color 0.2s ease;
}
.recrm-note-card .recrm-icon-btn:hover {
color: #2271b1;
}
.recrm-note-card .recrm-icon-btn.recrm-delete-note:hover {
color: #d63638;
}
.recrm-note-card .recrm-icon-btn .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}
/* ===========================
* DETAIL VIEW BADGES
* =========================== */
.recrm-detail-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.recrm-detail-badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
line-height: 1.4;
}
.recrm-detail-badge strong {
margin-right: 4px;
}
/* Badge Colors - Same as preview */
.recrm-badge-subject {
background-color: #e3f2fd;
color: #1976d2;
border: 1px solid #bbdefb;
}
.recrm-badge-type,
.recrm-badge-category {
background-color: #f3e5f5;
color: #7b1fa2;
border: 1px solid #e1bee7;
}
.recrm-badge-status {
background-color: #e8f5e9;
color: #388e3c;
border: 1px solid #c8e6c9;
}
.recrm-badge-priority {
background-color: #fff3e0;
color: #f57c00;
border: 1px solid #ffe0b2;
}
/* Shared badge - proper spacing */
.recrm-badge-shared {
padding: 8px 14px !important;
gap: 6px;
}
.recrm-badge-shared .dashicons {
margin-right: 4px;
}
/* Editable badge indicator */
.recrm-badge-editable {
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.recrm-badge-editable:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.recrm-badge-editable::after {
content: "✎";
margin-left: 6px;
opacity: 0.6;
font-size: 11px;
}
.recrm-badge-pipeline {
background-color: #e0f2f1;
color: #00796b;
border: 1px solid #b2dfdb;
}
.recrm-badge-stage {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #81c784;
}
/* Agent Display */
.recrm-detail-agent {
margin-top: 15px;
color: #1d2327 !important;
}
.recrm-detail-agent > strong {
display: block;
margin-bottom: 8px;
color: #1d2327 !important;
}
.recrm-agent-info {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 6px;
color: #1d2327 !important;
}
.recrm-agent-avatar-link {
display: inline-block;
border-radius: 50%;
transition: opacity 0.2s;
}
.recrm-agent-avatar-link:hover {
opacity: 0.8;
}
.recrm-agent-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.recrm-agent-details {
flex: 1;
color: #1d2327 !important;
}
.recrm-agent-name {
display: block;
font-size: 14px;
font-weight: 500;
color: #1d2327 !important;
margin-bottom: 4px;
}
.recrm-agent-job-title {
display: block;
font-size: 12px;
color: #646970;
margin-bottom: 8px;
}
.recrm-agent-contact-actions {
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap if needed */
gap: 8px; /* Consistent with other contact actions */
margin-top: 8px;
align-items: center;
}
/* Agent Dropdown Options */
.recrm-agent-option {
display: flex;
align-items: center;
gap: 8px;
}
.recrm-agent-dropdown-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.recrm-agent-phone-hint {
color: #646970;
font-size: 12px;
}
.select2-results__option .recrm-agent-option,
.select2-selection__rendered .recrm-agent-option {
padding: 2px 0;
}
/* Fix Select2 dropdown positioning in modals */
.select2-container--open {
z-index: 100002 !important;
}
.select2-dropdown {
z-index: 100002 !important;
}
/* Ensure Select2 dropdown stays within modal */
.recrm-modal .select2-container {
width: 100% !important;
}
/* Wrap form groups in modals to create positioning context */
.recrm-modal .recrm-form-group {
position: relative !important;
}
/* Force dropdown to position within form group */
.recrm-modal .select2-dropdown {
position: absolute !important;
}
/* Fix dropdown positioning when attached to modal */
.recrm-modal .select2-dropdown--below {
top: auto !important;
}
.recrm-modal .select2-dropdown--above {
bottom: auto !important;
}
/* Prevent body scroll when modal is open */
body.recrm-modal-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
/* top is set dynamically by JavaScript to preserve scroll position */
}
/* Make modal scrollable instead of body */
.recrm-modal-content {
overflow-y: auto;
overscroll-behavior: contain; /* Prevent scroll chaining */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
/* Modal body should be the scrollable element */
.recrm-modal-body {
overscroll-behavior: contain; /* Prevent scroll chaining to background */
-webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
}
/* ===========================
* AGENT PICKER
* =========================== */
/* Agent picker button */
.recrm-agent-picker-btn {
width: 100%;
padding: 10px 15px;
border: 1px solid #8c8f94;
border-radius: 4px;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
transition: all 0.2s;
}
.recrm-agent-picker-btn:hover:not(:disabled) {
border-color: #2271b1;
background: #f6f7f7;
}
.recrm-agent-picker-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
background: #f0f0f1;
}
.recrm-agent-picker-display {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.recrm-agent-picker-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.recrm-agent-picker-text {
flex: 1;
font-size: 14px;
color: #1d2327;
}
.recrm-agent-picker-btn .dashicons {
color: #646970;
font-size: 18px;
width: 18px;
height: 18px;
}
/* Agent picker modal */
#recrm-agent-picker-modal {
z-index: 100003 !important;
}
#recrm-agent-picker-modal .recrm-modal-overlay {
z-index: 100002 !important;
}
.recrm-agent-picker-content {
max-width: 500px !important;
z-index: 100003 !important;
}
.recrm-agent-picker-search {
padding: 15px;
border-bottom: 1px solid #dcdcde;
}
.recrm-agent-picker-search input {
width: 100%;
padding: 8px 12px;
border: 1px solid #8c8f94;
border-radius: 4px;
font-size: 14px;
}
.recrm-agent-picker-list {
max-height: 400px;
overflow-y: auto;
}
.recrm-agent-picker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
border-bottom: 1px solid #f0f0f1;
cursor: pointer;
transition: background 0.2s;
}
.recrm-agent-picker-item:hover {
background: #f6f7f7;
}
.recrm-agent-picker-item.selected {
background: #e5f5fa;
}
.recrm-agent-picker-item-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.recrm-agent-picker-item-avatar.no-photo {
background: #d0d5dd;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
font-weight: 500;
}
.recrm-agent-picker-item-info {
flex: 1;
}
.recrm-agent-picker-item-name {
font-weight: 500;
color: #1d2327;
font-size: 14px;
margin-bottom: 2px;
}
.recrm-agent-picker-item-email {
font-size: 12px;
color: #646970;
}
.recrm-agent-picker-item-unassign {
display: flex;
align-items: center;
gap: 8px;
padding: 15px;
border-bottom: 2px solid #dcdcde;
cursor: pointer;
background: #f9f9f9;
font-weight: 500;
color: #d63638;
transition: background 0.2s;
}
.recrm-agent-picker-item-unassign:hover {
background: #fef2f2;
}
.recrm-agent-picker-item-unassign .dashicons {
font-size: 20px;
width: 20px;
height: 20px;
}
/* ===========================
* EMPTY STATES
* =========================== */
.recrm-empty-state {
padding: 20px;
text-align: center;
color: #646970;
font-style: italic;
}
/* ===========================
* CHANGE STAGE BUTTON
* =========================== */
/* Change stage button additional styles - already defined above */
/* ===========================
* RESPONSIVE
* =========================== */
@media screen and (max-width: 782px) {
/* CRITICAL: Keep title and action buttons on same row on mobile - MAXIMUM SPECIFICITY */
div.recrm-detail-section .recrm-detail-section-header,
.recrm-detail-section .recrm-detail-section-header,
.recrm-detail-section-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
flex-wrap: nowrap !important; /* Keep title and buttons on same row */
}
div.recrm-detail-section .recrm-detail-section-header h3,
.recrm-detail-section .recrm-detail-section-header h3,
.recrm-detail-section-header h3 {
flex: 1 1 auto !important;
margin: 0 !important;
margin-right: 10px !important;
font-size: 14px !important; /* Slightly smaller on mobile */
min-width: 0 !important; /* Allow truncation if needed */
max-width: calc(100% - 150px) !important; /* Reserve space for buttons */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
div.recrm-detail-section .recrm-detail-section-header .recrm-header-actions,
.recrm-detail-section .recrm-detail-section-header .recrm-header-actions,
.recrm-detail-section-header .recrm-header-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
flex-shrink: 0 !important; /* Don't shrink buttons */
gap: 5px !important;
margin-left: 0 !important; /* Clear any margin */
}
div.recrm-detail-section .recrm-detail-section-header .recrm-header-actions .button,
.recrm-detail-section .recrm-detail-section-header .recrm-header-actions .button,
.recrm-detail-section-header .recrm-header-actions .button {
margin-left: 0 !important; /* Override individual button margins */
flex: 0 0 auto !important;
}
/* Make buttons smaller on mobile to fit in one row */
.recrm-detail-section-header .recrm-header-actions .button {
font-size: 13px !important;
padding: 6px 10px !important;
white-space: nowrap !important;
min-width: auto !important;
}
/* Adjust dashicons size in mobile buttons */
.recrm-detail-section-header .recrm-header-actions .dashicons {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
margin-right: 2px !important;
}
/* Color picker button - make it icon-only on mobile */
.recrm-detail-section-header .recrm-card-color-btn {
padding: 6px 8px !important;
min-width: 32px !important;
}
.recrm-detail-section-header .recrm-card-color-btn .dashicons {
margin-right: 0 !important;
}
/* Share button - icon-only on mobile */
.recrm-detail-section-header .recrm-share-interest-btn {
padding: 6px 8px !important;
min-width: 32px !important;
}
.recrm-detail-section-header .recrm-share-interest-btn .dashicons {
margin-right: 0 !important;
}
}
/* Extra small screens - even more compact buttons */
@media screen and (max-width: 480px) {
.recrm-detail-section-header {
gap: 6px !important; /* Slightly tighter gap */
}
.recrm-detail-section-header h3 {
font-size: 13px !important; /* Even smaller title on very small screens */
max-width: calc(100% - 120px) !important; /* Reserve less space for smaller buttons */
}
.recrm-detail-section-header .recrm-header-actions {
gap: 3px !important; /* Tighter gap on small screens */
}
.recrm-detail-section-header .recrm-header-actions .button {
font-size: 12px !important;
padding: 5px 7px !important;
}
.recrm-detail-section-header .recrm-header-actions .dashicons {
font-size: 13px !important;
width: 13px !important;
height: 13px !important;
}
/* Color picker button - even more compact */
.recrm-detail-section-header .recrm-card-color-btn {
padding: 5px 6px !important;
min-width: 28px !important;
}
/* Share button - even more compact on mobile */
.recrm-detail-section-header .recrm-share-interest-btn {
padding: 5px 6px !important;
min-width: 28px !important;
}
}
@media screen and (max-width: 782px) {
/* Keep buttons inline and fit to content on mobile - BUT NOT in section headers */
.recrm-quick-change-stage,
.recrm-add-note-btn,
.recrm-add-tag-btn {
width: auto !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
/* Override for buttons OUTSIDE of section headers */
.recrm-detail-section > .button,
.recrm-note-item .button {
margin-left: auto !important;
}
.recrm-note-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.recrm-note-form-row {
flex-direction: column;
}
.recrm-tags-container {
gap: 5px;
}
/* ===========================
* MOBILE COMMUNICATION BUBBLES
* =========================== */
.recrm-communication-item.incoming .recrm-communication-bubble,
.recrm-communication-item.outgoing .recrm-communication-bubble {
max-width: 85%;
}
.recrm-communication-message {
font-size: 14px;
word-break: break-word;
overflow-wrap: break-word;
}
/* ===========================
* MOBILE-FRIENDLY TABLE
* =========================== */
/* Hide table header on mobile */
.recrm-leads-table thead {
display: none;
}
/* Stack table as cards */
.recrm-leads-table,
.recrm-leads-table tbody,
.recrm-leads-table tr {
display: block;
width: 100%;
box-sizing: border-box;
}
.recrm-leads-table {
overflow-x: hidden;
}
.recrm-leads-table tbody {
width: 100%;
overflow-x: hidden;
}
.recrm-leads-table tr {
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
border: none !important;
border-radius: var(--radius-lg);
background: #f3f4f6 !important; /* Light gray - lighter than footer but darker than white */
padding: 15px; /* Was 15px 15px 15px 50px - reduced left padding since checkbox moved to right */
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
position: relative;
max-width: 100%;
overflow: hidden;
}
.recrm-leads-table tr:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.recrm-leads-table td {
display: block;
width: 100%;
text-align: left;
border: none !important; /* Remove gray borders on mobile cards */
border-bottom: none !important;
}
/* Loading cell should stay horizontal */
.recrm-leads-table td.recrm-loading {
display: block !important;
width: 100% !important;
text-align: center !important;
white-space: nowrap !important;
overflow: visible !important;
padding: 8px 0;
border: none;
position: relative;
font-size: inherit;
}
/* Add labels before each cell */
.recrm-leads-table td::before {
content: attr(data-label);
font-weight: 600;
color: #1d2327;
display: block;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Checkbox column - moved to top right corner on mobile */
.recrm-leads-table td.check-column {
position: absolute;
top: 12px;
right: 12px; /* Changed from left to right */
width: auto;
padding: 0;
z-index: 10;
}
.recrm-leads-table td.check-column::before {
display: none;
}
/* Make checkbox larger and easier to tap on mobile */
.recrm-leads-table td.check-column input[type="checkbox"] {
width: 24px;
height: 24px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #6b7280;
border-radius: 4px;
background: #fff;
position: relative;
margin: 0;
}
.recrm-leads-table td.check-column input[type="checkbox"]:checked {
background: #4b5563;
}
.recrm-leads-table td.check-column input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 16px;
font-weight: bold;
}
/* Action buttons - stack vertically */
.recrm-action-buttons {
display: flex;
flex-direction: column;
gap: 8px;
}
.recrm-action-buttons .button {
width: 100%;
justify-content: center;
text-align: center;
}
/* Make sure status, priority, pipeline, and stage badges don't break */
.recrm-status-badge,
/* Hide data-label attribute for badge cells in mobile since label is now inside badge */
.recrm-leads-table td[data-label="Contact"]::before,
.recrm-leads-table td[data-label="Priority"]::before,
.recrm-leads-table td[data-label="Pipeline"]::before,
.recrm-leads-table td[data-label="Stage"]::before,
.recrm-leads-table td[data-label="Assigned To"]::before,
.recrm-leads-table td[data-label="Last Summary"]::before,
.recrm-leads-table td[data-label="Actions"]::before {
display: none;
}
/* Style badges in mobile view */
.recrm-priority-badge,
.recrm-pipeline-badge,
.recrm-stage-badge,
.recrm-assigned-badge {
display: inline-block !important;
margin-top: 4px;
min-width: auto !important;
max-width: 100% !important;
text-align: left !important;
padding: 8px 12px !important;
box-sizing: border-box;
white-space: normal !important; /* Allow text wrapping for timestamps */
overflow: visible !important; /* Allow overflow to be visible */
word-wrap: break-word !important;
}
/* Contact column - FULL WIDTH on mobile - MUST be before Priority/Pipeline rules */
.recrm-leads-table tbody tr td[data-label="Contact"] {
display: block !important;
width: 100% !important;
margin: 0 0 15px 0 !important; /* Bottom margin for spacing */
padding: 0 !important;
}
/* Contact info container - full width with padding for checkbox in top right */
.recrm-leads-table tbody tr td[data-label="Contact"] .recrm-contact-info {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding-right: 50px !important; /* Space for checkbox in top right corner */
}
/* Contact name on mobile - ensure icon and text align properly with checkbox space */
.recrm-leads-table tbody tr td[data-label="Contact"] .recrm-contact-name {
display: grid !important;
grid-template-columns: 28px 1fr !important; /* Bigger icon column */
align-items: center !important;
gap: 8px !important; /* Slightly more gap */
padding-right: 10px !important; /* Extra padding to avoid checkbox */
}
/* Avatar icon in contact name on mobile */
.recrm-leads-table tbody tr td[data-label="Contact"] .recrm-contact-name .dashicons-businessman {
flex-shrink: 0 !important;
justify-self: center !important; /* Center in grid column */
font-size: 24px !important; /* Match desktop size */
width: 24px !important;
height: 24px !important;
color: #4b5563 !important; /* Dark gray to match header */
}
/* Force all dashicons in contact section to be dark gray on mobile */
.recrm-leads-table tbody tr td[data-label="Contact"] .dashicons {
color: #6b7280 !important; /* All icons dark gray */
}
.recrm-leads-table tbody tr td[data-label="Contact"] .recrm-contact-name .dashicons {
color: #4b5563 !important; /* Avatar specifically darker */
}
/* Priority and Pipeline in one row on mobile */
.recrm-leads-table td[data-label="Priority"] {
display: inline-block !important;
width: 48% !important;
vertical-align: top;
padding: 8px 1% 8px 8px !important; /* Added 8px left padding for gap from Pipeline */
}
.recrm-leads-table td[data-label="Pipeline"] {
display: inline-block !important;
width: 52% !important; /* Increased from 49% to align right edge with stage below */
vertical-align: top;
padding: 8px 0 !important; /* No padding - stretch to edge */
}
/* Adjust badge width for Priority and Pipeline to fit container */
.recrm-leads-table td[data-label="Priority"] .recrm-priority-badge,
.recrm-leads-table td[data-label="Pipeline"] .recrm-pipeline-badge {
min-width: auto !important;
width: 100% !important; /* Changed to 100% to stretch badge to container width */
max-width: 100% !important;
display: block !important; /* Make badge block level to fill container */
box-sizing: border-box !important;
}
/* Stage and Assigned To - full width on mobile */
.recrm-leads-table td[data-label="Stage"],
.recrm-leads-table td[data-label="Assigned To"] {
display: block !important;
width: 100% !important;
padding: 8px 0 !important;
}
/* Stage and Assigned badges - full width to fill container */
.recrm-leads-table td[data-label="Stage"] .recrm-stage-badge,
.recrm-leads-table td[data-label="Assigned To"] .recrm-assigned-badge {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
/* Ensure time ago alignment works in mobile view */
.recrm-leads-table td[data-label="Stage"] > div > div:first-child,
.recrm-leads-table td[data-label="Assigned To"] > div > div:first-child {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.recrm-leads-table td[data-label="Stage"] > div > div:first-child > span:last-child,
.recrm-leads-table td[data-label="Assigned To"] > div > div:first-child > span:last-child {
margin-left: auto !important;
padding-left: 8px !important;
text-align: right !important;
white-space: nowrap !important;
}
/* Last Summary - full width on mobile */
.recrm-leads-table td[data-label="Last Summary"] {
display: block !important;
width: 100% !important;
padding: 8px 0 !important;
}
/* Actions - full width on mobile with footer background */
.recrm-leads-table td[data-label="Actions"] {
display: block !important;
width: calc(100% + 30px) !important; /* Extend beyond card padding */
margin: 15px -15px -15px -15px !important; /* Negative margins to extend to card edges */
padding: 15px !important;
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
border-top: 1px solid #d0d0d0 !important;
border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; /* Rounded bottom corners */
}
.recrm-leads-table td[data-label="Actions"] .recrm-actions {
justify-content: center !important; /* Center buttons */
gap: 8px !important;
}
/* Label inside badge - only show in mobile */
.recrm-badge-label {
display: inline !important;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.5px;
margin-right: 6px;
opacity: 0.9;
white-space: nowrap !important; /* Fixed: Prevent label from wrapping */
}
/* Filters section - stack vertically */
/* Use wrap instead of column to allow last 2 items in same row */
.recrm-filters-row {
display: flex;
flex-direction: row !important; /* Override column */
flex-wrap: wrap !important;
gap: 10px;
}
/* First filters take full width */
.recrm-filter {
width: 100%;
flex: 0 0 100%; /* Force full width */
}
/* Last 2 filters share same row */
.recrm-filter:nth-last-child(2),
.recrm-filter:nth-last-child(1) {
width: auto !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
}
/* Checkbox stays on left */
.recrm-filter:nth-last-child(2) {
margin-bottom: 0 !important;
}
/* Button aligns to right */
.recrm-filter:nth-last-child(1) {
margin-left: auto !important; /* Push to right */
margin-bottom: 0 !important;
}
/* Target filter dropdowns by ID for full width */
#recrm-search,
input#recrm-search,
#recrm-filter-priority,
select#recrm-filter-priority,
#recrm-filter-pipeline,
select#recrm-filter-pipeline,
#recrm-filter-stage,
select#recrm-filter-stage,
#recrm-filter-agent,
select#recrm-filter-agent {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Generic text inputs and selects in filters */
.recrm-filter input[type="text"],
.recrm-filter select:not(#recrm-bulk-action) {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Clear button stays auto */
#recrm-clear-filters,
button#recrm-clear-filters {
width: auto !important;
}
/* Consistent sizing for mobile filters */
.recrm-filter input[type="text"],
.recrm-filter select {
height: 44px;
padding: 0 12px;
box-sizing: border-box;
}
.recrm-filter button {
height: 44px;
padding: 0 15px;
box-sizing: border-box;
}
/* Pagination - smaller buttons */
.recrm-pagination {
flex-direction: column;
gap: 10px;
}
.recrm-pagination-info,
.recrm-pagination-controls {
width: 100%;
text-align: center;
}
/* Bulk actions - stack */
/* Bulk actions - keep horizontal (side by side) on mobile */
.recrm-bulk-actions {
flex-direction: row !important; /* Keep horizontal */
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important; /* Don't wrap to next line */
}
.recrm-bulk-actions select {
flex: 1 1 auto !important; /* Grow to fill space */
min-width: 0 !important; /* Allow shrinking */
max-width: none !important;
}
.recrm-bulk-actions .button {
flex: 0 0 auto !important; /* Don't grow, fixed size */
white-space: nowrap !important;
padding: 8px 16px !important; /* Slightly smaller padding on mobile */
}
/* Filter controls inherit full width naturally from base styles */
/* Bulk action dropdown - flexible width to fit with button */
#recrm-bulk-action {
min-width: 0 !important; /* Allow shrinking */
max-width: none !important; /* No max width restriction */
}
}
/* ==========================================================================
Edit Field Icon and Modal
========================================================================== */
/* Edit field icons - inherit from icon-btn styling */
.recrm-edit-field-icon {
position: absolute;
top: 10px;
right: 8px;
transform: none;
}
.recrm-edit-field-icon:hover {
transform: scale(1.1);
}
/* Edit field modal - smaller than regular modals */
.recrm-edit-field-modal-content {
max-width: 450px;
}
#recrm-edit-field-modal .recrm-form-group {
margin-bottom: 15px;
}
#recrm-edit-field-modal .recrm-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #1d2327;
}
#recrm-edit-field-modal .recrm-field-input,
#recrm-edit-field-modal .recrm-field-select {
width: 100%;
padding: 8px 12px;
border: 1px solid #8c8f94;
border-radius: 4px;
font-size: 14px;
line-height: 1.5;
}
#recrm-edit-field-modal .recrm-field-input:focus,
#recrm-edit-field-modal .recrm-field-select:focus {
border-color: #2271b1;
outline: none;
box-shadow: 0 0 0 1px #2271b1;
}
/* ===========================
* ADD NEW INTEREST MODAL
* =========================== */
.recrm-add-interest-modal-content {
max-width: 800px;
max-height: 97.5vh !important; /* Almost full height */
overflow-y: auto;
overflow-x: hidden; /* Prevent horizontal scroll */
width: 100%;
box-sizing: border-box;
}
/* Step Indicator */
.recrm-step-indicator {
display: flex;
justify-content: space-between;
padding: 20px 30px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-bottom: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
}
.recrm-step-indicator::before {
content: '';
position: absolute;
top: 50%;
left: 30px;
right: 30px;
height: 2px;
background: #dcdcde;
z-index: 0;
transform: translateY(-50%);
}
.recrm-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
flex: 1;
}
.recrm-step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: 2px solid #dcdcde;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #8c8f94;
transition: all 0.3s ease;
margin-bottom: 8px;
}
.recrm-step-label {
font-size: 12px;
color: #8c8f94;
font-weight: 500;
transition: all 0.3s ease;
}
.recrm-step.active .recrm-step-number {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: white;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.recrm-step.active .recrm-step-label {
color: #667eea;
font-weight: 600;
}
.recrm-step.completed .recrm-step-number {
background: #46b450;
border-color: #46b450;
color: white;
}
.recrm-step.completed .recrm-step-label {
color: #46b450;
}
/* Form Styles */
.recrm-contact-search-form,
.recrm-contact-selection,
.recrm-contact-creation-form,
.recrm-interest-details-form,
.recrm-pipeline-selection-form,
.recrm-agent-assignment-form {
padding: 30px;
}
/* Search Header with Button */
.recrm-search-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
gap: 20px;
}
.recrm-search-header > div {
flex: 1;
}
.recrm-search-header h3 {
margin: 0 0 10px 0;
}
.recrm-search-header p {
margin: 0;
}
.recrm-search-header .button {
flex-shrink: 0;
white-space: nowrap;
}
.recrm-contact-search-form h3,
.recrm-contact-selection h3,
.recrm-contact-creation-form h3,
.recrm-interest-details-form h3,
.recrm-pipeline-selection-form h3,
.recrm-agent-assignment-form h3 {
margin: 0 0 10px 0;
color: #1d2327;
font-size: 18px;
font-weight: 600;
}
.recrm-contact-search-form p,
.recrm-contact-selection p,
.recrm-contact-creation-form p,
.recrm-interest-details-form p,
.recrm-pipeline-selection-form p,
.recrm-agent-assignment-form p {
margin: 0 0 20px 0;
color: #646970;
font-size: 14px;
}
/* Form Groups */
.recrm-form-group {
margin-bottom: 20px;
}
.recrm-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #1d2327;
font-size: 14px;
}
.recrm-form-group label .required {
color: #dc3232;
font-weight: 700;
}
.recrm-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.recrm-field-input,
.recrm-field-select,
.recrm-field-textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #dcdcde;
border-radius: 6px;
font-size: 14px;
color: #1d2327;
background: white;
transition: all 0.2s ease;
}
.recrm-field-input:focus,
.recrm-field-select:focus,
.recrm-field-textarea:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 1px #667eea;
}
.recrm-field-textarea {
resize: vertical;
font-family: inherit;
min-height: 100px;
}
/* Validation States */
.recrm-field-error {
border-color: #dc3232 !important;
box-shadow: 0 0 0 1px #dc3232 !important;
}
.recrm-error-message {
display: block;
color: #dc3232;
font-size: 13px;
margin-top: 6px;
font-weight: 500;
}
/* Contact Match Cards */
.recrm-contact-matches {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.recrm-contact-match-card {
position: relative;
border: 2px solid #dcdcde;
border-radius: 8px;
padding: 16px;
background: white;
transition: all 0.2s ease;
cursor: pointer;
}
.recrm-contact-match-card:has(input:checked) {
border-color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.recrm-contact-match-card input[type="radio"] {
position: absolute;
opacity: 0;
}
.recrm-contact-match-card label {
display: block;
cursor: pointer;
margin: 0;
}
.recrm-contact-match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.recrm-contact-match-header strong {
font-size: 16px;
color: #1d2327;
}
.recrm-contact-status {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
background: #667eea;
color: white;
font-size: 12px;
font-weight: 600;
text-transform: capitalize;
}
.recrm-contact-match-details {
display: flex;
flex-direction: column;
gap: 6px;
color: #646970;
font-size: 13px;
}
/* Contact actions in forms (different from detail view) */
.recrm-interest-details-form .recrm-contact-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #dcdcde;
flex-wrap: wrap;
}
/* Pipeline Fields */
.recrm-pipeline-fields {
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-radius: 8px;
border: 1px solid rgba(102, 126, 234, 0.2);
}
.recrm-pipeline-fields h4 {
margin: 0 0 15px 0;
color: #667eea;
font-size: 16px;
font-weight: 600;
}
/* Agent Info Card */
.recrm-agent-info-card {
display: flex;
align-items: center;
padding: 16px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-radius: 8px;
border: 1px solid rgba(102, 126, 234, 0.2);
}
.recrm-agent-info-card img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover;
border: 2px solid #667eea;
}
.recrm-agent-info-card strong {
display: block;
font-size: 16px;
color: #1d2327;
margin-bottom: 4px;
}
.recrm-agent-info-card div {
font-size: 13px;
color: #646970;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.recrm-add-interest-modal-content {
max-width: 95%;
width: 95%;
margin: 20px auto;
overflow-x: hidden; /* Prevent horizontal overflow */
}
/* Ensure all form elements stay within bounds */
.recrm-add-interest-modal-content * {
max-width: 100%;
box-sizing: border-box;
}
.recrm-add-interest-modal-body {
padding: 15px;
}
.recrm-step-indicator {
padding: 15px 20px;
}
.recrm-step-label {
font-size: 10px;
}
.recrm-step-number {
width: 35px;
height: 35px;
font-size: 14px;
}
.recrm-form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.recrm-contact-search-form,
.recrm-contact-selection,
.recrm-contact-creation-form,
.recrm-interest-details-form,
.recrm-pipeline-selection-form,
.recrm-agent-assignment-form {
padding: 20px;
}
.recrm-search-header {
flex-direction: column;
align-items: stretch;
}
.recrm-search-header .button {
width: 100%;
}
/* Allow contact action buttons to fit side by side if space allows */
.recrm-contact-actions,
.recrm-agent-contact-actions {
flex-direction: row !important; /* Keep horizontal if space allows */
flex-wrap: wrap !important;
gap: 8px !important;
}
.recrm-contact-actions .recrm-contact-action-btn,
.recrm-contact-actions button,
.recrm-agent-contact-actions .recrm-contact-action-btn,
.recrm-agent-contact-actions a {
flex: 0 1 auto !important; /* Don't grow, but allow shrink if needed */
min-width: 110px !important; /* Minimum width for readability */
max-width: calc(50% - 4px) !important; /* Max 2 buttons per row */
justify-content: center !important;
white-space: nowrap !important; /* Prevent text wrapping on mobile */
padding: 8px 16px !important; /* Ensure consistent padding on mobile */
}
/* All buttons use consistent padding on mobile (neutral style) */
.recrm-contact-actions .recrm-contact-action-btn,
.recrm-agent-contact-actions .recrm-contact-action-btn {
padding: 8px 16px !important;
}
}
/* ==========================================================================
Tag Badges (Contact & Interest Tags)
========================================================================== */
.recrm-tags-section {
margin: 20px 0;
padding: 20px;
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(102, 126, 234, 0.1);
}
.recrm-tags-section h4 {
margin: 0 0 12px 0;
color: #667eea;
font-size: 14px;
font-weight: 600;
}
#recrm-contact-tags-list,
#recrm-interest-tags-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
min-height: 40px;
}
.recrm-no-tags {
color: #646970;
font-size: 13px;
font-style: italic;
margin: 0;
}
.recrm-tag-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
transition: all 0.2s ease;
white-space: nowrap;
}
.recrm-tag-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.recrm-tag-badge .recrm-remove-tag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: rgba(255, 255, 255, 0.3);
border: none;
border-radius: 50%;
color: white;
font-size: 16px;
font-weight: bold;
line-height: 1;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.recrm-tag-badge .recrm-remove-tag:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
#recrm-add-contact-tag-btn-form,
#recrm-add-interest-tag-btn {
margin-top: 5px;
}
/* Tag Selection Modal */
.recrm-simple-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 100001;
padding: 20px;
}
.recrm-tag-selection-modal {
background: white;
border-radius: var(--radius-lg);
padding: 24px;
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
}
.recrm-tag-selection-modal h4 {
margin: 0 0 16px 0;
color: #1d2327;
font-size: 18px;
font-weight: 600;
}
.recrm-tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.recrm-tag-option {
padding: 10px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.recrm-tag-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}
/* Mobile responsive tags */
@media screen and (max-width: 782px) {
.recrm-tags-section {
padding: 15px;
margin: 15px 0;
}
.recrm-tag-badge,
.recrm-contact-tag,
.recrm-interest-tag {
font-size: 12px;
padding: 6px 10px;
}
.recrm-tag-selection-modal {
padding: 20px;
max-height: 70vh;
}
.recrm-tag-list {
gap: 8px;
}
.recrm-tag-option {
font-size: 13px;
padding: 8px 12px;
}
.recrm-tags-inline-container,
.recrm-tags-container {
gap: 5px;
}
}
/* ==========================================================================
Delete Functionality
========================================================================== */
/* Delete action buttons section at end of form - Modernized */
.recrm-delete-actions-section {
animation: fadeIn 0.3s ease;
}
.recrm-delete-contact-btn,
.recrm-delete-interest-btn {
/* Inline styles in JS handle appearance, this is fallback */
transition: all 0.2s ease !important;
}
.recrm-delete-contact-btn .dashicons,
.recrm-delete-interest-btn .dashicons {
color: white;
font-size: 16px;
width: 16px;
height: 16px;
vertical-align: middle;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Share Interest Modal - Must appear on top of lead detail modal */
#share-interest-modal {
z-index: 100005 !important;
}
#share-interest-modal .recrm-modal-overlay {
z-index: 100006 !important;
}
#share-interest-modal .recrm-modal-content {
z-index: 100007 !important;
}
/* Share modal styling */
#share-interest-modal .recrm-modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
#share-interest-modal .recrm-modal-header h2 {
color: white;
}
#share-interest-modal .recrm-modal-close {
color: white;
}
#share-interest-modal .recrm-modal-close:hover {
color: rgba(255, 255, 255, 0.8);
}
/* Share modal footer buttons */
#share-interest-modal .recrm-modal-footer {
display: flex;
gap: 10px;
justify-content: flex-end;
}
#share-interest-modal .recrm-modal-footer .button {
min-height: 40px !important;
padding: 8px 20px !important;
font-size: 14px !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#share-interest-modal .recrm-modal-footer .button-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
color: white !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}
#share-interest-modal .recrm-modal-footer .button-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}
#share-interest-modal .recrm-modal-footer .button-primary:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
#share-interest-modal .recrm-modal-footer .button-secondary {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid #ddd !important;
color: #667eea !important;
}
#share-interest-modal .recrm-modal-footer .button-secondary:hover {
background: rgba(255, 255, 255, 1) !important;
border-color: #667eea !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}
/* Share modal form elements */
#share-interest-modal .recrm-form-group {
margin-bottom: 20px;
}
#share-interest-modal .recrm-form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
#share-interest-modal .recrm-form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
}
#share-interest-modal .recrm-form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
#share-interest-modal .recrm-help-text {
display: block;
margin-top: 5px;
font-size: 12px;
color: #666;
}
#share-interest-modal .notice {
padding: 12px;
border-radius: 6px;
margin-bottom: 20px;
}
#share-interest-modal .notice-warning {
background: #fff3cd;
border: 1px solid #ffc107;
color: #856404;
}
/* Delete confirmation modal */
.recrm-delete-modal .recrm-modal-header {
background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
color: white;
}
.recrm-delete-modal .recrm-modal-header h2 {
color: white;
}
.recrm-delete-modal .recrm-modal-close {
color: white;
}
.recrm-delete-modal .recrm-modal-close:hover {
color: #ffebee;
}
.recrm-delete-modal ul {
list-style: disc;
padding-left: 30px;
color: #666;
}
.recrm-delete-modal ul li {
margin: 8px 0;
font-size: 14px;
}
.recrm-delete-modal #delete-confirmation-input {
margin-top: 10px;
}
.recrm-delete-modal #delete-confirmation-input:focus {
outline: none;
border-color: #d32f2f;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.recrm-delete-modal .recrm-confirm-delete:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Mobile responsive delete buttons section */
@media screen and (max-width: 782px) {
.recrm-delete-actions-section {
flex-direction: column !important;
padding: 15px !important;
}
.recrm-delete-contact-btn,
.recrm-delete-interest-btn {
width: 100% !important;
justify-content: center !important;
}
/* Enhanced scroll prevention on mobile */
body.recrm-modal-open {
position: fixed !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
touch-action: none !important; /* Prevent touch scrolling on body */
}
/* Modal overlay should not allow scroll through */
.recrm-modal-overlay {
touch-action: none !important;
overscroll-behavior: contain !important;
}
/* Only modal content should scroll */
.recrm-modal-content {
touch-action: pan-y !important; /* Allow vertical scrolling only in modal */
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
.recrm-modal-body {
touch-action: pan-y !important; /* Allow vertical scrolling */
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* ==========================================================================
Toast Notifications
========================================================================== */
.recrm-toast {
position: fixed;
top: 80px;
right: -400px;
min-width: 300px;
max-width: 500px;
padding: 16px 20px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 500;
z-index: 999999;
transition: right 0.3s ease-in-out;
backdrop-filter: blur(10px);
}
.recrm-toast-show {
right: 20px;
}
.recrm-toast-success {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}
.recrm-toast-error {
background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
color: white;
}
.recrm-toast-icon {
font-size: 24px;
font-weight: bold;
line-height: 1;
}
.recrm-toast-message {
flex: 1;
line-height: 1.4;
}
/* Mobile responsive toast */
@media screen and (max-width: 782px) {
.recrm-toast {
top: 60px;
left: 10px;
right: 10px;
min-width: auto;
max-width: none;
width: calc(100% - 20px);
}
.recrm-toast-show {
right: 10px;
}
}
/* ==========================================================================
Add New Interest Button - Modern Style
========================================================================== */
#recrm-add-interest-btn,
button#recrm-add-interest-btn.page-title-action,
.recrm-frontend-dashboard #recrm-add-interest-btn,
.recrm-frontend-dashboard button#recrm-add-interest-btn.page-title-action {
background: var(--primary-gradient) !important;
color: white !important;
border: none !important;
padding: 12px 24px !important;
font-size: 13px !important; /* Reduced from 15px */
font-weight: 600 !important;
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-md) !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
letter-spacing: 0.3px !important;
}
#recrm-add-interest-btn:hover,
button#recrm-add-interest-btn.page-title-action:hover {
background: linear-gradient(135deg, #7c8ff5 0%, #8659b3 100%) !important;
box-shadow: var(--shadow-lg) !important;
transform: translateY(-2px) !important;
}
#recrm-add-interest-btn:active,
button#recrm-add-interest-btn.page-title-action:active {
transform: translateY(0) !important;
box-shadow: var(--shadow-sm) !important;
}
/* Add icon before text */
#recrm-add-interest-btn::before,
button#recrm-add-interest-btn.page-title-action::before {
content: '\f502';
font-family: dashicons;
font-size: 18px;
line-height: 1;
}
/* Mobile responsive */
@media screen and (max-width: 782px) {
#recrm-add-interest-btn,
button#recrm-add-interest-btn.page-title-action {
width: 100% !important;
justify-content: center !important;
margin-top: 10px !important;
padding: 14px 20px !important;
font-size: 16px !important;
}
}
/* Frontend specific adjustments */
.recrm-frontend-dashboard #recrm-add-interest-btn {
margin-left: 0 !important;
}
/* ===========================
* CUSTOM FIELD MULTISELECT
* =========================== */
/* Multiselect options in edit modal */
.recrm-multiselect-options {
max-height: 300px;
overflow-y: auto;
border: 1px solid #dcdcde;
border-radius: 4px;
padding: 10px;
background: #fafafa;
}
.recrm-checkbox-option {
display: flex;
align-items: center;
padding: 10px 14px;
margin-bottom: 6px;
background: #fff;
border: 1px solid #dcdcde;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
position: relative;
}
.recrm-checkbox-option:last-child {
margin-bottom: 0;
}
.recrm-checkbox-option:hover {
border-color: #2271b1;
background: #f0f6fc;
transform: translateX(2px);
}
.recrm-checkbox-option input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.recrm-checkbox-option span {
display: flex;
align-items: center;
width: 100%;
}
/* Custom checkbox */
.recrm-checkbox-option span::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 12px;
border: 2px solid #8c8f94;
border-radius: 4px;
background: #fff;
transition: all 0.2s ease;
flex-shrink: 0;
position: relative;
}
.recrm-checkbox-option:hover span::before {
border-color: #2271b1;
}
.recrm-checkbox-option input[type="checkbox"]:checked + span::before {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}
/* Checkmark */
.recrm-checkbox-option input[type="checkbox"]:checked + span::after {
content: '';
position: absolute;
left: 18px;
top: 50%;
width: 6px;
height: 11px;
border: solid white;
border-width: 0 2px 2px 0;
transform: translateY(-50%) rotate(45deg);
}
/* Desktop view: 50% smaller checkboxes */
@media (min-width: 783px) {
.recrm-checkbox-option {
padding: 8px 12px;
font-size: 13px;
}
.recrm-checkbox-option span::before {
width: 10px;
height: 10px;
margin-right: 6px;
border-width: 1px;
border-radius: 2px;
}
.recrm-checkbox-option input[type="checkbox"]:checked + span::after {
left: 10px;
width: 3px;
height: 5.5px;
border-width: 0 1px 1px 0;
}
/* Reduce table checkbox size in desktop view */
.recrm-leads-table .check-column input[type="checkbox"],
.recrm-leads-table td.check-column input[type="checkbox"],
.recrm-leads-table th.check-column input[type="checkbox"] {
width: 14px !important;
height: 14px !important;
transform: scale(0.9);
}
}
/* Selected state - using :has() with fallback for older browsers */
.recrm-checkbox-option:has(input[type="checkbox"]:checked),
.recrm-checkbox-option.checked {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-color: #667eea;
}
/* Smooth animations */
.recrm-checkbox-option span::before,
.recrm-checkbox-option span::after {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===========================================================================
MOBILE PADDING OPTIMIZATION - Reduce padding by 50% to maximize space
=========================================================================== */
@media screen and (max-width: 782px) {
/* Almost full screen treatment for main detail modals - shows rounded corners */
#recrm-detail-modal,
#recrm-add-interest-modal,
#recrm-assets-main-modal {
padding: 10px !important; /* Small padding to show rounded corners */
}
#recrm-detail-modal .recrm-modal-content,
#recrm-add-interest-modal .recrm-modal-content,
#recrm-assets-main-modal .recrm-modal-content,
.recrm-add-interest-modal-content {
width: 100% !important;
max-width: 100% !important;
height: calc(100vh - 20px) !important; /* 20px total padding (10px top + 10px bottom) */
max-height: calc(100vh - 20px) !important;
border-radius: 16px !important; /* Visible rounded corners */
margin: 0 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow */
}
#recrm-detail-modal .recrm-modal-body,
#recrm-add-interest-modal .recrm-modal-body,
#recrm-assets-main-modal .recrm-modal-body {
padding: 10px !important;
flex: 1 !important; /* Fill available space between header and footer */
overflow-y: auto !important; /* Enable scrolling if content exceeds */
max-height: none !important; /* Remove max-height constraints on mobile */
}
#recrm-detail-modal .recrm-modal-header,
#recrm-add-interest-modal .recrm-modal-header,
#recrm-assets-main-modal .recrm-modal-header {
padding: 12px !important;
flex-shrink: 0 !important; /* Prevent header from shrinking */
border-radius: 16px 16px 0 0 !important; /* Match top corners */
}
#recrm-detail-modal .recrm-modal-footer,
#recrm-add-interest-modal .recrm-modal-footer,
#recrm-assets-main-modal .recrm-modal-footer {
padding: 10px 12px !important;
flex-shrink: 0 !important; /* Prevent footer from shrinking */
border-radius: 0 0 16px 16px !important; /* Match bottom corners */
}
/* Smaller modals (assign, stage, edit, etc.) - mobile specific styling */
#recrm-assign-modal,
#recrm-stage-modal,
#recrm-edit-field-modal,
#recrm-agent-picker-modal,
#recrm-fulltext-modal,
#recrm-badge-edit-modal {
padding: 20px !important; /* Standard padding for smaller modals */
/* Centering is handled by global rule above */
}
#recrm-assign-modal .recrm-modal-content,
#recrm-stage-modal .recrm-modal-content,
#recrm-edit-field-modal .recrm-modal-content,
#recrm-agent-picker-modal .recrm-modal-content,
#recrm-fulltext-modal .recrm-modal-content,
#recrm-badge-edit-modal .recrm-modal-content {
height: auto !important; /* Auto height based on content */
max-height: 90vh !important; /* Max height to prevent overflow */
width: 90% !important; /* Standard width */
max-width: 500px !important; /* Standard max width for sub-modals */
margin: 0 auto !important; /* Center horizontally */
}
/* Default modal styling for any other modals */
.recrm-modal {
padding: 10px !important;
}
/* Generic small modal content on mobile - don't override specific sub-modal rules above */
.recrm-modal:not(#recrm-assign-modal):not(#recrm-stage-modal):not(#recrm-edit-field-modal):not(#recrm-agent-picker-modal):not(#recrm-fulltext-modal):not(#recrm-badge-edit-modal):not(#recrm-detail-modal):not(#recrm-add-interest-modal):not(#recrm-assets-main-modal) .recrm-modal-content {
width: 95% !important;
max-width: 95% !important;
}
.recrm-modal-body {
padding: 15px !important;
}
.recrm-modal-header {
padding: 12px !important;
}
.recrm-modal-footer {
padding: 10px 12px !important;
}
/* Interest forms - reduce padding */
.recrm-interest-details-form,
.recrm-pipeline-selection-form,
.recrm-agent-assignment-form {
padding: 10px !important; /* Was 20-30px, now 10px */
}
/* Step indicator - reduce padding */
.recrm-step-indicator {
padding: 10px 15px !important; /* Was 15px 20px, now reduced */
}
/* Detail sections - reduce padding */
.recrm-detail-section {
padding: 10px !important; /* Was 20px, now 10px */
}
/* Tags section - reduce padding */
.recrm-tags-section {
padding: 10px !important; /* Was 15-20px, now 10px */
margin: 10px 0 !important; /* Reduce vertical margins too */
}
/* Interest fields container - reduce padding */
.recrm-interest-fields-container {
padding: 10px !important; /* Was 20px, now 10px */
}
/* Pipeline fields - reduce padding */
.recrm-pipeline-fields {
padding: 10px !important; /* Was 20px, now 10px */
}
/* Tag selection modal - reduce padding */
.recrm-tag-selection-modal {
padding: 10px !important; /* Was 20px, now 10px */
}
/* Note form - reduce padding */
.recrm-note-form {
padding: 10px !important; /* Was 20px, now 10px */
}
/* Empty states - reduce padding */
.recrm-empty-state {
padding: 10px !important; /* Was 20px, now 10px */
}
/* Filters section - reduce padding */
.recrm-filters-section {
padding: 10px !important; /* Reduce padding */
}
/* Main page container - reduce padding */
.recrm-leads-page {
padding: 5px !important; /* Was 10px, now 5px for more space */
}
}
/* ==========================================================================
WhatsApp Chat Modal
========================================================================== */
/* WhatsApp Chat Modal Styling */
.recrm-whatsapp-chat-content {
height: 650px !important;
max-height: 97.5vh !important; /* Almost full height */
}
/* WhatsApp Green Header - Force green always */
#recrm-whatsapp-chat-modal .recrm-modal-header,
#recrm-whatsapp-chat-modal .recrm-wa-chat-header,
.recrm-wa-chat-header {
background: #075e54 !important;
background-image: none !important;
background-color: #075e54 !important;
padding: 12px 20px !important;
border-bottom: 1px solid #056d62 !important;
}
#recrm-whatsapp-chat-modal .recrm-modal-header h2,
.recrm-wa-chat-header h2 {
color: white !important;
font-size: 16px !important;
font-weight: 500 !important;
margin: 0 !important;
}
#recrm-whatsapp-chat-modal .recrm-modal-header .recrm-modal-close,
.recrm-wa-chat-header .recrm-modal-close {
color: white !important;
opacity: 0.9 !important;
}
#recrm-whatsapp-chat-modal .recrm-modal-header .recrm-modal-close:hover,
.recrm-wa-chat-header .recrm-modal-close:hover {
opacity: 1 !important;
}
.recrm-whatsapp-messages {
background: #e5ddd5 !important;
position: relative;
}
.recrm-whatsapp-messages::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.05;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 10px, #25D366 10px, #25D366 11px),
repeating-linear-gradient(-45deg, transparent, transparent 10px, #25D366 10px, #25D366 11px);
pointer-events: none;
}
.recrm-wa-message {
animation: slideIn 0.2s ease;
position: relative;
z-index: 1;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spin 1s linear infinite;
display: inline-block;
}
.recrm-wa-bubble {
word-wrap: break-word;
word-break: break-word;
}
.recrm-wa-send-btn {
transition: all 0.2s ease;
}
.recrm-wa-send-btn:hover {
background: #20ba5a !important;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(37, 211, 102, 0.3);
}
.recrm-wa-send-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.recrm-wa-attach-btn {
transition: all 0.2s ease;
}
.recrm-wa-attach-btn:hover {
background: #e0e0e0 !important;
}
#recrm-wa-message-input {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
line-height: 1.4;
}
#recrm-wa-message-input:focus {
outline: none;
border-color: #25D366;
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);
}
.recrm-delivery-tick {
font-size: 14px;
vertical-align: middle;
}
.recrm-delivery-tick.double {
color: #4fc3f7;
}
.recrm-delivery-tick.single {
color: #999;
}
.recrm-delivery-tick.failed {
color: #f44336;
}
/* WhatsApp Attachment Menu */
.recrm-wa-attach-menu {
animation: fadeIn 0.2s ease;
}
.recrm-wa-attach-option {
font-size: 14px;
font-weight: 500;
color: #23282d;
}
/* WhatsApp Property Search Modal */
#recrm-wa-property-search-modal .recrm-modal-content {
background: white;
}
#recrm-wa-property-results {
padding: 10px;
}
.recrm-wa-property-card {
animation: fadeIn 0.3s ease;
}
.recrm-wa-property-card:active {
transform: scale(0.98);
}
/* Mobile responsive */
@media screen and (max-width: 782px) {
.recrm-whatsapp-chat-content {
max-width: 95% !important;
width: 95% !important;
height: 90vh !important;
margin: 5vh auto !important;
}
.recrm-wa-bubble {
max-width: 80% !important;
}
#recrm-wa-message-input {
font-size: 16px; /* Prevent zoom on iOS */
}
/* WhatsApp attach menu positioning on mobile */
.recrm-wa-attach-menu {
position: fixed !important;
bottom: 80px !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: auto !important;
}
/* Property cards stack on mobile */
.recrm-wa-property-card {
flex-direction: column !important;
}
.recrm-wa-property-card img {
width: 100% !important;
height: 180px !important;
}
}
/* ============================================================================
Frontend Agent Settings - Modern Design
============================================================================ */
.recrm-agent-settings-wrapper {
max-width: 1400px;
margin: 40px auto;
padding: 0 20px;
}
/* Modern Header with Gradient Background */
.recrm-settings-header {
background: var(--page-gradient);
border-radius: 16px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15);
position: relative;
overflow: hidden;
}
.recrm-settings-header::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(30%, -30%);
}
.recrm-settings-header-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.recrm-settings-logo {
max-width: 180px;
height: auto;
display: block;
border-radius: 6px;
/* Show logo in original colors - no filter */
}
/* Fallback if logo doesn't exist */
.recrm-settings-header-content:not(:has(.recrm-settings-logo)) {
justify-content: center;
}
.recrm-settings-header-content:not(:has(.recrm-settings-logo)) .recrm-settings-title-group {
text-align: center;
}
.recrm-settings-title-group {
flex: 1;
}
.recrm-settings-title {
margin: 0 0 10px 0;
font-size: 36px;
font-weight: 700;
color: var(--page-title-text);
letter-spacing: -0.5px;
line-height: 1.2;
}
.recrm-settings-subtitle {
margin: 0;
font-size: 16px;
color: var(--page-title-text);
opacity: 0.9;
font-weight: 400;
}
/* Modern Tab Navigation */
.recrm-settings-tabs {
display: flex;
gap: 8px;
margin-bottom: 30px;
padding: 8px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
flex-wrap: wrap;
justify-content: flex-start;
}
.recrm-tab-btn {
padding: 14px 24px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: #64748b;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
}
.recrm-tab-btn .dashicons {
font-size: 20px;
transition: transform 0.2s ease;
}
.recrm-tab-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--primary-gradient);
opacity: 0;
transition: opacity 0.2s ease;
border-radius: 8px;
z-index: 0;
}
.recrm-tab-btn > * {
position: relative;
z-index: 1;
}
.recrm-tab-label {
display: inline-block;
font-weight: inherit;
}
.recrm-tab-btn:hover {
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.recrm-tab-btn:hover::before {
opacity: 1;
}
.recrm-tab-btn:hover .dashicons {
transform: scale(1.1);
}
.recrm-tab-btn.active {
color: white;
background: var(--primary-gradient);
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}
.recrm-tab-btn.active .dashicons {
transform: scale(1.05);
}
/* Modern Content Area */
.recrm-settings-content {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
min-height: 500px;
position: relative;
}
.recrm-tab-content {
display: none;
}
.recrm-tab-content.active {
display: block;
animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Settings Sections */
.recrm-settings-section {
margin-bottom: 40px;
padding: 32px;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.recrm-settings-section:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.recrm-settings-section h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 24px 0;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.recrm-settings-section h3::before {
content: '';
width: 4px;
height: 24px;
background: var(--primary-gradient);
border-radius: 4px;
}
/* Coming Soon Placeholder Styling */
.recrm-coming-soon {
padding: 80px 40px;
text-align: center;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.recrm-coming-soon .dashicons {
font-size: 80px;
color: #cbd5e1;
margin-bottom: 24px;
display: block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.recrm-coming-soon h3 {
font-size: 24px;
font-weight: 700;
color: #475569;
margin: 0 0 12px 0;
}
.recrm-coming-soon h3::before {
display: none;
}
.recrm-coming-soon p {
font-size: 16px;
color: #64748b;
max-width: 500px;
margin: 0 auto;
line-height: 1.6;
}
/* WhatsApp Section Enhancements */
.recrm-settings-section .button {
padding: 12px 24px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
border: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.recrm-settings-section .button-primary {
background: var(--primary-gradient) !important;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}
.recrm-settings-section .button-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}
.recrm-settings-section .button-secondary {
background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important;
}
.recrm-settings-section .button-secondary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4) !important;
}
.recrm-settings-section .button:not(.button-primary):not(.button-secondary) {
background: white !important;
color: #64748b !important;
border: 2px solid #e2e8f0 !important;
}
.recrm-settings-section .button:not(.button-primary):not(.button-secondary):hover {
border-color: #cbd5e1 !important;
background: #f8fafc !important;
}
#recrm-wa-status-badge {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 24px !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: 15px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.recrm-wa-phone-display,
.recrm-wa-connected-display {
padding: 10px 16px;
background: white;
border-radius: 8px;
border: 2px solid #e2e8f0;
font-size: 14px !important;
color: #475569 !important;
}
#recrm-wa-qr-container {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
border: 2px dashed #cbd5e1 !important;
border-radius: 12px !important;
padding: 40px !important;
}
#recrm-wa-qr-container h3 {
color: #1e293b;
font-size: 22px;
font-weight: 700;
}
#recrm-wa-qr-frame {
border: 3px solid #e2e8f0 !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.notice.notice-info {
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
border-left: 4px solid #3b82f6 !important;
border-radius: 8px !important;
padding: 16px 20px !important;
}
/* Mobile Responsive */
@media screen and (max-width: 782px) {
.recrm-agent-settings-wrapper {
padding: 15px;
margin: 20px auto;
}
.recrm-settings-header {
padding: 24px;
border-radius: 12px;
margin-bottom: 24px;
}
.recrm-settings-header-content {
flex-direction: column;
text-align: center;
gap: 20px;
}
.recrm-settings-logo {
width: 140px;
}
.recrm-settings-title {
font-size: 28px;
}
.recrm-settings-subtitle {
font-size: 14px;
}
.recrm-settings-tabs {
flex-direction: column;
gap: 6px;
padding: 6px;
}
.recrm-tab-btn {
width: 100%;
justify-content: flex-start;
padding: 16px 20px;
border-radius: 8px;
}
.recrm-tab-btn:hover {
transform: translateY(0);
}
.recrm-settings-content {
padding: 24px;
border-radius: 12px;
}
.recrm-settings-section {
padding: 20px;
margin-bottom: 20px;
}
.recrm-settings-section h3 {
font-size: 18px;
}
.recrm-coming-soon {
padding: 60px 20px;
}
.recrm-coming-soon .dashicons {
font-size: 60px;
}
.recrm-coming-soon h3 {
font-size: 20px;
}
.recrm-coming-soon p {
font-size: 14px;
}
/* WhatsApp specific mobile adjustments */
#recrm-wa-qr-frame {
min-height: 550px !important;
}
#recrm-wa-qr-frame iframe {
width: 100%;
max-width: 350px;
height: 550px;
}
}
/* ==========================================================================
Lead Row Highlight Effect (for scroll-to functionality)
========================================================================== */
.recrm-highlight-row {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
animation: highlightPulse 2s ease-in-out;
border-left: 4px solid #667eea !important;
}
@keyframes highlightPulse {
0% {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.3);
}
50% {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
}
100% {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
/* ==========================================================================
Property Error Section - Mobile Responsive
========================================================================== */
.recrm-property-error .recrm-property-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@media screen and (max-width: 782px) {
.recrm-property-error .recrm-property-actions {
flex-direction: column;
}
.recrm-property-error .recrm-property-actions button {
width: 100% !important;
justify-content: center !important;
}
}
/* ============================================================================
ASSET MANAGEMENT SYSTEM STYLES
============================================================================ */
/* Assets Container */
#recrm-assets-container {
min-height: 200px;
}
/* Assets Grid */
.recrm-assets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
/* Asset Card */
.recrm-asset-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.recrm-asset-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #667eea;
}
/* Asset Preview */
.recrm-asset-preview {
height: 150px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.recrm-asset-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recrm-pdf-preview,
.recrm-file-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #666;
}
.recrm-pdf-preview .dashicons,
.recrm-file-preview .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
}
/* Asset Info */
.recrm-asset-info {
padding: 15px;
}
.recrm-asset-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.recrm-asset-type-icon {
font-size: 20px;
}
.recrm-asset-type-name {
font-weight: 600;
color: #2c3338;
font-size: 14px;
}
.recrm-asset-filename {
font-size: 13px;
color: #50575e;
margin-bottom: 8px;
word-break: break-word;
}
.recrm-asset-meta {
display: flex;
gap: 15px;
font-size: 12px;
color: #8c8f94;
margin-bottom: 8px;
}
/* Asset Badges */
.recrm-asset-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
margin-right: 5px;
margin-bottom: 5px;
}
.recrm-asset-badge.verified {
background: #d4edda;
color: #155724;
}
.recrm-asset-badge.expiry.valid {
background: #e3f2fd;
color: #0d47a1;
}
.recrm-asset-badge.expiry.expiring-warning {
background: #fff3cd;
color: #856404;
}
.recrm-asset-badge.expiry.expiring-soon {
background: #fff3cd;
color: #856404;
font-weight: 600;
}
.recrm-asset-badge.expiry.expired {
background: #f8d7da;
color: #721c24;
font-weight: 600;
}
/* Asset Fields */
.recrm-asset-fields {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
}
.recrm-asset-field {
font-size: 12px;
margin-bottom: 5px;
display: flex;
gap: 5px;
}
.recrm-asset-field .field-label {
font-weight: 600;
color: #666;
}
.recrm-asset-field .field-value {
color: #2c3338;
}
/* Asset Actions */
.recrm-asset-actions {
display: flex;
gap: 5px;
padding: 10px 15px;
border-top: 1px solid #f0f0f0;
background: #fafafa;
}
.recrm-btn-icon {
background: none;
border: none;
padding: 5px;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
color: #666;
}
.recrm-btn-icon:hover {
background: #e0e0e0;
color: #2c3338;
}
.recrm-btn-icon .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}
.recrm-asset-verify:hover {
background: #d4edda;
color: #155724;
}
.recrm-asset-delete:hover {
background: #f8d7da;
color: #721c24;
}
/* Empty State */
.recrm-assets-empty {
text-align: center;
padding: 60px 20px;
color: #8c8f94;
}
.recrm-assets-empty .dashicons {
font-size: 64px;
width: 64px;
height: 64px;
opacity: 0.3;
margin-bottom: 15px;
}
.recrm-assets-empty p {
margin: 10px 0;
}
.recrm-assets-empty .description {
font-size: 13px;
color: #a7aaad;
}
/* Add Asset Button */
.recrm-add-asset-btn {
margin-top: 15px;
}
.recrm-add-asset-btn .dashicons {
margin-right: 5px;
}
/* Upload Modal - REMOVED DUPLICATE - Using main .recrm-modal and .recrm-modal-content styles above */
.recrm-modal-header {
padding: 20px 25px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.recrm-modal-header h2 {
margin: 0;
font-size: 20px;
color: #2c3338;
}
.recrm-modal-close {
background: none;
border: none;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: #8c8f94;
padding: 0;
width: 30px;
height: 30px;
}
.recrm-modal-close:hover {
color: #2c3338;
}
.recrm-modal-body {
padding: 25px;
max-height: none; /* Removed height constraint - let modal expand */
overflow-y: auto;
flex: 1; /* Allow body to fill available space */
}
.recrm-modal-footer {
padding: 15px 25px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Form Groups */
.recrm-form-group {
margin-bottom: 20px;
}
.recrm-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3338;
}
.recrm-form-group input[type="text"],
.recrm-form-group input[type="date"],
.recrm-form-group input[type="number"],
.recrm-form-group select,
.recrm-form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #d0d5dd;
border-radius: 4px;
font-size: 14px;
}
.recrm-form-group textarea {
resize: vertical;
}
.recrm-form-group .description {
font-size: 12px;
color: #8c8f94;
margin-top: 5px;
margin-bottom: 8px;
}
/* File Upload Area */
.recrm-file-upload-area {
border: 2px dashed #d0d5dd;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.recrm-file-upload-area:hover {
border-color: #667eea;
background: #f8f9ff;
}
.recrm-file-upload-area.dragover {
border-color: #667eea;
background: #f8f9ff;
}
.recrm-upload-placeholder .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
color: #667eea;
margin-bottom: 10px;
}
.recrm-upload-placeholder p {
margin: 5px 0;
color: #2c3338;
}
.recrm-upload-placeholder .description {
font-size: 12px;
color: #8c8f94;
}
.recrm-file-selected {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.recrm-file-selected .dashicons {
color: #46b450;
font-size: 24px;
width: 24px;
height: 24px;
}
.recrm-file-selected .filename {
font-weight: 500;
color: #2c3338;
}
.recrm-remove-file {
background: #dc3232;
color: white;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
}
.recrm-remove-file:hover {
background: #c62828;
}
/* Custom Fields Container */
.recrm-custom-fields {
border-top: 1px solid #e0e0e0;
padding-top: 15px;
margin-top: 15px;
}
/* Notification */
.recrm-notification {
position: fixed;
top: 32px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 100001;
transform: translateX(400px);
transition: transform 0.3s ease;
max-width: 350px;
}
.recrm-notification.show {
transform: translateX(0);
}
.recrm-notification.success {
border-left: 4px solid #46b450;
}
.recrm-notification.error {
border-left: 4px solid #dc3232;
}
/* Loading State */
.recrm-loading {
text-align: center;
padding: 40px;
color: #8c8f94;
}
.recrm-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #667eea;
border-radius: 50%;
animation: recrm-spin 1s linear infinite;
}
@keyframes recrm-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Error State */
.recrm-error {
text-align: center;
padding: 40px;
color: #dc3232;
}
.recrm-error .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
margin-bottom: 15px;
}
/* Responsive */
@media screen and (max-width: 782px) {
.recrm-assets-grid {
grid-template-columns: 1fr;
}
/* Asset modal content already full screen from main mobile styles */
.recrm-file-upload-area {
padding: 30px 15px;
}
}
/* ============================================
ASSET TYPES MANAGEMENT PAGE
============================================ */
.recrm-asset-types-wrap .recrm-filter-bar {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.recrm-asset-types-wrap .recrm-filter-bar input[type="text"] {
flex: 1;
max-width: 400px;
}
.recrm-asset-types-wrap .recrm-toggle-label {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.recrm-asset-types-wrap .column-icon {
width: 50px;
text-align: center;
}
.recrm-asset-types-wrap .column-icon .dashicons {
font-size: 20px;
width: 20px;
height: 20px;
color: #2271b1;
}
.recrm-asset-types-wrap .column-name {
width: 25%;
}
.recrm-asset-types-wrap .column-key {
width: 15%;
}
.recrm-asset-types-wrap .column-related,
.recrm-asset-types-wrap .column-expiry {
width: 10%;
}
.recrm-asset-types-wrap .column-fields {
width: 15%;
}
.recrm-asset-types-wrap .column-status {
width: 10%;
}
.recrm-asset-types-wrap .column-actions {
width: 15%;
text-align: right;
}
.recrm-custom-fields-toolbar {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: space-between;
}
.recrm-custom-fields-toolbar .button-primary {
display: inline-flex;
align-items: center;
gap: 5px;
}
.recrm-custom-fields-container {
max-height: 400px;
overflow-y: auto;
padding: 10px 0;
}
.recrm-custom-fields-container .wp-list-table {
border: 1px solid #e0e0e0;
}
.recrm-custom-fields-container .wp-list-table th {
background: #f8f9fa;
font-weight: 600;
padding: 12px 10px;
border-bottom: 2px solid #e0e0e0;
}
.recrm-custom-fields-container .wp-list-table td {
padding: 12px 10px;
vertical-align: middle;
}
.recrm-custom-fields-container .column-label {
width: 25%;
}
.recrm-custom-fields-container .column-key {
width: 20%;
}
.recrm-custom-fields-container .column-type {
width: 15%;
}
.recrm-custom-fields-container .column-required {
width: 10%;
text-align: center;
}
.recrm-custom-fields-container .column-status {
width: 12%;
}
.recrm-custom-fields-container .column-actions {
width: 18%;
text-align: right;
}
.recrm-custom-fields-container .column-label .description {
display: block;
margin-top: 4px;
font-size: 12px;
color: #666;
font-style: italic;
}
.recrm-custom-fields-container tbody tr:hover {
background: #f8f9ff;
}
.recrm-asset-types-wrap .description {
color: #666;
font-style: italic;
}
.recrm-asset-types-wrap code {
background: #f0f0f1;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
}
.recrm-asset-types-wrap .recrm-no-data {
text-align: center;
padding: 40px;
color: #666;
font-size: 14px;
}
.recrm-custom-fields-container .recrm-no-data {
text-align: center;
padding: 30px 20px;
color: #666;
font-size: 13px;
background: #f8f9fa;
border: 1px dashed #d0d5dd;
border-radius: 6px;
margin: 10px 0;
}
/* Status badges */
.recrm-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.recrm-status-badge.recrm-status-active {
background: #d4edda;
color: #155724;
}
.recrm-status-badge.recrm-status-inactive {
background: #f8d7da;
color: #721c24;
}
.recrm-status-badge .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
}
/* Action buttons */
.recrm-asset-types-wrap .button-small {
padding: 4px 8px;
font-size: 12px;
height: auto;
line-height: 1.4;
}
.recrm-asset-types-wrap .button-small .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
}
/* Form styling */
.recrm-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.recrm-form-group {
margin-bottom: 15px;
}
.recrm-form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.recrm-form-group .required {
color: #d63638;
}
.recrm-form-group .description {
font-size: 12px;
color: #666;
font-style: italic;
margin-top: 5px;
}
/* Large modal for custom fields */
.recrm-modal-large .recrm-modal-content {
max-width: 900px;
}
/* Responsive for asset types page */
@media screen and (max-width: 782px) {
.recrm-form-row {
grid-template-columns: 1fr;
}
.recrm-asset-types-wrap .recrm-filter-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.recrm-asset-types-wrap .recrm-filter-bar input[type="text"] {
max-width: 100%;
width: 100%;
}
.recrm-asset-types-wrap .recrm-filter-bar .button {
width: 100%;
justify-content: center;
}
/* Convert table to card layout on mobile */
.recrm-asset-types-wrap .wp-list-table {
border: 0;
}
.recrm-asset-types-wrap .wp-list-table thead {
display: none;
}
.recrm-asset-types-wrap .wp-list-table tbody {
display: block;
}
.recrm-asset-types-wrap .wp-list-table tr {
display: block;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
padding: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.recrm-asset-types-wrap .wp-list-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border: 0;
border-bottom: 1px solid #f0f0f0;
text-align: left;
}
.recrm-asset-types-wrap .wp-list-table td:last-child {
border-bottom: 0;
}
.recrm-asset-types-wrap .wp-list-table td::before {
content: attr(data-label);
font-weight: 600;
color: #2c3338;
min-width: 120px;
margin-right: 10px;
}
.recrm-asset-types-wrap .column-icon::before {
content: "Icon";
}
.recrm-asset-types-wrap .column-name::before {
content: "Name";
}
.recrm-asset-types-wrap .column-key::before {
content: "Key";
}
.recrm-asset-types-wrap .column-related::before {
content: "Related To";
}
.recrm-asset-types-wrap .column-expiry::before {
content: "Expiry";
}
.recrm-asset-types-wrap .column-fields::before {
content: "Custom Fields";
}
.recrm-asset-types-wrap .column-status::before {
content: "Status";
}
.recrm-asset-types-wrap .column-actions::before {
content: "Actions";
}
.recrm-asset-types-wrap .column-actions {
text-align: left;
flex-wrap: wrap;
gap: 5px;
}
.recrm-asset-types-wrap .column-actions .button-small {
margin: 0;
}
/* Modal adjustments - full screen already set in main mobile styles */
.recrm-modal-footer {
flex-direction: column-reverse;
gap: 10px;
}
.recrm-modal-footer .button {
width: 100%;
margin: 0;
}
/* Custom fields toolbar on mobile */
.recrm-custom-fields-toolbar {
flex-direction: column;
align-items: stretch;
}
.recrm-custom-fields-toolbar .button-primary {
width: 100%;
justify-content: center;
}
/* Custom fields container on mobile */
.recrm-custom-fields-container {
max-height: 300px;
}
/* Table in custom fields modal */
.recrm-custom-fields-container .wp-list-table {
border: 0;
}
.recrm-custom-fields-container .wp-list-table thead {
display: none;
}
.recrm-custom-fields-container .wp-list-table tbody {
display: block;
}
.recrm-custom-fields-container .wp-list-table tr {
display: block;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.recrm-custom-fields-container .wp-list-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border: 0;
border-bottom: 1px solid #f0f0f0;
text-align: left;
}
.recrm-custom-fields-container .wp-list-table td:last-child {
border-bottom: 0;
}
.recrm-custom-fields-container .wp-list-table td::before {
content: attr(data-label);
font-weight: 600;
color: #2c3338;
min-width: 100px;
margin-right: 10px;
}
.recrm-custom-fields-container .column-label::before {
content: "Label";
}
.recrm-custom-fields-container .column-key::before {
content: "Key";
}
.recrm-custom-fields-container .column-type::before {
content: "Type";
}
.recrm-custom-fields-container .column-required::before {
content: "Required";
}
.recrm-custom-fields-container .column-status::before {
content: "Status";
}
.recrm-custom-fields-container .column-actions::before {
content: "Actions";
}
.recrm-custom-fields-container .column-actions {
flex-wrap: wrap;
gap: 5px;
}
.recrm-custom-fields-container .column-actions .button-small {
margin: 0;
}
}
@media screen and (max-width: 600px) {
/* Extra small screens */
.recrm-asset-types-wrap .button-small {
padding: 6px 10px;
font-size: 11px;
}
.recrm-asset-types-wrap .column-actions {
flex-direction: column;
align-items: flex-start;
}
.recrm-asset-types-wrap .column-actions .button-small {
width: 100%;
}
/* Custom fields actions on very small screens */
.recrm-custom-fields-container .column-actions {
flex-direction: column;
align-items: flex-start;
}
.recrm-custom-fields-container .column-actions .button-small {
width: 100%;
}
}
/* ============================================
COMBINED TIMELINE STYLES (Activities + Communications)
============================================ */
.recrm-activity-timeline-section {
margin-top: 20px;
}
/* Combined timeline container */
.recrm-combined-timeline {
max-height: 500px;
overflow-y: auto;
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
position: relative;
}
.recrm-timeline-container {
max-height: 500px;
overflow-y: auto;
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
position: relative;
}
.recrm-timeline-empty {
text-align: center;
padding: 30px;
color: #999;
font-style: italic;
}
.recrm-timeline-item {
display: flex;
margin-bottom: 16px;
clear: both;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Agent actions - left side */
.recrm-timeline-left {
justify-content: flex-start;
}
.recrm-timeline-left .recrm-timeline-bubble {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
/* Contact actions - right side */
.recrm-timeline-right {
justify-content: flex-end;
}
.recrm-timeline-right .recrm-timeline-bubble {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
}
/* Timeline bubble */
.recrm-timeline-bubble {
max-width: 70%;
padding: 12px 16px;
border-radius: 12px;
position: relative;
}
.recrm-timeline-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 12px;
opacity: 0.95;
}
.recrm-timeline-icon {
font-size: 16px;
}
.recrm-timeline-actor {
font-weight: 600;
}
.recrm-timeline-time {
margin-left: auto;
opacity: 0.8;
font-size: 11px;
}
.recrm-timeline-content {
font-size: 13px;
line-height: 1.5;
}
.recrm-timeline-content strong {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
.recrm-timeline-description {
margin-top: 4px;
opacity: 0.95;
font-size: 12px;
}
/* Scrollbar styling */
.recrm-timeline-container::-webkit-scrollbar {
width: 8px;
}
.recrm-timeline-container::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 10px;
}
.recrm-timeline-container::-webkit-scrollbar-thumb {
background: #667eea;
border-radius: 10px;
}
.recrm-timeline-container::-webkit-scrollbar-thumb:hover {
background: #5568d3;
}
/* Mobile responsiveness */
@media (max-width: 782px) {
.recrm-timeline-bubble {
max-width: 85%;
}
.recrm-timeline-container {
padding: 10px;
max-height: 400px;
}
}
/* Combined Timeline: Communications within timeline */
.recrm-combined-timeline .recrm-communication-item {
display: flex;
margin-bottom: 16px;
clear: both;
animation: slideIn 0.3s ease-out;
}
/* Incoming (client) messages - LEFT side, white background (WhatsApp style) */
.recrm-combined-timeline .recrm-communication-item.incoming {
justify-content: flex-start;
}
/* Outgoing (agent) messages - RIGHT side, green background (WhatsApp style) */
.recrm-combined-timeline .recrm-communication-item.outgoing {
justify-content: flex-end;
}
.recrm-combined-timeline .recrm-communication-bubble {
max-width: 70%;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Incoming (client) messages - LEFT side, white (WhatsApp style) */
.recrm-combined-timeline .recrm-communication-item.incoming .recrm-communication-bubble {
background: #ffffff;
color: #000000;
border: 1px solid #e5e5e5;
border-radius: 0 8px 8px 8px;
}
/* Outgoing (agent) messages - RIGHT side, WhatsApp green */
.recrm-combined-timeline .recrm-communication-item.outgoing .recrm-communication-bubble {
background: #dcf8c6;
color: #000000;
border-radius: 8px 0 8px 8px;
}
.recrm-combined-timeline .recrm-communication-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 11px;
opacity: 0.7;
color: #666;
}
.recrm-combined-timeline .recrm-communication-header span:last-child {
margin-left: auto;
}
.recrm-combined-timeline .recrm-communication-message {
font-size: 14px;
line-height: 1.5;
color: #000;
}
/* Make links visible in WhatsApp-style bubbles */
.recrm-combined-timeline .recrm-communication-message a {
color: #075e54;
text-decoration: underline;
}
.recrm-combined-timeline .recrm-communication-item.outgoing .recrm-communication-message a {
color: #128c7e;
}
/* Delivery ticks styling (WhatsApp style) */
.recrm-combined-timeline .recrm-delivery-tick {
font-size: 14px;
margin-left: 4px;
}
.recrm-combined-timeline .recrm-delivery-tick.double {
color: #4fc3f7;
}
.recrm-combined-timeline .recrm-delivery-tick.single {
color: #999;
}
.recrm-combined-timeline .recrm-delivery-tick.failed {
color: #e53935;
}
/* Scrollbar for combined timeline */
.recrm-combined-timeline::-webkit-scrollbar {
width: 8px;
}
.recrm-combined-timeline::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 10px;
}
.recrm-combined-timeline::-webkit-scrollbar-thumb {
background: #667eea;
border-radius: 10px;
}
.recrm-combined-timeline::-webkit-scrollbar-thumb:hover {
background: #5568d3;
}
/* Mobile responsiveness for combined timeline */
@media (max-width: 782px) {
.recrm-combined-timeline {
padding: 10px;
max-height: 400px;
}
.recrm-combined-timeline .recrm-communication-bubble,
.recrm-combined-timeline .recrm-timeline-bubble {
max-width: 85%;
}
}
/* ============================================
NOTE REMINDER STYLES
============================================ */
/* Reminder row in add/edit forms */
.recrm-reminder-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 12px;
background: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #2271b1;
}
.recrm-reminder-row label {
font-size: 13px;
color: #1d2327;
margin: 0;
min-width: 150px;
}
.recrm-reminder-row input[type="datetime-local"] {
font-size: 13px;
}
.recrm-reminder-row .button {
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
/* Reminder badge in note card */
.recrm-note-reminder {
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
}
.recrm-note-reminder.pending {
background: #e0f2ff;
color: #0066cc;
border: 1px solid #b3d9ff;
}
.recrm-note-reminder.overdue {
background: #fff3cd;
color: #856404;
border: 1px solid #ffd966;
animation: pulse-warning 2s infinite;
}
.recrm-note-reminder.sent {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
/* Pulse animation for overdue reminders */
@keyframes pulse-warning {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Mobile adjustments */
@media (max-width: 782px) {
.recrm-reminder-row {
flex-direction: column;
align-items: stretch;
}
.recrm-reminder-row label {
min-width: auto;
margin-bottom: 5px;
}
.recrm-reminder-row input[type="datetime-local"] {
width: 100%;
}
}