/*
 * Domain-spezifisches Styling für "Gift". Nutzt ausschließlich
 * Variablen/Klassen aus css/base/*. Nur Feinheiten, die spezifisch
 * für die Gift-Darstellung sind, landen hier.
 */

.gift-card__dose {
  font-weight: 700;
  color: var(--text-bright);
}

.gift-card__rank-list {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.gift-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: nowrap;
}

.gift-toolbar .search-input-wrap {
  flex: 1;
  min-width: 120px;
}

.gift-toolbar [data-gift-new] {
  flex-shrink: 0;
  white-space: nowrap;
}

.gift-toolbar [data-gift-compare] {
  flex-shrink: 0;
  white-space: nowrap;
}

.gift-category-icon {
  font-size: 14px;
}

/* Dreispaltiges Layout mit festen Breiten: Liste (max. 3 Kacheln
   nebeneinander) links, Detail-Panel (bekommt die meiste Breite)
   rechts. Die Sidebar/Menü-Spalte bleibt wie in css/base/layout.css. */
.gift-layout {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  overflow-x: auto;
  height: 100%;
  min-height: 0;
}

.gift-list-column {
  flex: 0 0 720px;
  width: 720px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ziehbarer Slider zwischen Liste und Detail-Panel (nur Desktop –
   siehe Media-Query unten). Breite der Liste wird per Pointer-Drag
   oder Pfeiltasten angepasst, siehe js/domains/gift/gift.resizer.js. */
.gift-layout__resizer {
  flex: 0 0 10px;
  width: 10px;
  min-height: 0;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}

.gift-layout__resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: var(--radius-sm, 4px);
  background: var(--border-subtle);
  transition: background-color 0.12s ease;
}

.gift-layout__resizer:hover::after,
.gift-layout__resizer:focus-visible::after {
  background: var(--brand);
}

.gift-layout__resizer:focus-visible {
  outline: none;
}

/* Während des Ziehens überall col-resize erzwingen und Textmarkierung
   verhindern, auch wenn der Zeiger kurz die Spalte verlässt. */
body.is-resizing-gift-columns,
body.is-resizing-gift-columns * {
  cursor: col-resize !important;
  user-select: none !important;
}

