/* Removed custom Pagefind header input styles; using Material default search */
/* Sidebar Navigation Styles */

/* Hide the sidebar title */
.md-nav__title {
    display: none !important;
    margin: 0;
    padding: 0.5rem;
}

/* Reduce font size for all sidebar navigation links (top-level and nested) */
.md-nav--primary .md-nav__link {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0 !important; /* Keep left padding as 0 if that's the desired indent */
    padding-right: 1.5rem !important; /* Add right padding for the arrow icon */
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

/* Make all top-level sidebar headers bold */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
    font-weight: 600 !important;
    color: var(--md-default-fg-color) !important;
    font-size: 14px !important;
}

/* Exclude Style from bold formatting */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="style/"] {
    font-weight: normal !important;
}

/* Main application links in sidebar */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="costing/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="planner/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="order/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="component/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="shipping/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="compliance/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="license/"],
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="claim/"] {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--md-default-fg-color) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* UPDATED: Make Home link match standard sidebar entries */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:first-child {
    font-weight: 700 !important;
    font-size: 14px !important; /* Changed from 15px to 14px to match other sidebar entries */
    color: var(--md-default-fg-color) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Override Style weight again to ensure it's not bold */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="style/"] {
    font-weight: normal !important;
}

/* Hover state for main application links */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:first-child:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="style/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="costing/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="planner/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="order/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="component/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="shipping/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="compliance/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="license/"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="claim/"]:hover {
    color: #3287E7 !important;
}

/* Active state for main application links */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:first-child.md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="style/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="costing/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="planner/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="order/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="component/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="shipping/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="compliance/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="license/"].md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="claim/"].md-nav__link--active {
    color: #3287E7 !important;
    font-weight: 700 !important;
}

/* UPDATED: Target Home specifically by index.md with consistent font size */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="index.md"] {
    font-weight: 700 !important;
    font-size: 14px !important; /* Changed from 15px to 14px to match other sidebar entries */
    color: var(--md-default-fg-color) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="index.md"]:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="index.md"].md-nav__link--active {
    color: #3287E7 !important;
}

/* Make sure Style is never bold even when active */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[href*="style/"].md-nav__link--active {
    font-weight: normal !important;
}

/* Remove left border from all admonitions */
.md-typeset .admonition,
.md-typeset details {
    border: 1px solid var(--md-default-fg-color--lightest) !important; /* fallback, overridden below */
    border-radius: 0.5em;
}

/* Admonition border colors */
.md-typeset .admonition.note {
    border: 1px solid #3287E7 !important; /* blue for note */
}

.md-typeset .admonition.important {
    border: 1px solid #3287E7 !important; /* blue for important */
}

.md-typeset .admonition.warning {
    border: 1px solid #FFC107 !important; /* yellow for warning */
}

.md-typeset .admonition.danger {
    border: 1px solid #E53935 !important; /* red for danger */
}

.md-typeset .admonition.bug {
    border: 1px solid #E53935 !important; /* red for bug */
}

.md-typeset .admonition.example {
    border: 1px solid #4CAF50 !important; /* green for example */
}

.md-typeset .admonition.tip {
    border: 1px solid #4CAF50 !important; /* green for tip */
}

.md-typeset details.tip {
    border: 1px solid #4CAF50 !important; /* green for tip */
}

.md-typeset details.note {
    border: 1px solid #3287E7 !important; /* blue for note */
}

/* Admonition background colors */
.md-typeset .admonition {
    background-color: rgba(173, 187, 82, 0.05);
}

.md-typeset .admonition.note {
    background-color: rgba(50, 135, 231, 0.05) !important;
}

.md-typeset .admonition.important {
    background-color: rgba(50, 135, 231, 0.05) !important;
}

.md-typeset .admonition.warning {
    background-color: rgba(255, 193, 7, 0.05) !important;
}

.md-typeset .admonition.danger {
    background-color: rgba(229, 57, 53, 0.05) !important;
}

.md-typeset .admonition.bug {
    background-color: rgba(229, 57, 53, 0.05) !important;
}

.md-typeset .admonition.example {
    background-color: rgba(76, 175, 80, 0.05) !important;
}

