/*
*****************************************************************************
Ticketsystem, V0.1 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; schwarz@beka.de, fs@csskoeln.de
*****************************************************************************
$Id: ticketsystem.css 1 25.09.2026 @fs$
*****************************************************************************
*/
/*
 * Grundpalette und Zustandsfarben als Variablen. Das Branding (einstellungen) ueberschreibt sie.
 * Blau traegt alles Textliche, Limette ist der einzige Akzent (sparsam), Flaechen bleiben hell,
 * abgegrenzt wird ueber --linie, nicht ueber Schatten. Rot und Gelb nur bei Zustaenden.
 */
:root {
    --blau:    #203A74;
    --limette: #C9D526;
    --hell:    #EAF6FE;
    --weiss:   #FFFFFF;
    --linie:   #D3DDEC;
    --leise:   #5C6C8C;
    --grund:   #F6F8FC;

    --ampel-gruen-flaeche: #C9D526;  --ampel-gruen-schrift: #203A74;
    --ampel-gelb-flaeche:  #F6C544;  --ampel-gelb-schrift:  #4A3200;
    --ampel-rot-flaeche:   #A32020;  --ampel-rot-schrift:   #FFFFFF;

    --ok-flaeche: #E6F2EA;       --ok-schrift: #2F6F4E;
    --warn-flaeche: #FBF3DC;     --warn-rand: #B8860B;
    --fehler-flaeche: #FDECEC;   --fehler-schrift: #7A1414;  --fehler-rand: #E3A3A3;
    --marke-flaeche: #EAF3D2;    --marke-schrift: #4A6A12;

    font-family: "beka Sans", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    color: var(--blau);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hell); }
a { color: var(--blau); }
h1, h2 { color: var(--blau); font-family: "beka Slab", Georgia, serif; font-weight: 700; }

/*
 * Aufbau der Seite. Zwei Layouts, der Benutzer waehlt im Profil (benutzer.layout):
 *   layout-kopf   Kopfzeile ueber die ganze Breite, darunter Menue links und Inhalt (Standard)
 *   layout-seite  Menue links ueber die volle Hoehe (Bildlauf nur wenn noetig), Kopfzeile beginnt daneben
 * In beiden steht die Fusszeile unter dem Inhalt.
 */
.seite { min-height: 100vh; display: flex; flex-direction: column; }
.spalte { display: flex; flex-direction: column; min-width: 0; }
.spalte .inhalt { flex: 1; }

.layout-kopf .rahmen { flex: 1; display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.layout-kopf .rahmen.ohne-menue { grid-template-columns: minmax(0, 1fr); }

.layout-seite { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.layout-seite .seitenleiste { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--weiss); border-right: 1px solid var(--linie); padding: 1.25rem .75rem; display: flex; flex-direction: column; gap: 1.5rem; }
.layout-seite .seitenleiste .marke { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 .5rem; }
.layout-seite .seitenleiste .markenname { font-size: 22px; }
.layout-seite .seitenleiste .bereichsmenue { background: none; border: 0; padding: 0; }
.layout-seite .rahmen { display: flex; flex-direction: column; min-width: 0; }
.layout-seite .rahmen .spalte { flex: 1; }
.layout-seite .kopf { padding: 18px 28px; }

.bereichsmenue { background: var(--weiss); border-right: 1px solid var(--linie); padding: .75rem; }
.bereichsmenue:empty { display: none; }

/* Fusszeile: auf jeder Seite rechts unten, klein und unauffaellig */
.fussleiste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .75rem; padding: 5px; color: var(--leise); font-size: .75rem; text-align: right; }

/* Ticket: Antwortfeld mit bekKI-Knopf */
.ticket-betreff { margin-top: 0; }
.antwort { display: grid; gap: .5rem; max-width: 60rem; margin-bottom: 1rem; }
.antwort h2 { margin: 0; }
.antwort-feld { min-height: 12rem; padding: .6rem .75rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; overflow-wrap: anywhere; }
.antwort-feld p { margin: 0 0 .75rem; }
.antwort-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.bekki { background: var(--hell); color: var(--blau); border: 1px solid var(--linie); }
.bekki:hover:not(:disabled) { background: var(--limette); }
.bekki:disabled { cursor: progress; opacity: .7; }

