/* =====================================================================
   Knowledge base / Help navigation panel — macOS "glass material"
   ---------------------------------------------------------------------
   One sidebar for every article layout (normal, rest_api,
   backend_development, frontend_development), so the categories read the
   same wherever you are.

   Same material language as the Team Member profile and the appTable skin:
   frosted near-white surface, hairline borders, soft shadow, one restrained
   Apple system blue accent. Flips to a dark material under body.color-1E202D.

   Scoped to `.nz-kb-nav`, rendered by help_and_knowledge_base/nav_panel.php.
   ===================================================================== */

.nz-kb-nav {
    --kb-radius-panel: 20px;
    --kb-radius-row: 11px;
    --kb-blur: saturate(180%) blur(22px);

    /* ink */
    --kb-ink: #1d1d1f;
    --kb-ink-2: #43434a;
    --kb-ink-dim: #86868b;

    /* accent (Apple system blue), used sparingly */
    --kb-accent: #007aff;
    --kb-accent-soft: rgba(0, 122, 255, 0.1);

    /* surfaces */
    --kb-hairline: rgba(0, 0, 0, 0.08);
    --kb-panel: rgba(255, 255, 255, 0.72);
    --kb-row-hover: rgba(0, 0, 0, 0.04);
    --kb-guide: rgba(0, 0, 0, 0.09);

    position: sticky;
    top: 76px;
    align-self: start;
}

.nz-kb-nav .nz-kb-nav__inner {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 12px 16px 12px;
    border-radius: var(--kb-radius-panel);
    border: 1px solid var(--kb-hairline);
    background: var(--kb-panel);
    -webkit-backdrop-filter: var(--kb-blur);
    backdrop-filter: var(--kb-blur);
    box-shadow:
        0 18px 40px -28px rgba(30, 40, 70, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    scrollbar-width: thin;
}

/* the panel scrolls, but its own scrollbar stays discreet */
.nz-kb-nav .nz-kb-nav__inner::-webkit-scrollbar {
    width: 8px;
}

.nz-kb-nav .nz-kb-nav__inner::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
    background-color: rgba(0, 0, 0, 0.16);
}

/* ------------------------------------------------------------- search --- */

.nz-kb-nav .nz-kb-nav__search {
    margin-bottom: 12px;
}

/* the shared search box is an app .form-control; give it the panel's material */
.nz-kb-nav .nz-kb-nav__search .search-box {
    margin: 0;
}

.nz-kb-nav .nz-kb-nav__search input.form-control {
    height: 36px;
    padding: 0 12px 0 32px;
    border-radius: 10px;
    border: 1px solid var(--kb-hairline);
    background-color: rgba(255, 255, 255, 0.6);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2386868b' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
    font-size: 13px;
    color: var(--kb-ink);
    box-shadow: none;
}

.nz-kb-nav .nz-kb-nav__search input.form-control:focus {
    border-color: var(--kb-accent);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px var(--kb-accent-soft);
}

/* --------------------------------------------------------------- tree --- */

.nz-kb-nav .nz-kb-nav__group {
    margin-bottom: 1px;
}

/* every nesting level steps in and hangs off a hairline guide */
.nz-kb-nav .nz-kb-nav__group--depth-1,
.nz-kb-nav .nz-kb-nav__group--depth-2,
.nz-kb-nav .nz-kb-nav__group--depth-3 {
    margin-left: 12px;
    padding-left: 9px;
    border-left: 1px solid var(--kb-guide);
}

.nz-kb-nav .nz-kb-nav__cat {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--kb-radius-row);
    font-size: 13.5px;
    font-weight: 590;
    line-height: 1.35;
    color: var(--kb-ink);
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.nz-kb-nav .nz-kb-nav__group--depth-1 .nz-kb-nav__cat,
.nz-kb-nav .nz-kb-nav__group--depth-2 .nz-kb-nav__cat,
.nz-kb-nav .nz-kb-nav__group--depth-3 .nz-kb-nav__cat {
    font-size: 13px;
    font-weight: 500;
    color: var(--kb-ink-2);
}

