/* The activity feed (grouped by day, then by hour), and the home's layout on larger screens. */

.fil { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }

.fil__outils {
    display: grid;
    gap: var(--space-3);
}

.fil__ecrire { justify-self: start; }

.fil__jours {
    display: grid;
    gap: var(--space-6);
}

.fil__jour {
    display: grid;
    gap: var(--space-3);
}

.fil__jour-titre {
    position: sticky;
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    z-index: var(--z-raise);
    padding: var(--space-2) 0;
    background: var(--bg);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-snug);
}

.fil__heures {
    display: grid;
    gap: var(--space-4);
}

.fil__heure {
    display: grid;
    gap: var(--space-2);
}

.fil__heure--nouvelle { animation: apparition var(--dur-slow) var(--ease-out); }

.fil__repere {
    color: var(--text-mute);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
}

.fil__elements {
    display: grid;
    overflow: hidden;
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xs);
}

.fil__element + .fil__element { border-top: var(--border-width) solid var(--border-subtle); }
.fil__element--nouveau { animation: descente var(--dur-slow) var(--ease-out); }

.fil__lien {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-4);
    transition: background-color var(--dur-fast) var(--ease);
}

.fil__lien[href]:hover { background: var(--paper-soft); }

.fil__icone {
    display: grid;
    width: var(--space-8);
    height: var(--space-8);
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--ink-100);
    color: var(--text-dim);
}

.fil__element--info .fil__icone { background: var(--ink-100); color: var(--text-dim); }
.fil__element--succes .fil__icone { background: var(--success-bg); color: var(--success-text); }
.fil__element--alerte .fil__icone { background: var(--warning-bg); color: var(--warning-text); }
.fil__element--erreur .fil__icone { background: var(--error-bg); color: var(--error-text); }

.fil__corps {
    display: grid;
    gap: var(--space-px);
    min-width: 0;
}

.fil__titre {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.fil__detail { color: var(--text-dim); font-size: var(--text-sm); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.fil__agent { color: var(--text-mute); font-size: var(--text-xs); }
.fil__moment { color: var(--text-mute); font-size: var(--text-xs); line-height: var(--leading-loose); }
.fil__fleche { display: none; align-self: center; color: var(--text-mute); }

.fil__attente {
    display: grid;
    gap: var(--space-2);
}

.fil__bas { padding: var(--space-4) 0; }
.fil__fin { color: var(--text-mute); font-size: var(--text-sm); text-align: center; }
.fil__sentinelle { height: var(--space-px); }

@media (min-width: 768px) {
    .fil__outils {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .filtres { flex-wrap: wrap; min-width: 0; margin: 0; padding: 0; overflow: visible; }

    .fil__heure {
        grid-template-columns: var(--space-12) minmax(0, 1fr);
        gap: var(--space-4);
    }

    .fil__repere { padding-top: var(--space-4); text-align: right; }
    .fil__lien { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .fil__fleche { display: block; }

    .rappels { grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 1.4), 1fr)); }

    .rappel { grid-template-columns: auto minmax(0, 1fr) auto; }
    .rappel__action { grid-column: auto; }

    .sessions { grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 1.75), 1fr)); }
    .segments { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
    .segments__option { padding: 0 var(--space-3); }
}

@media (min-width: 1280px) {
    .accueil {
        grid-template-areas: "agents agents" "principal cote";
        grid-template-columns: minmax(0, 1fr) var(--aside-w);
        column-gap: var(--space-8);
    }

    .accueil--sans-cote {
        grid-template-areas: "agents" "principal";
        grid-template-columns: minmax(0, 1fr);
    }

    .accueil__agents { grid-area: agents; }
    .accueil__principal { grid-area: principal; }

    .accueil__cote {
        position: sticky;
        top: calc(var(--topbar-h) + var(--space-6));
        grid-area: cote;
        align-self: start;
    }

    .accueil__cote .rappels { grid-template-columns: minmax(0, 1fr); }
    .accueil__cote .rappel { grid-template-columns: auto minmax(0, 1fr); }
    .accueil__cote .rappel__action { grid-column: 1 / -1; }

    .agents {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-3);
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .agent {
        grid-template-areas: "icone puce" "nom nom" "quoi quoi" "temps temps";
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-1);
        min-height: calc(var(--space-24) * 2);
        align-content: start;
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-subtle);
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        box-shadow: var(--shadow-xs);
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out);
    }

    .agent + .agent { border-top: var(--border-width) solid var(--border-subtle); }
    .agent:hover { border-color: var(--border); background: var(--bg-elevated); box-shadow: var(--shadow-md); transform: translateY(calc(var(--space-px) * -2)); }
    .agent--direct { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-subtle)); }
    .agent__icone { align-self: start; margin-bottom: var(--space-2); }
    .agent__ligne { display: contents; }
    .agent__puce { justify-self: end; align-self: start; }

    .agent__quoi { min-height: calc(var(--text-sm) * var(--leading-base) * 2); }

    .agent__temps { justify-self: start; min-height: var(--space-4); margin-top: var(--space-1); }

    .squelette-vue__agents { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); border: 0; }
    .squelette--agent { height: calc(var(--space-24) * 2); border-radius: var(--radius-lg); }
}