/* =====================================================
   AniGa – views.css
   Profil, Admin, Nutzer, Vergleich, Empfehlungen
   Teil von style.css — Reihenfolge der <link>-Tags in index.html
   entspricht der Kaskade und darf nicht vertauscht werden.
   ===================================================== */
/* ===== PROFILE ===== */
.profile-hero
{
  display: flex; align-items: center; gap: 18px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px; margin-bottom: 24px;
}
.profile-avatar
{
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.profile-name
{
  font-size: 1.4rem; font-weight: 700;
}
.profile-email
{
  color: var(--text2); font-size: .88rem;
}
.profile-joined
{
  color: var(--text3); font-size: .78rem; margin-top: 3px;
}

.stats-detail
{
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 16px;
}
.stats-detail h3
{
  font-size: .95rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.stats-detail h3 svg
{
  width: 18px; height: 18px; color: var(--accent);
}
.stats-row
{
  display: flex; flex-direction: column; gap: 8px;
}
.stats-item
{
  display: flex; align-items: center; justify-content: space-between; font-size: .85rem;
}
.stats-item-label
{
  color: var(--text2); display: flex; align-items: center; gap: 7px;
}
.stats-item-val
{
  font-weight: 700; color: var(--text);
}
.stats-dot
{
  width: 8px; height: 8px; border-radius: 50%;
}

/* ===== NO COVER PLACEHOLDER ===== */
.no-cover
{
  width: 100%; height: 100%;
  background: var(--bg2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text3); font-size: 1.5rem;
}
.no-cover span
{
  font-size: .65rem; margin-top: 4px; color: var(--text3);
}

/* ===== RECENTLY UPDATED ===== */
.recent-list
{
  display: flex; flex-direction: column; gap: 8px;
}
.recent-item
{
  display: flex; gap: 12px; align-items: center;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
  cursor: pointer; transition: border-color .2s;
}
.recent-item:hover
{
  border-color: var(--accent);
}
.recent-cover
{
  width: 40px; height: 56px; border-radius: 5px; overflow: hidden;
  background: var(--bg2); flex-shrink: 0;
}
.recent-cover img
{
  width: 100%; height: 100%; object-fit: cover;
}
.recent-info
{
  flex: 1; min-width: 0;
}
.recent-title
{
  font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-meta
{
  font-size: .75rem; color: var(--text2); margin-top: 3px;
}
.recent-updated
{
  font-size: .72rem; color: var(--text3); white-space: nowrap;
}

/* ===== MISC ===== */
.text-muted
{
  color: var(--text2);
}
.text-accent
{
  color: var(--accent);
}
.mt-3
{
  margin-top: 12px;
}
.mt-4
{
  margin-top: 16px;
}
.mb-4
{
  margin-bottom: 16px;
}
.gap-2
{
  gap: 8px;
}
.flex
{
  display: flex;
}
.flex-center
{
  display: flex; align-items: center;
}
.between
{
  justify-content: space-between;
}
.flex-1
{
  flex: 1;
}
.w-full
{
  width: 100%;
}

/* ===== PWA INSTALL BANNER ===== */
.install-banner
{
  position: fixed;
  bottom: calc(var(--nav-h) + 10px); left: 10px; right: 10px;
  background: var(--bg2); border: 1px solid var(--accent);
  border-radius: var(--r); padding: 13px 15px;
  display: flex; align-items: center; gap: 12px;
  z-index: 150; box-shadow: var(--shadow);
  animation: slideUp .3s ease;
}
@keyframes slideUp
{
  from
  {
    transform: translateY(110%); opacity: 0;
  }
  to
  {
    transform: translateY(0); opacity: 1;
  }
}
@media (min-width: 769px)
{
  .install-banner
  {
    bottom: 12px; max-width: 380px; left: auto; right: 12px;
  }
}
.install-banner p
{
  flex: 1; font-size: .83rem; color: var(--text2);
}

/* ===== MANUAL ENTRY FORM ===== */
.form-row
{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.form-row > *
{
  min-width: 0;
} /* Kinder dürfen schrumpfen */
@media (max-width: 540px)
{
  .form-row
  {
    grid-template-columns: 1fr;
  }
}

/* ===== SEARCH RESULT PAGINATION ===== */
.pagination
{
  display: flex; justify-content: center; gap: 8px; margin-top: 24px;
}
.pagination .btn
{
  min-width: 38px; padding: 7px 12px;
}

/* ===== ADMIN ===== */
.admin-icon
{
  background: rgba(239,83,80,.12) !important;
}
.admin-icon svg
{
  color: var(--error) !important;
}

.admin-table-wrap
{
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.admin-table
{
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.admin-table thead th
{
  background: var(--bg2); padding: 12px 16px;
  text-align: left; font-size: .75rem; font-weight: 600;
  color: var(--text3); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.admin-table tbody tr
{
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.admin-table tbody tr:last-child
{
  border-bottom: none;
}
.admin-table tbody tr:hover
{
  background: var(--bg-hover);
}
.admin-table td
{
  padding: 12px 16px; vertical-align: middle;
}

.admin-user-cell
{
  display: flex; align-items: center; gap: 10px;
}
.admin-username
{
  font-weight: 600;
}
.admin-email
{
  color: var(--text2); font-size: .82rem;
}
.admin-count
{
  color: var(--text2); text-align: center;
}
.admin-date
{
  color: var(--text3); font-size: .8rem; white-space: nowrap;
}
.admin-actions
{
  display: flex; gap: 6px;
}

@media (max-width: 768px)
{
  .admin-table-wrap
  {
    overflow-x: auto;
  }
  .admin-table
  {
    min-width: 560px;
  }
}

/* ===== USER LIST (Nutzer-Übersicht) ===== */
.user-list
{
  display: flex; flex-direction: column; gap: 10px;
}

.user-card
{
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.user-card:hover
{
  border-color: var(--accent); box-shadow: 0 2px 14px rgba(0,0,0,.3);
}

.user-card-info
{
  flex: 1; min-width: 0;
}
.user-card-name
{
  font-size: .95rem; font-weight: 600;
}
.user-card-counts
{
  font-size: .78rem; color: var(--text2); margin-top: 2px;
}

/* ===== FOLLOW BUTTON ===== */
.btn-follow
{
  padding: 7px 16px; border-radius: 20px;
  font-size: .82rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
.btn-follow:hover
{
  background: var(--accent2); border-color: var(--accent2);
}
.btn-follow.following
{
  background: transparent; border-color: var(--border); color: var(--text2);
}
.btn-follow.following:hover
{
  border-color: var(--error); color: var(--error);
  background: rgba(239,83,80,.08);
}
.btn-follow:disabled
{
  opacity: .55; cursor: not-allowed;
}

/* ===== USER LIST HEADER (fremde Liste ansehen) ===== */
.user-list-header
{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding: 14px 16px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r);
}
.user-list-header-info
{
  flex: 1; min-width: 0;
}
.user-list-header-name
{
  font-size: 1.1rem; font-weight: 700;
}
.user-list-header-sub
{
  font-size: .78rem; color: var(--text2); margin-top: 2px;
}

/* ===== COMPARE VIEW ===== */
.compare-summary
{
  display: flex; align-items: center; justify-content: center;
  gap: 12px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 20px; margin-bottom: 16px;
}
.compare-summary-item
{
  text-align: center;
}
.compare-summary-num
{
  font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1;
}
.compare-summary-label
{
  font-size: .72rem; color: var(--text2); margin-top: 3px;
}
.compare-summary-sep
{
  font-size: 1.4rem; color: var(--border);
}

.compare-list
{
  display: flex; flex-direction: column; gap: 10px;
}

.compare-card
{
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); display: flex; gap: 12px;
  padding: 12px; overflow: hidden;
}
.compare-card-cover
{
  width: 52px; height: 74px; border-radius: 6px;
  overflow: hidden; flex-shrink: 0;
}
.compare-card-cover img
{
  width: 100%; height: 100%; object-fit: cover;
}
.compare-card-cover .cover-placeholder
{
  width: 100%; height: 100%; border-radius: 6px; font-size: .6rem;
}
.compare-card-body
{
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
}
.compare-card-title
{
  font-size: .88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.compare-sides
{
  display: flex; gap: 10px; align-items: flex-start; flex: 1;
}
.compare-side
{
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.compare-side-name
{
  font-size: .7rem; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.compare-side-prog
{
  font-size: .78rem; color: var(--text2);
}
.compare-side-score
{
  font-size: .78rem; color: var(--star); display: flex; align-items: center; gap: 2px;
}
.compare-side-score svg
{
  width: 11px; height: 11px;
}

.compare-vs
{
  flex-shrink: 0; font-size: .7rem; font-weight: 700;
  color: var(--text3, var(--text2)); padding-top: 20px;
  opacity: .5;
}

/* ===== RECOMMENDATIONS ===== */
.rec-loading
{
  display: flex; align-items: center; gap: 8px;
  color: var(--text2); font-size: .85rem; padding: 16px 0;
}

.rec-based-on
{
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 12px;
  font-size: .8rem; color: var(--text2);
}

.rec-card
{
  cursor: pointer;
  position: relative;
}

.btn-add-rec
{
  background: var(--accent); border: none;
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; flex-shrink: 0;
  transition: opacity .15s, transform .15s;
}
.btn-add-rec:hover
{
  opacity: .85; transform: scale(1.1);
}
.btn-add-rec svg
{
  width: 14px; height: 14px;
}

/* ===== RESPONSIVE MODAL BUTTONS ===== */
/* Auf kleinen Screens (≤430px): Labels ausblenden, nur Icons zeigen */
@media (max-width: 430px)
{
  .modal-foot
  {
    padding: 10px 12px; gap: 6px;
  }
  .modal-foot .btn-label
  {
    display: none;
  }
  .modal-foot .btn
  {
    padding: 9px 12px; min-width: 0;
  }
  .modal-foot .btn svg
  {
    width: 18px; height: 18px;
  }
}