/* doc-project | stats/assets/css/stats.css | Définit le thème premium mobile-first du module statistiques avec hero compact, toolbar en grille centrant le choix Pélissanne/Lançon/Les deux, déclencheur calendrier compact, cartes KPI en bas, filtres tactiles en ligne avec scroll horizontal, tableaux comparatifs isolés en scroll horizontal, colonne sticky resserrée sur le plus grand libellé court, mise en avant de la colonne du jour actuel, valeurs sans années répétées, cellules limitées à trois lignes visibles, libellé de semaine centré en fullscreen paysage, bouton de récupération en icône accessible et protections anti-débordement viewport. | Expose: aucun | Dépend de: stats/stats.php, Bootstrap 4, classes DOM du module stats, stats/assets/css/stats-date-modal.css | Impacte: UI statistiques, lisibilité mobile/tablette/desktop, en-tête plus compact, centrage des localisations, repérage immédiat du jour actuel en affichage normal et fullscreen, accessibilité tactile, prévention des débordements horizontaux globaux, groupes de boutons sur une seule ligne, accessibilité du dernier jour en scroll horizontal, compacité des cellules du tableau principal et du mode fullscreen paysage | Tables: aucune */

:root {
    --stats-bg: #0d1117;
    --stats-bg-soft: #111827;
    --stats-panel: rgba(18, 25, 38, 0.92);
    --stats-panel-strong: rgba(24, 34, 51, 0.98);
    --stats-border: rgba(148, 163, 184, 0.22);
    --stats-border-strong: rgba(148, 163, 184, 0.34);
    --stats-text: #f8fafc;
    --stats-muted: #94a3b8;
    --stats-muted-strong: #cbd5e1;
    --stats-primary: #38bdf8;
    --stats-primary-strong: #0ea5e9;
    --stats-success: #22c55e;
    --stats-danger: #fb7185;
    --stats-warning: #f59e0b;
    --stats-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
    --stats-radius-xl: 28px;
    --stats-radius-lg: 20px;
    --stats-radius-md: 14px;
    --stats-sticky-col-width: 108px;
    --stats-day-col-width: 150px;
    --stats-cell-value-min-height: 30px;
    --stats-cell-value-gap: 4px;
    --stats-cell-visible-lines: 3;
    --stats-page-gutter: clamp(12px, 3vw, 28px);
    --stats-today-bg: rgba(56, 189, 248, 0.13);
    --stats-today-bg-strong: rgba(56, 189, 248, 0.22);
    --stats-today-border: rgba(125, 211, 252, 0.72);
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body.stats-page {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--stats-text);
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 34rem),
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 30rem),
        linear-gradient(135deg, #0a0f1d 0%, #111827 42%, #070a12 100%);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stats-page .container {
    width: min(100%, 1480px);
    max-width: none;
    padding: var(--stats-page-gutter);
    overflow-x: clip;
}

.stats-hero {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
    padding: 14px 18px;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-lg);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.78)),
        linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(245, 158, 11, 0.10));
    box-shadow: var(--stats-shadow);
    text-align: left;
    min-width: 0;
}

.stats-hero h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.stats-hero p {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--stats-muted-strong);
    font-size: 0.92rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--stats-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--stats-success);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.78);
}

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

.stats-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 142px;
    padding: 22px;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-lg);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.78));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    text-align: left;
}

.stats-kpi-card::after {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.10);
}

.stats-kpi-label {
    display: block;
    margin-bottom: 10px;
    color: var(--stats-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.stats-kpi-card strong {
    display: block;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.stats-kpi-card small {
    display: inline-flex;
    margin-top: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--stats-muted-strong);
    background: rgba(148, 163, 184, 0.12);
    font-weight: 800;
}

.stats-kpi-card small.is-positive {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.14);
}

.stats-kpi-card small.is-negative {
    color: #fecdd3;
    background: rgba(251, 113, 133, 0.14);
}

.stats-toolbar {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    padding: 18px;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-lg);
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(16px);
}

