/* css/components/_documentation.css */

#docPanelSectionTitleDisplay {
    min-height: 1.75rem;
}
#sectionContentEditorQuill {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#sectionContentEditorQuill + .note-editor {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#sectionContentEditorQuill + .note-editor .note-editing-area {
    flex-grow: 1;
    overflow-y: auto;
}
/* This is the key change to make the editable area fill space */
#sectionContentEditorQuill + .note-editor .note-editing-area .note-editable {
    height: auto !important; /* Override inline height set by Summernote */
    min-height: 150px; /* Keep minimum height, but allow to grow */
    flex-grow: 1; /* Allow it to stretch within its flex parent */
    display: flex; /* Make it a flex container to manage its own content */
    flex-direction: column; /* Content flows vertically */
}


#docPanelNavigationTree ul {
    list-style: none;
    padding-left: 0;
}
#docPanelNavigationTree .nav-item {
    display: flex;
    align-items: center;
    /* Increased right padding to make space for both action buttons */
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-left 0.15s ease-in-out, padding-left 0.15s ease-in-out;
    margin-bottom: 0.25rem;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    position: relative; /* Essential for absolute positioning of children */

    /* Default left border for indentation lines */
    border-left: 1px solid var(--border-color-light);
    padding-left: 0.75rem; /* Ensure content is pushed away from the border */
    margin-top: 0.1rem; /* Small vertical spacing */
    margin-bottom: 0.1rem;
}
#docPanelNavigationTree .nav-item:hover {
    background-color: var(--color-gray-200);
}
#docPanelNavigationTree .nav-item.active {
    background-color: var(--bg-indigo-100);
    color: var(--color-primary-base);
    font-weight: 600;
    border-left: 3px solid var(--color-primary-base); /* Stronger, colored left border for active item */
    padding-left: 0.6rem; /* Adjust padding for the thicker border */
}

/* Reduced indentation for nested lists */
#docPanelNavigationTree .nav-item-indent {
    margin-left: 0.5rem; /* Smaller margin for sub-items to reduce overall indentation */
    padding-left: 0;
}

/* NEW: Styling for the collapse/expand icon (placed on the left) */
#docPanelNavigationTree .nav-item .collapse-icon {
    position: static; /* Ensure it's inline with other content */
    margin-right: 0.25rem; /* Small space between collapse icon and next element */
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* Ensure the default nav item icon has proper spacing */
#docPanelNavigationTree .nav-item .nav-item-icon {
    width: 1.25rem; /* Keep consistent width */
    text-align: center;
    margin-right: var(--spacing-sm); /* Space between nav-item-icon and text */
    color: var(--color-gray-500);
    flex-shrink: 0; /* Prevent it from shrinking */
}
#docPanelNavigationTree .nav-item.active .nav-item-icon {
    color: var(--color-primary-base);
}
#docPanelNavigationTree .nav-item.active .collapse-icon {
    color: var(--color-primary-base); /* Active color for collapse icon */
}


/* Styles for the action menu containers (now hidden by default, shown on hover) */
.document-actions,
.section-actions {
    position: absolute; /* Take out of flow */
    right: 0.75rem;   /* Positioned to the right */
    top: 50%;         /* Vertically center */
    transform: translateY(-50%); /* Fine-tune vertical centering */

    background-color: var(--bg-color-card); /* Solid background to cover text */
    padding: 0.25rem 0.5rem; /* Padding around the buttons */
    border-radius: var(--radius-sm); /* Rounded corners for the container */
    box-shadow: var(--shadow-sm); /* Subtle shadow */
    border: 1px solid var(--border-color-light); /* Light border */

    white-space: nowrap; /* Prevent buttons from wrapping */
    visibility: hidden; /* Hide without removing from layout flow */
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s ease-in-out; /* Smooth transition */
    display: flex; /* Ensure they are flex when visible for button layout */
    align-items: center;
    gap: 0.25rem; /* Small gap between individual action buttons */
    z-index: 2; /* Ensure it's above the text content */
}

