@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');.container-main {
    display: grid;

    place-Items: center;
}
.dashboard-container {
    padding: 20px;
    background-color: #f8f9fc;
    height: 100vh; /* Tüm ekranı kaplayacak şekilde ayarlandı */
    overflow-y: auto; /* Dikey kaydırma eklendi */
}
.dashboard-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dashboard-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 300px; /* Kartların yüksekliğini sabitledik */
    overflow: hidden; /* Taşmaları engellemek için */
    flex: 1; /* Eşit şekilde yayılmasını sağladık */
    min-width: 300px; /* Minimum genişlik ayarı */
}
.tasks-card {
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: auto; /* Otomatik yükseklik */
}
.dashboard-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.input-field {
    flex: 1;
    max-width: 300px;
}
.update-message {
    margin-left: 10px;
    color: #858796;
    font-weight: bold;
}
.tasks-card {
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }

  .dashboard-content {
    gap: 12px;
  }

  .dashboard-card {
    min-width: 100%;
    height: 250px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }

  .input-field {
    max-width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .dashboard-card {
    min-width: calc(50% - 16px);
    height: 275px;
  }
}
.dashboard-container {
  background-color: #f8f9fa !important;
  max-height: calc(100vh - 94px);
  padding: 8px; /* Further reduced from 10px */
  overflow-y: auto; /* Bu satırı ekledik */
  overflow-x: hidden;
  height: 100vh; /* Height'i 100vh yaptık */
  max-width: 100%;
}
.dashboard-header {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.dashboard-statistics {
  margin-bottom: 24px;
}
.statistics-row {
  margin-bottom: 12px;
}
.stat-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 100%;
  transition: all 0.3s;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.dashboard-card {
  height: 400px;
  width: 100%;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.dashboard-card .ant-card-body {
  height: calc(100% - 57px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.project-card,
.activity-card {
  height: 400px;
  overflow-y: auto;
}
.project-card .ant-list-item {
  padding: 12px;
  transition: background-color 0.3s;
}
.project-card .ant-list-item:hover {
  background-color: rgba(0,0,0,0.02);
}
.activity-card .ant-timeline {
  padding: 12px;
}
.dashboard-bottom {
  margin-top: -8px; /* Even more negative: from -4px to -8px */
}
.input-field {
  max-width: 300px;
}
.update-message {
  color: #1890ff;
  font-weight: 500;
}
.dashboard-content {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
  margin-top: 24px;
  width: 100%;
}
.dashboard-content .ant-row {
  width: 100%;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
}
.dashboard-content .ant-col {
  padding: 8px;
}
.chart-container {
  height: 100%;
  width: 100%;
  position: relative;
  min-height: 270px; /* Reduced from 300px */
  padding: 5px; /* Reduced from 10px */
}
.charts-wrapper {
  margin-bottom: 0; /* Reduced from 4px to 0 */
}
.stats-middle-section {
  margin-top: 0;
}
/* New classes for scrollable project and activity cards */
.project-card-container,
.activity-card-container {
  height: 380px; /* Reduced from 400px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  margin: 0; /* Ensure no additional margins */
}
.scrollable-content {
  height: 320px; /* Reduced from 340px */
  overflow-y: auto;
  padding: 0 8px;
}
/* Custom scrollbar styling */
.scrollable-content::-webkit-scrollbar {
  width: 6px;
}
.scrollable-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
/* List and Timeline item styling */
.scrollable-content .ant-list-item {
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.scrollable-content .ant-timeline-item {
  padding-bottom: 12px;
}
/* Make sure the cards also have proper positioning */
.project-card-container .ant-card-body,
.activity-card-container .ant-card-body {
  padding: 0;
}
/* Updated section spacing */
.top-stats-section {
  margin-bottom: 12px; /* Further reduced from 16px */
  position: relative;
  z-index: 1;
  padding-top: 5px; /* Added padding to give more space at the top for spotlight */
}
.middle-stats-section {
  margin-top: -8px; /* Even more negative margin: from -4px to -8px */
  margin-bottom: 0; /* Reduced from 4px to 0 */
}
.middle-stats-section .stat-card {
  margin-bottom: 0;
  height: 110px; /* Reduced height from default */
}
.middle-stats-section .ant-card-body {
  padding: 12px !important; /* Less padding than default */
}
.dashboard-bottom .ant-col {
  margin-top: 0;
  padding-top: 0;
}
.project-card-container,
.activity-card-container {
  margin-top: 0;
  margin-bottom: 0;
}
/* Reduce gutter spacing in dashboard bottom row */
.dashboard-bottom.ant-row {
  margin-top: 0 !important;
}
.middle-stats-section.ant-row {
  margin-bottom: 0 !important;
}
/* Remove any bottom margin from rows */
.ant-row {
  margin-bottom: 0 !important;
}
/* Reduce vertical gutters */
.dashboard-container .ant-row {
  row-gap: 8px !important; /* Force smaller row gaps */
}
/* Reduce margin in stat marketing text */
.marketing-text {
  margin-top: 2px; /* Add compact margin */
}
/* Top Companies Section */
.top-companies-section {
  margin-top: 16px;
}
/* No Data Encourage Section */
.no-data-encourage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  text-align: center;
  padding: 20px;
}
.no-data-icon {
  font-size: 48px;
  color: #bfbfbf;
  margin-bottom: 16px;
}
.no-data-encourage h4 {
  margin-bottom: 8px;
  color: #434343;
}
.no-data-encourage p {
  color: #8c8c8c;
  max-width: 300px;
  margin-bottom: 24px;
}
/* Responsive Design */
@media (max-width: 1200px) {
  .dashboard-card {
    height: 350px;
  }
}
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .dashboard-card {
    height: 300px;
    margin-bottom: 16px;
  }

  .input-field {
    max-width: 100%;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }

  .chart-container {
    min-height: 200px;
  }
}
@media (max-width: 576px) {
  .dashboard-card {
    height: 300px;
  }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .dashboard-container {
    background-color: #141414;
  }

  .stat-card,
  .dashboard-card {
    background-color: #1f1f1f;
    border: 1px solid #303030;
  }

  .project-card .ant-list-item:hover {
    background-color: rgba(255,255,255,0.02);
  }
}.tour-helper-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1001 !important;
  box-shadow: 0 4px 12px rgba(71, 65, 104, 0.15);
  pointer-events: auto !important;
}

.joyride-tooltip {
  text-align: left;
}

.joyride-button-next {
  background-color: #474168 !important;
  border-color: #474168 !important;
  color: #ffffff !important;
  transition: all 0.2s ease-in-out;
}

.joyride-button-next:hover {
  background-color: #626f92 !important;
  border-color: #626f92 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(71, 65, 104, 0.2);
}

.joyride-button-back {
  margin-right: 10px;
  border-color: #474168 !important;
  color: #474168 !important;
}

.joyride-button-back:hover {
  color: #626f92 !important;
  border-color: #626f92 !important;
  background-color: rgba(98, 111, 146, 0.05) !important;
}

/* Improved spotlight styling */
.__floater__body,
.__floater__arrow {
  z-index: 1600 !important;
}

.__floater__open {
  z-index: 1600 !important;
}

.__floater__body {
  max-width: 400px !important;
}

/* Enhanced spotlight */
.__react-joyride-helper {
  z-index: 1500 !important;
}

/* Make sure the spotlight is visible and properly positioned */
.__react-joyride-spotlight {
  z-index: 1499 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease-in-out !important;
}

/* Target specifically the top-stats-section step */
.__react-joyride-spotlight.top-stats-spotlight {
  margin-top: -10px !important;
}.tour-helper-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(71, 65, 104, 0.15);
}

.joyride-tooltip {
  text-align: left;
}

.joyride-button-next {
  background-color: #474168 !important;
  border-color: #474168 !important;
  color: #ffffff !important;
  transition: all 0.2s ease-in-out;
}

.joyride-button-next:hover {
  background-color: #626f92 !important;
  border-color: #626f92 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(71, 65, 104, 0.2);
}

.joyride-button-back {
  margin-right: 10px;
  border-color: #474168 !important;
  color: #474168 !important;
}

.joyride-button-back:hover {
  color: #626f92 !important;
  border-color: #626f92 !important;
  background-color: rgba(98, 111, 146, 0.05) !important;
}

/* Custom Tooltip Styles */
.custom-tooltip {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

.custom-tooltip .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #474168;
  border-color: #474168;
  position: relative;
}

.custom-tooltip .ant-checkbox-checked .ant-checkbox-inner::after {
  border-color: #fff;
  opacity: 1;
  visibility: visible;
  position: absolute;
  display: table;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1);
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  content: '';
  top: 50%;
  left: 22%;
  width: 5.71428571px;
  height: 9.14285714px;
  margin-top: -5.5px;
}

.custom-tooltip .ant-checkbox:hover .ant-checkbox-inner {
  border-color: #626f92;
}

.custom-tooltip .ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: #626f92;
}

.custom-tooltip .ant-checkbox:focus .ant-checkbox-inner {
  border-color: #626f92;
  box-shadow: 0 0 0 2px rgba(98, 111, 146, 0.2);
}

.custom-tooltip .tour-content {
  margin-bottom: 16px;
}

/* Fix for checkbox being hidden */
.custom-tooltip .ant-checkbox {
  z-index: auto;
}

.custom-tooltip .ant-checkbox-inner {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
}

/* Ensure proper alignment of checkbox and text */
.custom-tooltip .ant-checkbox + span {
  padding-left: 8px;
  padding-right: 8px;
  color: #474168;
}.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #272637;
  position: relative;
}

.login-wrapper {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: #585580;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

login-header h3 {
  color: #f9c4ac;
}

.login-header p {
  color: #f9c4ac;
  opacity: 0.8;
}

.form-field {
  margin-bottom: 1.5rem;
  width: 100%;  /* Eklendi */
}

.form-field input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(249, 196, 172, 0.2);
  border-radius: 8px;
  background: rgba(249, 196, 172, 0.1);
  color: #f9c4ac;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;  /* Eklendi */
}

.form-field input::placeholder {
  color: rgba(249, 196, 172, 0.6);
}

.form-field input:focus {
  outline: none;
  border-color: #f9c4ac;
  box-shadow: 0 0 0 2px rgba(249, 196, 172, 0.2);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.forgot-password {
  color: #f9c4ac;
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.forgot-password:hover {
  opacity: 1;
}

.login-button {
  width: 100%;
  height: 48px;
  background: #474168 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #f9c4ac !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.login-button:hover {
  background: #373158 !important;
  transform: translateY(-1px);
}

.try-free-button {
  width: 100%;
  height: 52px !important;
  background: linear-gradient(45deg, #ff9a7b, #f9c4ac) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #272637 !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(249, 196, 172, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.try-free-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  animation: shine 2s infinite;
}

@keyframes shine {
  to {
    left: 200%;
  }
}

.try-free-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(249, 196, 172, 0.5) !important;
}

.language-selector {
  position: absolute;
  top: 20px;
  right: 20px;
}

.lang-button {
  color: #f9c4ac !important;
  font-size: 1.2rem !important;
  background: transparent !important;
  border: 1px solid rgba(249, 196, 172, 0.3) !important;
  padding: 8px !important;
  border-radius: 50% !important; /* Yuvarlak buton */
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

.lang-button:hover {
  background: rgba(249, 196, 172, 0.1) !important;
  border-color: #f9c4ac !important;
  /* color özelliğini kaldırdık böylece hover durumunda renk değişmeyecek */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Custom dropdown styling */
.custom-dropdown-menu {
  background-color: #474168;
  border: 1px solid rgba(249, 196, 172, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.15);
  overflow: hidden;
  min-width: 120px;
  padding: 4px 0;
}

.ant-dropdown-menu {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.ant-dropdown-menu-item {
  color: #f9c4ac !important;
  padding: 10px 15px !important;
  transition: background-color 0.3s;
}

.ant-dropdown-menu-item:hover {
  background-color: rgba(249, 196, 172, 0.1) !important;
}

/* Fix Dropdown positioning */
.ant-dropdown {
  z-index: 1050;
}

/* Set minimum width for dropdown */
.ant-dropdown-menu {
  min-width: 120px;
}

/* Remove any overflow that might be hiding menu items */
.ant-dropdown-menu-root {
  overflow: visible !important;
}

/* Custom language selector styles to match register page */
.login-language-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #474168;
  color: #f9c4ac;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.2);
}

.login-language-dropdown:hover {
  background-color: rgba(249, 196, 172, 0.1);
}

.login-language-options {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #474168;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.15);
  overflow: hidden;
  min-width: 120px;
  display: none;
  z-index: 1000;
  border: 1px solid rgba(249, 196, 172, 0.3);
}

.login-language-options.show {
  display: block;
}

.login-language-option {
  padding: 10px 15px;
  cursor: pointer;
  color: #f9c4ac;
  transition: background-color 0.3s;
}

.login-language-option:hover {
  background-color: rgba(249, 196, 172, 0.1);
}

/* You can safely remove or comment out the existing Ant Design dropdown styles if not used */
.custom-dropdown-menu,
.ant-dropdown-menu,
.ant-dropdown-menu-item,
.ant-dropdown,
.ant-dropdown-menu-root {
  /* These styles can be removed or kept as fallback */
}

/* Responsive Design */
@media (max-width: 480px) {
  .login-wrapper {
    margin: 1rem;
    padding: 1.5rem;
    width: calc(100% - 2rem);  /* Eklendi */
    max-width: 100%;  /* Eklendi */
  }

  .form-field input {
    width: 100%;
    font-size: 16px;  /* Mobil için optimum font size */
  }

  .login-header h1 {
    font-size: 2rem;
  }
}.mobile-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #272637;
  z-index: 1001;
  padding: 12px;
  animation: slideDown 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mobile-search-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.search-input-container {
  flex: 1;
  min-width: 0;
}

/* Input styling */
.mobile-search-input {
  background: rgba(249, 196, 172, 0.1) !important;
  border: 1px solid rgba(249, 196, 172, 0.2) !important;
  height: 40px !important;
  width: 100%;
}

.mobile-search-input input {
  background: transparent !important;
  color: #f9c4ac !important;
  font-size: 16px;
  padding-right: 40px !important;
}

.mobile-search-input input::placeholder {
  color: rgba(249, 196, 172, 0.5);
}

/* Search icon styling */
.search-icon {
  color: #f9c4ac;
  font-size: 18px;
  opacity: 0.8;
}

/* Close icon styling */
.close-search-icon {
  color: #f9c4ac;
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.close-search-icon:hover {
  opacity: 0.8;
}

/* Clear icon (X inside input) styling */
.mobile-search-input .ant-input-clear-icon {
  color: #f9c4ac !important;
  font-size: 14px;
  opacity: 0.8;
}

.mobile-search-input .ant-input-clear-icon:hover {
  opacity: 1;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header specific styles */
.admin-header {
  position: relative;
  width: 100%; /* Collapse button genişliğini çıkar */
  display: flex;
  height: 64px;
}

.themed-search {
  width: calc(100%/10) !important;
}
 
.center-search {
  align-items: center;
  position: absolute;
  left: 40% !important;
  position: absolute;
  transform: translateX(-50%);
  margin-left: 32px; /* Half of the collapse button width */
  z-index: 1;
}

/* Header Icons Styling */
.notification-icon {
  background-color: rgba(249, 196, 172, 0.15) !important;
  color: #f9c4ac !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notification-icon:hover {
  background-color: rgba(249, 196, 172, 0.25) !important;
  transform: translateY(-1px);
}


/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Dropdown Menu Styling */
.ant-dropdown {
  min-width: 180px;
}

.ant-dropdown-menu {
  background-color: #272637 !important;
  border: 1px solid rgba(249, 196, 172, 0.15);
  box-shadow: 0 4px 16px rgba(71, 65, 104, 0.2);
  border-radius: 8px;
  padding: 4px;
}

.ant-dropdown-menu-item {
  border-radius: 6px;
  margin: 2px 0;
  color: #f9c4ac !important;
  transition: all 0.2s ease;
}

.ant-dropdown-menu-item:hover {
  background-color: rgba(249, 196, 172, 0.15) !important;
  transform: translateX(2px);
}

.ant-dropdown-menu-item .anticon {
  color: #f9c4ac;
  margin-right: 10px;
  font-size: 16px;
  transition: all 0.2s ease;
}

.ant-dropdown-menu-item:hover .anticon {
  transform: scale(1.1);
}

.ant-dropdown-menu-item-divider {
  background-color: rgba(249, 196, 172, 0.1);
  margin: 4px 0;
}

.notification-badge .ant-badge-count {
  background-color: #f9c4ac !important;
  color: #272637 !important;
  box-shadow: 0 0 0 2px #474168 !important;
  font-size: 8.5pt !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 15px!important;
  width: 12px!important;
  line-height: 18px !important;
  border-radius: 25px !important;
  padding-top: -15px !important;
}

/* Language Dropdown Specific */
.ant-dropdown-menu-item[key="tr"],
.ant-dropdown-menu-item[key="en"] {
  justify-content: center;
  text-align: center;
  font-weight: 500;
}

.themed-search .ant-input {
  background-color: #272637;
  border: 1px solid #f9c4ac;
  color: #f9c4ac;
}

.themed-search .ant-input::placeholder {
  color: #f9c4ac;
}

.themed-search .ant-input-group-addon {
  background-color: #272637;
  border: 1px solid #f9c4ac;
}

.themed-search .ant-btn {
  background-color: #f9c4ac;
  border: 1px solid #f9c4ac;
  color: #272637;
}

.themed-search .ant-btn:hover {
  background-color: #f9c4ac;
  border: 1px solid #f9c4ac;
  color: #272637;
}

.desktop-header-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

/* Updated Header and Search Styles */
.desktop-header-content .ant-input-search {
  width: 300px !important;
}

.desktop-header-content .ant-input-search .ant-input {
  background-color: rgba(249, 196, 172, 0.1);
  border-color: rgba(249, 196, 172, 0.2);
  color: #f9c4ac;
}

.desktop-header-content .ant-input-search .ant-input::placeholder {
  color: rgba(249, 196, 172, 0.6);
}

.desktop-header-content .ant-input-search .ant-btn {
  background-color: rgba(249, 196, 172, 0.15);
  border-color: rgba(249, 196, 172, 0.2);
}

.desktop-header-content .ant-input-search .ant-btn:hover {
  background-color: rgba(249, 196, 172, 0.25);
  border-color: rgba(249, 196, 172, 0.3);
}

.desktop-header-content .ant-input-search .ant-btn .anticon {
  color: #f9c4ac;
}

/* AI Assistant mobile menu item */
.mobile-bottom-menu .ant-menu-item[data-menu-id="aiAssistant"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-bottom-menu .ant-menu-item[data-menu-id="aiAssistant"] span[role="img"] {
  font-size: 20px;
  line-height: 1;
}

.ai-assistant-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 500px; /* Changed from 350px */
    height: 500px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(39, 38, 55, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 999;
    padding: 20px;
    border: 1px solid #e0e4e8;
    pointer-events: auto;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #474168;
    color: #ffffff;
    border-radius: 8px 8px 0 0;
}

.chat-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.close-button {
    background: none;
    border: none;
    color: #f9c4ac;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-button:hover {
    transform: scale(1.1);
    color: #ffffff;
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    background: #ffffff;
    pointer-events: auto;
}

.message {
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 80%;
    white-space: pre-line;
    line-height: 1.5;
}

.user {
    background-color: #474168;
    color: #ffffff;
    align-self: flex-end;
}

.ai {
    background-color: #f0f2f5;
    color: #272637;
    align-self: flex-start;
    font-family: monospace;
    font-size: 14px;
}

.input-form {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid #e0e4e8;
    pointer-events: auto;
}

.input-field {
    flex: 1;
    padding: 8px;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #272637;
}

.input-field:focus {
    border-color: #626f92;
    box-shadow: 0 0 0 2px rgba(98, 111, 146, 0.2);
}

.send-button {
    padding: 8px 15px;
    background-color: #474168;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.send-button:hover {
    background-color: #626f92;
    transform: translateY(-1px);
}

.ai-assistant-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: #474168;
    color: #f9c4ac;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(39, 38, 55, 0.15);
    z-index: 998;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.ai-assistant-button:hover {
    transform: scale(1.1);
    background-color: #626f92;
}

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

.header-button {
    background: none;
    border: none;
    color: #f9c4ac;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.header-button:hover {
    background-color: rgba(249, 196, 172, 0.1);
    transform: scale(1.1);
    color: #ffffff;
}

.header-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .ai-assistant-container {
        background: #272637;
        border-color: #3D3643;
    }

    .chat-container {
        background: #3D3643;
        border-color: #474168;
    }

    .ai {
        background-color: #474168;
        color: #f9c4ac;
    }

    .input-field {
        background: #3D3643;
        color: #f9c4ac;
        border-color: #474168;
    }

    .input-field:focus {
        border-color: #626f92;
        box-shadow: 0 0 0 2px rgba(98, 111, 146, 0.3);
    }

    .chat-header {
        background: #626f92;
    }

    .chat-header h3 {
        color: #ffffff;
    }

    .header-button {
        color: #f9c4ac;
    }

    .header-button:hover {
        background-color: rgba(249, 196, 172, 0.15);
    }
}

/* New styles for chat history */
.chat-history {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #474168;
    color: #ffffff;
    border-radius: 8px 8px 0 0;
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    pointer-events: auto;
}

.history-item {
    padding: 12px;
    border-bottom: 1px solid #e0e4e8;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.history-item:hover {
    background-color: rgba(71, 65, 104, 0.05);
}

.history-item h4 {
    margin: 0;
    color: #474168;
    font-size: 14px;
}

.history-item span {
    font-size: 12px;
    color: #626f92;
}

.message-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 8px;
    align-self: flex-end;
}

.ai .message-time {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .chat-history {
        background: #272637;
    }

    .history-item {
        border-color: #3D3643;
    }

    .history-item:hover {
        background-color: rgba(249, 196, 172, 0.05);
    }

    .history-item h4 {
        color: #f9c4ac;
    }

    .history-item span {
        color: #626f92;
    }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #626f92;
    text-align: center;
    padding: 20px;
}

.empty-state p {
    margin-top: 10px;
    font-size: 14px;
    color: rgba(98, 111, 146, 0.7);
}

/* New styles for title container */
.title-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-container h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.edit-icon {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

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

.title-input {
    background: none;
    border: none;
    border-bottom: 1px solid #f9c4ac;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    padding: 4px 8px;
    width: 200px;
    outline: none;
}

.title-input:focus {
    border-bottom: 2px solid #f9c4ac;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .title-input {
        color: #f9c4ac;
    }
}

/* Add loading animation styles */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #474168;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

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

.thinking-message {
    display: flex;
    align-items: center;
    color: #666;
    font-style: italic;
    padding: 10px;
    margin: 5px 0;
}

/* Mobile specific styles */
@media screen and (max-width: 767px) {
  .ai-assistant-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    z-index: 9999;
  }

  .chat-header {
    border-radius: 0;
    position: sticky;
    top: 0;
  }

  .chat-container {
    border-radius: 0;
    height: calc(100vh - 130px);
  }

  .input-form {
    position: sticky;
    bottom: 0;
    background: #272637;
    padding: 15px;
    border-top: 1px solid rgba(249, 196, 172, 0.2);
  }

  .ai-assistant-button {
    display: none; /* Hide the floating button on mobile */
  }
}

/* Mobile styles */
@media screen and (max-width: 767px) {
  .ai-assistant-container.mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 64px; /* Alt menü yüksekliği kadar boşluk bırak */
    width: 100% !important;
    height: calc(100vh - 64px) !important; /* Alt menü yüksekliği kadar azalt */
    margin: 0;
    padding: 0;
    border-radius: 0;
    z-index: 997; /* Alt menünün altında kalması için z-index'i düşür */
  }

  .mobile .chat-header {
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .mobile .chat-container {
    flex: 1;
    border-radius: 0;
    margin: 0;
    padding: 10px;
    height: calc(100vh - 184px); /* Header (64px) + Input form (56px) + Bottom menu (64px) */
    overflow-y: auto;
    padding-bottom: 70px; /* Input form yüksekliği + biraz padding */
  }

  .mobile .input-form {
    position: fixed;
    bottom: 64px; /* Alt menü yüksekliği kadar yukarıda */
    left: 0;
    right: 0;
    background: #272637;
    padding: 12px 15px;
    margin: 0;
    border-top: 1px solid rgba(249, 196, 172, 0.2);
    z-index: 998;
    height: 64px; /* Sabit yükseklik */
    display: flex;
    align-items: center;
  }

  .mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 999;
  }

  .ai-assistant-button {
    display: none;
  }
}

/* Desktop specific styles */
@media screen and (min-width: 768px) {
  .ai-assistant-container.desktop {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 400px;
    height: 600px;
    background: #272637;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(39, 38, 55, 0.35);
    padding: 0;
    border: 2px solid rgba(249, 196, 172, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    top: auto; /* Add this to ensure it doesn't stick to top */
    max-height: 80vh; /* Add this to limit maximum height */
  }

  .desktop .chat-header {
    background: linear-gradient(135deg, 
        #272637 0%,
        #474168 35%,
        #626f92 100%
    );
    /* or alternatively, for a more subtle and modern look: */
    /* background: linear-gradient(135deg, 
        #272637 0%,
        #3D3643 30%,
        #474168 70%,
        rgba(98, 111, 146, 0.95) 100%
    ); */
    padding: 16px 20px;
    border-bottom: 1px solid rgba(249, 196, 172, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .desktop .title-container {
    max-width: 60%;
    overflow: hidden;
  }

  .desktop .title-container h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding-right: 8px;
    color: #f9c4ac; /* Add this line to change the text color */
  }

  .desktop .chat-container {
    background: #3D3643;
    border: none;
    margin: 0;
    padding: 20px;
    height: calc(100% - 140px);
    height: calc(100% - 112px); /* Adjust for header height */
    margin-top: 0;
    padding-top: 12px;
  }

  .desktop .message {
    max-width: 85%;
    margin: 12px 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
  }

  .desktop .message:hover {
    transform: translateY(-2px);
  }

  .desktop .user {
    background: linear-gradient(135deg, #626f92 0%, #474168 100%);
    color: #fff;
    margin-left: 40px;
    border-bottom-right-radius: 4px;
  }

  .desktop .ai {
    background: linear-gradient(135deg, #474168 0%, #3D3643 100%);
    color: #f9c4ac;
    margin-right: 40px;
    border-bottom-left-radius: 4px;
  }

  .desktop .input-form {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(180deg, rgba(39, 38, 55, 0) 0%, #272637 100%);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(249, 196, 172, 0.15);
  }

  .desktop .input-field {
    background: rgba(249, 196, 172, 0.1);
    border: 1px solid rgba(249, 196, 172, 0.2);
    color: #f9c4ac;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 24px;
    transition: all 0.3s ease;
  }

  .desktop .input-field:focus {
    border-color: #f9c4ac;
    box-shadow: 0 0 0 3px rgba(249, 196, 172, 0.1);
    background: rgba(249, 196, 172, 0.15);
  }

  .desktop .send-button {
    background: #f9c4ac;
    color: #272637;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 24px;
    transition: all 0.3s ease;
  }

  .desktop .send-button:hover {
    background: #ffdbcc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 196, 172, 0.2);
  }

  .desktop .thinking-message {
    background: rgba(71, 65, 104, 0.5);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    backdrop-filter: blur(4px);
  }

  .desktop .loading-spinner {
    border: 2px solid rgba(249, 196, 172, 0.2);
    border-top: 2px solid #f9c4ac;
    width: 24px;
    height: 24px;
  }

  /* Remove old button styles */
  .ai-assistant-button {
    display: none;
  }
}
:root {
  --primary-color: #1890ff;
  --background-color: #f0f2f5;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --border-radius: 8px;
  --spacing-unit: 16px;
}

.company-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--background-color);
  padding: var(--spacing-unit);
}

.company-processes-container {
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #f5f5f5; /* Light theme background */
}

/* Search Header Styles */
.search-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  background-color: #fff;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-header .ant-btn {
  min-width: auto;
}

.search-header .ant-input-affix-wrapper {
  flex: 1;
}

/* Filter Panel Styles */
.filter-panel {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-panel > * {
  flex: 1;
}

.filter-panel .ant-btn {
  flex: 0 0 auto;
  min-width: 120px;
}

.filter-panel .ant-select {
  min-width: 160px;
}

.filter-panel-enter {
  animation: filterPanelEnter 0.3s ease-in-out forwards;
}

.filter-panel-exit {
  animation: filterPanelExit 0.3s ease-in-out forwards;
}

/* List Content Styles */
.company-list-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  background-color: #f5f5f5 !important;
  border-radius: 6px;
}

.company-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Card Styles */
.company-card {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease-in;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.company-item-card {
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

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

/* Loading States */
.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  grid-column: 1 / -1;
}

.no-more-data {
  text-align: center;
  color: #8c8c8c;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  grid-column: 1 / -1;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Responsive Styles */
@media (max-width: 768px) {
  .company-list-container {
    padding: calc(var(--spacing-unit) / 2);
  }

  .search-header {
    flex-direction: column;
    gap: var(--spacing-unit);
  }

  .search-header .ant-input-affix-wrapper {
    width: 100%;
  }

  .search-header .ant-btn {
    width: 100%;
  }

  .filter-panel {
    flex-direction: column;
    gap: var(--spacing-unit);
  }

  .filter-panel > * {
    width: 100%;
  }

  .company-list {
    grid-template-columns: 1fr;
  }

  .company-list-content {
    height: calc(100vh - 300px);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #141414;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .page-header,
  .company-list-content,
  .company-card {
    background: #1f1f1f;
  }

  .filter-panel {
    background-color: #1f1f1f;
  }

  .no-more-data {
    color: rgba(255, 255, 255, 0.45);
  }

  .company-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Scroll Bar Styling */
.company-list-content::-webkit-scrollbar {
  width: 6px;
}

.company-list-content::-webkit-scrollbar-track {
  background: transparent;
}

.company-list-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.company-list-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  .company-list-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .company-list-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
/* CompanyTour styles */

.company-tour-tooltip {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.company-tour-helper-button {
  transition: all 0.3s ease;
  z-index: 1000;
}

.company-tour-helper-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(71, 65, 104, 0.25);
}

/* Joyride customizations */
.company-tour-tooltip .react-joyride__tooltip {
  border-radius: 8px;
  padding: 10px;
}

.company-tour-tooltip h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #474168;
}

.company-tour-tooltip .joyride-button-next:hover {
  background-color: #5c5682 !important; /* Slightly lighter */
}

.company-tour-tooltip .joyride-button-back:hover {
  color: #5c5682 !important;
  background-color: rgba(71, 65, 104, 0.1) !important;
}

/* Special spotlight effect */
.__floater__body {
  font-size: 14px;
  line-height: 1.5;
}

.__floater__arrow {
  transition: transform 0.2s ease;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  .company-tour-helper-button {
    bottom: 70px !important; /* Adjust button position on mobile to account for mobile menu */
    right: 15px !important;
  }
  
  .company-tour-tooltip h2 {
    font-size: 16px;
  }

  .company-tour-tooltip div[role="dialog"] {
    max-width: 90% !important;
  }
}.company-add-container {
    max-height: 68vh;
    overflow-y: auto;
    padding: 1rem;
}

.company-add-form {
    display: flex;
    flex-direction: column;
}

.company-add-header {
    text-align: center;
    margin-bottom: 2rem;
}

.company-add-form-row {
    display: flex;
    justify-content: space-between;
}

.company-add-form-column {
    width: 48%;
}

.divider {
    height: 100%;
}:root {
    --header-height: 64px;
    --breadcrumb-height: 32px;
    --page-padding: 24px;
    --filter-section-height: 56px;
    --search-section-height: 56px;
    --tabs-header-height: 46px;
    --content-padding: 16px;
    --card-gap: 16px;
    --total-padding: 48px; 
}

.user-processes-container {
    padding: 24px;
    background-color: #f0f2f5;
    min-height: 100vh;
}

.search-section {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.search-section .ant-row {
    margin: -4px !important;  /*negative margin to counteract Col padding */
}

.search-section .ant-col {
    padding: 4px !important;  /*Col için padding'i azalt */
}

.content-section {
    flex: 1;
    overflow: auto;
    padding: 16px;
    height: calc(100% - var(--search-section-height)) !important;
    padding-top: 24px; /* Increased top padding */
}

.content-section .ant-row {
    margin: 0 !important; /* Remove negative margins */
    padding: 0 !important;
}

.content-section .ant-col {
    padding: 8px !important;
    margin-top: 0 !important;
}

.content-section .ant-card {
    border: 1px solid #e8e8e8;
    margin: 0;
}

#scrollableDiv {
    height: 100% !important;
    overflow: auto !important;
}

.infinite-scroll-component {
    overflow: unset !important;
}

.user-list-container {
    position: relative;
    height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
    padding: var(--page-padding);
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 16px;
}

.user-list-content {
    flex: 1;
    background: #ffffff;
    padding: var(--content-padding);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.table-row-hover {
    cursor: pointer;
}

.card-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.role-icon:hover {
  background-color: rgba(98, 111, 146, 0.1);
  transform: translateY(-1px);
}
/* UserTour styles */

.user-tour-tooltip {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.user-tour-helper-button {
  transition: all 0.3s ease;
  z-index: 1000;
}

.user-tour-helper-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(71, 65, 104, 0.25);
}

/* Joyride customizations */
.user-tour-tooltip .react-joyride__tooltip {
  border-radius: 8px;
  padding: 10px;
}

.user-tour-tooltip h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #474168;
}

.user-tour-tooltip .joyride-button-next:hover {
  background-color: #5c5682 !important; /* Slightly lighter */
}

.user-tour-tooltip .joyride-button-back:hover {
  color: #5c5682 !important;
  background-color: rgba(71, 65, 104, 0.1) !important;
}

/* Special spotlight effect */
.__floater__body {
  font-size: 14px;
  line-height: 1.5;
}

.__floater__arrow {
  transition: transform 0.2s ease;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  .user-tour-helper-button {
    bottom: 70px !important; /* Adjust button position on mobile to account for mobile menu */
    right: 15px !important;
  }
  
  .user-tour-tooltip h2 {
    font-size: 16px;
  }

  .user-tour-tooltip div[role="dialog"] {
    max-width: 90% !important;
  }
}/* UserAddTour.css - Kullanıcı ekleme formu tur stilleri */

.user-add-tour-tooltip .react-joyride__tooltip {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 450px;
  padding: 20px;
}

.user-add-tour-tooltip .react-joyride__tooltip h2 {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #474168;
}

.user-add-tour-tooltip .react-joyride__tooltip p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.user-add-tour-helper-button {
  animation: pulse 2s infinite;
  transition: all 0.3s ease;
}

.user-add-tour-helper-button:hover {
  transform: scale(1.1);
  animation: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 65, 104, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(71, 65, 104, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(71, 65, 104, 0);
  }
}

/* Tour düğmeleri için ek stiller */
.joyride-button-next {
  transition: background-color 0.3s;
}

.joyride-button-next:hover {
  background-color: #5d5784 !important;
}

.joyride-button-back:hover {
  color: #5d5784 !important;
}

/* Mobil cihazlar için duyarlı tasarım */
@media (max-width: 768px) {
  .user-add-tour-tooltip .react-joyride__tooltip {
    max-width: 300px;
    padding: 15px;
  }

  .user-add-tour-tooltip .react-joyride__tooltip h2 {
    font-size: 16px;
  }

  .user-add-tour-tooltip .react-joyride__tooltip p {
    font-size: 14px;
  }
}/* ======================================
   UserAdd Component - Theme-consistent Design
   Matching ProductProcesses.jsx card style
   Unique UAD- prefixed classes to prevent conflicts
   ====================================== */

/* Page Container - matches ProductProcesses layout with proper scroll */
.uad-page-container {
  height: calc(100vh - 64px - 32px); /* fixed height for proper scroll */
  max-height: calc(100vh - 64px - 32px);
  background-color: #f0f2f5; /* matches ProductProcesses background */
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #626f92 rgba(249, 196, 172, 0.1);
}

/* Webkit browsers scrollbar styling */
.uad-page-container::-webkit-scrollbar {
  width: 8px;
}

.uad-page-container::-webkit-scrollbar-track {
  background: rgba(249, 196, 172, 0.1);
  border-radius: 8px;
}

.uad-page-container::-webkit-scrollbar-thumb {
  background: #626f92;
  border-radius: 8px;
  border: 1px solid rgba(249, 196, 172, 0.1);
}

.uad-page-container::-webkit-scrollbar-thumb:hover {
  background: #474168;
}

/* Form Card - matches ProductProcesses card style exactly */
.uad-form-card {
  background: #ffffff !important;
  border: 1px solid #e0e4e8 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  overflow: visible !important;
  margin-bottom: 40px; /* Extra space for submit button */
  width: 100%;
}

/* Card Title */
.uad-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #474168;
  margin: 0;
}

/* Card Header */
.uad-form-card .ant-card-head {
  background: #ffffff;
  border-bottom: 1px solid #e0e4e8;
  padding: 16px 24px;
  min-height: auto;
}

/* Card Body */
.uad-form-card .ant-card-body {
  padding: 24px;
}

/* Form */
.uad-form {
  width: 100%;
}

/* Form Items */
.uad-form-item {
  margin-bottom: 20px !important;
}

.uad-form-item .ant-form-item-label > label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: #474168;
  font-size: 14px;
}

/* Form Field Groups */
.uad-field-group {
  margin-bottom: 16px;
}

/* Required field indicator */
.uad-required .ant-form-item-label > label::before {
  color: #626f92 !important;
}

/* Input Fields */
.uad-input,
.uad-input-password {
  height: 40px !important;
  border-radius: 6px !important;
  border: 1px solid #d9d9d9 !important;
  background: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

.uad-input:focus,
.uad-input-password:focus,
.uad-input:hover,
.uad-input-password:hover {
  border-color: #626f92 !important;
  box-shadow: 0 0 0 2px rgba(98, 111, 146, 0.1) !important;
}

.uad-input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
  font-style: normal;
}

/* Input Icons */
.uad-input-icon {
  color: #626f92;
  font-size: 16px;
}

/* Submit Button */
.uad-submit-button {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: #626f92 !important;
  border: 1px solid #626f92 !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px;
  transition: all 0.3s ease;
}

.uad-submit-button:hover,
.uad-submit-button:focus {
  background: #474168 !important;
  border-color: #474168 !important;
  box-shadow: 0 2px 8px rgba(71, 65, 104, 0.15) !important;
}

/* Error States */
.uad-form-item.ant-form-item-has-error .uad-input,
.uad-form-item.ant-form-item-has-error .uad-input-password {
  border-color: #ff4d4f !important;
}

.uad-form-item .ant-form-item-explain-error {
  color: #ff4d4f;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  margin-top: 4px;
}

/* Tour Component */
.uad-tour-wrapper {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

/* ======================================
   RESPONSIVE DESIGN
   ====================================== */

/* Tablet */
@media (max-width: 768px) {
  .uad-page-container {
    padding: 16px;
    height: calc(100vh - 64px - 24px); /* Adjust for smaller screens */
  }
  
  .uad-form-card .ant-card-body {
    padding: 16px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .uad-page-container {
    padding: 12px;
    height: calc(100vh - 64px - 16px); /* Adjust for mobile */
  }
  
  .uad-form-card .ant-card-head {
    padding: 12px 16px;
  }
  
  .uad-form-card .ant-card-body {
    padding: 16px 12px;
  }
  
  .uad-card-title {
    font-size: 16px;
  }
  
  .uad-form-card {
    margin-bottom: 60px; /* More space on mobile for submit button */
  }
}

/* Ensure proper scrolling on very small screens */
@media (max-height: 600px) {
  .uad-page-container {
    height: 100vh;
    overflow-y: auto;
    padding: 8px;
  }
  
  .uad-form-card .ant-card-body {
    padding: 12px;
  }
  
  .uad-form-item {
    margin-bottom: 16px !important;
  }
}
:root {
    --header-height: 64px;
    --breadcrumb-height: 32px;
    --page-padding: 8px;  /* Reduced from 24px */
    --filter-section-height: 56px;
    --search-section-height: 56px;
    --tabs-header-height: 46px;
    --content-padding: 8px;
    --card-gap: 16px;
    --total-padding: 8px;  /* Reduced from 48px */
}

.product-list-container {
    position: relative;
    height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
    padding: var(--page-padding) var(--page-padding) var(--page-padding) var(--page-padding);
    margin-top: -12px; /* Add negative margin to reduce top space */
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0px !important; /* Reduced from 2px to 1px */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}

.search-section {
    background: #ffffff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px !important; /* Add small gap between elements */
    padding: 8px ; /* Add padding */
    margin-bottom: 12px !important; /* Removed margin completely */
}

.filter-panel {
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding: 8px !important;
    margin-top: 1px !important; /* Reduce space between search and filter */
}

.product-list-content {
    flex: 1;
    background: #ffffff;
    padding: 4px; /* Reduced from 8px to 4px */
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0; /* Critical for nested flex scroll */
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

#scrollableDiv {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px;
    height: calc(100% ) !important;
}

.ant-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ant-tabs-content {
    flex: 1;
    height: 100%;
}

.ant-tabs-tabpane {
    height: 100%;
    overflow: hidden;
}

.infinite-scroll-component {
    overflow: unset !important;
}

.ant-card-meta-title,
.ant-card-meta-description {
    white-space: normal; /* Uzun metinlerin kesilmesini önler */
}

.ant-badge-ribbon-wrapper {
    width: 100%; /* Kartların genişliğini tam yapar */
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 8px; /* Reduced padding */
    gap: 8px; /* Reduced gap */
}

.ant-row {
    width: 100%;
    padding: 4px !important; /* Removed negative margin */
    margin-top: -14px !important;
}

.ant-row > .ant-col {
    padding: 4px !important; /* Reduced padding */
}

.ant-card {
    width: 100%;
    height: 450px; /* Increased from 420px to give more space */
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    background-color: #ffffff;
    border: 1px solid #e0e4e8;
    transition: all 0.3s ease;
}

.ant-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(98, 111, 146, 0.15);
    border-color: #f9c4ac;
}

.ant-card-cover {
    height: 200px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ant-card-cover img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.ant-image {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.ant-image-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.ant-card-cover .ant-image {
    height: 200px !important;
}

.ant-card-body {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ant-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px; /*Elemanlar arası boşluğu azalt */
}

.ant-card-meta-title {
    color: #474168 !important;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.ant-card:hover .ant-card-meta-title {
    color: #626f92 !important;
}

.ant-card-meta-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Elemanlar arası boşluğu azalt */
}

.ant-card-meta-description {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: -8px; /* Başlık ile açıklama arasındaki boşluğu azalt */
}

.ant-card-meta-description .ant-typography {
    margin-bottom: 2px; /* Typography elemanları arasındaki boşluğu azalt */
}

.ant-card-meta-description .ant-typography {
    margin-bottom: 4px;
}

.ant-card-meta-description .ant-space {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ant-card-meta-description .ant-space > div:last-child {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.ant-tag {
    margin: 0;
    padding: 2px 6px;
    line-height: 16px;
    height: 20px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #626f92;
    color: #626f92;
    background: rgba(98, 111, 146, 0.1);
}

.ant-space-wrap {
    gap: 4px !important;
}

.carousel-container {
    height: 200px;
}

.carousel-container .ant-carousel {
    height: 100%;
}

.carousel-container .ant-carousel .slick-slider,
.carousel-container .ant-carousel .slick-list,
.carousel-container .ant-carousel .slick-track,
.carousel-container .ant-carousel .slick-slide > div {
    height: 100%;
}

.carousel-container .ant-carousel .slick-dots {
    bottom: 8px;
}

.carousel-container .ant-carousel .slick-dots li button {
    background: #fff;
    opacity: 0.7;
}

.carousel-container .ant-carousel .slick-dots li.slick-active button {
    opacity: 1;
}

.ant-card-actions {
    background: #f8f9fa;
    border-top: 1px solid #e0e4e8;
}

.ant-card-actions > li {
    margin: 6px 0;
}

.ant-card-actions .ant-btn-text:hover {
    background-color: rgba(98, 111, 146, 0.1);
    color: #626f92;
}

.ant-switch {
    background-color: rgba(71, 65, 104, 0.3);
}

.ant-switch.ant-switch-checked {
    background-color: #626f92;
}

.ant-switch:hover:not(.ant-switch-disabled) {
    background-color: #474168;
}

.ant-card:hover .ant-card-meta-title {
    color: #1890ff;
    text-decoration: underline;
}

.custom-switch.ant-switch {
  min-width: 44px;
  height: 22px;
}

.custom-switch.ant-switch .ant-switch-handle {
  width: 18px;
  height: 18px;
  top: 2px;
}

.custom-switch.ant-switch.ant-switch-checked .ant-switch-handle {
  inset-inline-start: calc(100% - 20px);
}

.product-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.product-tabs .ant-tabs-content {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

/* Modal scroll styles */
.ant-modal-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-modal {
  top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 auto !important;
  max-width: 90vw !important;
}

.ant-modal-content {
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 8px !important;
}

.ant-modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: calc(90vh - 110px) !important;
  padding: 24px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}

/* New styles for list/grid toggle functionality */
.product-processes__global-view-toggle {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}

/* Keep other list/grid styles the same */
.product-processes__content-container {
  transition: all 0.3s ease;
}

.product-processes__content-container.list-mode {
  padding: 0;
}

.product-processes__list-view {
  width: 100%;
  background: #fff;
}

.product-processes__list-row {
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-processes__list-row:hover {
  background-color: rgba(98, 111, 146, 0.05);
}

.product-processes__list-row td {
  padding: 12px 8px !important;
}

.product-processes__product-name {
  font-weight: 500;
  color: #474168;
}

.product-processes__categories-container {
  max-width: 250px;
}

.product-processes__tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.product-processes__category-tag {
  margin: 0;
  padding: 2px 6px;
  line-height: 16px;
  height: 20px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #626f92;
  color: #626f92;
  background: rgba(98, 111, 146, 0.1);
}

.product-processes__more-tag {
  background-color: #f0f0f0;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-processes__tooltip-categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-processes__tooltip-tag {
  margin: 2px 0;
  font-size: 12px;
  line-height: 16px;
  padding: 2px 6px;
  white-space: nowrap;
  color: #f9c4ac;
  border: 1px solid #f9c4ac;
}

.product-processes__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #626f92;
  font-size: 12px;
  border-radius: 4px;
}

.product-processes__no-categories {
  color: #a0a0a0;
  font-style: italic;
  font-size: 12px;
}

.product-processes__custom-switch.ant-switch {
  min-width: 44px;
  height: 22px;
}

.product-processes__custom-switch.ant-switch .ant-switch-handle {
  width: 18px;
  height: 18px;
  top: 2px;
}

.product-processes__custom-switch.ant-switch.ant-switch-checked .ant-switch-handle {
  inset-inline-start: calc(100% - 20px);
}

/* Responsive adjustments for list view */
@media (max-width: 768px) {
  .product-processes__content-container.list-mode .ant-table-cell:nth-child(3),
  .product-processes__content-container.list-mode .ant-table-cell:nth-child(4) {
    display: none;
  }
}

@media (max-width: 576px) {
  .product-processes__content-container.list-mode .ant-table-cell:nth-child(2) {
    max-width: 150px;
  }
}

.copy-product-container {
  position: relative;
  width: 100%;
}

.copy-product-wrapper {
  position: relative;
  z-index: auto;
}

.copy-product-modal {
  top: 20px !important;
  padding-bottom: 0 !important;
  margin: 0 auto !important;
  width: 90vw !important;
  max-width: 1200px !important;
  z-index: 1000 !important;
}

.copy-product-modal .ant-modal-content {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.copy-product-modal .ant-modal-header {
  padding: 12px 20px !important; /* Further reduced from 16px */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.copy-product-modal .ant-modal-title {
  font-size: 18px;
  color: #272637;
  font-weight: 600;
}

.copy-product-modal .ant-modal-body {
  padding: 12px 20px !important; /* Further reduced from 16px */
  max-height: calc(90vh - 180px);
  overflow-y: auto;
}

.copy-product-modal .ant-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.copy-product-modal .ant-modal-content {
  position: relative;
  z-index: 1000;
}

.copy-product-modal .ant-modal-wrap,
.copy-product-modal .ant-modal-mask {
  z-index: 1000;
}








.copy-product-content {
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.copy-product-trees {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 8px !important; /* Further reduced from 12px */
  margin-top: 0 !important; /* Removed top margin */
  position: relative;
  max-height: calc(90vh - 240px);
}

.copy-product-tree-section {
  background: #fff;
  border: 1px solid rgba(71, 65, 104, 0.15);
  border-radius: 8px;
  padding: 4px !important; /* Further reduced from 8px */
  overflow-y: auto;
  position: relative;
}

.copy-product-tree-section .ant-tree {
  background: transparent;
}

.copy-product-tree-section .ant-tree-treenode {
  padding: 0 !important; /* Reduced from 1px */
  margin: 0 !important;
  line-height: 1 !important; /* Further reduced from 1.1 */
}

.copy-product-tree-section .ant-tree-node-content-wrapper {
  padding: 0 4px !important; /* Further reduced from 1px 6px */
  min-height: 18px !important; /* Further reduced from 20px */
  line-height: 14px !important; /* Further reduced from 16px */
}

.copy-product-tree-section .ant-tree-switcher {
  height: 18px !important; /* Match new node height */
  line-height: 18px !important;
  width: 18px !important; /* Reduced from 20px */
}

.copy-product-tree-section .ant-tree-checkbox {
  margin: 0 2px 0 0 !important; /* Further reduced margins */
  transform: scale(0.85) !important; /* Further reduced size */
}

.copy-product-tree-section .ant-tree-title {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 14px !important; /* Further reduced from 16px */
  font-size: 11px !important; /* Further reduced from 12px */
}

.copy-product-tree-section .ant-tree-node-content-wrapper:hover {
  background: rgba(71, 65, 104, 0.05);
}

.copy-product-divider {
  background: rgba(71, 65, 104, 0.15);
  width: 1px;
  margin: 0;
}

.copy-product-tree-section .ant-btn-link {
  color: #626f92;
  padding: 0 4px !important; /* Further reduced from 2px 6px */
  height: auto;
  font-size: 11px !important; /* Further reduced from 12px */
}

.copy-product-tree-section .ant-btn-link:hover {
  color: #474168;
  background: rgba(71, 65, 104, 0.05);
  border-radius: 4px;
}

.copy-product-tree-section .ant-input-textarea {
  margin-top: 8px;
}

.copy-product-tree-section .ant-input-textarea textarea {
  border-color: rgba(71, 65, 104, 0.2);
  border-radius: 6px;
}

.copy-product-input-group {
  margin-bottom: 16px;
}

.copy-product-title {
  font-weight: bold;
  padding: 4px 0;
}

.copy-product-label {
  color: #666;
  min-width: 120px;
  margin-right: 12px;
}

.copy-product-value {
  color: #1f1f1f;
  font-weight: 500;
}

.copy-product-required {
  color: #ff4d4f;
}

.product-list-container {
  /* ...existing styles... */
  position: relative;
  z-index: 1;
}

.ant-tree {
  position: relative;
  z-index: 1051 !important;
  pointer-events: auto !important;
}

.ant-btn {
  position: relative;
  z-index: 3;
}

/* Prevent background interaction while modal is open */
body.modal-open {
  overflow: hidden;
  pointer-events: none;
}

body.modal-open .ant-modal-root {
  pointer-events: auto;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .copy-product-modal {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    top: 0 !important;
    border-radius: 0;
  }

  .copy-product-modal .ant-modal-content {
    border-radius: 0;
    min-height: 100vh;
  }

  .copy-product-trees {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .copy-product-divider {
    display: none;
  }

  .copy-product-tree-section {
    max-height: none;
  }

  .copy-product-modal .ant-modal-body {
    max-height: calc(100vh - 120px);
    padding: 16px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .copy-product-modal {
    width: 95vw !important;
  }

  .copy-product-trees {
    gap: 16px;
  }
}

/* Modal z-index management */
.copy-product-modal {
  z-index: 1000 !important;
}

.nested-modal {
  z-index: 1200 !important;
}

.copy-product-modal .ant-modal-content,
.nested-modal .ant-modal-content {
  transition: none !important;
}

/* Ensure proper modal stacking */
.ant-modal-wrap {
  position: fixed !important;
}

.ant-modal-root {
  position: fixed !important;
}

/* Fix modal interactions */
.nested-modal .ant-modal-content {
  pointer-events: auto !important;
}

.copy-product-modal .ant-modal-content {
  pointer-events: auto !important;
}

/* Optimize modal performance */
.ant-modal-mask,
.ant-modal {
  transition: none !important;
}

/* Prevent background scroll */
body.has-modal {
  overflow: hidden !important;
}

/* Enable scrolling within modals */
.ant-modal-body {
  max-height: calc(90vh - 180px);
  overflow-y: auto !important;
}

/* Fix modal mask styles */
.ant-modal-mask {
  position: fixed !important;
  transition: none !important;
}
.tour-helper-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  background-color: #474168;
  border-color: #474168;
}

.tour-helper-button:hover,
.tour-helper-button:focus {
  background-color: #5d5686;
  border-color: #5d5686;
}

/* Switch adımı için özel stiller */
.ant-switch {
  position: relative;
  z-index: 1;
}

.ant-card-actions .ant-switch,
.product-processes__status-container .ant-switch,
.ant-switch {
  z-index: 99 !important;
}

/* Copy butonu adımı için özel stiller */
.product-processes__copy-button {
  position: relative;
  z-index: 1;
}

.joyride-tooltip {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.joyride-button-next {
  margin-left: 10px;
}

.joyride-button-back {
  margin-right: 10px;
}

/* Custom styles for the tour spotlight */
:root {
  --reactour-accent: #474168;
}

/* Spotlight styling to ensure product card is fully visible */
.__react-joyride-spotlight {
  border-radius: 8px !important;
  transition: all 0.3s ease-in-out !important;
}

/* Ensure tooltip stays visible */
.__floater__body {
  z-index: 2000 !important;
}

/* Make sure the tooltip appears properly */
.react-joyride__tooltip {
  max-width: 450px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure the spotlight doesn't jerk when moving between steps */
.__floater__open {
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tour-helper-button {
    bottom: 10px;
    right: 10px;
  }
  
  .react-joyride__tooltip {
    max-width: 90% !important;
  }
}

/* Fix for product card step to avoid cutting off by header */
.__floater__body[data-target=".ant-card:first-of-type"] {
  margin-top: 20px !important;
}

/* Special handling for the product card step to ensure full visibility */
.__react-joyride-helper--7 {
  margin-bottom: 20px !important;
}.add-product-form-container {
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    max-height: 68vh;
    overflow-y: auto;
}

.add-product-form {
    width: 100%;
}

.selected-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

.tag-item {
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 5px;
    display: flex;
    align-items: center;
}

.tag-remove-icon {
    margin-left: 5px;
    cursor: pointer;
}

.product-feature-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
}

.product-feature-input {
    flex: 1;
    margin-right: 8px;
}

.remove-feature-icon {
    margin-left: 8px;
    cursor: pointer;
}
  .image-upload-wrapper {
  position: relative;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 2px;
  height: 100%;
  max-height: 800px;
  display: flex;
  flex-direction: column;
}

.image-upload-header {
  flex-shrink: 0;
  margin-bottom: 16px;
}

.image-upload-content {
  flex: 0.7; /* Reduced from 1 to 0.7 to make thumbnail area smaller */
  min-height: 150px; /* Reduced from 200px */
  max-height: 40vh; /* Reduced from 50vh */
  overflow-y: auto;
  padding-right: 8px;
}

.image-upload-footer {
  flex: 1.3; /* Increased from 1 to 1.3 to give more space to footer */
  margin-top: 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  overflow-y: auto; /* Added scroll for overflow */
  min-height: 200px; /* Added minimum height */
}

.validation-panel {
  margin-top: 16px;
  background: #fafafa;
  border-radius: 8px;
  padding: 16px;
  max-height: 150px; /* Reduced from 200px */
  overflow-y: auto;
  overflow-x: hidden;
}

.validation-panel-header {
  position: sticky;
  top: 0;
  background: #fafafa;
  padding: 4px 0;
  margin: 0 0 12px 0;
  z-index: 1;
}

/* Alert style for validation warning */
.validation-warning {
  color: #ff4d4f;
  font-weight: bold;
  padding: 8px;
  margin: -8px -8px 8px -8px;
  background: #fff2f0;
  border-bottom: 1px solid #ffccc7;
}

/* Custom scrollbar styles */
.image-upload-content::-webkit-scrollbar,
.validation-panel::-webkit-scrollbar {
  width: 6px;
}

.image-upload-content::-webkit-scrollbar-track,
.validation-panel::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.image-upload-content::-webkit-scrollbar-thumb,
.validation-panel::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

/* Preserve existing thumbnail and showcase styles */
.ant-upload-list-picture-card .ant-upload-list-item {
  padding: 0;
}

.showcase-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10;
  white-space: nowrap;
}

/* Add loading spinner styles */
.ant-upload-list-item-thumbnail {
  position: relative;
}

.ant-upload-list-item-thumbnail.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}

.ant-upload-list-item-thumbnail.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  z-index: 2;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.product-info {
    width: 100%;
    padding-top: 0; /* Remove top padding */
    margin-top: 0; /* Remove top margin */
}

.product-info h2 {
    margin-bottom: 0 !important;
}

.product-info .ant-input,
.product-info .ant-input-textarea,
.product-info .ant-select,
.product-info .ant-btn {
    width: 100%;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
}

.selected-tags .tag-item {
    margin-bottom: 8px;
}

.product-info .ant-btn {
    display: block;
    width: auto;
    margin: 0;
    margin-left: auto;
    margin-top: 10px;
}



.edit-mode-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin-top: 10px;
}

.edit-mode-container .ant-input {
    margin: 0;
    height: 32px;
}

.edit-mode-container .ant-btn {
    margin: 0;
    width: auto;
}
.modern-modal .ant-modal-content {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.modern-modal .ant-modal-header {
  border-radius: 12px 12px 0 0;
  background: #f8f9fa;
  padding: 16px 24px;
  border-bottom: 1px solid #e9ecef;
}

.modern-modal .ant-modal-body {
  padding: 16px;
}

.tree-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background: #ffffff;
  height: 100%;
  min-height: 500px;
  overflow: auto;
}

.tree-card .ant-card-body {
  padding: 12px;
}

.modern-tree {
  font-size: 14px;
}

.modern-tree .ant-tree-node-content-wrapper {
  padding: 4px 8px;
}

.modern-tree .ant-tree-treenode {
  padding: 2px 0;
}

.tree-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #1f2937;
  padding: 4px 0;
  margin-bottom: 4px;
}

.info-icon {
  color: #6b7280;
  font-size: 14px;
  cursor: help;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.feature-icon {
  color: #6b7280;
  font-size: 14px;
}

.variant-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-weight: 500;
  color: #374151;
}

.document-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  transition: all 0.3s ease;
  padding: 2px 0;
}

.document-link:hover {
  color: #2563eb;
}

/* Notes section styles */
.notes-wrapper {
  padding: 8px;
  width: 100%;
}

.notes-container {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border-radius: 6px;
}

.notes-tree-node {
  margin: 0 !important;
  padding: 0 !important;
}

.notes-tree-node .ant-tree-node-content-wrapper {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

.notes-tree-node .ant-tree-node-content-wrapper:hover {
  background: transparent !important;
}

.notes-textarea {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  resize: none !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: 12px !important;
  width: 100% !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease !important;
  min-height: 80px !important;
}

.notes-textarea:hover {
  border-color: #2563eb !important;
  background-color: #ffffff !important;
}

.notes-textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
  background-color: #ffffff !important;
}

.notes-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: #6b7280;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

/* Form styles */
.ant-form-item {
  margin-bottom: 12px !important;
}

.ant-form-item-label {
  padding-bottom: 4px !important;
}

.ant-form-item-label > label {
  font-weight: 500;
  color: #374151;
  height: 24px !important;
}

.ant-input {
  border-radius: 6px;
  border-color: #e5e7eb;
  padding: 6px 12px;
  height: 36px;
}

.ant-input:hover, .ant-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* TreeSelect styles */
.ant-tree-select {
  width: 100%;
}

.ant-tree-select-selector {
  border-radius: 6px !important;
  border-color: #e5e7eb !important;
  padding: 2px 8px !important;
  min-height: 36px !important;
}

.ant-tree-select:hover .ant-tree-select-selector,
.ant-tree-select-focused .ant-tree-select-selector {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
}

/* Tag styles */
.ant-tag {
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 500;
  margin: 2px;
}

/* Button styles */
.ant-btn {
  border-radius: 6px;
  font-weight: 500;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ant-btn-primary {
  background: #2563eb;
  border-color: #2563eb;
}

.ant-btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Scroll bar styles */
.tree-card::-webkit-scrollbar {
  width: 6px;
}

.tree-card::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tree-card::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.tree-card::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Tree node spacing */
.ant-tree-list-holder-inner {
  padding: 4px 0;
}

.ant-tree-treenode {
  padding: 2px 0 !important;
}

.ant-tree-switcher {
  width: 20px !important;
}

.ant-tree-checkbox {
  margin: 4px 4px 0 0 !important;
} /* Shared styles for guides */
.text-input-guide,
.excel-input-guide {
  margin-bottom: 0;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #626f92;
  box-shadow: 0 2px 8px rgba(39, 38, 55, 0.05);
}

.text-input-guide h4,
.excel-input-guide h4 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #626f92;
}

.text-input-guide h5,
.excel-input-guide h5 {
  margin-top: 16px;
  margin-bottom: 12px;
  color: #626f92;
}

.text-input-guide p,
.excel-input-guide p {
  margin-bottom: 12px;
}

.text-input-guide ul,
.excel-input-guide ul {
  margin-bottom: 16px;
  padding-left: 20px;
}

.text-input-guide li,
.excel-input-guide li {
  margin-bottom: 8px;
}

/* Text input guide specific styles */
.example-block {
  background-color: #f0f0f0;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  margin: 10px 0;
  font-size: 13px;
}

.tips-section {
  border-top: 1px solid #e8e8e8;
  margin-top: 16px;
  padding-top: 12px;
}

/* Excel guide specific styles */
.excel-steps-container {
  margin: 16px 0;
}

.excel-steps-container .ant-steps-item-content {
  margin-left: 12px;
}

.keyboard-shortcuts-container {
  background-color: rgba(98, 111, 146, 0.05);
  padding: 12px 16px;
  border-radius: 4px;
  margin: 12px 0;
}

.keyboard-shortcuts-container kbd {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(39, 38, 55, 0.1);
  color: #474168;
  display: inline-block;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1;
  padding: 2px 4px;
  margin: 0 2px;
}

.excel-tips-list {
  background-color: rgba(98, 111, 146, 0.05);
  padding: 12px 16px 12px 32px;
  border-radius: 4px;
  margin: 12px 0;
}

.toggle-hint {
  color: #f9c4ac;
  font-style: italic;
  font-size: 0.9em;
}

/* Guide button styles */
.guide-button-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.guide-button {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  box-shadow: none;
  background-color: transparent;
}

.guide-button:hover {
  border-color: #626f92;
  color: #626f92;
}

.guide-button .anticon {
  margin-right: 8px;
}

/* Modal styles for guides */
.guide-modal .ant-modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 24px;
}

.guide-modal .ant-modal-content {
  position: relative;
  height: auto !important;
  max-height: 85vh;
}

.guide-modal {
  z-index: 1060 !important;
}

/* Added keyboard shortcuts header styling */
.keyboard-shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.fetch-feature-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.fetch-feature-search-container {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.fetch-feature-search {
  flex: 1;
}

.fetch-feature-refresh-btn {
  color: #626f92;
  border-color: #626f92;
}

.fetch-feature-filter-panel {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
  margin-top: 8px;
}

.filter-item {
  display: flex;
  flex-direction: column;
}

.filter-label {
  font-size: 12px;
  font-weight: 500;
  color: #474168;
  margin-bottom: 4px;
}

.filter-button-active {
  background-color: #474168;
  color: white;
  border-color: #474168;
}

/* Updated layout for the content area */
.fetch-feature-content {
  display: flex;
  flex-direction: row;
  height: calc(100% - 70px); /* Adjust based on your search container height */
  overflow: hidden;
}

.fetch-feature-tree-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  border-right: 1px solid #e8e8e8;
}

/* Guide section styles */
.fetch-feature-guide {
  width: 320px;
  overflow-y: auto;
  padding: 0;
  background-color: #f9f9f9;
  border-left: 1px solid #e8e8e8;
}

.fetch-feature-guide-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #f0f2f5;
}

.fetch-feature-guide-header h3 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  color: #404040;
}

.fetch-feature-guide-header h3 .anticon {
  margin-right: 8px;
  color: #1890ff;
}

.fetch-feature-guide-content {
  padding: 16px;
}

.fetch-feature-steps {
  padding-left: 20px;
  margin-bottom: 24px;
}

.fetch-feature-steps li {
  margin-bottom: 16px;
}

.fetch-feature-steps li strong {
  display: block;
  margin-bottom: 4px;
  color: #262626;
}

.fetch-feature-steps li p {
  margin: 0;
  color: #595959;
  font-size: 13px;
}

.feature-example {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 8px;
  border: 1px dashed #d9d9d9;
}

.feature-icon {
  color: #1890ff;
  margin-right: 4px;
}

.feature-key {
  font-weight: 500;
  margin-right: 4px;
}

.feature-value {
  color: #595959;
}

.feature-checkbox {
  margin-left: auto;
}

.fetch-feature-import-section {
  margin-top: 24px;
  text-align: center;
}

.fetch-feature-import-btn {
  width: 100%;
}

/* Tree customization styles */
.fetch-feature-tree .ant-tree-node-content-wrapper {
  display: flex;
  align-items: center;
}

.fetch-feature-product-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-name {
  font-weight: 500;
}

.product-code {
  color: #8c8c8c;
  font-size: 12px;
}

.fetch-feature-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Loading state and empty state styles */
.fetch-feature-loading,
.fetch-feature-loading-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fetch-feature-loading p,
.fetch-feature-loading-more span {
  margin-top: 12px;
  color: #8c8c8c;
}

.fetch-feature-end-message {
  text-align: center;
  color: #8c8c8c;
  padding: 16px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .fetch-feature-content {
    flex-direction: column;
  }
  
  .fetch-feature-tree-container,
  .fetch-feature-preview {
    flex: none;
    width: 100%;
    max-height: 400px;
  }
  
  .fetch-feature-preview {
    margin-top: 16px;
  }
}

.fetch-feature-attribute-item {
  display: flex;
  align-items: center;
  padding: 3px 0;
}

.fetch-feature-attribute-item .attribute-icon {
  margin-right: 6px;
  color: #722ed1;
  font-size: 14px;
}

.fetch-feature-attribute-item .attribute-key {
  font-weight: 500;
  margin-right: 4px;
  color: #722ed1;
}

.fetch-feature-attribute-item .attribute-value {
  color: #555;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Style for the variant nodes */
.fetch-feature-variant-item {
  display: flex;
  align-items: center;
  padding: 3px 0;
}

.fetch-feature-variant-item .variant-icon {
  margin-right: 6px;
  color: #1890ff;
  font-size: 14px;
}

.fetch-feature-variant-item .variant-name {
  font-weight: 500;
  color: #1890ff;
}.excel-upload-tab-content {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  flex: 1;
  overflow: auto;
  padding-right: 8px;
}

.excel-upload-preview {
  height: 65vh;
  overflow: auto;
  padding: 4px;
  box-sizing: border-box;
}

/* Text Input Guide styling */
.text-input-guide {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #626f92;
  box-shadow: 0 2px 8px rgba(39, 38, 55, 0.05);
}

.text-input-guide h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #626f92;
}

.text-input-guide p {
  margin-bottom: 8px;
}

.text-input-guide ul {
  margin-bottom: 16px;
  padding-left: 20px;
}

.text-input-guide li {
  margin-bottom: 4px;
}

.text-input-guide code {
  background-color: #f0f0f0;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  padding: 2px 4px;
  font-family: monospace;
  font-size: 13px;
}

/* Text guide button styling - updated */
.text-guide-button-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.text-guide-button {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  box-shadow: none;
  background-color: transparent;
}

.text-guide-button:hover {
  border-color: #626f92;
  color: #626f92;
}

.text-guide-button .anticon {
  margin-right: 8px;
}

/* Modal styling for text guide */
.ant-modal-body .text-input-guide {
  margin-bottom: 0;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #626f92;
  box-shadow: 0 2px 8px rgba(39, 38, 55, 0.05);
}

/* Ensure guide modals have proper spacing */
.ant-modal-body .text-input-guide h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #626f92;
}

.ant-modal-body .text-input-guide p {
  margin-bottom: 8px;
}

.ant-modal-body .text-input-guide ul {
  margin-bottom: 16px;
  padding-left: 20px;
}

.ant-modal-body .text-input-guide li {
  margin-bottom: 4px;
}

.example-block {
  background-color: #f0f0f0;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  padding: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  margin: 10px 0;
}

.tips-section {
  border-top: 1px solid #e8e8e8;
  margin-top: 12px;
  padding-top: 12px;
}

.text-input-instructions {
  margin-bottom: 12px;
  font-style: italic;
  color: #666;
}

/* Improve the textarea styling */
.excel-upload-textarea {
  width: 100%;
  height: calc(65vh - 40px) !important;
  min-height: 200px !important;
  max-height: none !important;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  font-family: monospace; /* Better for structured text */
}

.excel-upload-textarea:focus {
  border-color: #626f92;
  box-shadow: 0 0 0 2px rgba(98, 111, 146, 0.2);
  outline: none;
}

.no-data-message {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* Spreadsheet styles */
.react-spreadsheet {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  overflow: visible !important;
  max-width: 100%;
}

.react-spreadsheet td {
  border: 1px solid #f0f0f0;
  padding: 6px;
}

.react-spreadsheet th {
  background-color: #fafafa;
  font-weight: 500;
}

.react-spreadsheet__header {
  background-color: #f5f5f5;
}

/* File drop zone */
.file-drop-zone {
  border: 2px dashed #e8e8e8;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  background-color: #fafafa;
  cursor: pointer;
  transition: border-color 0.3s;
}

.file-drop-zone:hover {
  border-color: #626f92; /* Updated to primary color from theme */
}

.file-drop-zone-active {
  border-color: #f9c4ac; /* Updated to secondary highlight color from theme */
  background-color: rgba(249, 196, 172, 0.1); /* Light version of highlight color */
}

/* Selected columns */
.selected-column {
  background-color: rgba(98, 111, 146, 0.15); /* Using menu item selected background from theme */
}

/* Modal styles */
.excel-upload-modal {
  /* Ensure proper stacking context for the modal */
  z-index: 1050 !important;
  position: relative;
}

.excel-upload-modal .ant-modal {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  position: absolute;
  width: 90vw !important; /* Fixed width as percentage of viewport */
  max-width: 1200px; /* Maximum width to prevent excessive stretching */
}

.excel-upload-modal .ant-modal-content {
  height: 700px !important; /* Increased from 600px to 700px */
  max-height: 85vh; /* Increased from 80vh to 85vh */
  display: flex;
  flex-direction: column;
  width: 100%; /* Use 100% of modal container width */
}

.excel-upload-modal .ant-modal-body {
  max-height: 80vh;
  overflow: auto;
  padding: 16px;
  height: calc(100% - 110px); /* Account for header and footer */
  overflow: hidden; /* Hide overflow at modal level */
  display: flex;
  position: relative;
  z-index: 1050;
}

@media (max-width: 768px) {
  .excel-upload-modal .ant-modal {
    width: 95vw !important; /* Slightly wider on mobile */
    max-width: 100%; /* Allow full width on smaller screens */
  }
  
  .excel-upload-modal .ant-modal-content {
    height: 600px !important; /* Smaller height on mobile */
    max-height: 90vh;
  }

  .excel-upload-preview-section.expanded {
    width: 200px; /* Smaller preview panel on mobile */
  }
}

@media (max-width: 576px) {
  .excel-upload-modal .ant-modal {
    width: 98vw !important; /* Almost full width on very small screens */
  }
  
  .excel-upload-modal .ant-modal-content {
    height: 500px !important; /* Even smaller height on very small screens */
  }
  
  .excel-upload-preview-section.expanded {
    width: 150px; /* Even smaller preview panel on very small screens */
  }

  .excel-preview-table td,
  .excel-preview-table th {
    padding: 6px; /* Smaller padding in table cells */
    min-width: 60px; /* Smaller minimum width */
    font-size: 13px; /* Smaller font */
  }
}

/* Make spreadsheet container fixed height */
.excel-spreadsheet-container {
  height: calc(100% - 80px); /* Height minus button area */
  overflow: auto;
  margin-bottom: 20px;
}

/* Fix for clicked buttons and links inside modal */
.excel-upload-modal button,
.excel-upload-modal a {
  position: relative;
  z-index: auto;
}

/* Layout styles for the collapsible preview */
.excel-upload-container {
  display: flex;
  height: 75vh;
  width: 100%;
}

.excel-upload-tabs-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.excel-upload-divider {
  width: 8px;
  background-color: #f0f0f0;
  position: relative;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  border-radius: 4px;
}

.excel-upload-divider:hover {
  background-color: #e0e0e0;
}

.excel-upload-divider-toggle {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.excel-upload-divider-toggle:hover {
  color: #666;
}

/* Preview section styles - modified to be collapsed by default */
.excel-upload-preview-section {
  height: 100%;
  overflow: hidden;
  transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.excel-upload-preview-section.expanded {
  width: 250px; /* Reduced width for the preview panel */
  flex-shrink: 0; /* Prevent it from shrinking */
  opacity: 1;
}

.excel-upload-preview-section.collapsed {
  width: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}

/* New animation style for preview section */
.excel-upload-preview-section.has-content {
  animation: preview-attention 1s ease-in-out;
}

@keyframes preview-attention {
  0% { box-shadow: 0 0 0 0 rgba(98, 111, 146, 0.7); }
  50% { box-shadow: 0 0 15px 3px rgba(98, 111, 146, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(98, 111, 146, 0); }
}

.excel-upload-preview-header {
  padding: 8px 12px;
  font-size: 14px;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.excel-upload-preview .ant-list-item-meta-title {
  font-size: 14px;
}

.excel-upload-preview .ant-list-item-meta-description {
  font-size: 12px;
}

.excel-upload-preview .ant-list-item {
  padding: 8px 0;
}

.excel-upload-preview .ant-list-item-action {
  margin-left: 8px;
}

.excel-upload-preview .ant-list-item-action > li {
  padding: 0 4px;
}

/* Add styles for sheet selector */
.excel-preview-header-actions {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.excel-preview-header-actions .ant-btn-link {
  display: inline-flex;
  align-items: center;
}

.excel-preview-header-actions .ant-btn-link .anticon {
  margin-right: 4px;
}

.excel-preview-header .ant-select {
  margin-left: 8px;
  min-width: 200px;
}

/* Uploader section styles */
.uploader-section {
  margin-bottom: 16px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(39, 38, 55, 0.05);
}

.ant-upload-drag {
  background: white !important;
  border: 2px dashed #e8e8e8 !important;
  border-radius: 8px !important;
  transition: border-color 0.3s;
  padding: 20px;
}

.ant-upload-drag:hover {
  border-color: #626f92 !important;
}

.ant-upload-text {
  margin: 8px 0;
  color: #000000;
  font-weight: 500;
}

.ant-upload-hint {
  color: #666666;
  margin-bottom: 16px;
}

.ant-upload .ant-btn-primary {
  background-color: #474168;
  border-color: #474168;
}

.ant-upload .ant-btn-primary:hover {
  background-color: #626f92;
  border-color: #626f92;
}

/* Excel preview styles */
.excel-preview-container {
  max-height: 65vh;
  overflow: auto;
  position: relative;
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.excel-preview-header {
  padding: 16px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e8e8e8;
}

.excel-preview-header p {
  margin-bottom: 8px;
  font-weight: 500;
}

.excel-preview-table {
  overflow: auto;
  max-height: 500px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

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

.excel-preview-table td,
.excel-preview-table th {
  border: 1px solid #e8e8e8;
  padding: 10px;
  text-align: left;
  position: relative;
  min-width: 80px;
}

.excel-preview-row-header,
.excel-preview-column-header {
  background-color: #f7f7f7;
  font-weight: bold;
  text-align: center !important;
  position: sticky;
  z-index: 1;
}

.excel-preview-row-header {
  width: 40px;
  left: 0;
  background-color: #f7f7f7;
}

.excel-preview-column-header {
  top: 0;
  background-color: #f7f7f7;
  height: 40px;
}

.excel-preview-cell {
  cursor: context-menu;
  transition: background-color 0.2s;
}

.excel-preview-cell:hover {
  background-color: rgba(98, 111, 146, 0.05);
  box-shadow: 0 0 0 1px #626f92 inset;
}

/* Add a dashed border to highlight cells that can be right-clicked */
.excel-preview-cell {
  cursor: context-menu;
  transition: all 0.2s;
  position: relative;
}

.excel-preview-cell:hover {
  background-color: rgba(98, 111, 146, 0.05);
  box-shadow: 0 0 0 1px #626f92 inset;
}

.excel-preview-cell:hover::after {
  content: "🖱️";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  font-size: 14px;
  pointer-events: none;
}

/* Make the column headers also show they can be right-clicked */
.excel-preview-column-header {
  cursor: context-menu;
  transition: all 0.2s;
}

.excel-preview-column-header:hover {
  background-color: rgba(98, 111, 146, 0.1);
  box-shadow: 0 0 0 1px #626f92 inset;
}

.excel-preview-column-header:hover::after {
  content: "🖱️";
  margin-left: 5px;
  opacity: 0.5;
  font-size: 14px;
}

/* Add better visual cues for selections */
.pending-key {
  animation: pendingKeyPulse 1.5s infinite;
  border: 3px solid #626f92 !important;
  background-color: rgba(98, 111, 146, 0.1) !important;
}

.selected-key {
  background-color: rgba(98, 111, 146, 0.3);
}

.selected-value {
  background-color: rgba(249, 196, 172, 0.3);
}

.selected-key, .selected-value {
  background-color: rgba(98, 111, 146, 0.1);
  border: 1px solid rgba(98, 111, 146, 0.5);
}

/* Create different colors for each key-value pair */
.key-1, .value-1 { border: 2px solid #626f92; }
.key-2, .value-2 { border: 2px solid #474168; }
.key-3, .value-3 { border: 2px solid #f9c4ac; }
/* Keep remaining key-value pairs for visual distinction */
.key-4, .value-4 { border: 2px solid #722ed1; }
.key-5, .value-5 { border: 2px solid #eb2f96; }
.key-6, .value-6 { border: 2px solid #faad14; }
.key-7, .value-7 { border: 2px solid #13c2c2; }
.key-8, .value-8 { border: 2px solid #f5222d; }
.key-9, .value-9 { border: 2px solid #626f92; }
.key-10, .value-10 { border: 2px solid #474168; }

.pending-key {
  animation: pendingKeyPulse 1.5s infinite;
  border: 3px solid #626f92 !important;
  position: relative;
}

@keyframes pendingKeyPulse {
  0% { box-shadow: 0 0 0 0 rgba(98, 111, 146, 0.7); }
  70% { box-shadow: 0 0 0 5px rgba(98, 111, 146, 0); }
  100% { box-shadow: 0 0 0 0 rgba(98, 111, 146, 0); }
}

.pending-key-indicator {
  padding: 8px;
  background-color: rgba(98, 111, 146, 0.1);
  border: 1px solid rgba(98, 111, 146, 0.3);
  border-radius: 2px;
  margin-bottom: 8px;
  color: #626f92;
}

.excel-context-menu {
  position: fixed;
  background: white;
  box-shadow: 0 2px 8px rgba(39, 38, 55, 0.1);
  border-radius: 4px;
  z-index: 1100;
  font-size: 14px;
}

.excel-preview-actions {
  padding: 10px;
  text-align: center;
  background-color: #f7f7f7;
  border-top: 1px solid #e8e8e8;
}

/* Tutorial steps */
.excel-help-content .ant-steps-item-content {
  margin-top: 0;
}

.excel-help-content {
  max-width: 350px;
}

.excel-help-tips {
  margin-top: 16px;
  padding: 12px;
  background-color: rgba(98, 111, 146, 0.05);
  border-radius: 4px;
}

.excel-help-popover .ant-popover-inner-content {
  max-height: 400px;
  overflow-y: auto;
}

/* Disable selection styles */
.selection-disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
  background-color: rgba(0, 0, 0, 0.03);
}

.selection-disabled:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
  box-shadow: none !important;
}

/* Make the selected cells visually distinct */
.pending-key {
  background-color: rgba(98, 111, 146, 0.3) !important;
  border: 2px solid #626f92 !important;
  font-weight: bold;
}

.selected-key {
  background-color: rgba(98, 111, 146, 0.15) !important;
  border: 1px solid #626f92 !important;
}

.selected-value {
  background-color: rgba(249, 196, 172, 0.15) !important;
  border: 1px solid #f9c4ac !important;
}

.selected-key-column {
  background-color: rgba(98, 111, 146, 0.2) !important;
  border-bottom: 2px solid #626f92 !important;
  font-weight: bold;
}

/* Context menu styling */
.excel-context-menu {
  position: fixed;
  background: white;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.1);
  border-radius: 8px;
  z-index: 1000;
}

/* Style for keyboard navigation focus */
.cell-focused {
  outline: 2px solid #f9c4ac !important;
  box-shadow: 0 0 5px rgba(249, 196, 172, 0.5) !important;
  position: relative;
}

/* Style cells to show they're focusable */
.excel-preview-cell {
  position: relative;
}

.excel-preview-cell:focus {
  outline: 2px solid #f9c4ac;
  box-shadow: 0 0 5px rgba(249, 196, 172, 0.5);
}

/* Focus style for column headers */
.header-focused {
  outline: 2px solid #f9c4ac !important;
  box-shadow: 0 0 5px rgba(249, 196, 172, 0.5) !important;
  position: relative;
}

/* Keyboard shortcuts guide styling */
.keyboard-shortcut-guide {
  margin-top: 10px;
  padding: 6px 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  max-width: 100%;
}

.keyboard-shortcut-guide h4 {
  margin: 0;
  font-size: 12px;
  display: inline-block;
}

.keyboard-shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.keyboard-shortcuts-header .ant-btn {
  padding: 0 4px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
}

.keyboard-shortcut-guide ul {
  margin: 4px 0 2px;
  padding-left: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.keyboard-shortcut-guide li {
  margin-bottom: 0;
  font-size: 11px;
  white-space: nowrap;
  list-style-type: none;
}

.keyboard-shortcut-guide kbd {
  display: inline-block;
  padding: 1px 3px;
  font-size: 10px;
  line-height: 1;
  color: #444;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(39, 38, 55, 0.1);
  margin-right: 2px;
}

.toggle-hint {
  font-size: 10px;
  color: #f9c4ac;
}

/* Toggle hint styling */
.toggle-hint {
  color: #f9c4ac;
  font-style: italic;
  font-size: 0.9em;
}

/* Fix for guide modal z-index and overflow issues */
.text-guide-modal {
  z-index: 1060 !important;
}

.text-guide-modal .ant-modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 24px;
  height: auto;
}

.text-guide-modal-content {
  position: relative;
  z-index: auto;
}

/* Fix for modals blocking other UI elements */
.ant-modal-wrap,
.ant-modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.text-guide-modal .ant-modal-content {
  position: relative;
  height: auto !important;
  max-height: 85vh;
}

/* Fix for nested modals interacting with parent modal */
.excel-upload-modal .ant-modal-body {
  position: relative;
  z-index: 1050;
}

/* Override general modal styles specific to guide modal */
.text-guide-modal .ant-modal-header,
.text-guide-modal .ant-modal-footer {
  position: relative;
  z-index: 1061;
}

/* Ensure other elements can be interacted with after modal closes */
body.ant-modal-open {
  overflow: hidden;
}

/* Fix for modal overflow issues */
.excel-upload-modal {
  z-index: 1050 !important;
}

.excel-upload-modal .ant-modal-wrap,
.excel-upload-modal .ant-modal-mask {
  z-index: 1050 !important;
}

/* Ensure body overflow is reset when modal closes */
body.modal-open {
  overflow: hidden;
}

body.modal-closed {
  overflow: auto;
  padding-right: 0 !important;
}

/* Compact table styles */
.compact-excel-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.compact-header-cell {
  min-width: 30px !important;
  max-width: 60px;
  padding: 2px 4px !important;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  height: 20px !important;
}

.compact-row-header {
  min-width: 24px !important;
  max-width: 30px !important;
  font-size: 10px !important;
  text-align: center;
  padding: 2px 2px !important;
  font-weight: bold;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
}

.compact-cell {
  height: 22px;
  min-width: 30px;
  max-width: 200px;
  padding: 2px 4px !important;
  border: 1px solid #d9d9d9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Animation for expanding/collapsing */
.keyboard-shortcuts-container {
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.keyboard-shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}.container {
    background: #fff;
    border-radius: 16px;

    height: fit-content;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
 
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.editButtonContainer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}



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

.divider {
    border-color: #7cb305;
    border-width: 2px;
    margin-bottom: 24px;
}

.featureTable {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.actionContainer {
    display: flex;
 
    align-items: center;
}

.addFeatureForm {
    border-radius: 8px;   
    display: flex;
    align-items: center;
    margin-top: 10px;
    border-top: 1px dashed #e8e8e8;
    padding-top: 10px;
    flex-direction: column;
    align-items: stretch;
}

.addFeatureForm .ant-form-item {
    margin-bottom: 0;
    flex: 1;
    width: 100%;
   
}

.addFeatureForm .ant-form-item:last-child {
    flex: 0;
    margin-right: 0;
    width: 100%; /* Extend the width of the last form item */
}

.buttonContainer {
    display: flex;
    justify-content: flex-end;
}

.product-features-container {
    position: relative;
}

/* Enhanced styling for bulk import button */
.bulk-import-button {
  background: linear-gradient(135deg, #626f92, #474168);
  color: white !important;
  font-weight: 500;
  border: none !important;
  border-radius: 8px;
  padding: 0 15px;
  height: 36px;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.1);
  transition: all 0.3s ease !important;
  animation: pulse 4s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bulk-import-button:hover, .bulk-import-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(39, 38, 55, 0.2);
  background: white;
  color: #474168 !important;
  border: 1px solid #474168 !important;
}

.bulk-import-button .anticon {
  font-size: 16px;
  margin-right: 2px;
  color: white;
}

.bulk-import-button:hover .anticon {
  color: #474168;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 65, 104, 0.15);
  }
  70% {
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(71, 65, 104, 0);
  }
}

/* Modern scrollbar matching VariantDetails */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

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

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .headerContainer {
        flex-direction: column;
     
        align-items: flex-start;
       
    }

    .editButton {
        width: 100%;
        justify-content: center;
    }

    .buttonContainer {
        width: 100%;
        justify-content: space-between;
    }
}.variants-container {
  position: relative;
  /* Remove margin-top as it will be controlled by parent */
}

.variants-edit-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  margin-bottom: 5px; /* Add margin */
}

.variants-edit-button-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: absolute;
  right: 0;
  z-index: 1;
}

.edit-button {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: -20px;
}

.edit-button button {
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0;
}

.variants-divider {
  border-color: #7cb305;
  border-width: 2px;
  margin-bottom: 0;
  width: 100%;
}

.variant-form-container {
  width: 100%;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.variant-form-container .ant-form-item {
  margin-bottom: 0;
}

.variant-form-container .ant-input {
  padding: 2px 4px;
}

.variant-input {
  flex: 0.7;
}

.variant-table-container {
  max-height: 400px;
  overflow-y: auto;
}

.variant-table-container .ant-table-tbody > tr > td {
  padding: 4px;
}

.variants-table .ant-table-thead > tr > th {
  background-color: #F3F4F5;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.variants-table .ant-table-tbody > tr > td {
  padding: 4px 8px;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  margin-bottom: 10px;
}

.variant-add-button {
  flex: 0.3;
  margin-bottom: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.variant-input .ant-form-item {
  margin: 0;
  width: 100%;
}

.variant-input .ant-input {
  height: 32px;
}

.m6zwb4v,.m6zwb4v:visited{color:#575f67;cursor:pointer;display:inline-block;background:#e6f3ff;padding-left:2px;padding-right:2px;border-radius:2px;-webkit-text-decoration:none;text-decoration:none;}.m6zwb4v:hover,.m6zwb4v:focus{color:#677584;background:#edf5fd;outline:0;}.m6zwb4v:active{color:#222;background:#455261;}
.mnw6qvm{border:1px solid #eee;position:absolute;min-width:220px;max-width:440px;background:#fff;border-radius:2px;box-shadow:0px 4px 30px 0px rgba(220,220,220,1);cursor:pointer;padding-top:8px;padding-bottom:8px;z-index:2;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}
.m1ymsnxd{opacity:0;-webkit-transition:opacity 0.25s cubic-bezier(0.3,1.2,0.2,1);transition:opacity 0.25s cubic-bezier(0.3,1.2,0.2,1);}
.m126ak5t{opacity:1;}
.mtiwdxc{padding:7px 10px 3px 10px;-webkit-transition:background-color 0.4s cubic-bezier(.27,1.27,.48,.56);transition:background-color 0.4s cubic-bezier(.27,1.27,.48,.56);}.mtiwdxc:active{background-color:#cce7ff;}
.myz2dw1{padding:7px 10px 3px 10px;-webkit-transition:background-color 0.4s cubic-bezier(.27,1.27,.48,.56);transition:background-color 0.4s cubic-bezier(.27,1.27,.48,.56);background-color:#e6f3ff;}.myz2dw1:active{background-color:#cce7ff;}
.mpqdcgq{display:inline-block;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:368px;font-size:0.9em;margin-bottom:0.2em;}
.m1mfvffo{display:inline-block;width:24px;height:24px;border-radius:12px;}
.product-notes-container {
    position: relative;
    margin-bottom: 3px;
}

.product-notes-header {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.edit-button-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 1;
}

.notes-divider {
    border-color: #7cb305;
    border-width: 2px;
    margin-bottom: 0;
}

.message-content {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    word-break: break-all; /* Changed from word-wrap */
    white-space: pre-wrap; /* Changed from normal */
    display: inline-block; /* Added this */
}

.message-content p {
    margin: 0;
    padding: 0;
    white-space: pre-wrap; /* Changed from normal */
    overflow: visible;
    word-break: break-all; /* Changed from word-wrap */
    display: inline-block; /* Added this */
}

.message-content img {
    max-width: 100%;
    height: auto;
}

.message-content table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Editor alignment styles */
.DraftEditor-alignLeft > div { 
    text-align: left !important; 
}

.DraftEditor-alignCenter > div { 
    text-align: center !important; 
}

.DraftEditor-alignRight > div { 
    text-align: right !important; 
}

[data-block="true"][data-alignment="left"] { 
    text-align: left !important; 
}

[data-block="true"][data-alignment="center"] { 
    text-align: center !important; 
}

[data-block="true"][data-alignment="right"] { 
    text-align: right !important; 
}

.mention { 
    color: #1890ff; 
    text-decoration: none; 
}

.mention:hover { 
    text-decoration: underline; 
}

/* Make MentionEditor take full width as well */
.DraftEditor-root {
    width: 100%;
    max-width: 100%;
}
.mh-material-history-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  padding: 0;
  height: 100%;
  overflow: visible;
  position: relative;
  background: transparent;
  box-shadow: none;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Timeline Styles */
.mh-custom-timeline {
  margin-top: 0;
  padding: 4px 0;
  background: transparent;
}

.mh-timeline-item {
  padding-bottom: 16px;
  transition: all 0.3s ease;
  background: transparent;
}

.mh-timeline-item:hover {
  background-color: transparent;
}

.mh-timeline-label {
  display: flex;
  align-items: flex-start;
  margin-right: 12px;
  font-size: 13px;
  white-space: nowrap;
  gap: 4px;
  justify-content: flex-end;
}

.mh-timeline-date {
  margin-left: 8px;
  color: #666;
  font-size: 12px;
}

.mh-timeline-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-right: -8px;
  margin-top: 4px;
}

.mh-timeline-dot {
  font-size: 16px;
  animation: mh-pulse 2s infinite;
}

.mh-event-item-container {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f5f5f5;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease;
  border-left: 3px solid #474168;
  margin-left: 6px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  width: 100%;
  display: block;
}

.mh-event-item-container:hover {
  background-color: #ebebeb;
  transform: translateX(2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mh-event-item-container:active {
  transform: translateX(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.mh-event-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.mh-event-action {
  font-weight: 500;
  color: #333;
  font-size: 14px;
  flex: 1;
}

/* Loading Styles */
.mh-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #888;
  background: transparent;
}

.mh-loading-text {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

.mh-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  color: #888;
  gap: 8px;
  background: transparent;
}

.mh-loading-more-text {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}

/* Empty State Styles */
.mh-empty-container {
  margin: 20px 0;
  padding: 20px 0;
  background: transparent;
}

.mh-empty-text {
  color: #999;
  font-size: 14px;
}

/* Modal Styles */
.mh-notification-detail-modal .ant-modal-content {
  border-radius: 8px;
  overflow: hidden;
}

.mh-notification-detail-modal .ant-modal-header {
  padding: 5px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #f8f9fa;
}

.mh-modal-title {
  display: flex;
  align-items: center;
}

.mh-modal-title span {
  margin-left: 8px;
  font-weight: 600;
}

.mh-modal-content {
  padding:0 !important;
}

.mh-modal-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.mh-modal-avatar {
  margin-right: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 5px;
}

.mh-modal-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mh-modal-date {
  color: #888;
  font-size: 12px;
  margin-bottom: 5px;
  margin: 0;
}

.mh-modal-action {
  font-size: 16px;
  margin: 0;
}

.mh-modal-body {
  padding: 15px 5px;
  font-size: 14px;
  line-height: 1.6;
}

.mh-content-text {
  line-height: 1.6;
  color: #333;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  margin: 0;
}

.mh-message-content p {
  margin-bottom: 8px;
}

/* Animations */
@keyframes mh-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mh-timeline-label {
    font-size: 12px;
  }
  
  .mh-modal-content {
    padding: 5px 0;
  }
  
  .mh-modal-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .mh-modal-avatar {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Ensure tooltip text is readable */
.ant-tooltip-inner {
  font-size: 13px;
}

/* Ensure Ant Timeline styles work with our changes */
.ant-timeline {
  background: transparent !important;
}

.ant-timeline-item {
  padding-bottom: 20px !important;
  background: transparent !important;
}

.ant-timeline-item-content {
  background: transparent !important;
}

/* Override Ant Design's default card styling for timeline */
.ant-timeline-item-content {
  background: transparent !important;
}

/* Formatted Content Styles */
.mh-formatted-content {
  padding: 0;
}

.mh-content-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #474168;
}

.mh-content-details {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eee;
}

.mh-table-info {
  margin-bottom: 16px;
}

.mh-value-comparison {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.mh-old-value, .mh-new-value {
  padding: 12px;
  border-radius: 6px;
  background: #fff;
}

.mh-old-value {
  border: 1px solid #ffccc7;
}

.mh-new-value {
  border: 1px solid #b7eb8f;
}

.mh-value-label {
  font-weight: 600;
  font-size: 13px;
}

.mh-value-content {
  font-family: 'Courier New', monospace;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  overflow-x: auto;
}

.mh-json-content {
  background: #f5f5f5;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  border: 1px solid #e8e8e8;
  max-height: 300px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
}

/* Fix divider styling to match original design */
.mh-formatted-content .ant-divider {
  margin: 0;
  border-top: 1px solid #e8e8e8;
}

.mh-formatted-content .ant-divider-inner-text {
  font-size: 14px;
  font-weight: 500;
  color: #474168;
}

.mh-formatted-content .ant-divider-horizontal.ant-divider-with-text {
  font-size: 14px;
  border-top-color: #e8e8e8;
  color: #666;
}

/* Feature Addition Styles */
.mh-add-description {
  margin-bottom: 12px;
  color: #555;
  font-size: 14px;
}

.mh-feature-container {
  background: #f0f7ff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  padding: 12px;
}

.mh-feature-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

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

.mh-feature-label {
  font-weight: 600;
  margin-bottom: 4px;
  color: #474168;
  font-size: 13px;
}

.mh-feature-value {
  background: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  border: 1px solid #d9d9d9;
  word-break: break-word;
}

.mh-key {
  color: #1890ff;
  font-weight: 500;
}

.mh-value {
  color: #52c41a;
}

/* Variant Addition/Deletion Styles */
.mh-variant-container {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 6px;
  gap: 16px;
}

.mh-variant-add {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

.mh-variant-delete {
  background-color: #fff2e8;
  border: 1px solid #ffbb96;
}

.mh-variant-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.mh-variant-add .mh-variant-icon {
  background-color: #d9f7be;
  color: #52c41a;
}

.mh-variant-delete .mh-variant-icon {
  background-color: #ffe7ba;
  color: #fa8c16;
}

.mh-variant-info {
  flex: 1;
}

.mh-variant-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.mh-variant-description {
  color: #666;
  font-size: 14px;
}

/* Add these styles to your existing CSS */

/* Updated styles for user name and date */
.mh-timeline-user-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 13px;
  margin-left: 8px;
}

.mh-timeline-user {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 2px;
  font-size: 13px;
}

.mh-timeline-date {
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px;
}

.mh-modal-user-date {
  display: flex;
  flex-direction: column;
}

.mh-modal-user {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  font-size: 15px;
  margin-bottom: 2px;
}

.mh-modal-date {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
}

/* Style for avatar with initials */
.ant-avatar:empty {
  background-color: #1890ff;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-details-container {
    display: flex;
    height: 100%; /* Full height of the container */
    flex-direction: column;
    max-height: calc(100vh - 64px - 30px - 10px); /* 64px: Header height */
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 0;
    overflow: hidden; 
}

.product-details-content {
    display: flex;
    flex: 1; /* Allow content to grow and shrink */
}
.left-column {
    flex: 0 0 33.33%; /* Fixed width for the left column */
    padding-right: 16px;
    position: relative; /* Ensure positioning context for edit button */
}

.right-column {
    flex: 1; /* Take up the remaining space */
    padding-left: 16px;
}

.meta-section {
    display: flex;
    flex-direction: column;
    height: 100%; /* Full height of the container */
}

.main-image-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f0f0f0;
    margin-bottom: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative; /* Ensure positioning context for edit button */
}

.main-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.thumbnail-navigation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
    height: 90px;
    padding: 0;
}

.thumbnail-nav-button {
    position: relative;
    transform: none;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #d9d9d9 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.thumbnail-nav-button:hover {
    background: #fff !important;
    color: #1890ff !important;
    border-color: #1890ff !important;
}

.thumbnail-nav-button.left {
    left: 0;
}

.thumbnail-nav-button.right {
    right: 0;
}

.thumbnail-images-container {
    width: 264px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.thumbnail-images {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
    width: fit-content;
    margin: 0 auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f0f0f0;
}

.thumbnail-images::-webkit-scrollbar {
    height: 6px;
}

.thumbnail-images::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.thumbnail-images::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.thumbnail {
    flex: 0 0 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background-color: #fafafa;
    position: relative;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.thumbnail:hover {
    border-color: #40a9ff;
    background-color: #f0f5ff;
}

.thumbnail.selected {
    border-color: #1890ff;
    background-color: #e6f7ff;
}

@media (max-width: 768px) {
    .product-details-content {
        flex-direction: column;
    }
}

.selected-tags {
    margin-bottom: 10px;
}

.tag-item {
    display: inline-block;
    background: #f3f3f3;
    border-radius: 3px;
    padding: 5px 10px;
    margin: 5px;
}

.image-upload-container .ant-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.image-upload-container .ant-upload-list-item {
    width: calc(20% - 8px) !important;
    margin-right: 0 !important;
    aspect-ratio: 1;
}

.ant-upload-list-picture-card .ant-upload-list-item-container {
    width: calc(20% - 8px) !important;
    margin-right: 0 !important;
}

.image-upload-container .ant-upload-list {
    display: flex;
    flex-wrap: wrap;
}

.image-upload-container .ant-upload-list-item {
    width: 104px;
    height: 104px;
    margin-right: 8px;
}

.upload-list-inline .ant-upload-list-item {
    float: left;
    width: 200px;
    margin-inline-end: 8px;
}

.ant-upload-rtl.upload-list-inline .ant-upload-list-item {
    float: right;
}

.header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 10px;
}

.main-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: left;
}

.main-subtitle {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

.edit-button {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0;
    color: #555;
}

.main-subtitle p {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
    font-weight: normal;
}

.product-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 10px;
}

.product-details-table th {
    text-align: left;
    background-color: #f0f0f0;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

.product-details-row:nth-child(even) {
    background-color: #f2f2f2;
}

.product-details-key {
    font-weight: 700;
    padding: 8px;
    border: 1px solid #ddd;
    font-size: small;
    color: #555;
}

.product-details-value {
    font-weight: normal;
    padding: 8px;
    border: 1px solid #ddd;
    font-size: small;
}

.product-details-action {
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
    cursor: pointer;
    color: #1890ff;
}

.action-icon {
    color: #1890ff;
    cursor: pointer;
}

.steps-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.steps-table th {
    text-align: left;
    background-color: #f0f0f0;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

.steps-table td {
    padding: 8px;
    border: 1px solid #ddd;
}

.steps-table-step-column {
    width: 40%;
}

.breadcrumb-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.timeline-container {
    margin-top: 20px;
    text-align: center;
}

.feature-input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.feature-input-item {
    flex: 1;
    margin-right: 10px;
}

.add-feature-button {
    width: 100%;
}

.ant-upload-list-item.showcase-image {
    border: 2px solid #1890ff;
    box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
}

.showcase-badge {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1890ff, #096dd9);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    line-height: 1.2;
}

.showcase-glow {
    animation: glowing 2s infinite;
}

@keyframes glowing {
    0% { box-shadow: 0 0 5px rgba(24, 144, 255, 0.5); }
    50% { box-shadow: 0 0 20px rgba(24, 144, 255, 0.7); }
    100% { box-shadow: 0 0 5px rgba(24, 144, 255, 0.5); }
}

.product-details-wrapper {
    padding: 20px;
    height: calc(100vh - 112px); /* 64px header + 48px breadcrumb */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-layout {
    flex: 1;
    min-height: 0;
}

.product-left-column {
    height: 100%;
    overflow: hidden;
}

.product-right-column {
    height: 100%;
    overflow: hidden;
}

.product-left-column .ant-card,
.product-right-column .ant-card {
    height: 100%;
}

.product-left-column .ant-card-body {
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.product-right-column .ant-card-body {
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.image-gallery-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-info-wrapper {
    flex-shrink: 0;
    margin-bottom: 16px;
    margin-top: 0; /* Remove top margin */
}

.product-tabs-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.custom-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    
}

.custom-tabs .ant-tabs-content {
    flex: 1;
    height: 100%;
    min-height: 0;
  
}

.custom-tabs .ant-tabs-content-holder {
    height: 100%;
    overflow: hidden;
}

.custom-tabs .ant-tabs-tabpane {
    height: 100%;
    overflow: auto;
    padding-right: 8px;
}

.tab-content {
  padding-top: 0px !important;
    height: 100%;
    overflow: auto;/* Add padding to ensure buttons are visible */
    margin-top: -50px;
    padding-right: 5px; /* Add right padding to create space between content and scrollbar */
}

/* Add these responsive styles */
@media screen and (max-width: 768px) {
  .product-details-wrapper {
    padding: 12px;
    height: calc(100vh - 56px);
  }

  .product-layout {
    margin: 0 !important;
  }

  .product-left-column,
  .product-right-column {
    height: auto;
    padding: 0 !important;
    margin-bottom: 12px;
  }

  .product-right-column .product-card {
    margin-bottom: 0;
  }

  .product-card .ant-card-body {
    max-height: none;
    padding: 12px !important;
  }

  .custom-tabs .ant-tabs-nav {
    margin-bottom: 12px;
  }

  .tab-content {
    padding-right: 0;
    margin-top: 0;
  }

  /* Image gallery adjustments */
  .main-image-container {
    height: 200px;
  }

  .thumbnail-navigation {
    height: 70px;
  }

  .thumbnail {
    flex: 0 0 60px;
    height: 60px;
  }

  .thumbnail-images-container {
    width: 200px;
  }
}

/* Override the fixed heights and scrolling behavior for mobile */
@media screen and (max-width: 768px) {
  .product-details-wrapper {
    padding: 12px;
    height: auto;
    overflow: visible;
    position: relative;
  }

  .product-layout {
    height: auto !important;
  }

  .product-card {
    height: auto !important;
  }

  .product-card .ant-card-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ant-tabs-content-holder {
    height: auto !important;
    overflow: visible !important;
  }

  .ant-tabs-content {
    height: auto !important;
  }

  .tab-content {
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure parent containers allow scrolling */
  .ant-layout,
  .ant-layout-content {
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure tabs panel is scrollable */
  .ant-tabs-tabpane {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 20px;
  }

  /* Remove any fixed positioning that might interfere */
  .ant-card {
    position: static !important;
  }

  /* Allow content to flow naturally */
  .product-info-wrapper,
  .product-tabs-wrapper {
    height: auto !important;
    overflow: visible !important;
  }
}

/* Force mobile scrolling behavior */
@media screen and (max-width: 768px) {
  html, 
  body {
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #root {
    height: auto !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 576px) {
  .product-details-wrapper {
    padding: 8px;
  }

  .main-image-container {
    height: 180px;
  }

  .thumbnail-navigation {
    height: 60px;
  }

  .thumbnail {
    flex: 0 0 50px;
    height: 50px;
  }

  .thumbnail-images-container {
    width: 160px;
  }

  .ant-tabs-tab {
    padding: 8px !important;
    margin: 0 4px !important;
  }
}

/* Tablet adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .product-details-wrapper {
    padding: 16px;
  }

  .product-left-column,
  .product-right-column {
    padding: 0 8px !important;
  }
}

/* Main layout fixes */
.product-details-wrapper {
    height: calc(100vh - 112px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Layout row */
.product-layout {
    height: 100%;
    margin: 0 !important;
    padding: 20px;
}

/* Columns */
.product-left-column,
.product-right-column {
    height: 100% !important;
}

/* Cards */
.product-left-column .ant-card,
.product-right-column .ant-card {
    height: 100% !important;
}

.product-left-column .ant-card-body,
.product-right-column .ant-card-body {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

/* Image gallery container */
.image-gallery-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Right column content */
.product-info-wrapper {
    flex-shrink: 0;
}

.product-tabs-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.custom-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.custom-tabs .ant-tabs-nav {
    margin: 0 0 16px 0;
    padding: 0;
}

.custom-tabs .ant-tabs-content-holder {
    flex: 1;
    overflow: hidden;
}

.custom-tabs .ant-tabs-content {
    height: 100%;
}

.custom-tabs .ant-tabs-tabpane {
    height: 100%;
    overflow: auto;
    padding-right: 8px;
}

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

/* Mobile view fixes */
@media screen and (max-width: 768px) {
  .product-details-wrapper {
    height: auto;
    overflow: visible;
    padding: 12px;
  }

  .product-layout {
    height: auto;
    margin: 0;
  }

  .product-left-column,
  .product-right-column {
    height: auto !important;
    overflow: visible;
  }

  .product-right-column .ant-card {
    height: auto !important;
  }

  .product-right-column .ant-card-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }

  .product-tabs-wrapper {
    height: auto;
    overflow: visible;
  }

  .custom-tabs {
    height: auto;
  }

  .custom-tabs .ant-tabs-content {
    height: auto;
  }

  .custom-tabs .ant-tabs-content-holder {
    height: auto;
    overflow: visible;
  }

  .custom-tabs .ant-tabs-tabpane {
    height: auto;
    padding-bottom: 20px;
  }

  .tab-content {
    height: auto;
    min-height: 200px; /* Ensure minimum height for content */
    overflow: visible;
  }
}

/* Responsive styles for show history button */
@media screen and (max-width: 576px) {
  .ant-tabs-extra-content {
    transform: scale(0.8);
    transform-origin: right center;
  }

  .ant-tabs-extra-content .ant-btn {
    padding: 4px 8px;
    font-size: 12px;
    height: 28px;
  }

  .ant-tabs-extra-content .anticon {
    font-size: 12px;
  }
}

/* For very small screens */
@media screen and (max-width: 375px) {
  .ant-tabs-extra-content {
    transform: scale(0.7);
  }
}

.container {
    padding: 12px; /* Reduced padding */
    background: #f0f2f5;  /* Changed from gradient to a consistent light background */
    min-height: auto; /* Change from 100vh to auto to allow proper scrolling */
    display: flex;
    flex-direction: column;
    gap: 16px; /* Reduced gap */
    font-family: var(--font-family);
    line-height: var(--line-height-normal);
    color: var(--text-color);
    height: auto; /* Allow it to expand based on content */
    margin-bottom: 40px !important; /* Increased from 20px to 40px for more space */
   /* Add padding to ensure space is visible */
}

.searchSection {
    background: #ffffff;  /* Changed to solid white for better contrast */
    padding: 24px; /* Reduced padding */
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.searchSection:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-hover);
}

.sectionTitle {
    color: var(--heading-color);
    margin-bottom: 8px !important; /* Reduced margin */
    font-size: var(--font-size-xl) !important; /* Use theme font size var */
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
    font-family: var(--font-family) !important;
    line-height: var(--line-height-tight) !important;
}

.searchDescription {
    margin-bottom: 16px; /* Reduced margin */
    font-size: var(--font-size-sm); /* Use theme font size var */
    color: var(--text-color-secondary);
    font-family: var(--font-family);
}

.searchGroup {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Reduced gap */
}

/* Styling for the radio group with a divider */
.radioGroup {
    width: 100%;
    display: flex;
    gap: 12px; /* Reduced gap */
    border: none !important;
    position: relative; /* Add position relative to contain the divider */
}

/* Add divider between radio buttons */
.radioGroup::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background-color: #d9d9d9;
    transform: translateX(-50%);
    z-index: 1;
    border: none !important;
}

/* Remove the yellow vertical line from the right radio button */
.radioGroup .ant-radio-button-wrapper:last-child::before,
.radioGroup .ant-radio-button-wrapper:not(:first-child)::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    background-color: transparent !important;
}

/* Ensure the border styling is consistent and override any Ant Design defaults */
.radioButton.ant-radio-button-wrapper {
    border: 1px solid #d9d9d9 !important;
}

/* Override and remove all before/after pseudo-elements that might be causing the line */
.ant-radio-button-wrapper::before,
.ant-radio-button-wrapper::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Additional fix for any potential :focus state that might show unwanted borders */
.ant-radio-button-wrapper:focus,
.ant-radio-button-wrapper-focused {
    outline: none !important;
    box-shadow: none !important;
}

.searchTypeContainer {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap */
}

.searchTypeLabel {
    font-size: var(--font-size-sm); /* Use theme font size var */
    color: var(--heading-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
}

/* Make sure both radio buttons have exactly the same style and adjust for divider */
.radioButton.ant-radio-button-wrapper,
.radioButton.ant-radio-button-wrapper:first-child,
.radioButton.ant-radio-button-wrapper:last-child {
    background-color: #f5f5f5 !important;
    border: 1px solid #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.85) !important;
    transition: all 0.3s cubic-bezier(0.2, 0, 0.1, 1) !important;
    transform: translateY(0);
    position: relative; /* Position relative for hover effects */
    z-index: 0; /* Lower z-index for non-hover state */
    font-family: var(--font-family) !important;
}

/* When hovering, move the button above the divider */
.radioButton.ant-radio-button-wrapper:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 2; /* Higher z-index on hover to appear above divider */
}

/* Selected radio button should appear above divider */
.radioButton.ant-radio-button-wrapper-checked {
    z-index: 3 !important; /* Highest z-index for checked state */
}

.radioButton {
    flex: 1;
    height: auto !important;
    padding: 12px !important; /* Reduced padding */
    border-radius: 12px !important;
    background: var(--background-color-light) !important;
    border: 1px solid var(--border-color-base) !important;
    transition: all 0.3s ease !important;
    position: relative;
    font-family: var(--font-family) !important;
}

.radioButton:hover {
    border-color: var(--primary-color) !important;
    background: var(--background-color-light) !important;
}

.radioButton:global(.ant-radio-button-wrapper) {
    border: 1px solid var(--border-color-base) !important;
}

.radioButton:global(.ant-radio-button-wrapper):not(:first-child)::before {
    display: none !important;
}

.radioButton:global(.ant-radio-button-wrapper-checked) {
    background: var(--primary-1) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    z-index: 1;
}

.radioButton:global(.ant-radio-button-wrapper):hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-2);
}

.radioContent {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Reduced gap */
    padding: 2px; /* Reduced padding */
}

.radioContent :global(.anticon) {
    font-size: var(--font-size-lg); /* Use theme font size var */
    margin-top: 2px;
}

.radioLabel {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Reduced gap */
    text-align: left;
    color: var(--text-color);
}

.radioLabel div:first-child {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm); /* Use theme font size var */
}

.radioDescription {
    font-size: var(--font-size-xs); /* Use theme font size var */
    color: var(--text-color-secondary);
    font-weight: normal;
    font-family: var(--font-family);
    line-height: var(--line-height-tight);
}

.searchInputContainer {
    display: flex;
    gap: 12px; /* Reduced gap */
    align-items: center; /* Ensure vertical alignment */
}

.searchInput {
    flex: 1;
}

.searchInput :global(.ant-input) {
    height: 40px; /* Standardize the height */
    border-radius: 12px;
    border: 1px solid var(--border-color-base);
    background: var(--component-background);
    transition: all 0.3s ease;
    font-size: var(--font-size-sm); /* Use theme font size var */
}

.searchIcon {
    color: var(--text-color-secondary);
    font-size: var(--font-size-base); /* Use theme font size var */
}

.searchButton {
    min-width: 120px;
    height: 40px !important; /* Match exactly the input height */
    line-height: 40px !important; /* Ensure text is vertically centered */
    padding: 0 16px !important; /* Make padding consistent */
    border-radius: 12px !important;
    font-weight: 500;
    background: var(--primary-color) !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--primary-3) !important;
    transition: all 0.3s ease !important;
    display: flex !important; /* Use flexbox for better alignment */
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-medium) !important;
    letter-spacing: var(--letter-spacing-normal) !important;
}

/* Fix for the icon and text alignment inside the button */
.searchButton :global(.anticon) {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.searchButton:hover {
    transform: translateY(-1px);
    background: var(--primary-color-hover) !important;
    box-shadow: 0 6px 16px var(--primary-4) !important;
}

/* Fix the search input and button height mismatch - with increased specificity */
.searchInputContainer {
    display: flex;
    gap: 12px; /* Reduced gap */
    align-items: center;
}

.searchInput {
    flex: 1;
}

.searchInput input.ant-input,
.searchInput .ant-input-affix-wrapper {
    height: 40px !important;
    line-height: 40px !important;
    box-sizing: border-box !important;
}

/* Make absolutely sure the button has the exact same height as input */
.searchButton.ant-btn,
.searchButton.ant-btn-primary,
button.searchButton {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure any size props don't affect the height */
.searchButton.ant-btn-lg,
.searchButton.ant-btn.ant-btn-lg {
    height: 40px !important;
    line-height: 38px !important;
}

.tabsSection {
    background: #ffffff;  /* Changed to solid white for better contrast */
    padding: 24px; /* Reduced padding */
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: auto; /* Remove fixed height constraint */
    max-height: none; /* Remove max-height restriction */
    overflow-y: visible; /* Prevent content from flowing outside */
    margin-bottom: 40px !important; /* Increased from 20px to 40px for more space */
}

.tabsHeader {
    margin-bottom: 16px; /* Reduced margin */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.tabsTitle {
    color: var(--heading-color);
    margin-bottom: 4px !important; /* Reduced margin */
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-xl) !important; /* Use theme font size var */
    line-height: var(--line-height-tight) !important;
}

.tabsDescription {
    color: var(--text-color-secondary);
    font-size: var(--font-size-sm); /* Use theme font size var */
    font-family: var(--font-family);
}

.customTabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Critical for nested flexbox scrolling */
    overflow: hidden; /* Prevent tabs from overflowing */
}

.customTabs :global(.ant-tabs-nav) {
    margin: 0 !important;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--border-color-split);
    flex-shrink: 0; /* Prevent tab nav from shrinking */
}

.customTabs :global(.ant-tabs-tab) {
    padding: 8px 16px !important; /* Reduced padding */
    margin: 0 !important;
    transition: all 0.3s ease;
}

.customTabs :global(.ant-tabs-tab-active) {
    background: var(--primary-1);
    border-radius: 8px;
}

.customTabs :global(.ant-tabs-content) {
    flex: 1;
    min-height: 0; /* Critical for nested flexbox scrolling */
    padding-top: 12px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Contain overflow */
    height: 100%;
    padding: 16px 0 0;
}

.customTabs :global(.ant-tabs-tabpane) {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Contain overflow in tab panels */
}

.customTabs :global(.ant-tabs-tabpane-active) {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tableWrapper {
    flex: 1;
    min-height: 0; /* Critical for nested flexbox scrolling */
    position: relative;
    height: 100%;
    border-radius: 16px;
    background: var(--component-background);
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow content to be visible */
    padding-bottom: 8px; /* Add padding at the bottom */
}

.tableContainer {
    height: 100%;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
    padding: 0 12px; /* Reduced padding */
    min-height: 0; /* Critical for Firefox */
    max-height: 100%; /* Ensure it fills the available space */
    padding-bottom: 24px; /* Add padding at the bottom for better visibility */
}

.tableContainer::-webkit-scrollbar {
    width: 4px;
}

.tableContainer::-webkit-scrollbar-track {
    background: transparent;
}

.tableContainer::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 6px;
}

.customTable {
    background: transparent;
    height: 100%;
    margin-bottom: 24px; /* Add margin at the bottom for better visibility */
}

/* Ensure the table doesn't get a scrollbar of its own */
.customTable :global(.ant-table-container) {
    border-radius: 0;
}

.customTable :global(.ant-table) {
    background: transparent;
    height: 100%;
}

.customTable :global(.ant-table-row) {
    background: var(--component-background);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.customTable :global(.ant-table-row:hover) {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

.customTable :global(.ant-table-cell) {
    border: none !important;
    background: transparent !important;
    padding: 12px !important; /* Reduced padding */
}

.customTable :global(.ant-table-thead > tr > th) {
    background: transparent !important;
    border: none !important;
    padding: 12px !important; /* Reduced padding */
    font-weight: 600;
    color: var(--text-color-secondary);
    font-size: var(--font-size-xs); /* Use theme font size var */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide) !important;
}

.customTable :global(.ant-table-tbody > tr > td) {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.loadingMore {
    position: relative; /* Change from absolute to relative */
    bottom: auto;
    margin-top: auto; /* Push to bottom if space available */
    padding: 16px 0;
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

/* Loading indicator styles for infinite scroll */
.loadingMore {
    padding: 12px 0;
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

/* No results message styling */
.noMoreResults {
    text-align: center;
    padding: 12px;
    color: var(--text-color-secondary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
}

/* Fix for Safari and mobile browsers */
@supports (-webkit-touch-callout: none) {
    .tableContainer {
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

.loadingSpinner {
    display: inline-block;
    width: 24px; /* Reduced size */
    height: 24px; /* Reduced size */
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
    opacity: 0.7;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.tableCell {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap */
    padding: 4px; /* Reduced padding */
    border-radius: 8px;
    transition: all 0.3s ease;
}

.tableCellText {
    color: var(--text-color);
    font-size: var(--font-size-sm); /* Use theme font size var */
    font-weight: 500;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
}

/* Status Tags */
.statusTag {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    padding: 6px 12px; /* Reduced padding */
    border-radius: 24px;
    font-size: var(--font-size-xs); /* Use theme font size var */
    font-weight: 500;
    transition: all 0.3s ease;
}

.statusAccepted {
    composes: statusTag;
    background: rgba(82, 196, 26, 0.1);
    color: #389e0d;
    border: 1px solid rgba(82, 196, 26, 0.2);
}

.statusRejected {
    composes: statusTag;
    background: rgba(255, 77, 79, 0.1);
    color: #cf1322;
    border: 1px solid rgba(255, 77, 79, 0.2);
}

.statusPending {
    composes: statusTag;
    background: rgba(250, 173, 20, 0.1);
    color: #d48806;
    border: 1px solid rgba(250, 173, 20, 0.2);
}

.emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px; /* Reduced padding */
    text-align: center;
    color: var(--text-color-secondary);
    padding: 24px;
}

/* Add these new styles for infinite scroll */
.infiniteScrollContainer {
    height: 400px;  /* Fixed height for scrollable container */
    overflow-y: auto;
    border-radius: 8px;
    padding: 4px;
    position: relative;
}

.infiniteScrollContainer::-webkit-scrollbar {
    width: 6px;
}

.infiniteScrollContainer::-webkit-scrollbar-track {
    background: transparent;
}

.infiniteScrollContainer::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
}

.endMessage {
    text-align: center;
    padding: 12px;
    color: var(--text-color-secondary);
    font-size: var(--font-size-sm);
}

.emptyStateIcon {
    font-size: 36px; /* Reduced size */
    margin-bottom: 12px; /* Reduced margin */
    opacity: 0.5;
}

.emptyStateText {
    font-size: var(--font-size-sm); /* Use theme font size var */
    margin-bottom: 4px; /* Reduced margin */
}

.emptyStateSubtext {
    font-size: var(--font-size-xs); /* Use theme font size var */
    opacity: 0.7;
}

/* Modal Styles */
.customModal :global(.ant-modal-content) {
    border-radius: 16px;
    overflow: hidden;
}

.customModal :global(.ant-modal-title) {
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-xl) !important;
}

.modalContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Reduced gap */
    text-align: center;
}

.modalInfo {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap */
    width: 100%;
    font-family: var(--font-family);
}

.modalInput {
    margin-top: 12px; /* Reduced margin */
    width: 100%;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        padding: 8px; /* Further reduced padding for mobile */
        gap: 12px; /* Further reduced gap for mobile */
    }

    .searchSection,
    .tabsSection {
        padding: 16px; /* Further reduced padding for mobile */
    }

    .sectionTitle {
        font-size: var(--font-size-lg) !important; /* Smaller font for mobile */
    }

    .searchGroup {
        gap: 12px; /* Further reduced gap for mobile */
    }

    .radioGroup {
        flex-direction: column;
    }

    /* Change divider to horizontal for mobile view */
    .radioGroup::after {
        left: 20%;
        right: 20%;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
    }

    .searchInputContainer {
        flex-direction: column;
    }

    .searchButton {
        width: 100%;
    }

    .tabsSection {
        height: auto; /* Change from fixed height to auto */
        max-height: none; /* Remove any max height constraints */
    }

    .sectionTitle,
    .tabsTitle {
        font-size: var(--font-size-lg) !important; /* Same smaller size on mobile */
    }

    .infiniteScrollContainer {
        height: 300px;  /* Shorter on mobile */
    }
}

/* CSS Variables for Theme Support - Updated for better compatibility */
:root {
    --primary-color: #505050;         /* Changed from blue to dark gray */
    --primary-color-hover: #666666;   /* Changed to lighter gray */
    --primary-1: #f5f5f5;            /* Changed to very light gray */
    --primary-2: #e0e0e0;            /* Changed to light gray */
    --primary-3: rgba(80, 80, 80, 0.25);  /* Changed to gray with opacity */
    --primary-4: rgba(80, 80, 80, 0.35);  /* Changed to gray with opacity */
    --component-background: #ffffff;
    --background-color-light: #f5f5f5;
    --background-color-dark: #f0f2f5;
    --text-color: rgba(0, 0, 0, 0.85);
    --text-color-secondary: rgba(0, 0, 0, 0.45);
    --heading-color: rgba(0, 0, 0, 0.85);
    --border-color-base: #d9d9d9;
    --border-color-split: #f0f0f0;
    --box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --table-header-bg: #fafafa;
    --item-hover-bg: rgba(0, 0, 0, 0.04);
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-size-xs: 12px;  /* Extra small text */
    --font-size-sm: 14px;  /* Small text, body text */
    --font-size-base: 15px;  /* Base size, form elements */
    --font-size-lg: 16px;  /* Large text, section subtitles */
    --font-size-xl: 18px;  /* Extra large, section titles */
    --font-size-2xl: 20px;  /* Major headings */
    --font-size-3xl: 24px;  /* Page titles */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;  /* Tighter line height for headings */
    --line-height-normal: 1.4;  /* More compact normal line height */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
}

/* Remove Dark Mode Overrides - This is what's likely causing the black background */
@media (prefers-color-scheme: dark) {
    :root {
        /* Keep the original light theme values instead of dark values */
        --component-background: #ffffff;
        --background-color-light: #f5f5f5;
        --background-color-dark: #f0f2f5;
        --text-color: rgba(0, 0, 0, 0.85);
        --text-color-secondary: rgba(0, 0, 0, 0.45);
        --heading-color: rgba(0, 0, 0, 0.85);
        --border-color-base: #d9d9d9;
        --border-color-split: #f0f0f0;
    }

    /* Keep light mode styles for these specific components in dark mode */
    .searchInput :global(.ant-input) {
        background: #ffffff;
    }

    .loadingMore {
        background: linear-gradient(180deg, transparent 0%, #ffffff 100%);
    }
}

/* Direct fix for the black background issue on the left radio button */
.radioGroup .ant-radio-button-wrapper:first-of-type,
.radioGroup .ant-radio-button-wrapper:last-of-type,
.radioGroup .ant-radio-button-wrapper {
    background-color: #f5f5f5 !important;
    border-color: #d9d9d9 !important;
}

/* Make sure both radio buttons have exactly the same style */
.radioButton.ant-radio-button-wrapper,
.radioButton.ant-radio-button-wrapper:first-child,
.radioButton.ant-radio-button-wrapper:last-child {
    background-color: #f5f5f5 !important; /* Hard-coded background color */
    border: 1px solid #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

/* Make sure both button states are applied the same way */
.radioButton.ant-radio-button-wrapper-checked {
    background-color: #e6f7ff !important;
    border-color: #1890ff !important;
    color: #1890ff !important;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.2, 0, 0.1, 1) !important;
}

/* Improve transitions for radio buttons */
.radioButton.ant-radio-button-wrapper,
.radioButton.ant-radio-button-wrapper:first-child,
.radioButton.ant-radio-button-wrapper:last-child {
    background-color: #f5f5f5 !important;
    border: 1px solid #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.85) !important;
    transition: all 0.3s cubic-bezier(0.2, 0, 0.1, 1) !important;
    transform: translateY(0);
}

.radioButton.ant-radio-button-wrapper:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Enhance icon transitions as well */
.radioContent .anticon {
    color: rgba(0, 0, 0, 0.85) !important;
    transition: color 0.3s ease !important;
}

.radioButton.ant-radio-button-wrapper-checked .radioContent .anticon {
    color: #1890ff !important;
}

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

/* Update search button styles */
.searchButton {
    min-width: 120px;
    height: 48px !important;
    border-radius: 12px !important;
    font-weight: 500;
    background: var(--primary-color) !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--primary-3) !important;
    transition: all 0.3s ease !important;
}

.searchButton:hover {
    transform: translateY(-1px);
    background: var(--primary-color-hover) !important;
    box-shadow: 0 6px 16px var(--primary-4) !important;
}

/* Update input focus styles */
.searchInput :global(.ant-input):hover,
.searchInput :global(.ant-input):focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-2);
}

/* Update radio button checked styles */
.radioButton.ant-radio-button-wrapper-checked {
    background-color: var(--primary-1) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(80, 80, 80, 0.2) !important;
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.2, 0, 0.1, 1) !important;
}

.radioButton.ant-radio-button-wrapper:hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-2);
    transform: translateY(-1px);
}

/* Update tab active styles */
.customTabs :global(.ant-tabs-tab-active) {
    background: var(--primary-1);
    border-radius: 8px;
}

.customTabs :global(.ant-tabs-ink-bar) {
    background-color: var(--primary-color) !important;
}

/* Update scrollbar color */
.tableContainer {
    scrollbar-color: var(--primary-color) transparent;
}

.tableContainer::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
}

/* Update icons in checked radio buttons */
.radioButton.ant-radio-button-wrapper-checked .radioContent .anticon {
    color: var(--primary-color) !important;
}

/* Update loading spinner color */
.loadingSpinner {
    border: 2px solid var(--primary-color);
    border-top-color: transparent;
}

/* Update status tag colors to be more neutral */
.status-tag.accepted {
    background-color: #f5f5f5 !important;
    color: #505050 !important;
    border: 1px solid #d9d9d9 !important;
}

.status-tag.rejected {
    background-color: #f5f5f5 !important;
    color: #505050 !important;
    border: 1px solid #d9d9d9 !important;
}

.status-tag.pending {
    background-color: #f5f5f5 !important;
    color: #505050 !important;
    border: 1px solid #d9d9d9 !important;
}

/* Enhanced styles for the selected radio button */
.radioButton.ant-radio-button-wrapper-checked {
    background-color: var(--primary-1) !important;
    border: 2px solid var(--primary-color) !important; /* Thicker border */
    color: var(--primary-color) !important;
    box-shadow: 0 6px 16px rgba(80, 80, 80, 0.3) !important; /* Stronger shadow */
    transform: translateY(-3px); /* More pronounced lift effect */
    transition: all 0.3s cubic-bezier(0.2, 0, 0.1, 1) !important;
    font-weight: 500 !important; /* Make text slightly bolder */
}

/* Make the active button's content stand out more */
.radioButton.ant-radio-button-wrapper-checked .radioContent {
    opacity: 1;
}

.radioButton.ant-radio-button-wrapper .radioContent {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Make the icon in the selected button more prominent */
.radioButton.ant-radio-button-wrapper-checked .radioContent .anticon {
    color: var(--primary-color) !important;
    font-size: 22px !important; /* Slightly larger icon */
    margin-top: 1px;
}

/* Add a subtle glow effect to the selected button */
.radioButton.ant-radio-button-wrapper-checked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(80, 80, 80, 0.1);
    pointer-events: none;
    opacity: 0.7;
}

/* Override any conflicting styles */
.radioButton.ant-radio-button-wrapper-checked:hover {
    transform: translateY(-3px) !important; /* Maintain the lift even on hover */
}

/* Font styles to match your theme - inspired by globals.css */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make headings consistent with your globals.css */
h1, h2, h3, h4, h5, h6, 
.ant-typography h1, 
.ant-typography h2, 
.ant-typography h3, 
.ant-typography h4, 
.ant-typography h5, 
.ant-typography h6 {
    color: var(--heading-color) !important;
    font-family: var(--font-family) !important;
    line-height: var(--line-height-tight) !important;
}

/* Style for the scroll to top button */
.scrollToTopButton {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.scrollToTopButton:hover {
    opacity: 1;
}

/* Handle Safari and Firefox scrolling issues */
@supports (-webkit-overflow-scrolling: touch) or (scrollbar-width: thin) {
    .tableContainer {
        -webkit-overflow-scrolling: touch;
        padding-bottom: 40px; /* Extra padding for mobile browsers */
    }
}

/* Add a consistent avatar style class */
.consistentAvatar {
    background-color: #e0e0e0 !important; /* Force consistent gray color */
    color: #333333 !important; /* Change from #666666 to darker #333333 for better readability */
}

/* Update the avatar in table cells */
.tableCell .ant-avatar,
.custom-table-cell .ant-avatar {
    background-color: #e0e0e0 !important;
  /* Change from #666666 to darker #333333 for better readability */
}

/* Update avatars in the modal */
.modalContent .ant-avatar {
    background-color: #e0e0e0 !important;
    color: #333333 !important; /* Change from #666666 to darker #333333 for better readability */
}



.company-request-send-tour-helper-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.company-request-send-tour-tooltip .joyride-tooltip__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.production-steps-definitions-container {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.production-steps-definitions-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.add-step-form {
    margin-bottom: 20px;
}

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

.create-template-button {
    margin-bottom: 20px;
}

.templates-list {
    margin-top: 20px;
}

.template-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.template-card {
    width: 300px;
}

.default-template {
    border: 2px solid #1890ff;
}

.selected-row {
    background-color: #e6f7ff !important;
}
.material-features-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 8px; /* 16px'ten 8px'e düşürüldü */
  flex-wrap: nowrap;
  min-height: 300px; /* 500px'ten 300px'e düşürüldü */
  padding: 8px; /* 16px'ten 8px'e düşürüldü */
}

.material-features-main {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
}

.material-features-divider {
  border-color: #7cb305;
  border-width: 2px;
  margin-bottom: 0;
}

.material-features-edit-button {
  position: absolute;
  right: 0;
  font-size: 14px;
  display: flex;
  align-items: right;
  padding: 0;
  color: #555;
  margin-left: auto;
}

.material-features-form-item {
  margin-bottom: 0 !important;
}

.material-features-input {
  width: 100%;
  padding: 2px 4px;
}

.material-features-text {
  display: block;
  padding: 2px 4px;
}

.material-features-remove-icon {
  color: #ff4d4f;
  cursor: pointer;
}

.material-features-remove-icon:hover {
  color: #ff7875;
}

.material-features-table .ant-table-tbody > tr > td {
  padding: 4px;
}

.material-features-space {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 8px; /* 16px'ten 8px'e düşürüldü */
  border-top: 1px solid #f0f0f0;
  margin-top: 8px; /* auto yerine 8px */
  z-index: 10;
}

.material-features-add-button {
  width: 100%;
}

.material-features-row {
  margin-top: 2px;
}

.material-features-left {
  flex: 1;
  padding-right: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-width: 0; /* Prevents flex item from overflowing */
  gap: 24px;
}

.material-features-right {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-width: 0; /* Prevents flex item from overflowing */
}

.features-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  padding: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #474168;
  line-height: 22px; /* Match with edit button */
}

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

.import-button {
  background: linear-gradient(135deg, #626f92, #474168);
  color: white !important;
  font-weight: 500;
  border: none !important;
  border-radius: 8px;
  padding: 0 15px;
  height: 36px;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.1);
  transition: all 0.3s ease !important;
  animation: pulse 4s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.import-button:hover, .import-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(39, 38, 55, 0.2);
  background: white;
  color: #474168 !important;
  border: 1px solid #474168 !important;
}

.import-button .anticon {
  font-size: 16px;
  margin-right: 2px;
  color: white;
}

.import-button:hover .anticon {
  color: #474168;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 65, 104, 0.15);
  }
  70% {
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(71, 65, 104, 0);
  }
}

.features-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.material-features-table-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0; /* Bu önemli - flex child için */
  position: relative;
  height: calc(100% - 140px); /* Adjusted to account for bottom buttons */
  margin-bottom: 8px;
}

.material-features-button-container {
  margin-top: 10px;
  border-top: 1px dashed #e8e8e8;
  padding-top: 10px;
  margin-bottom: 16px; /* Add margin to prevent buttons from being cut off */
  padding: 8px;
  background: white;
  border-top: 1px solid #f0f0f0;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.material-features-button-container .ant-space-compact {
  gap: 4px !important;
  display: flex !important;
}

.material-features-button-container .ant-space-compact .ant-input-wrapper {
  margin-bottom: 4px;
}

.material-features-button-container .ant-space-compact > * {
  margin-bottom: 4px !important;
}

/* Enhance tab styles */
.material-features-left .ant-tabs,
.material-features-right .ant-tabs {
  height: 100%;
}

.material-features-left .ant-tabs-content-holder,
.material-features-right .ant-tabs-content-holder {
  padding: 16px;
}

/* Scrollbar styles */
.material-features-table-container::-webkit-scrollbar {
  width: 8px;
}

.material-features-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.material-features-table-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .material-features-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .material-features-left,
  .material-features-right {
    width: 100%;
  }

  .material-features-main {
    flex-direction: column;
  }
}

/* MaterialDetails içinde özel stiller */
.material-details-features-wrapper .material-features-container {
  padding: 0;
  margin: 0;
  height: 100%;
  background: transparent;
}

.material-details-features-wrapper .material-features-main {
  gap: 0;
}

.material-details-features-wrapper .material-features-left {
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.material-details-features-wrapper .features-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 250px);
  padding: 0;
  background: transparent;
}

.material-details-features-wrapper .material-features-table-container {
  margin-bottom: 0;
}

/* Adjust MaterialDetails specific styles */
.material-details-features-wrapper .material-features-button-container {
  margin-bottom: 24px; /* Extra margin in MaterialDetails context */
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: white;
}

/* Fix modal overflow issues */
.ant-modal-root {
  position: fixed;
  z-index: 1000;
}

/* Ensure modals don't interfere with button clicks */
.ant-modal-mask,
.ant-modal-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Ensure modals are fully removed from DOM when closed */
.ant-modal-hidden {
  display: none !important;
}

/* Reset body styles when modal is closed */
body:not(.ant-modal-open) {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* Make sure elements are clickable after modal closing */
.features-panel button,
.features-panel a {
  position: relative;
  z-index: 1;
}

/* Ensure the modal gets proper z-index and stacking context */
.excel-upload-modal {
  z-index: 1050 !important;
}

/* Fix potential issues with ant-modal-wrap */
.ant-modal-wrap:not(.ant-modal-centered) {
  overflow: auto;
  text-align: center;
}.material-details-container {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative; /* Added to ensure proper containment */
    z-index: 1;
}

.material-details-content {
    flex: 1;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

.material-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.edit-button {
    margin-left: 10px;
    position: relative;
}

.material-details-table {
    width: 100%;
    margin-bottom: 24px;
    background-color: red !important;
}

.material-details-table th {
    text-align: left;
    padding: 8px 16px;
    background-color: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.material-details-table td {
    padding: 8px 16px;
    border-bottom: 1px solid #e8e8e8;
}

.tabs-variant-left-tittle {
    margin-inline-end: 16px;
    font-weight: "bold";
}

.ant-row-rtl .tabs-variant-left-tittle {
    margin-inline-end: 0;
    margin-inline-start: 8px;
}

.variant-content-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.variant-left-section,
.variant-right-section {
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
}

.section-title {
    font-size: 18px;
    font-weight: 500;
    color: #262626;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #3498db, #2980b9);
}

.variant-tabs {
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.variant-content {
    display: flex;
    min-height: 500px;
}

.variant-inner-tabs {
    background: #f8fafc;
    border-radius: 12px;
    height: 100%;
    display: flex !important;
    flex-direction: row !important;
}

.variant-inner-tabs .ant-tabs {
    height: 100%;
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
}

.variant-inner-tabs .ant-tabs-nav {
    width: 100px !important; /* 200px'den 140px'e düşürüldü */
    min-width: 100px !important; /* 200px'den 140px'e düşürüldü */
    background: #fff !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border-right: 1px solid #f0f0f0 !important;
}

.variant-inner-tabs .ant-tabs-nav-list {
    width: 100% !important;
    flex-direction: column !important;
}

.variant-inner-tabs .ant-tabs-tab {
    margin: 4px 8px !important; /* 12px'den 8px'e düşürüldü */
    padding: 8px !important; /* 12px'den 8px'e düşürüldü */
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: calc(100% - 16px) !important; /* 24px'den 16px'e düşürüldü */
}

.variant-inner-tabs .ant-tabs-tab-btn {
    text-align: left !important;
    width: 100% !important;
}

.variant-inner-tabs .ant-tabs-content-holder {
    flex: 1 !important;
    padding: 0 !important; /* 16px'ten 0'a düşürüldü */
}

.variant-inner-tabs .ant-tabs-content {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.variant-inner-tabs .ant-tabs {
    height: 100%;
}

.variant-inner-tabs .ant-tabs-nav {
    width: 140px !important; /* 200px'den 140px'e düşürüldü */
    min-width: 140px !important; /* 200px'den 140px'e düşürüldü */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.variant-inner-tabs .ant-tabs-tab {
    margin: 4px 0 !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.variant-inner-tabs .ant-tabs-tab:hover {
    background: #f0f7ff;
}

.variant-inner-tabs .ant-tabs-tab-active {
    background: #e6f7ff;
}

.variant-inner-tabs .ant-tabs-content {
    padding: 0 4px;
    height: fit-content;
}

.variant-inner-tabs .section-content {
  height: 100%;
  display: flex;
  flex-direction: column;

}

.variant-inner-tabs .ant-tabs-content {
  flex: 1;
}



.section-content {
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-radius: 12px;
    padding: 5px !important;
    max-height: calc(100vh - 220px);
    overflow-y: auto !important;
    overflow-x: hidden;
    height: 100% !important;
    z-index: 1 !important;
    
}

.section-title {
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
}

.material-content-wrapper {
    display: flex;
    flex-direction: row; /* column yerine row yapıyoruz */
    gap: 8px;
    margin-top: 8px;
    height: calc(100% - 60px); /* header yüksekliğini çıkarıyoruz */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%; /* Ekledik */
    overflow: hidden; /* Ekledik */
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: 8px;
    height: calc(100% - 60px);
}

.documents-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    width: 400px; /* 300px'den 400px'e çıkarıldı */
    height: 100%; /* Tam yükseklik */
    overflow-y: auto; /* İçerik çok olursa scroll */
    position: relative;
    z-index: 1;
    flex-shrink: 0; /* Ekledik */
    overflow: auto;
    width: 400px;
    min-width: 400px; /* Sabit minimum genişlik */
    flex: none; /* flex büyüme/küçülmeyi engelle */
}

.variant-section {
    min-width: 0; /* Ekledik */
    overflow: hidden;
    width: calc(100% - 416px); /* documents-section genişliği + gap */
    min-width: calc(100% - 416px); /* Sabit minimum genişlik */
    flex: none; /* flex büyüme/küçülmeyi engelle */
    overflow: hidden;
}

/* Responsive tasarım */
@media (max-width: 992px) {
    .variant-content-layout {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1200px) {
  .variant-inner-tabs .ant-tabs-nav {
    width: 120px !important; /* 180px'den 120px'e düşürüldü */
    min-width: 120px !important;
  }
  .documents-section {
    width: 350px; /* Orta boy ekranlarda biraz daha küçük */
    min-width: 350px;
  }
  .variant-section {
    width: calc(100% - 366px); /* Daha küçük ekranlarda documents-section + gap */
    min-width: calc(100% - 366px);
  }
}

@media screen and (max-width: 992px) {
  .material-details-container {
    padding: 16px;
    height: 100%;
    min-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .variant-content {
    flex-direction: column;
  }

  .variant-inner-tabs {
    padding: 12px;
    flex-direction: column !important;
  }

  .variant-inner-tabs .ant-tabs {
    height: auto;
    flex-direction: column !important;
  }

  .variant-inner-tabs .ant-tabs-nav {
    width: 100%;
    margin-bottom: 16px;
    padding: 4px;
    width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px !important;
  }

  .variant-inner-tabs .ant-tabs-nav-list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    flex-direction: row !important;
    overflow-x: auto !important;
  }

  .variant-inner-tabs .ant-tabs-tab {
    flex-shrink: 0;
    margin: 0 4px !important;
    padding: 8px 16px !important;
    white-space: nowrap;
    margin: 0 4px !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  .variant-inner-tabs .ant-tabs-content {
    margin-left: 0;
    padding: 16px 0;
    border-left: none;
    min-height: auto;
  }

  .section-content {
    margin-bottom: 5px;
  }

  .variant-inner-tabs .ant-tabs-content-holder {
    padding: 12px !important;
  }

  .variant-inner-tabs .ant-tabs-tab-btn {
    text-align: center !important;
  }

  .material-content-wrapper {
    gap: 12px;
    margin-top: 12px;
    flex-direction: column; /* Mobilde alt alta gelsin */
    height: auto;
    overflow: visible; /* Ekledik */
  }

  .documents-section {
    padding: 12px;
    width: 100%;
    min-width: 100%;
    height: auto;
    max-height: 400px; /* Mobilde maksimum yükseklik */
    flex-shrink: 1; /* Ekledik */
  }

  .variant-section,
  .documents-section {
    width: 100%;
    min-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .material-details-container {
    padding: 16px;
    height: auto;
  }

  .material-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .material-header h1 {
    font-size: 24px;
  }

  .variant-tabs {
    padding: 16px;
    margin: 16px 0;
  }

  .section-content {
    padding: 5px;
    margin-bottom: 5px;
  }

  .variant-inner-tabs {
    padding: 8px;
  }

  .variant-inner-tabs .ant-tabs-nav {
    padding: 4px;
  }

  .variant-inner-tabs .ant-tabs-tab {
    padding: 6px 12px !important;
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .material-details-container {
    padding: 8px;
  }

  .variant-tabs {
    padding: 12px;
  }

  .section-content {
    padding: 8px;
    margin-bottom: 12px;
  }

  .material-header h1 {
    font-size: 20px;
  }

  .variant-inner-tabs {
    padding: 4px;
  }

  .variant-inner-tabs .ant-tabs-tab {
    padding: 4px 8px !important;
    font-size: 13px;
  }

  .material-content-wrapper {
    gap: 8px;
    margin-top: 8px;
  }

  .documents-section {
    padding: 8px;
  }
}

/* Touch cihazlar için scroll iyileştirmeleri */
@media (hover: none) {
  .variant-inner-tabs .ant-tabs-nav-list {
    -webkit-overflow-scrolling: touch;
  }
}

/* Tab içeriği için özel stil */
.variant-inner-tabs .ant-form-item:not(:last-child) {
    margin-bottom: 12px !important;
}

/* Specific styles for MaterialFeatures when used within MaterialDetails */
.material-details-features-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.material-details-features-wrapper .material-features-container {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 400px;
}

.material-details-features-wrapper .material-features-main {
  height: 100%;
  gap: 0;
}

.material-details-features-wrapper .material-features-left {
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.material-details-features-wrapper .features-panel {
  box-shadow: none;
  background: transparent;
  height: 100%;
  padding: 0;
}

.material-details-features-wrapper .panel-header {
  position: relative;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.material-details-features-wrapper .material-features-edit-button {
  margin: 0;
  padding: 2px 0;
  font-size: 14px;
  line-height: 22px; /* Match the height of the Features title */
}

.material-details-features-wrapper .panel-header {
  margin-bottom: 24px;
}

.material-details-features-wrapper .material-features-table-container {
  margin-bottom: 24px;
}

/* Adjust table styles within MaterialDetails */
.material-details-features-wrapper .ant-table-wrapper {
 
  border-radius: 8px;
}

.material-details-features-wrapper .ant-table {
  background: transparent;
}

.material-details-features-wrapper .material-features-space {
  margin-top: 24px;
}

/* Hide headers in material details context */
.material-details-features-wrapper .panel-header,
.material-details-features-wrapper .ant-divider,
.material-details-features-wrapper .material-description-header {
  display: none;
}

.material-details-features-wrapper form {
  margin-top: 0;
}

/* Hide headers in material details context but keep edit buttons visible */
.material-details-features-wrapper .panel-header {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin-bottom: 16px;
  border: none;
}

.material-details-features-wrapper .panel-header h3,
.material-details-features-wrapper .ant-divider {
  display: none;
}

.material-details-features-wrapper .material-features-edit-button {
  position: static;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: normal;
}

.material-details-features-wrapper form {
  margin-top: 0;
}

/* Description edit button styles within material details */
.material-details-features-wrapper .material-description-edit-button {
    display: block;
    text-align: right;
    margin-bottom: 16px;
    font-size: 14px;
    padding: 0;
    color: #555;
}

.material-details-features-wrapper .ant-divider {
    display: none;
}

/* Loading spinners için özel stiller */
.variant-inner-tabs .ant-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.variant-inner-tabs .ant-spin .ant-spin-dot {
    font-size: 24px;
}

.documents-section .ant-spin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.documents-section .ant-spin .ant-spin-dot {
    font-size: 24px;
}

/* Spinner container için wrapper */
.loading-container {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.variant-inner-tabs {
    width: 100%;
    min-width: 100%;
}

.variant-inner-tabs .ant-tabs {
    width: 100%;
    min-width: 100%;
}


/* MaterialFeatureTour.css - Styles for the material feature tour */

/* Helper button styles - positioned in the bottom right corner */
.material-feature-tour-helper-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  box-shadow: 0 3px 10px rgba(71, 65, 104, 0.2);
  transition: all 0.3s ease;
}

.material-feature-tour-helper-button:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(71, 65, 104, 0.3);
}

/* Joyride tooltip customization */
.material-features-joyride .react-joyride__tooltip {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(71, 65, 104, 0.15);
}

.material-features-joyride .joyride-button-next {
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.material-features-joyride .joyride-button-next:hover {
  background-color: #605990 !important;
}

.material-features-joyride .joyride-button-back {
  font-weight: 500;
  transition: color 0.3s ease;
}

.material-features-joyride .joyride-button-back:hover {
  color: #605990 !important;
}

/* Make sure tooltips are readable on smaller screens */
@media (max-width: 576px) {
  .material-features-joyride .react-joyride__tooltip {
    max-width: 300px !important;
    width: 90vw !important;
  }
  
  .material-feature-tour-helper-button {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
}.variant-details-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important; /* changed from auto to hidden */
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-height: calc(100vh - 64px);
    width: 100%; /* added */
    max-width: 100%; /* added */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    height: calc(100vh - 80px);
    position: relative;
    z-index: 1;
}

.variant-details-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.variant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
    font-size: smaller;
}

.variant-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.edit-button {
    margin-left: 10px;
    position: relative;
}

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

.action-button {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s;
}

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

.development-button {
    background: #1890ff;
    color: white;
}

.history-button {
    background: #52c41a;
    color: white;
}

.variant-details-table {
    width: 100%;
    margin-bottom: 24px;
    border-collapse: collapse; /* Tablo hücreleri birleşik görünecek */
}

.variant-details-table th {
    text-align: left;
    padding: 8px 16px;
    background-color: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.variant-details-table td {
    padding: 8px 16px;
    border-bottom: 1px solid #e8e8e8;
}

.timeline-container {
    margin-top: 24px;
    max-height: 300px; /* Zaman çizelgesi yüksekliği sınırlı */
    overflow-y: auto; /* Dikey scroll özelliği */
}

.timeline-item {
    cursor: pointer;
    padding: 8px;
}

.timeline-item:hover {
    background-color: #f5f5f5;
}

.footer {
    padding: 10px 20px;
    background-color: #fafafa;
    border-top: 1px solid #e8e8e8;
    text-align: center;
}

.tabs-variant-left-tittle {
    margin-inline-end: 16px;
    font-weight: bold;
}

.ant-row-rtl .tabs-variant-left-tittle {
    margin-inline-end: 0;
    margin-inline-start: 16px;
}

/* Scroll bar stili */
.variant-details-content::-webkit-scrollbar {
    width: 8px;
}

.variant-details-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.variant-details-content::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.content-section {
    background: #fafafa;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.content-section-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #262626;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Material kartları için stil */
.material-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s;
}

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

/* Responsive tasarım */
@media (max-width: 768px) {
    .variant-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
  
    .action-buttons {
        width: 100%;
        justify-content: space-between;
    }

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

/* Modern layout grid */
.variant-content-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
    overflow-x: hidden; /* added */
    width: 100%; /* added */
    max-width: 100%; /* added */
}



/* Dosyalar bölümü */
.files-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 24px;
}

/* Geliştirme faaliyetleri */
.development-section {
    grid-column: 1 / -1;
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    max-width: 100%;
    overflow-x: hidden;
}

/* Section başlıkları */
.section-title {
    font-size: 18px;
    font-weight: 500;
    color: #262626;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #3498db, #2980b9);
}

/* Responsive tasarım */
@media (max-width: 992px) {
    .variant-content-layout {
        grid-template-columns: 1fr;
    }
    
    .development-section {
        margin-top: 16px;
    }
}

.variant-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
    height: calc(100% - 60px);
    width: 100%;
    overflow: hidden;
}

.variant-content {
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.documents-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    width: 400px; /* 300px'den 400px'e çıkarıldı */
    height: 100%; /* Tam yükseklik */
    overflow-y: auto; /* İçerik çok olursa scroll */
    position: relative;
    z-index: 1;
    flex-shrink: 0; /* Ekledik */
    overflow: auto;
    width: 400px;
    min-width: 400px; /* Sabit minimum genişlik */
    flex: none; /* flex büyüme/küçülmeyi engelle */
}


.variant-details-features-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.variant-details-features-wrapper .material-features-container {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 400px;
}

.variant-details-features-wrapper .material-features-main {
    height: 100%;
    gap: 0;
}

.variant-section-content {
    background: transparent;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 12px;
    padding: 16px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    z-index: 1;
}

@media screen and (max-width: 992px) {
    .variant-content-wrapper {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .documents-section {
        width: 100%;
        min-width: 100%;
        height: auto;
        max-height: 400px;
    }

    .variant-content {
        width: 100%;
        min-width: 100%;
    }
}


.vrnt-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    height: calc(100vh - 80px);
    position: relative;
    z-index: 1;
}

.vrnt-wrapper {
    height: 100%;
    overflow: hidden;
}

.vrnt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

.vrnt-header h1 {
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.vrnt-content-wrapper {
    display: flex;
    height: calc(100% - 60px);
    width: 100%;
    overflow: hidden;
}

.vrnt-content {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.vrnt-tabs-wrapper {
    background: #f8fafc;
    border-radius: 12px;
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.vrnt-tabs-wrapper .ant-tabs {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

.vrnt-tabs-wrapper .ant-tabs-nav {
    width: 100% !important;
    background: #fff !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    padding: 4px 4px 0 4px !important; /* Üst navigation padding'i azalt */
    border-bottom: 1px solid #f0f0f0 !important;
}

.vrnt-tabs-wrapper .ant-tabs-content-holder {
    flex: 1 !important;
    padding: 4px !important; /* 8px'ten 4px'e düşürüldü */
    overflow: auto !important;
}

.vrnt-tab-section {
    height: 100%;
    padding: 4px !important; /* 8px'ten 4px'e düşürüldü */
    overflow: auto;
}

.vrnt-tabs-wrapper .ant-tabs-content {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: 100% !important;
}

/* Section içeriği için padding düzenlemesi */
.section-content {
    padding: 0 !important; /* Fazla padding'i kaldır */
    margin: 0 !important;
    height: 100%;
}

/* Features tab için özel düzenleme */
.vrnt-features {
    padding: 0 !important;
}

/* Material kartları ve features için padding düzenlemeleri */
.material-features-container,
.material-description-container {
    padding: 4px !important; /* Ekstra padding'leri azalt */
}

.material-features-main {
    gap: 4px !important; /* Gap'i azalt */
}

/* Features panel için düzenlemeler */
.features-panel {
    padding: 4px !important;
    margin: 0 !important;
}

/* Responsive styles */
@media screen and (max-width: 992px) {
    .vrnt-content-wrapper {
        flex-direction: column;
        height: auto;
    }

    .vrnt-content {
        width: 100%;
    }
}

/* Features tab için özel stiller */
.vrnt-features {
    background: transparent !important;
    padding: 0 !important;
}

.vrnt-features-content {
    height: 100%;
}

.vrnt-features-content .material-features-container {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.vrnt-features-content .panel-header,
.vrnt-features-content .ant-divider {
    display: none !important;
}

.vrnt-features-content .material-features-main {
    background: transparent !important;
    padding: 0 !important;
}

.vrnt-features-content .material-features-table {
    margin-top: 0 !important;
}

/* Table stilleri */
.vrnt-features-content .ant-table {
    background: transparent !important;
}

.vrnt-features-content .ant-table-thead > tr > th {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* MaterialFeatures tab için özel stiller */
.vrnt-features {
    padding: 0 !important;
    background: transparent !important;
}

.vrnt-features .material-features-container {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.vrnt-features .material-features-main {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.vrnt-features .ant-table {
    background: transparent !important;
    margin: 0 !important;
}

.vrnt-features .ant-table-thead > tr > th {
    background: #fafafa !important;
    padding: 8px !important;
}

.vrnt-features .ant-divider,
.vrnt-features .panel-header {
    display: none !important;
}

/* Features tab için edit button stilleri */
.vrnt-features .material-features-edit-button {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
}

.vrnt-features {
    position: relative !important; /* Edit button için pozisyon referansı */
    padding-top: 32px !important; /* Edit button için yer aç */
}

/* Panel header'ı göster ama sadece edit button için */
.vrnt-features .panel-header {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    border: none !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    background: transparent !important;
}

/* Panel header içindeki başlığı gizle */
.vrnt-features .panel-header h3 {
    display: none !important;
}

/* ...rest of the code... */

/* Tab content padding ve boşluk düzenlemeleri */
.vrnt-tabs-wrapper .ant-tabs-nav {
    width: 100% !important;
    background: #fff !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    padding: 0 4px !important; /* Üst padding'i kaldırdık */
    border-bottom: 1px solid #f0f0f0 !important;
    min-height: 36px !important; /* Tab yüksekliğini azalttık */
}

.vrnt-tabs-wrapper .ant-tabs-tab {
    margin: 0 4px !important;
    padding: 4px 16px !important; /* Tab padding'ini azalttık */
    height: 32px !important; /* Tab yüksekliğini azalttık */
    line-height: 32px !important;
}

.vrnt-tabs-wrapper .ant-tabs-content-holder {
    padding: 8px 4px 4px 4px !important; /* Üst padding biraz daha fazla, diğerleri minimum */
}

/* Tab nav bar ve content için padding düzenlemeleri */
.vrnt-tabs-wrapper .ant-tabs-nav {
    min-height: 32px !important; /* Tab nav yüksekliğini küçült */
    padding: 0 !important; /* Tüm padding'i kaldır */
    margin: 0 !important;
}

.vrnt-tabs-wrapper .ant-tabs-content-holder {
    padding: 0 !important; /* Content holder padding'i kaldır */
}

.vrnt-tab-section {
    padding: 0 !important; /* Tab section padding'i kaldır */
}

.vrnt-features {
    padding: 0 !important;
    margin-top: 0 !important; /* Üst boşluğu kaldır */
}

.vrnt-features .material-features-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Edit button pozisyonu düzenleme */
.vrnt-features .panel-header {
    margin: 4px 0 !important; /* Sadece minimal margin */
    padding: 0 4px !important; /* Minimal padding */
}

/* ...rest of the code... */




.variant-details-tour-tooltip {
  max-width: 400px;
}

.variant-details-tour-helper-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Override default Joyride styles */
.react-joyride__spotlight {
  border-radius: 8px;
}

.react-joyride__overlay {
  background-color: rgba(0, 0, 0, 0.7);
}
:root {
    --header-height: 64px;
    --breadcrumb-height: 32px;
    --page-padding: 24px;
    --filter-section-height: 56px;
    --search-section-height: 56px;
    --tabs-header-height: 46px;
    --content-padding: 16px;
    --total-padding: 48px;
}

.product-list-container {
    position: relative;
    height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
    padding: var(--page-padding);
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 16px;
}

.product-list-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.product-list-content {
    flex: 1;
    background: #ffffff;
    padding: var(--content-padding);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.forum-container {
  padding: 20px;
}

.message-list {
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.message-input {
  display: flex;
  flex-direction: column;
}

.tab-content-scroll {
  height: calc(87vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding-right: 8px;
}

/* Add custom scrollbar styles */
.tab-content-scroll::-webkit-scrollbar {
  width: 6px;
}

.tab-content-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.tab-content-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.tab-content-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Add styles for nested tables */
.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper {
  max-height: none !important;
  overflow: visible !important;
  margin: 2px 0 !important; 
  position: relative !important;
}

/* Style for nested table scrollbars */
.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ensure expanded rows have proper padding and margins */
.ant-table-expanded-row > td {
  padding: 0px 2px !important;  /* Reduced from 12px 16px */
  background: #fafafa;
}

/* Fix nested table container */
.ant-table-wrapper .ant-table-expanded-row-fixed {
  width: 100% !important;
  margin:  0 !important;  /* Reduced from 12px */
  padding: 0 !important;
}

/* Ensure inner table content is scrollable */
.ant-table-wrapper .ant-table-expanded-row .ant-table-content,
.ant-table-wrapper .ant-table-expanded-row .ant-table-body {
  overflow: visible !important;
  max-height: none !important;
}

/* Remove any max-height constraints from nested tables */
.ant-table-wrapper .ant-table-expanded-row {
  max-height: none !important;
}

/* Main scrollable container */
.tab-scrollable-content {
  height: calc(87vh - 180px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for main container */
.tab-scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.tab-scrollable-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.tab-scrollable-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.tab-scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Remove all nested table scrolling */
.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper,
.ant-table-wrapper .ant-table-expanded-row .ant-table-content,
.ant-table-wrapper .ant-table-expanded-row .ant-table-body,
.ant-table-wrapper .ant-table-expanded-row-fixed {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* Ensure proper spacing for expanded rows */
.ant-table-expanded-row > td {
  padding: 0 !important;  /* Reduced from 12px 16px */
  background: #fafafa;
}

/* Fix nested table styling and spacing */
.ant-table-wrapper .ant-table-expanded-row .ant-table-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #fafafa !important;
}

.ant-table-wrapper .ant-table-expanded-row .ant-table-thead > tr > th {
  background: #fafafa !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.ant-table-wrapper .ant-table-expanded-row .ant-table-wrapper .ant-table {
  margin: 2px 0 !important;  /* Reduced from 8px */
}

/* Additional fixes for header alignment */
.ant-table-container {
  position: relative !important;
}

.ant-table-header {
  overflow: visible !important;
}

.search-section {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.filter-panel {
    margin-top: 16px;
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* Add any other necessary styles */
.tour-helper-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background-color: #474168;
  border-color: #474168;
}

.tour-helper-button:hover,
.tour-helper-button:focus {
  background-color: #5d5685;
  border-color: #5d5685;
}

.joyride-tooltip .tour-content {
  margin-bottom: 8px;
  color: #474168;
}

.joyride-button-next {
  background-color: #474168;
  border-color: #474168;
}

.joyride-button-next:hover,
.joyride-button-next:focus {
  background-color: #5d5685 !important;
  border-color: #5d5685 !important;
}

.joyride-button-back {
  color: #474168;
  border-color: #474168;
}

.joyride-button-back:hover,
.joyride-button-back:focus {
  color: #5d5685;
  border-color: #5d5685;
}
.product-table-conteiner {
    flex-grow: 1;
    overflow-y: auto !important; /* Force vertical scrolling */
    overflow-x: hidden;
    padding-bottom: 5px;
    height: 250px; /* Ensure height is set */
}

/* Height arrangement according to screen height */
@media (max-height: 344px) {
    .product-table-conteiner {
        height: 18px;
        margin-bottom: -17px;
    }
}

@media (min-height: 345px) and (max-height: 360px) {
    .product-table-conteiner {
        height: 23px;
        margin-bottom: -17px;
    }
}

@media (min-height: 361px) and (max-height: 377px) {
    .product-table-conteiner {
        height: 35px;
        margin-bottom: -19px;
    }
}

@media (min-height: 377px) and (max-height: 391px) {
    .product-table-conteiner {
        height: 30px;
        margin-bottom: -20px;
    }
}

@media (min-height: 392px) and (max-height: 414px) {
    .product-table-conteiner {
        height: 30px;
        margin-bottom: -12px;
    }
}

@media (min-height: 415px) and (max-height: 430px) {
    .product-table-conteiner {
        height: 45px;
        margin-bottom: -16px;
    }
}

@media (min-height: 431px) and (max-height: 541px) and (max-width: 721px) {
    .product-table-conteiner {
        max-height: 150px;
        margin-bottom: -15px;
    }
}

@media (min-height: 542px) and (max-height: 601px) and (min-width: 1024px) and (max-width: 1025px) {
    .product-table-conteiner {
        height: 210px;
        margin-bottom: -15px;
    }
}

@media (min-height: 602px) and (max-height: 608px) {
    .product-table-conteiner {
        max-height: 200px;
        margin-bottom: -13px;
    }
}

@media (min-height: 609px) and (max-height: 668px) and (max-width: 376px) {
    .product-table-conteiner {
        max-height: 120px;
    }
}

@media (min-height: 609px) and (max-height: 668px) and (max-width: 1281px) {
    .product-table-conteiner {
        height: 260px;
        margin-bottom: -13px;
    }
}

@media (min-height: 669px) and (max-height: 675px) {
    .product-table-conteiner {
        height: 320px;
        margin-bottom: -15px;
    }
}

@media (min-height: 676px) and (max-height: 741px) {
    .product-table-conteiner {
        height: 190px;
        margin-bottom: -15px;
    }
}

@media (min-height: 742px) and (max-height: 769px) {
    .product-table-conteiner {
        height: 375px;
        margin-bottom: -15px;
    }
}

@media (min-height: 770px) and (max-height: 801px) {
    .product-table-conteiner {
        height: 400px;
        margin-bottom: -10px;
    }
}

@media (min-height: 802px) and (max-height: 821px) {
    .product-table-conteiner {
        height: 420px;
        margin-bottom: -10px;
    }
}

@media (min-height: 822px) and (max-height: 845px) {
    .product-table-conteiner {
        height: 295px;
        margin-bottom: -13px;
    }
}

@media (min-height: 846px) and (max-height: 854px) {
    .product-table-conteiner {
        height: 455px;
        margin-bottom: -13px;
    }
}

@media (min-height: 855px) and (max-height: 897px) {
    .product-table-conteiner {
        height: 350px;
        margin-bottom: -15px;
    }
}

@media (min-height: 855px) and (max-height: 897px) and (max-width: 345px) {
    .product-table-conteiner {
        height: 330px;
        margin-bottom: -9px;
    }
}

@media (min-height: 898px) and (max-height: 913px) {
    .product-table-conteiner {
        height: 520px;
        margin-bottom: -14px;
    }
}

@media (min-height: 914px) and (max-height: 916px) {
    .product-table-conteiner {
        height: 365px;
        margin-bottom: -14px;
    }
}

@media (min-height: 917px) and (max-height: 933px) {
    .product-table-conteiner {
        height: 380px;
        margin-bottom: -12px;
    }
}

@media (min-height: 934px) and (max-height: 1025px) {
    .product-table-conteiner {
        height: 630px;
        margin-bottom: -15px;
    }
}

@media (min-height: 1026px) and (max-height: 1181px) {
    .product-table-conteiner {
        height: 780px;
        margin-bottom: -10px;
    }
}

@media (min-height: 1182px) and (max-height: 1281px) {
    .product-table-conteiner {
        height: 880px;
        margin-bottom: -10px;
    }
}

@media (min-height: 1282px) and (max-height: 1369px) {
    .product-table-conteiner {
        height: 970px;
        margin-bottom: -10px;
    }
}/* RequestsSection.css */

.requests-section-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.requests-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fafafa;
}

.requests-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.requests-section-info {
  color: #666;
  font-size: 14px;
}

.requests-section-add {
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fff;
}

.add-request-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.add-request-input {
  flex: 1;
  height: 40px;
}

.add-request-input .ant-select-selector {
  height: 40px !important;
  border-radius: 6px;
}

.add-request-input .ant-select-selection-search-input {
  height: 38px !important;
}

.add-request-button {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 500;
}

.requests-section-table {
  background-color: #fff;
}

.requests-table .ant-table-thead > tr > th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e8e8e8;
}

.requests-table .ant-table-tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.requests-table .ant-table-tbody > tr > td:first-child {
  text-align: center;
  padding: 12px 8px;
}

.requests-table .ant-table-tbody > tr:hover > td {
  background-color: #f9f9f9;
}

.request-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.request-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #1890ff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

/* Responsive design */
@media (max-width: 768px) {
  .requests-section-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .add-request-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .add-request-input,
  .add-request-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .requests-section-header {
    padding: 16px 20px;
  }
  
  .requests-section-add {
    padding: 16px 20px;
  }
}
/* Summary Wrapper */
.summary-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Summary Header */
.summary-header {
    text-align: center;
    margin-bottom: 32px;
}

.summary-title {
    color: #1f2937 !important;
    margin-bottom: 8px !important;
}

.summary-subtitle {
    font-size: 16px;
    color: #6b7280 !important;
}

/* Summary Content */
.summary-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Summary Cards */
.summary-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    height: 400px;
    display: flex;
    flex-direction: column;
}

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

.summary-card .ant-card-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Statistics card - shorter height */
.summary-card.summary-stats {
    height: 200px;
}

.summary-card.summary-stats .ant-card-body {
    overflow: visible;
}

.summary-card .ant-card-head {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 11px 11px 0 0;
}

.summary-card .ant-card-head-title {
    color: #374151;
    font-weight: 600;
    font-size: 16px;
}

.summary-card .ant-card-body {
    padding: 24px;
}

/* Summary Rows */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-label {
    color: #374151 !important;
    font-weight: 500 !important;
    min-width: 150px;
    margin-right: 16px;
}

.summary-value {
    color: #1f2937 !important;
    text-align: right;
    flex: 1;
}

/* Selected Products Summary */
.selected-products-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.product-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.product-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

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

.product-info {
    flex: 1;
}

.product-name {
    display: block;
    color: #1f2937 !important;
    font-size: 16px;
    margin-bottom: 4px;
}

.product-code {
    color: #6b7280 !important;
    font-size: 14px;
}

.product-categories {
    margin-top: 8px;
}

.categories-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.category-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 0;
    font-weight: 500;
}

.overflow-tag {
    cursor: pointer;
}

.overflow-tag:hover {
    opacity: 0.8;
}

.product-image-small {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.product-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Global Steps */
.summary-stats .ant-card-body {
    padding: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 24px;
}

.stat-item {
    text-align: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #1e40af !important;
    margin-bottom: 4px;
}

.stat-label {
    color: #6b7280 !important;
    font-size: 14px;
}

/* Global Steps */
.global-steps {
    padding: 8px 0;
}

.global-steps .steps-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

.step-tag-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.step-order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #1e40af;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-tag {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 12px;
    font-weight: 500;
    margin: 0;
}

/* Empty State */
.ant-empty {
    margin: 32px 0;
}

.ant-empty-description {
    color: #6b7280;
}

/* TreeViewTable Styles - Birebir DevelopmentRequests.css'den */
.tree-view-table {
    padding: 8px 0;
    width: 100%;
    border: 1px solid rgba(140, 140, 140, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.tree-company-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.tree-company-row:hover {
    background-color: #f0f0f0;
}

.tree-company-row .company-name {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
    margin-left: 8px;
    flex: 1;
}

.tree-company-row .company-toggle {
    font-size: 18px;
    color: #6b7280;
}

.tree-company-content {
    display: flex;
    flex-direction: column;
}

/* Expanded row styles */
.tree-expanded-row {
  padding: 8px 0;
  width: 100%;
}

/* Make both columns equal width and fixed height */
.tree-products-steps-container {
  display: flex;
  gap: 16px;
  padding: 0 8px;
  width: 100%;
  overflow: visible !important;
}

.tree-products-panel,
.tree-steps-panel {
  flex: 1;
  min-width: 0;
  margin: 0 4px;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

/* Fixed height content for products and steps sections */
.tree-fixed-height-content {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 250px !important;
  position: relative;
  border-radius: 8px;
  overflow: hidden !important;
}

/* Card content styling */
.tree-card-content {
  background: #f5f5f5;
  border-radius: 8px;
  border: 2px solid #f9c4ac;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative !important;
  height: 250px !important;
  max-height: 250px !important;
  min-height: 250px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Section headers */
.tree-section-header {
  font-weight: bold;
  margin-bottom: 8px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555;
}

.tree-section-header .anticon {
  color: #f9c4ac;
  font-size: 16px;
}

/* Scrollable inner container */
.tree-scrollable-inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

/* Scrollbar styles */
.tree-scrollable-inner::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
  background: #f0f0f0;
}

.tree-scrollable-inner::-webkit-scrollbar-track {
  background: #e0e0e0 !important;
  border-radius: 4px !important;
  margin: 4px 0 !important;
  border: 1px solid #d0d0d0 !important;
}

.tree-scrollable-inner::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 4px !important;
  border: none !important;
  min-height: 50px !important;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2) !important;
}

.tree-scrollable-inner::-webkit-scrollbar-thumb:hover {
  background: #777 !important;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
}

/* Firefox specific scrollbar styling */
@-moz-document url-prefix() {
  .tree-scrollable-inner {
    scrollbar-width: auto !important;
    scrollbar-color: #999 #e0e0e0 !important;
  }
}

/* Internet Explorer scrollbars */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .tree-scrollable-inner {
    -ms-overflow-style: scrollbar !important;
  }
}

/* Product item styling */
.product-card {
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 5px;
  animation: fadeIn 0.3s;
  margin-bottom: 6px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
  display: flex !important;
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background-color: white;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.product-card:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

@keyframes fadeIn {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

.product-card:last-child {
  border-bottom: none;
}

.product-card.selected {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

.product-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  overflow: hidden;
}

.product-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-info {
  flex: 1;
  margin-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-info div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-name {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  margin-bottom: 2px;
}

.product-card-code {
  font-size: 12px;
  color: #6b7280;
}

.product-card-actions {
  margin-left: auto;
  flex-shrink: 0;
}

/* Steps list styling */
.steps-list {
  display: flex;
  flex-direction: column;
}

.step-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 5px;
  animation: fadeIn 0.3s;
  margin-bottom: 6px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background-color: white;
}

.step-item:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

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

.step-name {
  display: flex;
  align-items: center;
  flex: 1;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f9c4ac;
  color: white;
  font-size: 12px;
  margin-right: 12px;
  flex-shrink: 0;
}

.step-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.steps-title {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
}

.steps-add-container {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
    gap: 8px; /* Add consistent spacing between items */
}
.steps-add-input {
    flex: 0 1 250px; /* Set a fixed width but allow shrinking */
    margin-right: 8px;
    max-width: 65%; /* Ensure it doesn't take up too much space */
}

/* Enhanced input styling */
.steps-add-input .ant-input {
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 0 8px;
    transition: all 0.3s;
}

.steps-add-input .ant-input:hover,
.steps-add-input .ant-input:focus {
    border-color: #f9c4ac;
    box-shadow: 0 0 0 2px rgba(249, 196, 172, 0.2);
}

/* Responsive adjustment for smaller screens */
@media (max-width: 576px) {
    .steps-add-input {
        flex: 0 1 180px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .summary-wrapper {
        padding: 0 8px;
    }
    
    .summary-content {
        gap: 16px;
    }
    
    .summary-card .ant-card-body {
        padding: 16px;
    }
    
    .summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .summary-label {
        min-width: unset;
        margin-right: 0;
    }
    
    .summary-value {
        text-align: left;
    }
    
    .product-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .product-image-small {
        align-self: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .step-tag-container {
        gap: 6px;
    }
    
    .tree-products-steps-container {
        flex-direction: column;
    }
    
    .tree-products-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        max-height: 200px;
    }
    
    .tree-steps-panel {
        width: 100%;
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .summary-header {
        margin-bottom: 24px;
    }
    
    .summary-title {
        font-size: 24px !important;
    }
    
    .summary-subtitle {
        font-size: 14px;
    }
    
    .company-products-group {
        padding: 12px;
    }
    
    .product-item {
        padding: 12px;
    }
    
    .steps-tags {
        gap: 4px;
    }
    
    .step-tag {
        font-size: 11px;
        padding: 1px 6px;
    }
}

/* Detailed Planning Tree Styles */
.detailed-planning-tree {
    padding: 16px 0;
}

.detailed-planning-tree .ant-tree {
    background: transparent;
}

.detailed-planning-tree .ant-tree-node-content-wrapper {
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.detailed-planning-tree .ant-tree-node-content-wrapper:hover {
    background-color: #f0f2f5;
}

.detailed-planning-tree .ant-tree-node-selected .ant-tree-node-content-wrapper {
    background-color: #e6f7ff;
}

.detailed-planning-tree .ant-tree-treenode {
    margin-bottom: 8px;
}

.detailed-planning-tree .ant-tree-child-tree {
    margin-left: 24px;
}

.detailed-planning-tree .ant-tree-switcher {
    background: transparent;
}

.detailed-planning-tree .ant-tree-switcher-icon {
    color: #1890ff;
}.product-list-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
}

.product-list-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* New centered form container */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

/* Form sections with clean styling */
.form-section {
    background-color: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
}

/* Input group styling */
.input-group {
    margin-bottom: 16px;
}

.input-group:last-child {
    margin-bottom: 0;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.input-group .ant-input,
.input-group .ant-select,
.input-group .ant-tree-select {
    width: 100%;
}

/* Radio group styling */
.radio-group {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.radio-group .ant-radio-wrapper {
    display: flex;
    align-items: flex-start;
    margin-right: 0;
}

.radio-group .ant-radio-wrapper .ant-radio {
    margin-top: 2px;
}

.radio-option-content {
    margin-left: 8px;
}

.radio-option-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.radio-option-description {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Action button container */
.action-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

/* Section titles */
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #7cb305;
}

/* Error message styling */
.error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Warning text styling */
.warning-text {
    font-size: 12px;
    color: #ff4d4f;
    margin-left: 8px;
    font-weight: 500;
}

.product-list-content {
    flex: 1;
}

/* Remove all overflow settings from other classes */
.product-list-content {
    flex-grow: 1;
    height: calc(100vh - 250px); /* Ekran yüksekliğinden başlık ve butonları çıkar */
}

@media (min-width: 576px) {
    .product-list-header {
        flex-direction: row;
        align-items: center;
    }
}

/* Responsive table behavior */
@media (max-width: 576px) {
    .product-selection-table-container {
        max-height: 200px; /* Adjust table height for smaller screens */
    }
}

/*
.product-list-content {
flex: 1;
overflow-y: auto; 
overflow-x: hidden; 
}*/

.pagination-step-navigation {
    display: flex;
    justify-content: space-between; /* Sayfalama ve ileri/geri butonlarını yana yerleştirir */
    padding: 16px 0;
}

.product-development-container {
    display: flex;
    flex-direction: column;
    height: 87vh;
    padding-left: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.step-content {
    flex: 1;
    overflow-y: auto; /* Dikey scroll */
    overflow-x: hidden; /* Yatay scroll'u gizle */
    padding: 16px;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.step-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    max-width: 800px;
    margin: 20px auto 0;
    padding: 16px 24px;
    background-color: transparent;
    border-top: none;
    border-radius: 0;
    position: sticky;
    bottom: 0;
    z-index: 998;
    box-shadow: none;
}

.ant-table {
    width: 100%; /* Ensures the table takes up the full width */
}

.ant-table-cell {
    white-space: nowrap; /* Keeps the table cells from breaking text into multiple lines */
}

/* Tüm TreeView node'larındaki hover ve focus durumlarını kapatma */
.ant-tree-node-content-wrapper {
    transition: none; /* Geçiş efektini kaldırır */
    background-color: transparent !important; /* Arka plan rengini kaldırır */
}

/*Tree de Hover durumunda renk değişikliğini kaldırmak */
.ant-tree-node-content-wrapper:hover {
    background-color: transparent !important; /* Hover durumunda arka planı devre dışı bırakır */
}

/*Tree de Seçili durumdaki renk değişikliğini kaldırmak */
.ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: transparent !important; /* Seçili durumda arka planı devre dışı bırakır */
}

#scrollableDiv {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: auto;
    padding: 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

#scrollableDiv::-webkit-scrollbar {
    width: 6px;
}

#scrollableDiv::-webkit-scrollbar-track {
    background: transparent;
}

#scrollableDiv::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Responsive styles */
@media (max-width: 768px) {
  .form-container {
    max-width: 100%;
    padding: 0 16px;
  }
  
  .form-section {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .radio-group {
    flex-direction: column;
    gap: 16px;
  }
  
  .step-navigation {
    max-width: 100%;
    padding: 12px 16px;
    margin: 16px 0 0;
  }
  
  .section-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .form-section {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .action-button-container {
    flex-direction: column;
    gap: 8px;
  }
  
  .action-button-container .ant-btn {
    width: 100%;
  }
}

/* Enhance focus states */
.form-section .ant-input:focus,
.form-section .ant-select:focus,
.form-section .ant-tree-select:focus {
  border-color: #7cb305;
  box-shadow: 0 0 0 2px rgba(124, 179, 5, 0.2);
}

/* Improve radio button spacing */
.radio-group .ant-radio-wrapper {
  padding: 12px 16px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.radio-group .ant-radio-wrapper:hover {
  border-color: #7cb305;
  background-color: #f6ffed;
}

.radio-group .ant-radio-wrapper.ant-radio-wrapper-checked {
  border-color: #7cb305;
  background-color: #f6ffed;
}

/* Enhance steps styling */
.form-container .ant-steps {
  margin-bottom: 32px;
}

.form-container .ant-steps .ant-steps-item-process .ant-steps-item-icon {
  background-color: #7cb305;
  border-color: #7cb305;
}

.form-container .ant-steps .ant-steps-item-finish .ant-steps-item-icon {
  background-color: #7cb305;
  border-color: #7cb305;
}

/* Sticky Steps styling */
.sticky-steps-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sticky-steps-container .ant-steps {
    margin: 0;
}

/* Custom Product Selection Styling */
.product-selection-container {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;
}

.product-selection-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.product-selection-info {
    font-size: 12px;
    color: #666;
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
}

.product-selection-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.product-selection-filters .ant-input,
.product-selection-filters .ant-select,
.product-selection-filters .tag-search-container {
    min-width: 200px;
}

.tag-search-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag-search-container .ant-select,
.tag-search-container .ant-input {
    min-width: 200px;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.selected-tags .ant-tag {
    margin: 0;
}


.product-selection-table .ant-table {
    margin: 0;
}

.product-selection-table .ant-table-thead > tr > th {
    background-color: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 600;
    color: #333;
}

.product-selection-table .ant-table-tbody > tr > td {
    border-bottom: 1px solid #f0f0f0;
}

/* Fix table cell image overflow */
.product-selection-table .ant-table-tbody > tr > td:first-child {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    width: 70px;
    max-width: 70px;
    overflow: hidden;
}

.product-selection-table .ant-table-thead > tr > th:first-child {
    padding: 8px;
    text-align: center;
    width: 70px;
    max-width: 70px;
}

.product-selection-table .ant-table-tbody > tr:hover > td {
    background-color: #f6ffed;
}

.product-selection-table .ant-table-tbody > tr.ant-table-row-selected > td {
    background-color: #e6f7ff;
}

.product-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.product-image-placeholder {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.product-image-fallback {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #999;
    flex-shrink: 0;
}

.product-code {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #666;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
}

.product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    align-items: center;
}

.product-selection-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e8e8e8;
}

.product-selection-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.product-selection-empty .ant-empty-description {
    color: #666;
    font-size: 14px;
}

/* Loading state */
.product-selection-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-selection-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .product-selection-filters .ant-input,
    .product-selection-filters .ant-select,
    .product-selection-filters .tag-search-container {
        min-width: 100%;
    }
    
    .tag-search-container .ant-select,
    .tag-search-container .ant-input {
        min-width: 100%;
    }
    
    .product-selection-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}
/* Basic component styles - first definition */
.mscm-comments-section {
  margin-top: 5px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 0; /* Reduce padding */
}

/* Scrollable area for comments - Updated for dynamic height calculation */
.mscm-comments-scrollable-area {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 5px;
  scrollbar-width: thin;
  /* Remove fixed height - will be set dynamically via JavaScript */
  height: auto;
  min-height: 100px; /* Minimum fallback height */
}

.mscm-comments-scrollable-area::-webkit-scrollbar {
  width: 6px;
}

.mscm-comments-scrollable-area::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.mscm-comments-scrollable-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

/* WhatsApp-like container structure */
.mscm-whatsapp-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Fixed input container - Updated for more reliable positioning */
.mscm-fixed-input-container {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1px solid #e0e0e0;
  padding: 5px;
  z-index: 20;
  height: auto; /* Changed from fixed height to auto */
  min-height: 45px; /* Use min-height instead */
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
}

/* Comment styles updated */
.mscm-comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
}

.mscm-comment:first-child {
  margin-top: 0;
}

.mscm-comment-no-divider {
  border-top: none;
  padding-top: 8px;
}

.mscm-comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.mscm-comment-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.mscm-author {
  font-weight: bold;
  font-size: 14px;
}

.mscm-datetime {
  color: #888;
  font-size: 12px;
}

/* Comment content with reduced line height */
.mscm-comment-content {
  margin-left: 40px;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.2; /* Further reduced from 1.4 to 1.2 */
  margin-bottom: 5px; /* Add zero margin bottom */
}

/* Action buttons */
.mscm-action-buttons {
  display: flex;
  margin-top: 2px; /* Further reduced from 5px to 2px */
  margin-left: 40px;
  gap: 4px; /* Further reduced from 6px to 4px */
}

.mscm-translate-button,
.mscm-action-buttons button {
  padding: 0 8px;
  height: 28px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

/* Comment input section - updated for compact layout */
.mscm-comment-input-section {
  display: flex;
  align-items: center;
  padding: 4px;
  min-height: 36px; /* Reduced height */
  background-color: #f0f0f0;
  border-radius: 18px;
  height: auto; /* Changed from 100% to auto for proper sizing */
}

.mscm-comment-input-wrapper {
  flex: 1;
  position: relative;
  margin-right: 6px; /* Slightly reduced */
  background-color: white;
  border: none;
  border-radius: 16px;
  padding: 5px 8px;
  max-height: 60px; /* Increased from 36px to ensure content visibility */
  min-height: 24px; /* Add min-height to ensure consistent appearance */
  height: auto;
  overflow-y: auto;
}

/* WhatsApp-style button layout */
.mscm-whatsapp-buttons {
  display: flex;
  align-items: center;
  gap: 4px; /* Reduced gap */
}

/* Circle buttons for WhatsApp style - smaller size */
.mscm-circle-button {
  width: 32px !important; /* Reduced from 36px */
  height: 32px !important; /* Reduced from 36px */
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important; /* Reduced from 16px */
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Override .mscm-ai-button to reduce height conflict from duplicate styles */
.mscm-ai-button {
  margin-bottom: 0px; /* Remove bottom margin */
  background-color: #f0f0f0 !important;
  color: #722ed1 !important;
}

.mscm-ai-button:hover {
  background-color: #e0e0e0 !important;
}

.mscm-attachment-button {
  background-color: #f0f0f0 !important;
}

.mscm-attachment-button:hover {
  background-color: #e0e0e0 !important;
}

.mscm-send-button {
  background-color: #128c7e !important; /* WhatsApp green */
  border-color: #128c7e !important;
}

.mscm-send-button:hover {
  background-color: #075e54 !important;
  border-color: #075e54 !important;
}

/* Tag container */
.mscm-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px; /* Reduced from 8px */
}

/* Basic component styles */
.mscm-comments-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mscm-comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  padding: 10px;
  background-color:#f0f2f5;
  border-radius: 8px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-bottom: 16px;
}

.mscm-comment:first-child {
  margin-top: 0;
}

.mscm-comment-no-divider {
  border-top: none;
  padding-top: 8px;
}

.mscm-comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding-left: 10px;
}

.mscm-comment-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.mscm-author {
  font-weight: bold;
}

.mscm-datetime {
  color: #888;
  font-size: 12px;
}

.mscm-comment-content {
  margin-left: 40px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Comment input section - updated layout */
.mscm-comment-input-section {
  display: flex;
  align-items: flex-start;
  margin-top: 5px;
  padding: 8px;
  min-height: 52px;
}

.mscm-comment-input-wrapper {
  flex: 1;
  position: relative;
  margin-right: 10px;
  background-color: #ffffff;
  display: flex;
  border: 1px solid #d9d9d9;
  min-height: 75px;
  padding: 3px;
  max-height: 75px;
  height: 75px;
  overflow-y: auto;
}

/* New buttons container with vertical layout */
.mscm-buttons-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 75px; /* Same height as input wrapper */
}

/* AI Generate button */
.mscm-ai-button {
  margin-bottom: 3px;
  height: 36px;
}

/* Comment/Send button */
.mscm-comment-button {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
}

/* Tag styles */
.mscm-tag {
  margin-bottom: 5px;
}

/* Comment attachments */
.mscm-comment-attachments {
  display: flex;
  align-items: center;
  position: absolute;
  right: 6px; /* Reduced from 8px */
  bottom: 6px; /* Reduced from 8px */
}

.mscm-upload-icon {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: normal;
  padding: 0;
  border: none;
  background: none;
}

.mscm-upload-icon .anticon-paper-clip {
  font-size: 16px;
  color: gray;
}

.mscm-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mscm-attachment {
  cursor: pointer;
}

.mscm-attachment-img {
  width: 50px;
  height: 50px;
}

/* Action buttons */
.mscm-comment-actions {
  margin-top: 4px;
}

.mscm-action-button {
  padding: 0 8px;
  color: #6c757d;
  font-size: 12px;
  height: 24px;
}

.mscm-action-button:hover {
  color: #722ed1; /* Changed from #0366d6 to purple theme color */
  background: rgba(114, 46, 209, 0.05);
}

.mscm-translate-button {
  margin-top: 4px;
  padding: 0 8px;
  color: #6c757d;
  font-size: 12px;
  height: 24px;
}

.mscm-translate-button:hover {
  color: #722ed1; /* Changed from #0366d6 to purple theme color */
  background: rgba(114, 46, 209, 0.05);
}

.mscm-ai-response-button {
  color: #6c757d;
}

.mscm-ai-response-button:hover {
  color: #722ed1;
  background: rgba(114, 46, 209, 0.05);
}

/* Translated text */
.mscm-translated-text {
  color: #333;
  padding: 1px 0; /* Further reduced from 2px 0 to 1px 0 */
  font-size: 13px; /* Reduced from 14px to 13px */
  border-left: 2px solid #722ed1; /* Changed from #1890ff to #722ed1 */
  padding-left: 4px; /* Further reduced from 6px to 4px */
  background-color: rgba(114, 46, 209, 0.05); /* Changed from rgba(24, 144, 255, 0.05) */
  word-break: break-word;
  margin: 0; /* Add zero margin */
  line-height: 1.2; /* Add compact line height */
}

/* Enhanced translated text styling */
.mscm-translated-content {
  position: relative;
  padding: 4px; /* Further reduced from 8px to 4px */
  border-radius: 4px; /* Further reduced from 5px to 4px */
  background-color: #f8f0ff; /* Changed from #f0f7ff to a light purple */
  border-left: 3px solid #722ed1; /* Changed from #1890ff to #722ed1 */
  margin: 2px 0; /* Further reduced from 4px 0 to 2px 0 */
  transition: all 0.3s ease;
}

.mscm-translation-header {
  display: flex;
  align-items: center;
  gap: 3px; /* Further reduced from 4px to 3px */
  font-size: 10px; /* Further reduced from 11px to 10px */
  color: #722ed1; /* Changed from #1890ff to #722ed1 */
  margin-bottom: 2px; /* Further reduced from 4px to 2px */
  font-weight: 500;
}

.mscm-translation-icon {
  display: flex;
  align-items: center;
  color: #722ed1; /* Changed from #1890ff to #722ed1 */
}

.mscm-translation-label {
  font-style: italic;
}

.mscm-translation-body {
  color: #333;
  line-height: 1.3; /* Reduced from 1.5 to 1.3 */
  font-size: 13px; /* Reduced from 14px to 13px */
  margin: 0; /* Add zero margin */
}

/* Animation for translation transition */
@keyframes translateFadeIn {
  from { 
    opacity: 0;
    transform: translateY(-5px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.mscm-translated {
  animation: translateFadeIn 0.3s ease-out;
}

/* Active translation button styling */
.mscm-translate-button.mscm-active-translation {
  color: #722ed1; /* Changed from #1890ff to #722ed1 */
  background-color: rgba(114, 46, 209, 0.1); /* Changed from #e6f7ff */
}

.mscm-translate-button.mscm-active-translation:hover {
  background-color: rgba(114, 46, 209, 0.2); /* Changed from #cce9ff */
}

/* No divider styles */
.mscm-no-divider {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Messaging mode styles */
.mscm-messaging-mode {
  padding: 0;
  margin: 0;
  border: none;
}

.mscm-messaging-mode .mscm-comment-input-section {
  padding: 14px 16px;
  border-top: 1px solid #e0e4e8;
  margin: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.mscm-messaging-mode .mscm-comment-input-wrapper {
  margin: 0;
  flex: 1;
  max-height: 60px;
}

.mscm-messaging-mode .mscm-buttons-container {
  height: 60px; /* Match the max-height of input wrapper in messaging mode */
}

.mscm-messaging-mode .mscm-comment-button {
  margin-left: 0; /* Remove left margin */
  height: 36px;
  padding: 0 16px;
  border-radius: 4px; /* Change from 24px to match other buttons */
}

.mscm-message-upload-button {
  margin-bottom: 3px;
}

.mscm-attachment-button {
  height: 36px;
  width: 36px;
  padding: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;
  border: none;
}

.mscm-attachment-button:hover {
  background-color: #e4e6eb;
}

.mscm-attachment-link {
  display: inline-block;
  padding: 8px 12px;
  background-color: #f0f2f5;
  border-radius: 8px;
  color: #1a73e8;
  text-decoration: none;
  margin-top: 8px;
}

/* Attachment preview modal */
.mscm-attachment-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

.mscm-preview-image {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.mscm-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background-color: #f0f2f5;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 16px;
}

.mscm-file-icon {
  font-size: 24px;
}

.mscm-modal-comment-input {
  width: 100%;
  margin-top: 16px;
}

/* AI Response modal */
.mscm-ai-response-modal .ant-modal-body {
  padding: 24px;
  max-height: calc(100vh - 180px);
  overflow-y: auto !important; /* Changed from 'hidden' to allow scrolling */
}

.mscm-ai-response-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mscm-ai-icon {
  font-size: 20px;
  color: #722ed1;
}

/* AI Loading animation */
.mscm-ai-response-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  height: 400px;
  z-index: 1100; /* Ensure loading is visible on top */
}

.mscm-ai-response-loading p {
  margin-top: 16px;
  color: #666;
  font-size: 16px;
}

.mscm-ai-loading-animation {
  width: 100px;
  height: 100px;
  position: relative;
  margin-bottom: 20px;
}

.mscm-ai-brain-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mscm-ai-brain {
  width: 80px;
  height: 80px;
  position: relative;
  border: 2px solid #722ed1;
  border-radius: 50%;
  animation: mscm-pulse 2s infinite;
}

.mscm-ai-brain-lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 40px;
  border-top: 2px solid #722ed1;
  border-bottom: 2px solid #722ed1;
  animation: mscm-brainLines 2s infinite;
}

.mscm-ai-brain-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #722ed1;
  border-radius: 50%;
  animation: mscm-brainPulse 2s infinite;
}

/* AI Response content */
.mscm-ai-response-content {
  height: 470px; /* Reduced from 500px */
}

.mscm-flex-container {
  display: flex;
  gap: 20px;
  height: calc(100% - 80px); /* Adjust to leave space for buttons */
}

/* Source container with button - fix position to ensure proper centering */
.mscm-source-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.mscm-source-button {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.mscm-target-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.mscm-language-header, .mscm-language-header-with-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  margin-bottom: 8px;
}

.mscm-language-header-with-select {
  justify-content: space-between;
}

.mscm-target-language-label {
  display: flex;
  align-items: center;
}

.mscm-loading-icon {
  margin-left: 10px;
}

.mscm-language-select {
  width: 240px;
}

.mscm-language-option {
  display: flex;
  justify-content: space-between;
}

.mscm-country-code {
  opacity: 0.6;
}

/* Standard size for textareas */
.mscm-source-textarea, 
.mscm-target-textarea {
  width: 100%;
  flex: 1;
  margin-bottom: 10px;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow-y: auto;
  resize: none;
  box-sizing: border-box !important;
  padding: 8px !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}

/* Additional class for taller textareas in generate mode */
.mscm-generate-mode .mscm-source-textarea,
.mscm-generate-mode .mscm-target-textarea {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

/* Additional class for taller textareas in generate mode - increased height */
.mscm-generate-mode .mscm-source-textarea,
.mscm-generate-mode .mscm-target-textarea {
  height: 380px !important; /* Increased from 320px to 380px */
  min-height: 380px !important; /* Increased from 320px to 380px */
  max-height: 380px !important; /* Increased from 320px to 380px */
}

/* Adjust content container height for generate mode */
.mscm-generate-mode.mscm-ai-response-content {
  height: 530px; /* Increased from 470px to accommodate larger textareas */
}

.mscm-target-button-container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

/* Combine both button containers into a single row with right alignment */
.mscm-refresh-button-container,
.mscm-action-buttons-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  width: auto; /* Change from 100% to auto */
  margin-bottom: 0; /* Remove bottom margin */
}

/* Create a new container for all buttons */
.mscm-modal-buttons-row {
  display: none; /* Hide this container as we've moved buttons to target area */
}

.mscm-refresh-button-container {
  margin-top: 10px; 
  display: flex;
  justify-content: center; /* Center the regenerate button */
  align-items: center;
  margin-bottom: 15px;
  width: 100%; /* Take full width to center properly */
}

.mscm-action-buttons-container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end; /* Right align buttons */
  align-items: center;
  gap: 10px;
  width: 100%; /* Full width */
}

/* Draft.js editor and mentions styling with mscm prefix */
.mscm-DraftEditor-root {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 4px 11px;
  min-height: 32px;
  position: relative;
  width: 100%;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.mscm-DraftEditor-editorContainer {
  min-height: 32px;
  position: relative;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.mscm-public-DraftEditor-content {
  min-height: 20px;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  transition: height 0.2s ease;
}

.mscm-public-DraftEditorPlaceholder-root {
  transition: all 0.2s ease;
  position: absolute;
  pointer-events: none;
  color: #9ca3af;
}

.mscm-mention {
  color: #722ed1; /* Changed from #1890ff to #722ed1 */
  text-decoration: none;
  background-color: rgba(114, 46, 209, 0.1); /* Changed from #e6f7ff */
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 500;
}

.mscm-mention:hover {
  color: #5b25a7; /* Darker variant of #722ed1, changed from #096dd9 */
  background-color: rgba(114, 46, 209, 0.2); /* Changed from #bae7ff */
  text-decoration: underline;
}

/* Mention plugin styles */
.mscm-mentionSuggestions {
  z-index: 1050 !important;
  margin-top: -8px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Animation keyframes */
@keyframes mscm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(114, 46, 209, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(114, 46, 209, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(114, 46, 209, 0);
  }
}

@keyframes mscm-brainLines {
  0% {
    width: 40px;
    height: 20px;
    opacity: 0.5;
  }
  50% {
    width: 60px;
    height: 40px;
    opacity: 1;
  }
  100% {
    width: 40px;
    height: 20px;
    opacity: 0.5;
  }
}

@keyframes mscm-brainPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
  }
}

/* Fix modal issues */
.mscm-modal-mask,
.mscm-modal-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.mscm-modal-wrap {
  overflow: auto;
  pointer-events: auto;
  outline: 0;
}

.mscm-modal-closed {
  pointer-events: auto !important;
  overflow: auto !important;
}

/* Quote styling based on ActionMessageBoxes approach */
.mscm-quote-container {
  margin: 1px 0; /* Further reduced from 2px 0 to 1px 0 */
  padding: 2px 4px; /* Further reduced from 4px to 2px 4px */
  background-color: #f5f5f5;
  border-left: 2px solid #722ed1; /* Changed from #1890ff to #722ed1 */
  border-radius: 0 2px 2px 0; /* Reduced from 3px to 2px */
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
  line-height: 1.1; /* Add compact line height */
}

.mscm-quote-header {
  display: flex;
  align-items: center;
  margin-bottom: 0; /* Remove bottom margin completely */
}

.mscm-quote-author {
  font-weight: 500;
  margin-left: 8px;
  color: #722ed1; /* Added purple theme color for quoted author names */
}

.mscm-quote-datetime {
  color: #888;
  margin-left: 8px;
  font-size: 12px;
}

.mscm-quote-content {
  color: #666;
  font-style: italic;
  max-height: 2.2em; /* Reduced from 3em to 2.2em */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.1; /* Add compact line height */
  font-size: 13px; /* Smaller font size */
}

/* Enhanced blockquotes with improved visibility and clickability */
.mscm-comments-section .mscm-quote,
.mscm-comments-section blockquote {
  margin: 0 !important;
  padding: 1px 4px !important; /* Further reduced from 2px 6px to 1px 4px */
  border-left: 2px solid #722ed1 !important; /* Changed from #1890ff to #722ed1 */
  background: #f8f0ff !important; /* Changed from #f0f7ff to light purple */
  color: #666 !important;
  font-style: italic !important;
  border-radius: 0 2px 2px 0 !important; /* Reduced from 3px to 2px */
  position: relative !important;
  cursor: pointer !important;
  max-width: 100% !important;
  overflow: hidden !important;
  transition: background-color 0.2s ease !important;
  font-size: 13px !important; /* Add smaller font size */
  line-height: 1.1 !important; /* Add compact line height */
}

.mscm-comments-section .mscm-quote:hover,
.mscm-comments-section blockquote:hover {
  background-color: rgba(114, 46, 209, 0.1) !important; /* Changed from #e6f7ff */
  border-left-color: #5b25a7 !important; /* Changed from #40a9ff to darker purple */
}

.mscm-comments-section .mscm-quote:after,
.mscm-comments-section blockquote:after {
  content: "\2191" !important; /* Up arrow */
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #722ed1 !important; /* Changed from #1890ff to #722ed1 */
  font-size: 14px !important;
  opacity: 0.7 !important;
}

.mscm-comments-section .mscm-quote:hover:after,
.mscm-comments-section blockquote:hover:after {
  opacity: 1 !important;
}

/* Highlight animation for quoted content - copied from ActionMessageBoxes */
@keyframes highlight {
  0% { background-color: #f0f2f5; }
  50% { background-color: rgba(114, 46, 209, 0.1); } /* Changed from #e6f7ff */
  100% { background-color: #f0f2f5; }
}

.mscm-highlight-comment {
  animation: highlight 2s ease;
}

/* Ensure modals have proper z-index */
.mscm-modal-mask,
.mscm-modal-wrap {
  z-index: 1050; /* Ensure higher than fixed input */
}

/* Fix for Messaging mode specific styles */
.mscm-messaging-mode .mscm-fixed-input-container {
  padding: 4px; /* Reduced padding */
  height: auto; /* Changed from 50px for flexibility */
  min-height: 45px;
}

.mscm-messaging-mode .mscm-comment-input-wrapper {
  max-height: 60px; /* Increased from 40px to ensure visibility */
  min-height: 24px;
}

/* Fix for comments being cut off at bottom */
.mscm-comment:last-child {
  margin-bottom: 6px; /* Reduced from 10px to 6px */
}

/* New styles for the AI response modal quoted message */
.mscm-ai-quoted-message {
  margin-bottom: 8px; /* Reduced from 12px to 8px */
  padding: 5px; /* Reduced from 8px to 5px */
  border-radius: 6px; /* Reduced from 8px to 6px */
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-left: 3px solid #722ed1; /* Changed from #1890ff to #722ed1 */
  position: relative;
}

.mscm-ai-quoted-message-header {
  display: flex;
  align-items: center;
  margin-bottom: 2px; /* Reduced from 4px to 2px */
}

.mscm-ai-quoted-message-info {
  display: flex;
  flex-direction: column;
  margin-left: 6px; /* Reduced from 8px to 6px */
}

.mscm-ai-quoted-author {
  font-weight: 500;
  font-size: 14px;
  color: #722ed1; /* Changed from #333 to #722ed1 for theme consistency */
}

.mscm-ai-quoted-datetime {
  font-size: 12px;
  color: #888;
}

.mscm-ai-quoted-message-content {
  max-height: 100px; /* Reduced from 120px to 100px */
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.3; /* Reduced from 1.4 to 1.3 */
  margin-left: 32px; /* Align with the author name */
  position: relative;
  padding-right: 6px; /* Reduced from 8px to 6px */
}

/* Add fade effect at the bottom for longer messages */
.mscm-ai-quoted-message-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1));
  pointer-events: none;
  opacity: 0.8;
}

/* AI loading animation - enhanced version */
.mscm-ai-response-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  height: 400px;
  z-index: 1100; /* Ensure loading is visible on top */
}

.mscm-ai-thinking {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 20px; /* Add spacing below dots */
}

.mscm-ai-thinking-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #722ed1;
  border-radius: 50%;
  animation: mscm-thinking 1.8s infinite ease-in-out both;
}

.mscm-ai-thinking-dot:nth-child(1) { 
  left: 8px; 
  animation-delay: -0.32s;
}

.mscm-ai-thinking-dot:nth-child(2) { 
  left: 32px;
  animation-delay: -0.16s;
}

.mscm-ai-thinking-dot:nth-child(3) { 
  left: 56px; 
}

.mscm-ai-thinking-text {
  margin-top: 24px;
  font-size: 16px;
  color: #666;
  text-align: center;
}

/* Add negative margin to shrink space between elements */
.mscm-comments-section .mscm-quote + p,
.mscm-comments-section blockquote + p {
  margin-top: 0 !important;
}

p + .mscm-comments-section .mscm-quote,
p + .mscm-comments-section blockquote {
  margin-top: 0 !important;
}

/* Apply purple color to all quoted text usernames, including those in message boxes */
.mscm-comments-section .mscm-quote strong,
.mscm-comments-section blockquote strong,
.mscm-comments-section .mscm-quote b,
.mscm-comments-section blockquote b {
  color: #722ed1 !important; /* Change blue usernames to purple theme color */
  font-weight: 500 !important;
}

/* Additional selectors to catch inline quote usernames with different markup */
.mscm-comments-section .mscm-quote span[style*="font-weight: bold"],
.mscm-comments-section blockquote span[style*="font-weight: bold"],
.mscm-comments-section .mscm-quote span[style*="font-weight:bold"],
.mscm-comments-section blockquote span[style*="font-weight:bold"] {
  color: #722ed1 !important; /* Apply purple to any bold spans that could be usernames */
}

/* Make sure the author name is purple in any quoted message context */
.mscm-quoted-author,
.quoted-author,
.quote-author,
[class*="quote"] [class*="author"],
[class*="quoted"] [class*="author"] {
  color: #722ed1 !important; /* Ensure purple color for any author class */
}

/* More comprehensive selectors to target all quoted usernames with purple color */
.mscm-comments-section .mscm-quote strong,
.mscm-comments-section blockquote strong,
.mscm-comments-section .mscm-quote b,
.mscm-comments-section blockquote b,
.mscm-comment-content .mscm-quote strong,
.mscm-comment-content blockquote strong,
.mscm-comment-content .mscm-quote b,
.mscm-comment-content blockquote b,
.mscm-comment-content quote strong,
.mscm-comment-content quote b {
  color: #722ed1 !important; /* Theme purple color */
  font-weight: 500 !important;
}

/* Target all links inside quotes */
.mscm-comments-section .mscm-quote a,
.mscm-comments-section blockquote a,
.mscm-comment-content .mscm-quote a,
.mscm-comment-content blockquote a,
.mscm-quote a,
blockquote a {
  color: #722ed1 !important; /* Theme purple color */
  text-decoration: none !important;
}

/* Target spans with inline styles for font-weight */
.mscm-comments-section [class*="quote"] span[style*="font-weight"],
.mscm-comment-content [class*="quote"] span[style*="font-weight"],
.mscm-comments-section blockquote span[style*="font-weight"],
.mscm-comment-content blockquote span[style*="font-weight"] {
  color: #722ed1 !important; /* Theme purple color */
}

/* Force override for any element with a username class */
[class*="username"]:not(.mscm-action-button),
[class*="user-name"]:not(.mscm-action-button),
[class*="author"]:not(.mscm-action-button),
[data-username],
[data-user],
.blockquote-username {
  color: #722ed1 !important; /* Theme purple color */
}

/* Target specifically the first element in a blockquote that might be a username */
blockquote > strong:first-child,
blockquote > b:first-child,
blockquote > span:first-child,
.mscm-quote > strong:first-child,
.mscm-quote > b:first-child,
.mscm-quote > span:first-child {
  color: #722ed1 !important; /* Theme purple color */
}

/* Ensure even inline quoted elements match the theme */
.quoted-text strong,
.quoted-message strong,
.quoted-content strong {
  color: #722ed1 !important; /* Theme purple color */
}

/* Responsive adjustments for different screen sizes */
@media screen and (max-width: 1200px) {
  .mscm-comments-scrollable-area {
    /* Dynamic height will be set via JavaScript */
    min-height: 120px;
  }
}

@media screen and (max-width: 768px) {
  .mscm-comments-scrollable-area {
    /* Dynamic height will be set via JavaScript */
    min-height: 100px;
  }
}

@media screen and (max-height: 600px) {
  .mscm-comments-scrollable-area {
    /* Dynamic height will be set via JavaScript */
    min-height: 80px;
  }
}

.development-details-page {
    height: 100vh;
    overflow: hidden;
}

/* Main container - simplified and consolidated rules */
.development-details-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 104px); /* Adjusted to match the indicated position */
    overflow: auto; /* Allow scrolling at the container level */
}

/* Row layout settings */
.development-details-container .ant-row {
    flex: 1;
    display: flex;
    height: 100%;
    margin: 0 -8px !important;
    min-height: 600px; /* Added minimum height to ensure enough space for content */
}

/* Column layout settings */
.development-details-container .ant-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 8px !important;
}

/* Added equal height rule to ensure both columns are the same height */
.equal-height-row {
    display: flex;
}
.equal-height-row > .ant-col {
    display: flex;
    flex-direction: column;
}

/* Combined Product Info and Requests Card */
.product-info-requests-card {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    flex: 1; /* Added flex: 1 to ensure it takes full height */
}

.product-info-requests-card .ant-card-body {
    flex: 1;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Left side tabs */
.left-side-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.left-side-tabs .ant-tabs-nav {
    margin: 0 !important;
    flex-shrink: 0;
    background-color: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 16px 0;
}

.left-side-tabs .ant-tabs-content-holder {
    flex: 1;
    overflow: hidden;
}

/* Simplified tab styles to ensure proper display */
.left-side-tabs .ant-tabs-content {
    height: auto !important;
    overflow: visible !important;
}

.left-side-tabs .ant-tabs-tabpane {
    height: auto !important;
    overflow: visible !important;
}

.left-side-tabs .ant-tabs-content {
    height: 100%;
}

.left-side-tabs .ant-tabs-tabpane {
    height: 100%;
    overflow: hidden;
}

/* Tab content styling */
.tab-content {
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
}

/* Product info container specific styling */
.product-info-container {
    display: flex;
    flex-direction: column;
    padding: 16px !important;
}

/* Requests container specific styling - Enhanced for better appearance */
.requests-container {
    padding-bottom: 80px !important; /* Increased padding to ensure the content is visible */
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 16px !important;
    padding: 20px !important;
}

/* Hide icon in production steps header */
.requests-container .production-steps-header .anticon {
  display: none !important;
}

/* Make sure ProductionSteps component has proper spacing */
.requests-container .production-steps-container {
    margin-top: 0;
}

/* Talepler için özel stil - Daha güzel görünüm */
.requests-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 4px;
}

.request-item {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 12px;
    background-color: white;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.request-item:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

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

.request-item-title {
    font-weight: 500;
    color: #1f1f1f;
    font-size: 15px;
}

.request-item-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.request-item-status.pending {
    background-color: #fff7e6;
    color: #fa8c16;
}

.request-item-status.approved {
    background-color: #f6ffed;
    color: #52c41a;
}

.request-item-status.rejected {
    background-color: #fff1f0;
    color: #ff4d4f;
}

.request-item-content {
    color: #595959;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.request-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #8c8c8c;
}

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

.request-actions button {
    padding: 0 8px;
}

/* Talep ekleme formu için stil */
.add-request-form {
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
}

/* Right Column - Comments and Documents Card */
.comments-card.fullscreen-card {
    height: 100% !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    flex: 1; /* Added flex: 1 to ensure it takes full height */
    margin: 0 !important; /* Remove any margin */
    width: 100% !important; /* Ensure full width */
    border-radius: 0 !important; /* Remove border radius to avoid spacing */
    padding: 0 !important;
}

.comments-card .ant-card-head {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 12px 16px !important; /* More compact padding */
    border-bottom: 1px solid #f0f0f0 !important;
}

.comments-card .ant-card-body {
    flex: 1;
    padding: 0 !important;
    height: calc(100% - 57px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    border: none !important;
}

/* Right side tabs */
.right-side-tabs {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.right-side-tabs .ant-tabs-nav {
    margin: 0 !important;
    flex-shrink: 0;
    background-color: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 16px 0;
}

.right-side-tabs .ant-tabs-content-holder {
    flex: 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.right-side-tabs .ant-tabs-content {
    height: 100% !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.right-side-tabs .ant-tabs-tabpane {
    height: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.right-side-tabs .ant-tabs-tabpane > div {
    height: 100%;
    overflow-y: auto;
    padding: 0 !important; /* Remove all padding */
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Ensure the comments container has proper layout to contain absolute positioned items */
.comments-card .ant-tabs-tabpane[data-node-key="comments"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Added general style for all tabs to ensure consistent height */
.ant-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Scrollbar styling - Daha şık ve modern scrollbar */
.tab-content::-webkit-scrollbar,
.right-side-tabs .ant-tabs-tabpane > div::-webkit-scrollbar,
.requests-container::-webkit-scrollbar {
    width: 6px;
}

.tab-content::-webkit-scrollbar-track,
.right-side-tabs .ant-tabs-tabpane > div::-webkit-scrollbar-track,
.requests-container::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content::-webkit-scrollbar-thumb,
.right-side-tabs .ant-tabs-tabpane > div::-webkit-scrollbar-thumb,
.requests-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.tab-content::-webkit-scrollbar-thumb:hover,
.right-side-tabs .ant-tabs-tabpane > div::-webkit-scrollbar-thumb:hover,
.requests-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

/* Document item styling */
.documents-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.documents-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
}

.document-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: white;
    transition: all 0.3s ease;
}

.document-item:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.document-icon {
    margin-right: 12px;
    color: #1890ff;
}

.document-info {
    flex: 1;
}

.document-name {
    font-weight: 500;
    margin-bottom: 2px;
}

.document-time {
    font-size: 12px;
    color: #888;
}

.document-actions {
    display: flex;
    gap: 4px;
}

/* Comment styling */
.comment {
    margin-bottom: 16px;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.comment-details {
    margin-left: 8px;
}

.author {
    font-weight: 500;
    margin-right: 8px;
}

.datetime {
    font-size: 12px;
    color: #888;
}

.comment-content {
    font-size: 14px;
    line-height: 1.5;
}

/* Combined view styling */
.combined-view {
    display: flex;
    flex-direction: column;
}

.activity-item {
    margin-bottom: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 12px;
    background-color: white;
    transition: all 0.3s ease;
}

.activity-item:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Make sure the "Talep Ekle" button is always visible */
.step-input-container {
    position: relative;
    margin-top: 16px;
    padding-bottom: 16px;
}

/* Ensure the input and button have good spacing */
.step-input-container .ant-input-group-wrapper {
    margin-bottom: 8px;
}

/* Make sure tab content is hidden when inactive */
.ant-tabs-content-holder {
  height: 100%;
}

.ant-tabs-tabpane {
  height: 100%;
  position: relative;
}

/* Hide inactive tab content */
.ant-tabs-tabpane-inactive {
  display: none !important;
}

/* Extend to full height */
.documents-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.documents-list {
  flex: 1;
  overflow-y: auto;
}

/* Document item styles */
.document-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.document-icon {
  margin-right: 12px;
  color: #1890ff;
}

.document-info {
  flex: 1;
}

.document-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.document-time {
  font-size: 12px;
  color: #888;
}

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

/* Responsive layout */
@media screen and (max-width: 1200px) {
    .development-details-container .ant-col {
        padding: 0 4px !important;
    }
    
    /* Adjust padding for better visibility on smaller screens */
    .right-side-tabs .ant-tabs-tabpane > div,
    .tab-content {
        padding: 12px !important;
        padding-bottom: 60px !important; /* Extra space at bottom */
    }
}

@media screen and (max-width: 768px) {
    .development-details-container .ant-row {
        flex-direction: column;
        height: auto;
    }
    
    .development-details-container .ant-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        height: auto;
    }
    
    .development-details-container {
        height: auto;
        overflow: visible;
    }
    
    /* Ensure cards have proper height on mobile */
    .product-info-requests-card,
    .comments-card.fullscreen-card {
        height: 500px !important; /* Fixed height on mobile */
        margin-bottom: 16px;
    }
}

/* Talep adımları için özel stiller */
.custom-step-item {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.custom-step-item:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.custom-step-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #1890ff;
  border-radius: 2px 0 0 2px;
}

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

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #f0f0f0;
}

.step-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: #1f1f1f;
}

.step-title span {
  margin-left: 8px;
}

.step-actions {
  display: flex;
  gap: 6px;
}

.step-description {
  font-size: 14px;
  color: #595959;
  line-height: 1.6;
  padding: 8px 0;
}

.step-comment {
  font-size: 14px;
  color: #5c5c5c;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #d9d9d9;
  font-style: italic;
}

.step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: #8c8c8c;
  padding-top: 8px;
  border-top: 1px dashed #f0f0f0;
}

.step-date {
  font-style: italic;
  display: flex;
  align-items: center;
}

.step-date:before {
  content: '\1F4C5';
  margin-right: 4px;
}

/* Adım düzenleme formu */
.edit-step-form {
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
}

/* Yeni adım ekleme formu */
.add-step-form {
  border-top: 1px dashed #e8e8e8;
  padding-top: 20px;
  margin-top: 20px;
  background-color: #fafafa;
  padding: 16px;
  border-radius: 8px;
}

/* Responsive layout adjustments */
@media screen and (max-width: 768px) {
  .custom-step-item {
    padding: 12px;
  }
  
  .step-title {
    font-size: 15px;
  }
  
  .step-description, .step-comment {
    font-size: 13px;
  }
  
  .requests-container {
    padding: 12px !important;
  }
}

/* Adım düzenleme formu - Geliştirilmiş stil */
.edit-step-form {
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e6f1fa;
  margin: 4px 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.edit-step-form:hover {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.09);
  border-color: #c9e0f5;
}

.edit-step-form .ant-input,
.edit-step-form .ant-select,
.edit-step-form .ant-input-textarea {
  margin-bottom: 12px;
  border-radius: 6px;
  border-color: #d9e6f2;
}

.edit-step-form .ant-input:hover,
.edit-step-form .ant-select:hover,
.edit-step-form .ant-input-textarea:hover {
  border-color: #1890ff;
}

.edit-step-form .ant-input:focus,
.edit-step-form .ant-select-focused .ant-select-selector,
.edit-step-form .ant-input-textarea:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.edit-step-form .ant-input-textarea textarea {
  resize: none;
  min-height: 60px;
}

.edit-step-form .ant-select-selector {
  border-radius: 6px !important;
}

.edit-step-form .ant-btn {
  border-radius: 6px;
  font-weight: 500;
}

.edit-step-form .ant-select {
  width: 100%;
}

.edit-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

/* Form etiketleri için stil */
.edit-step-label {
  display: block;
  font-size: 13px;
  color: #5a5a5a;
  margin-bottom: 4px;
  font-weight: 500;
}

/* İnput gruplarını ayarlama */
.edit-step-input-group {
  margin-bottom: 12px;
}

/* Responsive düzenlemeler  */
@media screen and (max-width: 768px) {
  .edit-step-form {
    padding: 12px;
  }
}

/* Fixed comment input styles - Moved from inline styles */
.fixed-comment-input {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 12px 16px 12px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 10;
  min-height: 105px;
  width: 100%;
}

/* Comments container layout */
.comments-scroll-container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 16px 16px 16px !important; /* Keep horizontal padding but increase bottom padding */
  height: calc(100% - 105px); /* Subtract fixed input height */
  position: relative;
}

/* Ensure comment content is properly spaced */
.comment-item {
  margin-bottom: 16px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 95%;
}

/* Comment scroll area styles */
.comments-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.comments-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.comments-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}

.comments-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* Enhanced comments container layout */
.mscm-comments-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}



.mscm-fixed-input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 10;
}

.mscm-comment-input-section {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.mscm-comment-input-wrapper {
  flex: 1;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 8px;
  min-height: 40px;
}

.mscm-whatsapp-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mscm-circle-button {
  min-width: 36px !important;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enhanced scrollbar styling */
.mscm-comments-scrollable-area::-webkit-scrollbar {
  width: 6px;
}

.mscm-comments-scrollable-area::-webkit-scrollbar-track {
  background: transparent;
}

.mscm-comments-scrollable-area::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}

.mscm-comments-scrollable-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* Comment styles */
.mscm-comment {
  margin-bottom: 16px;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
}

.mscm-comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.mscm-comment-details {
  margin-left: 8px;
}

.mscm-author {
  font-weight: 600;
  margin-right: 8px;
}

.mscm-datetime {
  color: #888;
  font-size: 12px;
}

.mscm-action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Comments tab container styles */
.mscm-comments-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}



/* Fixed input container styles */
.mscm-fixed-input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 100;
}

/* Ensure comments tabpane has correct layout */
.comments-card .ant-tabs-tabpane[data-node-key="comments"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Make sure the tabs content takes full height */
.right-side-tabs .ant-tabs-content {
  height: 100%;
}

.right-side-tabs .ant-tabs-tabpane {
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Main layout structure */
.development-details-wrapper {
    padding: 12px;
    height: calc(100vh - 112px); /* 64px header + 48px breadcrumb */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Layout row */
.product-layout {
    flex: 1;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
    padding: 0; /* Remove padding */
}

/* Columns */
.product-left-column,
.product-right-column {
    height: 100%;
    overflow: hidden;
}

/* Cards */
.left-side-card,
.right-side-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.left-side-card .ant-card-body,
.right-side-card .ant-card-body {
    height: 100%;
    padding: 16px; /* Reduce padding */
    display: flex;
    flex-direction: column;
}

/* Tabs containers */
.left-side-tabs,
.right-side-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left-side-tabs .ant-tabs-content,
.right-side-tabs .ant-tabs-content {
    flex: 1;
    height: 100%;
}

.left-side-tabs .ant-tabs-content-holder,
.right-side-tabs .ant-tabs-content-holder {
    flex: 1;
    overflow: hidden;
}

.left-side-tabs .ant-tabs-tabpane,
.right-side-tabs .ant-tabs-tabpane {
    height: 100%;
    overflow: auto;
}

/* Tab content */
.tab-content {
    height: 100%;
    overflow: auto;
    padding: 12px; /* Reduce padding */
    margin: 0; /* Remove margin */
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .development-details-wrapper {
        height: auto;
        overflow: visible;
        padding: 12px;
    }

    .product-layout {
        height: auto;
    }

    .product-left-column,
    .product-right-column {
        height: auto;
    }

    .left-side-card,
    .right-side-card {
        margin-bottom: 16px;
    }

    .left-side-tabs .ant-tabs-content,
    .right-side-tabs .ant-tabs-content {
        height: auto;
    }

    .tab-content {
        height: auto;
        min-height: 200px;
    }
}

/* Comments card body - Updated */
.comments-card .ant-card-body {
    padding: 12px !important; /* Reduce padding */
    height: 100% !important;
}

/* Right side tab content - Updated */
.right-side-tabs .ant-tabs-tabpane > div {
    padding: 12px; /* Reduce padding */
    padding-bottom: 40px; /* Reduce bottom padding */
}

/* Fixed comment input - Updated */
.fixed-comment-input {
    padding: 8px; /* Reduce padding */
    min-height: 90px; /* Reduce min-height */
}

/* Comments container - Updated */
.comments-scroll-container {
    padding: 12px; /* Reduce padding */
    padding-bottom: 100px; /* Reduce bottom padding */
}

/* Fix right-side card to completely fill container */
.right-side-card .ant-card-body {
    padding: 0 !important; /* Remove all padding */
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Fix the content-wrapper to fill its container */
.content-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix comments card to fill its container and remove spacing */
.comments-card.fullscreen-card {
    height: 100% !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    flex: 1;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important; /* Remove border radius to avoid spacing */
    padding: 0 !important;
}

/* Fix comments card header sizing */
.comments-card .ant-card-head {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Fix comments card body to remove spacing */
.comments-card .ant-card-body {
    flex: 1;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: calc(100% - 57px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fix right tabs to fill the space */
.right-side-tabs {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.right-side-tabs .ant-tabs-content-holder {
    flex: 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.right-side-tabs .ant-tabs-content {
    height: 100% !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove unnecessary padding in tab panes */
.right-side-tabs .ant-tabs-tabpane > div {
    padding: 0 !important; /* Remove all padding */
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Fix comments tab to properly contain its children */
.right-side-tabs .ant-tabs-tabpane[data-node-key="comments"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Adjust the comments container to have appropriate padding */
.comments-scroll-container {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 16px 16px 16px !important; /* Keep horizontal padding but increase bottom padding */
}

/* Enhanced comments container layout - Updated to support dynamic height calculations */
.mscm-comments-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Ensure the comments tab takes full height */
.comments-card .ant-tabs-tabpane[data-node-key="comments"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Fix right tabs to fill the space */
.right-side-tabs {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.right-side-tabs .ant-tabs-content-holder {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.right-side-tabs .ant-tabs-content {
  height: 100% !important;
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.right-side-tabs .ant-tabs-tabpane {
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Fixed comment input styles - Adjusted to work with dynamic heights */
.fixed-comment-input {
  position: relative; /* Changed from absolute to relative */
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 12px 16px 12px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 10;
  min-height: auto; /* Changed from fixed height to auto */
  width: 100%;
}

/* Comments container layout - Updated to allow dynamic calculation */
.comments-scroll-container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  height: auto !important; /* Let the container take natural height */
  position: relative;
}

/* Responsive adjustments for different screen sizes */
@media screen and (max-width: 1200px) {
  .mscm-comments-scrollable-area {
    max-height: calc(100vh - 260px);
  }
}

@media screen and (max-width: 768px) {
  .mscm-comments-scrollable-area {
    max-height: calc(100vh - 240px);
    min-height: 150px;
  }
}

@media screen and (max-height: 600px) {
  .mscm-comments-scrollable-area {
    max-height: calc(100vh - 220px);
    min-height: 120px;
  }
}




.timeline-item {
  display: flex;
  justify-content: flex-start; /* Align items to the start */
  align-items: center;
  position: relative; /* Add relative positioning */
}

.timeline-content {
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}

.message-box {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  min-height: 150px;
  overflow: hidden;
  margin: 10px 0;
}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.message-header .author {
  font-weight: bold;
  margin-left: 10px;
}

.message-header .datetime {
  margin-left: auto;
  color: #888;
}

.message-content {
  margin-bottom: 10px;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
}

.attachment {
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
}

.attachment img {
  margin-left: 5px;
  border-radius: 4px;
}

.result-container {
  display: flex;
  align-items: center;
  gap: 5px; /* Add gap between label and result */
}

.result {
  display: flex;
  align-items: center;
  font-size: 14px; /* Reduce font size */

  background-color: transparent; /* Add background color */
  gap: 2px;
}

.result.accepted {
  color: green;
}

.result.accepted-with-comments {
  color: orange;
}

.result.rejected {
  color: red;
}

.quote {
  background-color: #e0e0e0;
  border-left: 4px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.quote-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.quote-header .author {
  font-weight: bold;
  margin-left: 10px;
}

.quote-header .datetime {
  margin-left: auto;
  color: #888;
}

.quote-content {
  margin-left: 10px;
}

.highlight {
  animation: highlight-animation 2s ease-in-out;
}

@keyframes highlight-animation {
  0%, 100% {
    background-color: #d3d3d3;
  }
  50% {
    background-color: #e0e0e0;
  }
}

.comments-section-inner {

  padding-top: 10px;
}

.comment {
  display: flex;
  flex-direction: column;
  
  background-color: #f0f2f5;
  border-radius: 8px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.comment-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.comment-header .author {
  font-weight: bold;
}

.comment-header .datetime {
  color: #888;
  font-size: 12px;
}

.comment-content {
  margin-left: 40px;
}

.comment-input-section {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.comment-input {
  flex: 1;
  margin-right: 10px;
}

.comment-button {
  flex-shrink: 0;
}

.comment-input-section .ant-upload {
  border: none;
  padding: 0;
  background: none;
}

.comment-input-section .ant-upload .anticon-paper-clip {
  font-size: 16px;
  color: #1890ff;
}

.comment-input-section .upload-icon {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: normal;
  padding: 0;
  border: none;
  background: none;
}

.comment-input-section .upload-icon .anticon-paper-clip {
  font-size: 16px;
  color: gray;
}

.comment-input-section .comment-attachments {
  display: flex;
  align-items: center;
}

.comment-input-section .comment-attachments img {
  border-radius: 4px;
}

.comment-input-wrapper {
  flex: 1;
  position: relative;
  margin-right: 10px;
}

.comment-input-wrapper .comment-attachments {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.comment-input-wrapper .ant-input {
  padding-right: 30px;
}




.comment-section {
  display: flex;
  align-items: flex-start; /* Input ve butonun aynı hizada kalmasını sağlar */
  gap: 8px; /* Input ve buton arasındaki boşluk */
}

.comment-attachments {
  display: flex;
  align-items: center;
  margin-left: 8px; /* Attachment ikonunun inputtan ayrılması için boşluk */
}

.upload-icon {
  cursor: pointer;
  font-size: 16px;
  color: #888;
}

.comment-button {
  align-self: flex-start; /* Butonun input ile aynı hizada kalmasını sağlar */
  margin-left: 8px; /* Butonun inputtan ayrılması için boşluk */
}

.editor-container {
 
  border-radius: 4px;
  padding: 8px;
}

.editor-container .DraftEditor-root {
  min-height: 120px;
  padding: 8px;
}

.mention {
  color: #1890ff;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: rgba(24, 144, 255, 0.1);
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar .ant-btn {
  padding: 4px 8px;
  height: 32px;
}

.toolbar .ant-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.toolbar .ant-btn-primary {
  background-color: #1890ff;
  color: white;
}
.forum-container {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: transparent;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  margin-top: -15px;
}

.title {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
  letter-spacing: 1px;
}


.message-list {
  overflow-x: hidden;
  overflow-x: auto;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 15px;
  max-height: calc(100vh - 149px);
}

 .store-list-container {
    background-color: transparent;
    min-height: calc(100vh - 64px);
    padding: 24px;
    height: 100%;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.store-list-header {
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

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

.product-card {
    width: 100%;
    margin-bottom: 16px;
}

.product-image {
    height: 200px;
    object-fit: cover;
}

.filter-panel {
    background-color: #f0f0f0;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

.ant-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ant-card-cover {
    height: 200px;
    overflow: hidden;
}

.ant-card-body {
    flex: 1;
}

#scrollableDiv {
    height: 100%;
    overflow: auto;
    padding: 8px;
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    /* Apply general scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

#scrollableDiv::-webkit-scrollbar {
    width: 12px; /* Kaydırma çubuğu genişliği */
}

#scrollableDiv::-webkit-scrollbar-track {
    background: #f1f1f1; /* Kaydırma çubuğu arka plan rengi */
}

#scrollableDiv::-webkit-scrollbar-thumb {
    background: #888; /* Kaydırma çubuğu rengi */
}

#scrollableDiv::-webkit-scrollbar-thumb:hover {
    background: #555; /* Kaydırma çubuğu üzerine gelindiğinde rengi */
}

.ant-card-meta-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ant-card-meta-description {
    height: 80px;
    overflow: hidden;
}

.ant-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.catalog-list-container {
    background-color: transparent; /* Changed from white to light gray */
    height: calc(100vh - 112px); /* Adjusted to account for padding and margins */
    padding-top: 24px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 24px 32px;
    overflow: hidden;  /* Enable vertical scrolling */
    position: relative;
}

.catalog-content {
    width: 100%;
    padding-bottom: 40px; /* Add bottom spacing */
}

.add-catalog-button {
    margin-bottom: 16px;
}

.catalog-table {
    background-color: #fff;
    border-radius: 4px;
    margin: 16px 0;
    width: 100%;
}

.ant-table-wrapper {
    width: 100%;
}

/* Remove any overflow hidden that might interfere with scrolling */
.ant-table-body {
    overflow: visible !important;
}

.ant-table {
    background-color: #fff;
    border-radius: 4px;
    margin: 16px 0;  /* Add top/bottom margins to table */
}

.ant-table-thead > tr > th {
    background-color: #fafafa;
}

.ant-table-tbody > tr > td {
    background-color: #fff;
}

.ant-switch-checked {
    background-color: #52c41a;
}

.ant-tag {
    min-width: 60px;
    text-align: center;
}

.store-list-content {
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 180px);
}

.ant-radio-button-wrapper-checked {
    background-color: black !important;
    color: white !important;
    border-color: black !important;
}

.select-link-button {
    background: none;
    border: none;
    color: #1890ff;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
}

.select-link-button:hover {
    color: #53a6f4;
    text-decoration: underline;
    
}

.catalog-add-container {
    padding: 24px;
    height: calc(100vh - 92px); /* Assuming header height is 64px */
}

.catalog-card {
    background: linear-gradient(145deg, #ffffff, #f5f7fa);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.catalog-card .ant-card-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.catalog-form {
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.catalog-form .ant-form-item {
    margin-bottom: 24px;
}

.catalog-form .ant-input {
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 10px;
}

.catalog-form .ant-radio-group {
    display: flex;
    gap: 10px;
}

.catalog-form .ant-radio-button-wrapper {
    border-radius: 6px;
    min-width: 100px;
    text-align: center;
}



.company-selection-section {
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8fafc;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
}
.schedule-container {
  padding: 20px;
 
}

.title {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
  letter-spacing: 1px;
}

.save-button {
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.schedule-layout {
  display: flex;
  gap: 16px;
}

.steps-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.schedule-main {
  flex: 1;
}

.step-item {
  cursor: pointer;
  padding: 16px !important;
  background: #fafafa;
  margin-bottom: 8px !important;
  border-radius: 6px;
  transition: all 0.3s;
}

.step-item:hover {
  background: #f0f0f0;
}

.events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.events li {
  margin-bottom: 4px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
}

.steps-card {
  width: 100%;
}

.remove-date {
  color: #ff4d4f;
}

.remove-date:hover {
  color: #ff7875;
}

.accept-date {
  color: #0f8f4d;
}

.accept-date:hover {
  color: #319f66;
}


.ant-badge-status-text {
  min-width: 150px;
  font-size: 14px;
  font-weight: 500;
}

.sorted-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.date-item:hover {
  background-color: #e8e8e8;
}

.date-item .drag-handle {
  cursor: grab;
  margin-right: 8px;
  color: #999;
}

.date-item.dragging {
  opacity: 0.5;
  background-color: #e0e0e0;
}

.customer-approval-badge {
  margin-left: 8px;
}

.request-date-button {
  margin-left: 8px;
}

.status-icon {
  font-size: 18px;
}

.status-icon.waiting {
  color: #e12e2e;
}

.status-icon.scheduled {
  color: #faad14;
}

.comments-link{
  color: #1890ff;
}

.schedule-title {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.schedule-title .ant-typography {
  font-size: 20px;
  color: #1f1f1f;
  margin: 0;
}

.production-steps-definitions-content {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 129px); /* 40px for top/bottom padding */
  overflow-y: auto;
  overflow-x: hidden;
}

.production-steps-definitions-content h2 {
  margin-bottom: 24px;
  color: #1f1f1f;
  font-size: 20px;
  font-weight: 500;
}.assign-agent-container {
    display: flex;
    flex-direction: column;
    height: 87vh;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.assign-agent-content {
    flex: 1;
    overflow: hidden;
    padding: 16px 0;
}

.company-selection-section {
    margin-bottom: 24px;
}

.section-title {
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: 500;
    color: #262626;
}

.development-table-container {
    height: calc(100vh - 450px);
    overflow-y: auto;
    margin-top: 10px;
}

.footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding: 16px 0;
}

.back-button {
    margin: 0 8px;
}

.summary-section {
    margin-top: 16px;
    height: calc(100vh - 250px);
    overflow-y: auto;
}

/* Table styles */
.ant-table {
    width: 100%;
}

.ant-table-cell {
    white-space: nowrap;
}

.summary-section .ant-tree {
  font-size: 14px;
}

.summary-section .ant-tree-node-content-wrapper {
  padding: 8px 4px;
}

.summary-section .ant-tree-switcher {
  width: 24px;
}

.summary-section .ant-tree-treenode {
  padding: 4px 0;
}.calendar-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  max-height: 100vh;
  overflow-y: auto;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}

.events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.events li {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.notes-month {
  font-size: 12px;
  text-align: center;
}

.notes-month section {
  font-size: 12px;
  border-radius: 4px;
  padding: 2px 8px;
  background: #f5f5f5;
  display: inline-block;
}

/* Add styles for hovering over events */
.events li:hover {
  background: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
}

.event-item {
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
}

.event-item:hover {
  transform: scale(1.01);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.event-time {
  margin-right: 8px;
  font-weight: 500;
}

.event-title {
  font-weight: 400;
}

.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-content {
  height: 100px;
  overflow-y: auto;
}

.ant-picker-calendar-date {
  padding: 4px 8px !important;
}

.ant-tooltip-inner {
  min-width: 200px;
  padding: 12px;
}

.ant-tooltip-inner p {
  margin: 4px 0;
  line-height: 1.4;
}

/* Custom styles for the calendar header */
.ant-picker-calendar-header {
  display: none;
  padding: 12px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.ant-picker-calendar-header .ant-picker-calendar-mode-switch {
  display: none;
}

/* Custom styles for today's date */
.ant-picker-cell-today .ant-picker-cell-inner {
  background: #e8f5e9 !important;
}

/* Custom styles for selected date */
.ant-picker-cell-selected .ant-picker-cell-inner {
  background: #e3f2fd !important;
}

/* Hover effect for calendar cells */
.ant-picker-cell:hover .ant-picker-cell-inner {
  background: #f5f5f5;
}

.event-details {
  margin-left: 22px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
}

.calendar-container .ant-badge-status-text {
  font-size: 13px;
}

/* Ensure the calendar itself handles overflow */
.ant-picker-calendar-full .ant-picker-panel {
  overflow-y: auto;
}/* Import ActionMessageBoxes styles */
.timeline-item {
  display: flex;
  justify-content: flex-start; /* Align items to the start */
  align-items: center;
  position: relative; /* Add relative positioning */
}
.timeline-content {
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}
.message-box {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  min-height: 150px;
  overflow: hidden;
  margin: 10px 0;
}
.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.message-header .author {
  font-weight: bold;
  margin-left: 10px;
}
.message-header .datetime {
  margin-left: auto;
  color: #888;
}
.message-content {
  margin-bottom: 10px;
}
.attachments {
  display: flex;
  flex-wrap: wrap;
}
.attachment {
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
}
.attachment img {
  margin-left: 5px;
  border-radius: 4px;
}
.result-container {
  display: flex;
  align-items: center;
  gap: 5px; /* Add gap between label and result */
}
.result {
  display: flex;
  align-items: center;
  font-size: 14px; /* Reduce font size */

  background-color: transparent; /* Add background color */
  gap: 2px;
}
.result.accepted {
  color: green;
}
.result.accepted-with-comments {
  color: orange;
}
.result.rejected {
  color: red;
}
.quote {
  background-color: #e0e0e0;
  border-left: 4px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.quote-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.quote-header .author {
  font-weight: bold;
  margin-left: 10px;
}
.quote-header .datetime {
  margin-left: auto;
  color: #888;
}
.quote-content {
  margin-left: 10px;
}
.highlight {
  animation: highlight-animation 2s ease-in-out;
}
@keyframes highlight-animation {
  0%, 100% {
    background-color: #d3d3d3;
  }
  50% {
    background-color: #e0e0e0;
  }
}
.comments-section-inner {

  padding-top: 10px;
}
.comment {
  display: flex;
  flex-direction: column;
  
  background-color: #f0f2f5;
  border-radius: 8px;
}
.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.comment-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.comment-header .author {
  font-weight: bold;
}
.comment-header .datetime {
  color: #888;
  font-size: 12px;
}
.comment-content {
  margin-left: 40px;
}
.comment-input-section {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.comment-input {
  flex: 1;
  margin-right: 10px;
}
.comment-button {
  flex-shrink: 0;
}
.comment-input-section .ant-upload {
  border: none;
  padding: 0;
  background: none;
}
.comment-input-section .ant-upload .anticon-paper-clip {
  font-size: 16px;
  color: #1890ff;
}
.comment-input-section .upload-icon {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: normal;
  padding: 0;
  border: none;
  background: none;
}
.comment-input-section .upload-icon .anticon-paper-clip {
  font-size: 16px;
  color: gray;
}
.comment-input-section .comment-attachments {
  display: flex;
  align-items: center;
}
.comment-input-section .comment-attachments img {
  border-radius: 4px;
}
.comment-input-wrapper {
  flex: 1;
  position: relative;
  margin-right: 10px;
}
.comment-input-wrapper .comment-attachments {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.comment-input-wrapper .ant-input {
  padding-right: 30px;
}
.comment-section {
  display: flex;
  align-items: flex-start; /* Input ve butonun aynı hizada kalmasını sağlar */
  gap: 8px; /* Input ve buton arasındaki boşluk */
}
.comment-attachments {
  display: flex;
  align-items: center;
  margin-left: 8px; /* Attachment ikonunun inputtan ayrılması için boşluk */
}
.upload-icon {
  cursor: pointer;
  font-size: 16px;
  color: #888;
}
.comment-button {
  align-self: flex-start; /* Butonun input ile aynı hizada kalmasını sağlar */
  margin-left: 8px; /* Butonun inputtan ayrılması için boşluk */
}
.editor-container {
 
  border-radius: 4px;
  padding: 8px;
}
.editor-container .DraftEditor-root {
  min-height: 120px;
  padding: 8px;
}
.mention {
  color: #1890ff;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: rgba(24, 144, 255, 0.1);
}
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar .ant-btn {
  padding: 4px 8px;
  height: 32px;
}
.toolbar .ant-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}
.toolbar .ant-btn-primary {
  background-color: #1890ff;
  color: white;
}
.nf-news-feed-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    height: calc(100vh - 95px); /* Full viewport height minus header and breadcrumb */
    overflow-y: auto; /* Enable vertical scrolling */
}
.nf-news-feed-container-full {
    width: 100%;
    padding: 0;
    height: calc(100vh - 95px);
    overflow-y: auto;
}
.nf-timeline-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.nf-timeline-card-full {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-radius: 0;
    height: 100%;
}
.nf-feed-title {
    font-size: 18px;
    margin: 0;
    color: #333;
    text-align: center;
}
.nf-feed-header {
    padding: 16px 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
}
.nf-feed-title {
    font-size: 20px;
    margin: 0;
    color: #333;
    margin-bottom: 4px;
}
.nf-feed-subtitle {
    color: #8c8c8c;
    font-size: 14px;
    margin: 0;
}
/* Timeline styles */
.nf-news-feed-container .ant-timeline {
    padding: 12px;
}
.nf-news-feed-container-full .ant-timeline {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.nf-news-feed-container .ant-timeline-item-label {
    width: 130px !important;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}
.nf-news-feed-container-full .ant-timeline-item-label {
    width: 180px !important;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}
.nf-news-feed-container .ant-timeline-item-content {
    inset-inline-start: 150px !important;
    width: calc(100% - 160px) !important;
    margin: 0 0 0 30px;
    padding: 0 0 20px 12px;
    position: relative;
    cursor: pointer;
}
.nf-news-feed-container-full .ant-timeline-item-content {
    inset-inline-start: 200px !important;
    width: calc(100% - 210px) !important;
    margin: 0 0 0 30px;
    padding: 0 0 20px 20px;
    position: relative;
    cursor: pointer;
}
.nf-news-feed-container .ant-timeline-item-content:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}
.nf-news-feed-container-full .ant-timeline-item-content:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}
.nf-news-feed-container .ant-timeline-item-tail {
    inset-inline-start: 130px !important;
}
.nf-news-feed-container-full .ant-timeline-item-tail {
    inset-inline-start: 180px !important;
}
.nf-news-feed-container .ant-timeline-item-head {
    inset-inline-start: 130px !important;
    width: 16px;
    height: 16px;
}
.nf-news-feed-container-full .ant-timeline-item-head {
    inset-inline-start: 180px !important;
    width: 20px;
    height: 20px;
}
.nf-news-feed-container-full .nf-event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}
.nf-news-feed-container-full .nf-event-item:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Event styles */
.nf-event-action {
    font-weight: 500;
    margin-bottom: 4px;
}
.nf-event-date {
    font-size: 12px;
    color: #722ed1;
}
/* Modal styles */
.nf-modal-body {
    padding: 20px 24px;
}
.nf-modal-title {
    font-weight: 600;
}
/* Updated System notification styles */
.nf-system-notification-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  background: transparent;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.nf-notification-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #f9f9f9;  /* Light gray header background */
  display: flex;
  align-items: center;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* New container without card */
.nf-content-container {
  background: transparent;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nf-timeline-scroll-container {
  height: 100%;
  overflow-y: auto;
  padding: 16px 20px 0 20px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}
.nf-timeline-scroll-container::-webkit-scrollbar {
  width: 6px;
}
.nf-timeline-scroll-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.nf-timeline-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
/* Loading and end message styles */
.nf-loading-indicator {
  text-align: center;
  padding: 20px;
  background: transparent;
}
.nf-end-message {
  text-align: center;
  padding: 20px;
  color: #999;
  background: transparent;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .nf-news-feed-container {
        padding: 12px;
    }

    .nf-news-feed-container .ant-timeline-item-label {
        width: 80px !important;
    }

    .nf-news-feed-container .ant-timeline-item-content {
        inset-inline-start: 100px !important;
        width: calc(100% - 110px) !important;
    }

    .nf-news-feed-container .ant-timeline-item-tail,
    .nf-news-feed-container .ant-timeline-item-head {
        inset-inline-start: 80px !important;
    }

    .nf-news-feed-container-full .ant-timeline {
        padding: 12px;
    }

    .nf-news-feed-container-full .ant-timeline-item-label {
        width: 100px !important;
    }
    
    .nf-news-feed-container-full .ant-timeline-item-content {
        inset-inline-start: 120px !important;
        width: calc(100% - 130px) !important;
        padding-left: 12px;
    }
    
    .nf-news-feed-container-full .ant-timeline-item-tail,
    .nf-news-feed-container-full .ant-timeline-item-head {
        inset-inline-start: 100px !important;
    }
}
@media (max-width: 992px) {
    .nf-news-feed-container-full .ant-timeline-item-label {
        width: 140px !important;
    }
    
    .nf-news-feed-container-full .ant-timeline-item-content {
        inset-inline-start: 160px !important;
        width: calc(100% - 170px) !important;
    }
    
    .nf-news-feed-container-full .ant-timeline-item-tail,
    .nf-news-feed-container-full .ant-timeline-item-head {
        inset-inline-start: 140px !important;
    }
}
@media (max-width: 576px) {
    .nf-news-feed-container-full .ant-timeline-item-label {
        width: 80px !important;
        font-size: 12px;
    }
    
    .nf-news-feed-container-full .ant-timeline-item-content {
        inset-inline-start: 90px !important;
        width: calc(100% - 100px) !important;
        padding-left: 8px;
    }
    
    .nf-news-feed-container-full .ant-timeline-item-tail,
    .nf-news-feed-container-full .ant-timeline-item-head {
        inset-inline-start: 80px !important;
    }
    
    .nf-news-feed-container-full .ant-avatar {
        width: 24px !important;
        height: 24px !important;
    }
}
/* Animation styles */
@keyframes nf-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.nf-news-feed-container .ant-timeline-item {
    animation: nf-fadeIn 0.3s ease-out;
    animation-fill-mode: both;
}
.nf-news-feed-container .ant-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.nf-news-feed-container .ant-timeline-item:nth-child(2) { animation-delay: 0.2s; }
.nf-news-feed-container .ant-timeline-item:nth-child(3) { animation-delay: 0.3s; }
.nf-news-feed-container .ant-timeline-item:nth-child(4) { animation-delay: 0.4s; }
.nf-news-feed-container .ant-timeline-item:nth-child(5) { animation-delay: 0.5s; }
.nf-news-feed-container .ant-timeline-item:nth-child(6) { animation-delay: 0.6s; }
.nf-news-feed-container .ant-timeline-item:nth-child(7) { animation-delay: 0.7s; }
.nf-news-feed-container-full .ant-timeline-item {
    animation: nf-fadeIn 0.3s ease-out;
    animation-fill-mode: both;
}
.nf-news-feed-container-full .ant-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.nf-news-feed-container-full .ant-timeline-item:nth-child(2) { animation-delay: 0.2s; }
.nf-news-feed-container-full .ant-timeline-item:nth-child(3) { animation-delay: 0.3s; }
.nf-news-feed-container-full .ant-timeline-item:nth-child(4) { animation-delay: 0.4s; }
.nf-news-feed-container-full .ant-timeline-item:nth-child(5) { animation-delay: 0.5s; }
.nf-news-feed-container-full .ant-timeline-item:nth-child(6) { animation-delay: 0.6s; }
.nf-news-feed-container-full .ant-timeline-item:nth-child(7) { animation-delay: 0.7s; }
.nf-new-post-card {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.nf-post-list {
    display: flex;
    flex-direction: column;
}
.nf-post-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.nf-post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.nf-post-meta {
    display: flex;
    flex-direction: column;
}
.nf-post-meta .author {
    font-weight: bold;
    color: #262626;
}
.nf-post-meta .datetime {
    font-size: 12px;
    color: #8c8c8c;
}
.nf-post-content {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
}
.nf-post-actions {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.nf-post-actions .ant-btn {
    color: #595959;
}
.nf-comment {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.nf-comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.nf-comment-details {
    display: flex;
    flex-direction: column;
}
.nf-comment-details .author {
    font-weight: 500;
    color: #262626;
}
.nf-comment-details .datetime {
    font-size: 12px;
    color: #8c8c8c;
}
.nf-comment-content {
    margin-left: 44px;
    font-size: 14px;
}
.nf-comment-input {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    align-items: flex-start;
}
.nf-comment-input .DraftEditor-root {
    flex: 1;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 8px 16px;
    min-height: 36px;
}
.nf-comment-list {
    margin-top: 20px;
}
.nf-feed-container {
    margin-top: 5px;
    padding: 4px;
    height: calc(100vh - 95px);
    overflow-y: auto;
}
.nf-feed-content {
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 25px;
}
.nf-feed-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
.nf-feed-main-content {
    width: 100%;
    max-width: calc(100vw - 360px);
    min-width: auto;
    overflow-y: visible;
    height: auto;
}
.nf-feed-sidebar {
    width: 300px;
    position: sticky;
    top: 0px;
    height: fit-content;
    align-self: flex-start;
    z-index: 1;
}
.nf-feed-sidebar .ant-card {
    position: sticky;
    top: 64px;
}
/* Responsive layout adjustments */
@media (max-width: 1200px) {
    .nf-feed-layout {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    .nf-feed-main-content {
        max-width: 100%;
    }

    .nf-feed-sidebar {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
        margin-top: 20px;
    }
}
.nf-action-card, .nf-announcement-card {
    max-width: 100%;
    overflow-x: hidden;
}
.nf-event-details {
    font-size: 13px;
    line-height: 1.5;
}
.nf-event-date {
    color: #722ed1;
    margin-bottom: 8px;
}
.nf-event-location, .nf-event-product {
    margin: 4px 0;
}
.nf-feed-sidebar .ant-list-item {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #f0f0f0;
}
.nf-feed-sidebar .ant-list-item:hover {
    background-color: #fafafa;
}
.nf-feed-sidebar .ant-card-body {
    padding: 0 12px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.nf-action-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 16px;
}
.nf-page-container {
  padding: 20px;
  height: calc(100vh - 95px);
  overflow-y: auto;
}
.nf-page-header {
  margin-bottom: 24px;
}
.nf-page-header-icon {
  font-size: 24px;
  color: #f9c4ac;
  margin-right: 8px;
}
.nf-page-title {
  margin: 0 !important;
  color: #333 !important;
}
.nf-page-divider {
  margin: 16px 0 !important;
}
.nf-content-wrapper {
  margin-bottom: 24px;
}
.nf-custom-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.nf-timeline-wrapper {
  min-height: 400px;
}
/* Notification Feed main container */
.nf-feed-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 95px);
  overflow: hidden;
  background-color: #f5f7fa;
  padding: 0;
}
/* Header styles with just the selects */
.nf-feed-header {
  background-color: #fff;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f2f5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.nf-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nf-header-icon {
  font-size: 24px;
  color: #722ed1;
}
.nf-filter-container {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* Notification content area */
.nf-notification-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}
.nf-notification-content::-webkit-scrollbar {
  width: 6px;
}
.nf-notification-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
.nf-notification-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.05);
}
/* Date group headers */
.nf-notification-group {
  margin-bottom: 20px;
}
.nf-date-header {
  background-color: #f5f7fa;
  padding: 8px 20px;
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 500;
  color: #666;
}
/* Notification item styles */
.nf-notification-item {
  background: #fff;
  margin: 0 10px 6px;
  padding: 12px 16px !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  border-left: 3px solid transparent;
  position: relative;
}
.nf-notification-item:hover {
  background-color: #f0f0ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  border-left-color: #722ed1;
}
/* Add a subtle arrow icon to indicate the item is clickable */
.nf-notification-item:after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: #722ed1;
  font-weight: bold;
  transition: opacity 0.2s ease, right 0.2s ease;
}
.nf-notification-item:hover:after {
  opacity: 1;
  right: 12px;
}
/* Notification item left border color based on type */
.nf-notification-item:hover {
  border-left-color: #722ed1;
}
/* Notification description */
.nf-notification-description {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nf-notification-details {
  flex: 1;
  line-height: 1.6;
}
.nf-notification-time {
  color: #8c8c8c;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 10px;
}
.nf-product-name {
  font-style: italic;
}
/* Tag styling for notification types */
.nf-tag {
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}
/* Type tags */
.nf-tag-file {
  color: #722ed1;
  background: rgba(114, 46, 209, 0.1);
  border-color: rgba(114, 46, 209, 0.2);
}
.nf-tag-feature {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
  border-color: rgba(82, 196, 26, 0.2);
}
.nf-tag-variant {
  color: #722ed1;
  background: rgba(114, 46, 209, 0.1);
  border-color: rgba(114, 46, 209, 0.2);
}
.nf-tag-note {
  color: #fa8c16;
  background: rgba(250, 140, 22, 0.1);
  border-color: rgba(250, 140, 22, 0.2);
}
.nf-tag-comment {
  color: #f5222d;
  background: rgba(245, 34, 45, 0.1);
  border-color: rgba(245, 34, 45, 0.2);
}
/* Action tags */
.nf-tag-add {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
  border-color: rgba(82, 196, 26, 0.2);
}
.nf-tag-update {
  color: #faad14;
  background: rgba(250, 173, 20, 0.1);
  border-color: rgba(250, 173, 20, 0.2);
}
.nf-tag-delete {
  color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
  border-color: rgba(255, 77, 79, 0.2);
}
/* Loading and empty states */
.nf-loading-container {
  display: flex;
  justify-content: center;
  padding: 24px;
}
.nf-end-message {
  text-align: center;
  padding: 16px;
  color: #8c8c8c;
  font-size: 13px;
}
.nf-empty-container {
  margin-top: 40px;
}
/* Animation for new notifications */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.nf-notification-item {
  animation: fadeIn 0.3s ease-out;
  animation-fill-mode: both;
}
/* Responsive adjustments */
@media (min-width: 768px) {
  .nf-feed-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .nf-filter-container {
    justify-content: flex-end;
  }
}
@media (max-width: 576px) {
  .nf-filter-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .nf-feed-header {
    padding: 12px;
  }
  
  .nf-notification-item {
    margin: 0 6px 6px;
    padding: 10px 12px !important;
  }
  
  .nf-date-header {
    padding: 8px 12px;
  }
}
/* Responsive adjustments for simplified filter container */
@media (max-width: 576px) {
  .nf-feed-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }
  
  .nf-filter-container {
    width: 100%;
    justify-content: space-between;
  }
  
  .nf-filter-container .ant-select {
    width: 100% !important; 
  }
  
  .nf-notification-item:after {
    display: none;
  }
}
/* Dark Mode Support (can be expanded with theme context) */
.dark-theme .nf-feed-container {
  background-color: #141414;
}
.dark-theme .nf-feed-header,
.dark-theme .nf-notification-item {
  background-color: #1f1f1f;
  border-color: #303030;
}
.dark-theme .nf-date-header {
  background-color: #141414;
  color: #d9d9d9;
  border-color: #303030;
}
.dark-theme .nf-notification-item:hover {
  background-color: #262626;
}
.nf-company-text {
  font-style: italic;
  color: #1890ff;
  background-color: #e6f7ff;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 4px;
  margin-right: 8px;
  display: inline-block;
  border: 1px solid #91d5ff;
  font-size: 12px;
  font-weight: normal;
}
.nf-company-name {
  font-size: 12px;
  margin-left: 4px;
  margin-right: 8px;
  color: #666;
}/* NewsTour styles */

.news-tour-tooltip {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.news-tour-helper-button {
  transition: all 0.3s ease;
  z-index: 1000;
}

.news-tour-helper-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(71, 65, 104, 0.25);
}

/* Joyride customizations */
.news-tour-tooltip .react-joyride__tooltip {
  border-radius: 8px;
  padding: 10px;
}

.news-tour-tooltip h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #474168;
}

.news-tour-tooltip .joyride-button-next:hover {
  background-color: #5c5682 !important; /* Slightly lighter */
}

.news-tour-tooltip .joyride-button-back:hover {
  color: #5c5682 !important;
  background-color: rgba(71, 65, 104, 0.1) !important;
}

/* Special spotlight effect */
.__floater__body {
  font-size: 14px;
  line-height: 1.5;
}

.__floater__arrow {
  transition: transform 0.2s ease;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  .news-tour-helper-button {
    bottom: 70px !important; /* Adjust button position on mobile to account for mobile menu */
    right: 15px !important;
  }
  
  .news-tour-tooltip h2 {
    font-size: 16px;
  }

  .news-tour-tooltip div[role="dialog"] {
    max-width: 90% !important;
  }
}.messaging-container {
    display: flex;
    height: 100% !important; /* Subtract header (64px) and breadcrumb (30px) */
    width: 100%;
}

.left-panel {
    width: 320px;
    background: white;
    border: 1px solid #e0e4e8;
    display: flex;
    flex-direction: column;
    border-radius:6px ;
    margin: 7px;
}

/* Remove these styles */
.tab-container,
.tab,
.tab.active {
    /* Remove these style blocks completely */
}

.search-bar {
    padding: 15px; /* Increased padding */
    border-bottom: 1px solid #ddd;
}

.search-bar input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.search-bar input:focus {
    outline: none;
    border-color: #2c3e50;
    background: white;
}

.message-list {
    overflow-y: auto;
    flex: 1;
    height: calc(100vh - 120px); /* Adjust based on your header height */
    padding: 10px;
}

.infinite-scroll-component {
    overflow: visible !important;
}

.message-item {
    padding: 15px;
    border-bottom: 1px solid #e0e4e8;
    transition: all 0.2s ease;
}

.message-item:hover {
    background-color: #f1f4f8;
}

.message-item.selected {
    background-color: #e8eef7;
    border-left: 3px solid #2c3e50;
}

.message-from {
    font-weight: bold;
    margin-bottom: 4px;
}

.message-subject {
    color: #666;
    font-size: 14px;
}

/* Chat container structure improvements */
.right-panel {
    flex: 1;
    background: white;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e0e4e8 !important;
    margin: 5px;
}

.chat-messages-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.chat-messages {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 !important; /* Remove all padding */
    background: #f8f9fa;
    overflow-y: auto;
}

.chat-input-area {
    flex-shrink: 0;
}

.message-detail {
    padding: 20px;
}

.message-detail h2 {
    margin: 0 0 15px 0;
}

.sender {
    color: #666;
    margin-bottom: 20px;
}

.content {
    line-height: 1.6;
}

/* Update the no-message display */
.no-message {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 15px;
    font-weight: 500;
}

.chat-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #e0e4e8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.chat-header h3 {
    color: #2c3e50;
    font-size: 18px;
    margin-bottom: 5px;
}

.chat-header p {
    margin: 5px 0 0;
    color: #666;
    font-size: 14px;
}

.message {
    display: flex;
    align-items: flex-start; /* 'right' is not a valid value for align-items */
    gap: 0; /* Remove gap that creates extra space */
    width: 100vw !important; /* Use viewport width instead of % */
    max-width: 100% !important; /* Ensure it doesn't exceed container */
  
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-out;
    transform-origin: center;
}

.message.sent {
    justify-content: flex-end;
    margin-right: 0 !important; 
}

.message-avatar {
    margin-top: 4px;
}

.message-content {
    display: flex;
    flex-direction: column;
    max-width: 60%; /* Set max-width for content container */
    min-width: 200px; /* Add minimum width */
}

.message-username {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    margin-left: 12px;
}

.message-bubble {
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    width: 100%; /* Make bubble fill content width */
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.message.sent .message-bubble {
    background: #2c3e50;
    color: white;
}

.message.received .message-bubble {
    background: white;
    border: 1px solid #e0e4e8;
}

.message-text {
    margin-bottom: 4px;
}

.message-text.translated {
    animation: translateFadeIn 0.3s ease-out;
    max-height: 300px;
    overflow: auto;
}

/* Add these styles for message translations to match MessageComment.css */
.message-translated-content {
    position: relative;
    padding: 4px; /* Reduced from 8px to 4px */
    border-radius: 4px; /* Reduced from 5px to 4px */
    background-color: #f8f0ff; /* Light purple background */
    border-left: 3px solid #722ed1; /* Purple border */
    margin: 2px 0; /* Reduced from 4px 0 to 2px 0 */
    transition: all 0.3s ease;
}

.message-translation-header {
    display: flex;
    align-items: center;
    gap: 3px; /* Reduced from 4px to 3px */
    font-size: 10px; /* Reduced from 11px to 10px */
    color: #722ed1; /* Purple color */
    margin-bottom: 2px; /* Reduced from 4px to 2px */
    font-weight: 500;
}

.message-translation-icon {
    display: flex;
    align-items: center;
    color: #722ed1; /* Purple color */
}

.message-translation-label {
    font-style: italic;
}

.message-translation-body {
    color: #333;
    line-height: 1.3; /* Reduced from 1.5 to 1.3 */
    font-size: 13px; /* Reduced from 14px to 13px */
    margin: 0; /* Zero margin */
}

/* Animation for translation transition */
@keyframes translateFadeIn {
    from { 
        opacity: 0;
        transform: translateY(-5px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button styling to match MessageComment.css */
.message-actions {
    display: flex;
    margin-top: 2px; /* Reduced from 5px to 2px */
    gap: 4px; /* Reduced from 6px to 4px */
}

.message-translate-btn {
    padding: 0 8px;
    height: 28px;
    font-size: 13px;
    color: #6c757d;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.message-translate-btn:hover {
    color: #722ed1; /* Purple theme color */
    background: rgba(114, 46, 209, 0.05);
    opacity: 1;
}

.message-translate-btn.active-translation {
    color: #722ed1; /* Purple color */
    background-color: rgba(114, 46, 209, 0.1);
    opacity: 1;
}

.message-translate-btn.active-translation:hover {
    background-color: rgba(114, 46, 209, 0.2);
}

.message-ai-btn {
    padding: 0 8px;
    height: 28px;
    font-size: 13px;
    color: #6c757d;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.message-ai-btn:hover {
    color: #722ed1; /* Purple theme color */
    background: rgba(114, 46, 209, 0.05);
    opacity: 1;
}

.message-time {
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.8;
}

/* Add these styles for AI Response functionality */

/* Message actions row */
.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* AI response button */
.message-ai-btn {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    color: #666;
    display: flex !important;
    align-items: center !important;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.message-bubble:hover + .message-actions .message-ai-btn,
.message-actions:hover .message-ai-btn {
    opacity: 1;
}

/* AI Generate button */
.ai-generate-button {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.ai-generate-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* AI Response Modal */
.ai-response-modal .ant-modal-content {
    border-radius: 12px;
    overflow: hidden;
}

.ai-response-modal .ant-modal-header {
    padding: 16px 24px;
    background: #f9f9f9;
}

.ai-response-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2c3e50;
}

.ai-icon {
    color: #2c3e50;
    font-size: 18px;
}

/* Loading animation */
.ai-response-loading {
    padding: 40px 0;
    text-align: center;
}

.ai-thinking {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.ai-thinking-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #2c3e50;
    animation: ai-thinking 1.4s infinite ease-in-out both;
}

.ai-thinking-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.ai-thinking-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes ai-thinking {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.ai-thinking-text {
    color: #666;
    font-size: 16px;
}

/* Quoted message in modal */
.ai-quoted-message {
    background-color: #f8f9fa;
    border-left: 4px solid #2c3e50;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ai-quoted-message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ai-quoted-message-info {
    display: flex;
    flex-direction: column;
}

.ai-quoted-author {
    font-weight: 500;
    color: #2c3e50;
    font-size: 14px;
}

.ai-quoted-datetime {
    color: #666;
    font-size: 12px;
}

.ai-quoted-message-content {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* Language selection */
.language-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.country-code {
    color: #999;
    font-size: 12px;
}

.chat-input {
    padding: 10px;
    background: white;
    border-top: 1px solid #e0e4e8;
}

.chat-input input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.chat-input input:focus {
    outline: none;
    border-color: #2c3e50;
}

.chat-input button {
    padding: 12px 25px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.chat-input button:hover {
    background: #34495e;
    transform: translateY(-1px);
}

.comment-section {
    position: relative;
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #e0e4e8;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 10;
    height: 80px;
}

.comment-input {
    flex: 1;
    height: 45px; /* Changed from min-height to fixed height */
    padding: 10px 15px; /* Adjusted padding */
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    resize: none; /* Prevent textarea resizing */
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    display: block; /* Added */
    margin: auto 0; /* Added */
}

.comment-button {
    height: 45px; /* Match input height */
    padding: 0 20px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap; /* Prevent button text wrapping */
    display: flex; /* Added */
    align-items: center; /* Added */
    justify-content: center; /* Added */
    margin: auto 0; /* Added */
    gap: 8px; /* Add space between icon and text */
}

.comment-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.comment-button .anticon {
    font-size: 16px;
}

.comment-button:hover {
    background: #34495e;
    transform: translateY(-1px);
}

/* Add these new styles */
.date-divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
    height: 0;
    border-bottom: 1px solid #e0e4e8;
}

.date-divider span {
    background: #f8f9fa;
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    position: relative;
    top: -10px;
}

/* Quote Modal Styles */
.quote-modal .ant-modal-content {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quote-modal .ant-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8e8;
    background: #fafafa;
}

.quote-modal .ant-modal-title {
    font-weight: 600;
    font-size: 16px;
    color: #2c3e50;
}

.quote-modal .ant-modal-body {
    padding: 24px;
}

.quote-modal .ant-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e8e8e8;
    background: #fafafa;
}

.quote-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quote-preview {
    background-color: #f8f9fa;
    border-left: 4px solid #2c3e50;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

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

.quote-preview-from {
    font-size: 14px;
    color: #1a73e8;
    font-weight: 500;
}

.quote-preview-time {
    font-size: 12px;
    color: #666;
}

.quote-preview-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Quoted message in chat styles */
.quoted-message {
    background-color: rgba(26, 115, 232, 0.05);
    border-left: 3px solid #1a73e8;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quoted-message:hover {
    background-color: rgba(26, 115, 232, 0.1);
}

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

.quoted-from {
    color: #1a73e8;
    font-weight: 500;
}

.quoted-time {
    color: #666;
}

.quoted-text {
    color: #555;
    font-size: 13px;
    line-height: 1.4;
}

.message.highlight {
    animation: highlight 2s ease;
}

@keyframes highlight {
    0%, 70% {
        background-color: rgba(26, 115, 232, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

/* Add these styles to control the messaging input */
.comment-input-wrapper .DraftEditor-root {
    height: 36px !important;
    overflow: auto;
}

.comment-input-wrapper .public-DraftEditor-content {
    max-height: 36px !important;
    overflow: auto;
}

.comment-input-wrapper .public-DraftEditorPlaceholder-root {
    height: 36px !important;
    line-height: 24px;
}

/* Modal Input Styles */
.modal-comment-input .DraftEditor-root {
    min-height: 80px !important;
    max-height: 150px !important;
    padding: 12px 16px !important;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.modal-comment-input .DraftEditor-root:hover {
    border-color: #2c3e50;
}

.modal-comment-input .DraftEditor-root:focus-within {
    border-color: #2c3e50;
    box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.1);
}

.modal-comment-input .public-DraftEditor-content {
    min-height: 80px !important;
    max-height: 150px !important;
    font-size: 14px;
    line-height: 1.6;
}

/* Modal Button Styles */
.quote-modal .ant-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
}

.quote-modal .ant-btn {
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.quote-modal .ant-btn-default {
    border: 1px solid #d9d9d9;
    color: #666;
    background: #fff;
}

.quote-modal .ant-btn-default:hover {
    color: #2c3e50;
    border-color: #2c3e50;
    background: #f8f9fa;
}

.quote-modal .ant-btn-primary {
    background: #2c3e50;
    border-color: #2c3e50;
    color: white;
}

.quote-modal .ant-btn-primary:hover {
    background: #34495e;
    border-color: #34495e;
    transform: translateY(-1px);
}

/* Attachment Preview Modal Styles */
.attachment-preview {
    padding: 16px;
    border-radius: 8px;
    background: #f8f9fa;
    margin-bottom: 20px;
}

.file-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    margin-bottom: 16px;
}

.file-preview .anticon {
    color: #2c3e50;
}

.file-preview span {
    color: #2c3e50;
    font-size: 14px;
    font-weight: 500;
}

/* Modal Message Input Styles */
.modal-message-input {
    margin-top: 16px;
}

.modal-message-input .ant-input {
    padding: 12px 16px;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.modal-message-input .ant-input:hover {
    border-color: #2c3e50;
}

.modal-message-input .ant-input:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.1);
}

/* Comment Section in Modal */
.quote-modal .comments-section,
.ant-modal .comments-section {
    padding: 0;
    box-shadow: none;
    border-top: none;
    height: auto;
    min-height: 80px;
}

.quote-modal .comment-input-wrapper,
.ant-modal .comment-input-wrapper {
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    min-height: 80px;
}

.quote-modal .comment-button,
.ant-modal .comment-button {
    height: 40px;
    margin-left: 12px;
    padding: 0 20px;
    font-size: 14px;
    background: #2c3e50;
    border-radius: 6px;
}

.quote-modal .comment-button:hover,
.ant-modal .comment-button:hover {
    background: #34495e;
    transform: translateY(-1px);
}

/* Update comment input wrapper styles */
.comment-input-wrapper {
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    overflow: hidden; /* Add this to hide child element overflow */
    background: #fff;
}

.comment-input-wrapper .DraftEditor-root {
    border: none !important; /* Remove border from editor */
    border-radius: 0 !important; /* Remove border radius from editor */
    height: 36px !important;
    overflow: auto;
    padding: 8px 12px !important;
}

/* Update modal input styles */
.modal-comment-input .DraftEditor-root {
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 5px !important;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Add styles for the new header section */
.conversations-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e4e8;
}

.conversations-header h2 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
    font-weight: 600;
}

.new-conversation-button {
    padding: 8px 12px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.new-conversation-button:hover {
    background: #34495e;
    transform: translateY(-1px);
}

.new-conversation-button .anticon {
    font-size: 14px;
}

/* Add these styles for the spinner */
.ant-spin {
    color: #2c3e50;
}

.ant-spin-dot-item {
    background-color: #2c3e50;
}

/* Enhanced translated text styling for message bubbles - Fixed height issue */
.mh-message-translated-content {
  position: relative;
  padding: 2px 4px; /* Reduced padding */
  border-radius: 4px;
  background-color: #f8f0ff; /* Light purple background */
  border-left: 3px solid #722ed1; /* Purple border */
  margin: 2px 0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: auto; /* Allow height to adjust naturally */
  max-height: none; /* Remove any max height constraints */
}

.mh-message-translation-header {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #722ed1; /* Purple color */
  margin-bottom: 1px; /* Reduced margin */
  font-weight: 500;
  line-height: 1; /* Tighter line height */
}

.mh-message-translation-body {
  color: #333;
  line-height: 1.3;
  font-size: 13px;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  height: auto; /* Let it grow naturally */
}

/* Message bubbles with translations - fix height issue */
.message-text.translated .mh-message-translated-content {
  width: 100%;
  overflow: visible; /* Changed from auto to visible */
  height: auto; /* Let it adjust to content */
}

/* Ensure translations work in both sent and received messages with correct colors */
.message.sent .message-text.translated .mh-message-translated-content {
  border-left-color: #5b25a7; /* Darker purple for sent messages */
  background-color: rgba(114, 46, 209, 0.15); /* More transparent purple */
}

/* Fix colors in dark background messages */
.message.sent .message-text.translated .mh-message-translation-header,
.message.sent .message-text.translated .mh-message-translation-icon,
.message.sent .message-text.translated .mh-message-translation-label {
  color: #d4b6ff; /* Lighter purple for dark backgrounds */
}

.message.sent .message-text.translated .mh-message-translation-body {
  color: #ffffff; /* White text for dark backgrounds */
}

/* Preserve quote styling in translations */
.mh-message-translated-content .quoted-message {
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Ensure quotes inside translations maintain styling */
.message.sent .message-text.translated .mh-message-translated-content .quoted-message {
  background-color: rgba(0, 0, 0, 0.1);
  border-left: 3px solid #ffffff;
}

.message.received .message-text.translated .mh-message-translated-content .quoted-message {
  background-color: #f0f2f5;
  border-left: 3px solid #722ed1;
}
.start-messaging-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 20px'ten 12px'e düşürüldü */
    max-height: calc(90vh - 120px); /* Modal header ve footer için alan bırak */
    position: relative; /* Add position relative */
}

.start-messaging-modal .subject-input {
    margin-bottom: 12px; /* 16px'ten 12px'e düşürüldü */
}

.start-messaging-modal .user-search {
    margin-bottom: 12px; /* 16px'ten 12px'e düşürüldü */
}

.start-messaging-modal .users-list {
    flex: 1;
    height: auto;
    max-height: calc(70vh - 250px); /* Diğer elementler için alan bırak */
    min-height: 150px;
    overflow-y: auto;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    padding: 4px; /* 8px'ten 4px'e düşürüldü */
    margin-bottom: 12px; /* 20px'ten 12px'e düşürüldü */
    scrollbar-width: thin;  /* Firefox için */
    scrollbar-color: #2c3e50 #f0f0f0;  /* Firefox için */
}

/* Webkit tabanlı tarayıcılar için scroll tasarımı */
.start-messaging-modal .users-list::-webkit-scrollbar {
    width: 6px;
}

.start-messaging-modal .users-list::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.start-messaging-modal .users-list::-webkit-scrollbar-thumb {
    background-color: #2c3e50;
    border-radius: 3px;
}

.start-messaging-modal .users-list::-webkit-scrollbar-thumb:hover {
    background-color: #34495e;
}

.start-messaging-modal .user-item {
    padding: 6px 8px; /* Yatay padding korundu, dikey padding azaltıldı */
    border-bottom: 1px solid #f0f0f0;
}

.start-messaging-modal .user-item:last-child {
    border-bottom: none;
}

.start-messaging-modal .user-info {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    gap: 2px; /* Departman ve isim arasındaki boşluğu azalt */
}

.start-messaging-modal .user-name {
    font-weight: 500;
    color: #2c3e50;
}

.start-messaging-modal .user-department {
    font-size: 12px;
    color: #666;
}

.start-messaging-modal .modal-footer {
    position: sticky; /* absolute yerine sticky kullan */
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 12px 0; /* 16px'ten 12px'e düşürüldü */
    display: flex;
    justify-content: flex-end;
    gap: 8px; /* 12px'ten 8px'e düşürüldü */
    border-top: 1px solid #e0e4e8;
    z-index: 1; /* Üstte görünmesi için */
}

.start-messaging-modal .ant-modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.start-messaging-modal .ant-checkbox-wrapper {
    width: 100%;
    margin-left: 0;
}

.start-messaging-modal .ant-checkbox-wrapper:hover {
    background-color: #f8f9fa;
}

.start-messaging-modal {
    max-height: 90vh;
    top: 5vh;
}

.start-messaging-modal .ant-modal-body {
    overflow-y: auto;
    padding: 16px; /* 24px'ten 16px'e düşürüldü */
    flex: 1;
}
.mobile-messaging-container {
  height: calc(100vh - 164px);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.mobile-header {
  padding: 16px;
  border-bottom: 1px solid #e0e4e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-header h2 {
  margin: 0;
  font-size: 20px;
}

.new-message-button {
  padding: 8px 16px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

.mobile-conversation-list {
  height: 100%;
  overflow-y: auto;
}

.mobile-message-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #e0e4e8;
  gap: 12px;
  align-items: center;
}

.message-info {
  flex: 1;
}

.mobile-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-chat-header {
  padding: 12px;
  border-bottom: 1px solid #e0e4e8;
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-button {
  background: none;
  border: none;
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
}

.header-info {
  flex: 1;
}

.header-info h3 {
  margin: 0;
  font-size: 16px;
}

.header-info p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #666;
}

.mobile-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8f9fa;
}

.mobile-message {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.mobile-message.sent {
  justify-content: flex-end;
}

.mobile-message .message-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 80%;
}

.mobile-message.sent .message-bubble {
  background: #2c3e50;
  color: white;
}

.mobile-message.received .message-bubble {
  background: white;
  border: 1px solid #e0e4e8;
}

.mobile-message .message-time {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.search-bar {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e4e8;
}

.search-bar input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  font-size: 14px;
}

.mobile-message-input {
  padding: 8px;
  background: white;
  border-top: 1px solid #e0e4e8;
  position: sticky;
  bottom: 0;
}

.mobile-comment-wrapper {
  display: flex;
  align-items: center;
  background: white;
  padding: 8px;
  gap: 8px;
}

.mobile-comment-input {
  flex: 1;
  border: 1px solid #e0e4e8;
  border-radius: 20px;
  padding: 8px 12px;
  min-height: 40px;
  max-height: 100px;
  overflow-y: auto;
  background: #f8f9fa;
}

.mobile-send-button {
  padding: 8px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.profile-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-initials {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: bold;
  color: #1890ff;
}

.change-photo-btn {
  cursor: pointer;
  padding: 4px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  margin-top: 8px;
  text-align: center;
}

.change-photo-btn:hover {
  border-color: #4096ff;
  color: #4096ff;
}

.avatar-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.avatar-wrapper.clickable {
  cursor: pointer;
}

.avatar-wrapper.clickable:hover .profile-image {
  opacity: 0.95;
}

.linkedin-style-modal {
  top: 20px;
}

.linkedin-style-modal .ant-modal-content {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.linkedin-style-modal .ant-modal-close {
  top: -30px;
  right: -30px;
}

.linkedin-style-modal .ant-modal-close-x {
  color: white;
  font-size: 20px;
}

.modal-avatar-image {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.profile-container {
  min-height: calc(100vh - 64px);
  height: auto;
  padding: 0.8rem;
  padding-bottom: 1rem;
  background: linear-gradient(135deg, #e4e9f2 0%, #e4e9f2 100%);
  overflow: auto;
}

.profile-inner {
  min-height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.profile-header {
  padding: 1rem 1rem;
  border-bottom: 1px solid #fafafa;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16px 16px 0 0;
}

.profile-header-buttons {
  margin-left: auto;
}

.profile-header h1 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 0;
}

.profile-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 0 10px;
  overflow: visible;
}

.profile-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.profile-image-section {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  border-right: 1px solid #eef1f7;
  transition: opacity 0.2s;
  margin-bottom: 16px;
  text-align: center;
}

/* Avatar ve resim stilleri */
.profile-image, .profile-initials {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.profile-image {
  object-fit: cover;
  transition: transform 0.3s ease;
}

.profile-initials {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: white;
  font-weight: bold;
}

/* Form alanı stilleri - CompanyProfile ile eşleşecek şekilde */
.profile-details {
  padding: auto 1rem;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Profile details içindeki form elemanını genişlet */
.profile-details form {
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* İki sütunlu grid yapısı - CompanyProfile ile aynı */
.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: 100%;
}

/* İki sütunlu özel grid yapısı - 2 sütun, 4 satır - optimize edilmiş */
.user-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* İki eşit sütun */
  grid-template-rows: repeat(4, 1fr);    /* Dört eşit satır - daha iyi dikey dağılım için */
  gap: 20px;                             /* Alanlar arası boşluğu artır */
  width: 100%;                           /* Mevcut alana tam sığdır */
  height: 100%;                          /* Dikey alanı tamamen doldur */
  align-content: stretch;                /* İçeriği dikey olarak genişlet */
  align-items: stretch;                  /* Öğeleri dikey olarak genişlet */
}

/* Son alan (7. eleman) birinci sütunda kalacak ve genişleyecek */
.user-profile-grid > *:nth-child(7) {
  grid-column: 1;
  grid-row: 4;                            /* Son satırda konumlandır */
}

/* Form grup stilleri - eşit alanlar için optimize edildi */
.form-group {
  background: #f8fafc;
  padding: 18px;                         /* Padding artırıldı */
  border-radius: 12px;
  border: 1px solid #f0f2f5;
  height: 100%;                          /* Yükseklik alanı tamamen doldur */
  display: flex;
  flex-direction: column;
  min-height: 120px;                     /* Minimum yüksekliği artır */
  justify-content: space-between;        /* İçeriği dikey olarak dağıt */
}

.form-group label {
  font-weight: 600;
  margin-bottom: 15px;                   /* Label altı boşluğu artır */
  display: block;
  color: #64748b;
  font-size: 0.95rem;                    /* Font büyüklüğü artırıldı */
}

.form-group p {
  padding: 15px 10px;                     /* Padding artırıldı */
  margin: 0;
  border-radius: 6px;
  background-color: #fafbfc;
  color: #1e293b;
  font-size: 1.05rem;                    /* Font büyüklüğü artırıldı */
  margin-top: auto;
  flex: 1;                               /* İçerik alanını genişlet */
  display: flex;
  align-items: center;                   /* İçeriği dikey olarak ortala */
}

/* Input alanları stilleri - tam genişlik için */
.form-group input {
  width: 100%;
  padding: 12px;                         /* Padding artırıldı */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1.05rem;                    /* Font büyüklüğü artırıldı */
  transition: all 0.3s ease;
  height: 45px;                          /* Input yüksekliği artırıldı */
}

/* Telefon girişi stilleri */
.phone-group {
  display: flex;
  gap: 10px;                             /* Boşluğu artır */
  width: 100%;
  height: 45px;                          /* Yükseklik tanımlandı */
}

.country-code {
  width: 80px !important;                /* Genişliği artırıldı */
  flex-shrink: 0;
}

.phone-main {
  flex: 1;
}

/* Modal ve diğer bileşen stilleri */
.profile-image-modal {
  top: 20px;
}

.profile-image-modal .ant-modal-content {
  background: transparent;
  box-shadow: none;
}

.profile-image-modal .ant-modal-close {
  color: white;
  top: -30px;
  right: -30px;
}

.profile-image-modal .ant-modal-body {
  padding: 0;
}

.modal-profile-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button-group {
  display: flex;
  gap: 8px;
}

.clickable {
  cursor: pointer !important;
  transition: opacity 0.2s;
}

.clickable:hover {
  opacity: 0.9;
}

/* Loading ekranı stilleri */
.loading-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* Responsive tasarım - CompanyProfile ile tutarlı */
@media (max-width: 1024px) {
  .profile-content {
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100%;
  }
  
  .profile-image-section {
    border-right: none;
    border-bottom: 1px solid #eef1f7;
    padding: 1rem;
  }
  
  .user-profile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    grid-template-rows: auto;            /* Satır yüksekliğini içeriğe göre otomatik ayarla */
  }
}

@media (max-width: 768px) {
  .two-column-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0.75rem;
  }
  
  .profile-header-buttons {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  
  .profile-details {
    padding: 0.5rem;
  }
  
  .user-profile-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .user-profile-grid > *:nth-child(7) {
    grid-column: auto;
    grid-row: auto;                       /* Tek sütunda sıralama otomatik olsun */
  }
  
  .form-group {
    min-height: 100px;
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: 0.5rem;
  }
  
  .profile-inner {
    border-radius: 8px;
  }
  
  .profile-initials, .profile-image {
    width: 150px;
    height: 150px;
    font-size: 48px;
  }
}
.company-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  min-height: 220px; /* Sabit minimum yükseklik */
  position: relative; /* Position relative ekle */
}

.avatar-wrapper {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
  background: #f5f5f5;
  flex-shrink: 0; /* Prevent shrinking */
}

.avatar-wrapper.clickable {
  cursor: pointer;
}

.avatar-wrapper:hover {
  border-color: #1890ff;
}

.company-logo,
.company-initials {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1890ff;
  color: white;
  font-size: 48px;
}

.edit-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .edit-overlay {
  opacity: 1;
}

.edit-button {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.edit-button:hover {
  text-decoration: underline;
}

/* Upload buton stili */
.ant-upload-wrapper {
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.ant-btn-link {
  color: #1890ff;
  font-size: 14px;
  height: auto;
  padding: 4px 8px;
}

/* Modal stilleri */
.company-logo-modal {
  text-align: center;
}

.company-logo-modal .ant-modal-content {
  background: transparent;
  box-shadow: none;
}

.company-logo-modal .ant-modal-body {
  padding: 0;
}

.modal-logo-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.upload-button-wrapper {
  width: 100%;
  text-align: center;
  position: absolute; /* Mutlak konumlandırma */
  bottom: 0; /* Alt kısımda sabit pozisyon */
  left: 0;
  padding: 8px 0;
}

.change-photo-btn {
  background: none;
  border: none;
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 16px;
  transition: all 0.3s ease;
  white-space: nowrap; /* Butonu tek satırda tut */
}

.change-photo-btn:hover {
  color: #40a9ff;
  text-decoration: underline;
}

.edit-text {
  font-size: 14px;
  font-weight: 500;
}
.company-profile-container {
  min-height: 100vh;
  padding: 24px;
  background-color: #f0f2f5;
  overflow-y: auto;
}

.company-profile-container .ant-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.company-profile-container .ant-descriptions-item-label {
  font-weight: 500;
  width: 150px;
}

.company-profile-container .ant-form-item {
  margin-bottom: 16px;
}

.profile-container {
  padding: 24px;
  background-color: #f0f2f5;
  height: 100vh;
  overflow-y: auto;
}

.profile-inner {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 24px;
  height: auto;
  min-height: 100%;
  overflow: visible;
}
  

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

.profile-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.profile-header-buttons {
  display: flex;
  gap: 8px;
}

.profile-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  padding: 16px;
  height: auto !important;
  min-height: unset;
}

.profile-sidebar {
  text-align: center;
  padding: 24px;
  position: sticky;
  top: 24px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

.profile-details {
  display: grid !important; /* Force grid display */
  grid-template-columns: repeat(2, 1fr) !important; /* Force 2 columns */
  gap: 16px;
  padding: 24px;
  width: 100%;
  height: auto;
  overflow: visible;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.profile-header {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.company-avatar-container {
  width: 160px;
  height: 160px;
  margin-bottom: 16px;
}

.company-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.company-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1890ff;
  color: white;
  font-size: 48px;
  border-radius: 50%;
}

.change-photo-btn {
  margin-top: 8px;
  text-align: center;
}

.modal-logo-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.edit-buttons {
  display: flex;
  align-items: center;
}

.ant-card-extra {
  display: flex;
  align-items: center;
}

.profile-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.profile-header-container h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.profile-header-buttons {
  display: flex;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 8px;
}

/* Description list styling */
.ant-descriptions {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.ant-descriptions-item {
  padding: 16px 24px !important;
}

.ant-descriptions-item-label {
  width: 180px !important;
  color: #666;
  font-weight: 500 !important;
}

.ant-descriptions-item-content {
  color: #333;
}

.ant-descriptions-row > th,
.ant-descriptions-row > td {
  padding: 16px 24px;
}

/* Form styling */
.ant-form-vertical .ant-form-item {
  margin-bottom: 24px !important;
}

.ant-form-item-label {
  padding-bottom: 8px !important;
}

.ant-form-item-label > label {
  color: #666;
  font-weight: 500;
}

.ant-form-item-required::before {
  color: #ff4d4f !important;
}

.ant-input, .ant-input-affix-wrapper {
  padding: 8px 12px;
  border-radius: 6px;
  height: 40px;
}

.ant-input:focus, .ant-input-affix-wrapper:focus {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ant-input-textarea {
  min-height: 120px;
}

/* Card improvements */
.ant-card {
  border-radius: 8px;
  overflow: hidden;
}

.ant-card-body {
  padding: 0 !important;
  height: auto !important;
  padding: 24px !important;
  overflow: visible;
}

/* Section spacing */
.form-section {
  margin-bottom: 32px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* Required field indicator styling */
.required-field::before {
  display: inline-block;
  margin-right: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}

/* Compact form styles */
.compact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
  display: block !important;
  height: auto;
  overflow: visible;
}

.compact-form .ant-form-item {
  margin-bottom: 16px;
  margin-bottom: 0;
}

.compact-form .form-section {
  margin-bottom: 16px;
}

.compact-form .form-section-title {
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 4px;
}

.compact-form .ant-input {
  padding: 4px 8px;
}

.compact-form .ant-form-item-label {
  padding-bottom: 8px;
}

.compact-form label {
  font-size: 13px;
}

.compact-form textarea.ant-input {
  resize: none;
}

.compact-form .ant-row {
  margin-bottom: 24px;
}

.compact-form .ant-input-textarea {
  min-height: auto;
}

.compact-form .ant-input-textarea textarea {
  min-height: 40px;
}

/* Description list compact styles */
.ant-descriptions.ant-descriptions-small {
  font-size: 13px;
}

.ant-descriptions-small .ant-descriptions-item {
  padding: 8px !important;
}

.ant-descriptions-small .ant-descriptions-item-label {
  width: auto !important;
}

.profile-image-section {
  margin-bottom: 16px;
}

.profile-image-section.clickable {
  cursor: pointer;
}

.form-group {
  margin-bottom: 16px;
  width: 100%;
  min-width: 0;
  position: relative;
  background: #fafafa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  height: fit-content;
  transition: all 0.3s ease;
}

.form-group:hover {
  background: #f5f5f5;
  border-color: #e6e6e6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.form-group label {
  display: block;
  color: #262626;
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 14px;
}

.form-group p {
  margin: 8px 0;
  color: #595959;
  font-size: 14px;
  padding: 8px 0;
  background: #fff;
  border-radius: 4px;
  padding: 8px 12px;
  border: 1px solid #f0f0f0;
}

.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;
  height: 36px;
  font-size: 14px;
  background: #fff;
}

.form-group input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  outline: none;
}

.phone-group {
  display: flex;
  gap: 8px;
}

.phone-group .country-code {
  width: 70px;
  flex-shrink: 0;
  text-align: center;
  color: #595959;
}

.phone-group .phone-main {
  flex: 1;
}

.modal-profile-image {
  max-width: 90vw;
  max-height: 90vh;
  display: block;
}

.profile-image-modal {
  text-align: center;
}

.profile-image-modal .ant-modal-body {
  padding: 0;
}

.compact-card {
  height: auto;
  min-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.compact-card .ant-card-body {
  flex: 1;
  overflow: hidden;
  padding: 0 !important;
  height: auto !important;
  overflow: visible;
  padding: 24px !important;
}

.ant-row {
  margin-bottom: 16px;
}

/* ...existing styles... */

.wide-descriptions.ant-descriptions {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  height: auto;
  overflow: visible;
}

.wide-descriptions .ant-descriptions-row > td,
.wide-descriptions .ant-descriptions-row > th {
  padding: 16px;
}

.wide-descriptions .ant-descriptions-item-label {
  width: 140px !important;
  background-color: #fafafa;
  color: #666;
  font-weight: 500;
}

.wide-descriptions .ant-descriptions-item-content {
  color: #333;
}

.profile-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  padding: 24px;
  min-height: 100%;
}

.profile-avatar-section {
  width: 200px;
  padding: 32px 0;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 240px;
}

.profile-details-section {
  width: 100%;
  max-width: 1200px;
  height: auto;
  overflow: visible;
  padding: 0 24px 24px;
  margin-top: 16px;
}

/* Override any fixed heights or hidden overflows */
.ant-card,
.ant-card-body,
.profile-inner,
.profile-content,
.profile-details,
.profile-sidebar {
  height: auto !important;
  overflow: visible !important;
}

/* Remove any overflow restrictions */
html, body, #root {
  height: 100%;
  overflow-y: auto;
}

.two-column-grid,
.three-column-grid {
  display: unset;
}

.required-label::after {
  content: '*';
  color: #ff4d4f;
  margin-left: 4px;
  font-weight: bold;
}

/* Responsive düzen */
@media (max-width: 1400px) {
  .profile-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1200px) {
  .profile-details {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .profile-details {
    grid-template-columns: 1fr !important;
  }
  
  .profile-content {
    grid-template-columns: 1fr;
  }
}

/* ...existing styles... */

.website-link {
  color: #333;
}

.form-group input[type="url"] {
  color: #1890ff;
}

.form-group input[type="url"]::placeholder {
  color: #bfbfbf;
}.settings-container {
  padding: 24px;
  background: white;
  border-radius: 8px;
  margin: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 150px); /* Viewport height minus header and margins */
  overflow-y: auto; /* Enable vertical scrolling */
}

/* Add smooth scrolling */
.settings-container::-webkit-scrollbar {
  width: 8px;
}

.settings-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.settings-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.settings-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.settings-container h1 {
  margin-bottom: 24px;
  color: #1f1f1f;
  font-size: 24px;
}

.settings-form {
  max-width: 1200px;
  margin: 0;
  padding: 0 24px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
}

.settings-column {
  min-width: 0;
}

.save-button {
  margin-top: 16px;
}

.settings-form .ant-form-item {
  margin-bottom: 24px;
}

.roles-section {
  margin-top: 16px;
}

.add-role-button {
  margin-bottom: 16px;
}

.ant-table {
  background: white;
  border-radius: 8px;
}

.ant-tabs-nav {
  margin-bottom: 24px;
}

.combined-format-preview {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
  border: 1px solid #e8e8e8;
}

.preview-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #555;
}

.preview-value {
  font-family: monospace;
  background-color: #eaeaea;
  padding: 6px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
}

.preview-example {
  font-size: 16px;
  color: #722ed1; /* Changed from #1890ff to purple */
  font-weight: 500;
}

/* Country selection styles */
.country-option {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.country-flag {
  width: 24px;
  height: 16px;
  margin-right: 10px;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  object-fit: cover;
}

.country-code {
  margin-left: 8px;
  color: #999;
  font-size: 12px;
}

.location-select-item .ant-select-selector {
  height: 40px !important;
}

.location-select-item .ant-select-selection-item {
  display: flex;
  align-items: center;
  line-height: 38px;
}

.location-select-item .country-flag {
  margin-right: 8px;
}

.settings-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #722ed1; /* Changed from #1890ff to purple */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.section-icon {
  font-size: 24px;
  color: #722ed1; /* Changed from #1890ff to purple */
  margin-right: 12px;
}

.settings-section-title {
  margin-bottom: 0;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}

.preview-content {
  display: flex;
  align-items: center;
  background-color: #eaeaea;
  border-radius: 4px;
  padding: 12px;
}

.preview-format {
  font-family: monospace;
  font-size: 14px;
}

.preview-arrow {
  color: #722ed1;
  margin: 0 12px;
  font-weight: bold;
  font-size: 18px;
}

.preview-example {
  font-size: 16px;
  color: #722ed1;
  font-weight: 500;
}

/* Subscription tab styles */
.subscription-container {
  padding: 0 16px;
}

.subscription-card {
  margin-bottom: 12px !important;
  background-color: #f9f0ff;
  border: 1px solid #d3adf7;
  border-radius: 8px;
  height: 100px !important;   
}

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

.subscription-header h3 {
  margin: 0;
  font-size: 18px;
  color: #722ed1;
}

.subscription-expiry {
  color: #666;
  margin: 0;
}

.subscription-metrics {
  margin-top: 24px;
  margin-bottom: 24px;
}

.metric-card {
  margin-bottom: 16px;
  height: 100%;
  border-radius: 8px;
  transition: all 0.3s;
}

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

.metric-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 500;
}

.metric-icon {
  color: #722ed1;
  font-size: 18px;
  margin-right: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.metric-label {
  color: #666;
  font-size: 13px;
  margin-top: 8px;
}

.upgrade-card {
  background-color: #f9f0ff;
  border: 1px dashed #d3adf7;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upgrade-card-container {
  display: none;
}

.upgrade-content {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upgrade-content h3 {
  color: #722ed1;
  margin-bottom: 8px;
}

.upgrade-content p {
  margin-bottom: 16px;
  color: #666;
}

.subscription-header-row {
  margin-bottom: 16px;
}

.subscription-header-row .subscription-card {
  height: 100px; /* Fixed height for both cards */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  margin-bottom: 0; /* Override the margin to ensure even heights */
  box-sizing: border-box; /* Include padding in the height calculation */
  transition: all 0.3s ease; /* Add transition for hover effect */
}

.subscription-header-row .upgrade-card {
  background: linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%);
  border: 1px dashed #b37feb;
  height: 100px; /* Same fixed height */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 16px;
  box-sizing: border-box; /* Include padding in the height calculation */
  transform: none; /* Remove the scale that was making it larger */
  box-shadow: 0 2px 6px rgba(114, 46, 209, 0.1); /* Lighter shadow by default */
}

/* Make both cards have similar hover effects */
.subscription-header-row .subscription-card:hover,
.subscription-header-row .upgrade-card:hover {
  border: 1px solid #722ed1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(114, 46, 209, 0.15);
}

.upgrade-message {
  font-size: 13px;
  color: #531dab;
  margin-bottom: 10px;
  font-weight: 500;
  text-align: center;
}

.upgrade-button {
  background: linear-gradient(90deg, #722ed1 0%, #531dab 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(114, 46, 209, 0.25);
  font-size: 14px;
  height: 32px;
  padding: 0 16px;
}

.upgrade-button:hover {
  background: linear-gradient(90deg, #7c3adc 0%, #5d25b9 100%);
  box-shadow: 0 4px 8px rgba(114, 46, 209, 0.3);
  transform: translateY(-1px);
}

.upgrade-sparkle {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(114, 46, 209, 0.2) 0%, rgba(114, 46, 209, 0) 70%);
  border-radius: 50%;
  z-index: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
}

.subscription-header-row .upgrade-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0;
  position: relative;
  z-index: 2;
}

.subscription-header-row .upgrade-content h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #722ed1;
  font-weight: 600;
}

.subscription-header-row .upgrade-content p {
  margin-bottom: 8px;
  line-height: 1.2; /* Reduce line height to save space */
}

/* MVP Information Panel Styles */
.mvp-info-row {
  margin-bottom: 24px;
}

.mvp-info-card {
  border: 2px solid #722ed1;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(114, 46, 209, 0.1);
  transition: all 0.3s ease;
}

.mvp-info-card:hover {
  box-shadow: 0 6px 20px rgba(114, 46, 209, 0.15);
  transform: translateY(-2px);
}

.mvp-info-content {
  padding: 24px;
}

.mvp-header h3 {
  color: #722ed1;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.mvp-body p {
  line-height: 1.6;
  color: #444;
  margin-bottom: 16px;
}

.mvp-guarantees {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
  border-left: 4px solid #0ea5e9;
}

.mvp-guarantees p {
  margin-bottom: 8px;
  color: #0c4a6e;
  font-weight: 500;
}

.mvp-expectations {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
  border-left: 4px solid #f59e0b;
}

.mvp-expectations p {
  color: #92400e;
  margin-bottom: 8px;
}

.mvp-feedback {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
  border-left: 4px solid #10b981;
}

.mvp-feedback p {
  color: #065f46;
  margin-bottom: 8px;
}

.mvp-signature {
  text-align: center;
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
  border-radius: 8px;
  border: 1px solid #e879f9;
}

.mvp-signature p {
  color: #a21caf;
  font-size: 16px;
  margin-bottom: 0;
}

.mvp-actions {
  text-align: center;
  margin-top: 24px;
}

.mvp-actions .feedback-button {
  background: linear-gradient(135deg, #722ed1 0%, #9333ea 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  height: auto;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(114, 46, 209, 0.3);
  transition: all 0.3s ease;
}

.mvp-actions .feedback-button:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
  box-shadow: 0 6px 20px rgba(114, 46, 209, 0.4);
  transform: translateY(-2px);
}
.mobile-feed-app {
  min-height: 100vh;
  background: #f4f6f8;
}

.feed-navbar {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 999;
}

.nav-tabs {
  --active-line-height: 2px;
  --active-line-color: #1677ff;
  font-size: 15px;
}

.feed-content {
  padding: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

.feed-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-header {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 16px;
  align-items: start;
  background: linear-gradient(to bottom, #f8f9fa, #fff);
}

.card-header .ant-image {
  width: 80px !important;
  height: 80px !important;
  border-radius: 8px;
  overflow: hidden;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* Prevent text overflow */
}

.header-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-info .ant-tag {
  max-width: fit-content;
}

.status-badge {
  align-self: flex-start;
}

.company-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1677ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
}

.company-details {
  display: flex;
  flex-direction: column;
}

.company-name {
  font-weight: 600;
  font-size: 15px;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  position: relative;
}

.grid-item {
  aspect-ratio: 1;
  overflow: hidden;
}

.grid-item.single {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}

.grid-item:first-child {
  grid-row: span 2;
}

.more-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
}

.card-content {
  padding: 16px;
}

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

.product-meta h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.categories-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.category-chip {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 20px;
  background: #f5f5f5;
  font-size: 13px;
}

.development-status {
  margin-top: 16px;
  background: #fafafa;
  border-radius: 12px;
  padding: 16px;
}

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

.status-header h4 {
  margin: 0;
  font-size: 16px;
}

.developer-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.developer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.dev-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1677ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
}

.dev-status-info {
  flex: 1;
}

.dev-name {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
}

.progress-timeline {
  margin-top: 16px;
}

.action-bar {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}

.empty-state {
  padding: 40px 0;
}

/* Tree Modal Styles */
.tree-modal {
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
}

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

.tree-title {
  font-size: 18px;
  font-weight: 600;
}

.tree-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Pull to refresh customization */
.adm-pull-to-refresh {
  --color: #1677ff;
}

/* Safe area handling */
.adm-floating-bubble {
  bottom: calc(env(safe-area-inset-bottom) + 24px) !important;
}

.mobile-development-container {
  padding: 12px;
  background: #f7f8fa;
}

.mobile-development-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  animation: slideIn 0.3s ease-out;
}

/* Developer List Styles */
.mobile-collapse {
  border: none;
  background: transparent;
}

.mobile-collapse .ant-collapse-header {
  padding: 8px 16px !important;
  background: #fafafa;
}

.mobile-collapse .ant-collapse-header {
  padding: 12px 16px !important;
  background: #fafafa;
}

.mobile-collapse .ant-collapse-header .project-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-collapse .ant-collapse-header .project-name {
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.mobile-collapse .ant-collapse-header .project-manager {
  font-size: 12px;
  color: #666;
}

.mobile-collapse .ant-collapse-content-box {
  padding: 12px 16px !important;
}

.project-manager-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.project-manager-info .ant-avatar {
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
}

.mobile-collapse .ant-collapse-content-box {
  padding: 0 !important;
}

.ant-list-item {
  padding: 12px 16px !important;
}

.ant-list-item-meta {
  align-items: center;
}

.ant-list-item-meta-avatar {
  margin-right: 12px !important;
}

.ant-list-item-action {
  margin-left: 16px !important;
}

.mobile-collapse .ant-collapse-ghost {
  background: transparent;
}

.mobile-collapse .ant-collapse-content {
  background: transparent;
}

.mobile-collapse .ant-list-item {
  padding: 8px 0;
  border-bottom: none;
}

.mobile-collapse .ant-steps-inline {
  max-width: 100%;
}

.mobile-collapse .ant-steps-inline .ant-steps-item {
  margin-right: 12px;
}

/* Drawer Styles */
.mobile-drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-section {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.product-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* Tree Styles */
.mobile-tree {
  margin: 12px 0;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-collapse .ant-steps-inline {
  width: 100% !important;
}

.mobile-collapse .ant-steps-item {
  margin-right: 4px !important;
  min-width: auto !important;
}

.mobile-collapse .ant-steps-item-title {
  font-size: 12px !important;
  padding-right: 4px !important;
}

.mobile-collapse .ant-steps-item-icon {
  margin-right: 4px !important;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost {
  margin-left: -16px;
  margin-right: -16px;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost .ant-collapse-header {
  padding: 8px 16px !important;
  color: #666;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.02);
  margin-bottom: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost .ant-collapse-header .ant-avatar {
  margin-right: 8px;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost .ant-collapse-content-box {
  padding: 8px 16px !important;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost .ant-collapse-header .ant-btn {
  padding: 4px 8px;
  height: auto;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost .ant-collapse-header .anticon {
  font-size: 16px;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-ghost .ant-collapse-header .ant-space {
  margin-right: -8px;
}

/* Modal styles for mobile */
.ant-modal-content {
  margin: 0 12px;
  border-radius: 12px;
}

.ant-modal-header {
  border-radius: 12px 12px 0 0;
}

.ant-tree {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 8px;
}

.ant-tree-node-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ant-tree-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ...existing styles... */

/* Developer view styles */
.developer-header {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  padding: 16px;
  align-items: start;
  background: linear-gradient(to bottom, #f8f9fa, #fff);
}

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

.developer-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.developer-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #666;
  font-size: 13px;
}

.developer-projects {
  padding: 0 16px 16px;
}

/* ...existing styles... */

.mobile-development-tabs {
  .ant-tabs-nav {
    margin-bottom: 12px;
    padding: 0 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }

  .ant-tabs-tab {
    padding: 12px 16px;
    font-size: 14px;
    
    &.ant-tabs-tab-active {
      font-weight: 500;
    }
  }

  .ant-tabs-ink-bar {
    background: #1677ff;
  }
}

.mobile-development-list {
  padding: 0 4px;
}

/* ...existing styles... */

/* New Search Header Design */
.mobile-search-header {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-bottom: 12px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}

.search-controls {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 12px;
  height: 44px;
}

.search-input-wrapper .ant-input-search {
  width: 100%;
  background: transparent;
}

.search-input-wrapper .ant-input-search .ant-input {
  background: transparent;
  border: none;
  height: 44px;
  font-size: 15px;
  padding: 0;
}

.search-input-wrapper .ant-input-search .ant-input:focus {
  box-shadow: none;
}

.search-input-wrapper .ant-input-search .ant-input-search-button {
  display: none;
}

.filter-button {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border: 1px solid #626f92; /* colorPrimary */
  background: #272637; /*colorMenuBackground */
  color: #f9c4ac; /* colorHeaderText */
}

.filter-button:hover {
  border-color: #f9c4ac; /* colorHeaderText */
  background: #474168; /*colorHeaderBackground */
  color: #f9c4ac; /* colorHeaderText */
}

.filter-button:active {
  border-color: #626f92; /* colorPrimary */
  background: #272637; /* colorMenuBackground */
  color: #f9c4ac; /* colorHeaderText */
}

.filter-button.filter-active {
  border-color: #f9c4ac; /* colorHeaderText */
  background: #474168; /* colorHeaderBackground */
  color: #f9c4ac; /* colorHeaderText */
}

.filter-button.filter-active:hover {
  border-color: #626f92; /* colorPrimary */
  background: #272637; /* colorMenuBackground */
  color: #f9c4ac; /* colorHeaderText */
}


.quick-filters {
  display: flex;
  padding: 8px 12px;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fafafa;
}

.quick-filter-tag {
  flex: none;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  transition: all 0.2s;
}

.quick-filter-tag.active {
  background: #1677ff;
  color: #fff;
  border-color: #1677ff;
}

/* ...existing styles... */

.mobile-search-header {
  background: #fff;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.search-row {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.search-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 0 8px;
}

.search-wrapper .ant-input-search {
  width: 100%;
  background: transparent;
}

.search-wrapper .ant-input-search .ant-input {
  background: transparent;
  border: none;
  padding: 8px;
  height: 40px;
  font-size: 15px;
}

.search-wrapper .ant-input-search .ant-input:focus {
  box-shadow: none;
}

.search-wrapper .ant-input-search-button {
  display: none;
}

.filter-button {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.filter-tags {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.filter-tag {
  flex: none;
  padding: 4px 12px;
  background: #f5f5f5;
  border-radius: 16px;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}

.filter-tag.active {
  background: #e6f4ff;
  color: #1677ff;
}


.mobile-development-content {
  padding: 12px;
}

/* Ensure drawer appears above other content */
.ant-drawer {
  z-index: 1050 !important;
}

/* Updated Filter Drawer Styles */
.filter-drawer .ant-drawer-body {
  padding: 0 !important;
}

.filter-drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.filter-drawer-body {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}

.filter-drawer-body .ant-space {
  gap: 6px !important;
}

.filter-drawer-body .ant-space-item:last-child {
  margin-bottom: 0 !important;
}

.filter-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.filter-actions {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  margin-top: 0;
}

.filter-actions .ant-btn {
  flex: 1;
  height: 40px;
}

/* DatePicker styles */
.ant-picker {
  width: 100%;
}

.ant-select-dropdown {
  max-height: 300px;
}


.ant-drawer-bottom.filter-drawer .ant-drawer-content-wrapper {
  border-radius: 16px 16px 0 0;
}

.ant-select-item {
  padding: 8px 12px;
}

/* Mobile DatePicker styles */
.mobile-date-picker.ant-picker {
  width: 100%;
}

.mobile-date-picker.ant-picker .ant-picker-input {
  flex-direction: row-reverse;
}

.mobile-date-picker.ant-picker .ant-picker-input > input {
  text-align: right;
  font-size: 14px;
}

.mobile-date-picker.ant-picker .ant-picker-suffix {
  margin-left: 0;
  margin-right: 8px;
}

/* RangePicker mobile styles */
.mobile-range-picker.ant-picker-range {
  width: 100%;
}

.mobile-range-picker .ant-picker-input {
  width: 50%;
  min-width: 0;
}

.mobile-range-picker .ant-picker-input > input {
  font-size: 13px;
  text-align: center;
}

.mobile-range-picker .ant-picker-input > input {
  font-size: 13px;
  text-align: center;
  padding: 4px;
}

/* DatePicker Dropdown Panel */
.ant-picker-dropdown .ant-picker-panel-container {
  margin: 0 12px;
  max-width: calc(100vw - 24px);
}

.ant-picker-dropdown .ant-picker-header {
  padding: 8px;
}

.ant-picker-dropdown .ant-picker-content {
  width: 100%;
}

.ant-picker-dropdown .ant-picker-cell {
  padding: 2px 0;
}

/* Updated RangePicker mobile styles */
.mobile-range-picker.ant-picker-range {
  width: 100%;
}

.mobile-range-picker .ant-picker-input {
  width: 50%;
  min-width: 0;
}

.mobile-range-picker .ant-picker-input > input {
  font-size: 13px;
  text-align: center;
  padding: 4px;
}

/* DatePicker Panel Container Styles */
.ant-picker-dropdown {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: fixed !important;
}

.ant-picker-dropdown .ant-picker-panel-container {
  margin: 0;
  max-width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}

.ant-picker-dropdown .ant-picker-panels {
  flex-direction: column !important;
}

.ant-picker-dropdown .ant-picker-panel {
  width: 100% !important;
}

.ant-picker-dropdown .ant-picker-content {
  width: 100%;
  padding: 0 8px;
}

.ant-picker-dropdown .ant-picker-cell {
  padding: 3px 0;
  height: 36px;
}

.ant-picker-dropdown .ant-picker-header {
  padding: 12px 8px;
}

.ant-picker-dropdown .ant-picker-header button {
  padding: 0 8px;
}

.ant-picker-dropdown .ant-picker-footer {
  padding: 8px;
  border-top: 1px solid #f0f0f0;
}

/* Time picker adjustments */
.ant-picker-time-panel {
  width: 100% !important;
}

.ant-picker-time-panel-column {
  width: 33.33% !important;
  height: 220px !important;
}

.ant-picker-time-panel-cell {
  padding: 4px 0;
  height: 32px;
  line-height: 32px;
}

/* ...existing code... */

/* Updated Developer view styles */
.developer-header {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  padding: 16px;
  align-items: start;
  background: linear-gradient(to bottom, #f8f9fa, #fff);
}

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

.developer-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.ant-list-item-meta-content {
  flex: 1;
  min-width: 0;
}

.ant-list-item-meta-title {
  margin-bottom: 8px !important;
  font-size: 15px !important;
}

.ant-list-item-meta-description {
  line-height: 1.4;
}

/* ...existing code... */

/* Developer Product Node Styles */
.developer-product-node {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.developer-product-header {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 12px;
  padding: 12px;
  align-items: center;
  background: #f8f9fa;
  border-bottom: 1px solid #f0f0f0;
}

.developer-product-header .product-image {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
}

.developer-product-header .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.developer-product-header .product-info {
  min-width: 0;
  padding-right: 8px;
}

.developer-product-header .product-info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.developer-product-header .product-code {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.developer-product-header .product-categories {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.developer-product-header .category-tag {
  font-size: 11px;
  padding: 1px 6px;
  background: #f0f0f0;
  border-radius: 4px;
  color: #666;
}

.product-details.expandable {
  padding: 12px;
  background: #fff;
}

.status-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e6f4ff;
  color: #1677ff;
  white-space: nowrap;
}

/* ...existing code... */

/* Developer View Styles */
.developer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.product-sub-card {
  margin: 8px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: none;
}

.product-sub-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
}

.product-sub-header .ant-image {
  flex: 0 0 40px; /* Fixed width */
  width: 40px !important;
  height: 40px !important;
  border-radius: 4px;
  overflow: hidden;
}

.product-sub-info {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.product-sub-info h5 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-sub-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-sub-meta .ant-steps-inline {
  width: 100%;
  margin: 4px 0;
}

.product-sub-meta .ant-steps-item {
  margin-right: 2px !important;
  min-width: auto !important;
}

.product-sub-meta .ant-steps-item-title {
  font-size: 11px !important;
  padding-right: 2px !important;
}

.product-sub-meta .ant-tag {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 6px;
}

.product-sub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.product-sub-info {
  flex: 1;
  min-width: 0;
}

.product-sub-info h5 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
}

.product-sub-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-sub-meta .ant-steps-inline {
  margin-bottom: 4px;
}

.sub-collapse {
  margin-top: 8px;
}

.sub-collapse .ant-collapse-header {
  padding: 8px 12px !important;
  font-size: 13px;
}

.sub-collapse .ant-collapse-content-box {
  padding: 0 12px 12px !important;
}

/* ...existing code... */

/* Updated Product Sub Card Styles */
.product-sub-card {
  margin: 8px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: none;
}

.product-sub-header {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  padding: 12px;
  align-items: start;
}

.product-sub-header .ant-image {
  width: 40px !important;
  height: 40px !important;
  border-radius: 4px;
  overflow: hidden;
}

.product-sub-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.product-sub-info h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-sub-info .product-code {
  color: #666;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.product-sub-info .ant-tag {
  max-width: fit-content;
  font-size: 11px;
  padding: 1px 6px;
}

/* ...existing code... */

.product-sub-code {
  color: #666;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.product-sub-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.product-sub-info h5 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ...existing code... */

.dev-product-code {
  color: #666;
  font-size: 12px;
  display: block;
  margin: 2px 0 6px;
}

/* ...existing code... */

.categories-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.categories-wrapper .ant-tag {
  margin: 0;
}

/* ...existing code... */

.mobile-development-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
}

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: env(safe-area-inset-top) 16px 12px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-toggle {
  display: flex;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 4px;
  margin: 8px 12px;
}

.view-toggle-btn {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.view-toggle-btn.active {
  background: #fff;
  color: #1677ff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.view-toggle-btn .anticon {
  font-size: 16px;
}

.mobile-content {
  flex: 1;
  padding: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

.mobile-filters {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.filter-chip {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  transition: all 0.2s;
}

.filter-chip.active {
  background: #1677ff;
  color: #fff;
  border-color: #1677ff;
}

.add-fab {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: #1677ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(22,119,255,0.3);
  transition: transform 0.2s;
}

.add-fab:active {
  transform: scale(0.95);
}

/* Status indicator styles */
.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-indicator.active {
  background: #52c41a;
}

.status-indicator.inactive {
  background: #faad14;
}

/* Safari bottom bar fix */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-development-page {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Adjust spacing in mobile collapse panels */
.mobile-collapse .ant-collapse-item {
  margin-bottom: 0 !important;
}

.mobile-collapse .ant-list-item {
  padding: 8px 0 !important;
}

.mobile-collapse .ant-collapse-content-box {
  padding: 0 !important;
}

.mobile-collapse .ant-collapse-header {
  padding: 8px 0 !important;
}

/* Reduce spacing in nested collapses */
.mobile-collapse .ant-collapse-ghost {
  margin-bottom: 0 !important;
}

.mobile-collapse .ant-list-split .ant-list-item {
  border-bottom: none !important;
}

/* Adjust spacing for developer details */
.mobile-collapse .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Geliştirici listesi boşluk ayarları */
.mobile-collapse .ant-list-item {
  padding: 2px 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.mobile-collapse .ant-collapse-content > .ant-collapse-content-box {
  padding: 2px 16px !important;
}

.mobile-collapse .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
  padding: 0 16px !important;
}

.mobile-collapse .ant-list-item-meta {
  margin-bottom: 0 !important;
  padding: 2px 0 !important;
  min-height: 0 !important;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-header {
  padding: 2px 0 !important;
  min-height: 24px !important;
}

.mobile-collapse .ant-list-item-meta-content {
  padding: 0 !important;
}

.mobile-collapse .ant-collapse-ghost {
  margin: 0 !important;
}

.mobile-collapse .ant-avatar {
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  font-size: 12px !important;
}

/* Geliştirici listesi boşluk ayarları */
.mobile-collapse .ant-list-item {
  padding: 2px 0 !important;
  margin: 0 !important;
}

.mobile-collapse .ant-collapse-content > .ant-collapse-content-box {
  padding: 1px 4px !important;
}

.mobile-collapse .ant-list-split .ant-list-item {
  border-bottom: none !important;
}

.mobile-collapse .ant-collapse-ghost > .ant-collapse-item {
  margin-bottom: 0 !important;
}

.mobile-collapse .ant-list-item-meta {
  margin-bottom: 0 !important;
}

.mobile-collapse .ant-collapse-header {
  padding: 8px 16px !important;
}

.mobile-collapse .ant-collapse-ghost .ant-collapse-header {
  padding: 4px 0 !important;
}

/* ...existing code... */

/* ...existing code... */

/* Add these new styles for project manager section */
.mobile-collapse .project-manager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
}

.mobile-collapse .project-manager .ant-avatar {
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.mobile-collapse .project-manager-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-collapse .project-manager-title {
  font-size: 12px;
  color: #666;
}

.mobile-collapse .project-manager-name {
  font-size: 14px;
  font-weight: 500;
}

/* ...existing code... */

.mobile-view-controls {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  gap: 12px;
}

.view-label {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  white-space: nowrap;
}

.switch-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.switch-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.3s;
}

.switch-label.active {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.view-switch.ant-switch {
  min-width: 40px;
  height: 20px;
}

.view-switch.ant-switch .ant-switch-handle {
  width: 16px;
  height: 16px;
  top: 2px;
}

/* ...existing code... */

.mobile-view-controls {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #fff;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
  gap: 8px;
}

.view-label {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  white-space: nowrap;
  margin-right: 8px;
  flex: 0 0 auto;
}

.view-buttons-container {
  flex: 1;
  min-width: 0;
}

.mobile-view-buttons {
  width: 100%;
  display: flex;
}

.mobile-view-buttons .ant-radio-button-wrapper {
  flex: 1;
  text-align: center;
  padding: 4px 8px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ...existing code... */

/* Steps tooltip styles */
.steps-tooltip {
  max-width: none !important;
}

.steps-tooltip .ant-tooltip-inner {
  padding: 8px !important;
  background-color: #272637 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 
              0 6px 16px 0 rgba(0,0,0,.08), 
              0 9px 28px 8px rgba(0,0,0,.05) !important;
}

.steps-tooltip .ant-tooltip-arrow-content {
  background-color: #272637 !important;
}

/* Steps customization for mobile */
.ant-steps-inline {
  width: 100%;
  overflow: visible !important;
}

.ant-steps-inline .ant-steps-item {
  margin-right: 4px !important;
  padding-right: 4px !important;
}

.ant-steps-inline .ant-steps-item-container {
  display: flex !important;
  align-items: center !important;
}

.ant-steps-inline .ant-steps-item-icon {
  margin: 0 4px !important;
  font-size: 16px !important;
}

.ant-steps-inline .ant-steps-item-title {
  font-size: 12px !important;
  padding-right: 4px !important;
  line-height: 1.2 !important;
}

/* Hover effect for the plus icon */
.ant-steps-item-icon .anticon {
  transition: transform 0.2s ease;
}

.ant-steps-item-icon .anticon:hover {
  transform: scale(1.1);
}

/* ...existing code... */

/* Tooltip hover effect */
.ant-steps-item-icon .anticon:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* ...existing code... */

/* Timeline Steps Tooltip Styles */
.steps-timeline-tooltip {
  max-width: none !important;
}

.steps-timeline-tooltip .ant-tooltip-inner {
  padding: 12px !important;
  background: #272637 !important;
  border-radius: 8px !important;
  min-width: 200px;
}

.steps-timeline-tooltip .ant-tooltip-arrow-content {
  background: #272637 !important;
}

.timeline-tooltip-content {
  padding: 4px;
}

.timeline-step {
  position: relative;
  padding: 8px 0;
}

.step-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.step-completed {
  color: #52c41a;
  font-size: 16px;
}

.step-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile Steps Customization */
.mobile-steps {
  width: 100% !important;
}

.mobile-steps .ant-steps-item {
  flex: none !important;
  margin-right: 4px !important;
}

.timeline-more {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.timeline-more:hover {
  background: rgba(249, 196, 172, 0.1);
}

.more-icon {
  font-size: 16px;
  color: #1890ff;
}

.mobile-steps .ant-steps-item-container {
  display: flex !important;
  align-items: center !important;
}

.mobile-steps .ant-steps-item-icon {
  margin: 0 4px !important;
}

.mobile-steps .ant-steps-item-content {
  min-height: 24px !important;
  line-height: 24px !important;
}

/* ...existing code... */

/* Replace switch controls with select styles */
.view-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px;
}

.view-select-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.view-select {
  width: 140px !important;
}

/* Remove these switch-related styles if they exist
.switch-container
.switch-label
.switch-label.active
.view-switch
*/

/* ...existing code... */

/* Add these new styles for project view */
.project-header {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: linear-gradient(to bottom, #f8f9fa, #fff);
  width: 100%;
}

.project-header .header-info {
  flex: 1;
  width: 100%;
}

.project-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add responsive styles for project header */
@media screen and (max-width: 576px) {
  .project-header {
    padding: 12px;
  }
  
  .project-header h4 {
    font-size: 14px;
  }
}

.project-products {
  margin-top: 8px;
}

.project-product-card {
  margin: 8px 0;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

/* ...existing code... */

/* Enhanced Mobile Modal Styles */
.mobile-repeat-modal {
  height: 100vh !important;
  top: 0 !important;
  padding: 0 !important;
}

.mobile-repeat-modal .ant-modal-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  padding: 0;
}

.mobile-repeat-modal .ant-modal-header {
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  flex-shrink: 0;
}

.mobile-repeat-modal .mobile-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mobile-repeat-modal .mobile-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.mobile-repeat-modal .mobile-modal-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.mobile-repeat-modal .mobile-modal-form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-repeat-modal .mobile-modal-form-item label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.mobile-repeat-modal .mobile-modal-form-item .ant-input,
.mobile-repeat-modal .mobile-modal-form-item .ant-select-selector,
.mobile-repeat-modal .mobile-modal-form-item .ant-auto-complete {
  height: 40px !important;
}

.mobile-repeat-modal .mobile-modal-form-item .ant-auto-complete .ant-select-selector {
  padding: 4px 11px !important;
  display: flex;
  align-items: center;
}

.mobile-repeat-modal .mobile-modal-tree {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
}

.mobile-repeat-modal .mobile-modal-add-step {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.mobile-repeat-modal .mobile-modal-add-step .ant-input {
  flex: 1;
}

.mobile-repeat-modal .mobile-modal-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.mobile-repeat-modal .mobile-modal-footer .ant-btn {
  flex: 1;
  height: 44px;
}

/* Safe area inset handling */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-repeat-modal .mobile-modal-footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
}

/* Responsive height adjustments */
@media screen and (max-height: 600px) {
  .mobile-repeat-modal .mobile-modal-form {
    padding: 12px;
    gap: 12px;
  }

  .mobile-repeat-modal .mobile-modal-form-item .ant-input,
  .mobile-repeat-modal .mobile-modal-form-item .ant-select-selector,
  .mobile-repeat-modal .mobile-modal-form-item .ant-auto-complete {
    height: 36px !important;
  }

  .mobile-repeat-modal .mobile-modal-footer .ant-btn {
    height: 40px;
  }
}

/* Landscape mode adjustments */
@media screen and (orientation: landscape) {
  .mobile-repeat-modal .mobile-modal-content {
    max-height: 100vh;
  }

  .mobile-repeat-modal .mobile-modal-body {
    max-height: calc(100vh - 120px);
  }
}

/* ...existing code... */

/* Modal ve Mask Z-index düzenlemeleri */
.mobile-repeat-modal.ant-modal-wrap {
  z-index: 1001 !important;
}

.mobile-repeat-modal .ant-modal-mask {
  z-index: 1000 !important;
}

.mobile-repeat-modal .ant-modal-content {
  position: relative;
  z-index: 1002 !important;
}

/* Ensure other elements don't interfere with modal */
.mobile-development-container {
  position: relative;
  z-index: 1;
}

/* Ensure modal is always above other content */
.ant-modal-root {
  position: relative;
  z-index: 1001;
}

/* ...existing code... */

/* ...existing code... */

/* Repeat Development Drawer Styles */
.repeat-development-drawer .ant-drawer-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.repeat-development-drawer .drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.repeat-development-drawer .drawer-icon {
  color: #1677ff;
  font-size: 18px;
}

.repeat-development-drawer .drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-development-drawer .drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.repeat-development-drawer .drawer-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.repeat-development-drawer .drawer-form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repeat-development-drawer .drawer-form-item label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.repeat-development-drawer .drawer-tree {
  margin: 16px 0;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.repeat-development-drawer .drawer-add-step {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.repeat-development-drawer .drawer-footer {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ...existing code... */
.m-development-details {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 60px;
  animation: m-fadeIn 0.3s ease-out;
  overscroll-behavior-y: contain;
}

.m-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #272637;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f9c4ac;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.m-header h1 {
  margin: 0;
  font-size: 18px;
  color: #f9c4ac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.m-back-button {
  color: #f9c4ac;
}

.m-back-button:active {
  opacity: 0.7;
}

.m-product-preview {
  position: relative;
  margin-bottom: 16px;
}

.m-product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.m-product-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.m-tags-container {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.m-tabs {
  margin-top: 16px;
}

.m-tabs .ant-tabs-nav {
  margin: 0;
  padding: 0 16px;
  background-color: #fff;
}

.m-tabs .ant-tabs-tab {
  padding: 12px 0 !important;
  margin: 0 16px !important;
  transition: color 0.3s ease !important;
}

.m-tabs .ant-tabs-tab-active {
  color: #f9c4ac !important;
}

.ant-tabs-ink-bar {
  height: 3px !important;
  border-radius: 3px !important;
  background: #f9c4ac !important;
}

.m-info-content {
  padding: 16px;
}

.m-info-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.m-info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Changed from center to handle longer text */
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

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

.m-label {
  color: #666;
  font-size: 14px;
  flex: 0 0 40%; /* Give fixed width to labels */
}

.m-value {
  font-weight: 500;
  color: #272637;
  display: flex;
  align-items: center;
  flex: 0 0 60%; /* Give fixed width to values */
  justify-content: flex-end;
  text-align: right;
  word-break: break-word; /* Handle long text */
}

.m-timeline {
  padding: 16px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  margin-top: 8px;
}

.m-timeline-item {
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.m-timeline-item:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

.m-step-title {
  font-size: 16px;
  font-weight: 500;
  color: #272637;
  margin-bottom: 4px;
}

.m-step-date {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.m-features-list,
.m-variants-list {
  padding: 16px;
  display: grid;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.m-feature-card,
.m-variant-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.m-feature-card:active,
.m-variant-card:active {
  transform: scale(0.98);
  background-color: rgba(71, 65, 104, 0.05);
}

.m-feature-content,
.m-variant-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.m-feature-key,
.m-variant-name {
  font-weight: 500;
  color: #272637;
}

.m-feature-value {
  color: #626f92;
}

.m-variant-edit-icon {
  color: #626f92;
  font-size: 16px;
}

.m-drawer {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  animation: m-slideIn 0.3s ease-out;
}

.m-drawer-content {
  padding: 16px;
}

.m-drawer-content h3 {
  margin-bottom: 16px;
  color: #272637;
}

/* Add native-like animations */
@keyframes m-slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes m-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Add active state animations */
.m-timeline-item:active,
.m-feature-card:active,
.m-variant-card:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

/* Smooth scrolling */
.m-timeline,
.m-features-list,
.m-variants-list {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.m-steps-content {
  padding: 16px;
}

.m-step-date-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #666;
  gap: 2px;
}

.m-step-date-label small {
  margin-top: 2px;
  color: #999;
}

.m-step-date-label small.delayed {
  color: #ff4d4f;
}

.m-step-status {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.m-show-more-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px;
  margin-top: 16px;
  color: #474168;
  background: rgba(71, 65, 104, 0.05);
  border-radius: 8px;
}

.m-show-more-button:hover {
  background: rgba(71, 65, 104, 0.1);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

/* Timeline component overrides */
.ant-timeline-item-head {
  width: 16px;
  height: 16px;
  background: transparent;
}

.ant-timeline-item-content {
  margin-left: 28px;
}

.ant-timeline-item-tail {
  left: 7px;
  top: 24px;
}

/* Features list styles */
.m-features-list {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.m-feature-card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.m-feature-content {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-feature-key {
  font-weight: 500;
  color: #272637;
}

.m-feature-value {
  color: #626f92;
}

/* Variants list styles */
.m-variants-list {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.m-variant-card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.m-variant-content {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-variant-name {
  font-weight: 500;
  color: #272637;
}

.m-variant-edit-icon {
  color: #626f92;
  font-size: 18px;
}

/* Active state animations */
.m-feature-card:active,
.m-variant-card:active,
.m-timeline-item:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
  background-color: rgba(71, 65, 104, 0.05);
}
/* Unique prefix: mpd- (mobile-product-details) */
.mpd-wrapper {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 60px;
  animation: mpd-fadeIn 0.3s ease-out;
  overscroll-behavior-y: contain;
  padding-top: 0; /* Remove top padding since header is gone */
}

.mpd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #272637;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f9c4ac;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mpd-product-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 4px 8px;
  padding-top: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin-bottom: 8px;
}

.mpd-product-title h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #272637;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.mpd-history-button {
  color: #272637;
  padding: 4px 8px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  border-radius: 6px;
}

.mpd-history-button:hover,
.mpd-history-button:active {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.mpd-history-button:active {
  background: rgba(0, 0, 0, 0.05);
}

.mpd-history-button .anticon {
  font-size: 14px;
}

/* Product-specific styles */
.mpd-product-image {
  width: 100%;
  height: 250px;
  object-fit: contain;
  background-color: transparent;
}

.mpd-product-image-container {
  position: relative;
  background-color: transparent;
  margin-bottom: 0;
}

.mpd-image-carousel {
  background-color: transparent;
}

.mpd-carousel-item {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: transparent;
}

.mpd-product-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

/* Customize Carousel Dots */
.mpd-image-carousel .ant-carousel .slick-dots {
  bottom: 12px;
}

.mpd-image-carousel .ant-carousel .slick-dots li button {
  background: #272637;
  opacity: 0.3;
}

.mpd-image-carousel .ant-carousel .slick-dots li.slick-active button {
  opacity: 1;
}

.mpd-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

/* Add swipe animation */
.mpd-wrapper .ant-carousel .slick-slide {
  transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .mpd-carousel-item {
    height: 250px;
  }

  .mpd-product-image {
    max-height: 250px;
  }
}

.mpd-info-card {
  margin: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Tab panel customizations */
.mpd-tabs {
  .ant-tabs-nav {
    margin-bottom: 0;
    padding: 0 4px;
    background-color: #fff;
    position: sticky;
    top: 5px;
    z-index: 99;
  }
  
  .ant-tabs-content {
    padding-top: 16px;
    background-color: #f8f9fa;
  }
}

/* Improved Tab Design */
.mpd-tabs .ant-tabs-nav {
  padding: 4px !important;
  background: #fff;
  margin: 0 !important;
}

.mpd-tabs .ant-tabs-nav-wrap {
  display: flex;
  justify-content: space-between;
  padding: 4px;
  background: #f0f2f5;
  border-radius: 12px;
}

.mpd-tabs .ant-tabs-nav-list {
  width: 100%;
  display: flex !important;
  justify-content: space-between;
  gap: 4px;
}

.mpd-tabs .ant-tabs-tab {
  margin: 0 !important;
  padding: 8px 8px !important; /* Reduced horizontal padding */
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  flex: 1;
  display: flex;
  justify-content: center;
  background: transparent !important;
  min-width: 0 !important;
}

.mpd-tabs .ant-tabs-tab-active {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.mpd-tabs .ant-tabs-tab-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #666 !important;
}

.mpd-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #272637 !important;
}

.mpd-tabs .ant-tabs-ink-bar {
  display: none !important;
}

/* Tab Label Design */
.mpd-tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px !important; /* Reduced from 6px to 2px */
  
  width: 100%;
}

.mpd-tab-label .anticon {
  font-size: 14px; /* Reduced icon size */
  margin-right: 1px !important; /* Added small right margin */
}

/* Badge in tabs */
.mpd-document-badge {
  transform: scale(0.7); /* Made badge smaller */
  margin-left: 1px !important; /* Reduced left margin */
  background: #272637 !important;
}

/* Active tab animation */
.mpd-tabs .ant-tabs-tab:active {
  transform: scale(0.95);
}

/* Responsive adjustments */
@media screen and (max-width: 375px) {
  .mpd-tabs .ant-tabs-tab {
    padding: 6px 12px !important;
  }
  
  .mpd-tab-label .anticon {
    font-size: 14px;
  }
  
  .mpd-tabs .ant-tabs-tab-btn {
    font-size: 12px !important;
  }
}

/* Bottom drawer animation fix */
.mpd-drawer {
  .ant-drawer-content-wrapper {
    transform: none !important;
  }
}

.mpd-gallery {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.mpd-gallery-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

.mpd-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Variant tab styles */
.mpd-variants-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mpd-variant-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.mpd-variant-card:active {
  transform: scale(0.98);
  background-color: rgba(39, 38, 55, 0.05);
}

.mpd-variant-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mpd-variant-name {
  font-weight: 500;
  color: #272637;
  font-size: 15px;
}

.mpd-variant-edit-icon {
  color: #626f92;
  font-size: 18px;
}

/* Document list styles */
.mpd-documents-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mpd-document-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mpd-document-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.mpd-document-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0; /* Prevent flex item from overflowing */
}

.mpd-document-icon {
  font-size: 24px;
  color: #1890ff;
  flex-shrink: 0;
}

.mpd-document-details {
  flex: 1;
  min-width: 0; /* Prevent flex item from overflowing */
}

.mpd-document-name {
  font-weight: 500;
  color: #272637;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpd-document-desc {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpd-download-button {
  color: #1890ff;
  font-size: 20px;
  padding: 8px;
  flex-shrink: 0;
}

.mpd-download-button:active {
  background-color: rgba(24, 144, 255, 0.1);
}

/* Empty state */
.mpd-empty-documents {
  padding: 32px 16px;
  text-align: center;
  color: #666;
}

.mpd-empty-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

/* Active states */
.mpd-document-card:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
  background-color: rgba(39, 38, 55, 0.05);
}

/* Document styles */
.mpd-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

.mpd-document-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.mpd-document-item:active {
  transform: scale(0.98);
  background-color: rgba(39, 38, 55, 0.05);
}

.mpd-document-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(39, 38, 55, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #272637;
}

.mpd-document-info {
  text-align: center;
  width: 100%;
}

.mpd-document-name {
  font-weight: 500;
  color: #272637;
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mpd-document-desc {
  color: #666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.mpd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #666;
}

.mpd-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #d9d9d9;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .mpd-documents-grid {
    grid-template-columns: 1fr;
  }
  
  .mpd-document-item {
    flex-direction: row;
    padding: 12px;
  }
  
  .mpd-document-info {
    text-align: left;
  }
}

/* Document tab styles */
.mpd-tab-label {
  display: flex;
  align-items: center;
  gap: 2px; /* Reduced from 6px to 2px */
}

.mpd-document-badge {
  margin-left: 1px !important; /* Reduced left margin */
  background-color: #272637 !important;
}

.mpd-documents-content {
  padding: 16px;
}

.mpd-documents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mpd-document-item {
  width: 100%;
  border-radius: 12px;
  background: white;
  transition: all 0.2s ease;
}

.mpd-document-item:active {
  transform: scale(0.98);
  background-color: #f5f5f5;
}

.mpd-document-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.mpd-document-icon {
  font-size: 24px;
  color: #1890ff;
}

.mpd-document-details {
  flex: 1;
  min-width: 0;
}

.mpd-document-name {
  font-size: 15px;
  font-weight: 500;
  color: #272637;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpd-document-desc {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpd-download-icon {
  font-size: 20px;
  color: #1890ff;
}

.mpd-empty-state {
  text-align: center;
  padding: 32px 16px;
}

.mpd-empty-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 12px;
}

/* Fix tab navigation */
.mpd-tabs .ant-tabs-nav {
  position: relative !important;
  margin: 0 !important;
  padding: 8px !important;
  background: white;
}

.mpd-tabs .ant-tabs-nav-wrap {
  display: flex;
  padding: 4px;
  background: #f0f2f5;
  border-radius: 12px;
}

.mpd-tabs .ant-tabs-nav-list {
  width: 100%;
  display: flex !important;
  gap: 4px;
}

.mpd-tabs .ant-tabs-tab {
  position: relative;
  flex: 1;
  margin: 0 !important;
  padding: 8px !important;
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mpd-tabs .ant-tabs-ink-bar {
  display: none !important;
}

/* Active Tab Styling */
.mpd-tabs .ant-tabs-tab-active {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mpd-tabs .ant-tabs-tab-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 8px;
  z-index: -1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: mpd-tabActivate 0.3s ease;
}

/* Tab Label Styling */
.mpd-tab-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px; /* Reduced from 6px to 2px */
  width: 100%;
  color: #666;
  font-size: 12px; /* Reduced font size */
}

.mpd-tab-label .anticon {
  font-size: 14px; /* Reduced icon size */
  margin-right: 2px; /* Added small right margin */
}

.mpd-tabs .ant-tabs-tab-active .mpd-tab-label {
  color: #272637;
}

.mpd-tab-label .anticon {
  font-size: 16px;
}

.mpd-tabs .ant-tabs-content {
  min-height: 200px;
}

/* Active state animations */
.mpd-document-item:active {
  transform: scale(0.98);
}

.mpd-download-icon:active {
  opacity: 0.7;
}

/* Tab Navigation Redesign */
.mpd-tabs .ant-tabs-nav {
  margin: 0 !important;
  padding: 8px 16px !important;
  background: white;
  position: sticky;
  top: 56px;
  z-index: 99;
}

.mpd-tabs .ant-tabs-nav-wrap {
  display: flex;
  padding: 4px;
  background: #f0f2f5;
  border-radius: 12px;
}

.mpd-tabs .ant-tabs-nav-list {
  width: 100%;
  display: flex !important;
  gap: 4px;
  padding: 0;
}

.mpd-tabs .ant-tabs-tab {
  margin: 0 !important;
  padding: 8px 12px !important;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  position: relative;
  min-width: 0;
}

.mpd-tabs .ant-tabs-tab-active {
  background: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.mpd-tabs .ant-tabs-tab-btn {
  color: #666 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.mpd-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #272637 !important;
}

.mpd-tabs .ant-tabs-ink-bar {
  display: none !important;
}

.mpd-tabs .mpd-tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.mpd-tabs .mpd-tab-label .anticon {
  font-size: 16px;
}

.mpd-tabs .ant-tabs-content-holder {
  padding-top: 8px;
}

/* Make tabs fill container width */
.mpd-tabs .ant-tabs-nav > div:first-of-type {
  width: 100%;
}

/* Active tab full width background */
.mpd-tabs .ant-tabs-tab-active {
  width: 100%;
}

/* Fix tab label alignment */
.mpd-tabs .ant-tabs-tab-btn {
  width: 100%;
  text-align: center;
}

/* Tab Navigation Adjustments */
.mpd-tabs .ant-tabs-nav {
  margin: 0 !important;
  padding: 4px 8px !important; /* Reduced horizontal padding from 16px to 8px */
  background: transparent !important; /* Removed white background */
  position: sticky;
  top: 56px;
  z-index: 99;
}

.mpd-tabs .ant-tabs-nav-wrap {
  padding: 2px; /* Reduced padding from 4px to 2px */
  background: #f0f2f5;
  border-radius: 8px; /* Slightly reduced from 12px */
}

.mpd-tabs .ant-tabs-nav-list {
  width: 100%;
  display: flex !important;
  gap: 2px; /* Reduced gap from 4px to 2px */
  padding: 0;
}

.mpd-tabs .ant-tabs-tab {
  margin: 0 !important;
  padding: 6px 4px !important; /* Reduced horizontal padding */
  flex: 1;
  min-width: 0;
}

/* Make tabs fill available space better */
.mpd-tabs .ant-tabs-nav > div:first-of-type {
  width: 100%;
  padding: 0;
}

/* Info Tab Styles */
.mpd-info-section {
  background: white;
  border-radius: 12px;
  margin: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding-top: 15px !important;
}

.mpd-info-row {
  display: flex;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: white;
}

.mpd-info-row:last-child {
  border-bottom: none;
}

.mpd-info-row:active {
  background-color: #fafafa;
}

.mpd-info-label {
  flex: 0 0 120px;
  color: #666;
  font-size: 14px;
  padding-right: 12px;
}

.mpd-info-value {
  flex: 1;
  color: #272637;
  font-weight: 500;
  font-size: 14px;
  word-break: break-word;
}

/* Responsive adjustments */
@media screen and (max-width: 375px) {
  .mpd-info-section {
    margin: 12px;
  }

  .mpd-info-row {
    padding: 12px;
  }

  .mpd-info-label {
    flex: 0 0 100px;
    font-size: 13px;
  }

  .mpd-info-value {
    font-size: 13px;
  }
}

/* Animations with unique names */
@keyframes mpd-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mpd-tabActivate {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Product hero section adjustments */
.mpd-product-hero {
  margin-bottom: 0;
  position: relative;
  margin-top: 0;
  padding-top: 0;
  margin: 0;
  padding: 0;
}

.mpd-meta-header {
  margin: 0;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mpd-meta-header h2 {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.mpd-product-title {
  margin-bottom: 8px;
}

.mpd-product-title h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #272637;
}

.mpd-tags-scroll {
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mpd-meta-header {
  margin: 0;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
background-color: transparent!important;
}

.mpd-meta-header h2 {
  margin: 0;
  font-size: 16px;
  color: #666;
}

/* Tab navigation adjustments */
.mpd-tabs .ant-tabs-nav {
  margin: 0 !important;
  padding: 0 4px !important;
  position: sticky;
  top: 5px;
  z-index: 99;
}

.mpd-tabs .ant-tabs-nav-wrap {
  padding: 2px;
  margin: 0;
  background: #f0f2f5;
  border-radius: 6px;
}

.mpd-tabs .ant-tabs-nav-list {
  gap: 1px;
  padding: 0;
}

.mpd-tabs .ant-tabs-tab {
  padding: 4px 2px !important;
  margin: 0 !important;
}

/* Tab navigation adjustments */
.mpd-tabs .ant-tabs-nav {
  margin-top: 0 !important; /* Remove top margin */
}

.mpd-tabs .ant-tabs-nav-wrap {
  margin-top: 0; /* Remove any default margin */
}

/* Product hero section extreme compact */
.mpd-product-hero {
  margin: 0;
  padding: 0;
}

.mpd-product-meta {
  padding: 0;
  margin: 0;
  background: transparent !important;
}

.mpd-meta-header {
  margin: 0;
  padding: 2px 8px;
}

.mpd-tags-scroll {
  margin: 0;
  padding: 2px 8px 4px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mpd-tag {
  margin: 0 !important;
  padding: 2px 8px !important;
  line-height: 18px !important;
}

/* Tab Navigation - Remove all extra spacing */
.mpd-tabs .ant-tabs-nav {
  margin: 0 !important;
  padding: 0 4px !important;
}

.mpd-tabs .ant-tabs-nav-wrap {
  padding: 2px;
  margin: 0;
}

/* Product meta section - Remove white background */
.mpd-product-meta {
  padding: 8px 12px;
  background: transparent !important;
  margin: 0;
}

.mpd-meta-header,
.mpd-product-title,
.mpd-tags-scroll {
  background: transparent;
}

/* Reduce spacing between tab nav and content */
.mpd-tabs {
  .ant-tabs-nav {
    margin-bottom: 0 !important;
    padding: 0 4px;
    background: transparent;
    position: sticky;
    top: 5px;
    z-index: 99;
  }
  
  .ant-tabs-content {
    padding-top: 4px; /* Reduced from 16px to 4px */
    background-color: transparent;
  }
}

.mpd-tabs .ant-tabs-content-holder {
  padding-top: 4px; /* Reduced from 8px to 4px */
}

/* Remove all extra spacing */
.mpd-tabs .ant-tabs-nav-wrap {
  margin: 0;
  padding: 2px;
  background: #f0f2f5;
  border-radius: 6px;
}
/* Container styles */
.dr-container {
  padding: 24px;
}

.dr-main-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

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

.dr-title {
  margin: 0;
}

/* Scrollable container for infinite scroll */
.dr-scrollable-container {
  height: calc(100vh - 380px);
  overflow: auto;
  border: 1px solid rgba(140, 140, 140, 0.2);
  border-radius: 8px;
  position: relative;
}

/* Custom scrollbar styles */
.dr-scrollable-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dr-scrollable-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dr-scrollable-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.dr-scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Loading and end message styles */
.dr-loading-more {
  text-align: center;
  padding: 12px 0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dr-end-message {
  text-align: center;
  padding: 12px 0;
  color: #999;
  font-style: italic;
  font-size: 13px;
}

.dr-table-footer {
  margin-top: 10px;
  font-size: 13px;
  padding: 0 8px;
}

/* Expanded row styles */
.dr-expanded-row {
  padding: 8px 0;
  width: 100%;
}

/* Fixed height content for products and demands sections - COMPLETELY REVISED FOR SCROLLBAR VISIBILITY */
.dr-fixed-height-content {
  height: 250px !important; /* Force fixed height with !important */
  max-height: 250px !important; /* Add max-height to ensure it never exceeds */
  min-height: 250px !important; /* Add min-height to ensure it never shrinks */
  position: relative;
  border-radius: 8px;
  overflow: hidden !important; /* Changed to hidden to force scrollbar appearance */
}

/* Scrollable container for products and demands */
.dr-scroll-container {
  position: relative;
}

/* Scrollable inner container - IMPROVED TO MAINTAIN FIXED HEIGHT */
.dr-scrollable-inner {
  position: absolute !important; /* Use absolute positioning to fill container */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

/* MAJOR FIX: Much stronger scrollbar styles to ensure they're visible and usable */
.dr-scrollable-inner::-webkit-scrollbar {
  width: 8px !important; /* Wider scrollbar for easier interaction */
  height: 8px !important;
  display: block !important;
  background: #f0f0f0;
}

.dr-scrollable-inner::-webkit-scrollbar-track {
  background: #e0e0e0 !important; /* Lighter track for better contrast */
  border-radius: 4px !important;
  margin: 4px 0 !important; /* Add margin to track */
  border: 1px solid #d0d0d0 !important;
}

.dr-scrollable-inner::-webkit-scrollbar-thumb {
  background: #888 !important; /* Darker thumb for better visibility */
  border-radius: 4px !important;
  border: none !important;
  min-height: 50px !important; /* Even taller minimum height */
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2) !important; /* Add shadow for depth */
}

.dr-scrollable-inner::-webkit-scrollbar-thumb:hover {
  background: #777 !important; /* Even darker on hover */
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
}

/* Make both columns equal width and fixed height */
.dr-expanded-columns {
  display: flex;
  gap: 16px;
  padding: 0 8px; /* Reduced from 24px to 8px (about 1/3) */
  width: 100%;
  overflow: visible !important;
}

.dr-expanded-section {
  flex: 1;
  min-width: 0;
  margin: 0 4px; /* Reduced from 12px to 4px (about 1/3) */
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

.dr-section-header {
  font-weight: bold;
  margin-bottom: 8px;
  padding: 0 4px; /* Reduced from 12px to 4px */
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555;
}

.dr-section-header .anticon {
  color: #f9c4ac;
  font-size: 16px;
}

/* Updated card content styling */
.dr-card-content {
  background: #f5f5f5;
  border-radius: 8px;
  border: 2px solid #f9c4ac;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative !important;
  height: 250px !important; /* Match height of fixed-height-content */
  max-height: 250px !important;
  min-height: 250px !important;
  overflow: hidden !important;
  padding: 0 !important; /* Remove padding to avoid affecting height */
}

/* Consistent scrollbar styling for all scrollable areas */
.dr-fixed-height-content::-webkit-scrollbar,
.dr-scrollable-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dr-fixed-height-content::-webkit-scrollbar-track,
.dr-scrollable-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dr-fixed-height-content::-webkit-scrollbar-thumb,
.dr-scrollable-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.dr-fixed-height-content::-webkit-scrollbar-thumb:hover,
.dr-scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dr-scrollable-inner::-webkit-scrollbar {
  width: 8px !important; /* Wider scrollbar for easier interaction */
  height: 8px !important;
  display: block !important;
  background: #f0f0f0;
}

.dr-scrollable-inner::-webkit-scrollbar-track {
  background: #e0e0e0 !important; /* Lighter track for better contrast */
  border-radius: 4px !important;
  margin: 4px 0 !important; /* Add margin to track */
  border: 1px solid #d0d0d0 !important;
}

.dr-scrollable-inner::-webkit-scrollbar-thumb {
  background: #888 !important; /* Darker thumb for better visibility */
  border-radius: 4px !important;
  border: none !important;
  min-height: 50px !important; /* Even taller minimum height */
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2) !important; /* Add shadow for depth */
}

.dr-scrollable-inner::-webkit-scrollbar-thumb:hover {
  background: #777 !important; /* Even darker on hover */
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
}

/* Firefox specific scrollbar styling */
@-moz-document url-prefix() {
  .dr-scrollable-inner {
    scrollbar-width: auto !important; /* Changed from thin to auto */
    scrollbar-color: #999 #e0e0e0 !important; /* Match the webkit colors */
  }
}

/* Internet Explorer scrollbars */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dr-scrollable-inner {
    -ms-overflow-style: scrollbar !important;
  }
}

.dr-list-item {
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 5px;
  animation: fadeIn 0.3s;
  margin-bottom: 6px;
  background-color: rgba(255, 255, 255, 0.7); /* Slight background for better visibility */
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
  display: flex !important;
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background-color: white;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.dr-list-item:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

@keyframes fadeIn {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

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

.dr-product-card {
  display: flex;
  align-items: center;
  width: 100%;
}

.dr-product-image {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.dr-product-info {
  flex: 1;
  margin-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dr-product-info div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dr-view-button {
  margin-left: 10px;
  flex-shrink: 0;
}

.dr-view-product-button {
  margin-left: auto;
  background-color: #1890ff;
}

/* Demand item styling */
.dr-demand-item {
  width: 100%;
  word-break: break-word;
}

/* Empty message styling */
.dr-empty-message {
  text-align: center;
  color: #999;
  padding: 20px 0;
  font-style: italic;
  font-size: 13px;
}

/* Loading and end message styles within fixed height content */
.dr-fixed-height-content .dr-loading-more {
  text-align: center;
  padding: 8px 0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
}

.dr-fixed-height-content .dr-end-message {
  text-align: center;
  padding: 8px 0;
  color: #999;
  font-style: italic;
  font-size: 12px;
}

/* Table styles - Updated for infinite scroll */
.dr-table {
  margin-bottom: 0;
  width: 100%;
}

/* Fix for antd table in infinite scroll */
.ant-table-wrapper {
  overflow: visible !important;
}

.ant-table-body {
  overflow: visible !important;
}

/* Ensure the table stays within the scrollable container */
.dr-scrollable-container .ant-spin-nested-loading,
.dr-scrollable-container .ant-spin-container {
  height: 100%;
}

/* Force static height on expanded rows to prevent layout shifts */
.dr-table .ant-table-expanded-row > td {
  padding: 8px 0 !important;
}

.dr-table .ant-table-expanded-row-fixed {
  width: 100% !important;
  margin: 0 !important;
}

/* Status tags */
.dr-status-tag {
  margin-right: 0;
}

/* Status tag container - Fixed for consistent alignment */
.dr-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px; /* Fixed height to ensure consistent row height */
  text-align: center;
  padding: 8px 0;
}

/* Status tag styles */
.dr-status-tag {
  margin-right: 0;
  display: inline-block;
  min-width: 80px;
  text-align: center;
}

/* Action info container */
.dr-action-info {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 4px;
  min-height: 22px; /* Give it space even when empty */
}

/* Empty action info should not take space */
.dr-action-info:empty {
  display: none;
}

/* Action user name */
.dr-action-by {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: #666;
  line-height: 1.2;
}

/* Action date */
.dr-action-date {
  display: block;
  font-size: 11px;
  color: #666;
  line-height: 1.2;
}

/* Action info container */
.dr-action-info {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 4px;
  min-height: 22px; /* Give it space even when empty */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dr-scrollable-container {
    height: calc(100vh - 320px);
  }
  
  .dr-expanded-columns {
    flex-direction: column;
    gap: 8px;
  }
  
  .dr-fixed-height-content {
    height: 180px;
  }
}

/* Modal styles - Updated with theme gold accents */
.dr-details-modal .ant-modal-content {
  border-radius: 8px;
}

.dr-modal-header {
  margin-bottom: 20px;
  background: transparent; /* Remove gray background */
}

.dr-modal-content {
  margin-bottom: 16px;
}

.dr-modal-section {
  margin-bottom: 20px;
}

.dr-product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f5f5f5;
  border-radius: 8px;
  border: 2px solid #f2c94c;
  padding: 12px 8px; /* Reduced from 20px to 8px horizontal padding */
  margin: 0 4px; /* Reduced from 12px to 4px */
}

.dr-modal-product {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  background: transparent; /* Remove gray background */
  justify-content: space-between;
}

.dr-modal-product > button {
  margin-left: auto; /* Push button to the right */
}

.dr-modal-product-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
}

.dr-demands-list {
  padding: 12px 8px 12px 16px; /* Reduced horizontal padding from 20px to 8px, left padding from 32px to 16px */
  background: #f5f5f5;
  border-radius: 8px;
  border: 2px solid #f2c94c;
  margin: 0 4px; /* Reduced from 12px to 4px */
}

.dr-demand-item {
  margin-bottom: 8px;
  background: transparent; /* Remove gray background */
}

.dr-company-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 4px 20px 4px; /* Reduced from 12px to 4px horizontal margin */
  padding: 12px 8px; /* Reduced from 20px to 8px horizontal padding */
  background: #f5f5f5;
  border-radius: 8px;
  border: 2px solid #f2c94c;
}

.dr-company-avatar {
  background-color: #474168;
}

.dr-accept-button {
  background-color: #52c41a;
  border-color: #52c41a;
}

/* Dividers with theme gold color */
.dr-modal-section .ant-divider {
  border-color: #f2c94c; /* Updated to theme gold color */
}

/* Ensure the list takes full height of container */
.dr-fixed-height-content .ant-list {
  height: 100%;
  overflow: visible;
}

/* Fix InfiniteScroll component behavior */
.infinite-scroll-component {
  overflow: visible !important;
  width: 100% !important;
}

.infinite-scroll-component__outerdiv {
  width: 100% !important;
}

/* Force scrollable area to be non-positioned to fix scrollbar issues */
.dr-fixed-height-content, 
.dr-scrollable-inner, 
.infinite-scroll-component, 
.ant-spin-container {
  min-height: 100%;
}

/* Override any Ant Design styles that might be hiding scrollbars */
.ant-list-items {
  overflow: visible !important;
  position: static !important;
}

/* Fix list display issues */
.ant-list, .ant-list-item, .ant-spin-container {
  overflow: visible !important;
}

/* Load more button positioning */
.dr-load-more-button {
  text-align: center;
  padding: 4px 0;
  margin-top: 4px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.95));
  z-index: 1;
  border-top: none;
}

.dr-load-more-button button {
  font-size: 13px;
  padding: 0 4px;
  height: 24px;
  color: #6b5ca5; /* Changed from #1890ff (blue) to #6b5ca5 (purple) */
}

.dr-load-more-button button:hover {
  color: #8a7fc7; /* Changed from #40a9ff (light blue) to #8a7fc7 (light purple) */
  text-decoration: underline;
}

/* Fix antd list containers */
.ant-list, .ant-list-item {
  overflow: visible !important;
}

.ant-spin-nested-loading, .ant-spin-container {
  overflow: visible !important;
  height: auto !important;
}

/* Disable animation that might affect height */
.ant-list-item {
  transition: none !important;
}

/* Make sure content doesn't push container */
.dr-expanded-columns {
  height: auto !important;
  min-height: 0 !important;
}

/* Ensure consistent height for list container */
.ant-list-items {
  height: auto !important;
}
.si-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #272637; /* colorMenuBackground from theme.js */
  padding: 20px;
  position: relative;
  font-family: 'DM Sans', sans-serif; /* fontFamily from theme.js */
}

.si-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.si-logo {
  width: 350px;
  height: 85px;
  margin-bottom: 15px;
}

.si-header h2 {
  color: #f9c4ac; /* colorMenuItemText from theme.js */
  font-size: 24px;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600; /* fontWeightStrong from theme.js */
}

.si-step-container {
  width: 100%;
  max-width: 900px;
  background-color: #474168; /* colorSecondary from theme.js */
  border-radius: 12px; /* borderRadiusLG from theme.js */
  padding: 30px;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.2); /* boxShadow from theme.js */
  margin-bottom: 20px;
}

.si-steps {
  margin-bottom: 30px;
}

.si-company-form-container, 
.si-admin-form-container {
  margin-top: 20px;
}

/* Form sections */
.si-form-columns {
  display: flex;
  gap: 20px; /* Reduce the gap between columns */
  margin-bottom: 20px;
}

.si-form-column {
  flex: 1;
  padding: 0 10px !important;
}

/* Form buttons container - Center aligned buttons */
.si-form-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0 !important;
}

/* Reduce spacing between form items */
.si-container .ant-form-item {
  margin-bottom: 6px !important; /* Drastically reduce the default margin-bottom */
}

/* Make the form labels more compact */
.si-container .ant-form-item-label {
  padding-bottom: 1px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}

/* Reduce the padding in inputs */
.si-container .ant-input,
.si-container .ant-input-affix-wrapper, 
.si-container .ant-select-selector {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 30px !important;  /* Reduce minimum height */
}

/* Adjust the space component in admin form */
.si-container .ant-space.ant-space-vertical {
  gap: 4px !important; /* Minimum gap */
}

/* Specifically style the login link container in the form */
.si-form-login-link {
  color: #f9c4ac;
  font-family: 'DM Sans', sans-serif;
  margin-top: 15px;
  text-align: center;
}

.si-form-login-link a {
  color: #626f92; /* colorPrimary from theme.js */
  font-weight: 600;
  margin-left: 5px;
  text-decoration: none;
}

.si-form-login-link a:hover {
  color: #f9c4ac;
  text-decoration: underline;
}

/* Button styles */
.si-button {
  background-color: #626f92; /* colorPrimary from theme.js */
  border-color: #626f92;
  color: #ffffff; /* colorBtnText from theme.js */
  font-weight: 600;
  height: 40px;
  min-width: 120px;
  border-radius: 8px; /* borderRadius from theme.js */
}

.si-button:hover, .si-button:focus {
  background-color: #474168 !important; /* colorBtnPrimaryHover from theme.js */
  border-color: #474168 !important;
  color: #ffffff !important;
}

.si-back-button {
  display: none;
}

/* Tags styling */
.si-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.si-company-tag {
  background-color: rgba(249, 196, 172, 0.2);
  color: #f9c4ac;
  border-color: rgba(249, 196, 172, 0.4);
  margin-bottom: 8px;
  margin-right: 8px;
  border-radius: 4px;
}

/* Language selector */
.si-language-selector {
  position: absolute;
  top: 20px;
  right: 20px;
}

.si-language-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #474168;
  color: #f9c4ac;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.2);
}

.si-language-dropdown:hover {
  background-color: rgba(249, 196, 172, 0.1);
}

.si-language-options {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #474168;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.15);
  overflow: hidden;
  min-width: 120px;
  display: none;
  z-index: 1000;
  border: 1px solid rgba(249, 196, 172, 0.3);
}

.si-language-options.show {
  display: block;
}

.si-language-option {
  padding: 10px 15px;
  cursor: pointer;
  color: #f9c4ac;
  transition: background-color 0.3s;
}

.si-language-option:hover {
  background-color: rgba(249, 196, 172, 0.1);
}

/* Footer */
.si-footer {
  display: none;
}

/* Section divider */
.si-section-divider {
  color: #f9c4ac !important;
  border-color: rgba(249, 196, 172, 0.3) !important;
  margin: 10px 0 10px !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 18px !important;
}

.si-section-divider::before,
.si-section-divider::after {
  border-color: rgba(249, 196, 172, 0.3) !important;
}

/* Fix divider title background to match container */
.si-container .ant-divider-horizontal.ant-divider-with-text::before,
.si-container .ant-divider-horizontal.ant-divider-with-text::after {
  border-color: rgba(249, 196, 172, 0.3) !important;
}

.si-container .ant-divider-horizontal.ant-divider-with-text-left .ant-divider-inner-text,
.si-container .ant-divider-horizontal.ant-divider-with-text-center .ant-divider-inner-text {
  background-color: #474168 !important; /* Match container background */
  color: #f9c4ac !important;
  padding: 0 15px !important;
}

/* Override Ant Design styling using exact theme.js values */
.si-container .ant-steps-item-title {
  color: rgba(249, 196, 172, 0.7) !important;
}

.si-container .ant-steps-item-finish .ant-steps-item-title,
.si-container .ant-steps-item-process .ant-steps-item-title {
  color: #f9c4ac !important;
}

.si-container .ant-steps-item-finish .ant-steps-item-icon,
.si-container .ant-steps-item-process .ant-steps-item-icon {
  background-color: #626f92 !important;
  border-color: #626f92 !important;
}

.si-container .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon,
.si-container .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
  color: #ffffff !important;
}

.si-container .ant-steps-item-finish .ant-steps-item-tail::after {
  background-color: #626f92 !important;
}

.si-container .ant-form-item-label > label {
  color: #f9c4ac !important;
  font-family: 'DM Sans', sans-serif;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
}

.si-container .ant-form-item-label > label.ant-form-item-required::before {
  color: #f9c4ac !important;
}

/* Using colorSearchInputBg and colorSearchInputBorder for input fields */
.si-container .ant-input,
.si-container .ant-input-affix-wrapper,
.si-container .ant-select-selector,
.si-container .ant-input-number,
.si-container .ant-input-textarea {
  background-color: rgba(249, 196, 172, 0.05) !important; /* Lighter background for better contrast */
  border-color: rgba(249, 196, 172, 0.3) !important;
  color: #f9c4ac !important; /* colorSearchInputText from theme.js */
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 38px !important; /* Same height for all inputs */
}

.si-container .ant-input-affix-wrapper .ant-input {
  background-color: transparent !important;
}

.si-container .ant-input:hover,
.si-container .ant-input-affix-wrapper:hover,
.si-container .ant-select-selector:hover {
  border-color: rgba(249, 196, 172, 0.5) !important;
}

.si-container .ant-input:focus,
.si-container .ant-input-affix-wrapper-focused,
.si-container .ant-select-focused .ant-select-selector {
  border-color: #626f92 !important;
  box-shadow: 0 0 0 2px rgba(98, 111, 146, 0.2) !important;
}

.si-container .ant-input::placeholder,
.si-container .ant-input-affix-wrapper .ant-input::placeholder {
  color: rgba(249, 196, 172, 0.5) !important; /* More visible placeholder text */
}

.si-container .ant-select-arrow,
.si-container .ant-input-password-icon {
  color: #f9c4ac !important; /* colorSearchIcon from theme.js */
  display: flex !important;
  align-items: center !important;
}

.si-container .ant-select-item {
  background-color: #474168;
  color: #f9c4ac;
}

.si-container .ant-select-dropdown {
  background-color: #474168 !important;
  border: 1px solid rgba(249, 196, 172, 0.3) !important;
  z-index: 1050 !important;
}

.si-container .ant-select-item-option-active:not(.ant-select-item-option-disabled),
.si-container .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: rgba(249, 196, 172, 0.2) !important; /* colorMenuItemSelectedBackground adapted from theme.js */
  color: #f9c4ac !important;
}

.si-container .ant-form-item-has-error .ant-input,
.si-container .ant-form-item-has-error .ant-input-affix-wrapper {
  border-color: #ff4d4f !important;
}

/* Icon styling */
.si-container .ant-input-prefix,
.si-container .ant-select-prefix {
  color: #f9c4ac !important; /* colorSearchIcon from theme.js */
  margin-right: 8px !important;
  display: flex !important;
  align-items: center !important;
}

/* Autocomplete dropdown */
.si-container .ant-select-dropdown {
  background-color: #474168 !important;
  box-shadow: 0 4px 12px rgba(39, 38, 55, 0.2) !important;
  border-radius: 8px !important;
}

/* Button style overrides */
.si-container .ant-btn-primary {
  background-color: #626f92 !important;
  border-color: #626f92 !important;
  color: #ffffff !important;
}

.si-container .ant-btn-primary:hover,
.si-container .ant-btn-primary:focus {
  background-color: #474168 !important;
  border-color: #474168 !important;
}

.si-container .ant-btn-default {
  background-color: transparent !important;
  border-color: #f9c4ac !important;
  color: #f9c4ac !important;
}

.si-container .ant-btn-default:hover, 
.si-container .ant-btn-default:focus {
  background-color: rgba(249, 196, 172, 0.1) !important;
  border-color: #f9c4ac !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .si-form-columns {
    flex-direction: column;
    gap: 0;
  }
  
  .si-step-container {
    padding: 20px;
    max-width: 100%;
  }
  
  .si-logo {
    width: 250px;
    height: 62.5px;
  }
  
  /* Use tablet specific tokens from theme.js */
  .si-container {
    font-size: 14px; /* tabletFontSize from theme.js */
  }
  
  .si-section-divider {
    margin: 16px 0 20px !important; /* tabletSpacing from theme.js */
  }
}

/* Login link container - Centered below the button */
.si-form-login-link {
  color: #f9c4ac;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  margin-top: 10px;
  text-align: center;
}

.si-form-login-link a {
  color: #626f92;
  font-weight: 600;
  margin-left: 5px;
  text-decoration: none;
}

.si-form-login-link a:hover {
  color: #f9c4ac;
  text-decoration: underline;
}

/* Fix the login link styling */
.login-link-below {
  color: #f9c4ac !important;
  font-family: 'DM Sans', sans-serif !important;
  margin-top: 15px !important;
  text-align: center !important;
  font-size: 15px !important;
}

.login-link-below a {
  color: #626f92 !important;
  font-weight: 600 !important;
  margin-left: 5px !important;
  text-decoration: none !important;
}

.login-link-below a:hover {
  color: #f9c4ac !important;
  text-decoration: underline !important;
}

/* Make select dropdowns more compact */
.si-container .ant-select-selector {
  height: 32px !important;
}

/* Reduce height of inputs with prefixes */
.si-container .ant-input-affix-wrapper {
  height: 35px !important;
  padding: 0 11px !important;
}

/* Reduce height of large inputs */
.si-container .ant-input-lg,
.si-container .ant-input-affix-wrapper-lg,
.si-container .ant-select-selector-lg {
  height: 35px !important;
}

/* Remove feedback spacing */
.si-container .ant-form-item-with-help .ant-form-item-explain {
  margin-top: 0 !important;
  font-size: 11px !important;
}

/* Hide company tags section */
.hide-tags-section {
  display: none !important;
}

/* Custom styling for phone input group to appear side by side */
.phone-input-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.phone-input-group .ant-select {
  width: 80px !important;
  flex-shrink: 0 !important;
}

.phone-input-group .phone-input {
  flex: 1 !important;
}

/* Better styling for the phone input to appear properly side by side */
.phone-input-group {
  display: flex !important;
  width: 100% !important;
}

.phone-input-group .ant-select {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  flex-shrink: 0 !important;
}

.phone-input-group .ant-select .ant-select-selector {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  height: 35px !important;
}

.phone-input-group .phone-input {
  flex: 1 !important;
  width: calc(100% - 70px) !important;
  margin-left: -1px !important; /* Overlap borders */
}

.phone-input-group .phone-input .ant-input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Ensure consistent heights for the phone inputs */
.phone-input-group .ant-input,
.phone-input-group .ant-select-selector {
  height: 35px !important;
}

/* Style for admin account section to ensure it spans the full width */
.admin-account-section {
  width: 100%;
  padding: 0;
}

/* Fix phone input group styling to show borders and add proper spacing */
.phone-input-group {
  display: flex !important;
  width: 100% !important;
  gap: 8px !important; /* Add consistent spacing between inputs */
}

.phone-input-group .ant-select {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  flex-shrink: 0 !important;
}

.phone-input-group .ant-select .ant-select-selector {
  border-radius: 8px !important; /* Restore full border radius */
  height: 35px !important;
  border: 1px solid rgba(249, 196, 172, 0.3) !important; /* Ensure border is visible */
}

.phone-input-group .phone-input {
  flex: 1 !important;
  width: calc(100% - 90px) !important; /* Account for the width of select + gap */
}

/* Reset border radius to default for phone input */
.phone-input-group .phone-input .ant-input {
  border-radius: 8px !important;
}

/* Ensure consistent heights for all input types */
.si-container .ant-input,
.si-container .ant-input-affix-wrapper,
.si-container .ant-select,
.si-container .ant-select-selector,
.si-container .ant-input-number,
.si-container .ant-input-number-input,
.si-container .ant-picker,
.si-container .ant-cascader-picker,
.si-container textarea.ant-input {
  height: 35px !important; /* Use the same height for all elements */
  line-height: 33px !important; /* Line height slightly less than height */
}

/* For TextArea inputs, allow height to grow */
.si-container textarea.ant-input {
  height: auto !important;
  min-height: 35px !important;
  line-height: 20px !important; /* Better line height for text areas */
}

/* Fix vertical alignment inside inputs */
.si-container .ant-input-affix-wrapper > input.ant-input,
.si-container .ant-select-selector > .ant-select-selection-search > input {
  height: 100% !important;
}

/* Ensure input content is centered vertically */
.si-container .ant-form-item-control-input {
  min-height: 35px !important;
}

/* Make sure item labels align perfectly */
.si-container .ant-form-item-label {
  height: 22px !important;
  line-height: 22px !important;
}

/* Ensure form items in both columns have the same height */
.si-form-column .ant-form-item {
  min-height: 63px !important; /* Label height + input height */
  margin-bottom: 6px !important;
}

/* Fix alignment of select dropdown contents */
.si-container .ant-select-selector .ant-select-selection-item {
  line-height: 33px !important;
}

/* Ensure prefix icons are aligned vertically */
.si-container .ant-input-prefix,
.si-container .ant-input-suffix {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Fix tooltip positioning */
.si-container .ant-form-item-tooltip {
  position: relative !important;
  display: inline-block !important;
  margin-left: 4px !important;
  color: #f9c4ac !important;
  vertical-align: top !important;  /* Added to move it up */
  top: -3px !important;  /* Added to move it up */
}

/* Make tooltip question marks more visible */
.si-container .anticon-question-circle {
  font-size: 14px !important;
  color: #f9c4ac !important;
  opacity: 0.8 !important;
}

.si-container .anticon-question-circle:hover {
  opacity: 1 !important;
}

/* Fix tooltip positioning */
.si-container .ant-form-item-tooltip {
  position: relative !important;
  display: inline-block !important;
  margin-left: 4px !important;
  color: #f9c4ac !important;
}

/* Ensure tooltip content is visible */
.si-container .ant-tooltip {
  max-width: 300px !important;
  z-index: 1060 !important;
}

.si-container .ant-tooltip-content {
  background-color: #272637 !important;
  border: 1px solid rgba(249, 196, 172, 0.3) !important;
}

.si-container .ant-tooltip-inner {
  color: #f9c4ac !important;
  background-color: #272637 !important;
  padding: 8px 12px !important;
}

.si-container .ant-tooltip-arrow::before {
  background-color: #272637 !important;
  border: 1px solid rgba(249, 196, 172, 0.3) !important;
}

/* Add these styles to your existing CSS file */

/* Country dropdown styling */
.country-name {
  display: inline-block;
  margin-right: 6px;
  color: #f9c4ac !important;
}

.country-code {
  color: #888;
  font-size: 0.85em;
  color: rgba(249, 196, 172, 0.7) !important;
}

.ant-select-item-option-content .ant-space {
  display: flex;
  align-items: center;
}

.ant-select-item-option-content .ant-avatar {
  margin-right: 8px;
  border: 1px solid #eee;
}

/* Add search highlight style */
.country-search-highlight {
  color: #1890ff;
  font-weight: 500;
}

/* Additional style for the phone input group */
.phone-input-group {
  display: flex;
}

.phone-input-group .ant-select {
  width: 80px;
  flex-shrink: 0;
}

.phone-input-group .phone-input {
  flex-grow: 1;
}

/* Fix alignment between columns */
.form-item-fixed-height {
  height: 70px !important; /* Fixed height for all form items */
  margin-bottom: 6px !important;
  display: flex;
  flex-direction: column;
}

/* Ensure all form items have the same height in both columns */
.si-form-column .ant-form-item {
  height: 70px !important;
  margin-bottom: 6px !important;
  display: flex;
  flex-direction: column;
}

/* Ensure the select dropdown matches theme */
.ant-select-dropdown {
  background-color: #272637 !important;
  border: 1px solid rgba(249, 196, 172, 0.3) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Style dropdown items to match theme */
.ant-select-item-option {
  background-color: #272637 !important;
  color: #f9c4ac !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled),
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: rgba(249, 196, 172, 0.2) !important;
  color: #f9c4ac !important;
}

/* Style country dropdown content */
.ant-select-item-option-content {
  display: flex !important;
  align-items: center !important;
}

.country-name {
  display: inline-block !important;
  margin-right: 6px !important;
}

.country-code {
  color: rgba(249, 196, 172, 0.7) !important;
  font-size: 0.85em !important;
}

/* Make sure dropdown is positioned correctly */
.ant-select-dropdown-placement-bottomLeft {

}

/* Improve the match between columns by ensuring same height inputs */
.si-container .ant-input,
.si-container .ant-input-affix-wrapper,
.si-container .ant-select-selector {
  height: 38px !important; /* Same height for all inputs */
}

.si-container .ant-form-item-control-input {
  min-height: 38px !important;
}

.si-container .ant-input-affix-wrapper .ant-input,
.si-container .ant-select-selector .ant-select-selection-search {
  height: 36px !important; /* Adjust inner input height */
}

/* Fix the phone input group alignment */
.phone-input-group {
  display: flex !important;
  gap: 8px !important;
}

.phone-input-group .ant-select {
  width: 80px !important;
  flex-shrink: 0 !important;
}

.phone-input-group .phone-input {
  flex: 1 !important;
}

/* Fix spacing in input groups */
.si-container .ant-input-affix-wrapper > .ant-input:not(:last-child) {
  padding-right: 8px !important;
}

/* Fix loader color in select dropdown */
.si-container .ant-spin-dot-item {
  background-color: #f9c4ac !important;
}

/* Ensure dropdown is visible with proper z-index */
.ant-select-dropdown {
  z-index: 1050 !important;
}

/* Add consistent padding within form columns */
.si-form-column {
  padding: 0 10px !important;
}

/* Ensure tooltip has higher z-index than dropdown */
.ant-tooltip {
  z-index: 1060 !important;
}

/* Fix form label alignment */
.si-container .ant-form-item-label > label {
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
}

/* Fix vertical alignment in inputs with prefixes */
.si-container .ant-input-prefix {
  margin-right: 8px !important;
  display: flex !important;
  align-items: center !important;
}

/* Fix select dropdown arrows */
.si-container .ant-select-arrow {
  display: flex !important;
  align-items: center !important;
  color: #f9c4ac !important;
}
.excel-panel-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  height: auto;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.excel-login-card,
.excel-panel-card {
  width: 100%;
  box-shadow: none;
  border-radius: 4px;
}

.excel-login-form {
  margin-top: 16px;
}

.excel-login-button {
  width: 100%;
}

/* Excel panel header with logout button */
.excel-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logout-button {
  margin-left: auto;
  font-size: 12px;
  padding: 0 8px;
  height: 28px;
}

/* Office-specific styling */
body.office-add-in {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  overflow: auto;
  font-size: 14px;
}

/* Excel-specific optimizations */
.office-excel-add-in .ant-card-head-title {
  font-size: 16px;
  padding: 8px 0;
}

.office-excel-add-in .ant-card-body {
  padding: 12px;
}

.office-excel-add-in .ant-typography {
  margin-bottom: 8px;
}

.office-excel-add-in .ant-input {
  height: 30px;
  font-size: 14px;
}

.office-excel-add-in .ant-btn {
  height: 32px;
  font-size: 14px;
  padding: 0 15px;
}

.office-excel-add-in .ant-select {
  font-size: 14px;
}

.office-excel-add-in .ant-select-selector {
  height: 30px !important;
}

.office-excel-add-in .ant-select-selection-item {
  line-height: 28px !important;
}

.office-excel-add-in .ant-form-item {
  margin-bottom: 12px;
}

.office-excel-add-in .ant-form-item-label > label {
  font-size: 14px;
  height: 24px;
}

.office-excel-add-in .ant-divider {
  margin: 8px 0;
}/* Support Ticket Page Styles */
.support-container {
  padding: 12px;
  background: #f0f2f5;
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-family);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  height: calc(100vh - 120px); /* Set height to viewport height minus header/footer space */
  margin-bottom: 40px;
  overflow-y: auto; /* Enable vertical scrolling */
}

.support-card {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
  height: auto; /* Let it grow with content */
  max-height: calc(100% - 20px); /* Subtract padding */
  overflow-y: visible; /* Let content overflow to container's scroll */
}

.support-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.support-header {
  margin-bottom: 32px;
}

.support-title {
  color: #474168;
  margin-bottom: 8px !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-title .anticon {
  font-size: 24px;
  color: #626f92;
}

.support-description {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
}

.support-content {
  max-width: 95%;
  margin: 0 0; /* Changed from 0 auto to left-align */
  height: 100%; /* Use full height of parent */
}

.support-scroll {
  overflow-y: auto; /* Enable vertical scrolling */
  max-height: calc(80vh - 180px); /* Set a maximum height for scrolling */
  padding-right: 10px; /* Add some padding for the scrollbar */
}

/* Custom scrollbar for better UX */
.support-scroll::-webkit-scrollbar {
  width: 6px;
}

.support-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.support-scroll::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 10px;
}

.support-scroll::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

.support-form .ant-form-item-label {
  padding-bottom: 8px;
}

.support-form .ant-form-item-label > label {
  color: #474168;
  font-weight: 500;
  height: auto;
}

/* Added styles to make form fields wider */
.support-form .ant-form-item {
  width: 90%;
}

.ticket-type-select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
}

.ticket-description {
  border-radius: 8px;
  resize: vertical;
  min-height: 200px; /* Increased from 120px to make it larger */
}

textarea#description.ant-input {
  min-height: 100%;
  resize: vertical;
  box-sizing: border-box;
}
.ant-input-data-count {
  position: absolute !important;
  bottom: -30px !important;
  right: 10px !important;
  color: #999 !important;
}

span.anticon.anticon-question-circle.ant-form-item-tooltip {
  margin-top: 2px;
}

.support-form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-start;
  gap: 16px;
}

.submit-button {
  background-color: #474168 !important;
  border-color: #474168 !important;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.submit-button:hover {
  background-color: #626f92 !important;
  border-color: #626f92 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(71, 65, 104, 0.2);
}

.help-button {
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  border-color: #474168;
  color: #474168;
}

.help-button:hover {
  color: #626f92;
  border-color: #626f92;
  background-color: rgba(71, 65, 104, 0.05);
}

/* Responsive styles */
@media (max-width: 768px) {
  .support-container {
    padding: 8px;
    gap: 12px;
  }
  
  .support-card {
    padding: 16px;
  }
  
  .support-title {
    font-size: 20px !important;
  }
  
  .support-description {
    font-size: 14px;
  }
  
  .support-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Responsive adjustments */
@media (max-height: 800px) {
  .support-scroll {
    max-height: calc(70vh - 120px);
  }
  
  .ticket-description {
    min-height: 150px;
  }
}

@media (max-height: 600px) {
  .support-container {
    height: calc(100vh - 80px);
  }
  
  .support-scroll {
    max-height: calc(65vh - 100px);
  }
  
  .ticket-description {
    min-height: 120px;
  }
}


/* Küçük Mobil Cihazlar - 576px ve altı */
@media screen and (max-width: 576px) {
  /* Table Styles */
  .ant-table {
    min-width: 450px;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 4px;
    font-size: 12px;
  }

  /* Stack action buttons */
  .ant-table .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ant-table .action-button {
    padding: 4px 8px;
    height: 28px;
    font-size: 12px;
  }

  /* Header & Dropdown */
  .admin-header .ant-space {
    gap: 8px !important;
  }

  .ant-dropdown {
    max-width: 280px;
  }

  /* Pagination */
  .ant-table-pagination.ant-pagination {
    justify-content: center;
  }

  .ant-pagination-options {
    display: none;
  }
}
/* Mobil Cihazlar - 768px ve altı */
@media screen and (max-width: 768px) {
  /* Layout & Sidebar */
  .ant-layout-sider {
    position: fixed !important;
    height: 100vh;
    left: 0;
    top: 0;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Header & Navigation */
  .ant-layout-header {
    padding: 0 12px !important;
    display: none !important;
  }

  .ant-menu-item, 
  .ant-menu-submenu-title {
    padding: 0 12px !important;
  }

  /* Mobile Specific */
  .mobile-collapse-overlay {
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
  }

  .ant-layout-header .ant-btn {
    position: relative !important;
    z-index: 1000 !important;
  }

  html,
  body {
    overflow: auto;
  }

  /* Table Styles */
  .ant-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ant-table {
    min-width: 600px;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 10px 6px;
    font-size: 13px;
  }

  .ant-table-column-hidden-mobile {
    display: none;
  }

  .ant-table-column-action {
    width: 60px;
    min-width: 60px;
  }

  /* Menu Background */
  .sidebar-bottom-menu {
    background-color: #272637 !important;
  }

  /* Mobile Bottom Menu Styles */
  .mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #272637;
    z-index: 1000;
    border-top: 1px solid rgba(249, 196, 172, 0.1);
    padding: 2px 0;
  }

  .mobile-bottom-menu .ant-menu {
    display: flex;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    height: 60px;
  }

  .mobile-bottom-menu .ant-menu-item {
    margin: 0 !important;
    padding: 6px 0 !important;
    height: 60px !important;
    flex: 1 1 20% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border: none !important;
  }

  .mobile-bottom-menu .ant-menu-item .anticon {
    font-size: 22px !important;
    margin: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
    color: #f9c4ac !important;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: #f9c4ac !important;
    opacity: 0.8;
    width: 100% !important;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute;
    top: 6px;
    right: 50%;
    transform: translateX(12px);
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    border-radius: 8px;
    box-shadow: 0 0 0 2px #272637;
  }

  .mobile-bottom-menu .ant-menu-item-selected {
    background: rgba(249, 196, 172, 0.15) !important;
  }

  .mobile-bottom-menu .ant-menu-item-selected .anticon,
  .mobile-bottom-menu .ant-menu-item-selected .ant-menu-title-content {
    opacity: 1;
    color: #f9c4ac !important;
  }

  .mobile-bottom-menu .ant-menu-item {
    margin: 0 !important;
    padding: 4px 0 !important;
    height: 48px !important;
    line-height: 1.2 !important;
    flex: 0 1 16.666% !important; /* Makes items take equal width (1/6) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-bottom-menu .ant-menu-item .anticon {
    font-size: 20px;
    margin: 0 !important;
    line-height: 1;
    color: #f9c4ac;
    transition: all 0.3s ease;
    margin-bottom: 2px !important;
  }

  .mobile-bottom-menu .ant-menu-item-selected {
    background: rgba(249, 196, 172, 0.15) !important;
    transform: translateY(-2px);
  }

  .mobile-bottom-menu .ant-menu-item-selected .anticon {
    transform: scale(1.1);
    color: #f9c4ac;
  }

  .mobile-bottom-menu .ant-menu-item::after {
    display: none;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 10px;
    margin-top: 2px !important;
    color: #f9c4ac;
    opacity: 0.8;
    transition: all 0.3s ease;
    line-height: 1;
  }

  .mobile-bottom-menu .ant-menu-item-selected .ant-menu-title-content {
    opacity: 1;
    font-weight: 500;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute;
    top: 2px;
    right: 0;
    transform: translateX(8px);
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    box-shadow: 0 0 0 2px #272637;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    border-radius: 8px;
  }

  /* Add active state animation */
  .mobile-bottom-menu .ant-menu-item:active {
    transform: scale(0.95) translateY(-2px);
  }

  .mobile-bottom-menu .ant-menu {
    display: flex;
    justify-content: space-around;
    background: transparent;
    border: none;
    color: #f9c4ac;
  }

  .mobile-bottom-menu .ant-menu-item {
    padding: 12px 0 !important;
    margin: 0 !important;
    border: none !important;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mobile-bottom-menu .ant-menu-item .anticon {
    font-size: 20px;
    margin: 0;
    color: #f9c4ac;
  }

  .mobile-bottom-menu .ant-menu-item:hover {
    background-color: rgba(249, 196, 172, 0.1) !important;
  }

  .mobile-bottom-menu .ant-badge {
    color: #f9c4ac;
  }

  /* Mobile Search Styles */
  .header-search {
    transition: all 0.3s ease;
    position: absolute;
    right: 60px;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
  }

  .header-search.mobile-search-active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-search-button {
    margin-right: 8px;
  }

  .search-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #474168;
    padding: 10px;
    z-index: 1001;
  }

  .search-container.active {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: #272637;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-search {
    flex: 1;
  }

  .close-search-button {
    margin-left: 8px;
    color: #f9c4ac;
  }

  /* Adjust content padding for bottom menu */
  .ant-layout-content {
    padding-bottom: 64px !important;
  }

  /* Hide desktop header items */
  .admin-header .ant-space > *:not(.mobile-search-button) {
    display: none;
  }

  /* Hide desktop search on mobile */
  .desktop-search {
    display: none !important;
  }

  /* Mobile search button */
  .mobile-search-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(249, 196, 172, 0.15);
    border: none;
    transition: all 0.3s ease;
  }

  .mobile-search-button:hover {
    background: rgba(249, 196, 172, 0.25);
  }

  /* Adjust content padding when search is active */
  .ant-layout-content.search-active {
    padding-top: 56px;
  }

  /* Ensure proper z-index stacking */
  .mobile-search-overlay {
    position: fixed;
    z-index: 1001;
  }

  .ant-layout-content {
    padding-top: 0;
  }

  .ant-layout-header .ant-input-search {
    display: none;
  }

  .admin-header {
    padding: 0 16px !important;
  }

  /* Adjust content padding when search is open */
  .ant-layout-content {
    padding-top: var(--search-height, 0);
    transition: padding-top 0.3s ease;
  }

  .mobile-bottom-menu .ant-menu-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 56px !important;
    padding: 4px 0 !important;
    gap: 2px !important;
  }

  .mobile-bottom-menu .ant-menu-item .anticon {
    margin: 0 !important;
    font-size: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-bottom-menu .ant-menu-item .ant-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    transform: translate(50%, -50%) !important;
    top: -2px !important;
    right: -2px !important;
  }

  .mobile-bottom-menu .ant-menu-item {
    height: 60px !important;
    padding: 8px 0 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .mobile-bottom-menu .ant-menu-item .icon-wrapper {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-bottom-menu .ant-menu-item .anticon {
    font-size: 20px !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    color: #f9c4ac !important;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 11px !important;
    line-height: 1.2 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.8 !important;
    text-align: center !important;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 2px #272637 !important;
    transform: none !important;
  }

  /* Simplify and fix mobile bottom menu styles */
  .mobile-bottom-menu .ant-menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 56px !important;
    padding: 8px 4px 4px !important;
    gap: 4px !important;
  }

  .mobile-bottom-menu .icon-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
  }

  .mobile-bottom-menu .icon-wrapper .anticon {
    font-size: 20px !important;
    display: block !important;
    color: #f9c4ac !important;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    transform: scale(0.85) !important;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin-top: 4px !important;
    color: #f9c4ac !important;
    opacity: 0.8;
  }

  /* Remove any conflicting styles */
  .mobile-bottom-menu .ant-menu-item::before,
  .mobile-bottom-menu .ant-menu-item::after {
    display: none !important;
  }

  .mobile-bottom-menu .ant-menu-item {
    height: 60px !important;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 20% !important; /* 5 öğe için eşit genişlik */
  }

  .mobile-bottom-menu .icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .mobile-bottom-menu .icon-wrapper .anticon {
    font-size: 24px !important;
    height: 24px !important;
    width: 24px !important;
    line-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: #f9c4ac !important;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    box-shadow: 0 0 0 2px #272637 !important;
  }

  /* Remove any conflicting styles */
  .mobile-bottom-menu .ant-menu-item::before,
  .mobile-bottom-menu .ant-menu-item::after {
    display: none !important;
  }

  /* Reset all previous mobile menu styles */
  .mobile-bottom-menu .ant-menu-item * {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-bottom-menu .ant-menu {
    height: 64px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-around !important;
  }

  .mobile-bottom-menu .ant-menu-item {
    height: 64px !important;
    padding: 8px 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: relative !important;
  }

  .mobile-bottom-menu .icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    width: 28px !important;
    position: relative !important;
  }

  .mobile-bottom-menu .icon-wrapper .anticon {
    font-size: 24px !important;
    color: #f9c4ac !important;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 11px !important;
    color: #f9c4ac !important;
    opacity: 0.8;
    text-align: center !important;
    width: 100% !important;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute !important;
    right: -8px !important;
    top: -4px !important;
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    height: 18px !important;
    min-width: 18px !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    box-shadow: 0 0 0 2px #272637 !important;
  }

  .mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #272637;
    z-index: 999;
    border-top: 1px solid rgba(249, 196, 172, 0.1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .mobile-bottom-menu .ant-menu {
    height: 60px;
    background: transparent;
    border: none;
    display: flex !important;
    justify-content: space-between !important;
  }

  .mobile-bottom-menu .ant-menu-item {
    flex: 1 !important;
    width: 20% !important;
    min-width: 0 !important;
    max-width: 20% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition: none !important;
    background: none !important;
    position: relative !important;
  }

  .mobile-bottom-menu .icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .mobile-bottom-menu .icon-wrapper .anticon {
    font-size: 20px;
    color: #f9c4ac;
  }

  .mobile-bottom-menu .ant-menu-title-content {
    font-size: 11px;
    line-height: 1;
    color: #f9c4ac;
    opacity: 0.8;
    margin-top: 4px;
    text-align: center;
    width: 100%;
  }

  .mobile-bottom-menu .ant-badge {
    position: absolute;
    top: 0;
    right: -4px;
    transform: translate(0, -50%);
  }

  .mobile-bottom-menu .ant-badge .ant-badge-count {
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    font-size: 10px;
    border-radius: 8px;
    box-shadow: 0 0 0 2px #272637;
  }

  /* Kaldır tüm hover ve aktif durumları */
  .mobile-bottom-menu .ant-menu-item:hover,
  .mobile-bottom-menu .ant-menu-item:active,
  .mobile-bottom-menu .ant-menu-item.ant-menu-item-selected {
    background: none !important;
  }

  /* Pixel 7 ve benzer cihazlar için özel ayarlar */
  @media screen and (min-width: 400px) and (max-width: 415px) {
    .mobile-bottom-menu .ant-menu-item {
      width: 82.4px !important;
      min-width: 82.4px !important;
      max-width: 82.4px !important;
    }
  }

  /* Mobile Modal Styles */
  .ant-modal {
    margin: 0;
    padding: 0;
    max-width: 100% !important;
    top: 0 !important;
  }

  .ant-modal-content {
    border-radius: 0;
    min-height: 100vh;
  }

  .ant-modal-body {
    max-height: calc(100vh - 110px) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Native-like scroll behavior */
  * {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Prevent rubber band effect on iOS */
  body {
    overscroll-behavior-y: contain;
  }

  /* Improve touch targets */
  button, 
  .ant-btn,
  .ant-tabs-tab {
    min-height: 44px; /* iOS minimum touch target size */
    touch-action: manipulation;
  }

  /* Add momentum scrolling */
  .ant-drawer-content-wrapper {
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile Tab Styles */
  .ant-tabs-nav-list {
    flex-direction: column !important;
    width: 100% !important;
  }

  .ant-tabs-tab {
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(71, 65, 104, 0.15) !important;
  }

  .ant-tabs-tab:last-child {
    border-bottom: none !important;
  }

  .ant-tabs-ink-bar {
    display: none !important;
  }

  .ant-tabs-tab.ant-tabs-tab-active {
    background-color: rgba(71, 65, 104, 0.05) !important;
  }

  /* Mobile Modal Styles - Update z-index values */
  .ant-modal-root {
    z-index: var(--z-index-modal) !important;
  }

  .ant-modal {
    z-index: var(--z-index-modal) !important;
  }

  .ant-modal-mask {
    z-index: var(--z-index-modal) !important;
  }

  .ant-modal-wrap {
    z-index: var(--z-index-modal) !important;
  }

  /* Ensure tabs stay below modals on mobile */
  .ant-tabs,
  .ant-tabs-nav,
  .ant-tabs-nav-list {
    z-index: var(--z-index-tabs) !important;
  }

  /* Mobile Modal Styles */
  .ant-modal-root,
  .ant-modal-wrap,
  .ant-modal-mask,
  div[role="dialog"] {
    z-index: var(--z-index-modal) !important;
  }

  .ant-modal {
    z-index: calc(var(--z-index-modal) + 10) !important;
    margin: 0;
    padding: 0;
    max-width: 100% !important;
    top: 0 !important;
  }

  .ant-modal-content {
    position: relative;
    z-index: calc(var(--z-index-modal) + 20) !important;
    border-radius: 0;
    min-height: 100vh;
  }

  /* Ensure tabs stay below modals on mobile */
  .ant-tabs,
  .ant-tabs-nav,
  .ant-tabs-nav-list {
    position: relative;
    z-index: var(--z-index-tabs) !important;
  }

  /* Force tabs below when modal is open */
  body.ant-modal-open .ant-tabs,
  body.ant-modal-open .ant-tabs-nav,
  body.ant-modal-open .ant-tabs-nav-list {
    z-index: var(--z-index-content) !important;
  }

  /* Reset z-index when modal is open */
  .ant-modal-open .ant-tabs,
  .ant-modal-open .ant-tabs-nav {
    z-index: var(--z-index-content) !important;
  }
}
/* Tablet - 769px ile 1024px arası */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .ant-layout-sider {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
  }

  .ant-layout-sider .ant-menu {
    width: 80px !important;
  }

  .ant-layout-sider .ant-menu-item,
  .ant-layout-sider .ant-menu-submenu-title {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 50px !important;
  }

  .ant-layout-sider .ant-menu-item .anticon,
  .ant-layout-sider .ant-menu-submenu-title .anticon {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
  }

  .ant-layout-sider .ant-menu-item-icon {
    margin: 0 !important;
  }

  .ant-layout-sider .ant-menu-title-content {
    opacity: 0 !important;
    display: none !important;
  }

  /* Hide collapse button in tablet mode */
  .ant-layout-sider-trigger {
    display: none !important;
  }
  
  /* Hide menu text in tablet mode */
  .ant-menu-inline-collapsed {
    width: 80px !important;
  }

  .ant-menu-inline-collapsed .ant-menu-item,
  .ant-menu-inline-collapsed .ant-menu-submenu-title {
    padding: 0 !important;
    text-align: center !important;
  }

  /* Ensure tabs stay horizontal on tablet */
  .ant-tabs-nav-list {
    flex-direction: row !important;
  }

  .ant-tabs-tab {
    flex: 1 !important;
    justify-content: center !important;
  }
}
/* Büyük Ekranlar - 1200px ve altı */
@media screen and (max-width: 1200px) {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 12px 8px;
  }
}
/* iPad Mini ve iPad Air Özel Stilleri */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
  /* Layout ve Header */
  .ant-layout-sider {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .ant-layout-header {
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 16px !important;
  }

  /* Menu ve İçerik */
  .ant-menu-item {
    padding: 8px 12px !important;
    margin: 4px !important;
    height: 40px !important;
    line-height: 24px !important;
  }

  .ant-layout-content {
    padding: 16px !important;
  }

  /* Form Elemanları */
  .ant-input,
  .ant-select-selector,
  .ant-btn {
    height: 36px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
  }

  .ant-form-item {
    margin-bottom: 16px !important;
  }

  /* Touch Optimizasyonları */
  .ant-table,
  .ant-menu,
  .ant-tabs-nav {
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
  }
}
/* Touch Device Optimizations */
@media (hover: none) {
  .ant-table-wrapper {
    -webkit-overflow-scrolling: touch;
  }

  .ant-table-tbody > tr:hover > td {
    background: none;
  }

  .ant-table-wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 6px;
  }

  .ant-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 4px;
  }
}
/* Mobile Search Styles */
.mobile-search-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #272637;
  padding: 12px;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideDown 0.3s ease-out;
}
.mobile-search-input {
  flex: 1;
}
.mobile-search-input .ant-input {
  background: rgba(249, 196, 172, 0.1);
  border: 1px solid rgba(249, 196, 172, 0.2);
  color: #f9c4ac;
}
.mobile-search-input .ant-input::placeholder {
  color: rgba(249, 196, 172, 0.5);
}
.close-search-button {
  color: #f9c4ac;
  background: rgba(249, 196, 172, 0.15);
  border: none;
}
/* Mobile Search Overlay Styles */
.mobile-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #272637;
  z-index: 1001;
  padding: 12px;
  animation: slideDown 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.mobile-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.search-input-container {
  flex: 1;
  min-width: 0; /* Add this to prevent overflow */
}
.mobile-search-input {
  width: 100%;
}
.mobile-search-input .ant-input-affix-wrapper {
  background: rgba(249, 196, 172, 0.1);
  border: 1px solid rgba(249, 196, 172, 0.2);
}
.close-search-button {
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 196, 172, 0.15) !important;
  border: none !important;
  border-radius: 50% !important;
  margin-left: 8px !important;
}
.close-search-button .anticon {
  color: #f9c4ac;
  font-size: 16px;
}
/* Ensure search button styling */
.mobile-search-input .ant-input-search-button {
  background: rgba(249, 196, 172, 0.15) !important;
  border: none !important;
  height: 40px !important;
}
/* Input container styling */
.mobile-search-input .ant-input {
  background: transparent;
  border: none;
  color: #f9c4ac;
  height: 40px;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Mobile Modal Styles */
.ant-modal-root {
    z-index: 1050 !important;
}
.ant-modal {
    z-index: 1051 !important;
}
.ant-modal-mask {
    z-index: 1050 !important;
}
.ant-modal-wrap {
    z-index: 1051 !important;
}
* {
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
html,
body {
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    background-color: #f8f9fa;
    color: #272637;
}
/* Custom CSS for Ant Design Menu */
/* Background color for the entire menu */
.ant-layout-sider {
    background-color: #272637 !important;
    box-shadow: 2px 0 20px rgba(39, 38, 55, 0.15);
    color: #c8c8c8;
}
/* Menu items text color */
.ant-menu-item,
.ant-menu-submenu-title {
    color: #f9c4ac !important;
    font-weight: 300;
    margin: 4px 8px !important;
    border-radius: 6px;
}
/* Hover state for menu items */
.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
    background-color: rgba(249, 196, 172, 0.1) !important;
    color: #626f92 !important;
}
/* Selected state for menu items */
.ant-menu-item-selected,
.ant-menu-submenu-selected {
    background-color: #474168 !important;
    color: #f9c4ac !important;
}
/* Divider line between menu items */
.ant-menu-item-divider {
    background-color: #505050 !important; /* Divider color */
}
/* Submenu background color */
.ant-menu-sub {
    background-color: #3D3643 !important; /* Lighter grey for submenus */
}
/* Submenu item hover background */
.ant-menu-submenu-popup .ant-menu-item:hover {
    background-color: #444444 !important; /* Hover background for submenu items */
}
/* Submenu item text color */
.ant-menu-submenu-popup .ant-menu-item {
    color: #c5addc !important; /* Açık mor tonu - temaya uyumlu yeni renk */
    font-weight: 400;
}
/* Submenu item selected background and text color */
.ant-menu-submenu-popup .ant-menu-item-selected {
    background-color: #505050 !important; /* Background for selected submenu items */
    color: #000 !important; /* Lighter grey text for selected submenu items */
}
/* Submenu styles - Updated with more specific selectors */
.ant-menu-submenu .ant-menu-sub .ant-menu-item,
.ant-menu-submenu-popup .ant-menu-sub .ant-menu-item {
    color: #c5addc !important;
    font-weight: 100;
}
.ant-menu-submenu .ant-menu-sub .ant-menu-item:hover,
.ant-menu-submenu-popup .ant-menu-sub .ant-menu-item:hover {
    color: #f9c4ac !important;
}
.ant-menu-submenu .ant-menu-sub .ant-menu-item-selected,
.ant-menu-submenu-popup .ant-menu-sub .ant-menu-item-selected {
    color: #f9c4ac !important;
}
/* Modal içindeki Cancel butonu */
/*.ant-modal .ant-btn {
  background-color:none !important; /* Buton arka plan rengi */
/* color: #1f1f1f !important;           
 border:3px #1f1f1f !important;            
}

/* Modal içindeki OK butonu (Primary button) */
.ant-modal .ant-btn-primary {
    background-color: #626f92 !important;
    border-color: #626f92 !important;
    box-shadow: 0 2px 0 rgba(71, 65, 104, 0.1);
    color: #ffffff !important; /* Primary buton yazı rengi */
    border-color: #1f1f1f !important; /* Primary buton kenarlık rengi */
}
.ant-modal .ant-btn:hover {
    background-color: #e0e0e0 !important; /* Cancel buton hover arka plan rengi */
    color: #1f1f1f !important; /* Cancel buton hover yazı rengi */
    border-color: #1f1f1f !important; /* Cancel buton hover kenarlık rengi */
}
/* Modal içindeki OK butonu (Primary button) */
.ant-modal .ant-btn-primary {
    background-color: #1f1f1f !important; /* Primary buton arka plan rengi */
    color: #ffffff !important; /* Primary buton yazı rengi */
    border-color: #1f1f1f !important; /* Primary buton kenarlık rengi */
}
.ant-modal .ant-btn-primary:hover {
    background-color: #474168 !important;
    border-color: #474168 !important;
    transform: translateY(-1px);
}
/* Modal içindeki OK butonu (Primary button) active durumu */
.ant-modal .ant-btn-primary:active {
    background-color: #4a4a4a !important; /* Primary buton active arka plan rengi */
    color: #ffffff !important; /* Primary buton active yazı rengi */
    border-color: #4a4a4a !important; /* Primary buton active kenarlık rengi */
}
/* Modal Button Styles */
.ant-modal .ant-btn {
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}
/* Modal Cancel Button */
.ant-modal .ant-btn-default {
    background-color: transparent !important;
    border-color: #474168 !important;
    color: #474168 !important;
}
.ant-modal .ant-btn-default:hover {
    background-color: rgba(71, 65, 104, 0.05) !important;
    border-color: #626f92 !important;
    color: #626f92 !important;
}
/* Modal OK/Primary Button */
.ant-modal .ant-btn-primary {
    background-color: #474168 !important;
    border-color: #474168 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 0 rgba(71, 65, 104, 0.1);
}
.ant-modal .ant-btn-primary:hover {
    background-color: #626f92 !important;
    border-color: #626f92 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(71, 65, 104, 0.2);
}
.ant-modal .ant-btn-primary:active {
    background-color: #272637 !important;
    border-color: #272637 !important;
    transform: translateY(0);
    box-shadow: none;
}
/* Modal scroll styles */
.ant-modal {
  top: 20px !important;
}
.ant-modal-content {
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.ant-modal-body {
  max-height: calc(90vh - 110px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
*.ant-modal-body::-webkit-scrollbar {
    width: 8px !important; /* Kaydırma çubuğu genişliği */
}
*.ant-modal-body::-webkit-scrollbar-track {
    background: #ffffff !important; /* Kaydırma çubuğu arka plan rengi */
}
*.ant-modal-body::-webkit-scrollbar-thumb {
    background: #626f92 !important; /* Kaydırma çubuğu rengi */
    border-radius: 4px !important;
}
*.ant-modal-body::-webkit-scrollbar-thumb:hover {
    background: #474168 !important; /* Kaydırma çubuğu üzerine gelindiğinde rengi */
}
/* Genel kaydırma çubuğu stilleri */
*::-webkit-scrollbar {
    width: 8px !important; /* Kaydırma çubuğu genişliği */
}
*::-webkit-scrollbar-track {
    background: #f1f1f1 !important; /* Kaydırma çubuğu arka plan rengi */
}
*::-webkit-scrollbar-thumb {
    background: #888 !important; /* Kaydırma çubuğu rengi */
    border-radius: 4px !important;
}
*::-webkit-scrollbar-thumb:hover {
    background: #474168 !important; /* Kaydırma çubuğu üzerine gelindiğinde rengi */
}
/* Button Styles */
.ant-btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
/* Primary Button - Renkleri ters çevirdik */
.ant-btn-primary {
    background-color: #474168 !important;
    border-color: #474168 !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out;
}
.ant-btn-primary:hover {
    background-color: #626f92 !important;
    border-color: #626f92 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(71, 65, 104, 0.2);
}
.ant-btn-primary:active {
    background-color: #272637 !important;
    border-color: #272637 !important;
    transform: translateY(0);
    box-shadow: none;
}
/* Default Button - Hover rengini de uyumlu hale getirdik */
.ant-btn-default {
    border-color: #474168;
    color: #474168;
}
.ant-btn-default:hover {
    color: #626f92;
    border-color: #626f92;
    background-color: rgba(98, 111, 146, 0.05);
}
/* Dashed Button */
.ant-btn-dashed {
    border-color: #626f92;
    color: #272637;
}
.ant-btn-dashed:hover {
    color: #626f92;
    border-color: #474168;
}
/* Text Button */
.ant-btn-text:hover {
    background-color: rgba(98, 111, 146, 0.05);
    color: #474168;
}
/* Link Button - Updated hover color */
.ant-btn-link {
    color: #474168;
    padding: 4px 8px;
    height: auto;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.ant-btn-link:hover {
    color: #f9c4ac !important;
    background-color: rgba(249, 196, 172, 0.05);
    text-decoration: none;
}
.ant-btn-link:active {
    color: #626f92;
    background-color: rgba(71, 65, 104, 0.1);
}
.ant-btn-link:focus {
    text-decoration: none;
}
.ant-btn-link[disabled],
.ant-btn-link[disabled]:hover,
.ant-btn-link[disabled]:focus,
.ant-btn-link[disabled]:active {
    color: rgba(71, 65, 104, 0.3);
    background: transparent;
    cursor: not-allowed;
}
/* Danger Button */
.ant-btn-dangerous {
    background-color: #f9c4ac !important;
    border-color: #f9c4ac !important;
    color: #272637 !important;
}
.ant-btn-dangerous:hover {
    background-color: #ee8374 !important;
    border-color: #ee8374 !important;
    color: #ffffff !important;
}
/* Ghost Button */
.ant-btn-background-ghost {
    border-color: #626f92 !important;
    color: #626f92 !important;
}
.ant-btn-background-ghost:hover {
    border-color: #474168 !important;
    color: #474168 !important;
    background-color: rgba(98, 111, 146, 0.05) !important;
}
/* Disabled State */
.ant-btn:disabled {
    background-color: #f0f0f0 !important;
    border-color: #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.25) !important;
}
/* Loading State */
.ant-btn-loading {
    opacity: 0.8;
    cursor: default;
}
/* Tooltip Styles */
.ant-tooltip {
    --antd-arrow-background-color: #272637;
}
.ant-tooltip .ant-tooltip-inner {
    background-color: #272637;
    color: #f9c4ac;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(39, 38, 55, 0.2);
    border: 1px solid rgba(249, 196, 172, 0.1);
}
.ant-tooltip .ant-tooltip-arrow {
    --antd-arrow-border-color: #272637;
}
.ant-tooltip .ant-tooltip-arrow::before {
    background-color: #272637;
    border: 1px solid rgba(249, 196, 172, 0.1);
}
/* Form Controls Styles */
/* Label Styles */
.ant-form-item-label > label {
    color: #474168;
    font-weight: 500;
    font-size: 14px;
}
.ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
    color: #f9c4ac;
}
/* Input Styles */
.ant-input {
    border-color: #e0e4e8;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.ant-input:hover {
    border-color: #626f92;
}
.ant-input:focus,
.ant-input-focused {
    border-color: #474168;
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1);
}
/* Input with Prefix/Suffix */
.ant-input-affix-wrapper {
    border-color: #e0e4e8;
    border-radius: 6px;
}
.ant-input-affix-wrapper:hover {
    border-color: #626f92;
}
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
    border-color: #474168;
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1);
}
/* Input yüksekliği düzenlemesi */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-search,
.ant-input-search-button {
  height: 32px !important; /* Input yüksekliğini küçülttük */
  line-height: 32px !important;
  display: flex !important;
  align-items: center !important;
}
.ant-input-search .ant-input {
  display: flex !important;
  align-items: center !important;
}
.ant-input-search .ant-input::placeholder {
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
}
.ant-input-search .ant-input-wrapper {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}
.ant-input-search .ant-input-group-addon {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}
.ant-input-search .ant-input-search-button {
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Select Styles */
.ant-select:not(.ant-select-disabled) .ant-select-selector {
    border-color: #e0e4e8;
    border-radius: 6px;
}
.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
    border-color: #626f92;
}
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
    border-color: #474168 !important;
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1) !important;
}
/* Radio Styles */
.ant-radio-wrapper {
    color: #474168;
}
.ant-radio-checked .ant-radio-inner {
    border-color: #474168 !important;
    background-color: #474168 !important;
}
.ant-radio:hover .ant-radio-inner {
    border-color: #626f92;
}
/* Checkbox Styles */
.ant-checkbox-wrapper {
    color: #474168;
}
.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #474168;
    border-color: #474168;
}
.ant-checkbox:hover .ant-checkbox-inner {
    border-color: #626f92;
}
/* Switch Styles */
.ant-switch {
    background: rgba(71, 65, 104, 0.3);
}
.ant-switch-checked {
    background: #474168 !important;
}
/* TextArea Styles */
.ant-input-textarea textarea {
    border-color: #e0e4e8;
    border-radius: 6px;
}
.ant-input-textarea textarea:hover {
    border-color: #626f92;
}
.ant-input-textarea textarea:focus {
    border-color: #474168;
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1);
}
/* Form Validation States */
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-input:hover,
.ant-form-item-has-error .ant-input-affix-wrapper:hover {
    border-color: #ee8374;
}
.ant-form-item-has-error .ant-input:focus,
.ant-form-item-has-error .ant-input-affix-wrapper:focus {
    border-color: #ee8374;
    box-shadow: 0 0 0 2px rgba(238, 131, 116, 0.1);
}
.ant-form-item-explain-error {
    color: #ee8374;
    font-size: 13px;
}
/* Input Number Styles */
.ant-input-number {
    border-color: #e0e4e8;
    border-radius: 6px;
}
.ant-input-number:hover {
    border-color: #626f92;
}
.ant-input-number-focused {
    border-color: #474168;
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1);
}
/* DatePicker Styles */
.ant-picker {
    border-color: #e0e4e8;
    border-radius: 6px;
}
.ant-picker:hover {
    border-color: #626f92;
}
.ant-picker-focused {
    border-color: #474168;
    box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1);
}
/* TimePicker Styles */
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected 
.ant-picker-time-panel-cell-inner {
    background: #474168;
}
/* Breadcrumb Styles */
.ant-breadcrumb {
    transition: all 0.3s ease;
    background-color: rgba(71, 65, 104, 0.1);
    padding: 12px 20px;
    box-shadow: 0 8px 24px rgba(71, 65, 104, 0.35); /* Gölgeyi daha koyu yaptık */
    border: 1px solid rgba(71, 65, 104, 0.25); /* Border'ı da biraz daha belirgin yaptık */
    position: relative;
    z-index: 0; /* Header'ın altında kalması için z-index'i düşürdük */
    backdrop-filter: blur(8px);
    margin-top: 4px; /* Header ile arasında boşluk bıraktık */
    transform: translateY(0); /* Yukarı kaldırma efektini kaldırdık */
}
.ant-breadcrumb:hover {
    box-shadow: 0 12px 28px rgba(71, 65, 104, 0.45); /* Hover durumunda gölgeyi daha da belirgin yaptık */
    background-color: rgba(71, 65, 104, 0.15);
    transform: translateY(-0.3px); /* Hover efektini azalttık */
}
.ant-breadcrumb ol {
    display: flex;
    align-items: center;
}
.ant-breadcrumb-link {
    color: #474168 !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
    padding: 4px 0;
}
.ant-breadcrumb-link:hover {
    color: #626f92 !important;
}
.ant-breadcrumb-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #f9c4ac;
    transition: width 0.2s ease;
}
.ant-breadcrumb-link:hover::after {
    width: 100%;
}
.ant-breadcrumb-separator {
    color: #626f92 !important;
    margin: 0 8px;
    opacity: 0.7;
}
.ant-breadcrumb > ol > li:last-child .ant-breadcrumb-link {
    color: #f9c4ac !important;
    font-weight: 600;
}
.ant-breadcrumb > ol > li:last-child .ant-breadcrumb-link:hover {
    cursor: default;
}
.ant-breadcrumb > ol > li:last-child .ant-breadcrumb-link::after {
    display: none;
}
.ant-breadcrumb .anticon {
    margin-right: 6px;
    color: #474168;
    font-size: 14px;
    vertical-align: -1px;
}
/* Link Styles */
.ant-typography a,
.ant-typography-link {
    color: #626f92 !important;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}
.ant-typography a:hover,
.ant-typography-link:hover {
    color: #474168 !important;
}
.ant-typography a::after,
.ant-typography-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #474168;
    transition: width 0.2s ease;
}
.ant-typography a:hover::after,
.ant-typography-link:hover::after {
    width: 100%;
}
/* Link with Icon */
.ant-typography-link .anticon {
    color: #626f92 !important;
    margin-right: 4px;
    font-size: 14px;
    vertical-align: -1px;
}
/* Disabled Link */
.ant-typography-link-disabled,
.ant-typography-link-disabled:hover {
    color: rgba(98, 111, 146, 0.3) !important;
    cursor: not-allowed;
}
.ant-typography-link-disabled::after {
    display: none;
}
/* Divider Styles */
.ant-divider {
    border-color: rgba(98, 111, 146, 0.15);
    margin: 16px 0;
}
/* Vertical Divider */
.ant-divider-vertical {
    border-color: rgba(98, 111, 146, 0.15);
    height: 1em;
    margin: 0 8px;
}
/* Divider with Text */
.ant-divider-horizontal.ant-divider-with-text {
    color: #626f92;
    font-size: 14px;
    font-weight: 500;
}
.ant-divider-horizontal.ant-divider-with-text::before,
.ant-divider-horizontal.ant-divider-with-text::after {
    border-color: rgba(98, 111, 146, 0.15);
}
/* Divider Text Variants */
.ant-divider-horizontal.ant-divider-with-text-left,
.ant-divider-horizontal.ant-divider-with-text-right,
.ant-divider-horizontal.ant-divider-with-text-center {
    font-size: 14px;
    color: #626f92;
    font-weight: 500;
}
/* Divider Text Container */
.ant-divider-inner-text {
    padding: 0 16px;
    background: #f8f9fa;
}
/* Dashed Divider */
.ant-divider-dashed {
    border-style: dashed;
    border-color: rgba(98, 111, 146, 0.2);
}
/* Tab Controls Styles */
.ant-tabs {
    color: #474168;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ant-tabs-nav {
    margin: 0 !important; /* Reduced from 16px to 8px */
    position: relative;
    z-index: 1;
    padding: 0 !important;
    background: #fff;
}
/* Tab nav list */
.ant-tabs-nav-list {
    border-bottom: 1px solid rgba(71, 65, 104, 0.15);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row !important;
    width: 100% !important;
}
/* Tab items */
.ant-tabs-tab {
    position: relative;
    padding: 12px 24px !important;
    transition: all 0.3s ease;
    color: #626f92;
    font-weight: 500;
    cursor: pointer !important; /* Make sure tabs are clickable */
    user-select: none;
    margin: 0 !important;
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
}
/* Remove potentially interfering hover effects */
.ant-tabs-tab::before {
    display: none;
}
.ant-tabs-tab:hover {
    color: #474168;
}
/* Active tab with glow effect */
.ant-tabs-tab.ant-tabs-tab-active {
    position: relative;
    color: #474168 !important;
    background: transparent !important;
}
.ant-tabs-tab.ant-tabs-tab-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f9c4ac;
    box-shadow: 0 0 8px rgba(249, 196, 172, 0.6);
    animation: tabGlow 2s infinite;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #474168 !important;
    font-weight: 500;
}
@keyframes tabGlow {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
/* Tab ink bar (the line under active tab) */
.ant-tabs-ink-bar {
    background: #f9c4ac !important;
    height: 2px !important;
}
/* Tab content */
.ant-tabs-content {
    padding: 8px 0; /* Reduced from 16px to 8px */
    height: 100%;
    flex: 1;
}
.ant-tabs-content-holder {
    position: relative;
    z-index: 0;
    flex: 1;
    overflow: auto;
}
/* Tab close button */
.ant-tabs-tab .ant-tabs-tab-remove {
    color: #626f92;
    margin-left: 8px;
    font-size: 12px;
}
.ant-tabs-tab .ant-tabs-tab-remove:hover {
    color: #474168;
}
/* Card style tabs */
.ant-tabs-card .ant-tabs-nav-list {
    border: none;
}
.ant-tabs-card .ant-tabs-tab {
    background: rgba(71, 65, 104, 0.05);
    border: 1px solid rgba(71, 65, 104, 0.15);
    border-radius: 6px 6px 0 0;
    margin-right: 4px;
}
.ant-tabs-card .ant-tabs-tab-active {
    background: #fff;
    border-bottom-color: #fff;
}
/* Disabled tab */
.ant-tabs-tab.ant-tabs-tab-disabled {
    color: rgba(71, 65, 104, 0.3);
    cursor: not-allowed;
}
/* Tab nav operations (dropdown menu for overflow) */
.ant-tabs-nav-operations {
    color: #626f92;
}
.ant-tabs-dropdown {
    background: #fff;
    box-shadow: 0 4px 12px rgba(71, 65, 104, 0.15);
    border-radius: 6px;
}
.ant-tabs-dropdown-menu-item {
    color: #626f92;
    padding: 8px 12px;
}
.ant-tabs-dropdown-menu-item:hover {
    color: #474168;
    background: rgba(71, 65, 104, 0.05);
}
/* Remove any pointer-events interference */
.ant-tabs-content-holder {
    position: relative;
    z-index: 0;
}
/* Ensure tab buttons are clickable */
.ant-tabs-tab-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2;
    position: relative;
}
/* Add these new styles */
.sidebar-menu-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px); /* Adjust based on your logo height */
}
.sidebar-top-menu {
  flex-grow: 1;
}
.sidebar-bottom-menu {
  background-color: #3D3643 !important;
}
.sidebar-bottom-menu .ant-menu-item,
.sidebar-bottom-menu .ant-menu-submenu-title {
  color: #c5addc !important;
}
.sidebar-bottom-menu .ant-menu-item:hover,
.sidebar-bottom-menu .ant-menu-submenu-title:hover {
  background-color: rgba(197, 173, 220, 0.1) !important;
  color: #f9c4ac !important;
}
.sidebar-bottom-menu .ant-menu-item-selected {
  background-color: #474168 !important;
  color: #f9c4ac !important;
}
/* Table Styles */
.ant-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ant-table-thead > tr > th {
  background: #f8fafc !important;
  padding: 16px 12px;
  border-bottom: 2px solid #e2e8f0;
}
.ant-table-tbody > tr > td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}
.ant-table-tbody > tr:hover > td {
  background: #f8fafc;
}
/* Table Row Selection */
.ant-table-tbody > tr.ant-table-row-selected > td {
  background: #e6f7ff;
}
/* Table Fixed Header */
.ant-table-header {
  background: #fff;
  border-bottom: 2px solid #e2e8f0;
}
/* Table Loading State */
.ant-table-loading {
  position: relative;
}
.ant-table-loading .ant-table-body {
  opacity: 0.5;
}
/* Empty Table State */
.ant-table-empty .ant-table-placeholder {
  padding: 32px 16px;
  color: #626f92;
}
/* Table Pagination Responsive */
.ant-table-pagination.ant-pagination {
  margin: 16px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
/* Mobile Menu and Search Styles */
.mobile-bottom-menu {
  background-color: #272637;
}
.mobile-bottom-menu .ant-menu {
  background-color: transparent;
}
.mobile-bottom-menu .ant-menu-item {
  transition: all 0.3s ease;
}
.mobile-bottom-menu .ant-menu-item:hover {
  background-color: rgba(249, 196, 172, 0.1);
}
.mobile-bottom-menu .ant-menu-item-selected {
  background-color: rgba(249, 196, 172, 0.2);
}
/* Mobile Search Animation */
.header-search {
  transition: all 0.3s ease;
}
.header-search.mobile-search-active {
  animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mobile Search Component Styles */
.mobile-search-container {
  background-color: #272637;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.mobile-search-container .ant-input-search {
  width: 100% !important;
}
.mobile-search-container .ant-input-search .ant-input {
  background-color: rgba(249, 196, 172, 0.1);
  border-color: rgba(249, 196, 172, 0.2);
  color: #f9c4ac;
  height: 40px;
}
.mobile-search-container .ant-input-search .ant-input:focus {
  border-color: rgba(249, 196, 172, 0.4);
  box-shadow: 0 0 0 2px rgba(249, 196, 172, 0.1);
}
.mobile-search-container .close-search-button {
  padding: 8px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
/* Add these mobile-specific styles at the end of the file */
@media screen and (max-width: 768px) {
    .admin-header {
        padding: 0 12px;
    }
    
    /* ... keep other mobile-specific styles ... */
}
/* Basic Input Styles - For all inputs except header search */
.ant-input:not(.center-search .ant-input) {
  height: 32px;
  border-radius: 6px;
  border-color: #e0e4e8;
  transition: all 0.3s ease;
}
.ant-input:not(.center-search .ant-input):hover {
  border-color: #626f92;
}
.ant-input:not(.center-search .ant-input):focus {
  border-color: #474168;
  box-shadow: 0 0 0 2px rgba(71, 65, 104, 0.1);
}
/* Basic Button Styles - For all buttons except header buttons */
.ant-btn:not(.center-search .ant-btn) {
  height: 32px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
/* Add these rules at the end of your file */
@media screen and (max-width: 768px) {
  input, 
  textarea, 
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    touch-action: manipulation;
  }

  .ant-input,
  .ant-input-affix-wrapper input,
  .ant-input-search input,
  .ant-input-textarea textarea {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* Prevent zoom on focus */
  * {
    touch-action: pan-x pan-y;
  }
}
/* Prevent text resize on orientation change */
html {
  -webkit-text-size-adjust: 100%;
}
/* Add tablet-specific styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .ant-menu-inline-collapsed {
    width: 80px !important;
  }

  .ant-menu-inline-collapsed .ant-menu-item,
  .ant-menu-inline-collapsed .ant-menu-submenu-title {
    padding: 0 !important;
    text-align: center !important;
  }

  .ant-menu-inline-collapsed .ant-menu-item .anticon,
  .ant-menu-inline-collapsed .ant-menu-submenu-title .anticon {
    margin: 0 !important;
    font-size: 20px !important;
  }

  .ant-menu-inline-collapsed .ant-menu-item-icon {
    margin: 0 !important;
  }

  .sidebar-menu-container {
    width: 80px !important;
  }
}
/* Tab Styles Update */
.ant-tabs-nav {
  margin: 0 !important;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  padding: 4px 4px 0 4px !important;
}
.ant-tabs-tab {
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 16px !important;
  margin: 0 4px 0 0 !important;
}
.ant-tabs-tab-active {
  background: #fff !important;
}
/* Global tab stillerini daha spesifik hale getir */
.ant-tabs:not(.material-details-container .ant-tabs) {
    /* Genel tab stilleri buraya */
}
/* MaterialDetails dışındaki tab stilleri için */
.ant-tabs:not(.material-details-container .variant-inner-tabs .ant-tabs) .ant-tabs-nav {
    /* Genel tab nav stilleri buraya */
}
/* Prevent horizontal overflow */
body, #root, .ant-layout {
    overflow-x: hidden;
    max-width: 100vw;
}