@import url(../../../../assets/css/base.css);
@import url(./huetten_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(100% - 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-hover);
  border: 1px solid var(--divider);
  color: var(--text-main);

  padding: .65rem .75rem;
  border-radius: .95rem;
  font-weight: 800;
  font-size: .9rem;
  outline: none;
}

.input::placeholder {
  color: var(--text-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip {
  background: var(--bg-surface-hover);
  border: 1px solid var(--divider);
  color: var(--text-secondary);

  font-weight: 900;
  font-size: .72rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  opacity: .5;
}

.chip.is-active {
  color: var(--text-main);
  border-color: var(--border-main);
  opacity: 1;
}

.chip:active {
  transform: scale(.99);
}

/* --------------------
   Card Header
   -------------------- */

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.card-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 900;
  color: var(--text-main);
}

.muted {
  color: var(--text-secondary);
  opacity: .8;
  font-size: .8rem;
  font-weight: 800;
}

/* --------------------
   Buttons
   -------------------- */

.btn-full {
  width: 100%;
  background: var(--bg-surface-hover);
  border: 1px solid var(--divider);
  color: var(--text-main);

  padding: .65rem .85rem;
  border-radius: .95rem;
  font-weight: 900;
  font-size: .8rem;
}

.btn-full:active {
  transform: scale(.99);
}

/* --------------------
   Icons
   -------------------- */

.ico {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .85rem;
  object-fit: cover;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

/* --------------------
   Stock List
   -------------------- */

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

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

  width: 100%;
  padding: .65rem .7rem;
  border-radius: .9rem;

  background: var(--bg-surface-hover);
  border: 1px solid var(--divider);
  color: inherit;
  text-align: left;
}

.stock-left {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.stock-title {
  font-weight: 900;
  font-size: .9rem;
  color: var(--text-main);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.stock-sub {
  color: var(--text-secondary);
  opacity: .85;
  font-weight: 800;
  font-size: .72rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.stock-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
  white-space: nowrap;
}

.qty {
  font-weight: 900;
  font-size: .95rem;
  color: var(--text-main);
}

.qty span {
  color: var(--text-secondary);
  opacity: .85;
  font-size: .75rem;
  font-weight: 900;
}

/* --------------------
   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: .9rem;

  background: var(--bg-surface-hover);
  border: 1px solid var(--divider);
}

.log-left {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.log-title {
  font-weight: 900;
  font-size: .9rem;
  color: var(--text-main);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.log-sub {
  color: var(--text-secondary);
  opacity: .85;
  font-weight: 800;
  font-size: .72rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.log-note{
  color: var(--text-secondary);
  opacity: .85;
  font-weight: 800;
  font-size: .72rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.log-right {
  font-weight: 900;
  font-size: .95rem;
  padding: .18rem .55rem;
  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.plus {
  color: var(--money-green);
}

.minus {
  color: var(--negative);
}

/* --------------------
   Gesamtverbrauch
   -------------------- */

#consumptionGrid {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: .7rem;
  overflow-x: scroll;

  width: 100%;
  padding: .75rem;
  border-radius: .9rem;

  background: var(--bg-surface-hover);
  border: 1px solid var(--divider);
  color: inherit;
  text-align: left;
}

.tile-main {
  min-width: 0;
}

.tile-title {
  font-weight: 900;
  font-size: .9rem;
  color: var(--text-main);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-value {
  font-weight: 900;
  font-size: .95rem;
  color: var(--text-main);
}

.tile-value span {
  color: var(--text-secondary);
  opacity: .85;
  font-size: .75rem;
  font-weight: 900;
}

/* --------------------
   Badges
   -------------------- */

.badge {
  font-size: .7rem;
  font-weight: 900;
  padding: .18rem .55rem;
  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text-secondary);
}

.badge.ok {
  color: var(--money-green);
  border-color: rgba(46, 204, 113, .25);
}

.badge.low {
  color: #f1c40f;
  border-color: rgba(241, 196, 15, .25);
}

.badge.out {
  color: var(--negative);
  border-color: rgba(231, 76, 60, .25);
}





.item-group {
  margin-top: 1rem;
}

.item-group:first-child {
  margin-top: 0;
}

.item-group-title {
  margin: 0 0 .65rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  width: fit-content;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.item-group-drink .item-group-title {
  background: rgba(80, 160, 255, .16);
  color: #7ab9ff;
}

.item-group-food .item-group-title {
  background: rgba(255, 180, 80, .18);
  color: #ffbd6b;
}

.item-group-other .item-group-title {
  background: rgba(180, 180, 180, .16);
  color: #cfcfcf;
}

.item-group-list {
  display: grid;
  gap: .55rem;
}

.item-group-food .stock-row,
.item-group-food .stat-tile {
  border-left: 4px solid rgba(255, 180, 80, .75);
}

.item-group-drink .stock-row,
.item-group-drink .stat-tile {
  border-left: 4px solid rgba(80, 160, 255, .75);
}


.group-badge{
    display:inline-flex;
    align-items:center;
    margin-bottom:.45rem;

    padding:.18rem .55rem;

    border-radius:999px;

    font-size:.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.timeline-group-drink {
  border-left: 4px solid rgba(80, 160, 255, .75);
}

.timeline-group-food {
  border-left: 4px solid rgba(255, 180, 80, .75);
}

.timeline-group-other {
  border-left: 4px solid rgba(180, 180, 180, .55);
}