/* ===========================
   Reset & Grundlegende Einstellungen
   =========================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

/* ===========================
   Container
   =========================== */
.container {
  max-width: 1200px;
  margin: 2em auto;
  background-color: #fff;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Navigation & Menü
   =========================== */
nav {
  background-color: #34495e;
  padding: 0.75em;
  margin-bottom: 1.5em;
}

nav ul.main-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  margin: 0;
  padding: 0;
}

nav ul.main-menu>li {
  position: relative;
  margin: 0 1em;
}

nav ul.main-menu>li>a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

nav ul.main-menu>li:hover>a {
  background-color: #3d5a73;
  border-radius: 4px;
}

/* Dropdown Menüs */
nav ul.main-menu li ul.submenu {
  display: none;
  position: absolute;
  top: 100% !important;
  left: 0 !important;
  background-color: #3d5a73;
  padding: 0.5em 0;
  list-style: none;
  border-radius: 4px;
  min-width: 180px !important;
  z-index: 1000;
}

nav ul.main-menu>li:hover>ul.submenu {
  display: block !important;
}

nav ul.main-menu li ul.submenu li {
  position: relative;
  margin: 0;
}

nav ul.main-menu li ul.submenu li a {
  display: block;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
}

/* Side-Submenu (zweite Ebene) */
nav ul.main-menu li ul.submenu li ul.side-submenu {
  display: none;
  position: absolute;
  top: 0 !important;
  left: 100% !important;
  margin-left: 2px !important;
  background-color: #3d5a73;
  padding: 0.5em 0;
  list-style: none;
  border-radius: 4px;
  min-width: 150px !important;
  z-index: 1100;
}

nav ul.main-menu li ul.submenu li:hover>ul.side-submenu {
  display: block !important;
}

nav ul.main-menu li ul.submenu li ul.side-submenu li a {
  display: block;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
}

/* Hover-Effekte für Menüs */
nav ul.main-menu li a:hover,
nav ul.main-menu li ul.submenu li a:hover,
nav ul.main-menu li ul.submenu li ul.side-submenu li a:hover {
  background-color: #3d5a73 !important;
}

/* ===========================
   Formulare
   =========================== */
form {
  margin: 1em 0;
  display: flex;
  flex-direction: column;
}

form label {
  margin-top: 1em;
  font-weight: 600;
  color: #555;
}

form input,
form select {
  padding: 0.75em;
  margin-top: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

form button {
  margin-top: 1.25em;
  padding: 0.75em;
  background-color: #34495e;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form button:hover {
  background-color: #3d5a73;
}

/* ===========================
   Tabellen
   =========================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table thead {
  background-color: #34495e;
  color: #000;
}

table thead th {
  padding: 0.75em;
  text-align: left;
  font-size: 0.95em;
  cursor: pointer;
}

table tbody td {
  padding: 0.75em;
  border-bottom: 1px solid #eee;
  font-size: 0.95em;
}

table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ===========================
   Listen
   =========================== */
ul.list,
ul.list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9f9;
  padding: 0.75em;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 0.5em;
}

/* ===========================
   Nachrichten
   =========================== */
.message {
  margin-top: 1em;
  padding: 0.75em;
  background-color: #ffecec;
  color: #d8000c;
  border: 1px solid #d8000c;
  border-radius: 4px;
}

.message:empty {
  display: none;
}

.message.info {
  background-color: #d9edf7;
  color: #31708f;
}

.message.warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
}

.message.error {
  background-color: #f2dede;
  color: #a94442;
}

/* ===========================
   Buttons
   =========================== */
.hidden {
  display: none;
}

/* Standard grüner Button */
.green-button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.green-button::before {
  content: "+ ";
  margin-right: 0.5em;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1;
  vertical-align: middle;
}

.green-button:hover {
  background-color: #39ff14;
}

/* Edit-Button (gelb) */
.btn-edit {
  background-color: #f1c40f;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-edit:hover {
  background-color: #f39c12;
}

.btn-edit::before {
  content: "\270E";
  /* Stift-Icon */
  margin-right: 0.5em;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
}

/* Delete-Button (rot) */
.btn-delete {
  background-color: #e74c3c;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-delete:hover {
  background-color: #c0392b;
}

.btn-delete::before {
  content: "\2716";
  /* X-Icon */
  margin-right: 0.5em;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
}

/* Sell-Button (lila, mit $) */
.btn-sell {
  background-color: #9b59b6;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-sell:hover {
  background-color: #8e44ad;
}

.btn-sell::before {
  content: "$ ";
  margin-right: 0.5em;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1;
  vertical-align: middle;
}

/* Reactivate-Button (lila, anderer Farbton) */
.btn-reactivate {
  background-color: #ff00ff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-reactivate:hover {
  background-color: #f653a6;
}

.btn-reactivate::before {
  content: "\21BB";
  /* Reaktions-/Aktualisierungspfeil */
  margin-right: 0.5em;
  font-size: 1.1em;
  font-weight: bold;
}

/* Sold-Zeilen */
.sold {
  background-color: #9b59b6 !important;
  color: #fff;
}

/* ===========================
   Responsivität
   =========================== */
@media (max-width: 768px) {
  nav ul.main-menu {
    flex-direction: column;
  }

  nav ul.main-menu>li {
    margin: 0.5em 0;
  }

  table thead,
  table tbody,
  table th,
  table td,
  table tr {
    display: block;
  }

  table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table tr {
    border: 1px solid #ccc;
    margin-bottom: 1em;
  }

  table td {
    border: none;
    position: relative;
    padding-left: 50%;
    white-space: pre-wrap;
  }

  table td:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    padding-left: 0.75em;
    font-weight: bold;
    white-space: nowrap;
  }
}