/* ========================================================================
   Ticketing — app-spezifische Styles
   Wird NACH tokens.css und app-shell.css geladen und ergaenzt diese nur.
   Shell-Regeln (Sidebar, Nav, Cards, Tabellen, Toasts) nicht ueberschreiben.
   ======================================================================== */

/* app-shell.css setzt height:100% auf #root — diese App haengt an #app. */
html, body, #app { height: 100%; margin: 0; }

/* Brand-Logo in der Sidebar: fixe Hoehe laut app-shell.md */
#sidebar-brand { flex-direction: column; align-items: flex-start; gap: .35rem; }
#sidebar-brand .brand-logo { height: 28px; width: auto; max-width: 100%; }
#sidebar-brand .brand-app {
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tw-sidebar-footer);
}

/* Sprachumschalter im Footer */
#sidebar-footer .lang-row { margin-top: .6rem; }
#sidebar-footer #lang-switcher {
  background: transparent; color: var(--tw-sidebar-muted);
  border: 1px solid var(--tw-border-soft); border-radius: .35rem;
  font-size: .78rem; padding: .15rem .4rem; width: 100%;
}
#sidebar-footer #lang-switcher option { background: var(--tw-sidebar-bg); color: var(--tw-sidebar-text); }

#sidebar-footer .user-name { color: #fff; font-weight: 600; }
#sidebar-footer .sidebar-copyright { margin-top: .75rem; display: flex; align-items: center; gap: .4rem; }
#sidebar-footer .sidebar-copyright a,
#sidebar-footer .sidebar-legal a { color: var(--tw-sidebar-footer); text-decoration: none; }
#sidebar-footer .sidebar-copyright a:hover,
#sidebar-footer .sidebar-legal a:hover { color: var(--tw-sidebar-muted); text-decoration: underline; }
#sidebar-footer .cl-icon {
  background: none; border: none; padding: 0; line-height: 1;
  color: var(--tw-sidebar-footer); font-size: .8rem;
}
#sidebar-footer .cl-icon:hover { color: var(--tw-sidebar-muted); }
#sidebar-footer .sidebar-legal { margin-top: .15rem; font-size: .78rem; }

/* ── Ticket-Karten (Listenansicht) ───────────────────────────────────── */
.ticket-card {
  transition: box-shadow .2s ease, transform .2s ease;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--tw-card-radius);
  margin-bottom: 1rem;
  box-shadow: var(--tw-card-shadow);
  background-color: var(--tw-surface);
  overflow: hidden;
  cursor: pointer;
}
.ticket-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  border-color: var(--tw-accent);
}
.ticket-card .card-body { padding: 1.1rem 1.25rem; }

.ticket-id { font-size: 1rem; font-weight: 700; color: #212529; }
.ticket-meta { font-size: .85rem; color: var(--tw-neutral); }
.ticket-reason { font-size: .95rem; line-height: 1.5; color: #212529; }

/* Rechte Spalte (Status + Datum) darf nicht umbrechen */
.ticket-right-column { flex-shrink: 0; min-width: 155px; text-align: right; }

/* Kopier-Button erst beim Hover */
.copy-btn { opacity: 0; transition: opacity .2s; }
.ticket-card:hover .copy-btn { opacity: 1; }

/* ── Status-Badges ───────────────────────────────────────────────────── */
.status-badge {
  font-size: .8rem; font-weight: 600;
  padding: .35rem .8rem; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.status-pending  { background-color: #fff3cd; color: #7a5b00; }
.status-progress { background-color: #cfe2ff; color: #084298; }
.status-closed   { background-color: #d1e7dd; color: #0f5132; }

/* ── Filterleiste ────────────────────────────────────────────────────── */
.filter-card {
  background: var(--tw-surface);
  border-radius: var(--tw-card-radius);
  box-shadow: var(--tw-card-shadow);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* ── Kommentar-Verlauf ───────────────────────────────────────────────── */
.comment-block { border-radius: var(--tw-card-radius); padding: .85rem 1rem; margin-bottom: .75rem; }
.comment-own   { background: rgba(110, 168, 254, .1); }
.comment-other { background: rgba(108, 117, 125, .08); }
.comment-meta  { font-size: .78rem; color: var(--tw-neutral); }

/* Nur intern sichtbar — deutlich abgesetzt, damit im Support niemand annimmt,
   der Kunde koenne mitlesen. Linker Balken zusaetzlich zur Flaeche, weil Farbe
   allein bei Sehschwaeche nicht traegt. */
.comment-internal {
  background: rgba(253, 126, 20, .1);
  border-left: 4px solid var(--tw-warning);
}
.comment-supplier {
  background: rgba(127, 92, 163, .12);
  border-left: 4px solid #7f5ca3;
}

/* Badge-Farben fuer den Lieferanten-Hinweis (Bootstrap kennt kein "purple-subtle") */
.bg-purple-subtle   { background-color: rgba(127, 92, 163, .18) !important; }
.text-purple-emphasis { color: #5c3f7a !important; }

/* Eingabefeld faerben, solange der Intern-Schalter aktiv ist */
#newComment.comment-input-internal {
  background: rgba(253, 126, 20, .06);
  border-color: var(--tw-warning);
}
.comment-visibility .form-check-label { font-size: .9rem; }

/* Die KI-Leiste am Kommentar- und am Problemfeld kommt aus dem Corporate Design
   (css/ai-assist.css, _corporate-design/components/ai-assist.md). Hier steht nur
   noch, was fuer diese App eigen ist. */

/* ── Login-Seite (ohne Shell) ────────────────────────────────────────── */
#login-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--tw-sidebar-bg);
}
#login-view .login-card {
  background: var(--tw-surface); border-radius: var(--tw-card-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  padding: 2.5rem; max-width: 26rem; width: 100%; text-align: center;
}
#login-view .login-logo { height: 38px; width: auto; margin-bottom: 1.5rem; }

/* Select2 an Bootstrap-Hoehe angleichen */
.select2-container--default .select2-selection--single {
  height: calc(2.25rem + 2px);
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .375rem;
}
.select2-container--open .select2-dropdown { z-index: 1060; }

@media (max-width: 576px) {
  .ticket-card .card-body { padding: 1rem; }
  .ticket-id { font-size: .95rem; }
  .ticket-right-column { min-width: 0; }
}