.md-typeset .admonition.tip {
    background-color: rgba(76, 175, 80, 0.05) !important;
}

.md-typeset details.tip {
    background-color: rgba(76, 175, 80, 0.05) !important;
}

.md-typeset details.note {
    background-color: rgba(50, 135, 231, 0.05) !important;
}

/* Table of Contents Styles */
.md-nav--secondary .md-nav__link,
.md-nav--secondary .md-nav__title {
    font-size: 14px !important;
    padding: 0 !important;
}

/* Ensure nested dropdown titles are not bold and maintain consistent height */
/* Ensure nested items (actual pages, not parent categories) are not bold */
.md-nav--primary .md-nav__item--nested > ul > .md-nav__item > .md-nav__link {
    font-size: 13px !important;
    font-weight: normal !important;
}

/* NEW: Style for all parent items in the sidebar (e.g., Order, Style, and their children like Samples, Sidebar) */
.md-nav--primary .md-nav__item--nested > .md-nav__link {
    font-weight: bold !important; /* Make parent links bold */
    color: var(--md-default-fg-color) !important; /* Ensure consistent color */
    display: flex !important; /* Ensure flex layout for icon positioning */
    align-items: center !important; /* Vertically align text and icon */
}

/* Default link color */
.md-nav__link {
    color: var(--md-default-fg-color) !important;
}

/* Hover state */
.md-nav__link:hover {
    color: #3287E7 !important;
}

/* Active link styling */
.md-nav__link--active {
    color: #3287E7 !important;
}

/* NEW: Ensure nav icons have a base color */
.md-nav__icon {
    color: var(--md-default-fg-color--light) !important; /* Default icon color */
}

/* Hover arrow visibility and color */
.md-nav__item:hover .md-nav__link .md-nav__icon {
    color: #3287E7 !important; /* Change icon color on hover over the item */
}

/* Sidebar spacing and divider lines */
.md-nav--primary > .md-nav__list > .md-nav__item {
    margin: 1em 0 !important;
}

.md-nav--primary .md-nav__item--nested {
    margin-bottom: 0;
}

.md-nav--primary > .md-nav__list > .md-nav__item:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--md-default-fg-color--lightest);
    margin-top: 8px;
}

/* ✅ FIX: Properly style only the sidebar title, not nav items */
.md-nav__title:not(.md-nav__link) {
    color: #3287E7 !important;
}

/* Content Layout */

.md-content {
    line-height: 1.6;
}

.md-content p,
.md-content ul,
.md-content ol {
    margin-bottom: 1em;
}

/* Admonitions */
.md-typeset .admonition {
    background-color: rgba(173, 187, 82, 0.05);
}

/* Header Logo */
/* .md-header .md-logo img {
    max-width: 120px;
    height: auto;
    display: block;
} */

/* Header Styling */
/* .md-header {
    background-color: #3287E7 !important;
    color: #fcfcfc !important;
} */

/* Sidebar Scrollbar - with stronger selectors */
/* .md-sidebar__scrollwrap::-webkit-scrollbar,
.md-sidebar::-webkit-scrollbar {
    width: 8px !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-track,
.md-sidebar::-webkit-scrollbar-track {
    background: #ffffff !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb,
.md-sidebar::-webkit-scrollbar-thumb {
    background-color: #e0e0e0 !important;
    border-radius: 4px !important;
} */

/* .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover,
.md-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #d0d0d0 !important;
} */

.md-sidebar__scrollwrap,
.md-sidebar {
    scrollbar-color: var(--md-default-fg-color--lightest) var(--md-default-bg-color) !important;
    scrollbar-width: thin !important;
}

/* Main Content Font */
.md-content,
.md-typeset {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
}

/* Code Styling */
.md-content pre,
.md-content code {
    font-family: "Courier New", monospace !important;
    font-size: 14px !important;
    background-color: var(--md-code-bg-color) !important;
}

/* Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: "Open Sans", sans-serif !important;
    font-size: 25px !important;
}

/* Add more space above H1 titles, similar to n8n.io docs */
.md-typeset h1 {
    margin-top: 2.5em !important; /* Adjust this value as needed. 2.5em with 25px font-size = 62.5px */
}

