/*
 * support/assets/style.css
 * Struktur-Grundgerüst – Design liegt bei dir.
 * Alle Klassen sind unten erklärt.
 */

/* ── Layout ─────────────────────────────────────── */
.container          { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.container--narrow  { max-width: 420px; }

/* ── Admin-Navigationsleiste ─────────────────────── */
.admin-nav          { display: flex; gap: 1.5rem; align-items: center; padding: .75rem 1.5rem; }

/* ── Zweispaltiges Admin-Layout (Verlauf | Sidebar) ─ */
.admin-layout       { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; }
.admin-col-main     { }
.admin-col-side     { }

/* ── Ticket-Kopfzeile (Metadaten) ────────────────── */
.ticket-header      { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.ticket-header > div { flex: 1 1 180px; }
.label              { display: block; font-size: .75rem; text-transform: uppercase; opacity: .6; }

/* ── Nachrichtenverlauf ──────────────────────────── */
.message-thread     { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.message            { padding: 1rem; border-radius: 6px; }
.message-admin      { /* Nachrichten von dir – eigene Farbe */ }
.message-kunde      { /* Nachrichten vom Kunden – eigene Farbe */ }
.message-meta       { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .85rem; }

/* ── Interne Notizen ─────────────────────────────── */
.notes-list         { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.note               { padding: .75rem; border-left: 3px solid; }
.note-date          { font-size: .75rem; opacity: .6; }

/* ── Statusbadges ────────────────────────────────── */
.badge              { display: inline-block; padding: .25em .6em; border-radius: 4px; font-size: .8rem; font-weight: 600; }
.status-offen           { /* deine Farbe für "Offen" */ }
.status-in_bearbeitung  { /* deine Farbe für "In Bearbeitung" */ }
.status-erledigt        { /* deine Farbe für "Erledigt" */ }

/* ── Filter-Leiste (Dashboard) ───────────────────── */
.filter-bar         { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; align-items: center; }

/* ── Tickets-Tabelle ─────────────────────────────── */
.tickets-table      { width: 100%; border-collapse: collapse; }
.tickets-table th,
.tickets-table td   { padding: .6rem .75rem; text-align: left; }

/* ── Formular-Elemente ───────────────────────────── */
.form-group         { margin-bottom: 1rem; }
.form-group label   { display: block; margin-bottom: .35rem; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; box-sizing: border-box; }

/* ── Alerts ──────────────────────────────────────── */
.alert              { padding: 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-success      { }
.alert-error        { }
.alert-info         { }

/* ── Anhänge ─────────────────────────────────────── */
.attachments-grid   { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.attachment-item    { display: flex; flex-direction: column; align-items: center; gap: .4rem;
                      width: 120px; word-break: break-word; text-align: center; }
.attachment-thumb   { width: 100px; height: 100px; object-fit: cover; border-radius: 4px;
                      display: block; }
.attachment-icon    { font-size: 2.5rem; line-height: 1; }
.attachment-info    { font-size: .8rem; display: flex; flex-direction: column; gap: .2rem; }
.hint-inline        { font-size: .8rem; opacity: .6; font-weight: normal; }

/* ── Hilfselemente ───────────────────────────────── */
.empty-state        { opacity: .5; font-style: italic; }
.hint               { font-size: .875rem; opacity: .7; margin-top: 1rem; }
.btn-small          { }
.btn-reset          { }