/* ============================================================
   GesTask — Impaginazione
   Guscio applicativo, barra laterale, area di lavoro e fasce introduttive.
   ============================================================ */

/* ── Guscio ─────────────────────────────────────────────────────── */

.app-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.gestask-home,
.board-index,
.board-view { width: 100%; }

/* ── Barra laterale ─────────────────────────────────────────────── */

.app-aside {
    background: var(--p-aside-background);
    border-right: 1px solid var(--p-content-border-color);
    flex: 0 0 var(--p-aside-width);
    height: calc(100% - var(--p-header-height));
    margin-top: var(--p-header-height);
    min-height: 0;
    position: sticky;
    top: var(--p-header-height);
    transition: flex-basis .22s ease-in-out;
    z-index: 1010;
}

.app-aside-inner {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem .75rem;
}

.app-aside-header {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .25rem;
    min-height: 2rem;
    transition: gap .22s ease-in-out;
}

.app-aside-title {
    color: var(--p-text-emphasis-color);
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.app-aside-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .125rem;
}

.app-aside-footer {
    border-top: 1px solid var(--p-content-border-color);
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding-top: .625rem;
}

/* La voce di navigazione è la stessa forma della voce di menu Prime, con in
   più il segno di posizione a sinistra. */
.app-aside-link {
    align-items: center;
    border-radius: var(--p-navigation-item-border-radius);
    color: var(--p-navigation-item-color);
    display: flex;
    font-size: var(--p-font-size-sm);
    font-weight: 500;
    gap: .6875rem;
    min-height: 2.375rem;
    padding: .5rem .625rem;
    position: relative;
    text-decoration: none;
    transition:
        background-color var(--p-transition-fast),
        color var(--p-transition-fast),
        gap .22s ease-in-out;
}

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

.app-aside-link:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
    outline-offset: -2px;
}

.app-aside-link.active,
.app-aside-link[aria-current='page'] {
    background: var(--p-navigation-item-active-background);
    color: var(--p-navigation-item-active-color);
    font-weight: 600;
}

/* Il segno di posizione: una barretta al bordo sinistro. Vale anche quando
   le etichette sono nascoste, che è il caso in cui serve di più. */
.app-aside-link.active::before,
.app-aside-link[aria-current='page']::before {
    background: var(--p-primary-color);
    border-radius: 0 3px 3px 0;
    content: '';
    height: 55%;
    left: 0;
    position: absolute;
    top: 22.5%;
    width: 3px;
}

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

.app-aside-icon {
    flex: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.app-aside-version {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    margin-left: auto;
}

/* Il pallino delle novità non lette: stesso significato del contatore delle
   notifiche, senza numero perché il numero non aggiungerebbe nulla. */
.app-aside-dot {
    background: var(--p-primary-color);
    border-radius: 50%;
    height: .5rem;
    margin-left: auto;
    width: .5rem;
}

/* Il numero delle task aperte: un'informazione, non un allarme, quindi il
   colore primario e non il rosso del contatore delle notifiche. */
.app-aside-badge {
    background: var(--p-primary-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-primary-contrast-color);
    flex: 0 0 auto;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    min-width: 1.125rem;
    padding: .1875rem .3rem;
    text-align: center;
}

/* ── Barra laterale compressa ───────────────────────────────────── */

/* Le etichette non spariscono con `display: none`: si restringono a zero,
   così la transizione ha qualcosa da animare. `overflow: hidden` sul
   contenitore impedisce al testo di traboccare durante la corsa. */
.app-aside-title,
.app-aside-label {
    max-width: 200px;
    opacity: 1;
    overflow: hidden;
    transition: opacity .22s ease-in-out, max-width .22s ease-in-out;
    white-space: nowrap;
}

.app-aside-collapsed .app-aside { flex-basis: var(--p-aside-width-collapsed); }

.app-aside-collapsed .app-aside-title,
.app-aside-collapsed .app-aside-label,
.app-aside-collapsed .app-aside-version {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

.app-aside-collapsed .app-aside-header { gap: 0; }
.app-aside-collapsed .app-aside-link { gap: 0; justify-content: center; }
.app-aside-collapsed .app-aside-dot {
    margin: 0;
    position: absolute;
    right: .375rem;
    top: .375rem;
}

.app-aside-collapsed .app-aside-badge {
    margin: 0;
    position: absolute;
    right: .125rem;
    top: .125rem;
}

/* ── Area di lavoro ─────────────────────────────────────────────── */

.app-main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    html,
    body {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    main,
    .app-main {
        overflow-x: hidden;
        overflow-y: visible;
    }

    .app-shell { display: block; flex: none; min-height: auto; overflow: visible; }
    #footer { margin-top: 0 !important; position: relative; }
}

/* ============================================================
   Fascia introduttiva
   ============================================================ */

.hero-banner {
    background: linear-gradient(135deg, var(--p-primary-600) 0%, var(--p-primary-500) 45%, var(--p-cyan-500) 100%);
    border-radius: var(--p-border-radius-2xl);
    position: relative;
}

.hero-lead { max-width: 520px; }

.hero-logo {
    height: 120px;
    opacity: .4;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Due aloni diagonali sopra il gradiente: danno profondità senza aggiungere
   un'immagine da scaricare. Non intercettano i clic. */
.hero-banner::before {
    background:
        radial-gradient(circle at 15% 85%, rgba(6, 182, 212, .32) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(165, 180, 252, .28) 0%, transparent 40%);
    border-radius: inherit;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

/* ── Schede di estensione ───────────────────────────────────────── */

.extension-card {
    transition: border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), transform var(--p-transition-duration);
}

.extension-card:hover {
    border-color: var(--p-primary-border-color);
    box-shadow: var(--p-shadow-md) !important;
    transform: translateY(-3px);
}

.extension-icon { font-size: 1.5rem; line-height: 1; }

/* ============================================================
   Area di lavoro
   ============================================================ */

.home-panel {
    align-items: flex-start;
    background: linear-gradient(135deg, var(--p-primary-subtle-color) 0%, transparent 70%);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1.75rem;
}

.home-panel h1,
.workspace-toolbar h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 0 0 .5rem;
}

.home-actions,
.task-meta,
.task-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.home-actions,
.task-meta { flex-wrap: wrap; }

.workspace-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.workspace-band {
    border-bottom: 1px solid var(--p-content-border-color);
    padding: 1.25rem 0;
}

.workspace-band h2,
.kanban-column h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.team-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}

/* ── Griglia delle bacheche ─────────────────────────────────────── */

.board-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.board-tile {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    color: var(--p-text-color);
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    min-height: 96px;
    padding: 1rem;
    text-decoration: none;
    transition:
        border-color var(--p-transition-duration),
        box-shadow var(--p-transition-duration),
        transform var(--p-transition-duration);
}

.board-tile:hover {
    border-color: var(--p-primary-border-color);
    box-shadow: var(--p-shadow-md);
    color: var(--p-text-color);
    transform: translateY(-2px);
}

.board-tile span { font-weight: 700; }

.board-tile small,
.empty-state p,
.task-card p { color: var(--p-text-muted-color); }

.empty-state {
    background: var(--p-content-alt-background);
    border: 1.5px dashed var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    padding: 1.5rem;
    text-align: center;
}