/*
 * L'accueil : ce qui tombe sur quelqu'un, d'où que ça vienne.
 *
 * Le jour, un verdict, quatre tuiles chiffrées, puis les cadres. Les cadres se rangent côte à
 * côte tant qu'il y a la place et s'empilent quand il n'y en a plus, dans l'ordre où les questions se posent : ce qui a
 * débordé, ce qui tombe aujourd'hui, la semaine, ce qui cesse de valoir. Cet ordre vaut aussi en
 * colonne unique — un retard est ce qu'on doit voir sans faire défiler.
 */

/*
 * L'accueil prend plus de large que les autres pages, et c'est le seul qui le fasse.
 *
 * La mesure du paquet est une largeur de LECTURE : au-delà, une ligne de texte devient trop longue
 * à suivre de l'œil, et l'on saute une ligne sur deux en revenant à la marge. Cette page ne se lit
 * pas ainsi — elle se parcourt en colonnes, et chaque ligne y tient en quelques mots. La brider
 * revenait à laisser un tiers de l'écran vide pendant qu'un cadre tronquait ses intitulés.
 *
 */
.app-main:has(.home-grid) {
    max-width: none;
}

/*
 * Les trois nombres. Assez grands pour se lire de loin, et sur une seule ligne : c'est une phrase
 * qu'on parcourt d'un regard, pas trois cases à comparer. Ils reviennent à la ligne sur un écran
 * étroit plutôt que de se tasser.
 */
.home-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-xs) var(--app-space-md);
    margin: 0 0 var(--app-space-md);
    font-size: var(--app-text-lg);
    color: var(--app-ink-muted);
}

/* Ce qui a débordé se distingue par la couleur, sans changer de taille : une taille différente
   ferait trois nombres qu'on ne compare plus. */
.home-counts [data-tone='danger'] {
    color: var(--app-danger, var(--app-ink));
    font-weight: var(--app-weight-semibold);
}

/*
 * Le cadre de ce qui est passé inaperçu arrive après la page, et prend toute la largeur au-dessus
 * des colonnes : ce sont trois phrases, pas une liste, et les ranger en colonne les ferait lire
 * comme un cadre de plus parmi quatre.
 *
 * Tant qu'il n'a rien, il ne prend pas de place. Un conteneur vide qui garderait sa marge
 * laisserait un trou au milieu de la page sans que rien ne l'explique — et ce trou serait là les
 * jours où il n'y a rien à dire, c'est-à-dire la plupart.
 */
turbo-frame#home-remarks:not(:has(.home-remarks)) {
    display: none;
}

.home-remarks {
    margin-bottom: var(--app-space-md);
}

.home-stack {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
}

/*
 * Les gestes de l'écran vide, côte à côte. Ils reviennent à la ligne plutôt que de se tasser :
 * un bouton dont l'intitulé se coupe cesse de dire ce qu'il fait, et c'est tout ce qu'on lui
 * demande sur une page qui n'a rien d'autre à lire.
 */
.home-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--app-space-sm);
    margin-top: var(--app-space-md);
}

.home-start .app-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-xs);
}

/* ═══ Une ligne ════════════════════════════════════════════════════════════════════════ */

.home-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-line {
    display: flex;
    align-items: flex-start;
    gap: var(--app-space-sm);
    padding: var(--app-space-xs) 0;
    border-radius: var(--app-radius-ui);
}

/* Le filet sépare, il n'encadre pas : il n'y en a donc pas au-dessus de la première ligne, où il
   ne séparerait de rien. */
.home-line + .home-line {
    border-top: 1px solid var(--app-line);
}

/*
 * Le dessin de la rubrique, et la case à cocher qui le remplace là où cocher a un sens. Les deux
 * occupent la même gouttière : sans largeur fixe, les intitulés d'un cadre à l'autre
 * commenceraient à des endroits différents selon que la ligne se coche ou non.
 */
.home-mark,
.home-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    /* La hauteur d'une ligne de texte, pour que le dessin tombe au milieu de l'intitulé qu'il
       accompagne. */
    height: 1.25rem;
    color: var(--app-ink-muted);
}

/* La case à cocher est un bouton d'envoi et doit pourtant se lire comme une case : ni fond, ni
   bordure, ni retrait. Ce qui reste est le dessin, et la cible qu'on vise sans la chercher. */
