* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background: #f5f7fa;
  overflow: hidden;
}

.panel-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.panel-header {
  background: #6C7A89;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.panel-header h2 {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.settings-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: rotate(90deg);
}

.settings-dropdown {
  display: none;
  position: absolute;
  top: 60px;
  right: 10px;
  left: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  max-width: 480px;
  margin: 0 auto;
}

.settings-dropdown.show {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-content {
  padding: 24px;
}

.settings-content h3 {
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-group {
  margin-bottom: 20px;
}

.setting-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

.setting-group input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.setting-group input:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(163,198,196,0.2);
}

.help-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #8898aa;
}

.column-mapping {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.column-mapping input {
  padding: 8px 12px;
  font-size: 13px;
}

.save-btn, .refresh-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  font-size: 15px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.save-btn {
  background: #27ae60;
  color: white;
}

.refresh-btn {
  background: #A3C6C4;
  color: white;
}

.save-btn:hover {
  background: #229954;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39,174,96,0.3);
}

.refresh-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.3);
}

.settings-info {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 13px;
}

.settings-info p {
  margin-bottom: 8px;
  font-weight: 600;
}

.settings-info ul {
  margin-left: 20px;
  color: #666;
}

.search-container {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
}

.search-container input {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #e1e8ed;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.search-container input:focus {
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(163,198,196,0.2);
}

