.ccd-kpis { 
display: flex; 
gap: 16px; 
flex-wrap: wrap; 
margin: 16px 0; 
}
.ccd-kpi { 
background: #fff; 
border: 1px solid #e5e5e5; 
border-radius: 8px; 
padding: 12px 16px; 
min-width: 200px; 
box-shadow: 0 1px 2px rgba(0,0,0,0.03); 
cursor: pointer; 
}
.ccd-kpi .ccd-kpi-label { 
display: block; 
font-weight: 600; 
color: #555; 
}
.ccd-kpi .ccd-kpi-value { 
font-size: 20px; 
color: #111; 
}
.ccd-green { color: #1f8b4c; }
.ccd-amber { color: #c58b00; }
.ccd-red { color: #c0392b; }
.ccd-table { 
width: 100%; 
border-collapse: collapse; 
}
.ccd-table th, 
.ccd-table td { 
padding: 8px 10px; 
border-bottom: 1px solid #eee; 
text-align: left; 
} .ccd-kpi-bar {
display: flex;
gap: 20px;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.ccd-kpi-bar span {
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
backdrop-filter: blur(10px);
}
.ccd-customer-stats {
margin-bottom: 15px;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
} .ccd-form {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
font-family: 'Arial', sans-serif;
}
.ccd-form-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.ccd-form-group label {
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.ccd-form-group input,
.ccd-form-group select,
.ccd-form-group textarea {
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.ccd-form-group input:focus,
.ccd-form-group select:focus,
.ccd-form-group textarea:focus {
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
outline: none;
}
.ccd-button {
background-color: #0073aa;
color: #fff;
padding: 12px 18px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}
.ccd-button:hover {
background-color: #005f8d;
}
.ccd-button:disabled {
background-color: #ccc;
cursor: not-allowed;
} .ccd-empty-state {
text-align: center;
padding: 40px 20px;
background: #f0f9ff;
border-radius: 8px;
border: 2px dashed #3b82f6;
margin-top: 20px;
}
.ccd-complaints-list {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
display: grid;
gap: 1rem;
}
.ccd-complaint-card {
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 10px;
padding: 15px 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
transition: transform 0.2s, box-shadow 0.2s;
}
.ccd-complaint-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ccd-complaint-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px dashed #ddd;
padding-bottom: 6px;
margin-bottom: 8px;
}
.ccd-complaint-id {
font-weight: 600;
color: #1f2937;
}
.ccd-complaint-meta,
.ccd-complaint-subject,
.ccd-complaint-description {
margin-bottom: 8px;
color: #374151;
line-height: 1.5;
}
.ccd-complaint-actions {
margin-top: 10px;
display: flex;
gap: 10px;
flex-wrap: wrap;
} .ccd-status,
.ccd-status-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ccd-status-open,
.status-open {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
}
.ccd-status-resolved,
.status-resolved {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.ccd-status-pending {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.ccd-status-in-progress {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.status-closed {
background: #757575;
color: #ffffff;
} .ccd-view-interactions {
background: #0073aa !important;
color: white !important;
border: none !important;
padding: 8px 12px !important;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
}
.ccd-view-interactions:hover {
background: #005f8d !important;
transform: translateY(-1px);
}
.ccd-delete-complaint {
background-color: #f44336 !important;
color: #fff !important;
border: none !important;
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
}
.ccd-delete-complaint:hover {
background-color: #d32f2f !important;
transform: translateY(-1px);
}  body.ccd-modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
} .ccd-interactions-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
display: none !important; align-items: center !important;
justify-content: center !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
} .ccd-interactions-modal[style*="display: block"],
.ccd-interactions-modal[style*="display: flex"],
.ccd-interactions-modal.show {
display: flex !important;
} .ccd-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.75) !important;
z-index: 999998 !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
} .ccd-modal-box {
position: relative !important;
background: #ffffff !important;
width: 90% !important;
max-width: 700px !important;
max-height: 90vh !important;
margin: auto !important;
border-radius: 12px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
z-index: 999999 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
cursor: default; transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
} .ccd-modal-header {
padding: 20px 25px !important;
border-bottom: 2px solid #e5e7eb !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background: #f9fafb !important;
flex-shrink: 0 !important;
}
.ccd-modal-header h3,
.ccd-modal-header h4 {
margin: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #1f2937 !important;
flex: 1 !important;
padding-right: 15px !important;
} .ccd-close-modal {
background: none !important;
border: none !important;
font-size: 32px !important;
line-height: 1 !important;
cursor: pointer !important;
color: #6b7280 !important;
padding: 0 !important;
margin: 0 !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
user-select: none;
-webkit-user-select: none;
}
.ccd-close-modal:hover {
background: #fee2e2 !important;
color: #dc2626 !important;
transform: scale(1.1);
}
.ccd-close-modal:active {
transform: scale(0.95);
} .ccd-modal-body {
padding: 25px !important;
overflow-y: auto !important;
flex-grow: 1 !important;
-webkit-overflow-scrolling: touch;
}  .ccd-full-description {
background: #f0f9ff !important;
padding: 15px 20px !important;
border-radius: 8px !important;
margin-bottom: 25px !important;
border-left: 4px solid #3b82f6 !important;
}
.ccd-full-description h5 {
margin: 0 0 10px 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #1e40af !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ccd-full-description p {
margin: 0 !important;
color: #374151 !important;
line-height: 1.6 !important;
} .ccd-interactions-section {
margin-bottom: 25px !important;
}
.ccd-interactions-section h5 {
margin: 0 0 15px 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #1f2937 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ccd-interactions-container {
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
padding: 15px !important;
max-height: 350px !important;
overflow-y: auto !important;
background: #fafafa !important;
-webkit-overflow-scrolling: touch;
} .ccd-interaction-item {
margin-bottom: 15px !important;
padding: 12px 15px !important;
border-radius: 8px !important;
border-left: 4px solid #d1d5db !important;
background: #ffffff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.ccd-interaction-item:last-child {
margin-bottom: 0 !important;
}
.ccd-interaction-admin {
background: #eff6ff !important;
border-left-color: #3b82f6 !important;
}
.ccd-interaction-vendor {
background: #fef3c7 !important;
border-left-color: #f59e0b !important;
}
.ccd-interaction-customer {
background: #f0fdf4 !important;
border-left-color: #22c55e !important;
}
.ccd-interaction-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 8px !important;
font-size: 13px !important;
}
.ccd-interaction-author {
font-weight: 700 !important;
color: #1f2937 !important;
}
.ccd-interaction-date {
color: #6b7280 !important;
font-size: 12px !important;
}
.ccd-interaction-text {
color: #374151 !important;
line-height: 1.6 !important;
font-size: 14px !important;
} .ccd-reply-section {
background: #f9fafb !important;
padding: 20px !important;
border-radius: 8px !important;
border: 1px solid #e5e7eb !important;
}
.ccd-reply-section h5 {
margin: 0 0 12px 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #1f2937 !important;
}
.ccd-reply-textarea {
width: 100% !important;
padding: 12px 15px !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
margin-bottom: 12px !important;
font-family: inherit !important;
font-size: 14px !important;
resize: vertical !important;
min-height: 80px !important;
transition: border-color 0.2s ease !important;
}
.ccd-reply-textarea:focus {
outline: none !important;
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
.ccd-send-reply {
background: #3b82f6 !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-size: 14px !important;
transition: background 0.2s ease !important;
}
.ccd-send-reply:hover {
background: #2563eb !important;
}
.ccd-send-reply:disabled {
background: #9ca3af !important;
cursor: not-allowed !important;
} .ccd-loading {
text-align: center !important;
color: #6b7280 !important;
padding: 30px 20px !important;
font-style: italic !important;
font-size: 14px !important;
} .ccd-complaints-table {
width: 100%;
border-collapse: collapse;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
}
.ccd-complaints-table thead {
background: #f8f9fa;
}
.ccd-complaints-table th {
padding: 15px 12px;
text-align: left;
font-weight: 600;
color: #495057;
border-bottom: 2px solid #dee2e6;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ccd-complaints-table td {
padding: 15px 12px;
border-bottom: 1px solid #e9ecef;
vertical-align: middle;
}
.ccd-complaints-table tbody tr:hover {
background: #f8f9fa;
} .ccd-toggle-details {
display: inline-block;
margin-left: 10px;
font-size: 12px;
color: #007bff;
background: none;
border: none;
cursor: pointer;
text-decoration: none;
padding: 0;
transition: color 0.2s;
}
.ccd-toggle-details:hover {
color: #0056b3;
text-decoration: underline;
} .ccd-details-row {
background: #f8f9fa;
}
.ccd-complaint-details {
background: #fff;
padding: 25px;
border-radius: 8px;
margin: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ccd-complaint-details h4 {
margin: 0 0 15px 0;
color: #343a40;
font-size: 16px;
font-weight: 600;
border-bottom: 2px solid #007bff;
padding-bottom: 8px;
}
.ccd-complaint-details p {
margin: 10px 0;
line-height: 1.6;
color: #495057;
} .ccd-meta-info {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
border-left: 4px solid #6c757d;
}
.ccd-meta-info p {
margin: 5px 0;
font-size: 13px;
color: #495057;
}
.ccd-meta-info strong {
color: #343a40;
min-width: 120px;
display: inline-block;
} .ccd-replies-list {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid #007bff;
}
.ccd-reply-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #dee2e6;
}
.ccd-reply-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ccd-reply-item strong {
color: #007bff;
font-size: 14px;
}
.ccd-reply-date {
font-size: 11px;
color: #6c757d;
margin-left: 10px;
font-weight: normal;
}
.ccd-reply-ip {
font-size: 11px;
color: #6c757d;
margin-left: 10px;
font-weight: normal;
background: #e9ecef;
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
.ccd-reply-item p {
margin: 8px 0 0 0;
color: #495057;
line-height: 1.5;
} .ccd-reply-form {
margin-top: 25px;
padding-top: 25px;
border-top: 2px solid #dee2e6;
}
.ccd-reply-form h4 {
margin: 0 0 15px 0;
color: #343a40;
} .ccd-reply-btn,
.ccd-submit-reply,
.ccd-cancel-reply {
padding: 8px 16px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
border: none;
font-weight: 500;
}
.ccd-reply-btn {
background: #007bff;
color: #fff;
}
.ccd-reply-btn:hover {
background: #0056b3;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ccd-submit-reply {
background: #28a745;
color: #fff;
}
.ccd-submit-reply:hover {
background: #218838;
}
.ccd-submit-reply:disabled {
background: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
.ccd-cancel-reply {
background: #6c757d;
color: #fff;
margin-left: 10px;
}
.ccd-cancel-reply:hover {
background: #5a6268;
} .ccd-order-issue {
margin: 20px 0;
}
#ccd-issue-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.ccd-modal-content {
background: #fff;
max-width: 520px;
margin: 80px auto;
padding: 20px;
border-radius: 8px;
}
.ccd-modal-content h3 {
margin: 0 0 20px 0;
color: #343a40;
}
.ccd-modal-content label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #495057;
}
.ccd-modal-content input,
.ccd-modal-content textarea {
width: 100%;
padding: 10px;
border: 2px solid #ced4da;
border-radius: 5px;
font-size: 14px;
margin-bottom: 15px;
}
.ccd-modal-content input:focus,
.ccd-modal-content textarea:focus {
outline: none;
border-color: #007bff;
} .ccd-notification-badge {
display: inline-block;
background: #dc3545;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 2px 6px;
border-radius: 10px;
margin-left: 8px;
min-width: 18px;
text-align: center;
line-height: 1.4;
vertical-align: middle;
}
.ccd-notification-badge.pulse {
animation: pulse 2s infinite;
} .ccd-admin-reply-section {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
}
.ccd-admin-reply-section h4 {
margin: 0 0 15px 0;
color: #856404;
display: flex;
align-items: center;
gap: 8px;
}
.ccd-admin-reply-section h4:before {
content: "👨‍💼";
font-size: 20px;
}
.ccd-reply-to-selector {
margin: 15px 0;
}
.ccd-reply-to-selector label {
display: inline-block;
margin-right: 20px;
font-weight: normal;
}
.ccd-reply-to-selector input[type="radio"] {
margin-right: 5px;
} .ccd-admin-badge {
background: #ffc107;
color: #856404;
padding: 2px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: bold;
margin-left: 8px;
} @keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.ccd-interactions-modal {
animation: fadeIn 0.3s ease;
}
.ccd-modal-box {
animation: slideUp 0.3s ease;
} @media (max-width: 768px) {
.ccd-kpi-bar {
flex-direction: column;
gap: 10px;
}
.ccd-complaints-table {
font-size: 12px;
}
.ccd-complaints-table th,
.ccd-complaints-table td {
padding: 8px 6px;
}
.ccd-toggle-details {
display: block;
margin: 5px 0 0 0;
}
.ccd-modal-box {
width: 95% !important;
max-height: 95vh !important;
margin: 10px auto !important;
}
.ccd-modal-header {
padding: 15px 20px !important;
}
.ccd-modal-header h3,
.ccd-modal-header h4 {
font-size: 16px !important;
}
.ccd-modal-body {
padding: 20px !important;
}
.ccd-interactions-container {
max-height: 250px !important;
}
.ccd-form {
padding: 15px;
}
.ccd-complaint-card {
padding: 12px 15px;
}
}
@media (max-width: 480px) {
.ccd-kpi-bar span {
font-size: 14px;
padding: 8px 15px;
}
.ccd-complaint-actions {
flex-direction: column;
}
.ccd-complaint-actions button {
width: 100%;
}
} .ccd-vendor-complaints-wrapper > p,
.ccd-customer-complaints-wrapper > p {
text-align: center;
padding: 40px 20px;
color: #6c757d;
font-size: 16px;
} .ccd-close-modal,
.ccd-modal-overlay {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
} .ccd-text-center {
text-align: center;
}
.ccd-mt-20 {
margin-top: 20px;
}
.ccd-mb-20 {
margin-bottom: 20px;
}
.ccd-p-20 {
padding: 20px;
} .ccd-interactions-container {
scroll-behavior: smooth;
} .ccd-button:focus-visible,
.ccd-send-reply:focus-visible,
.ccd-view-interactions:focus-visible,
.ccd-close-modal:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}  .ccd-vendor-complaints-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
} @media (max-width: 1024px) {
.ccd-complaints-table {
font-size: 13px;
}
.ccd-complaints-table th,
.ccd-complaints-table td {
padding: 10px 8px;
}
}
@media (max-width: 768px) { .ccd-complaints-table {
display: block;
overflow-x: auto;
white-space: nowrap;
font-size: 12px;
}
.ccd-complaints-table thead {
display: none; }
.ccd-complaints-table tbody,
.ccd-complaints-table tr {
display: block;
width: 100%;
}
.ccd-complaints-table tr {
margin-bottom: 15px;
border: 2px solid #e1e5e9;
border-radius: 8px;
background: white;
padding: 15px;
}
.ccd-complaints-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f1f3f4;
text-align: right;
white-space: normal;
}
.ccd-complaints-table td:last-child {
border-bottom: none;
} .ccd-complaints-table td:before {
content: attr(data-label);
font-weight: 600;
color: #646970;
text-align: left;
flex-shrink: 0;
margin-right: 10px;
} .ccd-complaints-table td .button {
display: block;
width: 100%;
margin: 5px 0;
text-align: center;
} .ccd-kpi-bar {
flex-direction: column;
gap: 10px;
padding: 15px;
}
.ccd-kpi-bar span {
font-size: 14px;
padding: 8px 15px;
} .ccd-complaint-details {
padding: 15px;
}
.ccd-meta-info {
padding: 12px;
}
.ccd-reply-form,
.ccd-admin-reply-section {
padding: 15px;
}
.ccd-reply-textarea {
font-size: 14px;
}
.ccd-reply-to-selector {
flex-direction: column;
gap: 10px;
}
.ccd-reply-to-selector label {
display: block;
margin: 8px 0;
}
}
@media (max-width: 480px) {
.ccd-vendor-complaints-wrapper {
padding: 10px;
}
.ccd-kpi-bar span {
font-size: 13px;
padding: 6px 12px;
}
.ccd-complaint-details h4 {
font-size: 1.1em;
}
.ccd-description-box {
padding: 12px;
font-size: 13px;
}
.button {
font-size: 13px !important;
padding: 8px 12px !important;
}
} @media (max-width: 768px) {
.ccd-vendor-complaints {
padding: 10px;
}
.ccd-vendor-header h1 {
font-size: 1.5em;
}
.ccd-vendor-stats {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.ccd-stat-card {
padding: 15px 12px;
}
.ccd-stat-number {
font-size: 2em;
}
.ccd-stat-label {
font-size: 0.85em;
}
.ccd-complaint-card {
margin-bottom: 15px;
}
.ccd-card-header {
flex-direction: column;
gap: 10px;
padding: 15px;
}
.ccd-card-body {
padding: 15px;
}
.ccd-complaint-title {
font-size: 1.2em;
}
.ccd-key-details {
grid-template-columns: 1fr;
gap: 12px;
padding: 15px;
}
.ccd-card-actions {
flex-direction: column;
padding: 15px;
}
.ccd-card-actions .button {
width: 100%;
text-align: center;
justify-content: center;
}
.ccd-updates-section {
padding: 0;
}
.ccd-updates-header,
.ccd-add-update-form {
padding: 15px;
}
.ccd-update-options {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ccd-visibility-options {
flex-direction: column;
gap: 10px;
}
.ccd-submit-update {
width: 100%;
}
}
@media (max-width: 480px) {
.ccd-vendor-stats {
grid-template-columns: 1fr;
gap: 10px;
}
.ccd-empty-state {
padding: 40px 20px;
}
.ccd-empty-icon {
font-size: 3em;
}
.ccd-complaint-id {
font-size: 1em;
}
.ccd-complaint-date {
font-size: 0.8em;
}
.status-badge {
font-size: 0.75em;
padding: 4px 8px;
}
.ccd-detail-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.ccd-description-content {
padding: 12px;
font-size: 0.9em;
}
} @media (max-width: 768px) {
.ccd-vendor-complaints-wrapper,
.ccd-vendor-complaints {
overflow-x: hidden !important;
max-width: 100vw;
}
* {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
table {
table-layout: auto;
}
} @media (max-width: 768px) {
.button,
.ccd-toggle-details,
.ccd-reply-btn,
.ccd-admin-reply-btn {
min-height: 44px !important;
padding: 10px 15px !important;
font-size: 14px !important;
}
input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 8px;
}
.ccd-option-label {
padding: 10px 0;
cursor: pointer;
}
}  .ccd-global-notification {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3);
animation: pulseGlow 2s infinite;
}
.ccd-notification-icon {
font-size: 24px;
animation: ring 2s infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3); }
50% { box-shadow: 0 4px 20px rgba(238, 90, 111, 0.6); }
}
@keyframes ring {
0%, 100% { transform: rotate(0deg); }
10%, 30% { transform: rotate(-15deg); }
20% { transform: rotate(15deg); }
} .ccd-complaint-row.has-unread {
background: #fff8e1 !important;
border-left: 4px solid #ff6b6b !important;
}
.ccd-complaint-row.has-unread:hover {
background: #fff9c4 !important;
} .ccd-unread-badge {
display: inline-block;
background: #ff6b6b;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: blink 1.5s infinite;
box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
} .ccd-unread-kpi {
background: rgba(255, 107, 107, 0.1) !important;
border: 2px solid #ff6b6b !important;
color: #ff6b6b !important;
animation: pulseKpi 2s infinite;
font-weight: bold !important;
}
@keyframes pulseKpi {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
} .button-badge {
background: #ff6b6b;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
margin-left: 5px;
font-weight: bold;
display: inline-block;
min-width: 18px;
text-align: center;
} .ccd-reply-trail-section {
margin: 25px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 2px solid #e1e5e9;
}
.ccd-reply-trail-section h4 {
margin-top: 0;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
color: #1d2327;
font-size: 18px;
} .ccd-new-messages-indicator {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
animation: pulse 2s infinite;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
display: inline-flex;
align-items: center;
gap: 5px;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
} .ccd-reply-trail-container {
max-height: 500px;
overflow-y: auto;
background: white;
border-radius: 8px;
padding: 15px;
border: 1px solid #ddd;
scroll-behavior: smooth;
}
.ccd-reply-trail-container::-webkit-scrollbar {
width: 8px;
}
.ccd-reply-trail-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.ccd-reply-trail-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.ccd-reply-trail-container::-webkit-scrollbar-thumb:hover {
background: #555;
} .ccd-no-messages {
text-align: center;
padding: 40px 20px;
color: #999;
}
.ccd-no-messages p {
font-size: 16px;
margin: 0;
} .ccd-reply-message {
margin-bottom: 15px;
padding: 14px 16px;
border-radius: 12px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ccd-reply-message:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
} .ccd-reply-message.unread {
background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
border: 2px solid #ff6b6b;
border-left: 5px solid #ff6b6b;
animation: highlightNew 2s;
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
}
@keyframes highlightNew {
0% { 
background: #ffebee;
transform: scale(1.02);
}
100% { 
background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
transform: scale(1);
}
} .ccd-reply-message.from-admin {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #2196f3;
}
.ccd-reply-message.from-vendor {
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
border-left: 5px solid #9c27b0;
}
.ccd-reply-message.from-customer {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
border-left: 5px solid #4caf50;
} .ccd-reply-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 13px;
}
.ccd-reply-author-block {
display: flex;
align-items: center;
gap: 8px;
}
.ccd-reply-icon {
font-size: 18px;
}
.ccd-reply-author {
font-weight: 700;
color: #1d2327;
font-size: 14px;
}
.ccd-reply-time {
color: #646970;
font-size: 12px;
font-weight: 500;
} .ccd-reply-new-badge {
background: #ff6b6b;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: blink 1.5s infinite;
box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
} .ccd-reply-content {
color: #2c3338;
line-height: 1.6;
word-wrap: break-word;
font-size: 14px;
white-space: pre-wrap;
} .ccd-private-indicator {
margin-top: 10px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.05);
border-radius: 6px;
font-size: 12px;
color: #646970;
font-style: italic;
} @media (max-width: 768px) {
.ccd-global-notification {
padding: 12px 15px;
font-size: 14px;
}
.ccd-notification-icon {
font-size: 20px;
}
.ccd-reply-trail-section {
padding: 15px;
}
.ccd-reply-trail-section h4 {
font-size: 16px;
flex-direction: column;
align-items: flex-start;
}
.ccd-reply-trail-container {
max-height: 400px;
padding: 12px;
}
.ccd-reply-message {
padding: 12px 14px;
}
.ccd-reply-header {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.ccd-reply-author-block {
flex-wrap: wrap;
}
.ccd-new-messages-indicator {
width: 100%;
text-align: center;
justify-content: center;
}
}
@media (max-width: 480px) {
.ccd-global-notification {
flex-direction: column;
text-align: center;
gap: 8px;
}
.ccd-unread-badge {
display: block;
margin: 5px 0;
}
.ccd-reply-content {
font-size: 13px;
}
} .ccd-loading {
text-align: center;
padding: 30px 20px;
color: #646970;
font-style: italic;
}
.ccd-loading:after {
content: '...';
animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60%, 100% { content: '...'; }
} .ccd-reply-message {
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .ccd-toggle-details:focus,
.ccd-reply-btn:focus,
.ccd-admin-reply-btn:focus {
outline: 2px solid #2196f3;
outline-offset: 2px;
}  .ccd-caret {
display: inline-block;
margin-left: 8px;
font-size: 12px;
transition: transform 0.3s ease;
color: inherit;
}
.ccd-caret.open {
transform: rotate(180deg);
} .ccd-view-interactions {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 5px;
transition: all 0.3s ease;
}
.ccd-view-interactions:hover .ccd-caret {
transform: translateY(2px);
}
.ccd-view-interactions .ccd-caret.open {
transform: rotate(180deg);
} .ccd-interactions-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
display: none !important;
}
.ccd-interactions-modal[style*="display: block"],
.ccd-interactions-modal[style*="display: flex"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
} .ccd-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.75) !important;
z-index: 999998 !important;
cursor: pointer;
} .ccd-modal-box {
position: relative !important;
background: white !important;
width: 90% !important;
max-width: 700px !important;
max-height: 90vh !important;
margin: auto !important;
border-radius: 12px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
z-index: 999999 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
cursor: default; pointer-events: auto;
} .ccd-close-modal {
background: none !important;
border: none !important;
font-size: 32px !important;
line-height: 1 !important;
cursor: pointer !important;
color: #6b7280 !important;
padding: 0 !important;
margin: 0 !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
border-radius: 6px !important;
transition: all 0.2s ease !important; pointer-events: auto !important;
z-index: 10;
}
.ccd-close-modal:hover {
background: #fee2e2 !important;
color: #dc2626 !important;
transform: scale(1.1);
}
.ccd-close-modal:active {
transform: scale(0.95);
} body.ccd-modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
} .ccd-reply-section,
.ccd-reply-textarea,
.ccd-send-reply {
pointer-events: auto;
}
.ccd-send-reply:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.ccd-send-reply:active {
transform: translateY(0);
} @keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.ccd-notification {
animation: slideInRight 0.3s ease;
} .ccd-notification.success {
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
}
.ccd-notification.error {
background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
} .ccd-view-interactions,
.ccd-delete-complaint,
.ccd-send-reply,
.ccd-close-modal {
transition: all 0.2s ease;
} .ccd-view-interactions:focus,
.ccd-send-reply:focus,
.ccd-close-modal:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
} .ccd-view-interactions,
.ccd-delete-complaint,
.ccd-send-reply,
.ccd-close-modal,
.ccd-modal-overlay {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
} @media (max-width: 768px) {
.ccd-modal-box {
width: 95% !important;
max-height: 95vh !important;
margin: 10px auto !important;
}
.ccd-view-interactions {
width: 100%;
justify-content: center;
}
.ccd-caret {
margin-left: auto;
}
}
@media (max-width: 480px) {
.ccd-close-modal {
font-size: 28px !important;
width: 32px !important;
height: 32px !important;
}
.ccd-modal-header {
padding: 15px 20px !important;
}
.ccd-modal-header h4 {
font-size: 16px !important;
}
} .ccd-toggle-details {
position: relative;
padding-right: 20px;
}
.ccd-toggle-details::after {
content: '▼';
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
transition: transform 0.3s ease;
}
.ccd-toggle-details.open::after {
transform: translateY(-50%) rotate(180deg);
} .ccd-interactions-modal + .ccd-interactions-modal {
z-index: 999999;
} .ccd-send-reply:disabled,
.ccd-delete-complaint:disabled {
cursor: wait !important;
opacity: 0.6;
} .ccd-interactions-modal {
opacity: 0;
transition: opacity 0.3s ease;
}
.ccd-interactions-modal[style*="display: block"],
.ccd-interactions-modal[style*="display: flex"] {
opacity: 1;
}  .ccd-conversation-section {
margin: 25px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 2px solid #e1e5e9;
display: none; }
.ccd-conversation-section h4 {
margin-top: 0;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
color: #1d2327;
font-size: 18px;
font-weight: 600;
}
.ccd-conversation-container {
max-height: 500px;
overflow-y: auto;
background: white;
border-radius: 8px;
padding: 15px;
border: 1px solid #ddd;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.ccd-conversation-container::-webkit-scrollbar {
width: 8px;
}
.ccd-conversation-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.ccd-conversation-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.ccd-conversation-container::-webkit-scrollbar-thumb:hover {
background: #555;
} .ccd-conversation-thread {
display: flex;
flex-direction: column;
gap: 15px;
} .ccd-message-wrapper {
display: flex;
width: 100%;
}
.ccd-message-wrapper.align-left {
justify-content: flex-start;
}
.ccd-message-wrapper.align-right {
justify-content: flex-end;
} .ccd-message {
max-width: 70%;
padding: 12px 16px;
border-radius: 12px;
position: relative;
animation: fadeInUp 0.4s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .ccd-message.unread {
background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%) !important;
border: 2px solid #ff6b6b !important;
border-left: 5px solid #ff6b6b !important;
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2) !important;
animation: highlightNew 2s ease;
}
@keyframes highlightNew {
0% {
background: #ffebee;
transform: scale(1.02);
}
100% {
background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
transform: scale(1);
}
}  .ccd-message-admin {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #2196f3;
} .ccd-message-vendor {
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
border-left: 5px solid #9c27b0;
} .ccd-message-customer {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
border-left: 5px solid #4caf50;
} .ccd-message-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
}
.ccd-message-author-block {
display: flex;
align-items: center;
gap: 8px;
}
.ccd-message-author {
font-weight: 700;
color: #1d2327;
font-size: 14px;
}
.ccd-message-time {
color: #646970;
font-size: 12px;
font-weight: 500;
} .ccd-message-new-badge {
background: #ff6b6b;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: blink 1.5s infinite;
box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
} .ccd-message-content {
color: #2c3338;
line-height: 1.6;
word-wrap: break-word;
font-size: 14px;
white-space: pre-wrap;
} .ccd-private-indicator {
margin-top: 10px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.05);
border-radius: 6px;
font-size: 12px;
color: #646970;
font-style: italic;
} .ccd-no-messages {
text-align: center;
padding: 40px 20px;
color: #999;
}
.ccd-no-messages p {
font-size: 16px;
margin: 0;
} .ccd-loading {
text-align: center;
padding: 30px 20px;
color: #646970;
font-style: italic;
font-size: 14px;
} .ccd-global-notification {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3);
animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3);
}
50% {
box-shadow: 0 4px 20px rgba(238, 90, 111, 0.6);
}
}
.ccd-notification-icon {
font-size: 24px;
animation: ring 2s infinite;
}
@keyframes ring {
0%, 100% {
transform: rotate(0deg);
}
10%, 30% {
transform: rotate(-15deg);
}
20% {
transform: rotate(15deg);
}
} .ccd-unread-badge {
display: inline-block;
background: #ff6b6b;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: blink 1.5s infinite;
box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}
.button-badge {
background: #ff6b6b;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
margin-left: 5px;
font-weight: bold;
display: inline-block;
min-width: 18px;
text-align: center;
} .ccd-complaint-card.has-unread,
.ccd-complaint-row.has-unread {
background: #fff8e1 !important;
border-left: 4px solid #ff6b6b !important;
}
.ccd-complaint-card.has-unread:hover,
.ccd-complaint-row.has-unread:hover {
background: #fff9c4 !important;
} .ccd-new-messages-indicator {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
animation: pulse 2s infinite;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
display: inline-flex;
align-items: center;
gap: 5px;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
} .ccd-reply-form {
margin-top: 20px;
padding: 20px;
background: #fff;
border-radius: 8px;
border: 2px solid #e1e5e9;
display: none; }
.ccd-reply-form h4 {
margin-top: 0;
color: #1d2327;
}
.ccd-reply-textarea {
width: 100%;
padding: 12px;
border: 2px solid #dcdcde;
border-radius: 8px;
resize: vertical;
font-family: inherit;
font-size: 14px;
line-height: 1.5;
transition: border-color 0.2s ease;
margin-bottom: 10px;
}
.ccd-reply-textarea:focus {
outline: none;
border-color: #2196f3;
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
} @media (max-width: 768px) {
.ccd-message {
max-width: 85%;
}
.ccd-conversation-container {
max-height: 400px;
padding: 12px;
}
.ccd-conversation-section {
padding: 15px;
}
.ccd-conversation-section h4 {
font-size: 16px;
flex-direction: column;
align-items: flex-start;
}
.ccd-message-header {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.ccd-global-notification {
flex-direction: column;
text-align: center;
gap: 8px;
padding: 12px 15px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.ccd-message {
max-width: 90%;
}
.ccd-message-content {
font-size: 13px;
}
} .ccd-conversation-section,
.ccd-reply-form {
transition: all 0.3s ease;
} .ccd-view-interactions:focus,
.ccd-reply-btn:focus,
.ccd-send-reply:focus,
.ccd-submit-reply:focus {
outline: 2px solid #2196f3;
outline-offset: 2px;
} .ccd-interactions-modal,
.ccd-modal-overlay,
.ccd-modal-box {
display: none !important;
} @keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.ccd-notification {
animation: slideInRight 0.3s ease;
}