.stats-toolbar__date {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.stats-toolbar__locations {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.stats-toolbar__weeks {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.stats-button-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.stats-button-group--locations {
    justify-content: center;
}

.stats-button-group.btn-group > .btn {
    flex: 0 0 auto;
    min-width: max-content;
    margin: 0;
    white-space: nowrap;
}

.stats-toolbar .btn,
.stats-section .btn,
.action-button {
    min-height: 44px;
    border-radius: 999px;
    font-weight: 800;
    white-space: normal;
}

.stats-toolbar .btn-group .btn,
.stats-section .btn {
    border-color: rgba(255, 255, 255, 0.08);
}

.stats-toolbar .btn.active {
    outline: 3px solid rgba(56, 189, 248, 0.20);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.18) inset;
}

.stats-date-trigger {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.26);
    color: var(--stats-text);
    background: rgba(30, 41, 59, 0.78);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18);
    font-size: 1.2rem;
    line-height: 1;
}

.stats-date-trigger:hover,
.stats-date-trigger:focus-visible {
    color: #082f49;
    background: linear-gradient(135deg, var(--stats-primary), var(--stats-primary-strong));
    outline: 3px solid rgba(56, 189, 248, 0.22);
    outline-offset: 2px;
}

.stats-page label {
    margin: 0;
    color: var(--stats-muted-strong);
    font-weight: 800;
}

.stats-page input[type="date"] {
    max-width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--stats-border-strong);
    border-radius: 12px;
    color: var(--stats-text);
    background: rgba(15, 23, 42, 0.9);
}

.stats-section-title {
    margin: 20px 0 14px;
    color: var(--stats-text);
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.stats-table-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 22px;
}

.stats-scroll-hint {
    display: none;
    margin: 0 0 8px;
    color: var(--stats-muted-strong);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: left;
}

.stats-scroll-hint::before {
    content: "↔ ";
    color: var(--stats-primary);
}

.stats-scroll-hint__fullscreen {
    display: none;
}

.stats-landscape-fullscreen .stats-scroll-hint {
    display: block;
    margin: 0 0 10px;
    text-align: center;
}

.stats-landscape-fullscreen .stats-scroll-hint::before {
    content: none;
}

.stats-landscape-fullscreen .stats-scroll-hint__default {
    display: none;
}

.stats-landscape-fullscreen .stats-scroll-hint__fullscreen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    color: var(--stats-text);
    font-weight: 950;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-lg);
    background: rgba(15, 23, 42, 0.76);
    box-shadow: var(--stats-shadow);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
}

.table-wrapper:focus {
    outline: 3px solid rgba(56, 189, 248, 0.25);
    outline-offset: 3px;
}

.table-wrapper.is-scrollable + .stats-scroll-hint {
    display: block;
}

.table-wrapper::-webkit-scrollbar {
    height: 12px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.9);
}

.table-wrapper::-webkit-scrollbar-thumb {
    border: 3px solid rgba(15, 23, 42, 0.9);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.75);
}

.custom-table {
    width: max-content;
    min-width: calc(var(--stats-sticky-col-width) + (6 * var(--stats-day-col-width)));
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--stats-text);
    background: transparent;
    table-layout: fixed;
}

.custom-table th,
.custom-table td {
    width: var(--stats-day-col-width);
    min-width: var(--stats-day-col-width);
    max-width: var(--stats-day-col-width);
    padding: 12px;
    border: 0;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
}

.custom-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    color: #dbeafe;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    font-weight: 900;
}

.year-value .value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.custom-table .day-name,
.custom-table .day-date {
    display: block;
}

.custom-table .day-date {
    margin-top: 4px;
    color: var(--stats-muted-strong);
    font-size: 0.82rem;
}

.custom-table th.sticky-col,
.custom-table td.sticky-col,
.custom-table tbody th.sticky-col {
    position: sticky;
    left: 0;
    z-index: 7;
    width: var(--stats-sticky-col-width);
    min-width: var(--stats-sticky-col-width);
    max-width: var(--stats-sticky-col-width);
    padding: 10px 8px;
    color: var(--stats-text);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    text-align: center;
    font-weight: 900;
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 12px 0 22px rgba(2, 6, 23, 0.30);
}

.custom-table thead th.sticky-col {
    z-index: 9;
    background: linear-gradient(180deg, rgba(30, 41, 59, 1), rgba(15, 23, 42, 1));
}

