/* === TravelBrick UX Improvements === */

/* Einheitliche Buttons */
.btn, .btn2 {
  min-width: 150px;
  text-align: center;
  font-size: 14px;
  line-height: 1.1;
}

/* iOS: gleiche Schrift für <a> und <button> */
button.btn, button.btn2 { font: inherit; }

@media (min-width: 820px) {
  .btn, .btn2 { min-width: 150px; }
}

/* Button-Reihe */
.btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Einklappbereiche */
.tb-details summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
}
.tb-details .tb-details-body {
  padding-top: 10px;
}


/* === Trip-Detail: Bricks als responsive Grid (statt Table-Scroll) === */
.tb-bricks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tb-brick {
  display: grid;
  grid-template-columns: 120px 1fr 220px 160px;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  background: #fff;
  align-items: start;
}

.tb-brick--readonly {
  grid-template-columns: 120px 1fr 220px;
}

.tb-brick-time { white-space: nowrap; }
.tb-brick-main { min-width: 0; }
.tb-brick-title { font-weight: 900; margin-top: 6px; }
.tb-brick-files { min-width: 0; }
.tb-brick-files a { overflow-wrap: anywhere; }

.tb-brick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.tb-brick-attach { margin-top: 8px; }
/* Thumbnail */
.brick-thumb {
  width: 120px;
  height: auto;
  border-radius: 10px;
  cursor: zoom-in;
  border: 1px solid rgba(0,0,0,.12);
}
.brick-thumb:hover {
  opacity: .9;
}

/* Brick: bis zu 3 Foto-Slots */
.tb-photo-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.tb-photo-slot{
  position:relative;
}
.tb-photo-badge{
  position:absolute;
  left:8px;
  top:8px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.12);
}

/* Lightbox */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  place-items: center;
  z-index: 9999;
  padding: 20px;
}
#lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 980px) {
  .grid2 { grid-template-columns: 1fr !important; }
  table { font-size: 14px; }
  .btn, .btn2 { width: 100%; min-width: 0; }

  /* Bricks stacken (keine gequetschten Spalten auf Mobile/iOS Desktop-Viewport) */
  .tb-brick,
  .tb-brick--readonly { grid-template-columns: 1fr; }

  .tb-brick-time { white-space: normal; }

  /* Actions nebeneinander, gleiche Größe */
  .tb-brick-actions { flex-direction: row; flex-wrap: wrap; }
  .tb-brick-actions .btn2 { width: auto; flex: 1 1 140px; }
  .tb-brick-actions form { flex: 1 1 140px; }
  .tb-brick-actions form .btn2 { width: 100%; }

  .brick-thumb { width: 100%; max-width: 240px; }
}