/* ============================================
   CMA OMBESSA — Écran « Rapports »
   ============================================

   TOUT ce qui suit est porté par `#reports-dashboard`. Ce panneau partage
   `.page-header`, `.btn-*`, `.form-input`, `table` avec le tableau de bord,
   l'administration et treize fenêtres modales ; sans ce préfixe, régler ici la
   hauteur d'un champ ou la couleur d'un `thead` changerait l'écran de connexion
   et la gestion des utilisateurs. Les seules exceptions sont le bloc
   `@media print` — l'impression vise des identifiants uniques et doit valoir
   quel que soit l'ancêtre — et rien d'autre.

   Un rapport est un DOCUMENT. La page en est le bureau : rail de commande à
   gauche, feuille à droite. C'est la feuille qui s'imprime, en A4 ; le reçu
   thermique 80 mm des caisses n'a rien à voir avec ce fichier.

   Sommaire :
     1. Tête de page
     2. Grille de l'écran
     3. Rail — cartes, types de rapport, période
     4. La feuille (#report-content)
     5. En-tête du document
     6. Encarts et notes
     7. Sections, lignes, résultat net
     8. Tableaux
     9. État vide (la feuille garde sa forme)
    10. Impression A4
    11. Réactif
   ============================================ */

/* ============================================
   1. TÊTE DE PAGE
   ============================================ */
#reports-dashboard .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

#reports-dashboard .page-header-left {
    gap: 0;
}

#reports-dashboard .page-title {
    font-family: var(--font-heading);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.2;
    color: var(--gray-900);
    margin: 0 0 5px;
}

#reports-dashboard .page-subtitle {
    font-size: 13.5px;
    color: var(--gray-500);
    margin: 0;
}

/* Le seul bouton de la tête de page. Discret : il n'engage rien, il recopie.
   Il reste `.hidden` tant qu'aucun rapport n'a été généré — imprimer une
   feuille vide n'a pas de sens, et un bouton qui ne peut rien faire ne doit
   pas être là. */
#reports-dashboard .page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#reports-dashboard .btn,
#reports-dashboard .btn-primary,
#reports-dashboard .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    padding: 0 15px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    border-radius: 9px;
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

#reports-dashboard .btn:hover:not(:disabled),
#reports-dashboard .btn-secondary:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
    box-shadow: none;
    transform: none;
}

#reports-dashboard .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   2. GRILLE DE L'ÉCRAN
   ============================================ */
#reports-dashboard .reports-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Le rail suit le regard : on change de rapport, on refait une période, sans
   remonter la feuille. */
#reports-dashboard .reports-rail {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ============================================
   3. RAIL
   ============================================ */
#reports-dashboard .reports-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    overflow: hidden;
}

#reports-dashboard .reports-card-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
}

#reports-dashboard .reports-card-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

#reports-dashboard .reports-types {
    padding: 10px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#reports-dashboard .reports-group-label {
    padding: 8px 10px 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#reports-dashboard .reports-group-label + .report-type-btn {
    margin-top: 0;
}

#reports-dashboard .reports-types .reports-group-label:not(:first-child) {
    padding-top: 14px;
}

/* Les huit mêmes boutons `.report-type-btn[data-report]` qu'avant (app.js les
   compte pour annoncer « N types de rapports » sur l'écran d'administration) :
   une rangée de tuiles est devenue une liste, parce qu'un choix parmi huit se
   parcourt du regard, il ne se survole pas. */
#reports-dashboard .report-type-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--gray-700);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

#reports-dashboard .report-type-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

#reports-dashboard .report-type-btn.is-active {
    background: var(--primary-50);
    color: var(--primary-900);
    font-weight: 600;
}

#reports-dashboard .report-type-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
}

#reports-dashboard .report-type-btn.is-active .report-type-dot {
    background: var(--primary-800);
}

/* --- carte « Période » --- */
#reports-dashboard .reports-period {
    padding: 16px;
}

#reports-dashboard .reports-period .reports-card-title {
    margin-bottom: 12px;
}

#reports-dashboard #report-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Le `<select id="report-type">` reste la source de vérité que reporting.js
   lit ; le rail ci-dessus le positionne. Il est masqué et non supprimé : le
   supprimer casserait le module en silence. */
#reports-dashboard .reports-type-select {
    display: none;
}

#reports-dashboard #report-form .form-group {
    margin: 0;
}

#reports-dashboard #report-form .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

#reports-dashboard #report-form .form-input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 11px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--gray-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#reports-dashboard #report-form .form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.14);
}

