/* ============================================================
   galerie.css — Bildergalerie pro LAN
   ============================================================ */

:root {
  --orange:    #FF6B00;
  --orange-d:  #cc5400;
  --dark:      #0a0a0a;
  --dark2:     #111111;
  --dark3:     #1a1a1a;
  --grey:      #2a2a2a;
  --grey2:     #3a3a3a;
  --text:      #e8e8e8;
  --text-dim:  #aaa;
  --green:     #4ade80;
  --red:       #f87171;
  --yellow:    #facc15;
  --blue:      #3b82f6;
  --purple:    #a855f7;
}

body.light {
  --dark:  #f5f5f5;
  --dark2: #ffffff;
  --dark3: #ececec;
  --grey:  #d4d4d4;
  --grey2: #bababa;
  --text:  #1a1a1a;
  --text-dim: #555;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--dark);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  min-height: 100vh;
}

/* ── HEADER ─────────────────────────────────────────────── */
.intern-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem;
  background: var(--dark2);
  border-bottom: 1px solid var(--grey);
}
.intern-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem; letter-spacing: .15em;
}
.intern-brand span { color: var(--orange); }
.intern-header-right { display: flex; align-items: center; gap: 1rem; }

.user-badge {
  border: 1px solid var(--grey);
  padding: .25rem .6rem;
  letter-spacing: .1em;
  font-size: .8rem;
  display: flex; align-items: center; gap: .4rem;
}
.role-chip {
  font-size: .65rem; letter-spacing: .1em; font-weight: 700;
  padding: .2rem .5rem; border-radius: 2px;
}
.role-owner    { background: var(--orange); color: #000; }
.role-editor   { background: var(--blue);   color: #fff; }
.role-reporter { background: var(--green);  color: #000; }
.role-player   { background: var(--yellow); color: #000; }
.role-taktiker { background: var(--purple); color: #fff; }

.theme-toggle-wrap {
  display: flex; align-items: center; gap: .4rem;
  font-family: 'Share Tech Mono', monospace; font-size: .6rem;
  letter-spacing: .1em;
}
.theme-toggle {
  width: 44px; height: 24px; position: relative;
  background: var(--grey2); border: none; border-radius: 12px; cursor: pointer;
}
.theme-toggle::after {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 16px; height: 16px; background: var(--orange);
  border-radius: 50%; transition: transform .2s;
}
body.light .theme-toggle::after { transform: translateX(20px); }

.btn {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  border: 1px solid var(--grey); background: transparent; color: var(--text);
  padding: .4rem .9rem; cursor: pointer;
  letter-spacing: .05em; text-decoration: none; display: inline-block;
  transition: background .15s, border-color .15s;
}
.btn-sm { padding: .25rem .6rem; font-size: .82rem; }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #000; }
.btn-primary:hover { background: var(--orange-d); border-color: var(--orange-d); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--dark3); }
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── PAGE BODY ──────────────────────────────────────────── */
.page-body { padding: 2rem; max-width: 1400px; margin: 0 auto; }
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem; letter-spacing: .2em; margin-bottom: .3rem;
}
.page-sub {
  color: var(--text-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: .8rem; letter-spacing: .1em;
  margin-bottom: 2rem;
}

/* ── ALBUMS ─────────────────────────────────────────────── */
.g-loading { color: var(--text-dim); padding: 2rem 0; }
.g-empty {
  background: var(--dark2); border: 1px dashed var(--grey);
  padding: 2rem; text-align: center; color: var(--text-dim);
}
.albums-container { display: flex; flex-direction: column; gap: 1rem; }

.album-card {
  background: var(--dark2);
  border: 1px solid var(--grey);
  transition: border-color .15s;
}
.album-card.expanded { border-color: var(--orange); }

.album-head {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.2rem; cursor: pointer; user-select: none;
}
.album-head:hover { background: var(--dark3); }

.album-toggle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem; color: var(--orange); width: 18px; text-align: center;
}
.album-cover {
  width: 56px; height: 56px; object-fit: cover; flex-shrink: 0;
  background: var(--dark3); border: 1px solid var(--grey);
}
.album-cover-placeholder {
  width: 56px; height: 56px; background: var(--dark3); border: 1px solid var(--grey);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 1.5rem; flex-shrink: 0;
}
.album-info { flex: 1; min-width: 0; }
.album-title-line {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem; letter-spacing: .1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem; color: var(--text-dim); letter-spacing: .08em;
  margin-top: .2rem;
}
.album-meta .album-count { color: var(--orange); }
.album-badges { display: flex; gap: .4rem; }
.album-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: .65rem; letter-spacing: .1em; padding: .2rem .5rem;
  border: 1px solid var(--grey); border-radius: 2px;
}
.album-badge.is-public { color: var(--green); border-color: var(--green); }

/* Album body (expanded) */
.album-body { display: none; padding: 0 1.2rem 1.2rem; }
.album-card.expanded .album-body { display: block; }

.album-actions {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--grey);
  margin-bottom: .9rem;
}
.album-actions .spacer { flex: 1; }

.toggle-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border: 1px solid var(--grey);
  font-family: 'Share Tech Mono', monospace; font-size: .7rem;
  letter-spacing: .1em; cursor: pointer; user-select: none;
}
.toggle-pill input { margin: 0; cursor: pointer; }
.toggle-pill.active { border-color: var(--green); color: var(--green); }