.nz-kb-nav .nz-kb-nav__cat:hover {
    background: var(--kb-row-hover);
    color: var(--kb-ink);
}

/* the open category is the one piece of colour in the panel */
.nz-kb-nav .nz-kb-nav__cat.active {
    background: var(--kb-accent-soft);
    color: var(--kb-accent);
    font-weight: 600;
}

.nz-kb-nav .nz-kb-nav__cat-icon {
    flex: 0 0 auto;
    width: 15px;
    font-size: 13px;
    text-align: center;
    color: var(--kb-ink-dim);
}

.nz-kb-nav .nz-kb-nav__cat.active .nz-kb-nav__cat-icon {
    color: var(--kb-accent);
}

.nz-kb-nav .nz-kb-nav__cat-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nz-kb-nav .nz-kb-nav__count {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    color: var(--kb-ink-dim);
}

.nz-kb-nav .nz-kb-nav__cat.active .nz-kb-nav__count {
    background: rgba(0, 122, 255, 0.14);
    color: var(--kb-accent);
}

/* ----------------------------------------------------------- articles --- */

.nz-kb-nav .nz-kb-nav__articles {
    list-style: none;
    margin: 2px 0 8px 0;
    padding: 0 0 0 9px;
    margin-left: 12px;
    border-left: 1px solid var(--kb-guide);
}

.nz-kb-nav .nz-kb-nav__article {
    display: flex;
    /* the title may wrap onto a second line, so the verb pill sits at the top */
    align-items: flex-start;
    gap: 7px;
    padding: 6px 10px;
    border-radius: var(--kb-radius-row);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--kb-ink-2);
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.nz-kb-nav .nz-kb-nav__article:hover {
    background: var(--kb-row-hover);
    color: var(--kb-ink);
}

.nz-kb-nav .nz-kb-nav__article.active {
    background: var(--kb-accent-soft);
    color: var(--kb-accent);
    font-weight: 600;
}

/* article names are long ("Invoices, Payments and Credit notes / Get invoice"),
   so wrap to two lines instead of truncating them into uselessness */
.nz-kb-nav .nz-kb-nav__article-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* the http verb pill sits tight against the article name */
.nz-kb-nav .nz-docs__method {
    min-width: 42px;
    margin-top: 1px;
    font-size: 9px;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 991px) {
    .nz-kb-nav {
        position: static;
        margin-bottom: 18px;
    }

    .nz-kb-nav .nz-kb-nav__inner {
        max-height: none;
        overflow: visible;
    }
}

/* ---------------------------------------------------------- dark theme --- */
/* NIZU dark = body.color-1E202D (theme stylesheet), not html.dark */

body.color-1E202D .nz-kb-nav {
    --kb-ink: #f5f5f7;
    --kb-ink-2: #d1d1d6;
    --kb-ink-dim: #8e8e93;
    --kb-accent: #0a84ff;
    --kb-accent-soft: rgba(10, 132, 255, 0.18);
    --kb-hairline: rgba(255, 255, 255, 0.1);
    --kb-panel: rgba(255, 255, 255, 0.06);
    --kb-row-hover: rgba(255, 255, 255, 0.07);
    --kb-guide: rgba(255, 255, 255, 0.12);
}

body.color-1E202D .nz-kb-nav .nz-kb-nav__inner {
    box-shadow:
        0 22px 46px -30px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.color-1E202D .nz-kb-nav .nz-kb-nav__inner::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
}

/* the theme paints .form-control with !important, so match it */
body.color-1E202D .nz-kb-nav .nz-kb-nav__search input.form-control {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--kb-ink) !important;
}

body.color-1E202D .nz-kb-nav .nz-kb-nav__search input.form-control:focus {
    border-color: var(--kb-accent) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body.color-1E202D .nz-kb-nav .nz-kb-nav__count {
    background: rgba(255, 255, 255, 0.1);
}