/* ===== Modern Panel UI – MuKo ===== */
:root{
  --mm-accent:#4f46e5;          /* Indigo */
  --mm-accent-2:#22c55e;        /* Green */
  --mm-text:#0f172a;            /* Slate-900 */
  --mm-muted:#64748b;           /* Slate-500 */
  --mm-border:#e2e8f0;          /* Slate-200 */
  --mm-bg:#f8fafc;              /* Slate-50 */
  --mm-card:#ffffff;
  --mm-shadow: 0 6px 24px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.06);
}

body{ background: var(--mm-bg); color:var(--mm-text); }

/* Cards */
.card{
  border:0!important;
  border-radius: 18px;
  background: var(--mm-card);
  box-shadow: var(--mm-shadow);
}
.card-header{
  border-bottom:1px solid var(--mm-border);
  border-top-left-radius:18px!important;
  border-top-right-radius:18px!important;
  background: linear-gradient(180deg, rgba(79,70,229,.06), transparent);
}
.card-title{ margin:0; font-weight:700; letter-spacing:.2px; }

/* Buttons */
.btn{ border-radius:12px; }
.btn-primary{
  background:var(--mm-accent);
  border-color:var(--mm-accent);
}
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-outline-success{
  border-radius:12px;
}

/* Inputs */
.form-control, .form-select{
  border-radius:12px; border-color:var(--mm-border);
}
.form-control:focus, .form-select:focus{
  border-color:var(--mm-accent);
  box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
}

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  font-weight:700; color:var(--mm-muted); border-bottom:1px solid var(--mm-border)!important;
}
.table tbody tr{
  transition: background .15s ease;
}
.table tbody tr:hover{
  background: rgba(79,70,229,.04);
}
.table td, .table th{ vertical-align: middle; }

/* Soft badges (pills) */
.badge{ border-radius:999px; padding:.4rem .6rem; font-weight:600; letter-spacing:.2px; }
.badge-soft-success{ color:#166534; background: #dcfce7; }
.badge-soft-warning{ color:#854d0e; background: #fef3c7; }
.badge-soft-danger{  color:#991b1b; background: #fee2e2; }
.badge-soft-info{    color:#075985; background: #e0f2fe; }
.badge-soft-secondary{ color:#334155; background:#e2e8f0; }

/* Chips for files */
.file-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .55rem; border-radius:999px;
  border:1px solid var(--mm-border); background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02);
  text-decoration:none;
}
.file-chip i{ font-size:14px; }

/* Ticket thread – chat bubbles */
.ticket-thread{ display:flex; flex-direction:column; gap:16px; max-height:60vh; overflow:auto; padding:4px; }
.msg{ display:flex; gap:12px; }
.msg .avatar{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: #eef2ff; color:#3730a3; font-weight:700; flex:0 0 auto;
}
.msg .bubble{
  max-width:82%;
  padding:12px 14px; border-radius:16px;
  border:1px solid var(--mm-border);
  background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.msg .meta{ font-size:.8rem; color:var(--mm-muted); margin-bottom:.25rem; }

.msg.user{ justify-content:flex-end; }
.msg.user .avatar{ order:2; background:#ecfeff; color:#155e75; }
.msg.user .bubble{ background:#f5f3ff; border-color:#e9e5ff; }

.msg.admin .avatar{ background:#dcfce7; color:#166534; }
.msg.admin .bubble{ background:#ffffff; }

/* Sticky action bar for reply forms (optional) */
.sticky-actions{
  position:sticky; bottom:0; background: linear-gradient(180deg, transparent, #fff 30%);
  padding-top:8px;
}

/* KPI tiles (Dashboard) */
.kpi{ padding:18px; border:1px solid var(--mm-border); border-radius:16px; background:#fff; }
.kpi .label{ color:var(--mm-muted); font-size:.9rem; }
.kpi .value{ font-size:1.6rem; font-weight:800; }

/* Misc */
.text-truncate-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Erzwinge volle Tabellenbreite + Scroll, falls ein Theme Columns versteckt */
.table-responsive { overflow-x: auto !important; }
.table-wide { min-width: 1400px; } /* genug Platz für 13 Spalten */
.table-wide th, .table-wide td { white-space: nowrap; }

/* Höhe des Headers als Variable – je nach Breakpoint anpassen */
:root { --header-h: 72px; }              /* Desktop */
@media (max-width: 991.98px) {
  :root { --header-h: 60px; }            /* Mobile */
}

/* Header fixieren & sichtbar machen */
#header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;                         /* über Inhalt */
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Platz unter dem fixen Header für den Seiteninhalt schaffen */
 body{ padding-top: var(--header-h); } 

/* Dropdowns sicher über dem Content rendern */
#header .navbar .dropdown ul{
  z-index: 1100;                         /* Menü über Karten/Buttons */
}