@import url(./base.css);
@import url(./navbar.css);


/*HERO*/

.hero-balance {
  margin: 1.5rem;
  padding: 1.8rem 1.5rem;
  background: linear-gradient(
    145deg,
    var(--bg-surface),
    var(--bg-surface-2)
  );
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);

  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: center;

  width: calc(85% - 3rem);
}

/* Überschrift */
.hero-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Betrag */
.hero-amount {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.hero-amount.loading {
  color: var(--text-muted);
}

/* Farben je nach Status */
.hero-amount.positive {
  color: var(--green-main);
}

.hero-amount.negative {
  color: var(--negative);
}

/* Subtext */
.hero-sub {
  font-size: .7rem;
  color: var(--text-muted);
  opacity: .6;
}


/* #################### */
/* ##### Dashboard ##### */
/* #################### */

/* Wrapper für Abstand – wie Hero */
.dash-section{
  margin-bottom: 1.5rem;
  width: 85%;
}

/* Card */
.dash-card{
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);
  padding: 1rem;

  text-decoration: none;
  color: inherit;

  display: flex;
  flex-direction: column;
  gap: .9rem;

  
}

.dash-card:active{
  transform: scale(0.99);
}

/* Header */
.dash-card-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.dash-title{
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.dash-link{
  font-size: .75rem;
  color: var(--text-secondary);
  opacity: .8;
}

/* Liste */
.dash-list{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.dash-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;

  padding: .65rem .7rem;
  border-radius: .9rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
}

.dash-row-left{
  display: flex;
  align-items: center;
  gap: .6rem;

  font-size: .85rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.dash-row-left i{
  width: 1.4rem;
  display: grid;
  place-items: center;
}

/* Werte */
.dash-value{
  font-size: 1rem;
  font-weight: 900;
}

.dash-value.loading{
  color: var(--text-muted);
}

/* Platzhalter */
.dash-placeholder{
  display: grid;
  place-items: center;
  min-height: 5.2rem;
  border-radius: .9rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
}

.dash-muted{
  color: var(--text-muted);
  font-size: .8rem;
}


.dash-values{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  gap: .15rem;
}

.dash-subvalue{
  font-size: .75rem;
  font-weight: 800;
  color: var(--text-secondary);
  opacity: .85;
}

.dash-subvalue.loading{
  color: var(--text-muted);
  opacity: 1;
}















.tx-list{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.tx-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;

  padding: .65rem .7rem;
  border-radius: .9rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
}

.tx-left{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0; /* wichtig für ellipsis */
}

.tx-title{
  font-size: .85rem;
  font-weight: 900;
  color: var(--text-primary);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem; /* falls du willst, anpassen */
}

.tx-meta{
  font-size: .72rem;
  color: var(--text-secondary);
  opacity: .85;
}

.tx-amount{
  font-size: .95rem;
  font-weight: 900;
  white-space: nowrap;
}

.tx-amount.positive{ color: var(--green-main); }
.tx-amount.negative{ color: var(--negative); }

.tx-row.loading .tx-title,
.tx-row.loading .tx-meta,
.tx-row.loading .tx-amount{
  color: var(--text-muted);
}









/* #################### */
/* #### Split-Cards ### */
/* #################### */


/* Split-Card: zwei Mini-Karten nebeneinander (mobile-tauglich) */
.dash-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Wenn es ganz eng wird, stapeln */
@media (max-width: 360px){
  .dash-split{ grid-template-columns: 1fr; }
}

.mini-card{
  border: 1px solid var(--border-color);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);

  background: var(--bg-surface-2);
  padding: .9rem;

  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.mini-title{
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mini-big{
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-primary);
}

.mini-sub{
  font-size: .75rem;
  color: var(--text-muted);
  opacity: .85;
}

.loading{
  color: var(--text-muted) !important;
}


/* ========================= */
/* Wetter (clean & kompakt)  */
/* ========================= */

#mini-weather{
  gap: .5rem;
}

/* Temp + Zustand nebeneinander, NICHT 3 Spalten */
.weather-top{
  display: flex;
  align-items: baseline;
  gap: .65rem;
}

/* große, “zentralere” Zahl */
.weather-temp{
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Zustand daneben, darf umbrechen */
.weather-desc{
  font-size: .95rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;

  /* 2 Zeilen max, dann sauber abgeschnitten */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Details unten: schön kompakt, darf umbrechen */
.weather-sub{
  font-size: .78rem;
  color: var(--text-secondary);
  opacity: .9;
  line-height: 1.25;
  white-space: normal;
}

/* optionaler Footer ultra klein */
.weather-foot{
  font-size: .68rem;
  color: var(--text-muted);
  opacity: .65;
  line-height: 1.2;
}

/* Mini-Card etwas tighter (optional, aber meist besser) */
.mini-card{
  padding: .8rem;
  gap: .45rem;
}

/* ============ */
/* Skeleton     */
/* ============ */
.sk{
  color: transparent !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.12),
    rgba(255,255,255,.06)
  );
  background-size: 200% 100%;
  border-radius: .35rem;
  animation: sk 1.15s linear infinite;
}
@keyframes sk { to { background-position: -200% 0; } }

/* Skeleton Größen */
#weather-temp.sk{ width: 3.2ch; height: 2.1rem; display:inline-block; }
#weather-desc.sk{ width: 12ch; height: 1.9rem; display:inline-block; } /* 2 Zeilen */
#weather-sub.sk{ width: 18ch; height: 1.2rem; display:block; }


/* ========================= */
/* Hütteninfos (Stats-Grid)  */
/* ========================= */

#mini-info{ gap: .55rem; }

.info-grid{
  display: grid;
  grid-template-columns: 1fr; /* 👈 NUR EINE SPALTE */
  gap: .4rem;
}

/* Jede Stat-Zeile als kleines “Chip” */
.info-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .75rem;
  padding: .25rem .55rem;

  display: flex;
  flex-direction: column;
  gap: .15rem;

  min-width: 0;
}

.info-label{
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-value{
  font-size: .9rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-sub{
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .75;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wenn’s mal super eng ist: 1 Spalte */
@media (max-width: 360px){
  .info-grid{ grid-template-columns: 1fr; }
}