@import "colors.css";



.card {
  background-color: var(--color-content-card);
  padding:var(--standard-padding);
  padding-bottom: calc(0.8rem + var(--standard-padding)/2);
  border-radius: 5px;
  margin:0;
  margin-top:5px;
  margin-bottom:5px;
  cursor:pointer;

}





/*
.card:first-of-type{
  margin-top: 30px;
}

*/





.card .title, .card .value {
  font: 1.4rem / 1.8 sans-serif; /*1.25rem / 1.5 sans-serif;*/
  font-weight:bold;
}



.value.positive {
  color: var(--font-color-income)
}
.value.negative{
  color: var(--font-color-expense)
}



.value.expense::before, .value.expense-external::before {
  content: "-";
}
.value.expense-external {
  color: var(--font-color-expense)
}



.value.income::before, .value.income-external::before {
  content: "+";
}
.value.income-external {
  color: var(--font-color-income)
}





/*
[class*="grid-container"] {
  position:relative;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-container-100 {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  width:100%;
  align-self: stretch;
}

.grid-item {
  min-height: 4rem;
  overflow:visible;

  align-self: stretch;

}

*/


/*
[class*="grid-container"] {
  display: grid;
}

*/


/*
.card .grid-container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "title title value value"
    "subtitle subtitle date date"
    "extra extra extra extra";
  grid-auto-flow: row;
}

@media (min-width: 800px) {

  .card .grid-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "title subtitle extra extra date value";
    grid-auto-flow: row;
  }

}

*/

/*
.card div {
  grid-area: extra;
}
*/

/*
.card .card-item-title {
  grid-area: title;
}
.card .card-item-type, .card .card-item-from-title, .card .card-item-to-title {
  grid-area: subtitle;
}
.card .card-item-from-title {
  justify-self: start;
}
.card .card-item-to-title {
  justify-self: end;
}

.card .card-item-current-balance, .card .card-item-amount {
  grid-area: value;
  justify-self: end;
}
.card .card-item-date {
  grid-area: date;
  justify-self: end;
}

*/






[class*="grid-container"] {
  display: grid;
}

.card .grid-container {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "title value"
    "details date"
    "meta status";
  grid-auto-flow: row;
}




.card-item-title {
    grid-area: title;
}

.card-item-current-balance {
    grid-area: value;
    justify-self: end;
}
.card-item-amount {
    grid-area: value;
    justify-self: end;
}

.card-item-date {
    grid-area: date;
    justify-self: end;
}
.card-item-status {
    grid-area: status;
    justify-self: end;
    margin-top: var(--standard-padding);
}
.card-item-status .big {
  font-size: 140%;
}

.card-item-details {
    grid-area: details;
    display:flex;
    align-items: center;
}
.card-item-details div:last-of-type {
    margin-right:auto;
}


.card-item-direction {
  margin-left: calc(var(--standard-padding)/2);
  margin-right: calc(var(--standard-padding)/2);
}

.card-item-meta {
    grid-area: meta;
    display:flex;
    margin-top: var(--standard-padding);
}
.card-item-meta div {
  margin-right: var(--standard-padding);
}
.card-item-meta div:last-of-type {
    margin-right:auto;
}



.card-item-direction,
.card-item-user-count,
.card-item-transaction-count,
.card-item-recurring,
.card-item-interval,
.card-item-target,
.card-item-status {
  display: flex;
  align-items: center;
  height: 1rem;
}


.card-item-user-count span,
.card-item-transaction-count span,
.card-item-recurring span,
.card-item-target span {
  margin-left: calc(var(--standard-padding)/2);
}

.card-item-user-count svg,
.card-item-transaction-count svg,
.card-item-recurring svg,
.card-item-target svg, 
.card-item-status svg {
  height: 100%;
  align-self: center;
}


.col-head .pointer {
  display:inline-flex;
  overflow:visible;
  height:1.6rem; /*somehow needed, otherwise svgs are cut of..*/
}

.col-head svg {
  height:100%;
  /*
  height: 1.4rem;
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
  */
  align-self: center;
  padding:2px;
}

.col-head svg.tbl-btn {
  color:grey;
}

.col-head svg.asc, .col-head svg.desc {
  display:none;
}
.col-head.asc svg.asc {
  display:unset;
}
.col-head.desc svg.desc {
  display:unset;
}

/*
.card-item-direction svg {
  height: 80%;
  align-self:center;
  padding: .2rem .1rem 0 .1rem;
}
*/
.card-item-direction svg {
  height: 50%;
}


.card-item-details,
.card-item-meta,
.card-item-direction,
.card-item-date,
.card-item-type,
.card-item-from-title,
.card-item-to-title,
.card-item-user-count,
.card-item-transaction-count,
.card-item-status,
.card-item-prev,
.card-item-next,
.card-item-date-relevant {
  color:grey;
}








.card-item-next {
  grid-area:next;
}

.card-item-prev {
  grid-area:prev;
}


.card-item-date-relevant {
  grid-area:date;
  justify-self: end;
}