/* Un champ désactivé DIT qu'il l'est. Le résumé journalier force la date de
   fin (audit M4) et les rapports de position n'ont pas de fenêtre : dans les
   deux cas le champ grisé et la phrase qui l'accompagne expliquent pourquoi,
   au lieu de laisser croire à une panne. */
#reports-dashboard #report-form .form-input:disabled {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

#reports-dashboard #report-form .form-group:has(.form-input:disabled) .form-label {
    color: var(--gray-400);
}

#reports-dashboard #report-end-date-hint {
    font-size: 11.5px;
    color: var(--gray-500);
    line-height: 1.45;
    margin-top: 6px;
}

/* Le seul bouton vert de l'écran : celui qui lance la lecture du registre. */
#reports-dashboard .reports-generate,
#reports-dashboard .btn.reports-generate,
#reports-dashboard .btn-primary.reports-generate {
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin-top: 2px;
    border-radius: 10px;
    background: var(--primary-900);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 600;
}

#reports-dashboard .btn.reports-generate:hover:not(:disabled),
#reports-dashboard .btn-primary.reports-generate:hover:not(:disabled) {
    background: var(--primary-800);
    color: white;
    border: none;
}

/* ============================================
   4. LA FEUILLE
   ============================================ */
#reports-dashboard #report-content-wrapper {
    min-width: 0;
}

#reports-dashboard #report-content {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 38px 40px 44px;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--gray-900);
}

/* ============================================
   5. EN-TÊTE DU DOCUMENT
   ============================================ */
#reports-dashboard .report-header {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 22px;
    margin-bottom: 26px;
}

#reports-dashboard .report-brand {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.16em;
    margin-bottom: 10px;
}

#reports-dashboard .report-doc-title {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -0.2px;
    margin: 0 0 8px;
}

#reports-dashboard .report-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 13px;
    color: var(--gray-600);
}

#reports-dashboard .report-doc-sep {
    color: var(--gray-400);
}

/* ============================================
   6. ENCARTS ET NOTES
   ============================================ */
#reports-dashboard .report-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    border-radius: 10px;
    padding: 13px 15px;
    margin-bottom: 16px;
}

#reports-dashboard .report-callout svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 1px;
}

#reports-dashboard .report-callout p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: var(--gray-900);
}

/* L'argent encaissé hors ligne n'est PAS dans ce rapport : le dire en jaune,
   au-dessus des chiffres, est la seule façon honnête de présenter un total
   serveur sur un appareil qui détient encore de la caisse. */
#reports-dashboard .report-callout--warn {
    border-color: var(--warning-100);
    background: var(--warning-50);
}

#reports-dashboard .report-callout--warn svg {
    color: var(--warning-700);
}

#reports-dashboard .report-callout--ok {
    border-color: var(--primary-100);
    background: var(--primary-50);
}

#reports-dashboard .report-callout--ok svg {
    color: var(--primary-800);
}

#reports-dashboard .report-callout--danger {
    border-color: var(--danger-100);
    background: var(--danger-50);
}

#reports-dashboard .report-callout--danger svg {
    color: var(--danger-700);
}

#reports-dashboard .report-callout-title {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 3px;
}

#reports-dashboard .report-callout--ok .report-callout-title {
    color: var(--primary-900);
}

#reports-dashboard .report-callout--danger .report-callout-title {
    color: var(--danger-700);
}

#reports-dashboard .report-callout-detail {
    font-size: 12.5px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700);
}

#reports-dashboard .report-callout--ok .report-callout-detail {
    color: var(--primary-800);
}

#reports-dashboard .report-callout--danger .report-callout-detail {
    color: var(--danger-700);
}

/* La note d'attribution. Chaque surface qui compte de l'argent doit déclarer
   à quelle journée elle rattache une correction ; celle-ci le dit en toutes
   lettres plutôt qu'en note de bas de page. */
#reports-dashboard .report-note {
    border-left: 2px solid var(--gray-300);
    padding: 2px 0 2px 14px;
    margin: 0 0 32px;
}

#reports-dashboard .report-note p {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

#reports-dashboard .report-callout + .report-note {
    margin-top: 0;
}

#reports-dashboard .report-hint {
    font-size: 12.5px;
    color: var(--gray-500);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

#reports-dashboard .report-hint--lead {
    margin: 0 0 12px;
}

#reports-dashboard .report-table-scroll + .report-hint {
    margin-top: 10px;
    font-size: 12px;
}

/* ============================================
   7. SECTIONS, LIGNES, RÉSULTAT NET
   ============================================ */
