/* ============================================================
   Albus IT – Business Suite · Custom CSS
   Komponenten-Klassen als reines CSS (unabhängig von der
   Tailwind-Play-CDN, die @apply in externen Dateien NICHT
   verarbeitet). Utility-Klassen in den Templates liefert die CDN.
   ============================================================ */

:root {
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-500:#3b82f6;
  --blue-600:#2563eb; --blue-700:#1d4ed8;
  --green-50:#f0fdf4; --green-200:#bbf7d0; --green-600:#16a34a; --green-700:#15803d;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-700:#b45309;
  --red-50:#fef2f2; --red-200:#fecaca; --red-600:#dc2626; --red-700:#b91c1c;
  --purple-50:#faf5ff; --purple-200:#e9d5ff; --purple-600:#9333ea; --purple-700:#7e22ce;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-900:#111827;
}

body { font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
.font-mono, .font-mono * { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* [CSS-01] Badges */
.badge-green, .badge-blue, .badge-amber, .badge-red, .badge-gray, .badge-purple {
  display:inline-flex; align-items:center; padding:0.125rem 0.625rem;
  border-radius:9999px; font-size:0.75rem; line-height:1rem; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
}
.badge-green  { background:var(--green-50);  color:var(--green-700);  border-color:var(--green-200); }
.badge-blue   { background:var(--blue-50);   color:var(--blue-700);   border-color:var(--blue-200); }
.badge-amber  { background:var(--amber-50);  color:var(--amber-700);  border-color:var(--amber-200); }
.badge-red    { background:var(--red-50);    color:var(--red-700);    border-color:var(--red-200); }
.badge-gray   { background:var(--gray-100);  color:var(--gray-600); }
.badge-purple { background:var(--purple-50); color:var(--purple-700); border-color:var(--purple-200); }

/* [CSS-02] Karten */
.card { background:#fff; border-radius:0.75rem; border:1px solid var(--gray-200); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.card-header {
  padding:1rem 1.25rem; border-bottom:1px solid var(--gray-100);
  font-weight:600; color:var(--gray-900);
  display:flex; align-items:center; justify-content:space-between;
}
.card-body { padding:1.25rem; }

/* [CSS-03] Formular */
.form-input {
  width:100%; border-radius:0.5rem; border:1px solid var(--gray-300);
  padding:0.5rem 0.75rem; font-size:0.875rem; color:var(--gray-900); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.form-input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100); }
.form-label { display:block; font-size:0.75rem; font-weight:600; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.375rem; }
.form-group { margin-bottom:1rem; }

/* [CSS-04] Buttons */
.btn-primary, .btn-ghost, .btn-danger {
  display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem;
  border-radius:0.5rem; font-size:0.875rem; font-weight:600; cursor:pointer;
  transition:background-color .15s, border-color .15s, opacity .15s; border:1px solid transparent;
}
.btn-primary { background:var(--blue-600); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.btn-primary:hover { background:var(--blue-700); }
.btn-ghost { background:#fff; color:var(--gray-600); border-color:var(--gray-200); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.btn-ghost:hover { background:var(--gray-50); }
.btn-danger { background:var(--red-600); color:#fff; }
.btn-danger:hover { background:var(--red-700); }
.btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity:.5; cursor:not-allowed; }

/* [CSS-05] Tabelle */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:0.75rem 1rem; font-size:0.75rem; font-weight:600;
  color:var(--gray-400); text-transform:uppercase; letter-spacing:0.05em;
  background:var(--gray-50); border-bottom:1px solid var(--gray-100); }
.data-table td { padding:0.75rem 1rem; border-bottom:1px solid var(--gray-50); font-size:0.875rem; }
.data-table tbody tr:hover { background:var(--gray-50); cursor:pointer; }

/* [CSS-06] Sidebar */
.nav-item { display:flex; align-items:center; gap:0.75rem; padding:0.625rem 0.75rem;
  border-radius:0.5rem; font-size:0.875rem; font-weight:500; color:var(--gray-600);
  cursor:pointer; transition:background-color .15s, color .15s; margin:0 0.5rem; }
.nav-item:hover { color:var(--gray-900); background:var(--gray-100); }
.nav-item.active { color:var(--blue-600); background:var(--blue-50); font-weight:600; }
.nav-item i { width:1.25rem; text-align:center; }

/* [CSS-07] Mobile */
@media (max-width:768px) {
  .data-table thead { display:none; }
  .data-table tbody tr { display:flex; flex-direction:column; padding:12px 16px; gap:4px; }
  .data-table tbody td { border:none; padding:0; }
}

/* Toasts */
.toast-enter { animation:toastIn .2s ease-out; }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* Schmaler Scrollbar in der Sidebar */
.thin-scroll::-webkit-scrollbar { width:6px; }
.thin-scroll::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:3px; }

/* [TI] Rich-Text-Editor & Nachrichten-Darstellung (Tickets) */
.tk-editor:empty:before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
.tk-editor:focus { outline: none; }
.tk-editor img, .tk-msg img { max-width: 100%; max-height: 220px; border-radius: 8px; margin: 4px 0; display: block; }
.tk-msg ul, .tk-editor ul { list-style: disc; padding-left: 1.25rem; margin: 4px 0; }
.tk-msg ol, .tk-editor ol { list-style: decimal; padding-left: 1.25rem; margin: 4px 0; }
.tk-msg a { text-decoration: underline; }