/* =====================================================================
   Help / Knowledge base side navigation — the iOS 26 navigation stack
   ---------------------------------------------------------------------
   The same navigation as the workspace sidebar (assets/css/sidebar-ios26.css),
   in a column of the page instead of a fixed rail: grouped inset cards,
   tinted icon tiles, hairline separators that start where the label starts,
   and a page that slides in when you step into a category.

   Scoped to `.nz-kb26`. Markup in
   app/Views/help_and_knowledge_base/nav_panel.php, rendered by
   assets/js/kb-nav-ios26.js. Replaces the folder tree that used to live in
   assets/css/kb-nav-glass.css.

   The tint names ([data-tint="blue"] …) are NOT redefined here — they are the
   thirteen the sidebar already publishes, extended to `.nz-kb26` in
   sidebar-ios26.css, so a category and a menu row in the same colour are the
   same colour.

   Dark mode is NIZU's body.color-1E202D theme, not a prefers-color-scheme
   media query.
   ===================================================================== */

.nz-kb26 {
    /* geometry */
    --kb26-gutter: 0px;
    --kb26-card-radius: 15px;
    --kb26-row-h: 40px;
    --kb26-tile: 27px;
    --kb26-tile-radius: 7px;
    --kb26-inset: 46px;
    /* where the hairline separator starts */

    /* motion — the iOS push/pop curve */
    --kb26-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --kb26-dur: 340ms;

    /* ink */
    --kb26-ink: #1d1d1f;
    --kb26-ink-dim: rgba(60, 60, 67, 0.6);
    --kb26-chev: rgba(60, 60, 67, 0.32);

    /* material */
    --kb26-panel: rgba(242, 242, 247, 0.72);
    --kb26-card: #ffffff;
    --kb26-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.045);
    --kb26-hairline: rgba(60, 60, 67, 0.13);
    --kb26-row-press: rgba(0, 0, 0, 0.055);
    --kb26-accent: #007aff;
    --kb26-accent-soft: rgba(0, 122, 255, 0.11);
    --kb26-blur: saturate(180%) blur(22px);

    /*
     * Where the panel is nailed down, all four written by
     * assets/js/kb-nav-ios26.js. None of it can be expressed in the stylesheet:
     *
     *   --kb26-top    the bottom edge of the top tool bar. The bar is
     *                 `.navbar.fixed-top`, whose height is not a constant the
     *                 CSS knows.
     *   --kb26-left
     *   --kb26-width  the column the panel came out of. A fixed element is out
     *                 of flow, so it no longer inherits the width of the column
     *                 it sits in — that has to be measured and followed (the
     *                 left menu collapsing moves and resizes it).
     *
     * The fallbacks below are only for the moment before the script runs.
     */
    --kb26-top: 65px;
    --kb26-left: auto;
    --kb26-width: auto;

    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/*
 * Desktop: the panel is fixed to the window, filling everything under the top
 * tool bar. It does not move at all while the article scrolls, and it is never
 * taller than the screen, so a long tree scrolls inside the panel.
 */
