/* CRM App Main Styles */

/* View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Keep header static during transitions */
.app-header {
  view-transition-name: header;
}

/* Font Declarations */
@font-face {
  font-family: 'Fira Sans';
  src: url('../assets/fonts/fira/FiraSans-Light.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../assets/fonts/fira/FiraSans-LightItalic.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraSans-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../assets/fonts/fira/FiraSans-Medium.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../assets/fonts/fira/FiraSans-MediumItalic.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraSans-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../assets/fonts/fira/FiraSans-ExtraBold.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraSans-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Mono';
  src: url('../assets/fonts/fira/FiraMono-Regular.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraMono-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Mono';
  src: url('../assets/fonts/fira/FiraMono-Bold.woff2') format('woff2'),
       url('../assets/fonts/fira/FiraMono-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary-color: #fdc844; /* ib */
  --primary-dark: #e6b73e;
  --success-color: #9ad795; /* green */
  --warning-color: #fdc844; /* ib */
  --danger-color: #e08686; /* red */
  --text-color: #1d2731; /* ivory */
  --secondary-text: #768084; /* grey */
  --light-gray: #e7e7f7; /* lightgrey */
  --medium-gray: #a3a9ab;
  --dark-gray: #768084; /* grey */
  --border-color: #e7e7f7; /* lightgrey */
  --white: #fff; /* white */
  --cloud: #f7f7f7; /* cloud */
  --blue: #4c94c4; /* blue */
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --header-height: 60px;
  --sidebar-width: 250px;
  --border-radius: 4px;
  --deal-card-height: 120px;
  
  /* Dark mode transition */
  --transition-speed: 0.3s;
}

/* Dark Mode Variables */
.dark-mode {
  /* Keep primary brand colors mostly the same */
  --primary-color: #fdc844; 
  --primary-dark: #e6b73e;
  --success-color: #9ad795;
  --warning-color: #fdc844;
  --danger-color: #e08686;
  
  /* Flip text colors */
  --text-color: #ffffff;
  --secondary-text: #e0e0e0;
  
  /* Flip background colors */
  --white: #1a1a1a;
  --cloud: #121212;
  --light-gray: #2c2c2c;
  --medium-gray: #666666;
  --dark-gray: #aaaaaa;
  --border-color: #333333;
  
  /* Keep accent colors */
  --blue: #4c94c4;
  
  /* Light/whitish shadow for dark mode */
  --card-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);

  /* Set consistent background for inputs, selects and textareas in dark mode */
  --input-bg: #1a1a1a;
  --input-text: #ffffff;
  --input-border: #333333;
  --input-focus-border: var(--primary-color);
  --input-focus-shadow: rgba(253, 200, 68, 0.2);
}

html, body, button, input, select, textarea {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color: var(--text-color);
  background-color: var(--cloud);
  height: 100%;
  line-height: 1.5;
  transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

input, select, textarea, button {
  height: auto;
}

#app {
  height: 100%;
  min-width: 320px;
}

/* Apply transitions to all elements that need to change in dark mode */
.app-header, .login-container, .modal, .card, .btn, .form-group input,
.form-group select, .form-group textarea, .toast, .stage,
.deal-card, .contact-item, .activity-item, .db-item, .list-item,
.section, .db-data-details, .modal-content, #login-view, .login-container input {
  transition: background-color var(--transition-speed) ease,
              border-color var(--transition-speed) ease,
              box-shadow var(--transition-speed) ease;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 800;
  color: var(--text-color);
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
}

/* Button Styles */
.btn {
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius);
  background-color: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 14px;
  font-family: 'Fira Sans', sans-serif;
  transition: all 0.2s ease;
}

/* Revert this change - we want buttons to keep their original styling */

#logout-button {
  background-color: transparent;
  border: none;
}

.btn:hover {
  background-color: var(--light-gray);
}

.btn-primary {
  background-color: var(--primary-color);
  color: #1d2731; /* Always black text on yellow buttons */
  border: 1px solid var(--primary-dark);
  font-weight: 500;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

/* Ensure buttons with primary color always have black text, even in dark mode */
.dark-mode .btn-primary {
  color: #1d2731; /* Keep text dark on yellow buttons in dark mode */
  background-color: var(--primary-color); /* Keep the primary yellow color in dark mode */
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
  border: 1px solid #c0392b;
}

.btn-danger:hover {
  background-color: #c0392b;
}

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
}

/* Form Styles */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 14px;
}

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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(253, 200, 68, 0.2);
}

/* Login View */
#login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  background-color: #f5f7fa;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode #login-view {
  background-color: var(--cloud);
}

.login-container {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  width: 100%;
  max-width: 400px;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .login-container {
  background-color: #222222;
}

/* Login page logo styling */
.login-container .logo {
  margin-bottom: 30px;
  justify-content: center;
  font-size: 24px;
  align-self: center;
  display: flex;
  cursor: default;
}

.login-container .ib-logo {
  height: 42px;
  margin-right: 8px;
  transition: filter var(--transition-speed) ease;
}

.login-container .logo span {
  color: #1d2731; /* Always black in light mode */
  transition: color var(--transition-speed) ease;
}

.dark-mode .login-container .logo span {
  color: #ffffff; /* Always white in dark mode */
}

.dark-mode .login-container .ib-logo {
  filter: brightness(1.1);
}

#login-button {
  width: 100%;
  margin-top: 8px;
}