/* Extra spacing below sidebar title */
/* .md-nav__title > span {
    margin-top: 20px !important;
}

.md-nav__title::after {
    content: "";
    display: block;
    height: 20px;
} */

/* Heading dividers */
.md-typeset h1:not(:last-child)::after,
.md-typeset h2:not(:last-child)::after,
.md-typeset h3:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--md-default-fg-color--lightest);
    margin-top: 15px;
}

/* Remove global scrollbar styles */
/* Main Content Scrollbar */
::-webkit-scrollbar {
    width: initial;
    height: initial;
}

::-webkit-scrollbar-track {
    background: initial;
}

::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: initial;
}

::-webkit-scrollbar-thumb:hover {
    background-color: initial;
}

* {
    scrollbar-color: initial;
    scrollbar-width: initial;
}

/* Remove all the indicator line changes */
.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link:before,
.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link:after,
.md-nav__item--active>.md-nav__link:before,
.md-nav__item--active>.md-nav__link:after {
    background-color: initial !important;
}

.md-nav--primary .md-nav__item--active>.md-nav__link {
    border-left: initial !important;
}

.md-nav__link:before,
.md-nav__link:after {
    background-color: initial !important;
}

/* Footer Styles */
.md-footer {
    position: relative !important;
}

.md-footer__inner {
    display: none !important;
}

.md-footer-meta {
    background-color: var(--md-footer-bg-color) !important;
}

.md-footer-meta__inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    max-width: 61rem !important;
    margin: 0 auto !important;
}

.md-footer__copyright {
    width: auto !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    color: var(--md-footer-fg-color--light) !important;
    font-size: 0.64rem !important;
    max-width: none !important;
    display: block !important;
}

.md-footer__direction {
    display: none !important;
}

.md-social {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.md-social__link {
    display: inline-block !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    padding: 0.4rem !important;
    margin: 0 0.3rem !important;
    color: var(--md-footer-fg-color) !important;
}

.md-social__link svg {
    fill: currentColor !important;
    width: 100% !important;
    height: 100% !important;
}

/* Make theme toggle icons smaller */
/* .md-header__button.md-icon {
    width: 1.2rem;
    height: 1.2rem;
} */

/* Adjust the size of the icon itself */
/* .md-header__button.md-icon svg {
    width: 1.2rem;
    height: 1.2rem;
} */

/* Header Search Icon
.md-search__icon {
    color: white !important;
} */

/* .md-search__icon svg {
    fill: white !important;
} */

/* [data-md-toggle="search"]:checked ~ .md-header .md-search__icon {
    color: white !important;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__icon svg {
    fill: white !important;
}

.md-search__input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
} */

/* Force header to always be visible */
.md-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2) !important;
}

/* Fix header title to never change */
.md-header__topic {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
}

/* Hide any changing elements in header */
.md-header__topic:not(:first-child) {
    display: none !important;
}


/* Override any autohide behavior */
.md-header[data-md-state="shadow"],
.md-header--shadow,
.md-header--lifted {
    transform: none !important;
    transition: none !important;
}