.custom-table tbody tr:hover td,
.custom-table tbody tr:hover th {
    background-color: rgba(56, 189, 248, 0.08);
}

.custom-table tbody tr:hover th.sticky-col {
    background: linear-gradient(90deg, rgba(20, 32, 50, 1), rgba(30, 41, 59, 1));
}

.custom-table .current-week {
    color: #f8fafc;
}

.custom-table th.is-today,
.custom-table td.is-today {
    background:
        linear-gradient(180deg, var(--stats-today-bg-strong), var(--stats-today-bg)),
        rgba(15, 23, 42, 0.78);
    box-shadow:
        inset 2px 0 0 var(--stats-today-border),
        inset -2px 0 0 rgba(125, 211, 252, 0.38);
}

.custom-table thead th.is-today {
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(14, 165, 233, 0.52), rgba(15, 23, 42, 0.98)),
        rgba(15, 23, 42, 0.98);
}

.custom-table tbody tr:hover td.is-today {
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.24), rgba(56, 189, 248, 0.16)),
        rgba(15, 23, 42, 0.78);
}

.stats-today-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    padding: 4px 8px;
    border: 1px solid rgba(186, 230, 253, 0.48);
    border-radius: 999px;
    color: #082f49;
    background: linear-gradient(135deg, #bae6fd, var(--stats-primary));
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.24);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.cell-content {
    display: grid;
    gap: var(--stats-cell-value-gap);
    max-height: calc((var(--stats-cell-value-min-height) * var(--stats-cell-visible-lines)) + (var(--stats-cell-value-gap) * (var(--stats-cell-visible-lines) - 1)));
    overflow-y: auto;
    padding-right: 4px;
    text-align: left;
    scrollbar-width: thin;
}

.year-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--stats-cell-value-min-height);
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 10px;
    color: var(--stats-muted-strong);
    background: rgba(15, 23, 42, 0.58);
    cursor: pointer;
    line-height: 1.15;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    overflow: hidden;
}

.year-value::before {
    content: none;
}

.year-value:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.48);
    background: rgba(56, 189, 248, 0.10);
}

.year-value.current-year-value {
    color: #ffffff;
    border-color: rgba(56, 189, 248, 0.48);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(15, 23, 42, 0.72));
    font-weight: 900;
}

.year-value.is-saving {
    opacity: 0.72;
    pointer-events: none;
}

.year-value.is-saved {
    border-color: rgba(34, 197, 94, 0.62);
}

.year-value.is-error {
    border-color: rgba(251, 113, 133, 0.75);
}

.action-button {
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    background: linear-gradient(135deg, var(--stats-primary), var(--stats-primary-strong));
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.20);
}

.stats-recover-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    color: #082f49;
}

.stats-recover-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 950;
}

.stats-recover-button:focus-visible {
    outline: 3px solid rgba(248, 250, 252, 0.72);
    outline-offset: 2px;
}

.stats-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 32px;
    padding: 28px;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-xl);
    background: var(--stats-panel);
    box-shadow: var(--stats-shadow);
    text-align: left;
}

.stats-section h3,
.stats-section h4 {
    color: var(--stats-text);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.stats-section h3 {
    margin-bottom: 20px;
    font-size: 1.6rem;
}

.stats-section h4 {
    margin: 24px 0 16px;
    color: var(--stats-muted-strong);
    font-size: 1.05rem;
    line-height: 1.55;
}

.form-section {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-lg);
    background: rgba(15, 23, 42, 0.72);
}

.form-section h4 {
    margin: 0 0 14px;
    color: var(--stats-text);
    font-size: 1.05rem;
    text-decoration: none;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0;
}

.radio-group div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--stats-border);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.78);
}

.radio-group input {
    accent-color: var(--stats-primary);
}

#customPeriodInputs {
    display: none;
    margin-top: 16px;
}

#customPeriodInputs input[type="date"] {
    width: min(100%, 280px);
}

#customPeriodInputs[style*="display: none"] {
    display: none !important;
}

#customPeriodInputs label {
    display: inline-block;
    min-width: 120px;
    margin: 8px 0;
}