.message {
  margin-top: 16px;
  text-align: center;
  color: var(--secondary-text);
}

/* App Header */
.app-header {
  height: var(--header-height);
  background-color: white;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .app-header {
  background-color: #0a0a0a; /* Darker than the main background for contrast */
}

.logo {
  font-weight: bold;
  font-size: 20px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 5px;
  border-radius: var(--border-radius);
}

.logo img {
  color: var(--primary-color);
}

.logo span {
  color: #1d2731; /* Always black in light mode */
  transition: color var(--transition-speed) ease;
}

.dark-mode .logo span {
  color: #ffffff; /* Always white in dark mode */
}

.ib-logo {
  height: 32px;
  margin-right: 5px;
  transition: filter var(--transition-speed) ease;
}

/* Apply a slight brightness filter to the logo in dark mode for better visibility */
.dark-mode .ib-logo {
  filter: brightness(1.1);
}


.main-nav {
  flex: 1;
  display: flex;
}

.nav-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  margin-right: 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--text-color);
  font-weight: 500;
  font-family: 'Fira Sans', sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Force text-decoration to none for all link states */
.nav-btn,
.nav-btn:hover,
.nav-btn:visited,
.nav-btn:active,
.nav-btn:focus,
.view-header a.btn,
.view-header a.btn:hover,
.view-header a.btn:visited,
.view-header a.btn:active,
.view-header a.btn:focus {
  text-decoration: none;
}

.nav-icon {
  margin-right: 8px;
}

.nav-btn.active {
  background-color: var(--light-gray);
  color: var(--text-color);
  font-weight: 600;
}

.user-menu {
  display: flex;
  align-items: center;
}

#user-email {
  margin-right: 12px;
  color: var(--secondary-text);
  font-size: 14px;
  word-break: break-word;
  overflow-wrap: break-word;
}

#logout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 10px;
}

.logout-icon {
  margin-right: 2px;
}

/* Main Content Views */
#app-view {
  height: 100%;
  padding-top: var(--header-height);
}

#contacts-view, #activities-view, #db-view, #deal-detail-view { max-width: 1400px; margin-left: auto; margin-right: auto; }

.content-view {
  height: auto;
  min-height: calc(100% - var(--header-height));
  padding: 20px;
  transition: background-color var(--transition-speed) ease;
  background-color: transparent;
}

.content-view h2 { margin-bottom: 0; }

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 0;
}

.view-header h2 {
  margin-left: 12px;
  margin-bottom: 0;
}

.view-header a.btn {
  padding: 8px 12px;
  font-weight: 500;
  line-height: 1.2;
  background-color: white;
  color: #1d2731;
  border: 1px solid var(--border-color);
}

.dark-mode .view-header a.btn {
  background-color: white;
  color: #1d2731;
  border-color: #444444;
}

.view-header-actions {
  display: flex;
  gap: 10px;
}

.view-header-actions button {
  padding: 6px 12px;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide text on small screens, show only icon */
@media (max-width: 599px) {
  .view-header-actions button .btn-text {
    display: none;
  }
  
  .view-header-actions button {
    padding: 10px;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    border-radius: 4px;
  }
  
  .view-header-actions button .btn-icon {
    margin: 0;
  }
  
  .view-header-actions button .btn-icon svg {
    width: 18px;
    height: 18px;
  }
}

#delete-deal-button {
  margin-left: auto;
}

#archive-deal-button.archived .btn-text {
  color: var(--text-color);
}

.dark-mode #archive-deal-button.archived .btn-text {
  color: #1d2731;
}

/* Pipeline View */
.pipeline-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.pipeline-title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px;
  justify-content: center;
}

.pipeline-title-section h2 {
  margin-bottom: 5px;
  margin-top: 0;
}

.pipeline-summary {
  font-size: 14px;
  color: var(--secondary-text);
  padding-right: 20px;
}

.total-value {
  font-family: 'Fira Mono', monospace;
  font-weight: normal;
}

.value-currency, #total-pipeline-value {
  font-weight: bold;
}

.pipeline-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.pipeline-filter {
  display: flex;
  justify-content: flex-end;
}

#add-deal-button, #add-contact-button, #add-activity-button {
  padding: 8px 12px;
  min-height: auto;
  font-size: 14px;
  width: fit-content;
  white-space: nowrap;
}

.archive-toggle-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--secondary-text);
  padding: 6px 10px;
  border-radius: var(--border-radius);
  background-color: var(--cloud);
  border: 1px solid var(--border-color);
  transition: background-color 0.2s;
  width: fit-content;
  min-height: auto;
  white-space: nowrap;
  align-self: center;
}

.archive-toggle-label:hover {
  background-color: var(--light-gray);
}

.archive-toggle-label input {
  margin-right: 8px;
  cursor: pointer;
}

