/* Styles for Question Editor Page */
.SIIDI_Designer.navigation-panel {
    position: relative;
    flex: 1;
    padding: 20px 0px 20px 20px;
    box-sizing: border-box;
    background-color: #eceff1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it takes full height */
    overflow: hidden; /* Prevent panel itself from scrolling */
}
/* Nav items container */
.nav-items-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid #D8D8D8; /* Style Guide: Standard border */
    margin-top: 10px;
    /* padding-bottom: 120px; Removed to fix scrollbar issue */
}

/* Section item styling */
.section-item,
.question-item {
    display: flex;
    position: relative;
    cursor: pointer;
    width: 100%; /* Ensure items take up full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Specific styles for section item */
.section-item {
    display: flex;
    min-height: 30px;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #D8D8D8; /* Style Guide: Standard border */
    font-size: 16px; /* Style Guide: Section headers */
    font-weight: bold; /* Style Guide: Section headers */
    position: relative;
}

/* Specific styles for question item */
.question-item {
    display: flex; /* Ensures flex context for children */
    flex-direction: column; /* Stack children (name, text) vertically */
    align-items: flex-start; /* Align children to the start horizontally */
    min-height: 48px;
    font-size: 14px; /* Style Guide: Body text */
    border-top: 1px solid #D8D8D8; /* Style Guide: Standard border */
    padding-top: 8px; /* Style Guide: S spacing */
    padding-bottom: 8px; /* Style Guide: S spacing */
    padding-left: 8px; /* Style Guide: S spacing */
    padding-right: 40px; /* Retained for delete icon space */
    position: relative;
    margin-left: 20px; /* Indent questions under section (approx. L spacing) */
    width: calc(100% - 20px); /* Adjust width due to margin */
}
/* Container for section header (icon and section name) */
.section-header {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Container for questions within sections */
.questions-container {
    width: 100%;
}

/* Styling for section name */
.section-name {
    flex-grow: 1;
    /* height: 30px; Allow dynamic height for potential wrapping */
    min-height: 30px;
    padding-left: 8px; /* Style Guide: S spacing (after icon) */
    padding-top: 5px; /* Adjusted for better vertical alignment */
    padding-bottom: 5px; /* Adjusted for better vertical alignment */
    color: #1D1E1E; /* Style Guide: Dark neutral */
    line-height: 1.2; /* Style Guide: Headers line height */
}

/* Selected item styling */
.section-item.selected .section-header,
.question-item.selected {
    background-color: #d3d3d3;
}

/* Delete icon styling */
.section-item .delete-icon {
    position: absolute;
    top: 6px; /* Position at the top right of the section */
    right: 10px;
    height: 25px;
    width: 25px;
    display: none;
}

/* Position delete icon properly with the new layout */
.question-item .delete-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    display: none;
}

/* Show delete icon on hover and when selected */
/* Show delete icon on hover for section name */
.section-name:hover + .delete-icon,
.section-item.selected .delete-icon {
    display: block;
}

/* Show delete icon on hover for question items */
.question-item:hover .delete-icon,
.question-item.selected .delete-icon {
    display: block;
}

/* Increase question name width and allow wrapping for very long names */
.question-name {
    width: 100%;
    font-weight: bold; /* Emphasize question name */
    text-align: left;
    margin-bottom: 4px; /* Style Guide: XS spacing */
    white-space: normal;
    color: #1D1E1E; /* Style Guide: Dark neutral */
    font-size: 14px; /* Style Guide: Body text (can be 16px if considered a sub-header) */
    line-height: 1.2; /* Style Guide: Headers line height */
}

/* Allow question text to use up to 2 lines */
.question-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.4; /* Style Guide: Body line height */
    max-height: 2.8em; /* 2 lines * 1.4em */
    color: #555555; /* Standard dark gray for less emphasis than name */
    font-size: 14px; /* Style Guide: Body text */
    font-weight: normal; /* Style Guide: Regular weight */
}

/* Fixed buttons container */
.add-buttons-container {
    /* position: absolute; Removed */
    /* bottom: 0; Removed */
    /* left: 0; Removed */
    flex-shrink: 0; /* Prevent shrinking in flex layout */
    width: 100%;
    border-top: 1px solid #D8D8D8; /* Style Guide: Standard border */
    background-color: #eceff1;
    padding: 0;
    margin: 0;
}

/* Button styling using existing SIUserDashboardOption class */
.add-question-button,
.add-section-button {
    user-select: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 15px 20px;
    color: #333;
    border-bottom: 1px solid #b0b0b0;
    text-align: left;
    font-size: 16px; /* Ensure text size is suitable */
    font-weight: bold;
}

/* Circle icon styling */
.circle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid black;
    font-weight: bold;
    margin-right: 10px;
}

.SIIDI_Designer .question-editor-group {
    margin-bottom: 20px;
}

.SIIDI_Designer .question-editor-input,
.SIIDI_Designer .question-editor-textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 0;
}

.SIIDI_Designer .question-editor-checkbox {
    margin-right: 10px;
}

.sortable-placeholder {
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    min-height: 56px; /* Match the minimum height of question items (40px + padding) */
    margin-bottom: 5px;
    visibility: visible !important;
}

/* Expand/Collapse Icon Styling */
.expand-collapse-icon {
    font-size: 18px; /* Adjust font size for better appearance */
    line-height: 1; /* Ensure the icon aligns properly */
}

.icon-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Adjust width for better click area */
    height: 20px; /* Adjust height for better click area */
}

/* File input for stimuli */
.question-editor-input[type="file"] {
    margin-top: 10px;
    border: none;
}

/* Read-only input for stimulus URL */
.question-editor-input[readonly] {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

/* Styles for the Stimulus Group */
/* Group container for stimulus input */
.stimulus-group {
    margin-bottom: 20px;
}

/* Label for stimulus input */
.stimulus-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Drop area styling */
.drop-area {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #f9f9f9;
}

.drop-area.dragover {
    border-color: #000;
    background-color: #e0e0e0;
}

/* File input styling */
.stimulus-input {
    display: none; /* Hide the default file input */
}

/* Container for stimulus URL input and delete button */
.stimulus-url-container {
    display: flex;
    align-items: center;
}

/* Read-only input for stimulus URL */
.stimulus-url-input {
    flex-grow: 1;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 0;
    background-color: #f9f9f9;
    cursor: not-allowed;
    margin-right: 10px; /* Add some space between the input and the delete button */
}

/* Container for the checkbox and label */
.randomize-sections-group {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Custom checkbox styling */
.randomize-sections-checkbox {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Label styling */
.randomize-sections-label {
    cursor: pointer;
    padding-left: 30px !important;
}