.home-check {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.home-check:hover {
    color: var(--app-accent);
}

/*
 * Ce qu'on lit et ce qu'on ouvre. Il prend toute la place qui reste, et ce qui déborde se coupe :
 * un titre de papier tient parfois en deux lignes, et deux lignes par entrée feraient un cadre
 * qu'on ne parcourt plus.
 */
/*
 * Ce qu'on lit et ce qu'on ouvre : l'intitulé, et ce qui le précise en dessous. En colonne et non
 * à la suite — mis à la suite quand la place le permettait, le nom du projet se retrouvait tantôt
 * au bout du titre, tantôt sous lui, selon la longueur de chacun. L'œil cherchait alors à chaque
 * ligne où la précision était passée.
 */
.home-link {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xs);
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.home-link:hover .home-what {
    text-decoration: underline;
}

/*
 * L'intitulé peut passer sur deux lignes, et se coupe au-delà. Sur une seule, un titre de papier
 * un peu long devenait « Le courrier du notai… » : on ne reconnaissait plus ce dont il s'agit, et
 * il fallait ouvrir la ligne pour le savoir — c'est-à-dire exactement ce que l'accueil doit
 * éviter. Deux lignes suffisent à nommer toute chose, et trois feraient un cadre qu'on parcourt.
 */
.home-what {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
}

/* Ce qui porte la chose, ce que sa date annonce, ce qu'elle réclame : en petit, à la suite du
   titre. Cela précise, cela ne se lit pas d'abord. */
.home-about {
    font-size: var(--app-text-xs);
    color: var(--app-ink-muted);
}

/* Le moment, en bout de ligne, sans retour à la ligne : une heure coupée en deux ne se lit plus. */
.home-when {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
}

.home-when[data-tone='danger'] {
    color: var(--app-danger, var(--app-ink));
    font-weight: var(--app-weight-semibold);
}

/* ═══ La semaine ═══════════════════════════════════════════════════════════════════════ */

.home-week {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-day + .home-day {
    border-top: 1px solid var(--app-line);
    padding-top: var(--app-space-sm);
}

/*
 * Un jour vide s'écrit quand même, en retrait : une semaine à qui il manque trois jours ne se lit
 * plus comme une semaine. Il s'efface sans disparaître — c'est ce qui permet de le voir comme un
 * creux, et non comme un oubli d'affichage.
 */
.home-day[data-quiet] {
    opacity: 0.55;
}

.home-date {
    display: flex;
    align-items: baseline;
    gap: var(--app-space-2xs);
    font-size: var(--app-text-sm);
    font-weight: var(--app-weight-semibold);
    color: var(--app-ink-muted);
}

/* ═══ La charpente du tableau de bord ═══════════════════════════════════════════════════ */

/* Le jour, en tête : le repère de tout ce qui suit, à la taille du mois sur le budget. */
.home-today {
    margin: 0;
    font-size: var(--app-text-2xl);
    font-weight: var(--app-weight-bold);
}

.home-today::first-letter {
    text-transform: uppercase;
}

/* Une tuile qui mène ailleurs se lit comme les autres : ni soulignement, ni couleur de lien. */
.home-kpi-link {
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.home-kpi-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md, var(--app-shadow-sm));
}

/* Un retard se voit sur sa tuile avant d'être lu. */
.budget-kpi[data-tone="danger"] .budget-kpi-icon,
.home-icon-danger {
    background: var(--app-danger-soft);
    color: var(--app-danger-ink, var(--app-danger));
}

.budget-kpi[data-tone="danger"] .budget-kpi-value {
    color: var(--app-danger-ink, var(--app-danger));
}

/* Le titre d'un cadre porte son dessin dans une pastille, comme les tuiles. */
.home-panel-title {
    display: flex;
    align-items: center;
    gap: var(--app-space-sm);
}

.home-panel-title .budget-kpi-icon {
    width: 2rem;
    height: 2rem;
}

.home-grid {
    align-items: start;
}

/* Une ligne se survole : on l'ouvre d'un clic, et le fond le dit. */
.home-grid .home-line {
    padding: var(--app-space-sm);
    margin: 0 calc(-1 * var(--app-space-sm));
}

.home-grid .home-line:hover {
    background: var(--app-accent-soft);
}

.home-grid .home-line + .home-line {
    border-top: 0;
}

.home-grid .home-mark {
    color: var(--app-accent);
}