/* ===== Traversal Panel – Ergänzungen zum Otika-Template ===== */
body { font-family: 'Nunito', 'Segoe UI', Arial, sans-serif; }
.sidebar-brand .header-logo { height: 30px; margin-right: 6px; }

/* Kopfbereich jeder Seite */
.section-header-lite { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.section-header-lite h1 { font-size: 1.45rem; font-weight: 700; color: #34395e; margin: 0; flex: 1 1 auto; }
.section-header-lite p { flex-basis: 100%; order: 3; }

/* Demo-Leiste */
.demo-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  background: linear-gradient(90deg, #6777ef, #8e5cf7); color: #fff; border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.25rem;
  font-size: .9rem; box-shadow: 0 4px 14px rgba(103, 119, 239, .3); }
.demo-strip a { color: #fff; font-weight: 700; margin-left: 1rem; white-space: nowrap; }
.demo-strip a:hover { color: #ffe08a; text-decoration: none; }

/* Kennzahl-Kacheln */
.stat-card { border-radius: 12px; padding: 1.1rem 1.2rem; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.04);
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; height: calc(100% - 1.5rem); }
.stat-card .stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; flex-shrink: 0; }
.stat-card .stat-label { color: #98a6ad; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; color: #34395e; line-height: 1.2; }
.stat-card .stat-hint { font-size: .8rem; color: #98a6ad; }
.bg-grad-primary { background: linear-gradient(135deg, #6777ef, #8e9cf7); }
.bg-grad-success { background: linear-gradient(135deg, #47c363, #7ad98f); }
.bg-grad-warning { background: linear-gradient(135deg, #ffa426, #ffc673); }
.bg-grad-danger  { background: linear-gradient(135deg, #fc544b, #ff8f89); }
.bg-grad-info    { background: linear-gradient(135deg, #3abaf4, #7fd3f9); }
.bg-grad-purple  { background: linear-gradient(135deg, #8e5cf7, #b597fa); }

/* Tabellen */
.table td, .table th { vertical-align: middle !important; }
.table-thumb { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; }
.avatar-sm { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.avatar-initials { display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: #6777ef; border-radius: 50%; font-weight: 700; font-size: .8rem; }
.status-badge { font-size: .75rem; padding: .35em .7em; border-radius: 30px; font-weight: 700; }
.badge-warning { color: #fff; }
.actions { white-space: nowrap; }
.actions form { display: inline; }
.btn-link-reset { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.filter-pills .nav-link { border-radius: 30px !important; padding: .35rem 1rem; font-weight: 600; }
.filter-pills .nav-link .badge { margin-left: .35rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #98a6ad; }
.empty-state i { font-size: 2.6rem; margin-bottom: .8rem; color: #cdd3d8; display: block; }
.card .card-header h4 { font-weight: 700; }
.muted-small { font-size: .82rem; color: #98a6ad; }
.text-pre { white-space: pre-line; }

/* Karten mit Bild (Reiseziele) */
.dest-card { border-radius: 12px; overflow: hidden; }
.dest-card img { height: 170px; object-fit: cover; width: 100%; }
.dest-card .price { font-weight: 800; color: #6777ef; }
.trip-hero { position: relative; border-radius: 14px; overflow: hidden; color: #fff; min-height: 190px; background-size: cover; background-position: center; }
.trip-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,56,.85), rgba(20,24,56,.2)); }
.trip-hero > div { position: relative; padding: 1.6rem; }
.trip-hero h3 { color: #fff; font-weight: 800; }

/* Bildvorschau in Formularen */
.img-preview { max-height: 120px; border-radius: 10px; margin-top: .5rem; display: block; }
.form-section-title { font-size: .95rem; font-weight: 700; color: #6777ef; text-transform: uppercase; letter-spacing: .04em; margin: 1.2rem 0 .8rem; }

/* Kommentar-Liste */
.comment-item { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid #f2f2f2; }
.comment-item:last-child { border-bottom: 0; }
.comment-item .comment-body { flex: 1; }
.comment-item.inactive { opacity: .6; }

/* KI-Assistent */
.ai-dropdown { width: 380px !important; padding: 0 !important; }
.ai-chat { display: flex; flex-direction: column; height: 460px; }
.ai-chat-header { padding: 14px 16px; border-bottom: 1px solid #eee; font-weight: 700; }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px; background: #f6f7fb; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.45; }
.ai-msg-bot { align-self: flex-start; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ai-msg-user { align-self: flex-end; background: #6777ef; color: #fff; }
.ai-msg-error { color: #fc544b; }
.ai-chat-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #eee; margin: 0; }
.dropdown-item-unread .message-user { font-weight: 800 !important; }

/* Dunkles Layout */
.dark .stat-card, .dark .section-header-lite h1 { background: transparent; color: #fff; }
.dark .stat-card { background: #1a202e; }
.dark .stat-card .stat-value { color: #fff; }

@media (max-width: 575px) {
  .ai-dropdown { width: 300px !important; }
  .demo-strip a { margin-left: 0; margin-right: 1rem; }
}
.opacity-50 { opacity: .55; }
.border-dashed { border: 2px dashed #d7dbf7 !important; box-shadow: none !important; }
/* Otika färbt .text-primary im Theme "white/black" weiß – im Inhaltsbereich wieder lesbar machen */
.theme-white .main-content .text-primary, .theme-black .main-content .text-primary { color: #6777ef !important; }