/* Le thème MudBlazor porte les couleurs et la typographie. Ce fichier ne couvre que ce qu'un
   thème ne sait pas exprimer : la marque, les pastilles d'état et la chasse fixe. */

/* --- Marque : carré noir, lettre blanche. --- */
.cpm-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    background: #0A0A0A;
    color: #FFF;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}

.cpm-mark--inverse {
    background: #FFF;
    color: #0A0A0A;
}

.cpm-wordmark {
    font-weight: 700;
    letter-spacing: .22em;
    font-size: .875rem;
}

/* --- Console : pastille d'état et identifiants en chasse fixe. --- */
.cpm-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: baseline;
    background: currentColor;
}

.cpm-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8125rem;
    /* Un PosId ou un chemin de base n'a pas d'espace où se couper : sans cela il déborde de sa colonne. */
    overflow-wrap: anywhere;
}

/* --- Console : la fenêtre entière, et la liste prend ce que les barres laissent. ------------ */

/* C'est la page qui défile, pas une liste enfermée dans une boîte : la fenêtre entière sert à
   afficher des comptes. Le padding haut de .mud-main-content compense la barre d'application fixe,
   on n'y touche pas ; le rembourrage du contenu est porté par .cpm-page. */

/* Barre de recherche et pastilles : collées sous la barre d'application, elles ne partent pas
   au défilement — sur sept cents comptes, revenir en haut pour changer de filtre est une corvée. */
.cpm-filters {
    position: sticky;
    top: 48px;
    z-index: 3;
    background: var(--mud-palette-background);
    padding-block: .25rem;
}

/* L'en-tête de colonnes se cale sous la barre de filtres : 48 px de barre d'application plus les
   80 px mesurés de .cpm-filters. Sans quoi dix colonnes défilent sans libellé.
   Le sélecteur reprend celui de MudBlazor, à quatre classes, sinon le sien l'emporte et colle
   l'en-tête à 0, c'est-à-dire derrière la barre d'application. */
.cpm-table .mud-table-root .mud-table-head .mud-table-cell {
    top: 128px;
}

/* La table grandit avec son contenu ; la virtualisation de MudBlazor se cale alors sur la fenêtre. */
.cpm-table .mud-table-container {
    height: auto;
    max-height: none;
    overflow: visible;
}

/* Une valeur longue qu'on ne lit pas en entier — la mesure de charge — tient sur une ligne, le
   reste dans l'infobulle. Sinon elle replie la rangée sur cinq lignes. */
.cpm-clamp {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Une valeur longue qu'on lit vraiment — chemin de la base, raison sociale du commerce — tient sur
   deux lignes pleines plutôt que d'être coupée au premier tiers. */
.cpm-wrap2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- Petits écrans : la donnée prime, les marges cèdent. --- */
@media (max-width: 599px) {
    .cpm-card { padding: 1.25rem !important; }
}

@media (max-width: 959px) {
    .cpm-page .mud-typography-h5 { font-size: 1.125rem; }
    .cpm-page .mud-typography-h6 { font-size: 1rem; }

    /* Mode cartes de MudTable : un compte doit tenir dans un bloc qu'on lit d'un regard. */
    .cpm-page .mud-xs-table.mud-table-dense .mud-table-cell { padding: 2px 8px; }
    .cpm-page .mud-xs-table .mud-table-cell:before { padding-right: 8px; }
}