/* ============================================================
   GesTask — Adattamento agli schermi
   Riscritture per tablet e telefono dei componenti definiti sopra.
   ============================================================ */

@media (max-width: 991.98px) {
    .board-view-header,
    .board-compact-row {
        align-items: stretch;
        flex-direction: column;
    }
    .board-tool-grid { grid-template-columns: 1fr; }
    .board-tools-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .board-tools-nav {
        border-bottom: 1px solid var(--gt-border);
        border-right: 0;
        flex-direction: row;
        overflow-x: auto;
        padding: .5rem;
    }
    .board-tools-nav-item { white-space: nowrap; width: auto; }
    .gt-gantt-label { flex: 0 0 140px; }
    .gt-gantt-header-labels { flex: 0 0 140px; }
    .board-row-actions { justify-content: flex-start; }
}

/* Il modulo e l'elenco accanto stanno larghi la meta ciascuno: sotto questa
   soglia — un iPad in orizzontale, per dire — restavano poco piu di 300px per
   parte, e i campi del filtro finivano tutti incolonnati. Impilati, il modulo
   prende l'intera larghezza del pannello e mostra tre campi per riga. */
@media (max-width: 1399.98px) {
    #filters-panel .board-tool-grid,
    #views-panel .board-tool-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .home-panel, .workspace-toolbar { align-items: stretch; flex-direction: column; }
}

@media (max-width: 575.98px) {
    /* Sul telefono gli strumenti non hanno un'altezza propria: riempiono la
       finestra, che si ferma allo schermo, e scorre solo la sezione attiva.
       Con le altezze in vh del desktop il corpo sfondava la finestra e la
       parte bassa restava irraggiungibile. */
    .board-tools-modal .modal-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }
    .board-tools-layout {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }
    .board-tools-content { overscroll-behavior: contain; padding: 1rem; }
    .board-tools-modal .modal-header { flex-wrap: wrap; }
}

/* ============================================================
   Mobile / Tablet Usability
   ============================================================ */