#reports-dashboard .report-section {
    margin-bottom: 32px;
    min-width: 0;
}

#reports-dashboard .report-section:last-child {
    margin-bottom: 0;
}

#reports-dashboard .report-section-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

#reports-dashboard .report-rows {
    display: flex;
    flex-direction: column;
}

#reports-dashboard .report-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 11px 0;
    border-bottom: 1px solid var(--gray-100);
}

#reports-dashboard .report-row--last {
    border-bottom: none;
}

#reports-dashboard .report-row-label {
    font-size: 14px;
    color: var(--gray-700);
}

#reports-dashboard .report-row-value {
    font-size: 14px;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le chiffre qu'on est venu chercher. Un seul par feuille. */
#reports-dashboard .report-net {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0 4px;
}

#reports-dashboard .report-net-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
}

#reports-dashboard .report-net-value {
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 700;
    color: var(--primary-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.4px;
    white-space: nowrap;
}

#reports-dashboard .report-net-unit {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: 0;
}

/* ============================================
   8. TABLEAUX
   ============================================ */
#reports-dashboard .report-table-scroll {
    overflow-x: auto;
}

#reports-dashboard #report-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

#reports-dashboard .report-table-scroll table {
    min-width: 560px;
}

#reports-dashboard #report-content thead {
    background: none;
    color: inherit;
}

#reports-dashboard #report-content thead th {
    padding: 0 12px 9px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gray-300);
    background: none;
    white-space: nowrap;
}

#reports-dashboard #report-content thead th:first-child {
    padding-left: 0;
}

#reports-dashboard #report-content thead th:last-child {
    padding-right: 0;
}

#reports-dashboard #report-content tbody tr,
#reports-dashboard #report-content tbody tr:nth-child(even) {
    background: none;
}

#reports-dashboard #report-content tbody tr:hover {
    background: var(--gray-50);
}

#reports-dashboard #report-content tbody td {
    padding: 12px;
    color: var(--gray-600);
    font-weight: 400;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

#reports-dashboard #report-content tbody td:first-child {
    padding-left: 0;
    color: var(--gray-900);
    font-weight: 500;
}

#reports-dashboard #report-content tbody td:last-child {
    padding-right: 0;
    color: var(--gray-900);
    font-weight: 600;
}

#reports-dashboard #report-content tfoot {
    background: none;
}

#reports-dashboard #report-content tfoot td {
    padding: 13px 12px 0;
    color: var(--gray-900);
    font-weight: 600;
    font-size: 13.5px;
    border-top: none;
    font-variant-numeric: tabular-nums;
}

#reports-dashboard #report-content tfoot td:first-child {
    padding-left: 0;
}

#reports-dashboard #report-content tfoot td:last-child {
    padding-right: 0;
}

#reports-dashboard #report-content tfoot tr:first-child td {
    border-top: 1px solid var(--gray-300);
    padding-top: 13px;
}

/* Le total net, en vert, où qu'il se trouve. */
#reports-dashboard #report-content tfoot td strong,
#reports-dashboard #report-content tbody td:last-child strong {
    color: var(--primary-900);
    font-weight: 700;
    background: none;
    padding: 0;
}

#reports-dashboard #report-content .text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#reports-dashboard #report-content .text-center {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#reports-dashboard #report-content .text-xs {
    font-size: 12px;
}

#reports-dashboard #report-content .text-muted {
    color: var(--gray-500);
}

#reports-dashboard #report-content em {
    font-style: normal;
    color: var(--gray-500);
    font-size: 12.5px;
}

/* ============================================
   9. ÉTAT VIDE
   ============================================
   Un rapport non généré, un contrôle sans anomalie et une lecture refusée
   occupent la MÊME surface qu'un rapport rempli, et disent en toutes lettres
   ce qu'ils sont. Une carte qui se replie à zéro se lit comme une panne. */
#reports-dashboard .report-placeholder {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

#reports-dashboard .report-placeholder-mark {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border: 1px dashed var(--gray-300);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reports-dashboard .report-placeholder-mark svg {
    width: 19px;
    height: 19px;
    color: var(--gray-400);
}

#reports-dashboard .report-placeholder-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 4px;
}

#reports-dashboard .report-placeholder-hint {
    font-size: 12.5px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0;
    max-width: 340px;
}

/* Une lecture refusée n'est pas un rapport vide : elle est rouge et elle dit
   pourquoi. Un rapport partiel ne s'affiche jamais. */
#reports-dashboard .report-placeholder--danger .report-placeholder-mark {
    border-color: var(--danger-100);
}