/* Tabs styling */
.tabs-container {
  background: white;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tabs {
  display: flex;
  padding: 0 20px;
  gap: 8px;
}

.tab {
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
}

.tab:hover {
  color: #333;
  background: #f8f9fa;
}

.tab.active {
  color: #354649;
  border-bottom-color: #A3C6C4;
}

.tab-icon {
  font-size: 16px;
}

.tab-label {
  font-size: 13px;
}

/* Tab content */
.tab-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tab-pane {
  display: none;
  height: 100%;
  overflow-y: auto;
}

.tab-pane.active {
  display: flex;
  flex-direction: column;
}

.tab-header {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.add-btn {
  background: #A3C6C4;
  color: #354649;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.4);
}

.stats-bar {
  padding: 10px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

/* Companies list styles */
.companies-list {
  flex: 1;
  overflow-y: auto !important;
  background: white;
  min-height: 0;
}

.company-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.company-item:hover {
  background: #f8f9fa;
  padding-left: 20px;
}

.company-item.selected {
  background: #E0E7E9;
  border-left: 3px solid #A3C6C4;
}

.company-item::after {
  content: '›';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #ccc;
  opacity: 0;
  transition: all 0.2s ease;
}

.company-item:hover::after {
  opacity: 1;
  right: 12px;
}

.company-name {
  font-weight: 600;
  font-size: 15px;
  color: #2c3e50;
  margin-bottom: 2px;
}

.company-count {
  font-size: 12px;
  color: #7f8c8d;
}

/* Enhanced company view layout */
.company-view-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 100%;
  gap: 0;
}

.companies-list-section {
  background: white;
  border-right: 1px solid #d5e0e0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.companies-list-header {
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  font-weight: 600;
  color: #2c3e50;
  position: sticky;
  top: 0;
  z-index: 10;
}

.company-info-section {
  background: #f0f5f5;
  overflow-y: auto;
  border-right: 1px solid #d5e0e0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  transition: opacity 0.2s ease;
}

/* Company info content (when showing company details) */
.company-header-actions,
.company-info-header,
.company-summary-bar,
.company-info-grid {
  padding-left: 20px;
  padding-right: 20px;
}

.company-header-actions {
  padding-top: 12px;
}

.company-info-grid {
  padding-bottom: 20px;
}

.company-contacts-section {
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.company-header-actions {
  margin-bottom: 12px;
}

.company-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.company-name-display {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  flex: 1;
}

.company-name-edit {
  display: none;
  font-size: 24px;
  font-weight: 600;
  padding: 8px 12px;
  border: 2px solid #A3C6C4;
  border-radius: 8px;
  flex: 1;
}

.edit-company-btn {
  background: #A3C6C4;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-company-btn:hover {
  background: #8fb8b6;
}

.save-company-btn {
  background: #27ae60;
  color: white;
  display: none;
}

.save-company-btn:hover {
  background: #229954;
}

.cancel-company-btn {
  background: #e74c3c;
  color: white;
  display: none;
  margin-left: 8px;
}

.cancel-company-btn:hover {
  background: #c0392b;
}

.company-info-grid {
  display: grid;
  gap: 20px;
}

.company-info-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.company-info-card h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item {
  margin-bottom: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

.info-value {
  color: #333;
}

.phone-list, .website-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone-item, .website-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.website-link {
  color: #A3C6C4;
  text-decoration: none;
  word-break: break-all;
}

.website-link:hover {
  text-decoration: underline;
}

/* Adjust contacts list for new layout */
.company-contacts-header {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
}

.company-contacts-header h4 {
  margin: 0;
  font-size: 16px;
  color: #2c3e50;
}

/* Contacts split view layout */
.contacts-split-view {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100%;
  gap: 0;
}

.contacts-list-section {
  background: white;
  border-right: 1px solid #e1e8ed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.contacts-list-section .contacts-controls {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.contacts-list-section .filters-section {
  border-bottom: 1px solid #e1e8ed;
}

.contacts-list-section .contacts-stats-bar {
  padding: 10px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  font-size: 13px;
  color: #666;
}

.contacts-list-section .all-contacts-list {
  flex: 1;
  overflow-y: auto;
  background: white;
}

.contact-detail-section {
  background: white;
  overflow-y: auto;
  position: relative;
}

.no-contact-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.no-contact-selected .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-contact-selected p {
  font-size: 16px;
  color: #666;
}

/* Adjust contact detail styles for split view */
.contact-detail-section .contact-detail {
  position: relative;
  animation: none;
  height: 100%;
  overflow-y: auto;
}

.contact-detail-section .detail-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Hide back button in split view */
.contact-detail-section .back-btn {
  display: none;
}

/* Selected contact highlight */
.contacts-list-section .contact-item.selected {
  background: #E0E7E9;
  border-left: 3px solid #A3C6C4;
}

/* Company view selected contact */
.company-contacts-section .contact-item.selected {
  background: #E0E7E9;
  border-left: 4px solid #A3C6C4;
  padding-left: 16px;
}

/* Status bar adjustments for split view */
.contact-detail-section .status-bar-container {
  margin: 0;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  width: 100%;
  box-sizing: border-box;
}

.contact-detail-section .contact-header {
  padding: 20px;
  padding-top: 16px;
}

.contact-detail-section .detail-section {
  padding: 0 20px 20px 20px;
}

.contact-detail-section .action-buttons {
  margin: 0 20px 20px 20px;
}

.contact-detail-section .contact-logs-section {
  margin: 0 20px 20px 20px;
}

/* Contact item styles */
.contact-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.contact-item:hover {
  background: #f8f9fa;
  padding-left: 24px;
}

.contact-item::after {
  content: '›';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #ccc;
  opacity: 0;
  transition: all 0.2s ease;
}

.contact-item:hover::after {
  opacity: 1;
  right: 16px;
}

.contact-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #2c3e50;
}

.contact-info-preview {
  font-size: 13px;
  color: #7f8c8d;
  display: flex;
  gap: 12px;
}

.no-data {
  padding: 60px 20px;
  text-align: center;
  color: #aaa;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-hint {
  font-size: 13px;
  margin-top: 8px;
}

/* Task list styles */
.tasks-list {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
}

/* Log list styles */
.log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

/* Sequences split view layout */
.sequences-split-view {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100%;
  gap: 0;
}

.sequences-list-section {
  background: white;
  border-right: 1px solid #e1e8ed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sequences-list-section .tab-header {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sequences-list {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
  padding: 0;
}

.sequence-editor-section {
  background: white;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.no-sequence-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.no-sequence-selected .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-sequence-selected p {
  font-size: 16px;
  color: #666;
}

/* Adjust sequence card for list view */
.sequences-list-section .sequence-card {
  margin: 0;
  border: none;
  border-bottom: 1px solid #e1e8ed;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  padding: 20px;
}

.sequences-list-section .sequence-card:hover {
  background: #f8f9fa;
  transform: none;
  box-shadow: none;
  padding-left: 24px;
}

.sequences-list-section .sequence-card.selected {
  background: #E0E7E9;
  border-left: 4px solid #A3C6C4;
  padding-left: 16px;
}

/* Hide the existing sequence card styles when in the split view */
.sequences-list-section .sequence-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Sequence editor panel (non-modal) */
.sequence-editor-panel {
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Make steps section grow to fill available space */
.sequence-editor-panel .steps-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 20px;
}

.sequence-editor-panel .steps-container {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
  padding: 16px;
  margin-top: 16px;
}

/* Adjust the individual step styling within the container */
.sequence-editor-panel .sequence-step {
  background: white;
  border: 1px solid #e1e8ed;
  margin-bottom: 16px;
}

.sequence-editor-panel .no-steps {
  text-align: center;
  color: #999;
  padding: 60px 20px;
  font-style: italic;
}

.sequence-editor-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e8ed;
}

.sequence-editor-header h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #2c3e50;
}

.sequence-editor-actions {
  background: white;
  padding: 20px 0;
  border-top: 1px solid #e1e8ed;
  display: flex;
  gap: 12px;
  margin-top: auto; /* Push to bottom */
  flex-shrink: 0;
}

.sequence-editor-actions button {
  flex: 1; /* Make buttons equal width */
  padding: 12px 24px;
}

/* Responsive adjustments for sequences split view */
@media (max-width: 1200px) {
  .sequences-split-view {
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 900px) {
  .sequences-split-view {
    grid-template-columns: 250px 1fr;
  }
}

.contact-detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
  z-index: 200;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Edit mode styles */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e8ed;
}

.detail-actions {
  display: flex;
  gap: 8px;
}

.edit-btn, .save-btn, .cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.edit-btn:hover {
  background: #8fb8b6;
}

.save-btn {
  background: #27ae60;
  color: white;
}

.save-btn:hover {
  background: #229954;
}

.cancel-btn {
  background: #e74c3c;
  color: white;
}

.cancel-btn:hover {
  background: #c0392b;
}

.edit-input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.edit-input:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(163,198,196,0.1);
}

.edit-textarea {
  resize: vertical;
  min-height: 80px;
}

.edit-address {
  width: 100%;
}

.edit-name {
  margin-bottom: 12px;
}

.edit-phones input {
  width: 100%;
}

.detail-item .edit-phones {
  flex: 1;
}

.back-btn {
  margin: 0;
  padding: 10px 20px;
  background: #ecf0f1;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: #d5dbdb;
  transform: translateX(-4px);
}

.contact-info {
  padding: 0 20px 20px;
}

.contact-header {
  margin-bottom: 24px;
  padding-top: 20px;
}

.contact-info h3 {
  font-size: 24px;
  margin-bottom: 4px;
  color: #2c3e50;
}

.contact-title {
  color: #7f8c8d;
  font-size: 16px;
  display: block;
}

.detail-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.detail-item {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item .label {
  font-weight: 600;
  color: #555;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-item .value {
  color: #333;
  word-break: break-word;
}

.notes-item {
  flex-direction: column;
}

.notes-section {
  margin-top: 8px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  white-space: pre-wrap;
  line-height: 1.6;
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  transition: all 0.2s ease;
}

.action-btn span {
  font-size: 18px;
}

.email-btn {
  background: #E0E7E9;
  color: #2c3e50;
  border: 2px solid #A3C6C4;
}

.phone-btn {
  background: #E0E7E9;
  color: #2c3e50;
  border: 2px solid #A3C6C4;
}

.text-btn {
  background: #E0E7E9;
  color: #2c3e50;
  border: 2px solid #A3C6C4;
}

.sequence-btn {
  background: #E0E7E9;
  color: #2c3e50;
  border: 2px solid #A3C6C4;
}

.email-btn:hover {
  background: #A3C6C4;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163,198,196,0.3);
}

.phone-btn:hover {
  background: #A3C6C4;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163,198,196,0.3);
}

.text-btn:hover {
  background: #A3C6C4;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163,198,196,0.3);
}

.sequence-btn:hover {
  background: #A3C6C4;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163,198,196,0.3);
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #E0E7E9;
  border-top: 4px solid #A3C6C4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  margin: auto;
  padding: 0;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  animation: modalSlideIn 0.3s ease;
}

.modal-content.large {
  max-width: 700px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
}

.close-modal {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-modal:hover {
  background: #f0f0f0;
  color: #666;
}

.modal-body {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.modal-content.large .modal-body {
  flex: 1;
  max-height: calc(80vh - 140px);
}

.sequence-current {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.sequence-current strong {
  color: #555;
}

.sequence-list {
  margin-top: 16px;
}

.sequence-item {
  padding: 14px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.sequence-item:hover {
  border-color: #A3C6C4;
  background: #E0E7E9;
  transform: translateX(4px);
}

.sequence-item.active {
  background: #A3C6C4;
  color: #354649;
  border-color: #A3C6C4;
}

.sequence-item.remove {
  border-color: #e74c3c;
  color: #e74c3c;
}

.sequence-item.remove:hover {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.check-mark {
  font-size: 16px;
}

.no-sequences {
  text-align: center;
  color: #999;
  padding: 40px 20px;
  font-style: italic;
}

.loader-small {
  width: 30px;
  height: 30px;
  border: 3px solid #E0E7E9;
  border-top: 3px solid #A3C6C4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 40px auto;
}

/* Sequence editor styles */
.sequence-name-input {
  margin-bottom: 24px;
}

.sequence-name-input label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

.sequence-name-input input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.steps-section {
  margin-bottom: 20px;
}

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

.steps-header h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
}

.add-step-btn {
  background: #A3C6C4;
  color: #354649;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-step-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.4);
}

.no-steps {
  text-align: center;
  color: #999;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 8px;
}

.sequence-step {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

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

.step-number {
  font-weight: 600;
  color: #354649;
}

.remove-step {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.remove-step:hover {
  background: #e74c3c;
  color: white;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.step-field {
  flex: 1;
}

.step-field.wide {
  flex: 2;
}

.step-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.step-field input,
.step-field select,
.step-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.step-field textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.step-field input:focus,
.step-field select:focus,
.step-field textarea:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 2px rgba(163,198,196,0.1);
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e1e8ed;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-footer .cancel-btn,
.modal-footer .save-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-footer .cancel-btn {
  background: #e1e8ed;
  color: #666;
}

.modal-footer .cancel-btn:hover {
  background: #d5dbdb;
}

.modal-footer .save-btn {
  background: #A3C6C4;
  color: #354649;
}

.modal-footer .save-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.4);
}

/* Sequence card styles */
.sequence-card {
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.sequence-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.sequence-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sequence-card-header h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
}

.sequence-actions {
  display: flex;
  gap: 8px;
}

.edit-sequence-btn,
.delete-sequence-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.edit-sequence-btn:hover {
  background: #f0f0f0;
}

.delete-sequence-btn:hover {
  background: #fee;
  color: #e74c3c;
}

.sequence-info {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}

.sequence-steps-preview {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.step-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
}

.step-icon {
  font-size: 16px;
}

.step-name {
  flex: 1;
  color: #333;
}

.step-timing {
  color: #999;
  font-size: 12px;
}

/* Tasks section styles */
.tasks-section {
  margin-bottom: 24px;
}

.tasks-section-header {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  padding: 0 20px;
}

.no-tasks-message {
  padding: 20px;
  text-align: center;
  color: #999;
  font-style: italic;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.task-item:hover {
  background: #f8f9fa;
  padding-left: 24px;
}

.task-icon {
  font-size: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-description {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.task-meta {
  font-size: 13px;
  color: #7f8c8d;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.task-contact {
  font-weight: 500;
}

.task-due-date {
  font-size: 12px;
  color: #999;
}

.task-due-date.due-today {
  color: #e67e22;
  font-weight: 600;
}

.complete-task-btn {
  background: #2ecc71;
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.complete-task-btn:hover {
  background: #27ae60;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(46,204,113,0.3);
}

.task-due-date.due-soon {
  color: #e74c3c;
  font-weight: 600;
}

.task-due-date.overdue {
  color: #c0392b;
  font-weight: 600;
  text-transform: uppercase;
}

/* Bulk sequence styles */
.header-buttons {
  display: flex;
  gap: 8px;
}

.filter-section {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.filter-group {
  margin-bottom: 12px;
}

.filter-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
  color: #555;
}

.filter-group input,
.filter-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 13px;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contacts-selection {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  background: white;
}

.selection-header {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.select-all-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.selectable-contact {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.selectable-contact:hover {
  background: #f8f9fa;
}

.selectable-contact input[type="checkbox"] {
  flex-shrink: 0;
}

.contact-select-info {
  flex: 1;
}

.contact-select-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.contact-select-details {
  font-size: 12px;
  color: #666;
}

.filter-results {
  padding: 12px 16px;
  background: #e8f4f8;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #2c3e50;
}

.bulk-actions {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-count {
  font-size: 13px;
  color: #666;
}

.modal-body.bulk-sequence {
  max-height: 70vh;
  overflow-y: auto;
}

.step-immediate-checkbox {
  margin-right: 6px;
}

.step-field label input[type="checkbox"] {
  vertical-align: middle;
}

.phone-task-btn {
  background: #A3C6C4 !important;
}

.phone-task-btn:hover {
  background: #8fb8b6 !important;
  box-shadow: 0 4px 12px rgba(163,198,196,0.3);
}

.phone-selection {
  padding: 16px;
}

.phone-option {
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.phone-option:hover {
  border-color: #A3C6C4;
  background: #f8f9fa;
  transform: translateX(4px);
}

.phone-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.variable-hint {
  font-size: 12px;
  color: #666;
  font-weight: normal;
  margin-left: 8px;
}

.available-variables {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.available-variables label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.variable-tag {
  background: #E0E7E9;
  color: #354649;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Courier New', monospace;
}

.variable-tag:hover {
  background: #A3C6C4;
  color: #354649;
  transform: scale(1.05);
}

.help-text {
  font-size: 11px;
  color: #999;
  font-style: italic;
}

.step-subject-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.step-subject-input:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 2px rgba(163,198,196,0.1);
}

.email-preview {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.email-field {
  margin-bottom: 16px;
}

.email-field label {
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  display: block;
}

.email-value {
  color: #333;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e1e8ed;
}

.email-body {
  color: #333;
  padding: 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e1e8ed;
  min-height: 150px;
  white-space: pre-wrap;
  line-height: 1.6;
}

.email-task-btn {
  background: #A3C6C4 !important;
}

.email-task-btn:hover {
  background: #8fb8b6 !important;
  box-shadow: 0 4px 12px rgba(163,198,196,0.3);
}

.text-task-btn {
  background: #9b59b6 !important;
}

.text-task-btn:hover {
  background: #8e44ad !important;
  box-shadow: 0 4px 12px rgba(155,89,182,0.3);
}

/* Variable dropdown styles */
.input-with-dropdown {
  position: relative;
}

.input-group {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.input-group input,
.input-group textarea {
  flex: 1;
}

.variable-dropdown {
  position: relative;
}

.variable-dropdown-btn {
  background: #A3C6C4;
  color: #354649;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}

.variable-dropdown-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163,198,196,0.4);
}

.variable-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 180px;
  max-height: 300px;
  overflow-y: auto;
}

.variable-dropdown-content.show {
  display: block;
}

.variable-option {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.variable-option:last-child {
  border-bottom: none;
}

.variable-option:hover {
  background: #E0E7E9;
  color: #354649;
  padding-left: 20px;
}

/* Adjust textarea positioning when dropdown is present */
.input-group textarea {
  resize: vertical;
}

.header-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sync-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: white;
}

.sync-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: rotate(180deg);
}

.sync-btn:active {
  transform: rotate(180deg) scale(0.95);
}

/* Add a spinning animation when syncing */
@keyframes sync-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sync-btn.syncing {
  animation: sync-spin 1s linear infinite;
  opacity: 0.7;
}

/* Keep disabled state visible */
.contact-info.dead-contact .action-btn {
  background: #bdc3c7 !important;
  color: #7f8c8d !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none !important;
}

/* Action icon button styles */
.action-icon-btn {
  background: #f0f0f0;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

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

.action-icon-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

#dueTaskText {
  color: #e67e22;
  font-weight: 500;
}

.contact-info.dead-contact .action-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Contact status indicators in company view */
.contact-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.contact-info-wrapper {
  flex: 1;
  min-width: 0;
}

.contact-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 18px;
  margin-left: auto;
}

.contact-status-indicator.in-sequence {
  background: #6C7A89;
}

.contact-status-indicator.dead {
  background: #6C7A89;
}

.contact-status-indicator.closed-won {
  background: #6C7A89;
}

.contact-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #2c3e50;
}

.contact-info-preview {
  font-size: 13px;
  color: #7f8c8d;
  display: flex;
  gap: 12px;
}

/* Adjust hover state */
.contact-item:hover {
  background: #f8f9fa;
  padding-left: 24px;
}

/* Update the arrow positioning */
.contact-item::after {
  right: 60px; /* Move arrow left to make room for indicator */
}

/* Status tooltips on hover */
.contact-status-indicator {
  position: relative;
}

.contact-status-indicator::before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  right: 0;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  margin-bottom: 4px;
}

.contact-status-indicator:hover::before {
  opacity: 1;
}

/* Log split view layout */
.log-split-view {
  display: flex;
  height: 100%;
  gap: 1px;
  background: #e1e8ed;
}

.log-list-section {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

.log-detail-section {
  flex: 1.5;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  min-width: 400px;
}

/* Log list styles */
.logs-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 5px;
}

.log-entry {
  padding: 8px 12px 8px 0; /* Reduced from 12px */
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Style for email content in logs */
.log-details[data-type="email"] {
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
}

.log-entry:hover {
  background-color: #f8f9fa;
}

.log-entry.selected {
  background-color: #E0E7E9;
  border-left: 3px solid #A3C6C4;
  padding-left: 9px;
}

/* Log detail panel */
.log-detail-panel {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.no-log-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.no-log-selected .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* Log detail content */
.log-detail-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.log-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.log-detail-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}

.log-detail-meta {
  text-align: right;
}

.log-detail-date {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.log-detail-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #A3C6C4;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.log-detail-contact-link:hover {
  background-color: #E0E7E9;
}

.log-detail-body {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Email-specific styling */
.log-detail-body .email-subject {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.log-detail-body .email-body {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #A3C6C4;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px; /* Reduced spacing */
}

.log-type {
  display: flex;
  align-items: center;
  gap: 4px; /* Reduced from default */
  font-size: 13px; /* Slightly smaller */
}

.log-type-icon {
  font-size: 18px;
}

.log-direction {
  background: #E0E7E9;
  color: #354649;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.log-direction.inbound {
  background: #e8f5e9;
  color: #388e3c;
}

.log-date {
  font-size: 12px; /* Smaller date text */
  color: #999;
}

.log-contact {
  font-size: 13px; /* Slightly smaller */
  color: #666;
  margin-bottom: 2px; /* Minimal spacing */
}

.log-details {
  font-size: 13px;
  color: #999;
  line-height: 1.3; /* Tighter line height */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.log-entry .log-details strong {
  color: #333;
  font-weight: 600;
}

/* Contact logs section */
.contact-logs-section {
  margin-top: 24px;
  border-top: 1px solid #e1e8ed;
  padding-top: 24px;
}

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

.logs-section-header h4 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
}

.add-btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

.contact-logs-list {
  background: #f8f9fa;
  border-radius: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.no-logs {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-style: italic;
}

/* Manual log modal styles */
.log-form-group {
  margin-bottom: 16px;
}

.log-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #555;
  font-size: 14px;
}

.log-form-group select,
.log-form-group input,
.log-form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.log-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.log-form-group select:focus,
.log-form-group input:focus,
.log-form-group textarea:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(163,198,196,0.1);
}

.log-type-direction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.direction-toggle {
  display: flex;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
}

.direction-option {
  flex: 1;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  background: white;
  transition: all 0.2s ease;
  font-weight: 500;
  color: #666;
}

.direction-option:first-child {
  border-right: 1px solid #e1e8ed;
}

.direction-option.active {
  background: #A3C6C4;
  color: white;
}

.past-event-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.past-event-checkbox input {
  width: auto;
}

.log-form-group.hidden {
  display: none;
}

/* Contacts list styles */
.contacts-controls {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.filter-toggle-btn {
  background: #A3C6C4;
  color: #354649;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-toggle-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163,198,196,0.4);
}

.filter-toggle-btn.active {
  background: #8fb8b6;
}

.filter-toggle-btn.active span {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.filters-section {
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.filter-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #555;
  font-size: 13px;
}

.filter-group input,
.filter-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 2px rgba(163,198,196,0.1);
}

.filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.apply-filters-btn,
.clear-filters-btn,
.save-filters-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-filters-btn {
  background: #27ae60;
  color: white;
}

.apply-filters-btn:hover {
  background: #229954;
}

.clear-filters-btn {
  background: #e1e8ed;
  color: #666;
}

.clear-filters-btn:hover {
  background: #d5dbdb;
}

.save-filters-btn {
  background: #A3C6C4;
  color: white;
}

.save-filters-btn:hover {
  background: #8fb8b6;
}

.contacts-stats-bar {
  padding: 10px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  font-size: 13px;
  color: #666;
}

.all-contacts-list {
  flex: 1;
  overflow-y: auto;
  background: white;
}

.saved-filters {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e1e8ed;
}

.saved-filters h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #2c3e50;
}

.saved-filter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saved-filter-item:hover {
  border-color: #A3C6C4;
  transform: translateX(4px);
}

.saved-filters-dropdown-btn {
  position: relative;
}

.saved-filters-dropdown-btn .saved-filters-dropdown {
  left: 0;
}

.saved-filters-dropdown-btn:hover {
  background: #e1e8ed;
}

.saved-filters-dropdown-btn.active {
  background: #A3C6C4;
  color: white;
  border-color: #A3C6C4;
}

.saved-filters-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 250px;
  max-width: 350px;
  z-index: 9999; /* Increased z-index */
  display: none;
  max-height: 400px;
  overflow-y: auto;
}

.saved-filters-wrapper {
  position: relative;
  display: inline-block;
  z-index: 9998; /* High z-index for the wrapper too */
}

.saved-filters-dropdown.show {
  display: block;
}

.saved-filter-dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s ease;
}

.saved-filter-dropdown-item:last-child {
  border-bottom: none;
}

.saved-filter-dropdown-item:hover {
  background: #f8f9fa;
}

.saved-filter-dropdown-item.active {
  background: #E0E7E9;
  font-weight: 600;
}

.saved-filter-name {
  flex: 1;
  color: #333;
}

.saved-filter-delete {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.saved-filter-delete:hover {
  opacity: 1;
}

.no-saved-filters {
  padding: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* Update stats bar for companies */
#companyCount {
  font-weight: 600;
}

.filter-toggle-btn span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.contact-info.dead-contact .action-btn {
  background: #bdc3c7 !important;
  color: #7f8c8d !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none !important;
}

/* Reports Tab Styles */
.reports-filters {
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
}

.reports-filters .filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.reports-filters .filter-section h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
}

.reports-content {
  padding: 20px;
}

.reports-summary {
  margin-bottom: 24px;
}

.reports-summary h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 18px;
}

/* Reports split view layout */
.reports-split-view {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100%;
  gap: 0;
}

.reports-filters-section {
  background: white;
  border-right: 1px solid #e1e8ed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.reports-filters-section .tab-header {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 10;
}

.reports-filters-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.reports-filters-content .filter-group {
  margin-bottom: 16px;
}

.reports-filters-content .filter-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #555;
  font-size: 13px;
}

.reports-filters-content .filter-group input,
.reports-filters-content .filter-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.reports-filters-content .filter-group input:focus,
.reports-filters-content .filter-group select:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 2px rgba(163,198,196,0.1);
}

.reports-filters-content .filter-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reports-filters-content .filter-actions button {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reports-content-section {
  background: #f8f9fa;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.reports-content-header {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.reports-content-header h3 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
}

/* Remove old reports-filters styles */
.reports-filters {
  display: none;
}

/* Adjust reports content padding */
.reports-content-section .reports-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

/* Ensure reports tab uses full height */
#reportsTab.tab-pane.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Responsive adjustments for reports split view */
@media (max-width: 1200px) {
  .reports-split-view {
    grid-template-columns: 280px 1fr;
  }
}

@media (max-width: 900px) {
  .reports-split-view {
    grid-template-columns: 240px 1fr;
  }
}

/* Adjust custom date range fields */
#customDateRange {
  margin-top: -8px;
}

#customDateRange input[type="date"] {
  width: 100%;
  margin-bottom: 8px;
}

#customDateRange input[type="date"]:last-child {
  margin-bottom: 0;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.summary-card {
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.summary-value {
  font-size: 32px;
  font-weight: 700;
  color: #354649;
  margin-bottom: 8px;
}

.summary-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.reports-details {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.reports-details h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
}

#statusBreakdownChart {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  min-height: 200px;
}

#sequencePerformanceTable {
  overflow-x: auto;
}

.performance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.performance-table th {
  background: #f8f9fa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #e1e8ed;
}

.performance-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.performance-table tr:hover {
  background: #f8f9fa;
}

#activityTimeline {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  min-height: 150px;
}

.status-bar-chart {
  display: flex;
  align-items: flex-end;
  height: 200px;
  gap: 12px;
  padding: 0 20px;
}

.status-bar {
  flex: 1;
  background: #A3C6C4;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 20px;
}

.status-bar:hover {
  opacity: 0.8;
  transform: translateY(-4px);
}

.status-bar-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

.status-bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Chart toggle styles */
.chart-toggle {
  display: flex;
  gap: 8px;
}

.chart-toggle-btn {
  background: #e1e8ed;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
}

.chart-toggle-btn:hover {
  background: #d5dbdb;
}

.chart-toggle-btn.active {
  background: #A3C6C4;
  color: #354649;
}

/* Donut chart styles */
.donut-chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px;
}

.donut-chart-wrapper {
  position: relative;
  width: 240px;
  height: 240px;
}

.donut-chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-chart-total {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
}

.donut-chart-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.legend-item:hover {
  opacity: 0.8;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-label {
  flex: 1;
  color: #333;
}

.legend-value {
  font-weight: 600;
  color: #666;
}

.legend-percentage {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}

/* Donut segment hover effect */
.donut-segment {
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.donut-segment:hover {
  opacity: 0.8;
}

/* Tooltip for donut chart */
.donut-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  display: none;
}

.donut-tooltip.show {
  display: block;
}

/* Funnel chart styles */
.funnel-chart-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.funnel-stage {
  position: relative;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.funnel-stage:hover {
  transform: translateY(-2px);
}

.funnel-stage:hover .funnel-bar {
  opacity: 0.9;
}

.funnel-bar {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: white;
  font-weight: 600;
  position: relative;
  margin: 0 auto;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.funnel-stage:first-child .funnel-bar {
  border-radius: 8px 8px 4px 4px;
}

.funnel-stage:last-child .funnel-bar {
  border-radius: 4px 4px 8px 8px;
}

.funnel-label {
  font-size: 15px;
  z-index: 2;
  position: relative;
}

.funnel-value {
  font-size: 16px;
  z-index: 2;
  position: relative;
}

.funnel-percentage {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.funnel-conversion {
  text-align: center;
  margin: 8px 0;
  font-size: 13px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.funnel-conversion-arrow {
  font-size: 16px;
  color: #ccc;
}

.funnel-conversion-rate {
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  color: #666;
}

.funnel-summary {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  text-align: center;
}

.funnel-summary-item {
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
}

.funnel-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: #354649;
  margin-bottom: 4px;
}

.funnel-summary-label {
  font-size: 13px;
  color: #666;
}

/* Funnel stage indicators */
.funnel-stage-indicator {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  background: #e1e8ed;
  color: #666;
}

.funnel-stage:hover .funnel-stage-indicator {
  background: #A3C6C4;
  color: white;
}

/* Responsive funnel */
@media (max-width: 768px) {
  .funnel-percentage {
    display: none;
  }
  
  .funnel-stage-indicator {
    display: none;
  }
  
  .funnel-bar {
    padding: 0 16px;
  }
}

.company-summary-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.summary-item {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-right: 1px solid #e1e8ed;
}

.summary-item:last-child {
  border-right: none;
}

.summary-label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.summary-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
}

/* Duplicate detection styles */
.duplicate-list {
  max-height: 300px;
  overflow-y: auto;
}

.duplicate-item {
  padding: 12px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.duplicate-item.has-differences {
  border-left: 4px solid #ffc107;
}

.duplicate-email {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.duplicate-contacts {
  font-size: 13px;
  color: #666;
  flex: 1;
  margin: 0 12px;
}

.merge-btn {
  background: #A3C6C4;
  color: #354649;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.merge-btn:hover {
  background: #8fb8b6;
}

/* Merge interface styles */
.merge-comparison {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.merge-headers {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  background: #f8f9fa;
  border-bottom: 2px solid #e1e8ed;
  font-weight: 600;
}

.merge-headers > div {
  padding: 12px;
}

.merge-row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  border-bottom: 1px solid #f0f0f0;
}

.merge-row:hover {
  background: #f8f9fa;
}

.merge-row.different-values {
  background: #fffde7;
}

.merge-row.different-values:hover {
  background: #fff9c4;
}

.merge-row.different-values .merge-field-label {
  background: #fffde7;
  font-weight: 700;
  color: #f57f17;
}

.merge-field-label {
  padding: 12px;
  font-weight: 600;
  color: #555;
  background: #fafafa;
  border-right: 1px solid #e1e8ed;
}

.merge-option {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.merge-option label {
  cursor: pointer;
  margin: 0;
  word-break: break-word;
}

.merge-option em {
  color: #999;
  font-style: italic;
}

.merge-logs-info {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.merge-logs-info p {
  margin: 4px 0;
}

.merge-keep-info {
  background: #fff8e1;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ffd54f;
}

.merge-keep-info p {
  margin: 0 0 12px 0;
  font-weight: 600;
}

.merge-keep-info div {
  margin: 8px 0;
}

/* Ensure proper scrolling in all sections */
.companies-mini-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Adjust contact list in 4-column layout */
.company-view-container .company-contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

/* Ensure proper scrolling in all sections */
.companies-mini-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1400px) {
  .company-view-container {
    grid-template-columns: 200px 1fr 300px;
  }
}

@media (max-width: 1200px) {
  .company-view-container {
    grid-template-columns: 180px 1fr 280px;
  }
  
  .company-info-card {
    padding: 12px;
  }
  
  .contact-detail-in-company .detail-header {
    padding: 12px 16px;
  }
  
  .contact-detail-in-company .contact-header,
  .contact-detail-in-company .detail-section,
  .contact-detail-in-company .action-buttons,
  .contact-detail-in-company .contact-logs-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Responsive adjustments for contacts split view */
@media (max-width: 1200px) {
  .contacts-split-view {
    grid-template-columns: 250px 1fr;
  }
}

@media (max-width: 900px) {
  .contacts-split-view {
    grid-template-columns: 200px 1fr;
  }
}

/* Tasks split view layout */
.tasks-split-view {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100%;
  gap: 0;
}

.tasks-list-section {
  background: white;
  border-right: 1px solid #e1e8ed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tasks-list-section .tab-header {
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tasks-list-section .tasks-list {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
}

.task-execution-section {
  background: white;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.no-task-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.no-task-selected .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-task-selected p {
  font-size: 16px;
  color: #666;
}

/* Selected task highlight */
.tasks-list-section .task-item.selected {
  background: #E0E7E9;
  border-left: 4px solid #A3C6C4;
  padding-left: 16px;
}

/* Task execution panel */
.task-execution-panel {
  padding: 24px;
  animation: fadeIn 0.3s ease;
}

.task-execution-header {
  border-bottom: 1px solid #e1e8ed;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.task-execution-header h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #2c3e50;
}

.task-meta-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.task-execution-content {
  margin-bottom: 24px;
}

.task-type-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.task-execution-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.task-action-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.execute-task-btn {
  background: #A3C6C4;
  color: #354649;
}

.execute-task-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.4);
}

.skip-task-btn {
  background: #e1e8ed;
  color: #666;
}

.skip-task-btn:hover {
  background: #d5dbdb;
}

/* Responsive adjustments for tasks split view */
@media (max-width: 1200px) {
  .tasks-split-view {
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 900px) {
  .tasks-split-view {
    grid-template-columns: 250px 1fr;
  }
}

/* Contact detail in company view */
.contact-detail-in-company {
  height: 100%;
  overflow-y: auto;
  padding: 0;
  background: white;
  display: flex;
  flex-direction: column;
}

.contact-detail-in-company * {
  box-sizing: border-box;
}

.contact-detail-in-company .detail-header {
  background: #f8f9fa;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.contact-detail-in-company .back-to-company {
  background: none;
  border: none;
  color: #A3C6C4;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  font-weight: 500;
}

.contact-detail-in-company .back-to-company:hover {
  transform: translateX(-4px);
}

.contact-detail-in-company .contact-info {
  padding: 0;
  flex: 1;
  overflow-y: auto;
  background: white;
}

.contact-detail-in-company .contact-header {
  padding: 20px;
  background: white;
}

.contact-detail-in-company .detail-section {
  padding: 0 20px 20px 20px;
}

.contact-detail-in-company .action-buttons {
  margin: 0 20px 20px 20px;
}

.contact-detail-in-company .contact-logs-section {
  margin: 0 20px 20px 20px;
}

.contact-detail-in-company .status-bar-container {
  margin: 0 !important;
  border-radius: 0;
  background: #f8f9fa;
  padding: 12px 20px;
  border-bottom: 1px solid #e1e8ed;
}

.contact-detail-in-company .detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-detail-in-company .detail-actions button {
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* Smooth transitions for content changes */
.company-info-section > * {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure templates tab uses full height */
#templatesTab.tab-pane.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make tab header buttons consistent */
.sequences-list-section .tab-header .add-btn {
  white-space: nowrap;
  min-width: 80px;
}

/* Ensure bulk sequence button matches */
.sequences-list-section .add-btn#bulkSequenceBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Fix sequence editor section to use full height */
.sequence-editor-section {
  background: white;
  overflow: hidden; /* Change from overflow-y: auto */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure the steps section uses available space properly */
.sequence-editor-panel .sequence-name-input {
  flex-shrink: 0;
}

.sequence-editor-panel .steps-header {
  flex-shrink: 0;
}

/* Header buttons layout for sequences */
.sequences-list-section .tab-header .header-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sequences-list-section .tab-header h3 {
  flex: 1;
  margin: 0;
}

/* Make header buttons consistent and same size */
.sequences-list-section .tab-header .header-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sequences-list-section .tab-header .header-buttons .add-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  min-width: 80px; /* Set minimum width to ensure consistent size */
  white-space: nowrap;
  height: 32px; /* Set explicit height */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Remove any specific styling that might be affecting the bulk button */
.sequences-list-section .add-btn#bulkSequenceBtn {
  width: auto; /* Remove any width overrides */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Make action buttons consistent and exactly same size */
.sequence-editor-actions .cancel-btn,
.sequence-editor-actions .save-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 44px; /* Set explicit height */
  min-width: 120px; /* Set minimum width */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sequence-editor-actions .cancel-btn {
  background: #e1e8ed;
  color: #666;
}

.sequence-editor-actions .cancel-btn:hover {
  background: #d5dbdb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sequence-editor-actions .save-btn {
  background: #A3C6C4;
  color: #354649;
}

.sequence-editor-actions .save-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.4);
}

/* Ensure the container has proper flex settings */
.sequence-editor-actions {
  background: white;
  padding: 20px 0;
  border-top: 1px solid #e1e8ed;
  display: flex;
  gap: 12px;
  margin-top: auto;
  flex-shrink: 0;
  justify-content: stretch; /* Ensure buttons stretch evenly */
}

.sequence-editor-actions .cancel-btn {
  background: #e1e8ed;
  color: #666;
}

.sequence-editor-actions .cancel-btn:hover {
  background: #d5dbdb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sequence-editor-actions .save-btn {
  background: #A3C6C4;
  color: #354649;
}

.sequence-editor-actions .save-btn:hover {
  background: #8fb8b6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163,198,196,0.4);
}

/* Ensure proper spacing in sequence editor */
.sequence-editor-panel > * {
  flex-shrink: 0;
}

.sequence-editor-panel .steps-section {
  flex-shrink: 1; /* Allow this to shrink if needed */
}

/* Remove any max-height constraints on the panel */
.sequence-editor-panel {
  max-height: none;
}

/* Ensure the sequence name input has proper spacing */
.sequence-editor-panel .sequence-name-input {
  margin-bottom: 24px;
}

/* Fix button alignment in sequence editor actions */
.sequence-editor-actions {
  background: white;
  padding: 20px 0;
  border-top: 1px solid #e1e8ed;
  display: flex;
  gap: 12px;
  margin-top: auto;
  flex-shrink: 0;
  align-items: center; /* This ensures vertical alignment */
}

/* Reset any margin/padding that might affect alignment */
.sequence-editor-actions button {
  margin: 0;
  vertical-align: middle;
  line-height: normal;
}

/* Ensure both buttons have identical box model */
.sequence-editor-actions .cancel-btn,
.sequence-editor-actions .save-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 44px;
  min-width: 120px;
  display: inline-flex; /* Change from flex to inline-flex */
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* Ensure padding is included in height */
  margin: 0; /* Reset any margins */
}

/* Inbox styles */
.inbox-list {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
}

.email-item {
  padding: 16px 20px;
  border-bottom: 1px solid #e1e8ed;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.email-item:hover {
  background: #f8f9fa;
  transform: translateX(4px);
}

.email-direction {
  display: inline-block;
  margin-right: 8px;
  font-size: 14px;
}

.email-direction.outbound {
  color: #A3C6C4; /* Blue for sent */
}

.email-direction.inbound {
  color: #27ae60; /* Green for received */
}

.email-item.unread {
  font-weight: 600;
  background-color: #f8f9fa;
}

.email-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.email-from {
  color: #2c3e50;
  font-weight: 600;
}

.email-date {
  color: #7f8c8d;
  font-size: 13px;
}

.email-subject {
  color: #34495e;
  margin-bottom: 4px;
  font-weight: 500;
}

.email-snippet {
  color: #7f8c8d;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gmail compose modal styles */
#gmailComposeModal textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

#gmailComposeModal input[type="email"],
#gmailComposeModal input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
}

/* Status reason indicators */
.contact-status-indicator.new {
  background: #6C7A89;
  color: white;
}

.contact-status-indicator.connected {
  background: #6C7A89;
  color: white;
}

.contact-status-indicator.contract-sent {
  background: #6C7A89;
  color: white;
}

.contact-status-indicator.contract-signed {
  background: #6C7A89;
  color: white;
  padding: 4px 6px;
  font-size: 11px;
}

.contact-status-indicator.closed-lost {
  background: #6C7A89;
  color: white;
}

.contact-status-indicator.renewed {
  background: #6C7A89;
  color: white;
  padding: 4px 6px;
  font-size: 11px;
}

.log-stats-bar {
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-stats-bar.has-filters {
  background: #E0E7E9;
  color: #354649;
}

#logTab .filters-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

#logTab .filters-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#logTab #logCustomDateRange {
  grid-column: 1 / -1;
}

#logTab .tab-header div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.log-type-icon {
  font-size: 16px;
  margin-right: 4px;
}

.log-entry[data-type="Sequence"] .log-header {
  border-left-color: #9b59b6;
}

.log-entry[data-type="System"] .log-header {
  border-left-color: #95a5a6;
}

.log-entry[data-type="Income"] .log-header {
  border-left-color: #27ae60;
}

.log-date {
  font-size: 12px;
  color: #6c757d;
  white-space: nowrap;
  min-width: 140px; /* Increased from default to accommodate seconds */
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
  gap: 12px; /* Add gap to prevent overlap */
}

@media (max-width: 768px) {
  .log-date {
    font-size: 11px;
  }
}

.email-preview-header {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e8ed;
}

.email-preview-row {
  display: flex;
  margin-bottom: 8px;
}

.email-preview-row label {
  font-weight: 600;
  width: 80px;
  flex-shrink: 0;
  color: #666;
}

.email-preview-body {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.email-item {
  transition: background-color 0.2s ease;
}

.email-item:hover {
  background-color: #f8f9fa;
}

/* Reduce spacing in log detail header */
.log-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px; /* Reduced from 20px */
  padding-bottom: 12px; /* Reduced from 20px */
  border-bottom: 2px solid #f0f0f0;
}

/* Email log display styling with reduced spacing */
.email-log-display {
  font-size: 15px;
  line-height: 1.6;
}

.email-log-subject {
  margin-bottom: 12px; /* Reduced from 20px */
}

.email-log-body {
  margin-bottom: 0; /* Removed bottom margin */
}

.email-log-subject label,
.email-log-body label {
  display: block;
  font-weight: 600;
  color: #666;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px; /* Reduced from 8px */
}

.subject-text {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  padding: 10px 14px; /* Reduced from 12px 16px */
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #A3C6C4;
}

.body-text {
  padding: 14px; /* Reduced from 16px */
  background: #f8f9fa;
  border-radius: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #333;
  border: 1px solid #e1e8ed;
}

/* Also reduce padding on the detail content container */
.log-detail-content {
  background: white;
  border-radius: 8px;
  padding: 20px; /* Reduced from 24px */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Reduce spacing for the log detail body container */
.log-detail-body {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-top: 0; /* Remove any default margin */
}

/* More compact log list styles - ONLY for log tab */
#logTab .logs-list,
.log-list-section .log-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 5px;
}

#logTab .log-entry,
.log-list-section .log-entry {
  padding: 8px 12px 8px 0; /* Reduced from 12px */
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#logTab .log-entry:hover,
.log-list-section .log-entry:hover {
  background-color: #f8f9fa;
}

#logTab .log-entry.selected,
.log-list-section .log-entry.selected {
  background-color: #E0E7E9;
  border-left: 3px solid #A3C6C4;
  padding-left: 9px;
}

/* Compact log entry internal spacing - ONLY for log tab */
#logTab .log-header,
.log-list-section .log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px; /* Reduced spacing */
}

#logTab .log-type,
.log-list-section .log-type {
  display: flex;
  align-items: center;
  gap: 4px; /* Reduced from default */
  font-size: 13px; /* Slightly smaller */
}

#logTab .log-date,
.log-list-section .log-date {
  font-size: 12px; /* Smaller date text */
  color: #999;
}

#logTab .log-contact,
.log-list-section .log-contact {
  font-size: 13px; /* Slightly smaller */
  color: #666;
  margin-bottom: 2px; /* Minimal spacing */
}

#logTab .log-details,
.log-list-section .log-details {
  font-size: 13px;
  color: #999;
  line-height: 1.3; /* Tighter line height */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* Compact the type icons - ONLY for log tab */
#logTab .log-type-icon,
.log-list-section .log-type-icon {
  font-size: 14px; /* Smaller icons */
}

/* Direction badges more compact - ONLY for log tab */
#logTab .log-direction,
.log-list-section .log-direction {
  font-size: 11px;
  padding: 2px 6px; /* Smaller padding */
  border-radius: 3px;
}

.inbox-stats-bar {
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  font-size: 13px;
  font-weight: 500;
  color: #666;
}

.inbox-stats-bar.has-filters {
  background: #E0E7E9;
  color: #354649;
}

.renewed-button-section {
  margin-top: 12px;
  text-align: center;
  padding: 0 20px;
}

.renewed-again-btn {
  background: #16a085;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  min-width: 140px;
}

.renewed-again-btn:hover {
  background: #138a72;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 160, 133, 0.3);
}

.contacts-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.no-filters-option {
  background: #f8f9fa;
  border-bottom: 2px solid #e1e8ed !important;
  font-weight: 500;
}

.no-filters-option:hover {
  background: #E0E7E9;
}

.no-filters-option .saved-filter-name {
  color: #666;
}

.modal-content.extra-large {
  max-width: 800px;
  width: 90%;
}

.create-contact-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e8ed;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.form-section h4 {
  margin: 0 0 16px 0;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Make phone fields equal width */
.form-row .form-group:has(input[id*="Phone"]) {
  flex: 1;
}

.delete-btn {
  padding: 6px 12px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.delete-btn:hover {
  background: #c0392b;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.delete-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(231, 76, 60, 0.2);
}

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

.detail-actions button {
  margin: 0;
}

#dueTaskAction:hover {
  background: #c0392b !important;
  transform: scale(1.05);
}

.address-link a:hover {
  text-decoration: underline !important;
  color: #8fb8b6 !important;
}

/* Due task action button hover */
#dueTaskAction:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
  background: #8fb8b6 !important;
}

/* Task execution buttons hover */
.task-action-btn.execute-task-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
  background: #229954 !important;
}

.task-action-btn.skip-task-btn:hover {
  background: #7f8c8d !important;
}

/* Task list complete buttons hover */
.complete-task-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

.complete-task-btn.phone-task-btn:hover {
  background: #8fb8b6 !important;
}

.complete-task-btn.email-task-btn:hover {
  background: #8e44ad !important;
}

.complete-task-btn.text-task-btn:hover {
  background: #138871 !important;
}

.scheduled-emails-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scheduled-email-item {
  padding: 12px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #fff;
}

.scheduled-email-item.past-due {
  border-color: #e74c3c;
  background: #fff5f5;
}

.scheduled-email-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cancel-scheduled-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
}

.cancel-scheduled-btn:hover {
  text-decoration: underline;
}

.automated-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  background: #27ae60;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  vertical-align: middle;
}

.step-automated-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Bulk Email Send Banner */
.due-emails-banner {
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid #e1e8ed;
  animation: slideDown 0.3s ease;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.banner-icon {
  font-size: 32px;
}

.banner-text {
  flex: 1;
  font-size: 16px;
}

.banner-text strong {
  font-size: 24px;
  display: block;
  margin-bottom: 4px;
}

.send-all-btn {
  background: white;
  color: #A3C6C4;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.send-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.send-all-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Login Screen Styles */
.login-screen {
  min-height: 100vh;
  display: flex;
  background: #6C7A89;
  padding: 0;
}

.login-container {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-container h1 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 28px;
}

.login-subtitle {
  color: #666;
  margin: 0 0 32px 0;
}

.login-form {
  text-align: left;
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

.login-form input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.login-form input:focus {
  outline: none;
  border-color: #A3C6C4;
}

.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  color: #E0E7E9;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 198, 196, 0.5);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: #999;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e1e8ed;
}

.login-divider span {
  padding: 0 16px;
  font-size: 14px;
}

.signup-link-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #354649;
  border: 2px solid #A3C6C4;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.signup-link-btn:hover {
  background: #A3C6C4;
  color: #354649;
}

.forgot-password-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #999;
  border: none;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
}

.forgot-password-btn:hover {
  color: #A3C6C4;
}

.back-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #666;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
}

.back-btn:hover {
  background: #f5f5f5;
}

.login-error {
  background: #fee;
  color: #c00;
  padding: 12px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

.login-success {
  background: #efe;
  color: #060;
  padding: 12px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

/* Sign out button in header */
.signout-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.signout-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* Hide app container by default (shown after login) */
#appContainer {
  display: none;
}

#appContainer.visible {
  display: flex;
  flex-direction: column;
}

/* Paywall Styles */
.paywall-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.paywall-container {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 450px;
  text-align: center;
}

.paywall-container h1 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 28px;
}

.paywall-subtitle {
  color: #666;
  margin: 0 0 24px 0;
}

.pricing-card {
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.pricing-card .price {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pricing-card .price span {
  font-size: 18px;
  font-weight: 400;
  opacity: 0.9;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.features-list li {
  padding: 8px 0;
  font-size: 15px;
}

#card-container {
  min-height: 90px;
  margin-bottom: 16px;
}

.subscribe-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.subscribe-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.payment-error {
  background: #fee;
  color: #c00;
  padding: 12px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

.payment-processing {
  color: #666;
  padding: 12px;
  font-size: 14px;
}

.paywall-signout-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.paywall-signout-btn:hover {
  background: #f5f5f5;
}

/* Subscription status in header */
.subscription-badge {
  background: #27ae60;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 8px;
}

.subscription-badge.inactive {
  background: #e74c3c;
}

/* Sidebar Layout */
#appContainer.visible {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  min-width: 220px;
  background: linear-gradient(180deg, #354649 0%, #2a3638 100%);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
  color: white;
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.nav-item:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.nav-item.active {
  background: rgba(255,255,255,0.15);
  color: white;
  border-left: 3px solid #A3C6C4;
}

.nav-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

/* Icon image styles */
img.nav-icon {
  width: 40px!important;
  height: 40px!important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.icon-inline {
  width: 40px!important;
  height: 40px!important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  object-fit: contain;
}

img.card-icon {
  width: 40px!important;
  height: 40px!important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

img.detail-card-icon {
  width: 40px!important;
  height: 40px!important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.nav-label {
  font-weight: 500;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}

.sidebar-btn:hover {
  background: rgba(255,255,255,0.15);
  color: white;
}

.sidebar-btn.signout:hover {
  background: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

.sidebar-btn span {
  margin-right: 8px;
}

/* Main Content Area */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #f5f7fa;
}

.content-header {
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
}

.content-header .search-container {
  max-width: 400px;
  margin: 0;
}

.content-header .search-container input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
}

.content-header .search-container input:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(163, 198, 196, 0.2);
}

/* Tab content adjustments */
.tab-content {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.tab-pane {
  height: 100%;
  overflow: auto;
}

.tab-pane.active {
  display: flex;
  flex-direction: column;
}

/* Hide old elements */
.panel-header,
.tabs-container {
  display: none !important;
}

/* Settings dropdown adjustment */
.settings-dropdown {
  position: fixed;
  top: 0;
  left: 220px;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.settings-dropdown .settings-content {
  max-height: 100vh;
  overflow-y: auto;
}

/* Global Search Styles */
.global-search {
  position: relative;
  max-width: 500px !important;
}

.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
}

.search-results-content {
  padding: 8px 0;
}

.search-category {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8f9fa;
  border-top: 1px solid #e1e8ed;
}

.search-category:first-child {
  border-top: none;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-item:hover {
  background: #f0f4f8;
}

.search-result-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-subtitle {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e1e8ed;
  color: #666;
  margin-left: 8px;
}

.search-no-results {
  padding: 24px 16px;
  text-align: center;
  color: #666;
}

.search-no-results-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

/* Highlight matching text */
.search-highlight {
  background: #fff3cd;
  padding: 0 2px;
  border-radius: 2px;
}

/* Page Container Styles */
.page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

/* Profile Page Styles */
.profile-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.profile-card {
  display: flex;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  margin-right: 24px;
}

.profile-info h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
}

.profile-info p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.profile-section {
  padding: 24px 32px;
  border-bottom: 1px solid #e1e8ed;
}

.profile-section:last-of-type {
  border-bottom: none;
}

.profile-section h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.profile-field:last-child {
  border-bottom: none;
}

.profile-field label {
  color: #666;
  font-size: 14px;
}

.profile-field-value {
  font-weight: 500;
  color: #333;
}

.subscription-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.subscription-status.active {
  background: #d4edda;
  color: #155724;
}

.subscription-status.inactive {
  background: #f8d7da;
  color: #721c24;
}

.subscription-status.pending {
  background: #fff3cd;
  color: #856404;
}

.profile-actions {
  padding: 24px 32px;
  background: #f8f9fa;
}

.profile-btn {
  padding: 12px 24px;
  background: #A3C6C4;
  color: #354649;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.profile-btn:hover {
  background: #8fb8b6;
}

/* Settings Page Styles */
.settings-page-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.settings-section {
  padding: 24px 32px;
  border-bottom: 1px solid #e1e8ed;
}

.settings-section:last-of-type {
  border-bottom: none;
}

.settings-section h4 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.settings-page-content .setting-group {
  margin-bottom: 16px;
}

.settings-page-content .setting-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #444;
  font-size: 14px;
}

.settings-page-content .setting-group input[type="text"],
.settings-page-content .setting-group input[type="number"],
.settings-page-content .setting-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.settings-page-content .setting-group input:focus,
.settings-page-content .setting-group select:focus {
  outline: none;
  border-color: #A3C6C4;
}

.settings-page-content .help-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.column-mapping-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.column-mapping-grid .setting-group {
  margin-bottom: 0;
}

.column-mapping-grid input {
  text-align: center;
}

.email-provider-settings {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.auth-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.auth-btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-btn:not(.secondary) {
  background: #A3C6C4;
  color: #354649;
  border: none;
}

.auth-btn:not(.secondary):hover {
  background: #8fb8b6;
}

.auth-btn.secondary {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.auth-btn.secondary:hover {
  background: #f5f5f5;
}

.settings-actions {
  padding: 24px 32px;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 12px;
}

.settings-actions .save-btn {
  padding: 12px 24px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.settings-actions .save-btn:hover {
  background: #229954;
}

.settings-actions .refresh-btn {
  padding: 12px 24px;
  background: #A3C6C4;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.settings-actions .refresh-btn:hover {
  background: #8fb8b6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .column-mapping-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .profile-card {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-avatar {
    margin-right: 0;
    margin-bottom: 16px;
  }
}

/* Setup Instructions Styles */
.setup-instructions {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.setup-instructions ol {
  margin: 0;
  padding-left: 24px;
  line-height: 1.8;
}

.setup-instructions li {
  margin-bottom: 12px;
}

.setup-instructions .code-block {
  display: block;
  background: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 12px 0;
  white-space: pre;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Dialer Panel Styles */
.dialer-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 280px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 1000;
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.dialer-panel.minimized {
  transform: translateY(calc(100% - 48px));
}

.dialer-panel.hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.dialer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
  cursor: pointer;
}

.dialer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.dialer-toggle-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.dialer-toggle-btn:hover {
  background: rgba(255,255,255,0.3);
}

.dialer-panel.minimized .dialer-toggle-btn {
  transform: rotate(180deg);
}

.dialer-content {
  padding: 16px;
}

.dialer-contact-info {
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.dialer-contact-name {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.dialer-contact-company {
  font-size: 13px;
  color: #666;
}

.dialer-display {
  margin-bottom: 16px;
}

.dialer-display input {
  width: 100%;
  padding: 12px;
  font-size: 20px;
  text-align: center;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
  letter-spacing: 1px;
}

.dialer-display input:focus {
  outline: none;
  border-color: #A3C6C4;
}

.dialer-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.keypad-btn {
  padding: 12px;
  font-size: 20px;
  font-weight: 500;
  background: #f5f7fa;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.keypad-btn span {
  font-size: 8px;
  color: #888;
  letter-spacing: 1px;
  margin-top: 2px;
}

.keypad-btn:hover {
  background: #e8ecf0;
}

.keypad-btn:active {
  background: #A3C6C4;
  color: white;
  transform: scale(0.95);
}

.keypad-btn:active span {
  color: rgba(255,255,255,0.8);
}

.dialer-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.dialer-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e1e8ed;
  background: #f5f7fa;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
}

.dialer-action-btn:hover {
  background: #e8ecf0;
}

.dialer-call-btn {
  flex: 1;
  max-width: 120px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dialer-call-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.dialer-call-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.dialer-hangup-btn {
  flex: 1;
  max-width: 120px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dialer-hangup-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.dialer-status {
  text-align: center;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
}

.dialer-status .status-text {
  font-size: 13px;
  color: #666;
}

.dialer-status .call-timer {
  font-size: 18px;
  font-weight: 600;
  color: #27ae60;
  font-family: monospace;
}

.dialer-status.calling .status-text {
  color: #f39c12;
}

.dialer-status.connected .status-text {
  color: #27ae60;
}

.dialer-status.ended .status-text {
  color: #e74c3c;
}

.dialer-call-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.call-control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #e1e8ed;
  background: white;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.call-control-btn:hover {
  background: #f5f7fa;
}

.call-control-btn.active {
  background: #A3C6C4;
  border-color: #A3C6C4;
}

/* Floating Button */
.dialer-floating-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(53, 70, 73, 0.4);
  z-index: 999;
  transition: all 0.2s;
}

.dialer-floating-btn:hover {
  transform: scale(1.1);
}

/* Calls Tab Styles */
.calls-split-view {
  display: flex;
  height: calc(100vh - 200px);
  gap: 16px;
}

.calls-list-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.calls-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.call-detail-section {
  width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.no-call-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
}

.no-call-selected .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.calls-stats-bar {
  padding: 8px 16px;
  font-size: 13px;
  color: #666;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
}

.call-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.call-item:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.call-item.selected {
  background: #f0f4ff;
  border-left: 3px solid #A3C6C4;
}

.call-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 12px;
}

.call-icon.outbound {
  background: #e8f5e9;
  color: #27ae60;
}

.call-icon.inbound {
  background: #E0E7E9;
  color: #A3C6C4;
}

.call-icon.missed {
  background: #ffebee;
  color: #e74c3c;
}

.call-info {
  flex: 1;
  min-width: 0;
}

.call-contact-name {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.call-phone-number {
  font-size: 13px;
  color: #666;
}

.call-meta {
  text-align: right;
}

.call-time {
  font-size: 12px;
  color: #888;
}

.call-duration {
  font-size: 12px;
  color: #27ae60;
  font-weight: 500;
}

/* Incoming call notification */
.incoming-call-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.incoming-call-modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }
  50% { box-shadow: 0 0 0 20px rgba(39, 174, 96, 0); }
}

.incoming-call-modal h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
}

.incoming-call-modal p {
  color: #666;
  margin: 0 0 24px 0;
}

.incoming-call-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.incoming-call-actions button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

.accept-call-btn {
  background: #27ae60;
  color: white;
}

.reject-call-btn {
  background: #e74c3c;
  color: white;
}

/* Phone Settings Styles */
.phone-status-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  border: 2px dashed #ddd;
}

.phone-status-card.active {
  background: #f0fff4;
  border: 2px solid #27ae60;
}

.phone-status-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.phone-status-card h5 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}

.phone-status-card p {
  color: #666;
  margin: 0 0 16px 0;
}

.setup-phone-btn {
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  color: #354649;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.setup-phone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(163, 198, 196, 0.5);
}

.phone-pricing-info {
  margin-top: 16px !important;
  font-size: 13px;
  color: #888 !important;
}

.phone-number-display {
  margin: 16px 0;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
}

.phone-number-display label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.current-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  letter-spacing: 1px;
}

.phone-usage-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.usage-item {
  background: white;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
  text-align: center;
}

.usage-label {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}

.usage-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.phone-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.phone-action-btn {
  background: white;
  border: 1px solid #e1e8ed;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.phone-action-btn:hover {
  background: #f5f7fa;
  border-color: #A3C6C4;
}

.setup-progress {
  margin-top: 16px;
}

.progress-bar {
  height: 8px;
  background: #e1e8ed;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  width: 0%;
  transition: width 0.5s ease;
}

/* Phone Search Modal */
.modal-large {
  max-width: 600px;
}

.phone-search-form {
  margin-bottom: 20px;
}

.phone-search-form .search-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.phone-search-form .form-group {
  flex: 1;
}

.phone-search-form .search-btn {
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  color: #354649;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  height: 42px;
}

.phone-search-results {
  max-height: 400px;
  overflow-y: auto;
}

.search-hint {
  color: #888;
  text-align: center;
  padding: 40px 20px;
}

.phone-number-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.phone-number-option:hover {
  background: #f0f4ff;
}

.phone-number-info {
  display: flex;
  flex-direction: column;
}

.phone-number-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
}

.phone-number-location {
  font-size: 12px;
  color: #666;
}

.select-number-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.select-number-btn:hover {
  background: #219a52;
}

.searching-indicator {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.no-numbers-found {
  text-align: center;
  padding: 40px 20px;
  color: #888;
}

/* Port Number Modal */
.port-info-box {
  background: #f0f4ff;
  border: 1px solid #A3C6C4;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.port-info-box h4 {
  margin: 0 0 12px 0;
  color: #333;
}

.port-info-box ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.port-info-box li {
  margin-bottom: 6px;
  color: #555;
}

.port-timeline {
  margin: 0;
  font-size: 13px;
  color: #666;
  padding-top: 12px;
  border-top: 1px solid #ddd;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Modal Base Styles (if not already present) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e8ed;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
}

.modal-close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-body .form-group {
  margin-bottom: 16px;
}

.modal-body .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

.modal-body .form-group input,
.modal-body .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.modal-body .form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.company-card.selected {
  background: #f0f4ff;
  border-left: 3px solid #A3C6C4;
}

.company-contacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-contacts-header h4 {
  margin: 0;
}

#emailSignaturePage {
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

#emailSignaturePage:focus {
  outline: none;
  border-color: #A3C6C4;
}

.signature-preview-box {
  background: #f8f9fa;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  white-space: pre-wrap;
  transition: opacity 0.2s ease, text-decoration 0.2s ease;
}

.signature-preview {
  margin-top: 8px;
}

.signature-preview label {
  margin-bottom: 8px;
}

/* Paywall Redesign */
.paywall-screen {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #E0E7E9;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.paywall-layout {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 60px rgba(0,0,0,0.1);
}

.paywall-info {
  flex: 1;
  background: #f9fafb;
  color: #333;
  overflow-y: auto;
}

.paywall-info-content {
  padding: 0;
}

.paywall-info-content.marketing-content {
  padding: 0;
  background: #f9fafb;
}

.paywall-info h1 {
  font-size: 28px;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.paywall-tagline {
  font-size: 18px;
  opacity: 0.9;
  margin: 0 0 32px 0;
}

.paywall-video {
  margin-bottom: 40px;
}

.video-placeholder {
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-coming-soon {
  text-align: center;
  color: rgba(255,255,255,0.7);
}

.video-coming-soon span {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.video-coming-soon p {
  margin: 0;
  font-size: 16px;
}

.paywall-features h3 {
  font-size: 20px;
  margin: 0 0 24px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.feature-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.feature-text h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
}

.feature-text p {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.4;
}

.paywall-testimonial {
  margin-top: 40px;
  padding: 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  border-left: 4px solid #A3C6C4;
}

.paywall-testimonial blockquote {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
}

.paywall-testimonial cite {
  font-size: 14px;
  opacity: 0.8;
}

/* Payment Sidebar */
.paywall-sidebar {
  width: 500px;
  flex-shrink: 0;
  background: white;
  border-left: 1px solid #E0E7E9;
  overflow-y: auto;
}

.paywall-sidebar-content {
  padding: 48px 32px;
}

.paywall-sidebar h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #354649;
}

.sidebar-subtitle {
  margin: 0 0 24px 0;
  color: #6C7A89;
}

.pricing-highlight {
  text-align: center;
  padding: 24px;
  background: #E0E7E9;
  border-radius: 12px;
  margin-bottom: 24px;
}

.price-amount {
  font-size: 48px;
  font-weight: 700;
  color: #354649;
  line-height: 1;
}

.price-period {
  font-size: 16px;
  color: #6C7A89;
  margin-top: 4px;
}

.subscription-form .form-group {
  margin-bottom: 20px;
}

.subscription-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #354649;
  font-size: 14px;
}

.subscription-form input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #E0E7E9;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.subscription-form input:focus {
  outline: none;
  border-color: #A3C6C4;
}

.subscription-form input:disabled {
  background: #f5f5f5;
  color: #666;
}

.email-match-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6C7A89;
}

.subscription-form #card-container {
  min-height: 50px;
  padding: 12px;
  border: 2px solid #E0E7E9;
  border-radius: 8px;
  background: white;
}

.paywall-sidebar .subscribe-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  color: #354649;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.paywall-sidebar .subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 198, 196, 0.4);
}

.paywall-sidebar .subscribe-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.subscribe-btn .btn-text {
  font-weight: 600;
}

.subscribe-btn .btn-price {
  font-size: 14px;
  opacity: 0.9;
}

.payment-security {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: #6C7A89;
}

.subscription-benefits {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #E0E7E9;
}

.subscription-benefits p {
  margin: 8px 0;
  font-size: 14px;
  color: #354649;
}

.paywall-sidebar .paywall-signout-btn {
  margin-top: 24px;
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #6C7A89;
  border: 1px solid #E0E7E9;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.paywall-sidebar .paywall-signout-btn:hover {
  background: #E0E7E9;
  color: #354649;
}

.paywall-sidebar .payment-error {
  background: #fee;
  color: #c00;
  padding: 12px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

.paywall-sidebar .payment-processing {
  text-align: center;
  color: #6C7A89;
  padding: 12px;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
  .paywall-layout {
    flex-direction: column;
  }
  
  .paywall-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid #E0E7E9;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .paywall-info-content {
    padding: 32px 24px;
  }
  
  .paywall-sidebar-content {
    padding: 32px 24px;
  }
}

/* Hide all screens initially - JavaScript will show the correct one */
#loginScreen,
#paywallScreen,
#appContainer {
  display: none !important;
}

#loginScreen.visible,
#paywallScreen.visible,
#appContainer.visible {
  display: flex !important;
}

/* Voicemail Badge on Dialer */
.voicemail-badge {
  background: #e74c3c;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
}

/* Voicemail indicator in call list */
.voicemail-indicator {
  font-size: 14px;
  margin-right: 8px;
  opacity: 0.6;
}

.voicemail-indicator.new {
  opacity: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Call item with voicemail */
.call-item.has-voicemail {
  background: linear-gradient(90deg, #fff8e6 0%, transparent 30%);
}

/* Voicemail play button */
.voicemail-play-btn {
  transition: all 0.2s ease;
}

.voicemail-play-btn:hover {
  background: #8fb8b6 !important;
}

.voicemail-play-btn.playing {
  background: #e74c3c !important;
}

/* Voicemail Greeting Section */
.current-greeting {
  background: #e8f5e9;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.greeting-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.greeting-duration {
  color: #666;
  font-size: 13px;
}

.greeting-controls {
  display: flex;
  gap: 8px;
}

.no-greeting {
  color: #666;
  font-style: italic;
  margin-bottom: 16px;
}

.greeting-recorder {
  margin-top: 16px;
}

.recording-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
}

.recording-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
}

.recording-indicator.recording {
  background: #e74c3c;
  animation: pulse-recording 1s infinite;
}

@keyframes pulse-recording {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.recorder-controls {
  display: flex;
  gap: 8px;
}

.record-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.record-btn:not(.stop) {
  background: #A3C6C4;
  color: white;
}

.record-btn:not(.stop):hover {
  background: #8fb8b6;
}

.record-btn.stop {
  background: #e74c3c;
  color: white;
}

.record-btn.stop:hover {
  background: #c0392b;
}

.recording-preview {
  margin-top: 16px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

.recording-preview audio {
  width: 100%;
  margin-bottom: 12px;
}

.preview-actions {
  display: flex;
  gap: 8px;
}

.phone-action-btn.primary {
  background: #A3C6C4;
  color: white;
}

.phone-action-btn.primary:hover {
  background: #8fb8b6;
}

.phone-action-btn.danger {
  background: #ffebee;
  color: #c62828;
}

.phone-action-btn.danger:hover {
  background: #ffcdd2;
}

/* Voicemail Drops Section */
.voicemail-drops-list {
  margin-bottom: 16px;
}

.drop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 8px;
}

.drop-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drop-item-name {
  font-weight: 500;
}

.drop-item-duration {
  color: #666;
  font-size: 13px;
}

.drop-item-controls {
  display: flex;
  gap: 8px;
}

.drop-item-controls button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.no-drops {
  color: #666;
  font-style: italic;
}

.add-drop-section {
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.drop-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}

.drop-recorder {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Voicemail Drop Selector in Dialer */
.voicemail-drop-selector {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 8px;
  overflow: hidden;
}

.drop-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  font-weight: 500;
}

.close-drop-selector {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #666;
}

.drop-selector-list {
  max-height: 150px;
  overflow-y: auto;
}

.drop-selector-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.drop-selector-item:hover {
  background: #f0f0f0;
}

.drop-selector-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.drop-selector-item .drop-name {
  font-weight: 500;
}

.drop-selector-item .drop-duration {
  color: #666;
  font-size: 12px;
}

/* Credits Display */
.credits-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 8px 12px;
}

.credits-info {
  display: flex;
  flex-direction: column;
}

.credits-balance {
  font-weight: 600;
  font-size: 16px;
  color: #28a745;
}

.credits-minutes {
  font-size: 12px;
  color: #666;
}

.buy-credits-btn {
  padding: 6px 12px;
  background: #A3C6C4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.buy-credits-btn:hover {
  background: #8FB3B1;
}

.low-balance-warning {
  background: #fff3cd;
  color: #856404;
  padding: 8px 12px;
  margin: 0 12px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.low-balance-warning a {
  color: #856404;
  font-weight: 600;
}

/* Credit Options */
.credit-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.credit-option {
  cursor: pointer;
}

.credit-option input {
  display: none;
}

.credit-option-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s;
}

.credit-option input:checked + .credit-option-box {
  border-color: #A3C6C4;
  background: #f0f7f7;
}

.credit-option-box:hover {
  border-color: #A3C6C4;
}

.credit-amount {
  font-weight: 600;
  font-size: 18px;
  color: #333;
}

.credit-minutes {
  color: #666;
  font-size: 14px;
}

/* No credits warning in dialer */
.no-credits-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
}

.no-credits-overlay h4 {
  margin-bottom: 8px;
  color: #333;
}

.no-credits-overlay p {
  margin-bottom: 16px;
  color: #666;
}

/* Credits Display */
.credits-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 8px;
}

.credits-info {
  display: flex;
  flex-direction: column;
}

.credits-balance {
  font-weight: 600;
  font-size: 16px;
  color: #28a745;
}

.credits-minutes {
  font-size: 12px;
  color: #666;
}

.buy-credits-btn {
  padding: 6px 12px;
  background: #A3C6C4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.buy-credits-btn:hover {
  background: #8FB3B1;
}

.low-balance-warning {
  background: #fff3cd;
  color: #856404;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  font-size: 13px;
}

.low-balance-warning a {
  color: #856404;
  font-weight: 600;
}

/* No Credits Overlay */
.no-credits-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
}

.no-credits-overlay h4 {
  margin-bottom: 8px;
  color: #333;
}

.no-credits-overlay p {
  margin-bottom: 16px;
  color: #666;
}

/* Credit Options in Modal */
.credit-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.credit-option {
  cursor: pointer;
}

.credit-option input {
  display: none;
}

.credit-option-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s;
}

.credit-option input:checked + .credit-option-box {
  border-color: #A3C6C4;
  background: #f0f7f7;
}

.credit-option-box:hover {
  border-color: #A3C6C4;
}

.credit-amount {
  font-weight: 600;
  font-size: 18px;
  color: #333;
}

.credit-minutes {
  color: #666;
  font-size: 14px;
}

/* Credits Section in Settings */
.credits-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.credits-balance-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.balance-amount {
  font-size: 32px;
  font-weight: 600;
  color: #28a745;
}

.balance-minutes {
  font-size: 14px;
  color: #666;
}

.no-credits-warning {
  background: #f8d7da;
  color: #721c24;
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 12px;
  font-size: 13px;
}

.credits-history-link {
  text-align: center;
}

/* Automated Emails Section */
.automated-emails-section {
  border-top: 2px dashed #e0e0e0;
  margin-top: 20px;
  padding-top: 15px;
}

.automated-emails-section .tasks-section-header {
  color: #7c3aed;
}

.auto-email-hint {
  font-size: 12px;
  font-weight: normal;
  color: #888;
  margin-left: 8px;
}

.task-item.automated-task {
  cursor: default;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-left: 3px solid #7c3aed;
}

.task-item.automated-task:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.automated-email-preview {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid #e0e0e0;
}

.automated-email-preview .preview-subject {
  margin-bottom: 6px;
  color: #333;
}

.automated-email-preview .preview-body {
  color: #666;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Plan Selection */
.plan-selection {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.plan-option {
  flex: 1;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.plan-option:hover {
  border-color: #3498db;
}

.plan-option.selected {
  border-color: #3498db;
  background: #f0f7ff;
}

.plan-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-option-content {
  text-align: center;
}

.plan-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: #333;
}

.plan-savings {
  background: #27ae60;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.plan-price {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
}

.plan-price span {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}

.plan-monthly-equiv {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* Subscription Management Styles */
.current-plan-display {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
}

.current-plan-display .plan-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.current-plan-display .plan-name-display {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.current-plan-display .plan-renewal {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}

.subscription-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subscription-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.subscription-option-btn:hover {
  border-color: #007bff;
  background: #f8f9ff;
}

.subscription-option-btn.cancel:hover {
  border-color: #dc3545;
  background: #fff5f5;
}

.subscription-option-btn .option-icon {
  font-size: 24px;
}

.subscription-option-btn .option-text {
  display: flex;
  flex-direction: column;
}

.subscription-option-btn .option-text strong {
  font-size: 15px;
  color: #333;
}

.subscription-option-btn .option-text span {
  font-size: 13px;
  color: #666;
}

/* Cancel Warning Styles */
.warning-header {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
}

.warning-header h3 {
  color: #856404;
}

.cancel-warning-content {
  text-align: center;
  padding: 20px 0;
}

.cancel-warning-content .warning-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.cancel-warning-content h4 {
  color: #dc3545;
  margin-bottom: 12px;
}

.warning-list {
  text-align: left;
  margin: 16px 0;
  padding-left: 20px;
}

.warning-list li {
  margin-bottom: 8px;
  color: #555;
}

.danger-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.danger-btn:hover:not(:disabled) {
  background: #c82333;
}

.danger-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Upgrade Comparison Styles */
.upgrade-comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.upgrade-from, .upgrade-to {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.upgrade-arrow {
  font-size: 24px;
  color: #007bff;
}

.upgrade-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
}

.upgrade-plan {
  font-size: 18px;
  font-weight: 600;
  margin: 4px 0;
}

.upgrade-price {
  font-size: 14px;
  color: #333;
}

.upgrade-yearly {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.upgrade-savings {
  font-size: 12px;
  color: #28a745;
  font-weight: 600;
}

/* Landing Page Image */
.landing-page-image {
  width: 100%;
}

.lp-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Login Screen - Split Layout */
.login-layout {
  display: flex;
  height: 100vh;
  width: 100%;
}

.login-info {
  flex: 1;
  overflow-y: auto;
  background: #f9fafb;
}

.login-info-content {
  padding: 0;
}

.login-info-content.marketing-content {
  padding: 0;
  background: #f9fafb;
}

.login-info-content h1 {
  color: #A3C6C4;
  margin-bottom: 8px;
}

.login-info-content .paywall-tagline {
  color: #E0E7E9;
  margin-bottom: 30px;
}

.login-sidebar {
  width: 500px;
  min-width: 500px;
  background: #fff;
  overflow-y: auto;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

.login-sidebar-content {
  padding: 40px;
}

.login-sidebar-content h2 {
  color: #354649;
  margin-bottom: 8px;
}

.login-sidebar-content .sidebar-subtitle {
  color: #6C7A89;
  margin-bottom: 30px;
}

/* Responsive */
@media (max-width: 900px) {
  .login-layout {
    flex-direction: column;
  }
  
  .login-info {
    display: none;
  }
  
  .login-sidebar {
    width: 100%;
    min-width: 100%;
  }
}

/* Settings Split View Layout */
.settings-split-view {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  gap: 0;
}

.settings-categories-panel {
  background: white;
  border-right: 1px solid #e1e8ed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.settings-categories-header {
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 10;
}

.settings-categories-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
}

.settings-categories-list {
  flex: 1;
  padding: 8px 0;
}

.settings-category-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.settings-category-item:hover {
  background: #f8f9fa;
}

.settings-category-item.active {
  background: #E0E7E9;
  border-left-color: #A3C6C4;
}

.settings-category-item .category-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.settings-category-item .category-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.settings-category-item.active .category-name {
  color: #354649;
  font-weight: 600;
}

/* Settings Detail Panel */
.settings-detail-panel {
  background: #f8f9fa;
  overflow-y: auto;
  padding: 0;
}

.settings-pane {
  display: none;
  height: 100%;
  flex-direction: column;
}

.settings-pane.active {
  display: flex;
}

.settings-pane-header {
  padding: 20px 24px;
  background: white;
  border-bottom: 1px solid #e1e8ed;
  position: sticky;
  top: 0;
  z-index: 10;
}

.settings-pane-header h3 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
}

.settings-pane-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.settings-pane-content .setting-group {
  margin-bottom: 20px;
}

.settings-pane-content .setting-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #444;
  font-size: 14px;
}

.settings-pane-content .setting-group input[type="text"],
.settings-pane-content .setting-group input[type="number"],
.settings-pane-content .setting-group select,
.settings-pane-content .setting-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.settings-pane-content .setting-group input:focus,
.settings-pane-content .setting-group select:focus,
.settings-pane-content .setting-group textarea:focus {
  outline: none;
  border-color: #A3C6C4;
  box-shadow: 0 0 0 3px rgba(163, 198, 196, 0.1);
}

/* Settings Save Row */
.settings-save-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e1e8ed;
}

.save-settings-btn {
  padding: 12px 24px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-settings-btn:hover {
  background: #229954;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

/* Tag Management Section */
.tag-management-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
}

.tag-management-section .setting-group {
  margin-bottom: 16px;
}

.tag-management-section .setting-group:last-child {
  margin-bottom: 0;
}

/* Icon Buttons for Tags */
.icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn.primary {
  background: #354649;
  color: white;
}

.icon-btn.primary:hover {
  background: #2a3638;
}

.icon-btn.danger {
  background: #6C7A89;
  color: white;
}

.icon-btn.danger:hover {
  background: #5a6673;
}

/* Responsive Settings Split View */
@media (max-width: 900px) {
  .settings-split-view {
    grid-template-columns: 220px 1fr;
  }
  
  .settings-category-item {
    padding: 12px 16px;
  }
  
  .settings-category-item .category-name {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .settings-split-view {
    grid-template-columns: 1fr;
  }
  
  .settings-categories-panel {
    display: none;
  }
}

/* Ensure settings tab uses full height */
#settingsTab.tab-pane.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ============================================
   CONTACT DETAIL CARD-BASED LAYOUT
   ============================================ */

/* Card Container */
.contact-info.card-layout {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual Cards */
.detail-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8eef3;
  overflow: hidden;
}

.detail-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: #f8fafb;
  border-bottom: 1px solid #e8eef3;
}

.detail-card-header .card-icon {
  font-size: 18px;
}

.detail-card-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  flex: 1;
}

.detail-card-header .card-header-actions {
  display: flex;
  gap: 8px;
}

.detail-card-body {
  padding: 18px;
}

.detail-card-body.no-padding {
  padding: 0;
}

/* Contact Header Card - Special Styling */
.contact-header-card {
  background: linear-gradient(135deg, #354649 0%, #4a5f63 100%);
  color: white;
  border: none;
}

.contact-header-card .contact-header-inner {
  padding: 24px 20px 16px;
}

.contact-header-card .contact-name-large {
  color: white;
  font-size: 26px;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.contact-header-card .contact-title-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  display: block;
}

.contact-header-card .header-action-buttons {
  display: flex;
  gap: 10px;
  padding: 0 20px 20px;
}

.contact-header-card .header-action-buttons .action-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 8px;
}

.contact-header-card .header-action-buttons .action-btn span {
  font-size: 14px;
}

/* Detail Grid Layout */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-field.full-width {
  grid-column: 1 / -1;
}

/* Field Labels */
.field-label {
  font-size: 11px;
  font-weight: 600;
  color: #6c7a89;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Field Values */
.field-value {
  font-size: 14px;
  color: #2c3e50;
  word-break: break-word;
  line-height: 1.5;
}

.field-value.empty {
  color: #bdc3c7;
  font-style: italic;
}

.field-value a {
  color: #3498db;
  text-decoration: none;
}

.field-value a:hover {
  text-decoration: underline;
}

.field-tag {
  display: inline-block;
  background: #E0E7E9;
  color: #354649;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.field-currency {
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', monospace;
}

.field-success {
  color: #27ae60 !important;
}

/* Due Task Value */
.due-task-value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.due-task-value .due-task-text {
  color: #e67e22;
  font-weight: 500;
  flex: 1;
}

.due-task-value .due-task-text.overdue {
  color: #e74c3c;
}

/* Notes Content */
.notes-content {
  background: #f8fafb;
  padding: 14px;
  border-radius: 8px;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
  color: #444;
  max-height: 200px;
  overflow-y: auto;
}

.no-notes {
  color: #95a5a6;
  font-style: italic;
  font-size: 14px;
  padding: 10px 0;
}

/* Activity Card */
.activity-card .contact-logs-list {
  max-height: 300px;
  overflow-y: auto;
  border-radius: 0;
}

.activity-card .no-logs {
  padding: 30px 20px;
}

/* Edit Mode in Cards */
.detail-field .edit-input {
  margin-top: 4px;
}

.detail-field .edit-phones,
.detail-field .edit-address {
  margin-top: 4px;
}

/* Sequence Status Colors */
.sequence-completed {
  color: #27ae60;
}

.sequence-ended {
  color: #e74c3c;
}

.sequence-active {
  color: #3498db;
}

/* Responsive Adjustments */
@media (max-width: 700px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-header-card .header-action-buttons {
    flex-wrap: wrap;
  }
  
  .contact-header-card .header-action-buttons .action-btn {
    flex: 1 1 45%;
  }
}

/* Ensure cards in split view work properly */
.contact-detail-section .contact-info.card-layout {
  padding: 16px;
}

.contact-detail-section .detail-card {
  margin: 0;
}

/* Company view adjustments */
.contact-detail-in-company .contact-info.card-layout {
  padding: 16px;
}

/* Fix phone stacking and field value contrast */
.card-layout #detailPhones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-layout .field-value {
  color: #4a5568;
  display: block;
}

/* ============================================
   COMPANY VIEW - CARD-BASED REDESIGN
   ============================================ */

/* Company View Container - 3 column layout */
.company-view-container {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  height: 100%;
  gap: 0;
  background: #f0f5f5;
}

/* Left Panel - Companies List */
.companies-list-section {
  background: white;
  border-right: 1px solid #d5e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.companies-list-header {
  padding: 16px;
  background: linear-gradient(135deg, #1a3a3a 0%, #2d5555 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}

.company-count-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.companies-mini-list {
  flex: 1;
  overflow-y: auto;
}

.companies-mini-list .company-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.companies-mini-list .company-item:hover {
  background: #f0f5f5;
}

.companies-mini-list .company-item.selected {
  background: linear-gradient(90deg, #e0f0f0 0%, #f0f5f5 100%);
  border-left: 3px solid #2d7d7d;
}

.companies-mini-list .company-item .company-name {
  font-size: 13px;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 0;
}

.companies-mini-list .company-item .company-count {
  background: #e0e7e9;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #555;
  font-weight: 600;
}

/* Middle Panel - Company Info */
.company-info-section {
  background: #f0f5f5;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.company-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  border: none;
}

.company-detail-header .back-to-companies {
  background: white;
  border: 1px solid #d5e0e0;
  color: #2d7d7d;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.company-detail-header .back-to-companies:hover {
  background: #2d7d7d;
  color: white;
  transform: translateX(-2px);
}

.company-edit-actions {
  display: flex;
  gap: 6px;
}

.company-edit-actions button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  border: 1px solid #d5e0e0;
}

.company-edit-actions button:hover {
  background: #e0f0f0;
}

.company-edit-actions #saveCompanyBtn {
  background: #27ae60;
  color: white;
  border: none;
}

.company-edit-actions #cancelCompanyBtn {
  background: #e74c3c;
  color: white;
  border: none;
}

/* Company Title Section */
.company-title-section {
  background: linear-gradient(135deg, #1a3a3a 0%, #2d5555 100%);
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 15px rgba(45, 85, 85, 0.2);
}

.company-icon {
  font-size: 42px;
  background: rgba(255, 255, 255, 0.15);
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-title-section .company-name-display {
  color: white;
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.company-title-section .company-name-edit {
  flex: 1;
  font-size: 22px;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.company-title-section .company-name-edit:focus {
  outline: none;
  border-color: white;
  background: rgba(255, 255, 255, 0.2);
}

/* Stats Row */
.company-stats-row {
  display: flex;
  gap: 12px;
}

.company-stat {
  flex: 1;
  background: white;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #d5e0e0;
  transition: all 0.2s;
}

.company-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.company-stat.highlight {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border-color: #28a745;
}

.company-stat .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1a3a3a;
  margin-bottom: 4px;
  display: block;
}

.company-stat.highlight .stat-value {
  color: #155724;
}

.company-stat .stat-label {
  font-size: 11px;
  color: #6c7a89;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Company Details Grid */
.company-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.company-detail-card {
  background: white;
  border-radius: 10px;
  border: 1px solid #d5e0e0;
  overflow: hidden;
}

.company-detail-card .detail-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #f8fafa;
  border-bottom: 1px solid #e8f0f0;
}

.company-detail-card .detail-card-icon {
  font-size: 16px;
}

.company-detail-card .detail-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a3a3a;
  flex: 1;
}

.company-detail-card .detail-card-count {
  background: #2d7d7d;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.company-detail-card .detail-card-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-detail-card .detail-value {
  font-size: 13px;
  color: #333;
  padding: 8px 10px;
  background: #f8fafa;
  border-radius: 6px;
  word-break: break-word;
}

.company-detail-card .detail-value.clickable {
  cursor: pointer;
  transition: background 0.2s;
}

.company-detail-card .detail-value.clickable:hover {
  background: #e0f0f0;
}

.company-detail-card .detail-value.link {
  color: #2d7d7d;
  text-decoration: none;
  display: block;
}

.company-detail-card .detail-value.link:hover {
  background: #e0f0f0;
  text-decoration: underline;
}

.company-detail-card .detail-empty {
  font-size: 13px;
  color: #95a5a6;
  font-style: italic;
  padding: 8px 0;
}

/* Right Panel - Contacts List */
.company-contacts-section {
  background: white;
  border-left: 1px solid #d5e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.company-contacts-header {
  padding: 14px 16px;
  background: #f8fafa;
  border-bottom: 1px solid #e8f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-contacts-header h4 {
  margin: 0;
  font-size: 14px;
  color: #1a3a3a;
  font-weight: 600;
}

.company-contacts-header .add-btn.small {
  padding: 6px 12px;
  font-size: 12px;
  background: #2d7d7d;
  color: white;
}

.company-contacts-header .add-btn.small:hover {
  background: #256666;
}

.company-contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Contact Card Mini */
.contact-card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafa;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.contact-card-mini:hover {
  background: #e8f2f2;
  border-color: #c5d8d8;
  transform: translateX(3px);
}

.contact-card-mini .contact-card-left {
  flex-shrink: 0;
}

.contact-card-mini .contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d7d7d 0%, #3d9999 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.contact-card-mini .contact-card-middle {
  flex: 1;
  min-width: 0;
}

.contact-card-mini .contact-name {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-card-mini .contact-title-small {
  font-size: 12px;
  color: #7f8c8d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-card-mini .contact-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Status Badges */
.status-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #e1e8ed;
}

.status-badge.status-won {
  background: #d4edda;
}

.status-badge.status-lost {
  background: #f8d7da;
}

.status-badge.status-contract {
  background: #fff3cd;
}

.status-badge.status-connected {
  background: #e2d6f5;
}

.status-badge.status-new {
  background: #cce5ff;
}

.status-badge.status-working {
  background: #e0f0f0;
}

.no-contacts-message {
  text-align: center;
  padding: 40px 20px;
  color: #95a5a6;
  font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .company-view-container {
    grid-template-columns: 200px 1fr 240px;
  }
  
  .company-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .company-view-container {
    grid-template-columns: 180px 1fr 200px;
  }
  
  .company-stats-row {
    flex-wrap: wrap;
  }
  
  .company-stat {
    flex: 1 1 45%;
  }
}

/* ============================================
   CONTACT DETAIL IN COMPANY VIEW - SCROLL FIX
   ============================================ */

/* When company-info-section contains contact detail, remove padding */
.company-info-section:has(.contact-detail-in-company) {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* Contact detail wrapper - takes full height and scrolls */
.contact-detail-in-company {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f0f5f5;
}

/* Fixed header with back button */
.contact-detail-in-company .detail-header {
  background: white;
  padding: 12px 16px;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  z-index: 10;
}

.contact-detail-in-company #backToCompanyBtn {
  background: #2d7d7d;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.contact-detail-in-company #backToCompanyBtn:hover {
  background: #256666;
  transform: translateX(-2px);
}

/* Status bar - fixed at top below header */
.contact-detail-in-company .status-bar-container {
  margin: 0 !important;
  border-radius: 0;
  background: #f8f9fa;
  padding: 12px 16px;
  border-bottom: 1px solid #e1e8ed;
  flex-shrink: 0;
}

/* Scrollable contact info area */
.contact-detail-in-company .contact-info {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  background: #f0f5f5;
  min-height: 0; /* Critical for flex scroll */
}

.contact-detail-in-company .contact-info.card-layout {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cards styling */
.contact-detail-in-company .detail-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #d5e0e0;
  overflow: hidden;
  flex-shrink: 0;
}

.contact-detail-in-company .detail-card-header {
  background: #f8fafa;
  border-bottom: 1px solid #e8f0f0;
}

/* Contact header card - teal theme */
.contact-detail-in-company .contact-header-card {
  background: linear-gradient(135deg, #1a3a3a 0%, #2d5555 100%);
  border: none;
}

.contact-detail-in-company .contact-header-card .header-action-buttons .action-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-detail-in-company .contact-header-card .header-action-buttons .action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Detail actions */
.contact-detail-in-company .detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.contact-detail-in-company .detail-actions button {
  padding: 6px 10px;
  font-size: 12px;
}

/* Activity card */
.contact-detail-in-company .activity-card .contact-logs-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Notes */
.contact-detail-in-company .notes-content {
  background: #f8fafa;
  max-height: 120px;
  overflow-y: auto;
}

/* Grid layout */
.contact-detail-in-company .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Logs section */
.contact-detail-in-company .contact-logs-section {
  margin: 0;
  padding: 0;
  border-top: none;
}

@media (max-width: 500px) {
  .contact-detail-in-company .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STATUS BAR - SLEEK REDESIGN
   ============================================ */

.status-bar-container {
  background: white;
  padding: 16px 20px;
  margin: -20px -20px 16px -20px;
  border-bottom: 1px solid #e1e8ed;
}

.status-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-stages {
  display: flex;
  align-items: center;
  background: #354649;
  border-radius: 8px;
  padding: 4px;
  gap: 3px;
}

.status-stage-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
}

.status-stage {
  flex: 1;
  display: flex;
  cursor: pointer;
  min-width: 0;
}

.status-stage-inner {
  width: 100%;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 10px 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Future stages (default) - transparent on dark background */
.status-stage .status-stage-inner {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}

/* Completed stages (behind current) */
.status-stage.completed .status-stage-inner {
  background: #6C7A89;
  color: white;
}

/* Active/Current stage */
.status-stage.active .status-stage-inner {
  background: #A3C6C4;
  color: #1a2a2a;
  box-shadow: 0 2px 8px rgba(163, 198, 196, 0.4);
}

/* Hover state */
.status-stage:hover .status-stage-inner {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.status-stage.active:hover .status-stage-inner {
  background: #b5d4d2;
  color: #1a2a2a;
}

.status-stage.completed:hover .status-stage-inner {
  background: #7d8b99;
}

/* Dead status - red accent */
.status-stage.dead .status-stage-inner {
  background: #e74c3c;
  color: white;
}

.status-stage.dead:hover .status-stage-inner {
  background: #ec6b5d;
}

/* Closed won - gold accent */
.status-stage.closed-won .status-stage-inner {
  background: #f39c12;
  color: white;
}

.status-stage.closed-won:hover .status-stage-inner {
  background: #f5ad35;
}

/* Status reason section */
.status-reason-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.status-reason-label {
  font-weight: 600;
  color: #6C7A89;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-reason-value {
  color: #354649;
  padding: 6px 14px;
  background: #f0f4f4;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #e0e7e7;
}

/* Status reason dropdown */
.status-reason-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  display: none;
  overflow: hidden;
}

.status-reason-dropdown.show {
  display: block;
  animation: dropIn 0.2s ease;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.status-reason-option {
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
}

.status-reason-option:last-child {
  border-bottom: none;
}

.status-reason-option:hover {
  background: #f0f7f7;
  padding-left: 20px;
  color: #2d7d7d;
}

/* Amount field for closed won */
.amount-section {
  margin-top: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
  border-radius: 10px;
  border: 1px solid #f0d860;
  display: none;
}

.amount-section.show {
  display: block;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.amount-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.amount-label {
  font-weight: 600;
  color: #b8860b;
  font-size: 13px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.amount-input {
  flex: 1;
  max-width: 180px;
  padding: 10px 14px;
  border: 2px solid #f0d860;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #8b6914;
  background: white;
}

.amount-input:focus {
  outline: none;
  border-color: #d4a800;
  box-shadow: 0 0 0 3px rgba(212, 168, 0, 0.15);
}

.amount-save-btn {
  background: linear-gradient(135deg, #f5c518 0%, #d4a800 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.amount-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 168, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .status-stage-inner {
    font-size: 9px;
    padding: 8px 4px;
    letter-spacing: 0;
  }
  
  .status-stages {
    padding: 3px;
    gap: 2px;
  }
}

@media (max-width: 400px) {
  .status-stage-inner {
    font-size: 8px;
    padding: 6px 2px;
  }
}

/* ============================================
   CUSTOM PNG ICONS
   ============================================ */

/* Base icon style */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Small icon variant */
.icon.icon-sm {
  width: 16px;
  height: 16px;
}

/* Large icon variant */
.icon.icon-lg {
  width: 24px;
  height: 24px;
}

/* Extra large icon variant */
.icon.icon-xl {
  width: 32px;
  height: 32px;
}

/* === LOG & TASK TYPE ICONS === */
.icon-phone {
  background-image: url('icons/make call icon.png');
}

.icon-email {
  background-image: url('icons/send email icon.png');
}

.icon-text {
  background-image: url('icons/text icon.png');
}

.icon-meeting {
  background-image: url('icons/meeting icon.png');
}

.icon-note {
  background-image: url('icons/note icon.png');
}

.icon-sequence {
  background-image: url('icons/add to sequence icon.png');
}

.icon-system {
  background-image: url('icons/system icon.png');
}

.icon-income {
  background-image: url('icons/income icon.png');
}

/* === NAVIGATION ICONS === */
.icon-contacts {
  background-image: url('icons/contacts icon.png');
}

.icon-companies {
  background-image: url('icons/companies icon.png');
}

.icon-sequences {
  background-image: url('icons/sequences icon.png');
}

.icon-tasks {
  background-image: url('icons/tasks icon.png');
}

.icon-logs {
  background-image: url('icons/logs icon.png');
}

.icon-reports {
  background-image: url('icons/reports icon.png');
}

.icon-settings {
  background-image: url('icons/settings icon.png');
}

/* === STATUS ICONS === */
.icon-status-new {
  background-image: url('icons/status new icon.png');
}

.icon-status-connected {
  background-image: url('icons/status connected icon.png');
}

.icon-status-sequence {
  background-image: url('icons/status sequence icon.png');
}

.icon-status-dead {
  background-image: url('icons/status dead icon.png');
}

.icon-status-won {
  background-image: url('icons/status won icon.png');
}

.icon-status-contract {
  background-image: url('icons/status contract icon.png');
}

.icon-status-renewed {
  background-image: url('icons/status renewed icon.png');
}

/* === COMPANY VIEW ICONS === */
.icon-company {
  background-image: url('icons/company icon.png');
}

.icon-location {
  background-image: url('icons/location icon.png');
}

.icon-website {
  background-image: url('icons/website icon.png');
}

/* === ACTION ICONS === */
.icon-add {
  background-image: url('icons/add icon.png');
}

.icon-edit {
  background-image: url('icons/edit icon.png');
}

.icon-delete {
  background-image: url('icons/delete icon.png');
}

.icon-back {
  background-image: url('icons/back icon.png');
}

.icon-sync {
  background-image: url('icons/sync icon.png');
}

/* === EMPTY STATE ICONS === */
.icon-empty-contact {
  background-image: url('icons/empty contact icon.png');
}

.icon-empty-search {
  background-image: url('icons/empty search icon.png');
}

/* Fix independent scrolling for company view panels */
#companyContacts.company-contacts-view {
  display: block;
  height: 100%;
  overflow: hidden;
}

#companyContacts .company-view-container {
  height: 100%;
  overflow: hidden;
}

#companyContacts .companies-list-section {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#companyContacts .companies-list-header {
  flex-shrink: 0;
}

#companyContacts .companies-mini-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

#companyContacts .company-info-section {
  height: 100%;
  overflow-y: auto;
  min-height: 0;
}

#companyContacts .company-contacts-section {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#companyContacts .company-contacts-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: #bdc3c7 !important;
  border-color: #aaa !important;
  color: #777 !important;
}

.action-btn:disabled img {
  opacity: 0.5;
}

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

.delete-task-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.delete-task-btn:hover {
  opacity: 1;
  background-color: #fee2e2;
}

/* ============================================
   VIDEO LIBRARY STYLES
   ============================================ */

.video-library-info {
  padding: 12px 16px;
  background: #f0f7ff;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #555;
}

.video-count-badge {
  background: #e8e8e8;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  color: #666;
}

.video-library-list {
  padding: 16px;
}

.video-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.video-library-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.video-library-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.video-thumbnail-container {
  position: relative;
  width: 100%;
  height: 160px;
  background: #000;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

.video-thumbnail-container:hover .video-play-overlay {
  opacity: 1;
}

.play-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
  padding-left: 4px;
}

.video-card-body {
  padding: 12px 16px 16px;
}

.video-title-row {
  margin-bottom: 8px;
}

.video-title-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 4px;
  transition: border-color 0.2s, background-color 0.2s;
}

.video-title-input:hover {
  background: #f5f5f5;
}

.video-title-input:focus {
  outline: none;
  border-color: #3498db;
  background: white;
}

.video-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
}

.video-meta span {
  margin-right: 4px;
}

.video-actions {
  display: flex;
  gap: 8px;
}

.video-action-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.video-action-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.video-action-btn.copy-link-btn:hover {
  background: #e3f2fd;
  border-color: #3498db;
  color: #3498db;
}

.video-action-btn.delete-video-btn {
  flex: 0;
  padding: 8px 12px;
  color: #e74c3c;
}

.video-action-btn.delete-video-btn:hover {
  background: #fdeaea;
  border-color: #e74c3c;
}

/* Video Recording Modal Styles */
#videoRecordingModal .modal-content {
  text-align: center;
}

/* Email compose video buttons */
.email-video-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.email-video-actions .video-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.email-video-actions .video-btn:hover {
  opacity: 0.9;
}

#recordVideoBtn {
  background: #9b59b6;
  color: white;
}

#insertVideoBtn {
  background: #3498db;
  color: white;
}