@media (min-width: 992px) {
    .nz-kb26 {
        position: fixed;
        top: var(--kb26-top);
        left: var(--kb26-left);
        width: var(--kb26-width);
        height: calc(100vh - var(--kb26-top));
    }

    .nz-kb26 .nz-kb26__inner {
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

.nz-kb26 .nz-kb26__inner {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px 14px 10px;
    border-radius: 20px;
    /* no border: the panel is read as a surface, not as a boxed-in card */
    background: var(--kb26-panel);
    -webkit-backdrop-filter: var(--kb26-blur);
    backdrop-filter: var(--kb26-blur);
    box-shadow:
        0 18px 40px -28px rgba(30, 40, 70, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    scrollbar-width: thin;
}

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

.nz-kb26 .nz-kb26__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-kb26 .nz-kb26__search {
    margin-bottom: 10px;
}

.nz-kb26 .nz-kb26__search .search-box {
    margin: 0;
}

/*
 * The four corners are set one by one, and with !important, because
 * `.help-search-box` in app.all.css pins two of them:
 *
 *     border-top-right-radius: var(--ios26-pill) !important;
 *     border-bottom-right-radius: var(--ios26-pill) !important;
 *
 * (itself there to beat an older `5px !important` pair in the same file).
 * A plain `border-radius` here loses those two and the field comes out round
 * on the right and square on the left. The value is the app's own search pill,
 * so this field reads like every other search box in the workspace.
 */
.nz-kb26 .nz-kb26__search input.form-control {
    height: 36px;
    padding: 0 12px 0 32px;
    border-top-left-radius: var(--ios26-pill, 999px) !important;
    border-top-right-radius: var(--ios26-pill, 999px) !important;
    border-bottom-right-radius: var(--ios26-pill, 999px) !important;
    border-bottom-left-radius: var(--ios26-pill, 999px) !important;
    border: 1px solid var(--kb26-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(--kb26-ink);
    box-shadow: none;
}

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

/* --------------------------------------------------------------- back --- */

.nz-kb26 .nz-kb26__chrome:empty {
    display: none;
}

.nz-kb26 .nz-kb26__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin: 0 0 8px 2px;
    padding: 4px 8px 4px 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: var(--kb26-accent);
    cursor: pointer;
    transition: background-color 120ms linear;
}

.nz-kb26 .nz-kb26__back:hover {
    background: var(--kb26-row-press);
}

.nz-kb26 .nz-kb26__back span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------------- pages --- */

.nz-kb26 .nz-kb26__pages {
    overflow-x: hidden;
}

/* the incoming page slides from the side it came from; nothing else moves */
.nz-kb26 .nz-kb26__page.is-from-right {
    animation: kb26-in-right var(--kb26-dur) var(--kb26-ease) both;
}

.nz-kb26 .nz-kb26__page.is-from-left {
    animation: kb26-in-left var(--kb26-dur) var(--kb26-ease) both;
}

@keyframes kb26-in-right {
    from {
        opacity: 0;
        transform: translateX(22%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes kb26-in-left {
    from {
        opacity: 0;
        transform: translateX(-22%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------- cards --- */

.nz-kb26 .nz-kb26__group {
    margin: 0 0 14px 0;
}

.nz-kb26 .nz-kb26__group:last-child {
    margin-bottom: 0;
}

.nz-kb26 .nz-kb26__grouptitle {
    padding: 8px var(--kb26-gutter) 6px calc(var(--kb26-gutter) + 6px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--kb26-ink-dim);
    text-transform: capitalize;
}

.nz-kb26 .nz-kb26__card {
    margin: 0 var(--kb26-gutter);
    border-radius: var(--kb26-card-radius);
    background: var(--kb26-card);
    box-shadow: var(--kb26-card-shadow);
    overflow: hidden;
}

/* --------------------------------------------------------------- rows --- */

.nz-kb26 .nz-kb26__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--kb26-row-h);
    padding: 6px 10px 6px 9px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--kb26-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms linear;
}

.nz-kb26 .nz-kb26__row:hover,
.nz-kb26 .nz-kb26__row:focus-visible {
    background: var(--kb26-row-press);
    color: var(--kb26-ink);
    text-decoration: none;
}

/* hairline between rows, inset so it starts where the label starts */
.nz-kb26 .nz-kb26__row+.nz-kb26__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--kb26-inset);
    right: 0;
    height: 1px;
    background: var(--kb26-hairline);
}

.nz-kb26 .nz-kb26__row--article+.nz-kb26__row--article::before {
    left: 12px;
}

.nz-kb26 .nz-kb26__row.is-active {
    background: var(--kb26-accent-soft);
}

.nz-kb26 .nz-kb26__row.is-active .nz-kb26__label {
    color: var(--kb26-accent);
    font-weight: 600;
}

.nz-kb26 .nz-kb26__tile {
    flex: 0 0 auto;
    width: var(--kb26-tile);
    height: var(--kb26-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kb26-tile-radius);
    background: var(--sb26-tint, #8e8e93);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nz-kb26 .nz-kb26__tile i {
    font-size: 13px;
    line-height: 1;
}

.nz-kb26 .nz-kb26__label {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: -0.005em;
    color: var(--kb26-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* an article row has no tile, so it sits where the labels above it start */
.nz-kb26 .nz-kb26__row--article {
    padding-left: 12px;
    font-size: 13px;
}

.nz-kb26 .nz-kb26__row--article .nz-kb26__label {
    color: var(--kb26-ink);
    opacity: 0.86;
}

.nz-kb26 .nz-kb26__row--article.is-active .nz-kb26__label {
    opacity: 1;
}

/* the breadcrumb a search result carries */
.nz-kb26 .nz-kb26__path {
    display: block;
    font-size: 11px;
    color: var(--kb26-ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nz-kb26 .nz-kb26__row .nz-kb26__label:has(.nz-kb26__path) {
    white-space: normal;
    line-height: 1.25;
}

.nz-kb26 .nz-kb26__count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(120, 120, 128, 0.14);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--kb26-ink-dim);
}

.nz-kb26 .nz-kb26__row.is-active .nz-kb26__count {
    background: rgba(0, 122, 255, 0.16);
    color: var(--kb26-accent);
}

.nz-kb26 .nz-kb26__chev {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--kb26-chev);
}

/* the HTTP verb of a rest_api article, same badge the docs layout uses */
.nz-kb26 .nz-docs__method {
    flex: 0 0 auto;
}

/* ------------------------------------------------------ empty / loading --- */

.nz-kb26 .nz-kb26__empty,
.nz-kb26 .nz-kb26__loading {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--kb26-ink-dim);
}

.nz-kb26 .nz-kb26__loading {
    text-align: center;
}

/* ------------------------------------------------- the no-script tree --- */

/*
 * Rendered by the view and replaced by the stack as soon as the script runs.
 * It is what a crawler follows and what a reader without JavaScript gets, so
 * it is styled as a plain readable list rather than hidden.
 */
.nz-kb26 .nz-kb26__seedlist {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.nz-kb26 .nz-kb26__seedlist a {
    display: inline-block;
    padding: 3px 0;
    color: var(--kb26-ink);
    text-decoration: none;
}

.nz-kb26 .nz-kb26__seedlist a.active {
    color: var(--kb26-accent);
    font-weight: 600;
}

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

body.color-1E202D .nz-kb26 {
    --kb26-ink: #f2f2f7;
    --kb26-ink-dim: rgba(235, 235, 245, 0.6);
    --kb26-chev: rgba(235, 235, 245, 0.32);

    --kb26-panel: rgba(21, 23, 31, 0.72);
    --kb26-card: #1e202d;
    --kb26-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --kb26-hairline: rgba(235, 235, 245, 0.12);
    --kb26-row-press: rgba(255, 255, 255, 0.06);
    --kb26-accent: #0a84ff;
    --kb26-accent-soft: rgba(10, 132, 255, 0.18);
}

body.color-1E202D .nz-kb26 .nz-kb26__inner {
    box-shadow:
        0 18px 40px -28px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

/* the theme stylesheet paints .form-control with !important */
body.color-1E202D .nz-kb26 .nz-kb26__search input.form-control {
    background-color: rgba(118, 118, 128, 0.24) !important;
    border-color: var(--kb26-hairline) !important;
    color: #f2f2f7 !important;
}

body.color-1E202D .nz-kb26 .nz-kb26__count {
    background: rgba(120, 120, 128, 0.3);
}

/* ================================================== reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
    .nz-kb26 .nz-kb26__page {
        animation-duration: 1ms !important;
    }
}

/* ========================================================== mobile ===== */

/*
 * On a phone the panel is not fixed and not capped: it is one card at the top
 * of the page, and the page scrolls. (The placer writes nothing below this
 * width, and clears what it wrote.)
 */
@media (max-width: 991px) {
    .nz-kb26 {
        position: static;
        margin-bottom: 20px;
    }

    .nz-kb26 .nz-kb26__inner {
        max-height: none;
    }
}