/* style.css */
/* Basic styles if needed */
/* Tailwind CSS is handling most styling via CDN */

/* Add any custom base styles or component styles here if necessary */
body {
    /* Ensure Inter font is applied - also set in index.html style block */
    font-family: 'Inter', sans-serif;
}

/* Add custom styles for scrollbar if desired */
#toc-list::-webkit-scrollbar {
  width: 8px;
}

#toc-list::-webkit-scrollbar-track {
  background: #f1f1f1; /* Light grey track */
  border-radius: 10px;
}

#toc-list::-webkit-scrollbar-thumb {
  background: #a0aec0; /* Tailwind gray-500 */
  border-radius: 10px;
}

#toc-list::-webkit-scrollbar-thumb:hover {
  background: #718096; /* Tailwind gray-600 */
}


/* TOC Specific Styles */
#toc-list ul, #toc-list li {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

#toc-list details > ul {
    padding-left: 20px; /* Indentation for nested lists */
    margin-top: 0.25rem; /* Space above nested list */
    margin-bottom: 0.25rem; /* Space below nested list */
}

#toc-list summary {
    cursor: pointer;
    padding: 0.25rem 0.5rem; /* Tailwind p-1 equivalent for spacing */
    border-radius: 0.25rem; /* Tailwind rounded-md */
    transition: background-color 0.15s ease-in-out;
    display: flex; /* Use flex to align custom marker and text */
    align-items: center; /* Vertically align items */
}

#toc-list summary:hover {
    background-color: #e2e8f0; /* Tailwind gray-200 for hover */
}

/* Custom disclosure triangle */
#toc-list summary::before {
    content: '►'; /* Right-pointing triangle for closed state */
    font-size: 0.8em; /* Adjust size as needed */
    margin-right: 0.5rem; /* Space between marker and text (Tailwind mr-2) */
    display: inline-block;
    transition: transform 0.15s ease-in-out;
}

#toc-list details[open] > summary::before {
    transform: rotate(90deg); /* Down-pointing triangle for open state */
}

/* Hide default browser marker */
#toc-list summary::-webkit-details-marker {
    display: none;
}
#toc-list summary::marker { /* For Firefox */
    display: none;
}

/* Styling for autocomplete suggestion items */
#toc-autocomplete-list div {
    padding: 0.5rem;
    cursor: pointer;
}

#toc-autocomplete-list div:hover {
    background-color: #f0f0f0; /* Light gray hover */
}

#toc-autocomplete-list div.autocomplete-active {
    background-color: #e0e0e0; /* Slightly darker for keyboard selection */
}

/* Styling for leaf items or summaries that are direct links */
#toc-list li > span, /* For potential future direct spans as leaves */
#toc-list li > details > summary.toc-parent-link > span, /* Text part of a clickable summary */
#toc-list li:not(:has(details)) { /* Leaf LI elements */
    display: block; /* Make them block for padding and full-width click area */
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

#toc-list li:not(:has(details)):hover,
#toc-list li > details > summary.toc-parent-link:hover {
    background-color: #e2e8f0; /* Tailwind gray-200 */
}
#toc-list li:not(:has(details)):focus,
#toc-list li > details > summary.toc-parent-link:focus {
    outline: 2px solid #4299e1; /* Tailwind blue-500 focus ring */
    outline-offset: 2px;
}


/* Styles for the PDF viewer container */
#pdf-viewer-container {
    /* Most layout properties (width, height, overflow, display, flex properties, padding, margin)
       are now handled by Tailwind classes on the element in index.html.
       Keep specific visual styles if not fully covered by Tailwind or if they are base defaults.
    */
    position: relative; /* Retained for absolute positioning of children like loading indicator */
    border-radius: 0.5rem; /* Retained if not set by Tailwind (Tailwind 'rounded-lg' is 0.5rem) */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Retained for consistency */
    background-color: #e5e7eb; /* Retained (Tailwind 'bg-gray-200') */
    /* width: 100%; /* Covered by 'w-full' */
    /* height: calc(...); /* Removed, handled by flex-grow and parent height */
    /* overflow: auto; /* Removed, handled by 'overflow-hidden' or parent's scroll */
    /* display: flex; /* Covered by 'flex' */
    /* justify-content: center; /* Covered by 'justify-center' */
    /* align-items: flex-start; /* Covered by 'items-center' or 'items-start' */
    /* padding: 1rem; /* Covered by 'p-4' or similar */
    /* margin-bottom: 1rem; /* Covered by 'mb-4' */
}

/* Media queries for #pdf-viewer-container and #toc-accordion-panel heights are removed. */
/* body.toc-collapsed rules are removed as PDF viewer height is independent of TOC accordion. */