@media (min-width: 600px) {
  .pipeline-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .pipeline-title-section {
    margin-bottom: 0;
  }
  
  .pipeline-actions {
    width: auto;
    flex-direction: row-reverse;
    gap: 15px;
    align-items: center;
  }
  
  .pipeline-filter {
    width: auto;
  }
}

.pipeline-container {
  overflow-x: auto;
  margin-bottom: 30px;
}

/* Pipeline Statistics Styles */
.pipeline-stats {
  margin-top: 30px;
  margin-bottom: 20px;
}

.pipeline-stats-summary {
  font-size: 14px;
  color: var(--secondary-text);
  line-height: 1.6;
}

.stat-line {
  font-family: 'Fira Mono', monospace;
}

/* Make all stat values bold */
.stat-value {
  font-weight: bold;
}

/* Green color for won stats */
.stat-won {
  color: var(--success-color);
}

/* Red color for lost stats */
.stat-lost {
  color: var(--danger-color);
}

/* Keep existing styles for backward compatibility */
#win-loss-ratio, #avg-deal-size, #total-won-value, #deals-won-count, #deals-lost-count, .stage-value-amount, .value-currency {
  font-weight: bold;
}

#deals-won-count {
  color: var(--success-color);
}

#deals-lost-count {
  color: var(--danger-color);
}

.pipeline-stages {
  display: flex;
  min-height: min-content;
  height: auto;
}

.stage {
  flex: 1;
  min-width: 280px;
  margin-right: 16px;
  background-color: var(--light-gray);
  border-radius: var(--border-radius);
  padding: 8px;
}

.stage:last-child {
  margin-right: 0;
}

.stage-header {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
}

.stage-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.stage-metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  min-width: 0;
}

.stage-value {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-color);
  font-family: 'Fira Mono', monospace;
}

.stage-count {
  font-size: 12px;
  color: var(--secondary-text);
  font-weight: 500;
}

/* When showing archived deals, make the count more prominent */
.show-archived .stage-count {
  color: var(--text-color);
  font-weight: 600;
}

.stage-deals {
  min-height: 100px;
}

/* Deal Cards */
.deal-card {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  border-left: 7px solid var(--primary-color);
  transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.dark-mode .deal-card {
  background-color: #222222; /* Dark gray instead of pure black */
}

/* Drag and drop styling */
/* The ghost image (the one that follows cursor) is always at full opacity by default */

/* The original element that stays behind during drag */
.deal-card[aria-grabbed="true"] {
  opacity: 0.25;
}

.deal-card.won {
  border-left-color: var(--success-color);
}

.deal-card.lost {
  border-left-color: var(--danger-color);
}

.deal-card.archived {
  opacity: 0.9;
  background-color: #e8e8e8;
  position: relative;
}

.dark-mode .deal-card.archived {
  background-color: #1a1a1a;
  opacity: 0.95;
}

.deal-card.archived::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(120, 120, 120, 0.1),
    rgba(120, 120, 120, 0.1) 10px,
    rgba(150, 150, 150, 0.1) 10px,
    rgba(150, 150, 150, 0.1) 20px
  );
  pointer-events: none;
}

.dark-mode .deal-card.archived::before {
  background: repeating-linear-gradient(
    45deg,
    rgba(60, 60, 60, 0.3),
    rgba(60, 60, 60, 0.3) 10px,
    rgba(80, 80, 80, 0.3) 10px,
    rgba(80, 80, 80, 0.3) 20px
  );
}

.deal-card-archived-indicator {
  margin-right: 0.5rem;
  color: #555555;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-weight: 500;
}

.dark-mode .deal-card-archived-indicator {
  color: #bbbbbb;
}

/* Activity Status Indicators */
.deal-card-activity-indicator {
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-weight: 500;
}

.deal-card-activity-indicator.overdue {
  color: var(--danger-color);
}

.deal-card-activity-indicator.no-upcoming {
  color: var(--warning-color);
}

.dark-mode .deal-card-activity-indicator.overdue {
  color: var(--danger-color);
}

.dark-mode .deal-card-activity-indicator.no-upcoming {
  color: var(--warning-color);
}

.deal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 1rem;
}

.deal-title-container {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.deal-card-title {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-card-value {
  font-size: 14px;
  color: var(--secondary-text);
  font-family: 'Fira Mono', monospace;
}

.deal-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--secondary-text);
  gap: 1rem;
}

