/* The phone's status bar and home indicator. In the iOS app env() reads 0 until something
   (a full-screen video) forces the web view to re-measure, so the app also passes the real
   insets in as --app-safe-* (MainViewController.swift); the larger of the two wins. */
:root {
    --safe-top: max(env(safe-area-inset-top), var(--app-safe-top, 0px));
    --safe-bottom: max(env(safe-area-inset-bottom), var(--app-safe-bottom, 0px));
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-surface);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-strong);
}

#blazor-error-ui {
    background: var(--color-warning-light);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.toolbox-brand-panel {
    color: var(--color-surface);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary) 90%, var(--color-black) 10%) 0%,
        color-mix(in srgb, var(--color-primary) 70%, var(--color-black) 30%) 45%,
        color-mix(in srgb, var(--color-primary) 45%, var(--color-white) 55%) 100%);
}

#app, html, body {
    margin: 0;
    padding: 0;
}

/* Stop the iOS WebView (Capacitor app) from rubber-band scrolling the whole shell, which let the
   fixed drawer header / sign-out drift out of reach. */
html, body {
    overscroll-behavior: none;
}

.toolbox-shell {
    min-height: 100vh;
    display: flex;
    background: var(--color-canvas);
    position: relative;
    width: 100%;
}

.toolbox-sidebar {
    display: none;
    width: 18rem;
    flex-direction: column;
    background-image: linear-gradient(180deg, var(--bhip-primary-color) 37%, var(--bhip-secondary-color) 88%);
    color: var(--color-surface);
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.toolbox-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem 0.5rem;
    /* Clear the iOS status bar / Dynamic Island so sign-out stays tappable in the Capacitor app. */
    padding-top: calc(1rem + var(--safe-top));
    flex-shrink: 0;
}

.toolbox-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-surface) 42%, transparent) transparent;
}

.toolbox-sidebar-scroll::-webkit-scrollbar {
    width: 0.55rem;
}

.toolbox-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.toolbox-sidebar-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-surface) 42%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.toolbox-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.toolbox-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 1rem;
    /* Above the iOS home indicator in the Capacitor app. */
    padding-bottom: calc(1rem + var(--safe-bottom));
    flex-shrink: 0;
}

/* The profile block lives in the header now, at every width — one copy on a light
   background, rather than one per sidebar on the teal. */
/* Identity lives in the rail again, the way the admin shell has it: the session card
   first, then who you are. A header is a wide bar with a small object at each end and a
   void between; a rail has a width to fill, which is why this composes and the header
   chip did not. */
.toolbox-identity {
    /* The bottom pad is the break between who you are and where you can go — without it
       the nav's own 0.5rem is the whole gap, and a filled active pill lands on the rank. */
    padding: 0.75rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toolbox-profile {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    text-align: start;
    min-width: 0;
}

.toolbox-avatar {
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.toolbox-avatar img {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.toolbox-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

/* A long member name has nowhere to wrap to in a single row. */
.toolbox-profile-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-surface);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbox-profile-rank {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

/* A rank's icon is a URL an admin sets on the rank record; ranks without one simply show
   the pill. These are detailed gem renders rather than flat glyphs, so they need room —
   but kept under the avatar's size, since in a member's own profile block the person
   should come first. Square bounds, not a circle: two round images would read as two
   portraits. */
.toolbox-rank-icon {
    height: 2rem;
    width: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* The sign-off: wordmark first, notices as the fine print beneath it. The rail's
   gradient ends pale green, where faint white text all but disappears — so the block
   darkens its own patch of it rather than the text fighting the background. */
.toolbox-sidebar-legal {
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--color-black) 12%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--color-surface) 16%, transparent);
}

.toolbox-legal-link {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-surface) 85%, transparent);
    text-decoration: none;
    text-align: center;
}

.toolbox-legal-link:hover,
.toolbox-legal-link--active {
    color: var(--color-surface);
}

.toolbox-wordmark {
    width: 7rem;
    max-width: 100%;
    opacity: 0.9;
}

.toolbox-signout-button {
    color: var(--bhip-danger-color);
}

.toolbox-signout-button .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toolbox-signout-button:hover {
    background: transparent;
    color: var(--bhip-danger-color);
}

/* The nav reads as a list, not as a stack of filled blocks: only hover and the
   current page carry a background. The row height is deliberately untouched —
   this shell is also the iOS app, where 0.6rem of padding is already less than
   Apple asks for, so the space comes out of the container and the gaps instead.
   Reverting this comment's commit puts the pills back exactly. */
.toolbox-nav {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toolbox-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-surface);
    text-decoration: none;
    background: transparent;
}

.toolbox-nav-item:hover {
    background: color-mix(in srgb, var(--bhip-dark-color) 85%, var(--color-black));
}

.toolbox-nav-item--active {
    background: var(--color-surface);
    color: var(--bhip-danger-color);
}

.toolbox-nav-item--disabled {
    opacity: 0.55;
    background: transparent;
    cursor: not-allowed;
}

.toolbox-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Let this flex column shrink instead of forcing the row wider than the viewport. Without it,
       wide content (the binary-tree org chart, esp. with the detail panel open) pushes the page into
       horizontal overflow and the sticky sidebar scrolls out of view. */
    min-width: 0;
    min-height: 100vh;
}

.toolbox-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Shown at every width: it carries the only profile block, and on a phone it is also
   the only place an impersonation warning can appear — the sidebar is a closed drawer
   there. Padding stays tight, because a phone pays for this on top of the bottom nav. */
.toolbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    /* Inline padding matches .toolbox-content so the profile's leading edge lines up with
       the cards below it, rather than floating 0.5rem short of them. */
    padding: 0.5rem 1.5rem;
    /* On a phone this bar is the top of the page, so it clears the status bar itself. */
    padding-top: calc(0.5rem + var(--safe-top));
    background: var(--color-subtle);
    border-bottom: 1px solid var(--color-border-default);
}

.toolbox-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.toolbox-header-notice {
    display: flex;
    min-width: 0;
}

/* Empty when nobody is impersonating: the header then has nothing to show below 1024px
   and collapses to its border. */
.toolbox-header:has(.toolbox-header-notice:empty) {
    display: none;
}

/* While the header shows, it has already cleared the status bar — the content need not. */
@media (max-width: 1023.98px) {
    .toolbox-right:has(.toolbox-header-notice:not(:empty)) .toolbox-content {
        padding-top: 1.5rem;
    }
}

/* The bell, the bag and the cart are in the bottom nav on a phone; showing them here
   too would be the same action twice. */
.toolbox-header-actions {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.toolbox-icon-danger {
    color: var(--bhip-danger-color);
}

.toolbox-content {
    flex: 1;
    padding: 1.5rem 1.5rem 5.5rem;
    /* Keep content clear of the status bar (top) and the home indicator + fixed bottom nav (bottom). */
    padding-top: calc(1.5rem + var(--safe-top));
    padding-bottom: calc(5.5rem + var(--safe-bottom));
}

.toolbox-content-inner {
    width: 100%;
    max-width: none;
}

.toolbox-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 0.6rem 0.25rem;
    /* Sit above the iOS home indicator in the Capacitor app. */
    padding-bottom: calc(0.6rem + var(--safe-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-default);
    z-index: 40;
}

[dir="rtl"] .toolbox-shell {
    direction: rtl;
    flex-direction: row-reverse;
}

[dir="rtl"] .toolbox-nav-item {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .toolbox-header-actions,
[dir="rtl"] .toolbox-header-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .toolbox-mobile-drawer {
    left: auto;
    right: 0;
}

[dir="rtl"] .toolbox-profile-meta,
[dir="rtl"] .toolbox-nav,
[dir="rtl"] .toolbox-content,
[dir="rtl"] .toolbox-content-inner {
    text-align: right;
}

.toolbox-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.toolbox-bottom-item:disabled {
    cursor: not-allowed;
}

.toolbox-bottom-icon {
    color: var(--bhip-danger-color);
}

.toolbox-bottom-item--active {
    color: var(--bhip-danger-color);
}

.toolbox-bottom-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toolbox-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-canvas);
}

.toolbox-auth-main {
    flex: 1;
    display: flex;
}

.toolbox-auth-content {
    flex: 1;
    padding: 1.5rem;
    /* Clear the status bar (top) and home indicator (bottom) in the Capacitor app. */
    padding-top: calc(1.5rem + var(--safe-top));
    padding-bottom: calc(1.5rem + var(--safe-bottom));
}

.toolbox-auth-inner {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
}


.toolbox-mobile-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-black), transparent 55%);
    z-index: 45;
}

.toolbox-mobile-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 18rem;
    background-image: linear-gradient(180deg, var(--bhip-primary-color) 37%, var(--bhip-secondary-color) 88%);
    color: var(--color-surface);
    z-index: 50;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    /* No header here: the actions live in the footer, so the top only clears the status bar. */
    padding-top: var(--safe-top);
}



@media (min-width: 1024px) {
    .toolbox-shell {
        align-items: flex-start;
    }

    .toolbox-sidebar {
        display: flex;
        position: sticky;
        top: 0;
        align-self: flex-start;
    }

    .toolbox-header {
        display: flex;
        min-height: 4.5rem;
        padding: 0.75rem 2.5rem;
    }

    .toolbox-header-notice {
        display: none;
    }

    .toolbox-header-actions {
        display: flex;
    }

    .toolbox-bottom-nav {
        display: none;
    }


    .toolbox-content {
        padding: 2rem 2.5rem 3rem;
    }

    .toolbox-content-inner {
        max-width: none;
    }
}

/* AppRichEditor (Quill): match the Toolbox inputs. */
.app-rich-editor .ql-toolbar.ql-snow,
.app-rich-editor .ql-container.ql-snow {
    border-color: var(--color-border-strong);
}

.app-rich-editor .ql-toolbar.ql-snow {
    border-radius: 0.375rem 0.375rem 0 0;
    background: var(--color-surface);
}

.app-rich-editor .ql-toolbar.ql-snow button {
    cursor: pointer;
}

.app-rich-editor .ql-container.ql-snow {
    border-radius: 0 0 0.375rem 0.375rem;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.875rem;
}

.app-rich-editor .ql-editor {
    min-height: 8rem;
    color: var(--color-text-default);
    cursor: auto;
}

.app-rich-editor .ql-snow .ql-stroke {
    stroke: var(--color-text-muted);
}

.app-rich-editor .ql-snow .ql-fill {
    fill: var(--color-text-muted);
}

.app-rich-editor .ql-snow button:hover .ql-stroke,
.app-rich-editor .ql-snow button.ql-active .ql-stroke {
    stroke: var(--color-primary);
}

.app-rich-editor .ql-snow button:hover .ql-fill,
.app-rich-editor .ql-snow button.ql-active .ql-fill {
    fill: var(--color-primary);
}