.stats-summary-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stats-summary-table-wrap:focus {
    outline: 3px solid rgba(56, 189, 248, 0.25);
    outline-offset: 3px;
}

.stats-table {
    width: 100%;
    min-width: 620px;
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius-lg);
    background: rgba(15, 23, 42, 0.82);
}

.stats-table th,
.stats-table td {
    padding: 15px;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    text-align: center;
}

.stats-table th {
    color: #dbeafe;
    background: rgba(30, 41, 59, 0.92);
    font-weight: 900;
}

.stats-table tr:last-child td {
    border-bottom: 0;
}

.stats-table td.current-year {
    color: #ffffff;
    background: rgba(56, 189, 248, 0.10);
    font-weight: 900;
}

.stats-table td.other-year {
    color: var(--stats-muted-strong);
}

@media (max-width: 900px) {
    .stats-page .container {
        padding: 18px;
    }

    .stats-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 14px 16px;
    }

    .stats-kpi-grid {
        grid-template-columns: 1fr;
    }

    .stats-toolbar {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .stats-toolbar__date,
    .stats-toolbar__locations,
    .stats-toolbar__weeks {
        width: 100%;
        justify-content: center;
    }

    .stats-button-group.btn-group {
        display: inline-flex;
        flex-wrap: nowrap;
        max-width: 100%;
    }

    .stats-button-group.btn-group > .btn {
        width: auto;
        min-width: max-content;
    }

    .stats-scroll-hint {
        display: block;
    }
}

@media (max-width: 576px) {
    :root {
        --stats-sticky-col-width: 92px;
        --stats-day-col-width: 124px;
        --stats-cell-value-min-height: 30px;
        --stats-cell-value-gap: 4px;
        --stats-cell-visible-lines: 3;
    }

    .stats-page .container {
        padding: 12px;
    }

    .stats-hero {
        gap: 8px;
        margin-top: 0;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .stats-hero h1 {
        font-size: clamp(1.15rem, 7vw, 1.45rem);
        letter-spacing: -0.04em;
    }

    .stats-hero p {
        font-size: 0.84rem;
    }

    .stats-kpi-card {
        min-height: 0;
        padding: 18px;
        border-radius: 18px;
    }

    .stats-kpi-card strong {
        font-size: 2rem;
        overflow-wrap: anywhere;
    }

    .stats-toolbar {
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .stats-section-title {
        font-size: 1.35rem;
        text-align: left;
    }

    .custom-table {
        min-width: calc(var(--stats-sticky-col-width) + (6 * var(--stats-day-col-width)));
        font-size: 13px;
    }

    .custom-table th,
    .custom-table td {
        padding: 8px;
    }

    .custom-table th.sticky-col,
    .custom-table td.sticky-col,
    .custom-table tbody th.sticky-col {
        padding: 8px 6px;
        font-size: 11.5px;
        line-height: 1.15;
    }

    .cell-content {
        max-height: calc((var(--stats-cell-value-min-height) * var(--stats-cell-visible-lines)) + (var(--stats-cell-value-gap) * (var(--stats-cell-visible-lines) - 1)));
    }

    .year-value {
        min-height: var(--stats-cell-value-min-height);
        padding: 5px 7px;
        gap: 5px;
        border-radius: 10px;
    }

    .stats-recover-button__icon {
        font-size: 1.28rem;
    }

    .stats-section {
        margin-top: 24px;
        padding: 16px;
        border-radius: 22px;
    }

    .stats-section h3 {
        font-size: 1.35rem;
    }

    .form-section {
        padding: 14px;
        border-radius: 18px;
    }

    .radio-group {
        align-items: stretch;
        flex-direction: column;
    }

    .radio-group div {
        width: 100%;
        min-height: 44px;
    }

    #customPeriodInputs label,
    #customPeriodInputs input[type="date"] {
        width: 100%;
        min-width: 0;
    }

    .stats-summary-table-wrap {
        border: 1px solid var(--stats-border);
        border-radius: 18px;
    }

    .stats-table {
        min-width: 560px;
        border: 0;
        border-radius: 0;
    }

    .stats-table th,
    .stats-table td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }
}