/* ==========================================
   ACTION COLORS (Table row backgrounds)
   ========================================== */
.table tbody tr.bg-buy-action td {
  background-color: #d1f7d1 !important; /* Medium-light green */
}

.table tbody tr.bg-sell-action td {
  background-color: #f8cccc !important; /* Medium-light red */
}

.table tbody tr.bg-withdraw-action td {
  background-color: #cddffd !important; /* Softer but more distinct blue */
}

.table tbody tr.bg-deposit-action td {
  background-color: #fff3a6 !important; /* Brighter yellow */
}

.table tbody tr.bg-dividend-action td {
  background-color: #ffe8b3 !important; /* Warm peach tone */
}


/* ==========================================
   TAULA DE CORRELACIONS
   ========================================== */
.correlation-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 0;
  font-size: 0.4rem;
}

.correlation-table th,
.correlation-table td {
  padding: 2px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.4rem;
  font-weight: 500;
  color: #fff;
  border: 1px solid #dee2e6;
  word-wrap: break-word;
  margin: 0;
}

.correlation-table th {
  background-color: #f8f9fa;
  color: #212529;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 2;
}

.correlation-table td[style*="#ffffff"] {
  color: #000 !important; /* Text negre si fons blanc */
}


/* ==========================================
   TARGETES: Correlation & Chart
   ========================================== */
.correlation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: 0;
  width: 100%;
  height: 100%;
}

.correlation-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.correlation-card .card-title {
  text-align: left;
  padding-left: 15px;
}

.card-body.chart-card {
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.card-body.chart-card h6 {
  margin-top: 35px;
  margin-bottom: 20px;
}


/* ==========================================
   GRÀFIC PORTFOLIO
   ========================================== */
   
/*  OLD-------------------------
#portfolioChart {
  width: 100% !important;
  height: 280px !important;
  margin: 0 0 25px 0;
}
*/

#portfolioPieChart {
  width: 100% !important;
  max-height: 350px;  /* o una alçada que et vagi bé */
  height: auto !important;
  display: block;
  margin:  0 0 25px 0;
}



/* ==========================================
   RESPONSIVE: TAULA DE CORRELACIONS
   ========================================== */
@media (max-width: 1200px) {
  .correlation-table {
    font-size: 0.35rem;
  }
}

@media (max-width: 992px) {
  .correlation-table {
    font-size: 0.3rem;
  }
}

@media (max-width: 768px) {
  .correlation-table {
    font-size: 0.25rem;
  }
}

@media (max-width: 576px) {
  .correlation-table {
    font-size: 0.2rem;
  }
}

/* Estil per a la taula de correlacions dins del modal */
.modal-correlation-table .correlation-table {
    font-size: 0.5rem;  /* Augmentem la mida de la font per a la taula dins del modal */
}

/* Ajustem la mida de la font per als encapçalaments i cèl·lules dins del modal */
.modal-correlation-table .correlation-table th,
.modal-correlation-table .correlation-table td {
    padding: 4px;  /* Aumentem una mica el padding per millorar la llegibilitat */
    font-size: 0.6rem;  /* Augmentem la mida de la font dels textos a les cel·les */
}

.modal-correlation-table .correlation-table td[style*="#ffffff"] {
    color: #000 !important;  /* Text negre sobre fons blanc dins del modal */
}