/* Attached video preview in email */
#attachedVideoPreview {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

#attachedVideoPreview img {
  border-radius: 4px;
}

#removeAttachedVideoBtn {
  padding: 4px 10px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#removeAttachedVideoBtn:hover {
  background: #c0392b;
}

/* Video Library Picker Modal */
.video-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.video-library-item {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  background: #f8f9fa;
}

.video-library-item:hover {
  border-color: #3498db;
  transform: translateY(-2px);
}

.video-library-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.video-library-item > div {
  padding: 8px;
}

/* No videos message */
.no-videos-message {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.no-videos-message h3 {
  margin-bottom: 8px;
  color: #333;
}

.no-videos-message p {
  margin-bottom: 24px;
}

.status-prompt-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 14px;
}

.status-option-btn:hover {
  background: #e8f4fc;
  border-color: #354649;
}

.status-option-btn .status-icon {
  font-size: 20px;
}

/* Email Templates */
.template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 8px;
  background: white;
}

.template-item:hover {
  background: #f9f9f9;
}

.template-item-info {
  flex: 1;
  min-width: 0;
}

.template-item-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.template-item-subject {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-item-actions {
  display: flex;
  gap: 8px;
}

.template-item-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  border-radius: 4px;
}

.template-item-actions button:hover {
  background: #eee;
}

