/* ============================================================================
   TrioCFD Documentation - Complete Custom CSS
   Reproduced from TRUST Documentation https://github.com/cea-trust-platform/trust-documentation
   Enhanced styling for sphinx-book-theme
   ============================================================================ */

/* ----------------------------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------------------------- */

/* Center images with custom class */
.custom-image-class {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Blue text styling for special content */
.blue-text {
    color: #003366; 
    font-weight: bold; 
}

/* ----------------------------------------------------------------------------
   SIDEBAR NAVIGATION STYLING
   ---------------------------------------------------------------------------- */

/* Make main section titles bold in the left sidebar */
/* .bd-sidebar .bd-toc-item ul.nav li.toctree-l1 > a {
    font-weight: bold !important;
} */

/* Make sidebar caption titles bold and clearer in the left sidebar */
.bd-sidebar .bd-toc-item p.caption span.caption-text {
    font-weight: bold !important;
    color: #444444; 
}

/* Keep subsections with normal weight for visual hierarchy */
.bd-sidebar .bd-toc-item ul.nav li > a {
    font-weight: normal;
    font-size: 0.95em;
}

/* Smooth hover effects for navigation items */
.bd-sidebar .bd-toc-item ul.nav li > a:hover {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
    padding-left: 12px;
    transition: all 0.2s ease;
}

/* Highlight current page in navigation */
.bd-sidebar .bd-toc-item ul.nav li.current > a {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   SIDEBAR BOTTOM LOGO STYLING - CSS ONLY APPROACH
   ---------------------------------------------------------------------------- */

/* Logo after table of contents using CSS pseudo-element 
.bd-sidebar .bd-toc::after {
    content: "";
    display: block;
    width: 90%;
    height: 100px;
    background-image: url("../_static/FIGURES/ISAS_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2rem auto 1rem auto;
    opacity: 0.8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: rgba(248, 249, 250, 0.5);
    transition: opacity 0.3s ease;
}
*/
.bd-sidebar .bd-toc::after:hover {
    opacity: 1;
}

/* Alternative selector if the above doesn't work */
.bd-sidebar-primary::after {
    content: "";
    display: block;
    width: 90%;
    height: 100px;
    background-image: url("../_static/FIGURES/ISAS_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2rem auto 1rem auto;
    opacity: 0.8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: rgba(248, 249, 250, 0.5);
}


/* Dark mode support for sidebar logo area */
[data-theme="dark"] .bd-sidebar .bd-toc::after,
[data-theme="dark"] .bd-sidebar-primary::after {
    border-color: #444;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Container for the bottom logo (if using template approach) */
.sidebar-bottom-logo {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    border-top: 1px solid #e0e0e0;
    background-color: rgba(248, 249, 250, 0.5);
}

/* Bottom logo image styling (if using template approach) */
.sidebar-logo-bottom {
    max-width: 80%;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    border-radius: 4px;
}

.sidebar-logo-bottom:hover {
    opacity: 1;
}

/* Optional text/link below the logo (if using template approach) */
.sidebar-logo-text {
    margin-top: 0.5rem;
    font-size: 0.85em;
}

.sidebar-logo-text a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-logo-text a:hover {
    color: #3498db;
    text-decoration: underline;
}

/* Dark mode support for sidebar logo area (if using template approach) */
[data-theme="dark"] .sidebar-bottom-logo {
    border-top-color: #444;
    background-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .sidebar-logo-text a {
    color: #bbb;
}

[data-theme="dark"] .sidebar-logo-text a:hover {
    color: #74b9ff;
}

/* ----------------------------------------------------------------------------
   MAIN CONTENT AREA IMPROVEMENTS
   ---------------------------------------------------------------------------- */

/* Improve readability with better spacing and line height */
.bd-main .bd-content .bd-article-container {
    max-width: 65rem; /* Optimal reading width */
    line-height: 1.6; /* More comfortable line spacing */
}

/* Enhanced heading styles with consistent color scheme */
.bd-content h1, .bd-content h2 {
    color: #2c3e50;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.bd-content h3, .bd-content h4 {
    color: #34495e;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

/* Dark mode support for headings */
[data-theme="dark"] .bd-content h1, 
[data-theme="dark"] .bd-content h2 {
    color: #e8f4fd !important;
}

[data-theme="dark"] .bd-content h3, 
[data-theme="dark"] .bd-content h4 {
    color: #b8d4f1 !important;
}

/* ----------------------------------------------------------------------------
   CODE BLOCKS AND SYNTAX HIGHLIGHTING
   ---------------------------------------------------------------------------- */

/* Enhanced code blocks with colored border and better contrast */
.highlight {
    border-left: 4px solid #3498db;
    background-color: #f8f9fa !important;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
}

/* Dark mode support for code blocks */
[data-theme="dark"] .highlight {
    background-color: #1e1e1e !important;
    border-left-color: #74b9ff;
}

/* Improved inline code visibility */
code.literal {
    background-color: #e8f4fd;
    color: #2980b9;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.9em;
}

/* Dark mode support for inline code */
[data-theme="dark"] code.literal {
    background-color: #2d3748 !important;
    color: #90cdf4 !important;
}

/* Better styling for code blocks without syntax highlighting */
pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
}

/* Dark mode support for pre blocks */
[data-theme="dark"] pre {
    background-color: #1e1e1e !important;
    border-color: #404040;
    color: #e8f4fd;
}

/* ----------------------------------------------------------------------------
   ADMONITIONS (NOTE, WARNING, TIP BOXES)
   ---------------------------------------------------------------------------- */

/* Base styling for all admonition boxes */
.admonition {
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 1.5rem 0;
    padding: 1rem;
}

/* Specific colors for different admonition types */
.admonition.note {
    border-left: 4px solid #3498db;
    background-color: #f8f9fa;
}

.admonition.warning {
    border-left: 4px solid #f39c12;
    background-color: #fff8e7;
}

.admonition.important, .admonition.danger {
    border-left: 4px solid #e74c3c;
    background-color: #fdf2f2;
}

.admonition.tip, .admonition.hint {
    border-left: 4px solid #27ae60;
    background-color: #f0f9f0;
}

/* Style admonition titles */
.admonition-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1em;
}

/* Dark mode support for admonitions */
[data-theme="dark"] .admonition.note {
    background-color: #1a2332;
    border-left-color: #74b9ff;
}

[data-theme="dark"] .admonition.warning {
    background-color: #2d2416;
    border-left-color: #fdcb6e;
}

[data-theme="dark"] .admonition.important, 
[data-theme="dark"] .admonition.danger {
    background-color: #2d1b1b;
    border-left-color: #fd79a8;
}

[data-theme="dark"] .admonition.tip, 
[data-theme="dark"] .admonition.hint {
    background-color: #1b2d1b;
    border-left-color: #00b894;
}

[data-theme="dark"] .admonition-title {
    color: #e8f4fd;
}

/* ----------------------------------------------------------------------------
   TABLE STYLING
   ---------------------------------------------------------------------------- */

/* Modern table design with shadows and hover effects */
table.docutils {
    border-collapse: collapse;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

/* Header styling with TRUST brand colors */
table.docutils th {
    background-color: #3498db;
    color: white;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
}

/* Cell styling with better padding and borders */
table.docutils td {
    padding: 10px 15px;
    border-bottom: 1px solid #ecf0f1;
}

/* Hover effect for table rows */
table.docutils tbody tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

/* Alternate row coloring for better readability */
table.docutils tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

/* Dark mode support for tables */
[data-theme="dark"] table.docutils {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] table.docutils th {
    background-color: #74b9ff;
    color: #1e1e1e;
}

[data-theme="dark"] table.docutils td {
    border-bottom-color: #404040;
    color: #e8f4fd;
}

[data-theme="dark"] table.docutils tbody tr:hover {
    background-color: #2d3748;
}

[data-theme="dark"] table.docutils tbody tr:nth-child(even) {
    background-color: #1a202c;
}

/* ----------------------------------------------------------------------------
   LINKS AND REFERENCES
   ---------------------------------------------------------------------------- */

/* Enhanced external link styling */
.bd-content a.external {
    color: #3498db;
    text-decoration: none;
    border-bottom: 1px dotted #3498db;
}

.bd-content a.external:hover {
    color: #2980b9;
    border-bottom: 1px solid #2980b9;
}

/* Internal reference links - Light mode */
.bd-content a.reference.internal {
    color: #2c3e50;
    text-decoration: none;
    border-bottom: 1px dotted #2c3e50;
}

.bd-content a.reference.internal:hover {
    color: #3498db;
    border-bottom: 1px solid #3498db;
}

/* Internal reference links - Dark mode support */
[data-theme="dark"] .bd-content a.reference.internal {
    color: #74b9ff !important;
    border-bottom: 1px dotted #74b9ff;
}

[data-theme="dark"] .bd-content a.reference.internal:hover {
    color: #0984e3 !important;
    border-bottom: 1px solid #0984e3;
}

/* External links in dark mode */
[data-theme="dark"] .bd-content a.external {
    color: #74b9ff;
    border-bottom: 1px dotted #74b9ff;
}

[data-theme="dark"] .bd-content a.external:hover {
    color: #0984e3;
    border-bottom: 1px solid #0984e3;
}

/* General link improvements for both modes */
.bd-content a {
    transition: color 0.2s ease, border-bottom 0.2s ease;
}

/* Ensure good contrast for all link types in dark mode */
[data-theme="dark"] .bd-content a {
    color: #74b9ff;
}

[data-theme="dark"] .bd-content a:hover {
    color: #0984e3;
}

/* ----------------------------------------------------------------------------
   FIGURES AND IMAGES
   ---------------------------------------------------------------------------- */

/* Better figure styling with captions */
figure {
    margin: 2rem 0;
    text-align: center;
}

figcaption {
    font-style: italic;
    color: #666;
    margin-top: 0.5rem;
    font-size: 0.9em;
}

/* Image responsiveness */
.bd-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ----------------------------------------------------------------------------
   SEARCH AND NAVIGATION ENHANCEMENTS
   ---------------------------------------------------------------------------- */

/* Improved search box styling */
.bd-search {
    margin-bottom: 1rem;
}

.bd-search input {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 0.5rem;
}

/* ----------------------------------------------------------------------------
   RESPONSIVE DESIGN IMPROVEMENTS
   ---------------------------------------------------------------------------- */

/* Better mobile experience */
@media (max-width: 768px) {
    .bd-main .bd-content .bd-article-container {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    table.docutils {
        font-size: 0.9em;
    }
    
    .highlight {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
    }
}

/* ----------------------------------------------------------------------------
   PRINT STYLES
   ---------------------------------------------------------------------------- */

/* Optimize for printing */
@media print {
    .bd-sidebar,
    .bd-header,
    .bd-footer {
        display: none !important;
    }
    
    .bd-main .bd-content .bd-article-container {
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Ensure links are visible in print */
    .bd-content a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}