.deal-card-contact {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-card-probability {
  font-weight: 500;
  font-family: 'Fira Mono', monospace;
}

.deal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.deal-actions .btn {
  margin-left: 12px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.deal-actions .btn-primary {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: 1px solid var(--primary-dark);
}

.deal-actions .btn-primary:hover {
  background-color: var(--primary-dark);
}

.deal-actions .btn-danger {
  background-color: var(--danger-color);
  color: white;
  border: 1px solid #c0392b;
}

.deal-actions .btn-danger:hover {
  background-color: #c0392b;
}

/* Deal Stage Controls */
.stage-controls {
  display: flex;
  margin-top: 8px;
}

.stage-control {
  flex: 1;
  text-align: center;
  color: var(--dark-gray);
  cursor: pointer;
}

.stage-control:hover {
  color: var(--primary-color);
}

/* Deal Detail View */
.deal-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.deal-info {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
  border-top: 4px solid var(--primary-color);
  width: 100%;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .deal-info {
  background-color: #222222;
}

/* Archived deal styling */
.deal-info.archived {
  border-top: 4px solid var(--border-color);
}

.deal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.title-edit-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

/* Archived Deal Badge */
.archived-badge {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0;
  color: #444444;
  padding: 0.3rem 0.6rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  margin-right: 0.75rem;
  border: 1px solid #cccccc;
  font-weight: 500;
  align-self: center;
}

.dark-mode .archived-badge {
  background-color: #333333;
  color: #dddddd;
  border-color: #444444;
}

.archived-badge .badge-icon {
  margin-right: 0.4rem;
  display: flex;
  align-items: center;
}

.edit-title {
  border: none;
  font-size: 28px;
  font-weight: 600;
  width: calc(100% - 40px);
  padding: 8px 0;
  margin-right: 8px;
  transition: all 0.2s ease;
  background-color: transparent;
  cursor: default;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
  min-height: 46px;
  flex: 1;
}

.edit-title:focus {
  outline: none;
}

.edit-title.editing {
  background-color: rgba(253, 200, 68, 0.1);
  padding: 8px;
  border-radius: var(--border-radius);
  cursor: text;
  border-bottom: 2px solid var(--primary-color);
}

.edit-title-btn, .save-title-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--secondary-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.6;
  align-self: flex-start;
  margin-top: 8px;
}

.edit-title-btn:hover, .save-title-btn:hover {
  background-color: var(--light-gray);
  color: var(--text-color);
  opacity: 1;
}

.title-edit-container:hover .edit-title-btn {
  opacity: 1;
}

.save-title-btn {
  color: var(--success-color);
}

.save-title-btn:hover {
  background-color: rgba(154, 215, 149, 0.2);
}

/* Additional styles for textarea */
#deal-title {
  resize: none;
  overflow: hidden;
  min-height: 1rem;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.deal-field {
  margin-bottom: 8px;
}

.deal-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-text);
  margin-bottom: 8px;
}

.deal-field input[type="text"],
.deal-field select {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 10px;
  font-size: 15px;
  width: 100%;
  transition: all 0.2s ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  background-color: white;
  color: #1d2731;
  appearance: none;
}

.dark-mode .deal-field input[type="text"],
.dark-mode .deal-field select,
.dark-mode .form-group input,
.dark-mode .form-group select,
.dark-mode .form-group textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}

.deal-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

.deal-field input[type="text"]:focus,
.deal-field select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(253, 200, 68, 0.2);
  outline: none;
}

.status-buttons {
  display: flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
}

#archive-deal-button {
  background-color: white;
  color: #1d2731;
  border: 1px solid var(--border-color);
}

.dark-mode #archive-deal-button {
  background-color: #333333;
  color: white;
  border-color: #444444;
}

#archive-deal-button.archived {
  background-color: var(--light-gray);
  color: #1d2731;
}

.dark-mode #archive-deal-button.archived {
  background-color: #333333;
  color: white;
}

.status-btn {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  background-color: white;
  color: #1d2731;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dark-mode .status-btn {
  background-color: white;
  color: #1d2731;
  border-color: #444444;
}

/* Fix for status pending button focus in dark mode */
.dark-mode #status-pending {
  background-color: white;
  color: #1d2731;
  border-color: #444444;
}

.dark-mode #status-pending.active {
  background-color: #555555;
  color: white;
  border-color: #444444;
  font-weight: 600;
}

.status-btn:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.status-btn:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.status-btn:hover {
  background-color: var(--light-gray);
}

.status-btn.active {
  background-color: var(--light-gray);
  font-weight: 600;
}

.status-won.active {
  background-color: var(--success-color);
  color: white !important;
  border-color: var(--success-color);
}

.status-lost.active {
  background-color: var(--danger-color);
  color: white !important;
  border-color: var(--danger-color);
}

.dark-mode .status-won.active {
  background-color: var(--success-color);
  color: white !important;
}

.dark-mode .status-lost.active {
  background-color: var(--danger-color);
  color: white !important;
}

.deal-description {
  margin-top: 16px;
}

.deal-description label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-text);
  margin-bottom: 8px;
}

.deal-description textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  resize: vertical;
  font-size: 15px;
  line-height: 1.5;
  transition: all 0.2s ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.dark-mode .deal-description textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}

.deal-description textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(253, 200, 68, 0.2);
  outline: none;
}

/* Deal Sections */
.deal-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  width: 100%;
}