/* Rule to make them visible on hover over the nav-item */
#docPanelNavigationTree .nav-item:hover .document-actions,
#docPanelNavigationTree .nav-item:hover .section-actions {
    visibility: visible;
    opacity: 1;
}


/* Styles for the nested UL (child sections and versions) */
/* This is the crucial part for the expand/collapse animation */
#docPanelNavigationTree .nav-item + ul,
#docPanelNavigationTree ul[data-doc-id-versions] { /* Target both types of nested ULs */
    max-height: 0; /* Default to collapsed */
    overflow: hidden; /* Hide content when collapsed */
    transition: max-height 0.3s ease-in-out; /* Smooth transition for collapse/expand */
}

/* When the parent LI has the 'collapsed' class, ensure its child UL is collapsed */
#docPanelNavigationTree .nav-item.collapsed + ul,
#docPanelNavigationTree .nav-item.collapsed + ul[data-doc-id-versions] { /* Target both types */
    max-height: 0; /* Removed !important */
    overflow: hidden; /* Removed !important */
}

/* When the parent LI does NOT have the 'collapsed' class, allow its child UL to expand */
/* The JS will set the actual scrollHeight, but this ensures it's not hidden by other rules */
#docPanelNavigationTree .nav-item:not(.collapsed) + ul,
#docPanelNavigationTree .nav-item:not(.collapsed) + ul[data-doc-id-versions] { /* Target both types */
    /* max-height will be set by JS to scrollHeight */
    overflow: hidden; /* Changed from visible !important to hidden for proper transition clipping */
    display: block; /* Removed !important */
    min-height: 1px; /* A minimal height to ensure scrollHeight is calculated if content is small */
}

/* Ensure direct children of these nested ULs contribute to scrollHeight */
#docPanelNavigationTree .nav-item + ul > li,
#docPanelNavigationTree ul[data-doc-id-versions] > li {
    display: block !important; /* Ensure list items are block-level */
    height: auto !important; /* Ensure height is not fixed or zero */
    visibility: visible !important; /* Ensure visibility */
    opacity: 1 !important; /* Ensure opacity */
    flex-shrink: 0 !important; /* NEW: Prevent flex children from shrinking their height */
    min-height: 1.5rem; /* Give a minimum height to ensure scrollHeight is not zero if content is minimal */
}

/* NEW: Ensure the flex container within the LI also contributes to height */
#docPanelNavigationTree ul[data-doc-id-versions] > li > div.flex {
    flex-direction: row; /* Ensure horizontal layout within the flex div */
    align-items: center; /* Vertically align items */
    width: 100%; /* Take full width of parent LI */
    box-sizing: border-box; /* Include padding/border in width calculation */
    min-height: 1.5rem; /* Ensure this flex container has a minimum height */
}


.section-item-li.is-dragging {
    opacity: 0.5;
    border: 2px dashed var(--color-primary-base);
    background-color: var(--color-primary-focus-ring);
}
.section-item-li.drag-over-above > .nav-item {
    border-top: 2px solid var(--color-primary-base);
}
.section-item-li.drag-over-below > .nav-item {
    border-bottom: 2px solid var(--color-primary-base);
}
.section-item-li.drag-over-child > .nav-item {
    background-color: var(--color-primary-focus-ring);
    outline: 1px dashed var(--color-primary-base);
}


#docPanelLinkedCards ul {
    list-style: none;
    padding: 0;
}
#docPanelLinkedCards li {
    font-size: 0.8rem;
    padding: 0.375rem;
    background-color: var(--color-gray-50);
}
#docPanelLinkedCards li .doc-card-completed-toggle {
    height: 0.875rem;
    width: 0.875rem;
    margin-right: var(--spacing-sm);
}
#docPanelLinkedCards li .btn-unlink-card i.fa-sm {
    font-size: 0.75em;
}

/* Documentation Content Styling (Prose) */
.prose {
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-gray-700);
}
.prose p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--color-gray-900);
  font-weight: var(--font-semibold);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose h1 { font-size: 2.25em; }