#reports-dashboard .report-placeholder--danger .report-placeholder-mark svg {
    color: var(--danger-700);
}

#reports-dashboard .report-placeholder--danger .report-placeholder-title {
    color: var(--danger-700);
}

/* ============================================
   10. IMPRESSION — A4
   ============================================
   Rien à voir avec le reçu thermique 80 mm des caisses : ici on imprime une
   FEUILLE, en A4, et seule la feuille. Les identifiants sont visés sans le
   préfixe du panneau : à l'impression l'ancêtre ne doit pas pouvoir varier. */
@media print {
    body * {
        visibility: hidden;
    }

    #report-content-wrapper,
    #report-content-wrapper * {
        visibility: visible;
    }

    #report-content-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: white;
    }

    #report-content {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: black;
        background: white;
    }

    #report-content .report-header {
        border-bottom: 2px solid #1B5E20;
        padding-bottom: 14px;
        margin-bottom: 20px;
    }

    #report-content .report-brand {
        font-size: 9pt;
        color: #000;
    }

    #report-content .report-doc-title {
        font-size: 18pt;
        color: #1B5E20;
    }

    #report-content .report-doc-meta {
        font-size: 9.5pt;
        color: #333;
    }

    #report-content .report-section {
        margin-bottom: 18px;
        page-break-inside: avoid;
    }

    #report-content .report-section-title {
        font-size: 9pt;
        color: #000;
    }

    #report-content .report-callout {
        border: 1px solid #999 !important;
        background: none !important;
        page-break-inside: avoid;
    }

    #report-content .report-callout svg,
    #report-content .report-callout-title,
    #report-content .report-callout-detail,
    #report-content .report-callout p {
        color: #000 !important;
    }

    #report-content .report-note {
        border-left: 2px solid #999;
        margin-bottom: 18px;
    }

    #report-content .report-note p,
    #report-content .report-hint {
        color: #333;
        font-size: 8.5pt;
    }

    #report-content .report-row,
    #report-content .report-net {
        border-bottom-color: #DDD;
        page-break-inside: avoid;
    }

    #report-content .report-net-value {
        font-size: 18pt;
        color: #1B5E20;
    }

    #report-content .report-net-unit {
        color: #333;
    }

    #report-content .report-table-scroll {
        overflow: visible;
    }

    #report-content table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9pt;
        min-width: 0 !important;
        page-break-inside: avoid;
    }

    #report-content thead {
        display: table-header-group;
    }

    #report-content th,
    #report-content td {
        border: 1px solid #C8E6C9;
        padding: 6px 8px;
        text-align: left;
        color: black !important;
    }

    #report-content th {
        background-color: #E8F5E9 !important;
        font-weight: 600;
        color: #1B5E20 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #report-content .text-right {
        text-align: right;
    }

    #report-content .text-center {
        text-align: center;
    }

    #report-content tfoot td {
        font-weight: bold;
        background-color: #E8F5E9 !important;
        border-top: 2px solid #1B5E20;
        padding-top: 6px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #report-content strong {
        font-weight: bold;
        background: none !important;
        padding: 0 !important;
        color: #1B5E20 !important;
    }

    .no-print,
    #print-report-btn {
        display: none !important;
    }

    /* Page break control */
    .page-break-before {
        page-break-before: always;
    }

    .page-break-after {
        page-break-after: always;
    }

    @page {
        margin: 0.75in;
        size: A4;
    }
}

/* ============================================
   11. RÉACTIF
   ============================================
   Il n'existe pas de fichier `reports-responsive.css` : les points de rupture
   de cet écran vivent ici, à côté des règles qu'ils corrigent. */
@media (max-width: 1024px) {
    #reports-dashboard .reports-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #reports-dashboard .reports-rail {
        position: static;
    }

    #reports-dashboard #report-content {
        padding: 28px 24px 32px;
    }
}

@media (max-width: 768px) {
    #reports-dashboard .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    #reports-dashboard #report-content {
        padding: 22px 18px 26px;
        overflow-x: auto;
    }

    #reports-dashboard .report-doc-title {
        font-size: 20px;
    }

    #reports-dashboard #report-content table {
        font-size: 12.5px;
    }

    #reports-dashboard #report-content th,
    #reports-dashboard #report-content td {
        padding: 9px 8px;
    }

    #reports-dashboard .report-net-value {
        font-size: 23px;
    }
}

@media (max-width: 480px) {
    #reports-dashboard #report-form .form-input {
        font-size: 16px;
    }

    #reports-dashboard .report-row,
    #reports-dashboard .report-net {
        gap: 14px;
    }
}