/* Extra aggressive settings for visibility */
[data-md-toggle="header"]:checked ~ .md-header {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Make sure title text doesn't change */
.md-header__title {
    transition: none !important;
}

/* Change title text to "3 Clicks Cloud Documentation Portal" */
.md-header__topic:first-child .md-ellipsis::before {
    content: "3 Clicks Cloud Documentation Portal";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: inherit;
    z-index: 10;
    font-family: "Open Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    color: white !important;
}

/* Additional styles for fixed header title to ensure consistent styling */
.md-header__title .md-ellipsis {
    font-family: "Open Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    color: white !important;
}

/* Ensure JavaScript-injected title has the same styling */
.md-header__title .md-header__topic span.md-ellipsis {
    font-family: "Open Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    color: white !important;
}

/* Language-specific tab visibility removed; site is English-only */

/* Top navigation tabs styling */
.md-tabs {
    background-color: var(--md-primary-fg-color);
}

.md-tabs__link {
    font-weight: 600 !important;
    opacity: 0.9;
}

.md-tabs__link--active,
.md-tabs__link:hover {
    font-weight: 700 !important;
    opacity: 1;
}

/* Make the navigation tabs more prominent */
.md-tabs__item {
    height: 2.5rem;
    padding: 0 0.8rem;
}

.md-tabs__link {
    margin-top: 0.6rem;
}

/* Hide specific English tabs: Drive, Dashboard, Search, Customer Portal, License, Shipping, Supplier Portal, API, Blog */
/* Add: Claim, Compliance, Component, Costing, Planner, Sales Order, Site Settings */
.md-tabs__item:has(> a.md-tabs__link[href*="drive/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="dashboard/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="search/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="customer_portal/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="license/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="shipping/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="supplier_portal/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="API/"]), /* Catches API/api.md */
.md-tabs__item:has(> a.md-tabs__link[href*="www.3clickscloud.com/blog"]), /* Catches the external blog link */
.md-tabs__item:has(> a.md-tabs__link[href*="claim/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="compliance/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="costing/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="planner/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="sales_order/"]),
.md-tabs__item:has(> a.md-tabs__link[href*="site_settings/"]) {
    display: none !important;
}

/* Chinese tab rules removed; site is English-only */

/* Home page navigation styling */
.home-nav {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 2rem 0;
}

.home-nav .nav-item {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--md-default-fg-color) !important;
    text-decoration: none !important;
    padding: 0.5rem 0 !important;
    transition: color 0.2s ease-in-out !important;
    border: none !important;
}

.home-nav .nav-item:hover {
    color: #3287E7 !important;
}

/* Add divider between navigation items */
.home-nav .nav-item:not(:last-child) {
    border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
    padding-bottom: 0.8rem !important;
}

/* NEW: Fix Home dropdown items if they exist */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child .md-nav__list .md-nav__item .md-nav__link {
    font-size: 13px !important;
    font-weight: normal !important; 
    padding: 4px 0 !important;
}

/* UPDATED: Ensure top-level Home item is correct with consistent font size */
.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type > .md-nav__link {
    font-weight: 700 !important;
    font-size: 14px !important; /* Changed from 15px to 14px to match other sidebar entries */
}

/* NEW: Fix duplicate section names in sidebar - change to Overview */
/* Fix for overview pages in each section to display as "Overview" instead of duplicating the section name */
.md-nav--primary .md-nav__item .md-nav__list .md-nav__item:first-child .md-nav__link[href*="_overview.md"] .md-nav__link-text {
    visibility: hidden;
    position: relative;
}

.md-nav--primary .md-nav__item .md-nav__list .md-nav__item:first-child .md-nav__link[href*="_overview.md"] .md-nav__link-text::after {
    content: "Overview";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

/* Chinese-specific overview label removed */

/* Center the icon in MkDocs Material search results */
.md-search-result__icon {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
}

.md-search-result__icon .md-icon {
    transform: translateY(1px);
}

/* Hide icons and extra rows in search results and close up spacing */
.md-search-result__icon {
    display: none !important;
}

.md-search-result__link {
    grid-template-columns: 0 1fr !important;
    padding-left: 0 !important;
}

.md-search-result__more,
.md-search-result__meta {
    display: none !important;
}

/* Improve search result title/heading display */
.md-search-result__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    color: var(--md-default-fg-color) !important;
    display: block !important;
}

.md-search-result__title mark {
    background-color: #ffeb3b !important;
    color: #000 !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
}

/* Improve search result snippet/teaser display */
.md-search-result__teaser {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--md-default-fg-color--light) !important;
    margin-top: 4px !important;
    display: block !important;
}

.md-search-result__teaser mark {
    background-color: #fff9c4 !important;
    color: #000 !important;
    padding: 1px 3px !important;
    border-radius: 2px !important;
    font-weight: 600 !important;
}

/* Better spacing for search results */
.md-search-result__item {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
}

.md-search-result__item:last-child {
    border-bottom: none !important;
}

.md-search-result__item:hover {
    background-color: var(--md-default-bg-color--light) !important;
}

/* Make the entire search result link clickable area better */
.md-search-result__link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.md-search-result__link:hover {
    text-decoration: none !important;
}