/*
 * =========================================================
 * FILE        :: /public/assets/css/core/guidance.css
 * MODULE      :: Core
 * DOMAIN      :: UI
 * LAYER       :: Presentation Asset
 * PURPOSE     :: BusinessOS contextual Help presentation
 * OWNER       :: UI Domain Authority
 * VERSION     :: 2.0.0
 * =========================================================
 */

.bos-help-root {
    --bos-help-accent: var(--bs-primary, #2563eb);
    --bos-help-surface: var(--bs-body-bg, #ffffff);
    --bos-help-text: var(--bs-body-color, #111827);
    --bos-help-muted: var(--bs-secondary-color, #6b7280);
    --bos-help-border: var(--bs-border-color, rgba(15, 23, 42, .14));
    --bos-help-shadow: 0 1rem 2.75rem rgba(15, 23, 42, .2);
    color: var(--bos-help-text);
    font-family: inherit;
    position: relative;
    z-index: 1090;
}

.bos-help-launch {
    align-items: center;
    background: color-mix(in srgb, var(--bos-help-accent) 92%, #ffffff 8%);
    border: 1px solid color-mix(in srgb, var(--bos-help-accent) 72%, #ffffff 28%);
    border-radius: 999px;
    box-shadow: 0 .45rem 1.25rem rgba(15, 23, 42, .18);
    color: #ffffff;
    cursor: grab;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: .35rem;
    height: 2.625rem;
    justify-content: center;
    left: auto;
    opacity: .78;
    padding: 0 .75rem;
    position: fixed;
    right: 1rem;
    top: auto;
    bottom: 5rem;
    transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
    user-select: none;
    width: auto;
    min-width: 2.625rem;
    z-index: 1100;
}

.bos-help-launch > span:first-child {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 999px;
    display: inline-flex;
    font-size: 1.05rem;
    height: 1.55rem;
    justify-content: center;
    line-height: 1;
    width: 1.55rem;
}

.bos-help-launch:hover,
.bos-help-launch:focus-visible,
.bos-help-launch.bos-help-launch-dragging {
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .24);
    opacity: 1;
    outline: none;
    transform: translateY(-1px);
}

.bos-help-launch.bos-help-launch-dragging {
    cursor: grabbing;
}

.bos-help-backdrop {
    background: rgba(15, 23, 42, .22);
    inset: 0;
    position: fixed;
    z-index: 1088;
}

.bos-help-selecting .bos-help-backdrop {
    pointer-events: none;
}

.bos-help-panel {
    background: var(--bos-help-surface);
    border-left: 1px solid var(--bos-help-border);
    box-shadow: var(--bos-help-shadow);
    color: var(--bos-help-text);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: min(28rem, calc(100vw - 1.5rem));
    position: fixed;
    right: 0;
    top: 0;
    width: 28rem;
    z-index: 1095;
}

.bos-help-panel[hidden],
.bos-help-backdrop[hidden],
.bos-help-spotlight[hidden] {
    display: none !important;
}

.bos-help-panel-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--bos-help-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.125rem .875rem;
}

.bos-help-panel-header h2 {
    font-size: 1.15rem;
    letter-spacing: 0;
    line-height: 1.25;
    margin: .25rem 0 0;
}

.bos-help-breadcrumb {
    align-items: center;
    color: var(--bos-help-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    gap: .35rem;
}

.bos-help-breadcrumb button {
    background: transparent;
    border: 0;
    color: var(--bos-help-accent);
    font: inherit;
    padding: 0;
}

.bos-help-close {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .375rem;
    color: var(--bos-help-muted);
    display: inline-flex;
    font-size: 1.5rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    width: 2rem;
}

.bos-help-close:hover,
.bos-help-close:focus-visible {
    border-color: var(--bos-help-border);
    color: var(--bos-help-text);
    outline: none;
}

.bos-help-panel-body {
    overflow: auto;
    padding: 1rem 1.125rem 1.25rem;
}

.bos-help-section {
    border-bottom: 1px solid color-mix(in srgb, var(--bos-help-border) 70%, transparent);
    margin-bottom: .9rem;
    padding-bottom: .9rem;
}

.bos-help-section h3 {
    color: var(--bos-help-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    margin: 0 0 .4rem;
    text-transform: uppercase;
}

.bos-help-section p,
.bos-help-section li {
    font-size: .93rem;
    line-height: 1.45;
}

.bos-help-section p {
    margin: 0;
}

.bos-help-section ul {
    margin: 0;
    padding-left: 1.15rem;
}

.bos-help-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

.bos-help-search {
    display: block;
    margin-top: .75rem;
}

.bos-help-results {
    display: grid;
    gap: .4rem;
    margin-top: .5rem;
}

.bos-help-results button,
.bos-help-related {
    background: color-mix(in srgb, var(--bos-help-accent) 6%, var(--bos-help-surface) 94%);
    border: 1px solid var(--bos-help-border);
    border-radius: .45rem;
    color: var(--bos-help-text);
    display: block;
    font: inherit;
    padding: .5rem .6rem;
    text-align: left;
    width: 100%;
}

.bos-help-results button span {
    color: var(--bos-help-muted);
    display: block;
    font-size: .72rem;
    margin-top: .1rem;
}

.bos-help-related-list {
    display: grid;
    gap: .4rem;
}

.bos-help-admin-note {
    color: var(--bos-help-muted);
    font-size: .8rem;
    margin-top: .6rem;
}

.bos-help-selectable,
.bos-help-target-hover,
.bos-help-target-selected {
    outline-offset: .18rem;
}

.bos-help-selecting {
    cursor: help;
}

.bos-help-selecting .bos-help-selectable {
    cursor: help;
}

.bos-help-target-hover {
    outline: 2px solid var(--bos-help-accent) !important;
    box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--bos-help-accent) 18%, transparent) !important;
}

.bos-help-target-selected {
    outline: 2px solid color-mix(in srgb, var(--bos-help-accent) 76%, #16a34a 24%) !important;
    box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--bos-help-accent) 16%, transparent) !important;
}

.bos-help-spotlight {
    border: 2px solid var(--bos-help-accent);
    border-radius: .55rem;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .34), 0 0 0 .35rem color-mix(in srgb, var(--bos-help-accent) 20%, transparent);
    pointer-events: none;
    position: fixed;
    transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
    z-index: 1092;
}

.bos-help-panel-compact {
    border-radius: .75rem;
    bottom: 5.25rem;
    height: auto;
    max-height: min(42dvh, 24rem);
    right: 1rem;
    top: auto;
}

.bos-help-selection-bar {
    align-items: center;
    background: var(--bos-help-surface);
    border: 1px solid var(--bos-help-border);
    border-radius: 999px;
    box-shadow: 0 .55rem 1.5rem rgba(15, 23, 42, .18);
    color: var(--bos-help-text);
    display: flex;
    gap: .75rem;
    left: 50%;
    max-width: calc(100vw - 2rem);
    padding: .45rem .55rem .45rem .85rem;
    position: fixed;
    top: 1rem;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1102;
}

.bos-help-selection-bar[hidden] {
    display: none !important;
}

[data-help-selection-label]::after {
    content: attr(data-help-selection-label);
}

[data-help-selection-label]::after {
    background: var(--bos-help-accent);
    border-radius: .35rem;
    color: #ffffff;
    font-size: .7rem;
    font-weight: 700;
    margin-left: .35rem;
    padding: .12rem .3rem;
    vertical-align: middle;
}

@media (max-width: 760px) {
    .bos-help-launch {
        height: 2.75rem;
        min-width: 2.75rem;
        padding: 0 .65rem;
    }

    .bos-help-launch-text {
        display: none;
    }

    .bos-help-panel {
        border-left: 0;
        border-radius: .875rem .875rem 0 0;
        bottom: 0;
        height: min(76dvh, 42rem);
        max-width: 100vw;
        right: 0;
        top: auto;
        width: 100vw;
    }

    .bos-help-panel.bos-help-panel-compact {
        bottom: 0;
        height: min(48dvh, 26rem);
        right: 0;
        top: auto;
    }

    .bos-help-selection-bar {
        border-radius: .75rem;
        flex-wrap: wrap;
        justify-content: center;
        top: .75rem;
        white-space: normal;
        width: calc(100vw - 1rem);
    }

    .bos-help-panel-header,
    .bos-help-panel-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bos-help-launch,
    .bos-help-spotlight {
        transition: none;
    }
}