.templates-list {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  background: #fafafa;
}

/* Variable Autocomplete */
.variable-autocomplete {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10000;
  min-width: 180px;
}

.variable-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: monospace;
  border-bottom: 1px solid #eee;
}

.variable-autocomplete-item:last-child {
  border-bottom: none;
}

.variable-autocomplete-item:hover,
.variable-autocomplete-item.selected {
  background: #f0f7ff;
  color: #2980b9;
}

.variable-autocomplete-item .var-name {
  font-weight: 600;
}

.variable-autocomplete-item .var-hint {
  font-size: 11px;
  color: #888;
  margin-left: 8px;
  font-family: sans-serif;
}

/* Signature Editor */
.signature-editor {
  min-height: 150px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.signature-editor:focus {
  outline: none;
  border-color: #6597a1;
  box-shadow: 0 0 0 2px rgba(101, 151, 161, 0.2);
}

.signature-editor:empty:before {
  content: attr(data-placeholder);
  color: #999;
  pointer-events: none;
}

.signature-editor img {
  max-width: 200px;
  max-height: 100px;
  border-radius: 4px;
  display: block;
  margin: 8px 0;
}

/* ============================================
   CALENDAR STYLES
   ============================================ */

/* Calendar Container */
.calendar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Outlook Coming Soon Banner */
.outlook-coming-soon-banner {
  background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.outlook-coming-soon-banner .banner-icon {
  font-size: 48px;
}

.outlook-coming-soon-banner .banner-text strong {
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}

.outlook-coming-soon-banner .banner-text p {
  margin: 0;
  opacity: 0.9;
}

/* Calendar Header */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.calendar-nav-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.calendar-today-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-today-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.calendar-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-left: 12px;
}

.calendar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* View Toggle Buttons */
.calendar-view-toggle {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.calendar-view-toggle .view-btn {
  padding: 8px 16px;
  border: none;
  background: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #ddd;
}

.calendar-view-toggle .view-btn:last-child {
  border-right: none;
}

.calendar-view-toggle .view-btn:hover {
  background: #f5f5f5;
}

.calendar-view-toggle .view-btn.active {
  background: #E8AA9B;
  color: white;
}

/* Calendar Not Connected State */
.calendar-not-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: #f9f9f9;
  border-radius: 12px;
  border: 2px dashed #ddd;
}

.calendar-not-connected .empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.calendar-not-connected h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}

