/* Custom CSS for Petal App Manager Documentation */

/* Change sidebar background from blue to green */
.wy-side-nav-search {
    background: #2e7d32 !important; /* Green background */
    background-color: #2e7d32 !important;
}

/* Logo styling in the sidebar - make it span full width while maintaining aspect ratio */
.wy-side-nav-search .wy-dropdown > a img.logo, 
.wy-side-nav-search > a img.logo {
    max-width: 90%; /* Use most of the sidebar width */
    width: auto; /* Let width adjust automatically to maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    max-height: 120px; /* Maximum height constraint */
    margin: 0 auto 0.5em auto;
    display: block;
    border-radius: 8px;
}

/* Adjust logo container padding */
.wy-side-nav-search .wy-dropdown > a,
.wy-side-nav-search > a {
    display: block;
    padding: 1em 0.5em 0.5em 0.5em; /* More padding for larger logo */
}

/* Project title styling when logo is present - light text for green background */
.wy-side-nav-search .wy-dropdown > a,
.wy-side-nav-search > a {
    color: #ffffff !important; /* White text for better contrast on green */
    font-size: 110%; /* Slightly larger text */
    font-weight: bold;
    text-decoration: none;
}

/* Search input styling for green background */
.wy-side-nav-search input[type=text] {
    border: 2px solid #1b5e20; /* Darker green border */
    background-color: #ffffff; /* White background for input */
    color: #2c3e50; /* Dark text in input */
}

.wy-side-nav-search input[type=text]:focus {
    border-color: #0d3d0f; /* Even darker green when focused */
}

/* Search input placeholder text */
.wy-side-nav-search input[type=text]::placeholder {
    color: #666666; /* Gray placeholder text */
}

/* Search button styling */
.wy-side-nav-search .wy-dropdown-caret,
.wy-side-nav-search > .fa,
.wy-side-nav-search > .fa-search {
    color: #ffffff !important; /* White icon color for green background */
}

/* Version text styling for green background */
.wy-side-nav-search > div.version {
    color: #e8f5e8 !important; /* Light green text for version */
    margin-top: 0.5em;
}

/* Ensure logo appears above the project title */
.wy-side-nav-search > a img.logo {
    margin-bottom: 0.5em;
}

/* Optional: Add some spacing between logo and search box */
.wy-side-nav-search .wy-dropdown,
.wy-side-nav-search > div.version {
    margin-top: 0.5em;
}

/* Ensure the logo scales properly on mobile */
@media screen and (max-width: 768px) {
    .wy-side-nav-search .wy-dropdown > a img.logo, 
    .wy-side-nav-search > a img.logo {
        max-width: 85%;
        width: auto; /* Maintain aspect ratio on mobile too */
        max-height: 100px; /* Slightly smaller max height on mobile */
    }
    
    .wy-side-nav-search .wy-dropdown > a,
    .wy-side-nav-search > a {
        padding: 0.8em 0.3em 0.3em 0.3em; /* Reduced padding on mobile */
    }
}