/* Styling for synchronized textareas */
.sync-textarea {
    resize: vertical;  /* Allow only vertical resizing */
    transition: height 0.1s ease-in-out;
    min-height: 40px;
}

/* Add a subtle indicator when textareas are synchronized */
.sync-textarea:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Make sure all textareas in the same row have the same transition effect */
#translations-container tr td textarea {
    transition: height 0.1s ease-in-out;
}

/* Handle key overflow */
.table td strong {
  word-break: break-word;
  display: block;
}

/* polyglot/ui/static/style.css */

/* Hidden elements */
.hidden {
  display: none;
}

/* Scrollable container */
.scrollable-container {
  max-height: 600px;
  overflow-y: auto;
}

/* Table cell widths */
.key-cell {
  width: 20%;
}

.lang-cell {
  width: var(--lang-cell-width);
}

/* Dynamic textarea heights */
.textarea-height-xs { height: 40px; }
.textarea-height-sm { height: 60px; }
.textarea-height-md { height: 100px; }
.textarea-height-lg { height: 160px; }
.textarea-height-xl { height: 240px; }
.textarea-height-xxl { height: 400px; }

/* Translation textarea base style */
.translation-textarea {
  margin-bottom: 10px;
}

.text-file-source {
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    display: block;
}

/* Target dropdown options when menu is open */
#file-source-dropdown .Select-option {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 8px 10px !important;
}


/* Make dropdown menu wider */
#file-source-dropdown .Select-menu-outer {
  min-width: 800px !important;
  max-width: 1000px !important;
  z-index: 1000 !important; /* Ensure it appears above other elements */
}

/* Style for the selected value */
#file-source-dropdown .Select-value-label {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: wrap !important;
  max-width: 100% !important;
}

/* Style for the control itself to ensure proper sizing */
#file-source-dropdown .Select-control {
  overflow: hidden !important;
}

/* For the input when typing */
#file-source-dropdown .Select-input > input {
  width: 100% !important;
}