.calendar-not-connected p {
  margin: 0 0 20px 0;
  color: #666;
}

/* Calendar Loading State */
.calendar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.calendar-loading p {
  margin-top: 16px;
  color: #666;
}

/* Calendar Grid */
.calendar-grid {
  flex: 1;
  overflow: auto;
}

.calendar-view {
  height: 100%;
}

/* Month View */
.month-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e0e0e0;
  border-bottom: none;
}

.calendar-weekdays .weekday {
  padding: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #555;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 8px 8px;
  min-height: 500px;
}

.calendar-day {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px;
  min-height: 100px;
  background: white;
  cursor: pointer;
  transition: background 0.2s;
  overflow: hidden;
}

.calendar-day:hover {
  background: #fafafa;
}

.calendar-day:nth-child(7n) {
  border-right: none;
}

.calendar-day:nth-last-child(-n+7) {
  border-bottom: none;
}

.calendar-day.other-month {
  background: #f9f9f9;
}

.calendar-day.other-month .day-number {
  color: #bbb;
}

.calendar-day.today {
  background: #fff8f6;
}

.calendar-day.today .day-number {
  background: #E8AA9B;
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-number {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.day-event {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #E8AA9B;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.2s;
}

.day-event:hover {
  opacity: 0.85;
}

.day-event.all-day {
  background: #A3C6C4;
}

.more-events {
  font-size: 11px;
  color: #666;
  padding: 2px 4px;
  cursor: pointer;
}

.more-events:hover {
  color: #E8AA9B;
}

/* Week/Work Week/Day View Common Styles */
.week-view,
.work-week-view,
.day-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
}

.week-header,
.day-header {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.time-gutter {
  width: 60px;
  min-width: 60px;
  border-right: 1px solid #e0e0e0;
}

.week-day-headers {
  display: flex;
  flex: 1;
}

.week-day-header {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid #e0e0e0;
  font-size: 13px;
}

.week-day-header:last-child {
  border-right: none;
}

.week-day-header .day-name {
  font-weight: 600;
  color: #555;
  display: block;
}

.week-day-header .day-date {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-top: 4px;
  display: block;
}

.week-day-header.today .day-date {
  background: #E8AA9B;
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.day-header-date {
  flex: 1;
  padding: 12px;
  text-align: center;
}

.day-header-date .day-name {
  font-weight: 600;
  color: #555;
  font-size: 14px;
}

.day-header-date .day-date {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.week-body,
.day-body {
  display: flex;
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.time-column {
  width: 60px;
  min-width: 60px;
  border-right: 1px solid #e0e0e0;
  background: #fafafa;
}

.time-slot-label {
  height: 60px;
  padding: 4px 8px;
  font-size: 11px;
  color: #888;
  text-align: right;
  border-bottom: 1px solid #f0f0f0;
}

.week-day-columns {
  display: flex;
  flex: 1;
}

.week-day-column {
  flex: 1;
  border-right: 1px solid #e0e0e0;
  position: relative;
}

.week-day-column:last-child {
  border-right: none;
}

.day-events-column {
  flex: 1;
  position: relative;
}

.hour-slot {
  height: 60px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.hour-slot:hover {
  background: #f5f5f5;
}

.hour-slot.half-hour {
  border-bottom: 1px dashed #f0f0f0;
}

/* Events in Week/Day View */
.week-event,
.day-event-block {
  position: absolute;
  left: 2px;
  right: 2px;
  background: #E8AA9B;
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  overflow: visible;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 22px;
}

.week-event:hover,
.day-event-block:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 6;
}

.week-event .event-time,
.day-event-block .event-time {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.95;
  white-space: nowrap;
  line-height: 1.2;
}

.week-event .event-title,
.day-event-block .event-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.week-event .event-title,
.day-event-block .event-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* All-day events row */
.all-day-events {
  display: flex;
  padding: 4px;
  gap: 4px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
  min-height: 30px;
  flex-wrap: wrap;
}

.all-day-event {
  background: #A3C6C4;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

/* Create Meeting Modal Styles */
#createMeetingModal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

#createMeetingModal .form-group {
  margin-bottom: 16px;
}

#createMeetingModal .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

#createMeetingModal .form-group input[type="text"],
#createMeetingModal .form-group input[type="date"],
#createMeetingModal .form-group input[type="time"],
#createMeetingModal .form-group select,
#createMeetingModal .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

#createMeetingModal .form-group input:focus,
#createMeetingModal .form-group select:focus,
#createMeetingModal .form-group textarea:focus {
  outline: none;
  border-color: #E8AA9B;
}

#createMeetingModal .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
}

#createMeetingModal .checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* View Meeting Modal Styles */
.meeting-detail-content {
  padding: 8px 0;
}

.meeting-detail-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.meeting-detail-item:last-child {
  border-bottom: none;
}

.meeting-detail-item .detail-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.meeting-detail-item .detail-value {
  font-size: 15px;
  color: #333;
}

.meeting-detail-item .meet-link {
  color: #1a73e8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meeting-detail-item .meet-link:hover {
  text-decoration: underline;
}

.meeting-detail-item .contact-link {
  color: #E8AA9B;
  text-decoration: none;
  cursor: pointer;
}

.meeting-detail-item .contact-link:hover {
  text-decoration: underline;
}

.meeting-detail-item .attendees-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meeting-detail-item .attendee-chip {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 13px;
  color: #555;
}

.meeting-detail-item .description {
  white-space: pre-wrap;
  line-height: 1.5;
}

#viewMeetingModal .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

#viewMeetingModal .danger-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-right: auto;
}

#viewMeetingModal .danger-btn:hover {
  background: #c82333;
}

#viewMeetingModal .edit-btn {
  background: white;
  color: #333;
  border: 1px solid #ddd;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

#viewMeetingModal .edit-btn:hover {
  background: #f5f5f5;
}