@media (min-width: 800px) {


  .table-wrap {
    background-color: var(--color-content-card);
    /*padding:var(--standard-padding);*/
    padding:0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 5px;
    overflow:hidden;
  }


  .card {
    background-color: var(--color-content-card);
    padding:0;
    padding-left: var(--standard-padding);
    padding-right: var(--standard-padding);
    border-radius: 0;
    margin:0;
    margin-top:0;
    margin-bottom:0;
    cursor:pointer;
  }
  .card:not(.listheader) .grid-container {
    border-top: .5px solid var(--color-content-expand-hover); /*prev: grey*/
  }
  .card:not(.listheader):first-of-type .grid-container,
  .card.hovered + .card .grid-container {
    border-top: .5px solid transparent;
  }

  .card .grid-container {
    padding-top: var(--standard-padding);
    padding-bottom: var(--standard-padding);
  }





  .card:not(.listheader) .card-item-user-count svg,
  .card:not(.listheader) .card-item-transaction-count svg,
  .card:not(.listheader) .card-item-recurring svg,
  .card:not(.listheader) .card-item-target svg {
    display: none;
  }
  .card-item-user-count span,
  .card-item-transaction-count span,
  .card-item-recurring span,
  .card-item-target span {
    margin-left: 0;
  }

  .listheader {
    /*border-bottom: 1px solid var(--color-content-font);*/
    border-bottom: 1px solid grey;
    padding-top:calc(var(--standard-padding)/2);
    /*padding-bottom:calc(var(--standard-padding)/2);*/
  }

  .listheader .grid-container {
    /*border-bottom: 1px solid var(--color-content-font);*/
    border-bottom: none;
    cursor:default;
  }

  .listheader .col-head {
    color: var(--color-content-font) !important;
    font: 1.2rem / 1.4 sans-serif !important;
    font-weight: bold !important;
  }
  



  .cardvalue {
    display: none !important;
  }

  .card .grid-container {
    grid-template-columns: 4fr 4fr 4fr 2fr 3fr 20px;
    grid-template-rows: auto;
    grid-template-areas:
      "title details meta date value status";
    grid-auto-flow: row;
    align-items: center;
  }
  .card .grid-container.assets {
    grid-template-columns: 4fr 4fr 4fr 3fr 20px;
    grid-template-areas:
      "title details meta value status";
  }
  .card .grid-container.transactions {
    grid-template-columns: 4fr 4fr 2fr 4fr 2fr 2fr 3fr 20px;
    grid-template-areas:
      "title details date meta prev next value status";
  }

  .card-item-date {
    justify-self: start;
  }


  .card .title, .card .value {
    font: 1.2rem / 1.4 sans-serif; /*1.25rem / 1.5 sans-serif;*/
  }

  
  .card .value {
    font-weight: bold;
  }
  

  /*
  .card-item-status {
    justify-self: start;
  }
  */

  .card-item-direction {
    display: none !important;
  }

  .card-item-date-relevant {
    display: none !important;
  }


    .card-item-details div:last-of-type {
        margin-right:0px;
    }
    .card-item-meta div:last-of-type {
        margin-right:0px;
    }

    .card-item-meta div, .card-item-details div {
        flex:1;
    }

    .card-item-meta, .card-item-details, .card-item-status {
      margin-top: 0;
    }


}

@media (max-width: 799px) {


  .listheader {
    display:none !important;
  }

  .tablevalue {
    display: none !important;
  }

  .card-item-user-count.empty {
    display: none !important;
  }

  .card-item-next,
  .card-item-prev {
    display: none !important;
  }


  .card .grid-container.transactions .card-item-date {
    display: none !important;
  }
  

}


.card .highlighted {
  /*color: lightblue !important;*/
  color: var(--contrast-color-table) !important;
}




.dynamic-yellow-7,
.dynamic-yellow-8 {
  color: var(--color-dynamic-yellow-1);
}

.dynamic-yellow-9,
.dynamic-yellow-10 {
  color: var(--color-dynamic-yellow-2);
}

.dynamic-yellow-11,
.dynamic-yellow-12 {
  color: var(--color-dynamic-yellow-3);
}

.dynamic-yellow-13,
.dynamic-yellow-14 {
  color: var(--color-dynamic-yellow-4);
}

.dynamic-yellow-15,
.dynamic-yellow-16 {
  color: var(--color-dynamic-yellow-5);
}

.dynamic-yellow-17,
.dynamic-yellow-18,
.dynamic-yellow-19 {
  color: var(--color-dynamic-yellow-6);
}

.dynamic-yellow-20,
.dynamic-yellow-21,
.dynamic-yellow-22,
.dynamic-yellow-23,
.dynamic-yellow-24 {
  color: var(--color-dynamic-yellow-7);
}

.dynamic-yellow-25,
.dynamic-yellow-26,
.dynamic-yellow-27,
.dynamic-yellow-28,
.dynamic-yellow-29 {
  color: var(--color-dynamic-yellow-8);
}


.dynamic-yellow-30 {
  color: var(--color-dynamic-yellow-9);
}