/* Grid Patterns (12 Columns) */
.grid {row-gap: 0;}
.grid.margin {row-gap: 1rem;}

/* S (default: s-12) */
.grid.s-6-6 {grid-template-columns: 1fr 1fr;}

/* M */
@media (min-width: 768px) {
    .grid.m-12 {grid-template-columns: 1fr;}
    .grid.m-6-6 {grid-template-columns: 1fr 1fr;}
}

/* L */
@media (min-width: 1280px) {
    .grid.xl-12 {grid-template-columns: 1fr;}
    .grid.xl-6-6 {grid-template-columns: 1fr 1fr;}
    .grid.xl-4-4-4 {grid-template-columns: 1fr 1fr 1fr;}
}

/* XXL */
@media (min-width: 1536px) {
    .grid.xxl-12 {grid-template-columns: 1fr;}
    .grid.xxl-6-6 {grid-template-columns: 1fr 1fr;}
    .grid.xxl-8-4 {grid-template-columns: 8fr 4fr;}
}


/* ------------------- */
/* ---- Specials ----- */
/* ------------------- */

/* Iban: Table and Container */

/* XS & S and smaller */
@media (max-width: 767px) {

    /* Details PopUp Table */
    #dynamic-results tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.1em;
        grid-template-areas: 
            ". ."
            "gegen-head gegen-head"
            "gegen-val gegen-val"
            "tx-head tx-head"
            "tx-val tx-val"
            ". .";
    }

    #dynamic-results tr th,
    #dynamic-results tr td {
        display: block;
        text-align: left;
    }

    #dynamic-results tr:nth-child(4) th { grid-area: gegen-head;}
    #dynamic-results tr:nth-child(4) td { grid-area: gegen-val;}
    #dynamic-results tr:nth-child(9) th { grid-area: tx-head;}
    #dynamic-results tr:nth-child(9) td { grid-area: tx-val;}

    /* Stack nav */
    nav { display: block; }
    nav ul {
        display: block;
        text-align: center;
        margin: 0;
    }
    main.container.flex { padding-top: 0; }

    /* Stack all table cells */
    .transactions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .transactions thead {
        display: none;
    }
    .transactions tr {
        display: grid;
        grid-template-columns: 1fr 5fr 5fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0.25em;
        grid-template-areas: 
            "checkbox dates category amount"
            "button betreff betreff betreff";
        padding: 1em 0;
    }
    .transactions td {
        display: block;
        border: none;
        padding-top: 0em;
        padding-bottom: 0em;
    }

    /* Naming and Styling Cells */
    .transactions tr td:nth-child(1){
        padding-left: 0;
        grid-area: checkbox;
    }
    .transactions tr td:nth-child(2){grid-area: dates;}
    .transactions tr td:nth-child(3){
        padding-right: 0;
        grid-area: betreff;
    }
    .transactions tr td:nth-child(4){grid-area: category;}
    .transactions tr td:nth-child(6){
        padding-right: 0;
        grid-area: amount;
    }
    .transactions tr td:nth-child(7){
        padding-left: 0;
        grid-area: button;
    }

    /* TODO: #48 ,TX Details PopUp
    #dynamic-results tr:last-child th, 
    #dynamic-results tr:last-child td {
        display: block;
    }
    */
}

/* M and smaller */
/* (No Padding, Category Header hide) */
@media (max-width: 1023px) {
    .container.flex{
        width: 100%;
        max-width: inherit;
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--pico-spacing);
        padding-left: var(--pico-spacing);
    }

    .transactions tr th:nth-child(4) {
        color: transparent;
        font-size: 0.01em;
        padding: 0;
    }
}

/* M */
/* (Categories are only cirlces) */
@media (min-width: 768px) and (max-width: 1023px) {
    .transactions .tag-chip {
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        text-indent: -9999px;
        overflow: hidden;
        white-space: nowrap;
    }
}

/* L and smaller */
@media (max-width: 1279px) {
    /* less padding */
    .container.flex {
        max-width: 1020px;
    }
    /* Tag Chips are only circles */
    .transactions tr th:nth-child(5) {
        color: transparent;
        font-size: 0.01em;
        padding: 0;
    }
    .transactions tr td:nth-child(5) .tag-chip {
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        text-indent: -9999px;
        overflow: hidden;
        white-space: nowrap;
    }
}

/* Transaktion: Grouped Buttons */

/* L an greater */
/* (Re-Align and don't collapse over full width) */
@media (min-width: 1280px) {
    .collapse[role="group"] {
        display: block;
        text-align: right;
    }
    .collapse[role="group"] button {
        border-radius: var(--pico-border-radius);
        margin-left: var(--pico-spacing);
    }
}