#openInGoogleCalendarBtn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* Calendar Action Button in Contact Detail */
.action-btn.calendar-btn {
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  color: white;
}

.action-btn.calendar-btn:hover {
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .calendar-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .calendar-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .calendar-view-toggle {
    order: 2;
  }
  
  #createMeetingModal .form-row {
    grid-template-columns: 1fr;
  }
  
  .week-day-header .day-date {
    font-size: 16px;
  }
  
  .time-gutter,
  .time-column {
    width: 50px;
    min-width: 50px;
  }
}

/* Mini Meeting Button in Company Contacts View */
.contact-mini-meeting-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.2s;
}

.contact-mini-meeting-btn:hover {
  opacity: 1;
  background: #f0f0f0;
}

.contact-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn.meeting-btn {
  background: #E0E7E9;
  color: #2c3e50;
  border: 2px solid #A3C6C4;
}

.action-btn.meeting-btn:hover {
  background: #A3C6C4;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163,198,196,0.3);
}

/* ========================================
   ADVANCED FILTER STYLES
   ======================================== */

/* Filter Accordion */
.filter-accordion {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: white;
}

.filter-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #2c3e50;
  transition: background 0.2s;
  user-select: none;
}

.filter-accordion-header:hover {
  background: #e9ecef;
}

.filter-accordion-header .accordion-arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
  color: #666;
}

