/* ============================================================================
   assets/css/app.css — Administration & Import
   ----------------------------------------------------------------------------
   Baut auf den Tokens aus style.css auf. Enthält nur, was der Admin-Bereich
   zusätzlich braucht:
     1. Admin-Karten & Kopfbereich
     2. Navigation: Pillen auf Desktop, feste Tab-Leiste unten auf dem Handy
     3. Tabellen -> Karten auf schmalen Bildschirmen (kein Querscrollen)
     4. Listen, Meldungen, Import
   ========================================================================== */

/* ------------------------------------------------ 1. Admin-Karten & Kopf */
.admin{ margin:0 0 var(--s-5); }
.admin__hint{ color:var(--ink-faint); font-size:var(--fs-sm); margin:var(--s-3) 0 0; }
.admin__stats{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--s-5);
}
.admin__stats .btn{ margin-left:auto; }
.admin__new{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); }
.admin__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.admin__details summary{ cursor:pointer; color:var(--brand-500); font-weight:600; min-height:var(--tap);
  display:flex; align-items:center; }

/* Der Inhalt bekommt unten Luft, damit die feste Tab-Leiste nichts verdeckt */
@media (max-width:860px){
  main.wrap{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------- 2. Navigation */
.admin__tabs{
  display:flex; gap:var(--s-2); flex-wrap:wrap;
  margin:0 0 var(--s-5);
}
.admin__tab{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:var(--tap); padding:0 var(--s-4);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--panel); color:var(--ink-soft);
  font-size:var(--fs-sm); font-weight:650; text-decoration:none;
  transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.admin__tab:hover{ color:var(--brand-500); border-color:var(--brand-500); }
.admin__tab.is-active{
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color:#fff; border-color:transparent; box-shadow:var(--shadow-sm);
}
.admin__tab svg{ width:18px; height:18px; flex:none; }
.admin__tab-txt{ white-space:nowrap; }

/* Handy/kleines Tablet: feste Leiste am unteren Rand statt Hamburger */
@media (max-width:860px){
  .admin__tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    margin:0; padding:6px var(--s-2) calc(6px + env(safe-area-inset-bottom));
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
    background:color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter:saturate(1.4) blur(12px);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -18px rgba(20,26,38,.5);
  }
  .admin__tab{
    flex-direction:column; justify-content:center; gap:2px;
    min-height:56px; padding:4px 2px;
    border:0; border-radius:var(--radius-xs); background:transparent;
    font-size:10px; font-weight:600; letter-spacing:.01em;
  }
  .admin__tab.is-active{
    background:color-mix(in srgb, var(--brand-500) 12%, transparent);
    color:var(--brand-500); box-shadow:none;
  }
  .admin__tab.is-active svg{ color:var(--brand-500); }
  .admin__tab svg{ width:21px; height:21px; }
  .admin__tab-txt{ overflow:hidden; text-overflow:ellipsis; max-width:100%; }
}

/* -------------------------------------------- 3. Tabellen und Kartenmodus */
.admin__table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.admin__table th, .admin__table td{
  padding:var(--s-3) var(--s-3); text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line);
}
.admin__table th{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.admin__table tbody tr:last-child td{ border-bottom:0; }
.admin__table tbody tr:hover{ background:var(--panel-2); }
.admin__table .btn{ margin:2px 0; }

/* Auf dem Handy wird jede Zeile zur Karte; die Kopfzeile wandert vor die Zelle
   (Spaltenname kommt aus data-label im Markup). Kein Querscrollen mehr. */
@media (max-width:720px){
  .admin__table, .admin__table tbody, .admin__table tr, .admin__table td{ display:block; width:100%; }
  .admin__table thead{ display:none; }
  .admin__table tr{
    background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4);
    margin:0 0 var(--s-3);
  }
  .admin__table tbody tr:hover{ background:var(--panel-2); }
  .admin__table td{
    border:0; padding:var(--s-2) 0;
    display:flex; gap:var(--s-4); align-items:center; justify-content:space-between;
    text-align:right;
  }
  .admin__table td::before{
    content:attr(data-label);
    flex:none; text-align:left;
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .admin__table td:empty{ display:none; }
  .admin__table td[data-label=""]{ justify-content:flex-end; }
  /* Aktionsspalte: Knöpfe umbrechen lassen */
  .admin__table td.ar{ flex-wrap:wrap; justify-content:flex-end; gap:var(--s-2); }
  .admin__table td.ar .btn{ flex:1 1 auto; }
}

/* ------------------------------------------- 4. Listen, Meldungen, Import */
.admin__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); }
.admin__item{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.admin__item .btn{ margin-left:auto; }
.admin__row{ display:grid; gap:var(--s-3); }
@media (min-width:680px){ .admin__row{ grid-template-columns:2fr 1fr 1fr; align-items:end; } }

.notice{
  padding:var(--s-3) var(--s-4); border-radius:var(--radius-sm);
  font-size:var(--fs-sm); font-weight:600; margin:0 0 var(--s-4);
  background:var(--ok-bg); color:var(--ok);
  border:1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}
.notice--err{ background:var(--err-bg); color:var(--err);
  border-color:color-mix(in srgb, var(--err) 25%, transparent); }

.import__field{ margin:0 0 var(--s-4); }
.import__list{ list-style:none; margin:var(--s-3) 0 0; padding:0; display:grid; gap:var(--s-2); }
.import__list li{
  padding:var(--s-3) var(--s-4); background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--radius-sm); font-size:var(--fs-sm);
}
.import__text{ font-family:var(--mono); font-size:var(--fs-sm); }

/* Kopierfeld (Zugangscode o. ä.) */
.copyfield{ font-family:var(--mono); font-size:var(--fs-sm); cursor:pointer; }

/* Status-Etiketten in Tabellen (statt Blockmeldungen) */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink-soft); font-size:var(--fs-xs); font-weight:700;
  white-space:nowrap;
}
.badge--ok{ background:var(--ok-bg); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 25%, transparent); }
.badge--off{ background:var(--bg-soft); color:var(--ink-faint); }

/* Tab-Beschriftung: lang auf dem Desktop, kurz auf der unteren Leiste */
.admin__tab-short{ display:none; }
@media (max-width:860px){
  .admin__tab-txt{ display:none; }
  .admin__tab-short{ display:block; }
}