/* ============================================================
   GesTask — Navigazione Prime
   Menu, briciole di pane, passi e barre di navigazione.
   ============================================================ */

/* ── Menu ───────────────────────────────────────────────────────── */

.p-menu {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-overlay-shadow);
    color: var(--p-overlay-color);
    min-width: 12rem;
    padding: var(--p-list-padding);
}

/* Il menu ancorato compare solo quando JavaScript gli mette la classe: lo
   stato di apertura non deve dipendere dal solo `:hover`, che su schermo
   tattile non esiste. */
.p-menu-overlay {
    display: none;
    position: absolute;
    z-index: 1200;
}

.p-menu-overlay.p-connected-overlay-visible {
    animation: p-slide-down var(--p-transition-duration) ease;
    display: block;
}

.p-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--p-list-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-menu-item-link {
    align-items: center;
    border-radius: var(--p-list-option-border-radius);
    color: var(--p-list-option-color);
    cursor: pointer;
    display: flex;
    gap: .625rem;
    padding: var(--p-list-option-padding);
    text-decoration: none;
    transition: background-color var(--p-transition-fast), color var(--p-transition-fast);
    width: 100%;
}

.p-menu-item-link:hover,
.p-menu-item-link:focus-visible {
    background: var(--p-list-option-focus-background);
    color: var(--p-content-hover-color);
    outline: none;
}

.p-menu-item-link.p-active {
    background: var(--p-list-option-selected-background);
    color: var(--p-list-option-selected-color);
    font-weight: 600;
}

.p-menu-item-icon {
    color: var(--p-list-option-icon-color);
    flex: 0 0 auto;
}

.p-menu-item-link:hover .p-menu-item-icon,
.p-menu-item-link.p-active .p-menu-item-icon { color: inherit; }

.p-menu-item-label { flex: 1 1 auto; }

/* La scorciatoia da tastiera è spinta a destra dal margine automatico: non
   serve una colonna, basta che sia l'ultimo elemento della riga. */
.p-menu-item-shortcut {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    margin-left: auto;
}

.p-menu-item-danger .p-menu-item-link { color: var(--p-danger-emphasis-color); }
.p-menu-item-danger .p-menu-item-link:hover { background: var(--p-danger-subtle-color); }

.p-menu-separator {
    border-top: 1px solid var(--p-content-border-color);
    margin: .25rem 0;
}

.p-menu-submenu-label {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    padding: .5rem .75rem .25rem;
    text-transform: uppercase;
}

/* ── Briciole di pane ───────────────────────────────────────────── */

.p-breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.p-breadcrumb-item {
    align-items: center;
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    gap: .375rem;
}

.p-breadcrumb-item a {
    border-radius: var(--p-border-radius-sm);
    color: var(--p-text-muted-color);
    text-decoration: none;
    transition: color var(--p-transition-fast);
}

.p-breadcrumb-item a:hover { color: var(--p-primary-color); }

.p-breadcrumb-item:last-child {
    color: var(--p-text-color);
    font-weight: 600;
}

/* Il separatore è generato, non scritto nel documento: una freccia fra le
   voci non è contenuto e i lettori di schermo non devono leggerla. */
.p-breadcrumb-item + .p-breadcrumb-item::before {
    color: var(--p-surface-400);
    content: '/';
    margin-right: .125rem;
}

/* ── Menu a linguette di navigazione ────────────────────────────── */

.p-tabmenu {
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0 0 1.25rem;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
}

.p-tabmenu::-webkit-scrollbar { display: none; }

.p-tabmenu-item a {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-weight: 600;
    gap: .5rem;
    margin-bottom: -1px;
    padding: .625rem .875rem;
    text-decoration: none;
    transition: color var(--p-transition-duration), border-color var(--p-transition-duration);
    white-space: nowrap;
}

.p-tabmenu-item a:hover { color: var(--p-text-color); }

.p-tabmenu-item-active a {
    border-bottom-color: var(--p-primary-color);
    color: var(--p-primary-color);
}

/* ── Passi ──────────────────────────────────────────────────────── */

.p-steps {
    display: flex;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.p-steps-item {
    flex: 1 1 0;
    position: relative;
    text-align: center;
}

/* La linea di collegamento parte dal centro del numero e arriva al centro
   del successivo: da qui il 50% di scostamento e la larghezza intera. */
.p-steps-item:not(:last-child)::after {
    background: var(--p-content-border-color);
    content: '';
    height: 2px;
    left: 50%;
    position: absolute;
    top: 1rem;
    width: 100%;
}

.p-steps-number {
    align-items: center;
    background: var(--p-content-background);
    border: 2px solid var(--p-content-border-color);
    border-radius: 50%;
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    position: relative;
    width: 2rem;
    z-index: 1;
}

.p-steps-title {
    color: var(--p-text-muted-color);
    display: block;
    font-size: var(--p-font-size-sm);
    margin-top: .375rem;
}

.p-steps-item-active .p-steps-number {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color);
}

.p-steps-item-active .p-steps-title { color: var(--p-text-color); font-weight: 600; }

.p-steps-item-complete .p-steps-number {
    background: var(--p-success-color);
    border-color: var(--p-success-color);
    color: var(--p-success-contrast-color);
}

.p-steps-item-complete:not(:last-child)::after { background: var(--p-success-color); }

/* ── Barra dei menu ─────────────────────────────────────────────── */

.p-menubar {
    align-items: center;
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    display: flex;
    gap: .25rem;
    padding: .375rem .5rem;
}

.p-menubar-root-list {
    align-items: center;
    display: flex;
    gap: .125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-menubar-item-link {
    align-items: center;
    border-radius: var(--p-navigation-item-border-radius);
    color: var(--p-navigation-item-color);
    display: inline-flex;
    font-weight: 500;
    gap: .5rem;
    padding: var(--p-navigation-item-padding);
    text-decoration: none;
    transition: background-color var(--p-transition-fast), color var(--p-transition-fast);
}

.p-menubar-item-link:hover {
    background: var(--p-navigation-item-hover-background);
    color: var(--p-navigation-item-hover-color);
}

.p-menubar-item-link.p-active {
    background: var(--p-navigation-item-active-background);
    color: var(--p-navigation-item-active-color);
}