/* -----------------------------
 * Bottle-Trade Weinregal Styles
 * Version: 1.0
 * Zwei Ansichten: Kachel und Liste
 * -----------------------------*/

/* Container und Layout */
.shelf-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
}

/* Header-Bereich */
.shelf-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bt-light-gray);
}

.shelf-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--bt-primary);
  margin: 0;
}

.shelf-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Ansicht-Umschalter */
.view-toggle {
  display: flex;
  align-items: center;
  background-color: var(--bt-light-gray);
  border-radius: var(--bt-radius-pill);
  padding: 0.25rem;
  overflow: hidden;
  margin-right: 1rem;
}

.view-toggle__button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: var(--bt-radius-pill);
  color: var(--bt-dark-gray);
  transition: all 0.2s ease;
}

.view-toggle__button:hover {
  color: var(--bt-primary);
}

.view-toggle__button.active {
  background-color: white;
  color: var(--bt-primary);
  font-weight: 600;
  box-shadow: var(--bt-shadow-sm);
}

.view-toggle__button i {
  margin-right: 0.5rem;
}

/* Filter */
.filter-container {
  margin-left: 0.5rem;
}

.filter-form {
  display: flex;
  align-items: center;
}

.filter-option {
  display: flex;
  align-items: center;
}

.filter-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  margin: 0;
}

.filter-label input {
  margin-right: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  box-shadow: 0 2px 8px 0 rgba(60,60,60,0.07);
  background: white;
}

.btn--primary {
  background: linear-gradient(90deg, #2ecc40 0%, #27ae60 100%);
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(46,204,64,0.10);
}

.btn--primary:hover, .btn--primary:focus {
  background: linear-gradient(90deg, #27ae60 0%, #2ecc40 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(46,204,64,0.18);
  transform: translateY(-2px) scale(1.03);
}

.btn--secondary {
  background: linear-gradient(90deg, #00582A 0%, #008040 100%);
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(0,88,42,0.10);
}

.btn--secondary:hover, .btn--secondary:focus {
  background: linear-gradient(90deg, #008040 0%, #00582A 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(0,88,42,0.18);
  transform: translateY(-2px) scale(1.03);
}

.btn--danger {
  background: linear-gradient(90deg, #8B0000 0%, #c0392b 100%);
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(139,0,0,0.10);
}

.btn--danger:hover, .btn--danger:focus {
  background: linear-gradient(90deg, #c0392b 0%, #8B0000 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(139,0,0,0.18);
  transform: translateY(-2px) scale(1.03);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--bt-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--success {
  background-color: rgba(var(--bt-success-rgb), 0.1);
  color: var(--bt-success);
}

.badge--warning {
  background-color: rgba(var(--bt-warning-rgb), 0.1);
  color: var(--bt-warning);
}

.badge--info {
  background-color: rgba(var(--bt-info-rgb), 0.1);
  color: var(--bt-info);
}

/* Kachelansicht */
.wine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* Card-Header (falls vorhanden) */
.form-card__header, 
.wine-card__header {
  background: linear-gradient(135deg, #444, #333);
  color: white;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-card__title,
.wine-card__header-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: white;
}

.wine-card {
  background-color: white;
  border-radius: var(--bt-radius);
  overflow: hidden;
  box-shadow: var(--bt-card-shadow);
  transition: var(--bt-transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bt-light-gray);
}

.wine-card:hover {
  box-shadow: var(--bt-card-hover-shadow);
  transform: translateY(-5px);
}

.wine-card__image {
  height: 180px;
  overflow: hidden;
  position: relative;
  background-color: var(--bt-light-gray);
}

.wine-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wine-card:hover .wine-card__image img {
  transform: scale(1.05);
}

.wine-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--bt-gray);
}

.wine-card__content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wine-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--bt-primary);
}

.wine-card__year {
  font-size: 1rem;
  color: var(--bt-dark-gray);
  margin: 0 0 0.25rem;
}

.wine-card__region {
  font-size: 0.9rem;
  color: var(--bt-dark-gray);
  margin: 0 0 1rem;
}

.wine-card__status {
  margin-bottom: 1rem;
}

.wine-card__details {
  margin-bottom: 1rem;
  flex: 1;
}

.wine-card__detail {
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.wine-card__detail-label {
  font-weight: 600;
  width: 40%;
  color: var(--bt-dark-gray);
}

.wine-card__detail-value {
  width: 60%;
}

.wine-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

/* Listenansicht */
.wine-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wine-list-item {
  background-color: white;
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-card-shadow);
  transition: var(--bt-transition);
  border: 1px solid var(--bt-light-gray);
  display: flex;
  overflow: hidden;
}

.wine-list-item:hover {
  box-shadow: var(--bt-card-hover-shadow);
  transform: translateY(-3px);
}

.wine-list-item__image {
  width: 120px;
  min-width: 120px;
  background-color: var(--bt-light-gray);
  position: relative;
}

.wine-list-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wine-list-item__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--bt-gray);
}

.wine-list-item__content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.wine-list-item__main {
  flex: 1;
  min-width: 250px;
}

.wine-list-item__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--bt-primary);
}

.wine-list-item__subtitle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.wine-list-item__year {
  font-size: 0.9rem;
  color: var(--bt-dark-gray);
  margin: 0;
}

.wine-list-item__region {
  font-size: 0.9rem;
  color: var(--bt-dark-gray);
  margin: 0;
}

.wine-list-item__details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}

.wine-list-item__detail {
  display: flex;
  font-size: 0.85rem;
}

.wine-list-item__detail-label {
  font-weight: 600;
  color: var(--bt-dark-gray);
  margin-right: 0.5rem;
}

.wine-list-item__actions {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border-left: 1px solid var(--bt-light-gray);
}

/* Leeres Regal */
.empty-shelf {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  background-color: white;
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-card-shadow);
}

.empty-shelf i {
  font-size: 4rem;
  color: var(--bt-gray);
  margin-bottom: 1rem;
}

.empty-shelf p {
  font-size: 1.2rem;
  color: var(--bt-dark-gray);
  margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .shelf-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .shelf-header h1 {
    margin-bottom: 1rem;
  }
  
  .shelf-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .wine-list-item {
    flex-direction: column;
  }
  
  .wine-list-item__image {
    width: 100%;
    height: 120px;
  }
  
  .wine-list-item__actions {
    border-left: none;
    border-top: 1px solid var(--bt-light-gray);
    padding: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.wine-card.wine-card--own,
.wine-card.wine-card--own > .wine-card__content {
  background-color: #f5f5f5;
  border: 2px solid #90ee90aa;
  box-shadow: 0 0 0 2px #90ee9055;
}

.wine-card.wine-card--own {
  background-color: rgba(240, 255, 240, 0.75);
  border: 2px solid #90ee90aa;
  box-shadow: 0 0 0 2px #90ee9055;
}

/* --- Eigene Weinkarte: Kachelansicht, komplett ohne Rahmen und Schatten --- */
.wine-grid .wine-card.wine-card--own,
.wine-card.wine-card--own,
.wine-card.wine-card--own > .wine-card__content {
  background-color: rgba(240, 255, 240, 0.75);
  border: none;
  box-shadow: none;
}

/* --- Eigene Weinkarte: Listenansicht, noch helleres Pastellgrün mit 0.75 Transparenz --- */
.wine-list-item.wine-list-item--own {
  background-color: rgba(240, 255, 240, 0.75);
}