.prose h2 { font-size: 1.875em; }
.prose h3 { font-size: 1.5em; }
.prose h4 { font-size: 1.25em; }
.prose ul, .prose ol {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  padding-left: 1.5em;
}
.prose ul li, .prose ol li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.prose blockquote {
  border-left: 0.25rem solid var(--border-color-light);
  padding-left: var(--spacing-md);
  margin-top: 1em;
  margin-bottom: 1em;
  color: var(--color-gray-500);
}
.prose code {
  background-color: var(--color-gray-200);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  color: var(--color-gray-700);
}
.prose pre {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.prose a {
  color: var(--color-primary-base);
  text-decoration: underline;
}
.prose a:hover {
  color: var(--color-primary-hover);
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
}
.prose th, .prose td {
    border: 1px solid var(--border-color-medium);
    padding: 0.5em 0.75em;
    text-align: left;
}
.prose th {
    background-color: var(--color-gray-100);
    font-weight: var(--font-semibold);
}
.prose img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-sm);
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.5;
}
.prose-sm p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose-sm h1 { font-size: 1.75em; }
.prose-sm h2 { font-size: 1.5em; }
.prose-sm h3 { font-size: 1.25em; }
.prose-sm h4 { font-size: 1.125em; }
.prose-sm ul, .prose-sm ol {
  padding-left: 1.25em;
}
.prose-sm blockquote {
  padding-left: 0.75rem;
}

.hidden-section-anchor {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: block;
}

/* Old Documentation Cards */
#documentationCardsContainer {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--spacing-md);
}
@media (min-width: 768px) {
    #documentationCardsContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    #documentationCardsContainer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.documentation-card {
    background-color: var(--bg-color-card);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}
.documentation-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.documentation-card h3 { font-size: 1.1rem; font-weight: var(--font-semibold); color: var(--color-gray-700); margin-bottom: 8px; }
.documentation-card .doc-excerpt { font-size: 0.9rem; color: var(--color-gray-600); max-height: 60px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; }

/* API Guide Content Styling */
#apiGuideContentWrapper {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: #333;
}
#apiGuideContentWrapper h1, #apiGuideContentWrapper h2, #apiGuideContentWrapper h3 {
    color: var(--color-gray-800);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
#apiGuideContentWrapper h2 { border-bottom: 2px solid var(--color-primary-base); padding-bottom: 0.5rem; font-size: var(--font-size-xl); }
#apiGuideContentWrapper h3 { border-bottom: 1px dashed var(--color-gray-300); padding-bottom: 0.25rem; font-size: var(--font-size-lg); }
#apiGuideContentWrapper pre {
    background-color: var(--color-gray-100);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color-light);
    overflow-x: auto;
}
#apiGuideContentWrapper pre code {
    color: #000000;
}
#apiGuideContentWrapper table { width: 100%; border-collapse: collapse; margin-top: 1em; margin-bottom: 1em; }
#apiGuideContentWrapper th, #apiGuideContentWrapper td { border: 1px solid var(--border-color-medium); padding: 0.5em 0.75em; text-align: left; }
#apiGuideContentWrapper th { background-color: var(--color-gray-100); font-weight: var(--font-semibold); }
#apiGuideContentWrapper .permissions, #apiGuideContentWrapper .notes { margin-top: 0.75rem; padding: 0.75rem; border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
#apiGuideContentWrapper .permissions { font-style: italic; color: var(--color-gray-600); background-color: #f0f9ff; border: 1px solid #bae6fd; }
#apiGuideContentWrapper .notes { background-color: var(--color-warning-light); border: 1px solid var(--color-warning-border); color: var(--color-warning-text); }
#apiGuideContentWrapper .notes ul { list-style-type: disc; padding-left: 1.5rem; }
#apiGuideContentWrapper .notes p, #apiGuideContentWrapper .notes li { margin-bottom: 0.25rem; }