@charset "UTF-8";

/* ============================================================
   admin.css - Admin-Layout (Settings, Kategorien, Migrations-Diag.)
   ============================================================
   Backlog-Cleanup: vorher unter 'Settings & Kategorien' in
   app.css versteckt, aber .admin-* bzw. .setting-row* werden auch von
   migration_check.tpl genutzt (Sidebar-Layout) bzw. .setting-row*
   von import.tpl/import_video.tpl/import_review_form.tpl.
   Deshalb global geladen statt seitenspezifisch.

   Enthaelt ausserdem einige tatsaechlich nur settings.tpl/
   categories.tpl-exklusive Klassen (.cat-grid, .user-table,
   .toggle-switch, ...) - die innerhalb der bestehenden @media-
   Bloecke mit den geteilten Klassen verschachtelt sind. Eine
   chirurgische Trennung haette das Risiko unnoetig erhoeht;
   da admin.css ohnehin global geladen wird, ist eine weitere
   Aufsplittung nicht noetig.
   ============================================================ */

/* -- Settings & Kategorien ---------------------------------- */

.admin-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Sidebar-Nav */
.admin-nav {
  display: block;
  height: auto;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 84px;
  transition: var(--transition);
}

.admin-nav__title {
  padding: 1rem 1.25rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--light-border);
}

.admin-nav__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.25rem;
  font-size: .88rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: all .15s;
  border-left: 3px solid transparent;
}
.admin-nav__link:hover  { color: var(--text-main); background: var(--bg); }
.admin-nav__link.active { color: var(--terracotta); background: #fef9f6; border-left-color: var(--terracotta); font-weight: 500; }

/* Admin-Content */
.admin-content { min-width: 0; overflow: hidden; }

/* Mobiles Gruppen-Dropdown (nur auf kleinen Screens sichtbar) */
.admin-group-select {
  display: none;
}

.admin-content__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.admin-content__sub {
  color: var(--text-muted);
  font-size: .88rem;
  margin-bottom: 1.75rem;
}

/* Settings-Zeile */
.setting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--light-border);
}
.setting-row:last-child { border-bottom: none; }

.setting-row__meta { flex: 1; }
.setting-row__label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: .2rem;
}
.setting-row__desc {
  font-size: .8rem;
  color: var(--text-subtle);
  line-height: 1.4;
}

.setting-row__control { flex-shrink: 1; flex-basis: 320px; max-width: 420px; min-width: 200px; box-sizing: border-box; }

/* Toggle-Switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--light-border);
  border-radius: 24px;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--terracotta); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Kategorien */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cat-card {
  background: var(--card-bg);
  border: 1.5px solid var(--light-border);
  border-radius: 10px;
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  transition: all .2s;
  cursor: pointer;
  position: relative;
}
.cat-card:hover { border-color: var(--terracotta); box-shadow: 0 4px 15px rgba(0,0,0,.07); }

.cat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cat-card__name {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .15rem;
}
.cat-card__count {
  font-size: .78rem;
  color: var(--text-subtle);
}

.cat-card__edit {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: .85rem;
  opacity: 0;
  transition: opacity .2s;
}
.cat-card:hover .cat-card__edit { opacity: 1; }

/* Benutzer-Tabelle */
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.user-table th {
  text-align: left;
  padding: .6rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-subtle);
  border-bottom: 1.5px solid var(--light-border);
}
.user-table td {
  padding: .75rem;
  border-bottom: 1px solid var(--light-border);
  vertical-align: middle;
}
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td { background: var(--bg); }

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}
.role-admin { background: #f5e8e0; color: var(--terracotta); }
.role-user  { background: var(--cream2); color: var(--text-muted); }

/* Emoji-Picker */
.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  max-height: 160px;
  overflow-y: auto;
  padding: .5rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--light-border);
  margin-top: .35rem;
}
.emoji-opt {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.emoji-opt:hover, .emoji-opt.selected { background: var(--light-border); }

/* Admin-Sidebar bleibt immer vertikal - Settings ist Desktop-only */
@media (max-width: 600px) {
  .admin-layout { grid-template-columns: 1fr; gap: .75rem; padding: 1rem; }
  .admin-nav { display: none; }
  .admin-group-select { display: block; }
}

/* Querformat-Phones (z.B. iPhone landscape ~844px) explizit abfangen */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  .admin-layout { grid-template-columns: 1fr; gap: .75rem; }
  .admin-nav { display: none; }
  .admin-group-select { display: block; }
}

@media (max-width: 640px) {
  .admin-layout { padding: 1.75rem; gap: 1.25rem; }
  .setting-row { flex-direction: column; gap: .75rem; }
  .setting-row__meta { flex: 0 0 auto; }
  .setting-row__control { min-width: 0; width: 100%; flex-basis: auto; max-width: none; }
  /* Ueberschreibt das inline style="max-width:140px" auf den Number-Inputs
     (Standard-Portionen, Rezepte pro Seite) - auf Desktop bewusst kompakt,
     auf Mobile soll das Feld die volle Container-Breite nutzen. */
  .setting-row__control input[type="number"] { max-width: 100% !important; width: 100%; }
  /* minmax(0, 1fr) statt nur 1fr: ohne das explizite 0-Minimum wuerde
     CSS Grid die Spaltenbreite an den unbrechbaren Inhalt (lange
     Kategorienamen wie "Mittagessen"/"Vegetarisch") anpassen statt am
     verfuegbaren Platz - das sprengt die Seite horizontal auf Mobile. */
  .cat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Settings kompakter */
.setting-row {
  padding: .7rem 0;
  align-items: center;
}
.setting-row__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.setting-row__label { margin-bottom: 0; }
.setting-row__info {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--light-border);
  color: var(--text-subtle);
  font-size: .68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .user-table th:nth-child(3),
  .user-table td:nth-child(3),
  .user-table th:nth-child(4),
  .user-table td:nth-child(4) { display: none; }
}