/* Than-Server: barres amb vidre esmerilat (estil macOS) a la seccio de correu de Roundcube */
html {
    --than-barra: 58px;   /* alcada de les barres d eines */
    --than-cerca: 44px;   /* alcada de la barra de cerca */
    --than-peu: 35px;     /* alcada de les barres de baix */
    --than-vidre: rgba(255, 255, 255, .6);
    --than-blur: 8px;
}
html.dark-mode {
    --than-vidre: rgba(33, 41, 44, .6);
}

@media screen and (min-width: 769px) {
    /* Columnes amb barres flotants */
    body.task-mail #layout-sidebar,
    body.task-mail #layout-list,
    body.task-mail.action-none #layout-content,
    body.task-mail.action-show #layout-content {
        position: relative;
    }

    /* Barres flotants amb vidre */
    body.task-mail #layout-sidebar > .header,
    body.task-mail #layout-list > #messagelist-header,
    body.task-mail #layout-list > .searchbar,
    body.task-mail.action-none #layout-content > .header,
    body.task-mail.action-show #layout-content > .header {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 5;
        background-color: var(--than-vidre) !important;
        -webkit-backdrop-filter: blur(var(--than-blur));
        backdrop-filter: blur(var(--than-blur));
    }
    body.task-mail #layout-sidebar > .header,
    body.task-mail #layout-list > #messagelist-header,
    body.task-mail.action-none #layout-content > .header,
    body.task-mail.action-show #layout-content > .header {
        top: 0;
    }
    body.task-mail #layout-list > .searchbar {
        top: var(--than-barra);
    }

    /* Les llistes comencen sota les barres i hi passen per sota */
    body.task-mail #layout-sidebar > #folderlist-content {
        padding-top: var(--than-barra);
    }
    body.task-mail #layout-list > #messagelist-content {
        padding-top: calc(var(--than-barra) + var(--than-cerca));
    }
    /* Correu a pantalla completa */
    body.task-mail.action-show #layout-content > .frame-content {
        padding-top: var(--than-barra);
    }
}

/* Correu dins del marc: el text comenca sota la barra de la pagina principal */
body.task-mail.action-preview #layout-content > .frame-content {
    padding-top: var(--than-barra);
}
/* Barres de baix (carpetes i paginacio de la llista) amb el mateix vidre */
@media screen and (min-width: 769px) {
    body.task-mail #layout-sidebar > .footer,
    body.task-mail #layout-list > .pagenav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        background-color: var(--than-vidre) !important;
        -webkit-backdrop-filter: blur(var(--than-blur));
        backdrop-filter: blur(var(--than-blur));
    }
    body.task-mail #layout-sidebar > #folderlist-content,
    body.task-mail #layout-list > #messagelist-content {
        padding-bottom: var(--than-peu);
    }
}
/* El menu flotant de cada correu (bandera, paperera) es calcula respecte de la taula:
   el baixem el mateix marge que hem afegit a sobre de la llista */
@media screen and (min-width: 769px) {
    body.task-mail #messagelist-content > .listing-hover-menu {
        margin-top: calc(var(--than-barra) + var(--than-cerca));
    }
}