@media (max-width: 1199.98px) {
    main > .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .board-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .app-aside {
        flex-basis: var(--gt-aside-width-collapsed);
    }

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

    .app-aside-link {
        justify-content: center;
        min-height: 44px;
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .app-aside-toggle {
        display: none;
    }

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

    .workspace-toolbar,
    .team-heading,
    .board-view-header,
    .board-compact-row {
        align-items: stretch;
        flex-direction: column;
    }

    .home-actions,
    .task-actions,
    .board-row-actions {
        justify-content: flex-start;
    }

    .board-table-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .board-table-view table {
        min-width: 760px;
    }
}

@media (max-width: 767.98px) {
    html,
    body {
        min-height: 100dvh;
        overflow-x: hidden;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    main > .container {
        padding: calc(var(--gt-header-height) + .75rem + env(safe-area-inset-top)) .875rem 1rem;
    }

    main > .w-100 {
        padding-top: calc(var(--gt-header-height) + env(safe-area-inset-top));
    }

    .navbar-brand-text {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* La navbar non ha piu padding verticale: il respiro sotto al pannello
       aperto lo mette il pannello stesso. */
    .navbar-collapse {
        background: var(--p-content-background);
        border-radius: 0 0 .75rem .75rem;
        margin: 0 -.75rem .75rem;
        padding: .75rem;
    }

    .app-shell {
        display: block;
        min-height: auto;
        overflow: visible;
    }

    /* Sotto l'header la barra laterale diventa una striscia orizzontale
       scorrevole. Tutte le regole di questo stato stanno qui: prima erano
       divise fra tre blocchi @media che si contraddicevano, e il risultato era
       il collegamento di uscita relegato su una riga a se. */
    .app-aside {
        border-bottom: 1px solid var(--gt-border);
        border-right: 0;
        height: auto;
        margin-top: var(--gt-header-height);
        min-height: auto;
        position: sticky;
        top: var(--gt-header-height);
        width: 100%;
        z-index: 1000;
    }

    /* Sfumatura sul bordo: dice che la striscia continua oltre lo schermo,
       cosa che una barra di scorrimento nascosta da sola non comunica. */
    .app-aside::after {
        background: linear-gradient(90deg, transparent, var(--gt-surface));
        content: '';
        inset: 0 0 0 auto;
        pointer-events: none;
        position: absolute;
        width: 1.75rem;
    }

    .app-aside-inner {
        align-items: center;
        display: flex;
        /* La regola base impila in colonna: senza questo ribaltamento il
           collegamento di uscita finisce su una riga tutta sua. */
        flex-direction: row;
        gap: .4rem;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .5rem .75rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .app-aside-inner::-webkit-scrollbar {
        display: none;
    }

    .app-aside-header {
        display: none;
    }

    .app-aside-nav {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        gap: .4rem;
        min-width: max-content;
    }

    /* Il piede in colonna è la disposizione della barra verticale: qui
       impilerebbe novità e uscita una sopra l'altra dentro una striscia
       orizzontale. Il separatore diventa un filo a sinistra. Il rosso resta
       solo all'uscita, che lo ha già dalla propria classe: dato a tutto il
       piede tingeva anche le novità, che non sono un'azione distruttiva. */
    .app-aside-footer {
        border-left: 1px solid var(--gt-border);
        border-top: 0;
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        gap: .4rem;
        margin-top: 0;
        padding-left: .4rem;
        padding-top: 0;
    }

    .app-aside-version { margin-left: .15rem; max-width: none; }
    .app-aside-badge,
    .app-aside-collapsed .app-aside-badge { margin-left: .15rem; position: static; }

    /* Le etichette sono tagliate dall'overflow che serve all'animazione di
       chiusura: qui non c'è chiusura, e senza questo l'ultima lettera di
       ogni voce spariva sotto il bordo. */
    .app-aside-link,
    .app-aside-label { flex-shrink: 0; }

    .app-aside-label { overflow: visible; }

    /* Il menu compresso e una preferenza da schermo largo: qui la striscia
       resta sempre intera, altrimenti sarebbe un nastro vuoto. */
    .app-aside-collapsed .app-aside-nav,
    .app-aside-collapsed .app-aside-footer {
        display: flex;
    }

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

    .app-aside-link,
    .app-aside-collapsed .app-aside-link {
        border: 1px solid transparent;
        gap: .45rem;
        justify-content: center;
        min-height: 44px;
        padding: .5rem .8rem;
        white-space: nowrap;
    }

    .app-aside-link.active,
    .app-aside-link[aria-current="page"] {
        border-color: var(--p-primary-border-color);
    }

    .app-aside-link.active::before,
    .app-aside-link[aria-current="page"]::before {
        display: none;
    }

    .home-panel,
    .workspace-toolbar {
        gap: 1rem;
        padding: 1rem;
    }

    .home-panel h1,
    .workspace-toolbar h1 {
        font-size: 1.45rem;
        letter-spacing: 0;
    }

    .home-actions,
    .task-actions,
    .board-row-actions,
    .board-view-tabs {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .home-actions .btn,
    .task-actions .btn,
    .board-row-actions .btn,
    .board-view-tabs .btn,
    .board-view-tabs .nav-link {
        justify-content: center;
        width: 100%;
    }

    .board-grid {
        grid-template-columns: 1fr;
    }

    .board-create-task {
        border-left: 0;
        border-radius: var(--p-border-radius-lg);
        border-right: 0;
        margin-left: -.875rem;
        margin-right: -.875rem;
        padding-left: .875rem;
        padding-right: .875rem;
    }

    .board-tools-content { padding: .875rem; }

    .board-state-row { flex-wrap: wrap; }
    .board-state-form { flex: 1 1 100%; }

    .kanban-board {
        /* Su schermo stretto la colonna parte piu larga: si vede una colonna
           alla volta, e stringerla lascerebbe solo bordi. Resta comunque una
           predefinita, quindi la misura scelta col cursore la sostituisce. */
        --kanban-col-width: 340px;
        display: flex;
        gap: .75rem;
        margin-left: -.875rem;
        margin-right: -.875rem;
        overflow-x: auto;
        padding-left: .875rem;
        padding-right: .875rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* Il selettore nomina anche la bacheca perche la regola di base
       (.kanban-board > .board-column) va superata in specificita, non solo in
       ordine di caricamento. */
    .kanban-board > .board-column {
        flex: 0 0 min(86vw, var(--kanban-col-width, 340px));
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Bacheca impilata: niente scorrimento laterale, quindi niente aggancio ne
       sconfinamento oltre i margini del contenitore. */
    .kanban-board.kanban-board-vertical {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
        padding-left: 0;
        padding-right: 0;
        scroll-snap-type: none;
    }

    .kanban-board.kanban-board-vertical > .board-column {
        flex: 1 1 auto;
        scroll-snap-align: none;
        width: 100%;
    }

    .task-card .card-body {
        padding: .85rem;
    }

    .task-meta {
        align-items: flex-start;
        gap: .4rem;
    }

    /* La riga della Lista qui è già una fila flessibile, disposta in
       `board.css` sotto i 992 punti: le colonne e il blocco laterale che
       stavano qui non esistono più. */
    .board-list-row .task-assignees-names { max-width: 8rem; }

    .board-calendar-view {
        grid-template-columns: 1fr;
    }

    .gt-gantt {
        margin-left: -.875rem;
        margin-right: -.875rem;
        border-radius: 0;
    }

    .gt-gantt-label,
    .gt-gantt-header-labels {
        flex-basis: 120px;
    }
}

@media (max-width: 479.98px) {
    main > .container {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .kanban-board > .board-column {
        flex-basis: 88vw;
    }

    .kanban-board.kanban-board-vertical > .board-column {
        flex-basis: auto;
    }

    .board-create-task,
    .board-tools,
    .kanban-board,
    .gt-gantt {
        margin-left: -.75rem;
        margin-right: -.75rem;
    }

    .kanban-board,
    .board-tools-content,
    .board-tools-head,
    .board-tools-tabs,
    .board-create-task {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}
@media (max-width: 767.98px) {
    .gestask-notification-dropdown {
        min-width: min(320px, calc(100vw - 2rem));
    }

    /* I collegamenti del piede sono testo piccolo: senza un po' di spazio
       verticale proprio restano un bersaglio da pochi pixel. */
    #footer .row > div + div { margin-top: .6rem; }
    #footer a {
        display: inline-block;
        padding: .2rem 0;
    }

    /* La versione è una pill: la regola qui sopra, più specifica della sua
       classe, le toglieva il margine interno laterale e il testo toccava i
       bordi del fondo colorato. */
    #footer a.footer-version-link {
        line-height: 1.2;
        padding: .2rem .5rem;
        vertical-align: middle;
    }

    /* Le schede del profilo scorrono in orizzontale: la sfumatura dice che
       oltre il bordo ce ne sono altre. */
    .profile-section-switch {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
    }

    .gt-avatar-btn { min-height: 40px; }
}

/* ── Indice delle bacheche ──────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* La barra strumenti passa a due file: ricerca in alto a piena larghezza,
       controlli sotto. Su una riga sola il campo si riduce a pochi caratteri. */
    .gt-board-search { flex: 1 1 100%; }
}

@media (max-width: 767.98px) {
    .gt-boards-grid { gap: .75rem; grid-template-columns: 1fr 1fr; padding: 1rem; }

    .gt-team-section-head { align-items: flex-start; flex-direction: column; }
    .gt-create-board-form { width: 100%; }
    .gt-create-board-input { max-width: 100%; min-width: 0; width: 100%; }

    .gt-board-toolbar { align-items: stretch; flex-direction: column; }
    .gt-board-density .btn { flex: 1 1 0; }

    /* Senza puntatore non esiste il passaggio del mouse: le azioni della card
       devono essere visibili da subito, non rivelate. */
    .gt-board-card-tools { opacity: 1; }
    .gt-card-tool { height: 2.25rem; width: 2.25rem; }

    /* La riga a cinque colonne non ci sta. Impilare tutto come nella griglia
       dava pero una card intera per riga, piu ingombrante della griglia a due
       colonne: l'elenco sembrava la vista larga e la griglia quella compatta.
       Qui l'elenco resta una riga stretta: titolo e numeri a sinistra, azioni
       a destra. Barra di avanzamento e volti restano alla griglia, i numeri
       delle task sono gia nelle statistiche. */
    .board-index.is-list-density .gt-board-card-body {
        align-items: center;
        gap: .2rem .75rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        padding: .55rem .75rem;
    }

    .board-index.is-list-density .gt-board-card-icon,
    .board-index.is-list-density .gt-board-progress-row,
    .board-index.is-list-density .gt-board-card-foot { display: none; }

    /* Le celle sono nominate una per una, come nelle soglie più larghe di
       `board.css`: il contenitore degli strumenti sparisce (display: contents)
       e senza una posizione propria i suoi pulsanti finivano nella prima cella
       libera, spingendo il titolo a destra. */
    .board-index.is-list-density .gt-board-card-head { grid-area: 1 / 1 / 2 / 2; }
    .board-index.is-list-density .gt-board-card-tools { grid-area: 1 / 2 / -1 / 3; }

    .board-index.is-list-density .gt-board-card-stats {
        grid-area: 2 / 1 / 3 / 2;
        justify-content: flex-start;
    }

    .board-index.is-list-density .gt-board-card-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .board-index.is-list-density .gt-board-card-team { margin: 0; }
    .board-index.is-list-density .gt-board-card-chips { margin-bottom: 0 !important; }
}

@media (max-width: 479.98px) {
    .gt-boards-grid { grid-template-columns: 1fr; }
}