/* ============================================================
   GesTask — Barra superiore
   Navigazione, azioni di intestazione, ricerca, notifiche e piede.
   ============================================================

   La barra era scura in entrambi i temi: un nastro slate-900 sopra una
   pagina avorio. Ora è una superficie come le altre e segue il tema, che è
   il comportamento del guscio Prime — in chiaro una striscia chiara con un
   bordo netto, in scuro la stessa cosa un gradino sopra al fondo. La
   conseguenza pratica è che le azioni dentro la barra usano i colori di
   testo dell'applicazione invece di una palette bianca a parte, e restano
   leggibili in tutti e due i temi senza doppia dichiarazione. */

.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-color: var(--p-header-color);
    --bs-navbar-hover-color: var(--p-header-hover-color);
    --bs-navbar-active-color: var(--p-header-active-color);
    background: var(--p-header-background) !important;
    border-bottom: 1px solid var(--p-header-border-color);
    min-height: var(--p-header-height);
}

/* La sfocatura dietro la barra serve solo dove il contenuto ci scorre
   sotto; senza il supporto, il colore quasi pieno di sopra basta da solo. */
@supports (backdrop-filter: blur(1px)) {
    .navbar {
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
    }
}

.navbar > .container,
.navbar > .container-fluid {
    align-items: center;
    column-gap: .75rem;
    min-height: var(--p-header-height);
}

.navbar-brand {
    align-items: center;
    color: var(--p-header-brand-color);
    display: inline-flex;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    margin-right: 0;
    padding: 0;
}

.navbar-brand:hover { color: var(--p-header-brand-color); }

.navbar-nav .nav-link {
    border-radius: var(--p-navigation-item-border-radius);
    font-size: var(--p-font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    padding: .375rem .625rem;
    transition: background-color var(--p-transition-fast), color var(--p-transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
    background: var(--p-header-hover-background);
    color: var(--p-header-hover-color);
}

.navbar-nav .nav-link.active {
    background: var(--p-header-active-background);
    color: var(--p-header-active-color);
}

.navbar-toggler {
    border-color: var(--p-header-border-color);
    border-radius: var(--p-border-radius-md);
    color: var(--p-header-color);
    line-height: 1;
    padding: .3125rem .5rem;
}

.navbar-toggler:focus { box-shadow: var(--p-focus-ring-shadow); }

/* L'icona a tre righe di Bootstrap è un SVG usato come immagine di sfondo,
   con il colore scritto dentro l'immagine: non eredita `color`, e con tre
   palette e due temi servirebbero sei copie della stessa immagine.
   Diventa invece una maschera: la forma ritaglia un riempimento del colore
   corrente, quindi segue il token della barra da sola. */
.navbar-toggler-icon {
    background-color: currentColor;
    background-image: none;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 100% no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ── Azioni di intestazione ─────────────────────────────────────── */

.gestask-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .375rem;
}

.gestask-header-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--p-border-radius-md);
    color: var(--p-header-color);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.0625rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: relative;
    transition: background-color var(--p-transition-fast), border-color var(--p-transition-fast), color var(--p-transition-fast);
    width: 2.25rem;
}

.gestask-header-btn:hover,
.gestask-header-btn[aria-expanded='true'] {
    background: var(--p-header-hover-background);
    color: var(--p-header-hover-color);
}

.gestask-header-btn:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
    outline-offset: var(--p-focus-ring-offset);
}

.gestask-header-btn i { line-height: 1; }

/* Il bordo del colore della barra stacca il contatore dall'icona sotto. */
.gestask-notification-badge {
    background: var(--p-danger-color);
    border: 2px solid var(--p-header-badge-ring);
    border-radius: var(--p-border-radius-full);
    color: var(--p-danger-contrast-color);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.125rem;
    padding: .1875rem .1875rem;
    position: absolute;
    right: -.1875rem;
    text-align: center;
    top: -.1875rem;
}

/* ── Scelta della palette ───────────────────────────────────────── */