.filter-accordion.collapsed .accordion-arrow {
  transform: rotate(-90deg);
}

.filter-accordion-content {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  max-height: 500px;
  opacity: 1;
}

.filter-accordion.collapsed .filter-accordion-content {
  max-height: 0;
  padding: 0 16px;
  opacity: 0;
  overflow: hidden;
  border-top: none;
}

/* Filters Grid - Updated for new layout */
.filters-section .filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Filter Group with Toggle */
.filter-group.with-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group.with-toggle.full-width {
  grid-column: 1 / -1;
}

.filter-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.filter-label-row > label:first-child {
  font-weight: 500;
  font-size: 13px;
  color: #2c3e50;
  margin: 0;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  color: #666;
  user-select: none;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: #e74c3c;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.toggle-switch.small .toggle-slider {
  width: 32px;
  height: 18px;
}

.toggle-switch.small .toggle-slider::before {
  width: 14px;
  height: 14px;
}

.toggle-switch.small input:checked + .toggle-slider::before {
  transform: translateX(14px);
}

.toggle-label-text {
  font-size: 11px;
  color: #999;
  transition: color 0.3s;
}

.toggle-switch input:checked ~ .toggle-label-text {
  color: #e74c3c;
  font-weight: 600;
}

/* Range Inputs */
.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-inputs input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  min-width: 0;
}

