:root {
    --bs-border-radius: 0.375rem;
}

#app {
    height: 100vh;
}

header {
    height: 50px;
}

[data-target="view"] {
    height: calc(100% - 50px);
    overflow-y: auto;
    position: relative;
    /*display: grid;
    grid-template-rows: 1fr auto; 
    height: calc(100vh - 50px);  */
    background-color: #f8f9fa; /* gris clair template */
    box-sizing: border-box; 
}  
[data-target="view-content"] {
    height: 100%;
    padding-bottom: 5rem;
    overflow-y: auto;
}  
[data-target="view-group-button"] {
    position: fixed;
    bottom: 5px;
    left: 5px;
    right: 5px;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    border: 1px solid #d1d1d1;
    border-radius: 0.375rem;
    background: #f0f0f0;
}  


/* ---------- transaction ---------- */

/*[data-component="transaction"]*/
.component-transaction {
    /*display: grid;
    grid-template-columns: 1fr 1fr;*/
}




/* ----- restitution ----- */
/* card transaction*/ 
.card-transaction[data-is-active="1"] .card-transaction-details{
    display: block;
}
.card-transaction {
    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 0.375rem;
    border: 1px solid;
}
.card-transaction-category {
    grid-row: 1;
    grid-column: 1;
    font-weight: bold;
}
.card-transaction-date {
    grid-row: 2;
    grid-column: 1;
    color: var(--grey-light);
}
.card-transaction-amount {
    grid-row: 1;
    grid-column: 2;
    font-weight: bold;
    text-align: right;
}
.card-transaction-signe {
    grid-row: 2;
    grid-column: 2;
    text-align: right;
    color: var(--grey-light);
}
.card-transaction-action {
    grid-row: 3;
    grid-column: 2;
    
}
.card-transaction-details {
    display: none;
}
                

/* ----- dashboard */
.dash-contain-indicateur {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.dash-indicateur {
    padding: 0.5rem;
    border: 1px solid grey;
}


/* ----- component-view */
.component-view {

}