/*
 * NhPanel – Seite „Apps mit einem Klick“ (/vps-apps): schlichte Nachbildung der Serverzentrale (Fenster mit der Auswahl
 * „Vorlagen“, Übergabe-Karte) in deren Graphit-Farben. Alles unter .nha.
 *
 * Eigene Datei, weil sie schon dunkel gestaltet ist: Die Dunkel-Engine (Support/DarkMode/DarkCss::alreadyDark) erzeugt für
 * überwiegend dunkle Stylesheets KEINEN Zwilling. Stünden hier helle Flächen mit (früher: die weißen App-Karten), blieben
 * diese im Dunkelmodus weiß, während die Schrift aus den Zwillingen anderer Dateien hell wird (Prüfung 2026-11-02).
 * Helle Flächen der Seite gehören deshalb nach vps-apps.css, nie hierher.
 */
.nha{--a-g0:#18181b;--a-g1:#1f1f23;--a-g2:#27272a;--a-g3:#3f3f46;--a-gt:#e4e4e7;--a-gm:#a1a1aa;--a-ok:#4ade80}

/* ---- Fenster „Vorlagen“ (Kopf rechts) ---- */
.nha .nha-win{margin:0;background:var(--a-g0);border:1px solid #2e2e33;border-radius:12px;overflow:hidden;color:var(--a-gt);font-size:13px;line-height:1.4;box-shadow:0 1px 0 rgba(11,16,32,.04)}
.nha .nha-win__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #2e2e33;background:var(--a-g1)}
.nha .nha-win__bar span{width:9px;height:9px;border-radius:50%;background:var(--a-g3)}
.nha .nha-win__bar b{margin-left:8px;font-weight:500;color:var(--a-gm)}
.nha .nha-win__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.nha .nha-tile{display:grid;gap:10px;align-content:start;padding:12px;border:1px solid #2e2e33;border-radius:8px;background:var(--a-g1)}
.nha .nha-tile__head{display:flex;gap:10px;align-items:center;min-width:0}
.nha .nha-tile__head > span:last-child{min-width:0;overflow-wrap:break-word}
.nha .nha-tile__head strong{display:block;font-weight:600;color:var(--a-gt)}
.nha .nha-tile__head small{display:block;color:var(--a-gm);font-size:12px}
.nha .nha-tile__badge{justify-self:start;padding:2px 8px;border:1px solid var(--a-g3);border-radius:6px;color:var(--a-gm);font-size:11.5px}
.nha .nha-tile__btn{justify-self:end;display:inline-block;padding:5px 10px;border-radius:6px;background:#e4e4e7;color:#18181b;font-size:12px;font-weight:600;white-space:nowrap}
.nha .nha-tile__btn--ghost{background:transparent;color:var(--a-gt);border:1px solid var(--a-g3)}
.nha .nha-mono{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border-radius:7px;color:#fff;font:700 14px/1 var(--d-sans)}

/* ---- Übergabe-Karte ---- */
.nha .nha-card{margin:0;background:var(--a-g0);border:1px solid #2e2e33;border-radius:12px;padding:18px;color:var(--a-gt);font-size:14px;display:grid;gap:14px}
.nha .nha-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.nha .nha-card__head strong{font-size:16px;font-weight:600}
.nha .nha-state{display:inline-flex;align-items:center;gap:6px;color:var(--a-ok);font-weight:500;font-size:13px}
.nha .nha-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a-ok)}
.nha .nha-card__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:12px;border-top:1px solid #2e2e33}
.nha .nha-card__row > span:first-child:not(.nha-tile__btn){color:var(--a-gm);min-width:70px}
.nha .nha-card__row b{font-weight:500;overflow-wrap:anywhere}
.nha .nha-card__next{padding-top:12px;border-top:1px solid #2e2e33}
.nha .nha-card__next > span{display:block;color:var(--a-gm);margin-bottom:6px}
.nha .nha-card__next ol{margin:0;padding-left:20px;color:var(--a-gt);line-height:1.5}
.nha .nha-card__next li+li{margin-top:4px}

@media(max-width:560px){
  .nha .nha-win__grid{grid-template-columns:minmax(0,1fr)}
  .nha .nha-tile:nth-child(n+3){display:none}
}