/* Styles for the canvas element where PDF pages are rendered */
#pdf-canvas {
    max-width: 100%; /* Ensure canvas doesn't overflow container */
    height: auto; /* Maintain aspect ratio */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for the page */
    background-color: white; /* White background for the page */
    /* Optional: Add a smooth transition for rendering updates */
    /* transition: opacity 0.2s ease-in-out; */
}

/* Hide canvas while loading */
#pdf-canvas.hidden {
    display: none;
}


/* Loading indicator styles */
/* #loading-indicator, #refresh-indicator { */
#loading-indicator {
    /* Positioning is now handled by Tailwind classes 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'
       in index.html for the loading indicator within pdf-viewer-container.
       Visual styles like background, padding, border-radius, shadow, font, color, z-index
       can remain here if they are not fully replicated by Tailwind on the element itself,
       or if these are considered fallback/base styles.
       The HTML for loading-indicator already has 'text-center p-10 hidden'.
       The inline style block in index.html also styles #loading-indicator.
       To avoid conflicts, it's best to consolidate.
       Given the prompt, assuming Tailwind in index.html is preferred for new structure.
       The inline style block in index.html for #loading-indicator has:
       background-color, padding, border-radius, box-shadow, font-weight, color, z-index, text-align.
       So, this rule in style.css for #loading-indicator is largely redundant if those are kept.
       Let's remove the redundant properties here.
    */
    /* display: none; is handled by script.js adding/removing 'hidden' class */
    /* text-align: center; /* Covered by Tailwind 'text-center' */
    /* z-index: 10; /* Can be kept or moved to Tailwind 'z-10' */
}

/* #refresh-indicator specific styles were already in index.html <style> - if needed globally, define here */
/* For now, assuming fixed positioning from index.html <style> for #refresh-indicator is sufficient */


/* Styles for the PDF controls container */
#pdf-controls {
    /* Tailwind classes 'bg-white p-3 rounded-lg shadow-md' handle the container's appearance.
       Flex properties for layout of items within controls are mostly handled by Tailwind on buttons/span.
       This rule can be simplified or removed if all aspects are covered by Tailwind.
       The HTML for #pdf-controls has 'bg-white p-3 rounded-lg shadow-md'.
       The inline style block in index.html also styles #pdf-controls:
       display: flex, justify-content: center, align-items: center, margin-top: 1rem, gap: 1rem.
       This CSS rule is redundant if those are kept.
    */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* margin-top: 1rem; */
    /* gap: 1rem; */
    flex-wrap: wrap; /* Retain if not in Tailwind classes and still desired */
}

/* Style for disabled buttons */
#pdf-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Basic styling for the page number display */
#pdf-controls span {
    font-weight: 500;
    color: #333;
}

/* Basic styling for the zoom select dropdown */
#pdf-controls select {
    cursor: pointer;
}

/* Styles for About Modal - Cache Status Section */
#cache-status-section h4 { /* Tailwind: text-md font-semibold text-gray-700 mb-2 */
    margin-bottom: 0.75rem; /* Tailwind mb-3, slightly more than mb-2 */
}

#cache-status-section p { /* Tailwind: text-sm text-gray-600 space-y-1 on parent */
    margin-bottom: 0.35rem; /* approx Tailwind mb-1.5, provides a bit more space than default for wrapped lines */
}

/* Styles for Stats for Nerds Dropdown */
#stats-for-nerds-container summary {
    padding: 0.25rem 0; /* Adjust padding for click area */
    outline-offset: 2px; /* Consistent focus outline separation */
    border-radius: 0.25rem; /* Subtle rounding for the summary focus */
}

#stats-for-nerds-container summary:focus {
    outline: 2px solid #3b82f6; /* Tailwind blue-500 for focus */
}

#stats-for-nerds-container summary:hover {
    color: #2563eb; /* Tailwind blue-600 for hover text color */
}


#cache-nerd-stats-list { /* Tailwind: bg-gray-50 p-2 border border-gray-200 rounded text-xs max-h-48 overflow-y-auto whitespace-pre-wrap break-all */
    line-height: 1.4; /* Improve readability of dense URLs */
    /* Custom scrollbar for this specific pre element, if desired */
    /* Can be adapted from #toc-list scrollbar styles */
}

#cache-nerd-stats-list::-webkit-scrollbar {
  width: 6px; /* Slightly thinner scrollbar for this smaller box */
}

#cache-nerd-stats-list::-webkit-scrollbar-track {
  background: #e5e7eb; /* Tailwind gray-200 track */
  border-radius: 8px;
}

#cache-nerd-stats-list::-webkit-scrollbar-thumb {
  background: #9ca3af; /* Tailwind gray-400 */
  border-radius: 8px;
}

#cache-nerd-stats-list::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* Tailwind gray-500 */
}