/* login.jckbn.de -- app-spezifische Layouts. Nur Tokens aus jckbn-ui nutzen,
 * keine festen Farben/Fonts (CD-Wechsel bleibt ein reiner Variablen-Tausch). */

/* Links: nie Browser-Blau/Violett -- lesbar in hell und dunkel.
 * Standard = Textfarbe, Akzent beim Hover. Tokens statt feste Farben. */
a:not(.ui-btn) {
  color: var(--text);
  text-decoration: none;
}
a:not(.ui-btn):visited { color: var(--text); }
a:not(.ui-btn):hover { color: var(--accent); text-decoration: underline; }

.ui-main {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  padding-bottom: calc(2rem + var(--safe-bottom));
}

.ui-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}

.ui-card h2 {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.ui-card p { color: var(--text2); margin-bottom: 1rem; }

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .8rem;
  cursor: pointer;
}

.ui-field {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 .75rem;
  margin-bottom: 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;
}

.ui-hint { color: var(--text3); font-size: .8rem; }
/* Meldungsklassen brauchen die Kontext-Spezifitaet von ".ui-card p" (Klasse + Element),
   sonst faerbt die Karte sie grau -- die Fehlermeldung waere grau auf Rot. */
.ui-ok, .ui-card p.ui-ok { color: var(--accent); }
.ui-card p.ui-hint { color: var(--text3); }
.ui-error, .ui-card p.ui-error { color: var(--bg); }
.ui-error {
  color: var(--bg);
  background: var(--accent);
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}

form label { display: block; margin-bottom: .25rem; font-size: .85rem; color: var(--text2); }

.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ui-sub { margin: 1.5rem 0 .5rem; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; border-top: 1px solid var(--border); padding-top: 1rem; }

.ui-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ui-table th, .ui-table td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--surface2); }
.ui-table th { color: var(--text3); font-weight: 400; text-transform: uppercase; font-size: .7rem; letter-spacing: 1px; }

.ui-list { list-style: none; margin-bottom: .75rem; }
.ui-list li { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--surface2); }

.ui-inline { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.ui-inline .ui-field { margin-bottom: 0; }

.ui-check { display: flex; align-items: center; gap: .5rem; }
.ui-check input { width: auto; min-height: 0; }

.ui-link { background: none; border: none; color: var(--text2); text-decoration: underline; cursor: pointer; font-size: .8rem; padding: 0; }
.ui-danger { background: var(--accent); }

/* frpfrd: gerendertes Markdown */
.ui-prose { line-height: 1.6; }
.ui-prose > * + * { margin-top: .75rem; }
.ui-prose h1, .ui-prose h2, .ui-prose h3 { font-weight: 400; margin-top: 1.25rem; }
.ui-prose ul, .ui-prose ol { padding-left: 1.4rem; }
.ui-prose code { font-family: var(--font-mono); background: var(--surface2); padding: .1rem .3rem; }
.ui-prose pre { background: var(--surface2); padding: .75rem; overflow-x: auto; }
.ui-prose a { color: var(--accent); }
.ui-prose blockquote { border-left: 3px solid var(--border); padding-left: .75rem; color: var(--text2); }

/* notes: Ordnerleiste */
.ui-folderbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .25rem; }
.ui-folderbar form { margin: 0; }

/* notes: Ordner-Akkordeon (natives <details>) */
.ui-acc { border-top: 1px solid var(--border); }
.ui-acc > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: .75rem 0 .5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  list-style: none;
}
.ui-acc > summary::-webkit-details-marker { display: none; }
.ui-acc > summary::before { content: "\25B6"; color: var(--text3); margin-right: .5rem; font-size: .9em; }
.ui-acc[open] > summary::before { content: "\25BC"; }
.ui-acc > summary:hover { color: var(--accent); }
.ui-acc[open] > summary { color: var(--accent); }

/* notes: Ordner-Titelzeile (Ansicht <-> inline umbenennen) */
.folder-view, .folder-edit { display: flex; gap: .5rem; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; }
.folder-actions { margin-left: auto; display: inline-flex; gap: .9rem; align-items: center; }
.folder-head [hidden] { display: none; }
.folder-edit .ui-field { margin-bottom: 0; width: auto; min-width: 8rem; }

/* notes: "Neuer Ordner" dezent unter den Abschnitten */
.new-folder-link { margin: 1rem 0 0; }

/* notes: lose Notizen (ohne Ordner) -- nur Trennlinie (von .ui-acc) + die Dateien */
.loose-block { padding-top: .75rem; }

/* cook: Kategorie-Navigation */
.cat-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.cat-nav .cat { font-size: .8rem; padding: .25rem .6rem; border: 1px solid var(--border); color: var(--text2); text-decoration: none; }
.cat-nav .cat.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cat-nav .cat:hover { color: var(--accent); }
.cat-nav .cat.active:hover { color: var(--bg); }

/* cook: Rezeptliste + Detail */
.recipe-list .r-emoji { display: inline-block; width: 1.5rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.tag { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); border: 1px solid var(--surface2); padding: .1rem .4rem; }
.zgr { font-size: .85rem; margin: .75rem 0 .25rem; color: var(--text2); }
.zutaten { list-style: none; margin-bottom: .5rem; }
.zutaten li { padding: .25rem 0; border-bottom: 1px solid var(--surface2); }
.zmenge { display: inline-block; min-width: 5rem; color: var(--text2); }
.schritte { padding-left: 1.3rem; }
.schritte li { margin-bottom: .6rem; }
.z-item.done span { text-decoration: line-through; color: var(--text3); }
.ui-field.code { font-family: var(--font-mono); font-size: .85rem; }

/* cook: Detailzeilen je Zubereitungsschritt */
.schritt-detail { list-style: disc; margin: .35rem 0 .2rem 0; padding-left: 1.1rem; }
.schritt-detail li { margin-bottom: .25rem; }

/* cook: Prosa-Listen (Anrichten/Tipps/Varianten als Liste) -- eingerückt */
.prose-list { list-style: disc; margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.prose-list li { margin-bottom: .25rem; }

/* cook: Verwaltungsliste -- Aktionen je Rezept */
.admin-actions { display: inline-flex; gap: .9rem; align-items: center; }
.admin-actions form { margin: 0; }
.ui-danger-link { color: var(--accent); }

/* cook: Formular-Editor -- Zutatengruppen + Schritte */
.zg-group, .step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: .75rem;
}
.zg-group legend, .step legend { display: none; }
.zg-ingredients { margin-bottom: .5rem; }
.zg-ing { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.zg-ing .ui-field { margin-bottom: 0; }
.zg-ing .zi-menge, .zg-ing .zi-menge_bis { flex: 0 0 4rem; }
.zg-ing .zi-einheit, .zg-ing .zi-qual { flex: 0 0 7rem; }
.zg-ing .zi-name { flex: 2 1 9rem; }
.zg-ing .zi-hinweis { flex: 1 1 7rem; }

/* cook: Foto-Grid (Editor-Verwaltung + Detailansicht) */
.foto-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.foto-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.foto-grid .foto { margin: 0; }
.foto-grid .foto img { width: 9rem; height: 7rem; }
.foto-grid .foto form { margin: .25rem 0 0; text-align: center; }
.foto-grid-detail a { flex: 1 1 12rem; max-width: 16rem; }
.foto-grid-detail img { height: 11rem; }