.gt-palette-popover {
    /* Il pannello non eredita i colori della barra: è una sovrapposizione
       sopra il contenuto, e con la palette storica la barra è scura mentre
       il contenuto sotto è avorio. Prende quindi i token delle
       sovrapposizioni, come ogni altro pannello dell'applicazione. */
    color: var(--p-overlay-color);
    padding: .75rem;
    width: 20rem;
}

.gt-palette-popover-title {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .05em;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}

/* Sei vesti stanno in poco più di trecento pixel, ma su un portatile basso
   o su un telefono in orizzontale il pannello uscirebbe dallo schermo:
   oltre la soglia l'elenco scorre da sé, e la testata con il titolo resta
   ferma sopra. */
.gt-palette-options {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: min(60vh, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gt-palette-option {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--p-border-radius-lg);
    color: var(--p-overlay-color);
    cursor: pointer;
    display: flex;
    gap: .625rem;
    padding: .5rem .625rem;
    text-align: left;
    transition:
        background-color var(--p-transition-fast),
        border-color var(--p-transition-fast);
    width: 100%;
}

.gt-palette-option:hover { background: var(--p-list-option-focus-background); }

.gt-palette-option:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
    outline-offset: -1px;
}

.gt-palette-option.is-active {
    background: var(--p-list-option-selected-background);
    border-color: var(--p-primary-border-color);
}

/* L'anteprima: tre quadratini accostati che mostrano fondo, superficie e
   accento della palette. I bordi arrotondati solo agli estremi li fanno
   leggere come un unico campione invece che come tre pallini. */
.gt-palette-swatches {
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-sm);
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
}

.gt-palette-swatch {
    display: block;
    height: 1.75rem;
    width: .875rem;
}

.gt-palette-option-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.gt-palette-option-name {
    font-weight: 600;
    line-height: 1.2;
}

.gt-palette-option-desc {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    line-height: 1.3;
}

/* Il segno di spunta occupa il proprio spazio anche quando è invisibile:
   comparendo dal nulla allargherebbe la riga e sposterebbe il testo. */
.gt-palette-check {
    color: var(--p-primary-color);
    flex-shrink: 0;
    opacity: 0;
}

.gt-palette-option.is-active .gt-palette-check { opacity: 1; }

/* L'intestazione di gruppo: la prima non ha margine sopra, le altre sì —
   servono a staccare i gruppi fra loro, non a spingere in basso il primo. */
.gt-palette-group {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    margin: .625rem 0 .25rem;
    padding-left: .625rem;
    text-transform: uppercase;
}

.gt-palette-group:first-child { margin-top: 0; }

/* ── Colori distinguibili ───────────────────────────────────────── */

.gt-palette-safe-row {
    border-top: 1px solid var(--p-content-border-color);
    margin-top: .625rem;
    padding-top: .625rem;
}

.gt-palette-safe {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: .625rem;
    padding: .375rem .625rem;
}

.gt-palette-safe .p-toggleswitch { flex-shrink: 0; margin-top: .125rem; }

.gt-palette-popover-note {
    border-top: 1px solid var(--p-content-border-color);
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    line-height: 1.4;
    margin: .625rem 0 0;
    padding-top: .5rem;
}

@media (min-width: 768px) {
    .navbar-nav { align-items: center; column-gap: .125rem; }
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        padding: .625rem 0;
        text-align: left;
        width: 100%;
    }

    /* Nel pannello a scomparsa le azioni restano su una riga, larga quanto
       il pannello, separate da una linea dalle voci di navigazione. */
    .gestask-header-actions {
        border-top: 1px solid var(--p-content-border-color);
        margin-top: .5rem;
        padding-top: .75rem;
        width: 100%;
    }

    .navbar-collapse {
        background: var(--p-header-background);
        border-bottom: 1px solid var(--p-header-border-color);
        margin: 0 -.75rem;
        padding: .5rem .75rem .75rem;
    }
}

/* ============================================================
   Piede
   ============================================================ */

#footer {
    background: var(--p-content-background) !important;
    border-top: 1px solid var(--p-content-border-color);
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
}

.footer-version-link {
    color: var(--p-primary-color);
    font-weight: 600;
    text-decoration: none;
}

.footer-version-link:hover { text-decoration: underline; }