.range-inputs input:focus {
  border-color: #6FA3A0;
  outline: none;
  box-shadow: 0 0 0 2px rgba(111, 163, 160, 0.2);
}

.range-inputs span {
  color: #999;
  font-size: 12px;
  flex-shrink: 0;
}

/* Filter inputs and selects in accordion */
.filter-accordion .filter-group input[type="text"],
.filter-accordion .filter-group input[type="number"],
.filter-accordion .filter-group input[type="date"],
.filter-accordion .filter-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-accordion .filter-group input:focus,
.filter-accordion .filter-group select:focus {
  border-color: #6FA3A0;
  outline: none;
  box-shadow: 0 0 0 2px rgba(111, 163, 160, 0.2);
}

.filter-accordion .filter-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Filter Actions - Updated */
.filters-section .filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

/* Active filter indicator */
.filter-accordion-header.has-active-filters::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #3498db;
  border-radius: 50%;
  margin-left: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .filters-section .filters-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-label-row {
    flex-wrap: wrap;
  }
  
  .range-inputs {
    flex-wrap: wrap;
  }
  
  .range-inputs input {
    min-width: 80px;
  }
}

/* Filter Mode Toggle (Include/Exclude) */
.filter-mode-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.filter-mode-toggle .mode-label {
  color: #999;
  font-weight: 500;
  transition: color 0.3s, font-weight 0.3s;
}

.filter-mode-toggle .include-label {
  color: #27ae60;
  font-weight: 600;
}

.filter-mode-toggle .exclude-label {
  color: #999;
}

/* When exclude is checked, swap the colors */
.filter-mode-toggle:has(input:checked) .include-label {
  color: #999;
  font-weight: 500;
}

.filter-mode-toggle:has(input:checked) .exclude-label {
  color: #e74c3c;
  font-weight: 600;
}

/* Remove the old toggle-label-text since we're not using it anymore */
.toggle-switch .toggle-label-text {
  display: none;
}

.bulk-filter-group-header {
  font-weight: 600;
  font-size: 13px;
  color: #666;
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e1e8ed;
}

.bulk-filter-group-header:first-of-type {
  margin-top: 0;
}

/* Marketing Content in Login/Paywall - Matches standalone marketing page */
.login-info,
.paywall-info {
  flex: 1;
  overflow-y: auto;
  background: #f9fafb;
}

.login-info-content,
.paywall-info-content {
  padding: 0;
}

.marketing-content {
  background: #f9fafb;
}

.marketing-content .marketing-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.marketing-hero {
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
  padding: 60px 40px;
  text-align: center;
}

.marketing-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #E0E7E9;
}

.marketing-tagline {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.marketing-section {
  background: white;
  padding: 50px 40px;
  margin: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.marketing-section h2 {
  color: #1a1a2e;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-align: center;
}

.marketing-section-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

/* Video Container */
.marketing-video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 45%;
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  border-radius: 8px;
  overflow: hidden;
}

.marketing-video-container .video-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #888;
  text-align: center;
}

.marketing-video-container .video-placeholder svg {
  opacity: 0.5;
  margin-bottom: 15px;
}

.marketing-video-container .video-placeholder p {
  margin: 0;
}

/* Features Grid */
.marketing-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.marketing-feature {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 25px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.marketing-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.marketing-feature .feature-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #A3C6C4 0%, #6C7A89 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.marketing-feature .feature-icon svg {
  width: 26px;
  height: 26px;
  color: white;
  stroke: white;
}

.marketing-feature h3 {
  color: #1a1a2e;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.marketing-feature p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Pricing Table */
.marketing-pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.marketing-pricing-table th,
.marketing-pricing-table td {
  padding: 18px 20px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.marketing-pricing-table th {
  background: #f9fafb;
  color: #1a1a2e;
  font-weight: 600;
  font-size: 1rem;
}

.marketing-pricing-table th:first-child,
.marketing-pricing-table td:first-child {
  text-align: left;
  font-weight: 500;
}

.marketing-pricing-table tr:last-child td {
  border-bottom: none;
}

.marketing-pricing-table .price-highlight {
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
}

.marketing-pricing-table th.price-highlight {
  background: linear-gradient(135deg, #354649 0%, #6C7A89 100%);
  color: white;
}

.marketing-pricing-table .price-amount {
  font-size: 1.4rem;
  font-weight: 700;
}

.marketing-pricing-table .price-period {
  font-size: 0.85rem;
  opacity: 0.8;
}

.marketing-pricing-table .price-highlight .price-amount,
.marketing-pricing-table .price-highlight .price-period {
  color: #E0E7E9;
  opacity: 1;
}

.marketing-pricing-table .competitor-price {
  color: #888;
}

.marketing-pricing-table .check-icon {
  color: #22c55e;
  font-size: 1.3rem;
}

.marketing-pricing-table .x-icon {
  color: #ef4444;
  font-size: 1.2rem;
}

/* Savings Banner */
.marketing-savings {
  background: #f0fdf4;
  border: 2px solid #22c55e;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  margin-top: 30px;
}

.marketing-savings strong {
  color: #16a34a;
  font-size: 1.3rem;
  display: block;
}

.marketing-savings p {
  color: #666;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Benefits */
.marketing-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
}

.benefit-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.benefit-check svg {
  stroke: white;
}

.benefit-text strong {
  display: block;
  color: #1a1a2e;
  margin-bottom: 5px;
}

.benefit-text p {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .marketing-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .marketing-hero {
    padding: 40px 20px;
  }
  
  .marketing-hero h1 {
    font-size: 2rem;
  }
  
  .marketing-tagline {
    font-size: 1.1rem;
  }
  
  .marketing-section {
    padding: 30px 20px;
    margin: 15px;
  }
  
  .marketing-features-grid {
    grid-template-columns: 1fr;
  }
  
  .marketing-pricing-table {
    font-size: 0.85rem;
  }
  
  .marketing-pricing-table th,
  .marketing-pricing-table td {
    padding: 12px 8px;
  }
  
  .marketing-pricing-table .price-amount {
    font-size: 1.1rem;
  }
  
  .marketing-benefits {
    grid-template-columns: 1fr;
  }
}