.gift-card--clickable {
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.gift-card--clickable:hover {
  border-color: var(--border-strong);
}

.card.is-selected {
  border-color: var(--brand);
}

/* Markierung fürs ⚖️-Vergleichen: Karte + Button heben sich deutlich
   ab (auffälliger Rahmen, Hintergrund-Tönung + Text-Badge), damit auf
   einen Blick erkennbar ist, welche (bis zu zwei) Gifte gerade zum
   Vergleich markiert sind. */
.card.gift-card--compare-marked {
  border-color: var(--brand);
  border-width: 2px;
  background: color-mix(in srgb, var(--brand) 12%, var(--bg-secondary));
  box-shadow: 0 0 0 1px var(--brand);
}

.gift-card--compare-marked .card__title::after {
  content: "⚖️ zum Vergleich markiert";
  display: block;
  margin-top: var(--space-1);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

.btn--icon.is-marked {
  background: var(--brand);
  color: var(--text-on-brand);
}

.btn--icon.is-marked:hover {
  background: var(--brand-hover);
  color: var(--text-on-brand);
}

.gift-detail {
  flex: 0 0 860px;
  width: 860px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.gift-detail[hidden] {
  display: none;
}

/* Zurück-Leiste: nur auf dem Handy sichtbar, wo das Detail-Panel die
   Liste als Vollbild überdeckt und sonst kein Weg zurück da wäre. */
.gift-detail__mobile-bar {
  display: none;
}

.gift-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.gift-detail__structure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.gift-detail__structure[hidden] {
  display: none;
}

.gift-detail__structure-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  background: #ffffff;
  border-radius: var(--radius-sm);
}

.gift-detail__structure-zoom-trigger {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform 0.1s ease;
}

.gift-detail__structure-zoom-trigger:hover {
  transform: scale(1.03);
}

.gift-detail__structure-caption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.gift-detail__structure--empty {
  padding: var(--space-4);
}

.gift-detail__structure-placeholder {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.gift-detail__title {
  color: var(--text-bright);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.gift-detail__subtitle {
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
  margin-top: 2px;
}

.gift-detail__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.gift-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.gift-detail__section {
  margin-bottom: var(--space-4);
}

.gift-detail__section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.gift-detail__section-body {
  font-size: var(--font-size-md);
  color: var(--text-normal);
  white-space: pre-wrap;
  line-height: 1.5;
}

.gift-detail__source {
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

/* Kartenraster der Gift-Domain: 2 Kacheln nebeneinander, damit die
   Karten bei fester Listenbreite genug Platz haben und nicht
   überlappen. */
.gift-list-column .card-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Mobile: Liste und Detail sind getrennte "Seiten" – das Detail legt
   sich als Vollbild über die Liste und wird über die Zurück-Leiste
   (oder den Browser-/Wisch-Zurück) wieder geschlossen. */
@media (max-width: 768px) {
  .gift-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .gift-toolbar .btn {
    width: 100%;
  }

  .gift-layout {
    flex-direction: column;
    overflow-x: visible;
    height: auto;
  }

  .gift-list-column {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    overflow-y: visible;
  }

  .gift-layout__resizer {
    display: none;
  }

  /* Suchfeld bleibt beim Scrollen der Liste erreichbar. Der
     top-Wert gleicht den negativen Außenabstand aus, weil sticky den
     Margin-Rand (nicht den Border-Rand) ausrichtet – sonst bliebe
     über der Leiste ein Spalt, durch den Karten durchscrollen. */
  .gift-toolbar {
    position: sticky;
    top: calc(-1 * var(--space-3));
    z-index: 5;
    background: var(--bg-primary);
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3);
    padding: var(--space-3);
  }

  .gift-list-column .card-grid {
    grid-template-columns: 1fr;
  }

  .gift-detail {
    position: fixed;
    inset: 0;
    z-index: var(--z-detail-overlay);
    flex: none;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
    padding: 0 calc(var(--space-3) + env(safe-area-inset-right))
      calc(var(--space-6) + env(safe-area-inset-bottom))
      calc(var(--space-3) + env(safe-area-inset-left));
  }

  .gift-detail__mobile-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Voll bis an die Panel-Kanten, trotz seitlichem Padding des Panels */
    margin: 0 calc(-1 * var(--space-3)) var(--space-3);
    padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) var(--space-2);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
  }

  .gift-detail__back {
    flex-shrink: 0;
  }

  .gift-detail__mobile-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Das ✕ oben rechts wäre neben der Zurück-Leiste doppelt gemoppelt */
  .gift-detail__actions [data-gift-detail-close] {
    display: none;
  }

  .gift-detail__structure-img {
    width: 150px;
    height: 150px;
  }

  /* Suchfeld und Knoepfe stehen auf dem Handy untereinander (siehe
     .gift-toolbar oben) und nehmen die volle Breite ein. */
  .gift-toolbar .search-input-wrap {
    width: 100%;
  }

  .gift-toolbar [data-gift-compare],
  .gift-toolbar [data-gift-new] {
    white-space: normal;
  }
}

/* Vergleichsmodal: Tabelle mit den wichtigsten Feldern der zwei markierten Gifte nebeneinander. */
.gift-compare__hint {
  color: var(--text-muted);
}

.gift-compare__table {
  width: 100%;
  border-collapse: collapse;
}

.gift-compare__table th,
.gift-compare__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.gift-compare__table th {
  color: var(--text-bright);
}

.gift-compare__label {
  width: 160px;
  color: var(--text-muted);
  font-weight: 600;
}

.gift-compare__cell--highlight {
  color: var(--danger);
  font-weight: 700;
}

/* Am Desktop steht der Gift-Name schon in der Kopfzeile der Tabelle. */
.gift-compare__who {
  display: none;
}

/* Handy-Layout fuer das Vergleichsmodal. Steht absichtlich am Ende
   der Datei, damit es die Desktop-Regeln darueber ueberschreibt. */
@media (max-width: 768px) {
  /* Vergleich auf dem Handy: Die Tabelle wird nicht seitwaerts
     gescrollt (das findet man kaum), sondern in kleine Karten
     gestapelt. Pro Feld eine Karte mit Ueberschrift, darunter die
     zwei Gifte nebeneinander. */
  .gift-compare__table,
  .gift-compare__table tbody,
  .gift-compare__table tr,
  .gift-compare__table td {
    display: block;
    width: auto;
  }

  .gift-compare__table thead {
    display: none;
  }

  .gift-compare__table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
  }

  .gift-compare__table td {
    border-bottom: none;
    padding: 0;
    overflow-wrap: anywhere;
  }

  .gift-compare__label {
    grid-column: 1 / -1;
    width: auto;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .gift-compare__who {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gift-compare__hint {
    font-size: 15px;
  }
}