/* styles.css */

/* 1) Global reset / base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background-color: #E3F2FD; /* light-blue background */
  color: #000;                /* black text */
  font-family: sans-serif;
  line-height: 1.4;
  padding: 16px;
}

/* 2) Container max-width (centers on größeren Bildschirmen) */
.container {
  max-width: 400px;
  margin: 0 auto;
}

/* 3) Form-Elemente */
form {
  margin-top: 24px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

input[type="date"],
input[type="number"],
button {
  width: 100%;
  font-size: 1rem;
  padding: 10px;
  margin-bottom: 16px;
  border-radius: 4px;
  border: 1px solid #999;
}

input[type="date"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

/* 4) Value-Button-Reihe (für sell_form.php) */
#valueButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

#valueButtons button {
  flex: 1 1 calc(33.333% - 8px);
  background-color: #FFF;
  color: #000;
  border: 1px solid #999;
  cursor: pointer;
}

#valueButtons button:hover {
  background-color: #f0f0f0;
}

/* 5) Primäre Aktions-Buttons */
button[type="button"],
button[type="submit"] {
  background-color: #2196F3; /* kräftiges Blau */
  color: #FFF;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button[type="button"]:hover,
button[type="submit"]:hover {
  background-color: #1976D2;
}

/* 6) Hidden/visible-Zustand für Bestätigungsbereich in sell_form.php */
#confirmationForm {
  display: none;
  margin-top: 24px;
}

/* 7) Zusammenfassungsbereich in sell_form.php */
#summary {
  margin-top: 24px;
  padding: 12px;
  background-color: #FFF;
  border: 1px solid #CCC;
  border-radius: 4px;
  word-wrap: break-word;
}

/* 8) Ergebnisbereich in redeem.html */
#redeemResult {
  margin-top: 24px;
  word-wrap: break-word;
}

/* 9) Alert-/Response-Klassen für redeem.html */
.alert {
  padding: 12px;
  border-radius: 4px;
  margin-top: 16px;
  font-size: 0.95rem;
}

.alert-valid {
  background-color: #DFF0D8;  /* hellgrün */
  color: #3C763D;             /* dunkelgrüner Text */
}

.alert-warning {
  background-color: #FCF8E3;  /* hellgelb */
  color: #8A6D3B;             /* brauner Text */
}

.alert-error {
  background-color: #F2DEDE;  /* hellrot */
  color: #A94442;             /* dunkelroter Text */
}

/* 10) Responsive Tweaks (wenn Viewport < 400px) */
@media (max-width: 400px) {
  h1, h2, h3, label {
    font-size: 1.1rem;
  }

  input, button {
    font-size: 0.95rem;
  }
}

/* 11) Status-Text-Betonnung */
.status-text {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 12) Tabellen-Styling für list_vouchers.php */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}

table th,
table td {
  border: 1px solid #CCC;
  padding: 8px;
  text-align: left;
}

table th {
  background-color: #F5F5F5;
}

/* 13) Status-Hintergrund in Liste */
.status-open {
  background-color: #DFF0D8; /* hellgrün */
}

.status-lost {
  background-color: #F2DEDE; /* hellrot */
}

/* used behält transparenten Hintergrund */