/* Profil: Layout waehlen */
/* Ueberschrift nur fuer Vorlesegeraete (Seiten, deren Inhalt keine eigene Ueberschrift hat) */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.karte h2 { margin: 0; }
.karte textarea { width: 100%; font: inherit; }
.layout-wahl { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; }
.layout-wahl:has(input:checked) { border-color: var(--limette); background: var(--hell); }
.layout-wahl > span { display: grid; gap: .15rem; }
.menue-gruppe { display: grid; gap: .2rem; margin-bottom: 1rem; }
.menue-gruppe span { font-weight: 600; font-size: .85rem; color: var(--leise); }
.bereichsmenue a { text-decoration: none; padding: .25rem .5rem; border-radius: 6px; }
.bereichsmenue a[aria-current="page"] { background: var(--hell); border-left: 3px solid var(--limette); font-weight: 600; }
.schritte li[aria-current="step"] { font-weight: 700; }
.inhalt { padding: 1rem 1.25rem; }

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 1rem; display: grid; gap: .75rem; max-width: 40rem; }
.login { max-width: 24rem; margin: 3rem auto; }
label { display: grid; gap: .25rem; }
input, select, textarea { font: inherit; padding: .45rem .55rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); color: var(--blau); }
button, .knopf { font: inherit; background: var(--blau); color: var(--weiss); border: 0; padding: .55rem 1rem; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
:focus-visible { outline: 2px solid var(--limette); outline-offset: 2px; }

.hinweis { color: var(--leise); }
.kasten-ok { background: var(--ok-flaeche); color: var(--ok-schrift); padding: .6rem .8rem; border-radius: 6px; }
.kasten-warn { background: var(--warn-flaeche); border: 1px solid var(--warn-rand); padding: .6rem .8rem; border-radius: 6px; }
.kasten-fehler { background: var(--fehler-flaeche); color: var(--fehler-schrift); border: 1px solid var(--fehler-rand); padding: .6rem .8rem; border-radius: 6px; }

/* Einrichtung: Nachtraege der Reihe nach mit ihrem Stand */
.nachtraege { padding-left: 1.5rem; }
.nachtrag { padding: .15rem 0; }
.nachtrag-status { color: var(--leise); }
.nachtrag-ok .nachtrag-status { color: var(--ok-schrift); }
.nachtrag-fehler .nachtrag-status { color: var(--fehler-schrift); font-weight: 700; }
.marke-klein { background: var(--marke-flaeche); color: var(--marke-schrift); padding: .1rem .45rem; border-radius: 999px; font-size: .85rem; }

/* SLA-Ampel: drei Stufen wie im Hub (gut, bald, kritisch), Restzeit immer als Text dabei */
.ampel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 12px; white-space: nowrap; background: var(--hell); color: var(--blau); }
.ampel.gut      { background: var(--ampel-gruen-flaeche); color: var(--ampel-gruen-schrift); }
.ampel.bald     { background: var(--ampel-gelb-flaeche);  color: var(--ampel-gelb-schrift); }
.ampel.kritisch { background: var(--ampel-rot-flaeche);   color: var(--ampel-rot-schrift); }

/* Unzustellbar (Mailer-Daemon): eigener Fehlerkasten mit Erklaerung */
.unzustellbar { background: var(--fehler-flaeche); color: var(--fehler-schrift); border: 1px solid var(--ampel-rot-flaeche); border-radius: 6px; padding: .75rem 1rem; }
.unzustellbar details { margin-top: .5rem; color: var(--leise); }

.tabelle { border-collapse: collapse; background: var(--weiss); }
.tabelle td, .tabelle th { border-bottom: 1px solid var(--linie); padding: .4rem .75rem; text-align: left; }

.arbeitsflaeche { display: grid; grid-template-columns: minmax(18rem, 26rem) 1fr; gap: 1rem; }
.links { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: .75rem; overflow: auto; }
.rechts { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: .75rem; overflow: auto; }
.ticket.ungelesen a { font-weight: 700; }

@media (max-width: 800px) {
    .layout-kopf .rahmen, .layout-kopf .rahmen.ohne-menue, .arbeitsflaeche { grid-template-columns: 1fr; }
    .bereichsmenue { border-right: 0; border-bottom: 1px solid var(--linie); }
    .layout-seite { display: flex; flex-direction: column; }
    .layout-seite .seitenleiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
}

/* Layer: Originalmail und Kopfzeilen, ganze Seite mit 15 % Abstand */
.layer { position: fixed; inset: 0; background: rgba(32, 58, 116, .35); z-index: 100; }
.layer[hidden] { display: none; }
.layer-kasten { position: absolute; inset: 15%; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; display: flex; flex-direction: column; }
.layer-kopf { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linie); }
.layer-titel { font-weight: 700; }
.layer-inhalt { overflow: auto; padding: 1rem; }
.layer-inhalt pre { white-space: pre-wrap; font-size: .85rem; }
.layerzu { margin-left: auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--hell); color: var(--blau); border: 0; border-radius: 50%; cursor: pointer; }
.layerzu:hover { background: var(--limette); }
@media (max-width: 720px) { .layer-kasten { inset: 4%; } }

/* Verlauf strikt als Text */
.vorgang { border-bottom: 1px solid var(--linie); padding: .75rem 0; }
.vorgang-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.vorgang-text img { max-width: 100%; height: auto; }

/* Anhaenge: Symbol, Name, Groesse */
.anhaenge { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.anhang { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border: 1px solid var(--linie); border-radius: 6px; text-decoration: none; background: var(--grund); }
.anhang-groesse { color: var(--leise); font-size: .85rem; }
.anhang.blockiert { background: var(--fehler-flaeche); color: var(--fehler-schrift); }

/* Dashboard */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 1rem; }
.kachel.breite-2 { grid-column: span 2; }
.kachel.breite-3 { grid-column: span 3; }
.suche { max-width: none; margin-bottom: 1rem; }
.suche-reiter { display: flex; gap: 1rem; }
@media (max-width: 800px) { .kacheln { grid-template-columns: 1fr; } .kachel.breite-2, .kachel.breite-3 { grid-column: auto; } }

/* Datumsfeld mit Kalender */
.datum-feld { display: inline-flex; gap: .25rem; }
.datum-feld input { width: 11rem; }
.datum-knopf { background: var(--hell); color: var(--blau); padding: .45rem .6rem; }
.kalender { position: absolute; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: .5rem; z-index: 50; }

/* Spam-Bereich: Eintraege als Karten, Vorschau strikt als Text */
.spam-eintrag { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: .75rem 1rem; display: grid; gap: .5rem; max-width: 60rem; margin-bottom: .75rem; }
.spam-eintrag header { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.spam-eintrag p { margin: 0; }
.spam-vorschau { margin: 0; font: inherit; color: var(--leise); white-space: pre-wrap; overflow-wrap: anywhere; }
.spam-aktionen { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.spam-aktion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.spam-aktion label { display: flex; flex-direction: row; align-items: center; gap: .35rem; }