.section {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: var(--card-shadow);
  border-top: 4px solid var(--primary-color);
  position: relative;
  width: 100%;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .section {
  background-color: #222222;
}

/* Archived deal styling */
.deal-archived .section {
  border-top: 4px solid var(--border-color);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

#assign-contact-button {
  background-color: white;
  color: #1d2731;
  border: 1px solid var(--border-color);
}

.dark-mode #assign-contact-button {
  background-color: white;
  color: #1d2731;
  border-color: #444444;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

/* Contact and Activity Lists */
.contacts-list, .activities-list {
  /* max-height: 400px; */
  /* overflow-y: auto; */
}

.contact-item, .activity-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .activity-item, 
.dark-mode .contact-item {
  background-color: #222222; /* Match the deal cards dark gray */
}

.contact-item:last-child, .activity-item:last-child {
  border-bottom: none;
}

.contact-details h4, .activity-details h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.contact-details p, .activity-details p {
  font-size: 13px;
  color: var(--secondary-text);
  word-break: break-word;
  overflow-wrap: break-word;
  padding-right: 5px;
}

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

.activity-details {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  padding-right: 16px;
}

.activity-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  min-width: 110px;
  justify-content: flex-end;
}

.contact-actions button, .activity-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Icon for edit and delete buttons */
.btn-icon {
  display: flex;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}

.edit-icon {
  width: 14px;
  height: 14px;
}

.delete-icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

/* Activity Specific Styles */
.activity-details .activity-date {
  display: block;
  font-size: 12px;
  color: var(--dark-gray);
  margin-bottom: 4px;
}

.activity-type {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  background-color: var(--light-gray);
  color: #1d2731;
  font-size: 11px;
  margin-right: 6px;
}

.dark-mode .activity-type {
  background-color: #666666;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.activity-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  color: #1d2731;
}

.activity-status.pending {
  background-color: var(--warning-color);
  color: #1d2731;
}

.activity-status.complete {
  background-color: var(--success-color);
  color: #1d2731;
}

.dark-mode .activity-status.pending,
.dark-mode .activity-status.complete {
  color: #1d2731;
}

/* Contacts View */
.contacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.contacts-list-container {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

.dark-mode .contacts-header,
.dark-mode .activities-header,
.dark-mode .db-header {
  background-color: transparent;
}

/* Activities View */
.activities-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.activities-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: background-color var(--transition-speed) ease;
  background-color: transparent;
}

.activities-section {
  background-color: white;
  margin-bottom: 0;
  box-shadow: var(--card-shadow);
  transition: background-color var(--transition-speed) ease;
}

.activities-list-container {
  background-color: transparent;
}

.dark-mode .activities-section {
  background-color: #222222; /* Match the other dark mode elements */
}

.activities-section-header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: var(--light-gray);
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .activities-section-header {
  background-color: #444444; /* Lighter color for better contrast in dark mode */
}

.activities-list-container .activities-list {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
  transition: background-color var(--transition-speed) ease;
  background-color: transparent;
}

.dark-mode .activities-list-container .activities-list {
  background-color: transparent;
}

.activities-section-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-color);
  font-weight: 600;
}

.activities-section.overdue .activities-section-header {
  background-color: var(--danger-color);
}

.activities-section.overdue .activities-section-header h3 {
  color: white;
}

.activities-section.due-today .activities-section-header {
  background-color: var(--primary-color);
}

.activities-section.due-today .activities-section-header h3 {
  color: var(--text-color);
}

.activities-section.by-deal .activities-section-header {
  background-color: var(--blue);
}

.activities-section.by-deal .activities-section-header h3 {
  color: white;
}

/* Preserve colored headers in dark mode for their semantic meaning */
.dark-mode .activities-section.overdue .activities-section-header {
  background-color: var(--danger-color); /* Keep red for overdue in dark mode */
}

.dark-mode .activities-section.due-today .activities-section-header {
  background-color: var(--primary-color); /* Keep yellow for due today in dark mode */
}

.dark-mode .activities-section.completed .activities-section-header {
  background-color: var(--success-color); /* Keep green for completed in dark mode */
}

.dark-mode .activities-section.by-deal .activities-section-header {
  background-color: var(--blue); /* Keep blue for deals in dark mode */
}

.activities-section.completed .activities-section-header {
  background-color: var(--success-color);
}

.activities-section.completed .activities-section-header h3 {
  color: white;
}

.activity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #1d2731; /* Always dark text */
}

/* Count numbers in headings - different color for light/dark mode */
.heading-count {
  color: var(--secondary-text);
  font-weight: 500;
}

.dark-mode .heading-count {
  color: var(--medium-gray);
}

.activities-by-deal {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: transparent;
}

.deal-activities {
  background-color: white;
}

.activities-list-container .deal-header {
  padding: 0;
  /* padding-right: 10px; */
  /* padding: 12px 16px; */
  /* background-color: var(--light-gray); */
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}

.deal-header h4 {
  margin: 1rem;
  font-size: 15px;
  font-weight: 500;
}

.deal-header a {
  color: var(--text-color);
  text-decoration: none;
}

.deal-header a:hover {
  text-decoration: underline;
}

.activity-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--primary-color);
  color: #1d2731;
  font-size: 12px;
  font-weight: 500;
}

/* Activity items styling */
.activity-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.activity-item:last-child {
  border-bottom: none;
}

/* Due date indicators */
.activity-item.due-today {
  border-left: 3px solid var(--warning-color);
}

