/* =============================================================================
   SecNote - Stylesheet (style.css)

   Layout und Styling für die SecNote-Anwendung.
   Die Anwendung ist als schmale, zentrierte Box (342px) auf grauem Hintergrund
   gestaltet, optimiert für mobile Nutzung.

   Struktur:
   1. Basis-Styles (Body, Links)
   2. Haupt-Container (#haupt)
   3. Eingabe-Seite (#schreiben)
   4. Ergebnis-Anzeige (#gespeichert, #url, #urlbox)
   5. Nachricht-Anzeige (#anzeigen1, #anzeigen2)
   6. Viewer (#viewer-container, #viewer-*)
   7. Statistik (#statistik)
   8. Passwort-Hinweise
   9. Footer (#version)
   10. Formular-Elemente
   ============================================================================= */

/* --- 1. Basis-Styles --- */

/* Grauer Hintergrund, zentrierter Text, Standardschriftgröße 12pt */
body      {
  background: #999999;
  font-size: 12pt;
  /* color: #000000; */
  text-align: center;
}

/* Links: Schwarz, zentriert, automatischer Zeilenumbruch bei langen URLs */
a         {
  color: #000000;
  text-align: center;
  word-wrap:
  break-word;
}

/* Tabellenzellen mit grünem Rahmen (Legacy-Layout) */
td#haupt, td.content        {
  border: 2px solid #44a320;
}

/* --- 2. Haupt-Container --- */

/* Zentrierte Box mit grünem Rahmen und abgerundeten Ecken */
/* CSS Grid wird für vertikale und horizontale Zentrierung verwendet */
#haupt {
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 2px solid #009900;
  width: 342px;
  margin: 0 auto;
}

/* --- 9. Footer / Versionsanzeige --- */

/* Überschriften zentriert */
h3 {text-align: center;}

/* Footer-Links: Klein (10px), grün, zentriert */
a#version {
  align-content: center;
  align-items: center;
  align-self: center;
  font-size: 10px;
  color: #009900;
  text-align: center;
}

/* Footer-Container */
footer {
  align: center;
  text-align: center;
}

/* --- 4. Ergebnis-Anzeige --- */

/* Container für den Kopier-Button (Clipboard.js) */
.button_container {
  align: center;
  display: inline;
  width: 300px;
  background: #bbbbbb;
}

/* Standard-Button-Hintergrund: Hellgrau */
button { background: #bbbbbb;}

/* Generierter Link: Als Block-Element für Zeilenumbruch */
#url {
  display: block;
}

/* URL-Box: Zentriert mit Seitenabstand */
#urlbox { margin-left: 5%; width: 90%; text-align: center; }

/* Hinweis-Text in Grün */
#hinweis  {color: #009900;}

/* --- 5. Nachricht-Anzeige --- */

/* Anzeige-Container 1: Für entschlüsselte Nachricht */
#anzeigen1 {
  background: #bbbbbb;
  text-align: center;
  width: 340px;
  /* border: 1px solid #009900; */
  word-wrap: break-word; word-break: break-all;  /* Lange Texte umbrechen */
}

/* Anzeige-Container 2: Alternativer Anzeige-Bereich */
#anzeigen2 {
  background: #bbbbbb;
  text-align: center;
  width: 340px;
  /* border: 1px solid #009900; */
  word-wrap: break-word; word-break: break-all;
}

/* Bestätigungs-Box nach erfolgreichem Speichern */
#gespeichert {
  background: #bbbbbb;
  text-align: center;
  width: 340px;
  /* border: 1px solid #009900; */
  word-wrap: break-word; word-break: break-all;
}

/* --- 3. Eingabe-Seite --- */

/* Formular-Container: Hellgrauer Hintergrund */
#schreiben {
  background: #bbbbbb;
  text-align: center;
  width: 340px;
  /* border: 1px solid #009900; */
}

/* Begrüßungstext/Anleitung vor dem Eingabefeld */
#text1 {
  align-content: center;
  display: block;
}

/* --- 10. Formular-Elemente --- */

/* Textarea: Zentriert, inline */
textarea {
  align: center;
  display: inline;
}

/* Eingabefelder: Zentriert */
input {
  align: center;
  /*display: block;*/
}

/* --- 8. Passwort-Hinweise --- */

/* Hinweis für den Absender: Rot, klein (8pt) */
#passworthinweisSender {
  color: #ff0000;
  font-size: 8pt;
}

/* Hinweis für den Empfänger: Schwarz, 10pt */
#empfaengerhinweis {
  color: #000000;
  font-size: 10pt;
}

/* Allgemeiner Passwort-Hinweis */
#passworthinweis {
  font-size: 10pt;
}

/* Labels: Kleinere Schrift (10pt) */
label {
  font-size: 10pt;
}

/* --- 7. Statistik --- */

/* Statistik-Box: Hellgrau, zentriert, mit Innenabstand */
#statistik {
  background: #bbbbbb;
  text-align: center;
  width: 340px;
  word-wrap: break-word;
  padding: 10px 0;
}

/* --- 6. Viewer (Nachricht lesen) --- */

/* Viewer-Hauptcontainer: Gleicher Stil wie andere Content-Boxen */
#viewer-container {
  background: #bbbbbb;
  text-align: center;
  width: 340px;
  word-wrap: break-word;
  word-break: break-all;
}

/* Ladeindikator: Dunkelgrau, mit Abstand */
#viewer-loading {
  padding: 20px 0;
  color: #333;
}

/* Fehler-Anzeige: Rot, mit Innenabstand */
#viewer-error {
  padding: 20px 10px;
  color: #cc0000;
}

/* Entschlüsselter Inhalt */
#viewer-content {
  padding: 10px;
}

/* Passwort-Eingabebereich */
#viewer-password {
  padding: 10px;
}

/* Verarbeitungs-Zustand: Formular wird ausgegraut und Klicks deaktiviert */
/* Wird per JS-Klasse während der Verschlüsselung/Entschlüsselung angewendet */
.secnote-processing {
  opacity: 0.6;
  pointer-events: none;
}