.footer-logo-dark { display: none; }
[data-bs-theme='dark'] .footer-logo-light { display: none; }
[data-bs-theme='dark'] .footer-logo-dark  { display: inline-block; }

/* ============================================================
   Ricerca
   ============================================================ */

/* Il grilletto della ricerca è un campo finto: ha l'aspetto di un campo di
   modulo perché è così che si legge «qui si scrive», ma è un collegamento,
   così senza JavaScript porta comunque alla pagina di ricerca. */
.gestask-search-trigger {
    align-items: center;
    background: var(--p-header-field-background);
    border: 1px solid var(--p-header-field-border);
    border-radius: var(--p-border-radius-lg);
    color: var(--p-header-color);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--p-font-size-sm);
    gap: .5rem;
    height: 2.25rem;
    line-height: 1;
    min-width: 14rem;
    padding: 0 .4375rem 0 .6875rem;
    text-decoration: none;
    transition: background-color var(--p-transition-fast), border-color var(--p-transition-fast), color var(--p-transition-fast);
}

.gestask-search-trigger:hover {
    background: var(--p-header-hover-background);
    color: var(--p-header-hover-color);
}

.gestask-search-trigger:focus-visible {
    border-color: var(--p-form-field-focus-border-color);
    box-shadow: var(--p-focus-ring-shadow);
    outline: none;
}

.gestask-search-trigger i { font-size: 1rem; line-height: 1; opacity: .8; }
.gestask-search-trigger-text { flex: 1 1 auto; text-align: left; }

/* Spinta a destra dal margine automatico: la scorciatoia resta ancorata al
   bordo del campo qualunque sia la larghezza. Il fondo è un velo del colore
   corrente e non una superficie: così resta leggibile sia su una barra
   chiara sia su una scura, senza un token in più. */
.gestask-search-trigger-kbd {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-radius: var(--p-border-radius-xs);
    color: inherit;
    font-size: .6875rem;
    letter-spacing: .02em;
    margin-left: auto;
    padding: .1875rem .3125rem;
}

@media (max-width: 991.98px) {
    .gestask-search-trigger-text,
    .gestask-search-trigger-kbd { display: none; }
    .gestask-search-trigger {
        justify-content: center;
        min-width: 0;
        padding: 0;
        width: 2.25rem;
    }
}

@media (max-width: 767.98px) {
    /* Nel pannello a scomparsa la ricerca occupa lo spazio libero. */
    .gestask-search-trigger {
        flex: 1 1 auto;
        justify-content: flex-start;
        padding-left: .6875rem;
        width: auto;
    }
    .gestask-search-trigger-text { display: inline; }
}

/* ── Sovrapposizione di ricerca ─────────────────────────────────── */

body.gestask-search-open { overflow: hidden; }

.gestask-search-overlay {
    inset: 0;
    position: fixed;
    z-index: 1350;
}

.gestask-search-overlay[hidden] { display: none; }

.gestask-search-backdrop {
    background: var(--p-mask-background);
    inset: 0;
    position: absolute;
}

@supports (backdrop-filter: blur(1px)) {
    .gestask-search-backdrop { backdrop-filter: blur(4px); }
}

.gestask-search-panel {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-shadow-xl);
    display: flex;
    flex-direction: column;
    margin: 9vh auto 0;
    max-height: 78vh;
    max-width: 680px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    transform: translateY(-12px);
    transition: opacity var(--p-transition-duration) ease, transform var(--p-transition-duration) ease;
    width: calc(100% - 2rem);
}

.gestask-search-overlay.is-visible .gestask-search-panel { opacity: 1; transform: translateY(0); }

.gestask-search-field {
    align-items: center;
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .625rem;
    padding: .875rem 1rem;
}

.gestask-search-field-icon { color: var(--p-primary-color); font-size: 1.125rem; line-height: 1; }

.gestask-search-input {
    background: transparent;
    border: 0;
    color: var(--p-text-color);
    flex: 1;
    font-family: inherit;
    font-size: 1.0625rem;
    min-width: 0;
    outline: none;
    padding: .125rem 0;
}

.gestask-search-input::placeholder { color: var(--p-form-field-placeholder-color); }