.activity-item.overdue {
  border-left: 3px solid var(--danger-color);
}

.activity-details .activity-date {
  display: block;
  font-size: 12px;
  color: var(--dark-gray);
  margin-bottom: 4px;
}

.deal-title-reference {
  color: var(--secondary-text);
  font-size: 14px;
  font-weight: normal;
}

.due-today .activity-date {
  font-weight: 600;
  color: var(--warning-color) !important;
}

.overdue .activity-date {
  font-weight: 600;
  color: var(--danger-color) !important;
}

/* DB History View */
.db-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
}

.db-header h2 {
  margin-bottom: 0;
}

.db-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#db-filter-type {
  padding: 8px 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background-color: white;
  color: #1d2731;
  font-size: 14px;
  min-width: 150px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23768084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.dark-mode #db-filter-type {
  background-color: white;
  color: #1d2731;
  border-color: #444444;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23768084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

#db-filter-type:hover, #db-filter-type:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(253, 200, 68, 0.2);
}

#refresh-db {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  background-color: white;
  color: #1d2731;
  border: 1px solid var(--border-color);
}

.dark-mode #refresh-db {
  background-color: white;
  color: #1d2731;
  border-color: #444444;
}

#refresh-db:before {
  content: "↻";
  margin-right: 5px;
  font-size: 14px;
}

#refresh-db:hover {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.db-list-container {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

.dark-mode .db-list-container {
  background-color: #222222;
}

.db-item {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

.db-item:hover {
  background-color: var(--cloud);
}

.db-item:last-child {
  border-bottom: none;
}

.db-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.db-action-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.db-action.create {
  background-color: var(--success-color);
}

.db-action.update {
  background-color: var(--warning-color);
}

.db-action.delete {
  background-color: var(--danger-color);
}

.db-timestamp {
  font-size: 12px;
  color: var(--secondary-text);
}

.db-entity {
  font-weight: 500;
  margin-bottom: 4px;
}

.db-entity-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.db-entity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--light-gray);
  color: var(--text-color);
}

.db-data-details {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.db-data-details summary {
  padding: 8px 12px;
  background-color: var(--cloud);
  cursor: pointer;
  font-weight: 500;
  user-select: none;
  transition: background-color 0.2s ease;
}

.db-data-details summary:hover {
  background-color: var(--light-gray);
}

.db-data {
  font-family: 'Fira Mono', monospace;
  font-size: 12px;
  padding: 12px;
  background-color: var(--white);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--border-color);
}

.list {
  padding: 0;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .list-item {
  background-color: #222222; /* Match other dark mode backgrounds */
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-details h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.list-item-details p {
  font-size: 14px;
  color: var(--secondary-text);
  word-break: break-word;
  overflow-wrap: break-word;
}

.list-item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  min-width: 110px;
  justify-content: flex-end;
  margin-left: 5px;
}

.list-item-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Modal Styles */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 30;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode .modal {
  background-color: #222222; /* Match other dark mode elements */
}

.modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 500;
}

.close-modal {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--dark-gray);
}

.modal-body {
  padding: 16px;
}

.modal-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.modal-footer button {
  margin-left: 8px;
}

.separator {
  text-align: center;
  margin: 16px 0;
  color: var(--dark-gray);
  position: relative;
}

.dark-mode .separator {
  color: #e0e0e0; /* Light text for dark mode */
}

.separator::before, .separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background-color: var(--border-color);
}

.separator::before {
  left: 0;
}

.separator::after {
  right: 0;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.toast {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  animation: slideIn 0.3s ease;
}

.dark-mode .toast {
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

.toast-success {
  border-left: 4px solid var(--success-color);
}

.toast-error {
  border-left: 4px solid var(--danger-color);
}

.toast-info {
  border-left: 4px solid var(--primary-color);
}

.toast-text {
  margin-left: 8px;
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Add Fira Mono for numeric values */
input[type="number"], input[id*="value"], .stage-value-amount {
  font-family: 'Fira Mono', monospace;
}


/* Loading Indicator */
.loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--primary-color);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loading-indicator.active {
  animation: pulse-opacity 1.5s ease-in-out infinite;
}

@keyframes pulse-opacity {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.range-container {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

#modal-probability-display, #deal-probability-display {
  margin-left: 16px;
  min-width: 50px;
  text-align: center;
  font-family: 'Fira Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  background-color: var(--light-gray);
  padding: 4px 8px;
  border-radius: 12px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e0e0e0;
  outline: none;
  transition: background-color var(--transition-speed) ease;
}

.dark-mode input[type="range"] {
  background: #444444;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: 1px solid var(--primary-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: 1px solid var(--primary-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* Mobile-specific login form improvements */
#login-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  font-size: 16px;
  border-radius: 4px;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

#email {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 4px;
}

.login-container {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  padding: 30px 20px;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .pipeline-stages {
    flex-direction: column;
  }

  .stage {
    margin-right: 0;
    margin-bottom: 16px;
    min-width: 100%;
  }
  
  .stage-count {
    font-size: 11px;
    white-space: nowrap;
  }

  /* Improve spacing for contact details */
  .contact-details {
    max-width: 70%;
    word-break: break-word;
    overflow-wrap: break-word;
    padding-right: 10px;
  }

  .deal-grid {
    grid-template-columns: 1fr;
  }

  .deal-sections {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 16px;
  }

  .section {
    width: 100%;
    padding: 16px;
  }

  .deal-detail-container {
    width: 100%;
    padding: 0 5px;
  }

  .deal-info {
    width: 100%;
  }

  .modal {
    width: 95%;
  }

  .app-header {
    padding: 0 12px;
  }

  .nav-btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  #user-email {
    display: none;
  }

  /* Responsive pipeline header */
  .pipeline-header {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pipeline-title-section {
    margin-bottom: 0;
    flex: 1;
  }

  #add-deal-button, #add-contact-button {
    margin-top: 0;
    white-space: nowrap;
  }

  /* Mobile login improvements */
  .login-container {
    margin: 0 auto;
    padding: 25px 15px;
    width: 90%;
  }

  #login-button {
    padding: 16px;
    font-size: 18px;
    min-height: 55px;
    margin-top: 25px;
  }

  #email {
    padding: 14px;
    font-size: 16px;
  }
}