/* Image grid */
.image-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .5rem;
}
.image-grid-empty { color: var(--text-dim); padding: 1rem 0; }
.gimg {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--dark3); border: 1px solid var(--grey);
  cursor: pointer;
}
.gimg img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .2s;
}
.gimg:hover { border-color: var(--orange); }
.gimg:hover img { transform: scale(1.06); }
.gimg-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .3rem .5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  font-family: 'Share Tech Mono', monospace; font-size: .65rem;
  color: #fff; opacity: 0; transition: opacity .15s;
  letter-spacing: .05em;
}
.gimg:hover .gimg-overlay { opacity: 1; }
.gimg-pubdot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid #fff;
}
.gimg-pubdot.pub-1 { background: var(--green); }
.gimg-pubdot.pub-0 { background: var(--red); }

/* ── MODAL / OVERLAY ─────────────────────────────────────── */
.g-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(4px);
}
.g-modal {
  background: var(--dark2); border: 1px solid var(--grey);
  width: 90%; max-width: 640px; max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.g-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--grey);
}
.g-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem; letter-spacing: .15em;
}
.g-modal-close {
  background: transparent; border: none; color: var(--text);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.g-modal-body { padding: 1.2rem; overflow-y: auto; flex: 1; }
.g-modal-foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .8rem 1.2rem; border-top: 1px solid var(--grey);
}

