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

.page-head{
  width: 85%;
  margin-top: 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .8rem;
}
.page-head h1{
  font-size: 1.25rem;
  font-weight: 900;
}

.btn-home{
  display:inline-flex;
  align-items:center;
  padding:.55rem .85rem;
  border-radius:1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  text-decoration:none;
  font-weight:900;
  font-size:.8rem;
}
.btn-home:active{ transform: scale(.99); }

.card{
  width: calc(85% - 2rem);
  margin: 1rem 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);
  padding: 1rem;
  display:flex;
  flex-direction:column;
  gap: .9rem;
}

/* Filter */
.filter{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.input{
  width:100%;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
  color: var(--text-primary);
  padding: .65rem .75rem;
  border-radius: .95rem;
  font-weight: 800;
  font-size: .9rem;
  outline:none;
}
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
  color: var(--text-secondary);
  font-weight: 900;
  font-size: .72rem;
  padding: .45rem .7rem;
  border-radius: 999px;
}
.chip.is-active{
  color: var(--text-primary);
  border-color: var(--border-color);
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
}
.card-head h2{
  margin:0;
  font-size: .95rem;
  font-weight: 900;
}
.muted{ color: var(--text-secondary); opacity: .8; font-size: .8rem; }

.ghost{
  background: transparent;
  border: 1px solid var(--divider-color);
  color: var(--text-secondary);
  padding: .45rem .7rem;
  border-radius: .9rem;
  font-weight: 900;
  font-size: .75rem;
}
.ghost:active{ transform: scale(.99); }

/* Icons */
.ico{
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .85rem;
  object-fit: cover;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}

/* Timeline */
.timeline{ display:flex; flex-direction:column; gap: 1rem; }
.day{ display:flex; flex-direction:column; gap: .55rem; }
.day-title{
  font-size: .8rem;
  font-weight: 900;
  color: var(--text-secondary);
  letter-spacing: .03em;
}
.log-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: .8rem;
  padding: .65rem .7rem;
  border-radius: .95rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
}
.log-left{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.log-title{ font-weight: 900; font-size: .9rem; }
.log-sub{ color: var(--text-secondary); opacity:.9; font-weight:800; font-size:.75rem; }

.log-right{
  font-weight: 900;
  font-size: .95rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}
.plus{ color: rgba(46, 204, 113, .95); }
.minus{ color: rgba(231, 76, 60, .95); }

.btn-full{
  width:100%;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
  color: var(--text-primary);
  padding: .65rem .85rem;
  border-radius: .95rem;
  font-weight: 900;
  font-size: .8rem;
}
.btn-full:active{ transform: scale(.99); }

/* Tiles für Gesamtverbrauch */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
@media (max-width: 420px){
  .grid{ grid-template-columns: 1fr; }
}
.stat-tile{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-align:left;

  padding: .75rem;
  border-radius: 1rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
}
.tile-title{ font-weight: 900; font-size: .9rem; }
.tile-value{ font-weight: 900; font-size: .95rem; }
.tile-value span{ color: var(--text-secondary); opacity:.9; font-size:.75rem; font-weight: 900; }

/* Stock list */
.stock-list{ display:flex; flex-direction:column; gap:.55rem; }
.stock-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  padding: .65rem .7rem;
  border-radius: .95rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--divider-color);
  text-align:left;
}
.stock-left{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.stock-title{ font-weight: 900; font-size: .9rem; }
.stock-sub{ color: var(--text-secondary); opacity:.9; font-weight:800; font-size:.75rem; }

.stock-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.35rem;
  white-space:nowrap;
}
.qty{ font-weight: 900; font-size: .95rem; }
.qty span{ color: var(--text-secondary); opacity:.9; font-size:.75rem; font-weight:900; }

.badge{
  font-size: .7rem;
  font-weight: 900;
  padding: .18rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-secondary);
}
.badge.ok{ color: rgba(46, 204, 113, .95); border-color: rgba(46, 204, 113, .25); }
.badge.low{ color: rgba(241, 196, 15, .95); border-color: rgba(241, 196, 15, .25); }
.badge.out{ color: rgba(231, 76, 60, .95); border-color: rgba(231, 76, 60, .25); }