/* Mobile navigation for small to medium screens */
@media (max-width: 700px) {
  .main-nav {
    justify-content: space-around;
  }

  .nav-btn {
    padding: 8px;
    margin-right: 0;
    flex-direction: column;
  }

  .nav-icon {
    margin-right: 0;
    margin-bottom: 4px;
  }

  .nav-text {
    display: none;
  }

  /* Keep logo text visible on app header but ensure it's always visible on login page */
  .app-header .logo span {
    display: none;
  }

  .ib-logo {
    height: 28px;
    margin-right: 0;
  }
  
  /* Always show logo text on login page */
  .login-container .logo span {
    display: inline;
  }

  #logout-button {
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    flex-direction: column;
    margin-left: 15px;
  }

  .logout-text {
    display: none;
  }

  .logout-icon {
    margin-right: 0;
  }
  
  /* Make buttons icon-only up to 700px */
  .contact-actions .btn-text, 
  .activity-actions .btn-text,
  .list-item-actions .btn-text,
  .deal-actions .btn-text {
    display: none;
  }
  
  .btn-icon {
    margin-right: 0;
  }
  
  /* Improve button layout */
  .contact-actions button, 
  .activity-actions button, 
  .list-item-actions button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Small mobile screens */
@media (max-width: 400px) {
  /* Stack action buttons vertically */
  .contact-actions, .activity-actions, .list-item-actions {
    flex-direction: column;
    gap: 8px;
    min-width: 40px;
  }

  .contact-actions button, .activity-actions button, .list-item-actions button {
    margin-left: 0;
  }
  
  .activity-details {
    padding-right: 8px;
  }
}

  /* More space for content */
  .contact-item, .activity-item, .list-item {
    padding: 12px 8px;
  }

  /* Ensure buttons don't get cut off */
  .list-item-actions, .contact-actions, .activity-actions {
    min-width: 30px;
  }
}

/* Read More Description Styles */
.description-container {
  position: relative;
  margin-bottom: 0.5rem;
}

.description-container p {
  margin: 0.5rem 0;
}

.description-container .short-description,
.description-container .full-description {
  transition: opacity 0.3s ease;
}

.read-more-toggle {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.85rem;
  margin-left: 0.25rem;
  cursor: pointer;
}

.read-more-toggle:hover {
  text-decoration: underline;
}

.ellipsis {
  color: var(--secondary-text);
}

/* Only keep activity badge and count with dark text in dark mode */
.activity-badge {
  color: #1d2731 !important; /* Always dark text */
}

.dark-mode .activity-badge,
.dark-mode .activity-count {
  color: #1d2731 !important; /* Dark text for these specific elements in dark mode */
}

/* Fix for any remaining white backgrounds in dark mode */
.dark-mode .activities-section,
.dark-mode .modal-body,
.dark-mode .modal-header,
.dark-mode .modal-footer,
.dark-mode .contacts-list-container,
.dark-mode .contacts-list,
.dark-mode .list,
.dark-mode .list-container,
.dark-mode .toast,
.dark-mode .db-data {
  background-color: #222222 !important; /* Force dark background */
}

/* Keep these containers transparent in dark mode */
.dark-mode .activities-list-container,
.dark-mode .activities-list {
  background-color: transparent !important;
}

/* Make these views transparent to match parent container */
.dark-mode #activities-view,
.dark-mode #contacts-view,
.dark-mode #pipeline-view,
.dark-mode #deal-detail-view,
.dark-mode #db-view {
  background-color: transparent !important;
}

/* Ensure action buttons (edit, delete, etc.) stay white with dark text in dark mode */
.dark-mode .list-item-actions .btn:not(.btn-danger),
.dark-mode .contact-actions .btn:not(.btn-danger),
.dark-mode .activity-actions .btn:not(.btn-danger) {
  background-color: #fff !important;
  color: #1d2731 !important;
}