/* Upload Modal */
.g-upload-album {
  font-family: 'Share Tech Mono', monospace; font-size: .8rem;
  color: var(--orange); margin-bottom: .8rem; letter-spacing: .1em;
}
.g-dropzone {
  border: 2px dashed var(--grey); padding: 2rem;
  text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.g-dropzone:hover { border-color: var(--orange); background: var(--dark3); }
.g-dropzone.drag-over { border-color: var(--orange); background: rgba(255,107,0,.08); }
.g-dropzone-text { font-size: 1rem; }
.g-dropzone-sub {
  font-family: 'Share Tech Mono', monospace; font-size: .7rem;
  color: var(--text-dim); margin-top: .5rem; letter-spacing: .08em;
}
.g-upload-queue {
  margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem;
  max-height: 260px; overflow-y: auto;
}
.g-queue-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .6rem; background: var(--dark3); border: 1px solid var(--grey);
}
.g-queue-thumb {
  width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; background: var(--dark);
}
.g-queue-info { flex: 1; min-width: 0; }
.g-queue-name {
  font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-queue-desc {
  width: 100%; margin-top: .25rem;
  background: var(--dark); color: var(--text);
  border: 1px solid var(--grey); padding: .25rem .4rem;
  font-family: inherit; font-size: .8rem;
}
.g-queue-status {
  font-family: 'Share Tech Mono', monospace; font-size: .7rem;
  letter-spacing: .08em; flex-shrink: 0; min-width: 80px; text-align: right;
}
.g-queue-status.pending { color: var(--text-dim); }
.g-queue-status.uploading { color: var(--orange); }
.g-queue-status.done { color: var(--green); }
.g-queue-status.error { color: var(--red); }
.g-queue-remove {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1.1rem; padding: 0 .3rem;
}
.g-queue-remove:hover { color: var(--red); }

.g-upload-progress { margin-top: 1rem; }
.g-progress-text {
  font-family: 'Share Tech Mono', monospace; font-size: .75rem;
  margin-bottom: .4rem; letter-spacing: .1em;
}
.g-progress-bar {
  height: 6px; background: var(--dark3); border: 1px solid var(--grey);
  overflow: hidden;
}
.g-progress-fill {
  height: 100%; background: var(--orange); width: 0%;
  transition: width .3s;
}

/* ── LIGHTBOX ───────────────────────────────────────────── */
.g-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.g-lightbox-stage {
  position: relative; width: 92%; height: 92%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
}
.g-lb-img-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 0;
}
.g-lb-img-wrap img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border: 1px solid var(--grey);
}
.g-lb-close, .g-lb-prev, .g-lb-next {
  position: absolute; background: rgba(0,0,0,.5); border: 1px solid var(--grey);
  color: #fff; cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  transition: background .15s, border-color .15s;
}
.g-lb-close { top: 0; right: 0; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.g-lb-prev, .g-lb-next {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 84px; font-size: 2.5rem;
}
.g-lb-prev { left: -1rem; }
.g-lb-next { right: -1rem; }
.g-lb-close:hover, .g-lb-prev:hover, .g-lb-next:hover {
  background: var(--orange); border-color: var(--orange); color: #000;
}

.g-lb-info {
  width: 100%; max-width: 900px;
  background: var(--dark2); border: 1px solid var(--grey);
  padding: .8rem 1rem;
}
.g-lb-meta {
  display: flex; gap: 1rem; font-family: 'Share Tech Mono', monospace;
  font-size: .72rem; color: var(--text-dim); letter-spacing: .08em;
  margin-bottom: .5rem; flex-wrap: wrap;
}
.g-lb-uploader { color: var(--orange); }
.g-lb-desc {
  min-height: 1.5rem; cursor: text;
  padding: .3rem .4rem; border: 1px dashed transparent;
  font-size: .95rem; white-space: pre-wrap; word-wrap: break-word;
}
.g-lb-desc:hover { border-color: var(--grey); }
.g-lb-desc:empty::before {
  content: 'Beschreibung hinzuf\00FCgen\2026';
  color: var(--text-dim); font-style: italic;
}
.g-lb-desc textarea {
  width: 100%; min-height: 4em; background: var(--dark); color: var(--text);
  border: 1px solid var(--orange); padding: .3rem .4rem;
  font-family: inherit; font-size: .95rem;
}
.g-lb-actions {
  display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap;
}

/* ── TOAST ──────────────────────────────────────────────── */
.g-toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: var(--dark2); border: 1px solid var(--orange);
  padding: .7rem 1.2rem; z-index: 3000;
  font-family: 'Share Tech Mono', monospace; font-size: .82rem;
  letter-spacing: .08em;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.g-toast.show { opacity: 1; }
.g-toast.error { border-color: var(--red); color: var(--red); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .intern-header { padding: .8rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .page-body { padding: 1rem; }
  .album-cover, .album-cover-placeholder { width: 44px; height: 44px; }
  .image-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .g-lb-prev { left: 0; }
  .g-lb-next { right: 0; }
}