/* Homepage tool icon system: intentionally small, semantic, and aligned with
 * KivTools' existing navy / green utility language. */
.navbar .jz.container {
    position: relative;
}

.kiv-theme-launch {
    position: absolute;
    top: 8px;
    right: 84px;
    z-index: 1052;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #1e2a34;
    border-radius: 3px;
    background: #25313e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(32, 45, 56, .2);
}

.kiv-theme-launch:hover,
.kiv-theme-launch:focus {
    border-color: #4aca6d;
    background: #344555;
    color: #fff;
    outline: 0;
}

.kiv-theme-launch svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.kiv-theme-launch .sun-icon { display: none; }
.kiv-theme-launch .moon-icon { display: block; }
html.kiv-shell-dark .kiv-theme-launch .sun-icon { display: block; }
html.kiv-shell-dark .kiv-theme-launch .moon-icon { display: none; }

@media (min-width: 768px) {
    .navbar #top_menu { padding-right: 126px; }
}

@media (max-width: 767px) {
    .kiv-theme-launch { right: 143px; }
}

/* Dropdown menus keep their existing density, while a 22px icon makes long
 * lists much easier to scan without adding a second visual hierarchy. */
.navbar #top_menu .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kiv-nav-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid #d8ebe1;
    border-radius: 4px;
    background: #f0f9f3;
    color: #278659;
}

.kiv-nav-tool-icon svg,
.kiv-home-tool-icon svg,
.kiv-featured-tool-icon svg,
.kiv-shell-result-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kiv-nav-tool-icon svg { width: 12px; height: 12px; stroke-width: 1.65; }

/* Featured cards retain the established five-column layout. The icon is a
 * small stable anchor for the tag and title, not a decorative illustration. */
.kiv-home-featured-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 9px;
    min-height: 82px;
    padding: 10px 28px 10px 10px;
}

.kiv-featured-tool-icon {
    display: inline-flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    align-self: center;
    border: 1px solid #d8ebe1;
    border-radius: 5px;
    background: #eff8f2;
    color: #278659;
}

.kiv-featured-tool-icon svg { width: 17px; height: 17px; stroke-width: 1.55; }
.kiv-home-featured-tag,
.kiv-home-featured-link { grid-column: 2; }
.kiv-home-featured-tag { margin-bottom: 3px; }

/* The existing blank span preceding each directory link becomes the icon
 * holder. That preserves the template's catalogue data and works in every
 * translated route without rewriting the list markup. */
.footer-nav .list-inline-bg li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 3px 1px;
}

.footer-nav .list-inline-bg li > .kiv-home-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    margin: 0;
    border: 1px solid #dcebe3;
    border-radius: 5px;
    background: #f1f8f4;
    color: #278659;
    vertical-align: middle;
}

.footer-nav .list-inline-bg li > .kiv-home-tool-icon svg { width: 13px; height: 13px; stroke-width: 1.6; }
.footer-nav .list-inline-bg li > a { min-width: 0; line-height: 1.35; }
.footer-nav .list-inline-bg li:hover > .kiv-home-tool-icon {
    border-color: #a8d6bb;
    background: #e8f7ed;
    color: #15794c;
}

/* Semantic colors are deliberately quiet: they help scan a dense catalog,
 * while green remains the shared KivTools action color. */
