/* ===========================
   Igel Dashboard – v1.2.9
   =========================== */

/* --- Layout & Controls --- */
.igel-dashboard { gap: 1rem; }

.igel-controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

#igel-select {
  min-width: 220px;
  font-size: 1rem;
  padding: .25rem .4rem;
}

.igel-current { font-size: 1.1rem; }
.igel-current strong { font-size: 1.35rem; }

/* Buttons kompakt */
.igel-controls button,
.igel-table-actions button,
.igel-actions button,
#igel-upload-submit,
#igel-zoom-reset {
  font-size: .9rem;
  padding: .25rem .5rem;
  line-height: 1.2;
  height: auto;
  border-radius: 4px;
}

/* Vergleichs-Bereich (initial ausgeblendet via JS) */
.igel-compare { margin-bottom: .25rem; }

/* --- Grid: einspaltig, Chart unter Tabelle --- */
.igel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  align-items: start;
}

/* ===========================
   Tabelle (scrollbar, sticky header)
   =========================== */

/* --- Scrollbereich + Sticky Header (robust) --- */
.igel-table-wrap {
  position: relative;       /* wichtig für z-index-Kontext */
  max-height: 420px;        /* ~10 Zeilen; bei Bedarf anpassen */
  overflow: auto;           /* erzeugt den Scroll-Container */
  border: 1px solid #ddd;
  border-top: 0;
}

/* Für sticky thead funktionieren 'separate' & keine sub-overflows am <table> am besten */
#igel-table {
  width: 100%;
  border-collapse: separate; /* statt collapse; vermeidet Sticky-Probleme */
  border-spacing: 0;
  table-layout: fixed;
  border-top: 1px solid #ddd;
}

/* Kopfzeile bleibt kleben */
#igel-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;                     /* über Body-Zellen */
  background: #f7f7f9;            /* deckt darunterliegenden Inhalt ab */
  background-clip: padding-box;   /* verhindert "Durchscheinen" bei sticky */
  border-bottom: 1px solid #ddd;
}

/* Optional: verhindert kleine 1px-Gaps bei Scroll */
#igel-table th, #igel-table td {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
#igel-table th:last-child, #igel-table td:last-child { border-right: 0; }

/* ==== Galerie (robust) ==== */
.igel-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}

.igel-thumb-wrap { position: relative; }

.igel-thumb {
  display: block;
  border: 1px solid #eee;
  padding: 2px;
  border-radius: 4px;
  background: #fff;
  text-decoration: none; /* falls Theme Links unterstreicht */
}

.igel-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 3px;
  object-fit: cover;
  /* Optional: feste Kachelproportionen, falls du magst: */
  /* aspect-ratio: 4 / 3; */
}

/* Delete-Button auf Thumbnails */
.igel-del {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(0,0,0,.6);
  color:#fff; border:none; border-radius:4px;
  width:28px; height:28px; line-height:28px; font-size:16px; cursor:pointer;
}
.igel-del:hover { background: rgba(0,0,0,.8); }

/* Lightbox */
.igel-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.igel-lightbox.open { display: flex; }
.igel-lb-img { max-width: 90vw; max-height: 90vh; }
.igel-lb-close, .igel-lb-prev, .igel-lb-next {
  position: absolute; background: rgba(255,255,255,.15); border: none; color: #fff;
  font-size: 2rem; line-height: 1; width: 44px; height: 44px; border-radius: 4px; cursor: pointer;
}
.igel-lb-close { top: 12px; right: 12px; }
.igel-lb-prev  { left: 12px;  top: 50%; transform: translateY(-50%); }
.igel-lb-next  { right: 12px; top: 50%; transform: translateY(-50%); }
.igel-lb-close:hover, .igel-lb-prev:hover, .igel-lb-next:hover { background: rgba(255,255,255,.25); }

/* Controls in zwei Zeilen */
.igel-controls { display: grid; gap: .5rem; }
.igel-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Obere Zeile: Label groß, Select daneben */
.igel-label-strong {
  font-size: 1.15rem;
  font-weight: 600;
  margin-right: .25rem;
}
#igel-select {
  min-width: 240px; /* gern anpassen */
  font-size: 1rem;
  padding: .25rem .4rem;
}

/* Untere Zeile: bleibt kompakt */
.igel-controls-row--bottom input#igel-new-name {
  min-width: 220px;
  padding: .3rem .4rem;
}

/* Login kompakt für Sidebar */
.igel-login { max-width: 100%; }
.igel-login form { margin: 0; }
.igel-login--small input[type="text"],
.igel-login--small input[type="email"],
.igel-login--small input[type="password"] {
  width: 100%;
  font-size: .95rem;
  padding: .35rem .45rem;
  line-height: 1.2;
  margin: .25rem 0;
  box-sizing: border-box;
}
.igel-login--small p { margin: .25rem 0; }
.igel-login--small .forgetmenot { display: flex; align-items: center; gap: .35rem; }
.igel-login--small #igel-submit {
  font-size: .9rem;
  padding: .3rem .6rem;
  line-height: 1.2;
  border-radius: 4px;
}
.igel-login-links { font-size: .9rem; opacity: .9; }