.gestask-search-reset,
.gestask-search-esc {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-sm);
    color: var(--p-text-muted-color);
    cursor: pointer;
    line-height: 1;
    padding: .25rem .4375rem;
}

.gestask-search-reset:hover,
.gestask-search-esc:hover { color: var(--p-text-color); }

.gestask-search-esc { font-size: .6875rem; text-transform: uppercase; }

.gestask-search-results {
    display: grid;
    gap: .125rem;
    overflow-y: auto;
    padding: .5rem;
}

.gestask-search-results.is-loading { opacity: .55; }

.gestask-search-item {
    align-items: flex-start;
    border-radius: var(--p-list-option-border-radius);
    color: inherit;
    display: flex;
    gap: .6875rem;
    padding: .5625rem .625rem;
    text-decoration: none;
}

.gestask-search-item.is-active { background: var(--p-list-option-focus-background); }

.gestask-search-item-icon {
    align-items: center;
    background: var(--p-primary-subtle-color);
    border-radius: var(--p-border-radius-md);
    color: var(--p-primary-color);
    display: flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.gestask-search-item-icon i { line-height: 1; }

/* Senza `min-width: 0` il figlio flessibile non si accorcia sotto la
   larghezza del proprio contenuto e l'ellissi non scatta mai. */
.gestask-search-item-main { display: grid; gap: .0625rem; min-width: 0; }

.gestask-search-item-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gestask-search-item-body {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--p-text-muted-color);
    display: -webkit-box;
    font-size: var(--p-font-size-sm);
    overflow: hidden;
}

.gestask-search-item-meta { color: var(--p-text-muted-color); font-size: var(--p-font-size-xs); }

.gestask-search-item mark {
    background: var(--p-warn-subtle-color);
    border-radius: var(--p-border-radius-xs);
    color: var(--p-warn-emphasis-color);
    padding: 0 .1em;
}

.gestask-search-all .gestask-search-item-title { color: var(--p-primary-color); font-weight: 500; }

.gestask-search-message {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size);
    padding: 1.75rem 1rem;
    text-align: center;
}

.gestask-search-foot {
    border-top: 1px solid var(--p-content-border-color);
    color: var(--p-text-muted-color);
    display: flex;
    font-size: var(--p-font-size-xs);
    gap: 1rem;
    padding: .5rem 1rem;
}

.gestask-search-foot kbd {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-xs);
    color: inherit;
    font-family: inherit;
    font-size: .6875rem;
    padding: .125rem .3125rem;
}

@media (max-width: 575.98px) {
    .gestask-search-panel {
        border: 0;
        border-radius: 0;
        height: 100dvh;
        margin: 0;
        max-height: none;
        width: 100%;
    }
    .gestask-search-results { flex: 1; }
    .gestask-search-field { padding: .75rem .8rem; }
    .gestask-search-item { padding: .6875rem .625rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gestask-search-panel { transition: none; }
}

/* ============================================================
   Notifiche
   ============================================================ */

.gestask-notification-dropdown {
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-overlay-shadow);
    min-width: min(380px, calc(100vw - 1.5rem));
    overflow: hidden;
    padding: 0;
}

.gestask-notification-head {
    align-items: center;
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    justify-content: space-between;
    padding: .75rem .9375rem;
}

.gestask-notification-list {
    max-height: 380px;
    overflow-y: auto;
}

.gestask-notification-item {
    border-bottom: 1px solid var(--p-content-border-color);
    border-radius: 0;
    display: grid;
    gap: .125rem;
    padding: .75rem .9375rem;
    white-space: normal;
}

.gestask-notification-item:last-child { border-bottom: 0; }

/* La barretta accentata segnala il non letto senza schiarire lo sfondo,
   che in tema scuro rendeva la riga meno leggibile delle altre. */
.gestask-notification-item.unread {
    box-shadow: inset 3px 0 0 var(--p-primary-color);
}

.gestask-notification-title { font-weight: 700; line-height: 1.25; }

.gestask-notification-body {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    line-height: 1.35;
}

.gestask-notification-time,
.gestask-notification-empty {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
}

.gestask-notification-empty { padding: 1.5rem 1rem; text-align: center; }