.kiv-icon-ai { border-color: #d5eae5 !important; background: #eef9f6 !important; color: #218978 !important; }
.kiv-icon-api { border-color: #d7e9ed !important; background: #eff8fa !important; color: #278096 !important; }
.kiv-icon-security { border-color: #dce5ef !important; background: #f2f6fb !important; color: #4e769c !important; }
.kiv-icon-json,
.kiv-icon-data { border-color: #d9ebe1 !important; background: #eff9f2 !important; color: #238457 !important; }
.kiv-icon-code { border-color: #dbe9df !important; background: #f1f8f3 !important; color: #4e825f !important; }
.kiv-icon-time { border-color: #e4ead3 !important; background: #f7f9ef !important; color: #718847 !important; }
.kiv-icon-network { border-color: #d8e9ed !important; background: #eff8fa !important; color: #367f91 !important; }
.kiv-icon-ops { border-color: #d7e9e5 !important; background: #eff8f6 !important; color: #347f72 !important; }
.kiv-icon-image { border-color: #e4dff0 !important; background: #f7f4fb !important; color: #7663a0 !important; }
.kiv-icon-archive { border-color: #e2e6d7 !important; background: #f7f8f1 !important; color: #77844f !important; }
.kiv-icon-chart { border-color: #d8e5ee !important; background: #f1f7fb !important; color: #4d7e9d !important; }
.kiv-icon-calculator { border-color: #ebe2ce !important; background: #faf7ef !important; color: #8c7037 !important; }
.kiv-icon-text,
.kiv-icon-reference { border-color: #e0e6eb !important; background: #f5f7f9 !important; color: #647985 !important; }

/* Command-palette results are created after page load, so the same visual
 * key is applied there as the user searches. */
.kiv-shell-result-link {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 8px;
}

.kiv-shell-result-icon {
    display: inline-flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    align-self: center;
    border: 1px solid #dcebe3;
    border-radius: 4px;
    background: #f1f8f4;
    color: #278659;
}

.kiv-shell-result-icon svg { width: 13px; height: 13px; stroke-width: 1.6; }
.kiv-shell-result-name,
.kiv-shell-result-meta { grid-column: 2; }

/* The shell already provides a well-tested global dark mode. These additions
 * complete it for the feature grid, catalogue icons and dropdowns. */
html.kiv-shell-dark {
    color-scheme: dark;
    scrollbar-color: #40584d #15211c;
}

html.kiv-shell-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.kiv-shell-dark ::-webkit-scrollbar-track {
    background: #15211c;
}

html.kiv-shell-dark ::-webkit-scrollbar-thumb {
    border: 2px solid #15211c;
    border-radius: 999px;
    background: #40584d;
}

html.kiv-shell-dark ::-webkit-scrollbar-thumb:hover {
    background: #527065;
}

html.kiv-shell-dark .navbar #top_menu .dropdown-menu {
    border-color: #3e505b;
    background: #24333e;
}

html.kiv-shell-dark .navbar #top_menu .dropdown-menu a { color: #dbe5eb; }
html.kiv-shell-dark .navbar #top_menu .dropdown-menu a:hover,
html.kiv-shell-dark .navbar #top_menu .dropdown-menu a:focus { background: #294035; color: #bde8c8; }

/* Web Ops uses a purpose-built four-column desktop menu whose light-mode
 * selectors are more specific than the generic dark dropdown rules above.
 * Give that workbench panel its own dark palette so headings, links and
 * separators remain legible without changing the navigation structure. */
@media (min-width: 1200px) {
    html.kiv-shell-dark .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu {
        border-color: #40535f;
        background: #24333e;
        box-shadow: 0 14px 34px rgba(5, 12, 16, .42);
    }

    html.kiv-shell-dark .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column + li.kiv-webops-column {
        border-left-color: #3b4d58;
    }

    html.kiv-shell-dark .navbar #top_menu > li.kiv-nav-webops .kiv-webops-heading {
        border-bottom-color: #4aca6d;
        color: #9fb1ba;
    }

    html.kiv-shell-dark .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        color: #dbe5eb;
    }

    html.kiv-shell-dark .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a:hover,
    html.kiv-shell-dark .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a:focus {
        background: #294035;
        color: #bde8c8;
    }
}

html.kiv-shell-dark .footer-nav .kiv-home-featured {
    border-color: #3a514a;
    border-top-color: #34ba77;
    background: linear-gradient(135deg, #263b35 0%, #24343e 58%, #22313a 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

html.kiv-shell-dark .kiv-home-featured h1,
html.kiv-shell-dark .kiv-home-featured h2 { color: #edf5f2; }
html.kiv-shell-dark .kiv-home-featured-description { color: #aebdc1; }
html.kiv-shell-dark .kiv-home-featured-all {
    border-color: #49745d;
    background: #294038;
    color: #a8e3bc;
}

html.kiv-shell-dark .kiv-home-featured-card {
    border-color: #3b515a;
    background: #293b44;
}

html.kiv-shell-dark .kiv-home-featured-card:hover,
html.kiv-shell-dark .kiv-home-featured-card:focus-within { border-color: #5b9b71; background: #2b423a; }
html.kiv-shell-dark .kiv-home-featured-tag { color: #9cacb2; }
html.kiv-shell-dark .kiv-home-featured-link { color: #e2ece9; }
html.kiv-shell-dark .kiv-home-featured-link:hover,
html.kiv-shell-dark .kiv-home-featured-link:focus { color: #a8e7bd; }

html.kiv-shell-dark .footer-nav .list-inline-bg {
    border-color: #3a4d56;
    background: #20303a;
}

html.kiv-shell-dark .footer-nav .list-inline-bg h3 { border-color: #3b5159; background: #293b44; color: #e0e9e7; }
html.kiv-shell-dark .footer-nav .list-inline-bg li > a { color: #cbd7d9; }
html.kiv-shell-dark .footer-nav .list-inline-bg li > a:hover { color: #a8e5ba; }

html.kiv-shell-dark .kiv-nav-tool-icon,
html.kiv-shell-dark .kiv-home-tool-icon,
html.kiv-shell-dark .kiv-featured-tool-icon,
html.kiv-shell-dark .kiv-shell-result-icon {
    border-color: #3d5a4e !important;
    background: #263e35 !important;
    color: #8bd5a7 !important;
}

html.kiv-shell-dark .kiv-theme-launch { border-color: #4b6b5c; background: #294038; color: #bde8c8; }

@media (max-width: 767px) {
    .footer-nav .list-inline-bg li { min-height: 40px; padding: 5px 1px; }
    .footer-nav .list-inline-bg li > .kiv-home-tool-icon { width: 26px; height: 26px; flex-basis: 26px; }
    .kiv-home-featured-card { min-height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
    .kiv-home-featured-card { transition: none; }
}