/* Ensure modal buttons keep correct text color in dark mode */
.dark-mode .modal-footer .btn:not(.btn-primary):not(.btn-danger),
.dark-mode .btn:not(.btn-primary):not(.btn-danger):not(.nav-btn):not(#logout-button) {
  background-color: #fff;
  color: #1d2731;
  border-color: #444444;
}

/* Make sure danger buttons keep white text */
.dark-mode .btn-danger {
  color: white !important;
}

/* Ensure form controls have proper focus styling in dark mode */
.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .deal-field input[type="text"]:focus,
.dark-mode .deal-field select:focus,
.dark-mode .deal-description textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 2px var(--input-focus-shadow);
  outline: none;
}

/* Date input - minimal styling to preserve browser defaults */
input[type="date"] {
  cursor: pointer;
}

/* Dark mode color scheme for native date picker */
.dark-mode input[type="date"] {
  color-scheme: dark;
}

/* Style for the create new contact button in dark mode */
.dark-mode #create-new-contact-for-deal {
  background-color: #fff;
  color: #1d2731;
  border: 1px solid var(--border-color);
}

/* Notification Styles */
.notification-toggle-container {
  display: flex;
  align-items: center;
}

/* Modern toggle switch */
.notification-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  border: 1px solid var(--border-color);
  background-color: var(--card-background);
  cursor: pointer;
  user-select: none;
  min-width: 8rem;
  justify-content: space-between;
  transition: all 0.2s ease;
  box-shadow: var(--button-shadow);
  overflow: hidden;
}

.notification-toggle:hover {
  border-color: var(--primary-color);
}

.notification-toggle-text {
  font-size: 0.85rem;
  font-weight: 600; /* Always bold */
  color: var(--text-color); /* Use default text color - never changes */
  transition: none; /* No color transitions */
}

.notification-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background-color: #ccc;
  transition: all 0.2s ease;
  border: 2px solid #bbb; /* Thicker, more visible border */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.notification-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: white;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Toggle active state - ONLY change the switch, not the text */
.notification-toggle input:checked ~ .notification-toggle-switch {
  background-color: #FFD700;
  border: 3px solid #E6C200; /* Thicker yellow border for better visibility */
}

.notification-toggle input:checked ~ .notification-toggle-switch::after {
  transform: translateX(15px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Hide actual checkbox */
.notification-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Dark mode style */
.dark-mode .notification-toggle {
  background-color: #222;
  border-color: #444;
}

.dark-mode .notification-toggle-switch {
  background-color: #444;
  border: 2px solid #555; /* Thicker, consistent with light mode */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dark mode gets the same active switch styling */
.dark-mode .notification-toggle input:checked ~ .notification-toggle-switch {
  background-color: #FFD700;
  border: 3px solid #E6C200; /* Same as light mode */
}

/* Test button style */
.notification-test-btn {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
}

.dark-mode .notification-test-btn {
  color: #1d2731;
  background-color: #fff;
  border-color: #444;
}

/* Notification status styles */
.notification-status {
  margin-bottom: 1.5rem;
}

.status-ok {
  color: var(--success-color);
}

.status-warning {
  color: var(--warning-color);
}

.status-error {
  color: var(--danger-color);
}

/* Notification actions */
.notification-actions {
  margin-top: 1.5rem;
}

/* Notification demo */
.notification-demo {
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}

.notification-preview {
  max-width: 400px;
  background-color: var(--background-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.notification-header {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid var(--border-color);
}

.notification-header .notification-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

.notification-app {
  font-weight: 500;
  font-size: 0.8rem;
  flex: 1;
}

.notification-time {
  font-size: 0.7rem;
  color: var(--secondary-text);
}

.notification-content {
  padding: 0.75rem;
}

.notification-title {
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.notification-body {
  font-size: 0.8rem;
  color: var(--secondary-text);
}

/* Dark mode specifics for notification demo */
.dark-mode .notification-preview {
  background-color: #222;
}

.dark-mode .notification-header {
  background-color: #333;
  border-color: #444;
}

/* Add test-notifications-view to dark mode transparent views */
.dark-mode #test-notifications-view {
  background-color: transparent !important;
}

/* Swipe Navigation Indicators */
.swipe-indicators {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 15;
  display: none;
}

@media (max-width: 768px) {
  .swipe-indicators {
    display: block;
  }
}

.swipe-indicator {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.swipe-indicator.left {
  left: -60px;
  transform: translateX(0) translateY(-50%);
}

.swipe-indicator.right {
  right: -60px;
  transform: translateX(0) translateY(-50%);
}

.swipe-indicator.active {
  opacity: 0.9;
}

.swipe-indicator.left.active {
  transform: translateX(70px) translateY(-50%);
}

.swipe-indicator.right.active {
  transform: translateX(-70px) translateY(-50%);
}

.swipe-indicator svg {
  width: 24px;
  height: 24px;
  color: var(--text-color);
}

/* Dark mode swipe indicators */
.dark-mode .swipe-indicator {
  background-color: var(--primary-color);
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

.dark-mode .swipe-indicator svg {
  color: #1d2731;
}