.ck-editor__editable,
textarea {
    min-height: 150px;
}

/* Kopfzeile strecken & Controls platzieren --------------------------------*/
.dt-toolbar{ width:100% !important; }      /* volle Breite, selbst in Cards   */

.dt-toolbar .dataTables_length{ flex:0 0 auto; }   /* links kompakt            */

.dt-toolbar .dt-buttons{                    /* Buttons in der Mitte          */
    flex:1 1 auto;                          /* nimmt Restbreite ein          */
    display:flex; flex-wrap:nowrap;
    justify-content:center;
    overflow-x:auto; min-width:0;           /* darf schrumpfen / scrollen    */
}

.dt-toolbar .dataTables_filter{             /* Suchfeld ganz rechts          */
    flex:0 0 auto; margin-left:auto;
}
.dt-toolbar .dataTables_filter label{
    display:flex; align-items:center; gap:.5rem; margin-bottom:0;
}

.dt-buttons .btn-danger{ flex: 0 0 auto align-right !important; }

.select2 {
    max-width: 100%;
    width: 100% !important;
}

.select2-selection__rendered {
    padding-bottom: 5px !important;
}

.has-error .invalid-feedback {
    display: block !important;
}

.btn-info,
.badge-info {
    color: white;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none;
}

.sidebar .nav-item {
    cursor: pointer;
}

.btn-default {
    color: #23282c;
    background-color: #f0f3f5;
    border-color: #f0f3f5;
}

.btn-default.focus,
.btn-default:focus {
    box-shadow: 0 0 0 .2rem rgba(209, 213, 215, .5);
}

.btn-default:hover {
    color: #23282c;
    background-color: #d9e1e6;
    border-color: #d1dbe1;
}

.btn-group-xs>.btn,
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.searchable-title {
    font-weight: bold;
}

.searchable-fields {
    padding-left: 5px;
}

.searchable-link {
    padding: 0 5px 0 5px;
}

.searchable-link:hover {
    cursor: pointer;
    background: #eaeaea;
}

.select2-results__option {
    padding-left: 0px;
    padding-right: 0px;
}

.form-group .required::after {
    content: " *";
    color: red;
}

.form-check.is-invalid~.invalid-feedback {
    display: block;
}

.c-sidebar-brand .c-sidebar-brand-full:hover {
    color: inherit;
}

.custom-select.form-control-sm {
    padding: 0.25rem 1.5rem;
}

.nav-link-el[data-toggle].collapsed:after {
    content: " ▾";
}

.nav-link-el[data-toggle]:not(.collapsed):after {
    content: " ▴";
}

.datatable-hide-text .datatable-btn-text {
    display: none;
}
.datatable-hide-text .dt-buttons .btn span.datatable-btn-text {
    display: none;
}
.datatable-hide-icons .dataTables_wrapper svg,
.datatable-hide-icons .dataTables_wrapper i,
.datatable-hide-icons .datatable svg,
.datatable-hide-icons .datatable i {
    display: none;
}

.datatable-config-btn {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.datatable-config-btn:hover {
    color: inherit;
    text-decoration: none;
}

/* Space between icons and text inside datatable buttons */
.datatable-btn-text {
    margin-left: .25rem;
}

/* Emoji reaction visibility */
.chat-message .emoji-reaction {
    display: none;
}
.chat-message:hover .emoji-reaction {
    display: inline-block;
}

@keyframes emoji-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.emoji-pop {
    animation: emoji-pop 0.4s ease-out;
}

/* Tom Select Felder in Dark Mode wie normale Eingabefelder darstellen */
[data-bs-theme="dark"] .ts-wrapper.form-control .ts-control,
[data-bs-theme="dark"] .ts-wrapper.form-select .ts-control {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* Fix für Frontend Layout mit fixed-top navbar */
body:not(.admin-layout) .page-wrapper {
    padding-top: 80px !important; /* Mehr Platz für die fixed navbar */
}

/* Zusätzlicher Fix für Container innerhalb page-wrapper */
body:not(.admin-layout) .page-wrapper .container {
    padding-top: 20px !important;
}

/* Stelle sicher, dass der Inhalt scrollbar ist */
body {
    overflow-y: auto !important;
    min-height: 100vh !important;
}

/* Card Header sichtbar machen */
.card-header {
    position: relative !important;
    z-index: 1 !important;
}

/* Zusätzlicher Fix für mobile Geräte */
@media (max-width: 768px) {
    body:not(.admin-layout) .page-wrapper {
        padding-top: 70px !important;
    }
}

/* Ensure animations work for dynamically generated content */
.dataTables_wrapper .btn-animate-icon,
.dataTables_wrapper .nav-link {
    transition: all 0.15s ease-in-out;
    position: relative;
    overflow: hidden;
}

.dataTables_wrapper .btn-animate-icon:hover,
.dataTables_wrapper .nav-link:hover {
    transform: translateY(-1px);
}

/* Settings icons in DataTables */
.dataTables_wrapper .nav-link:hover svg[viewBox*='24 24'] path[d*='M10.325 4.317c.426'],
.dataTables_wrapper .btn:hover svg[viewBox*='24 24'] path[d*='M10.325 4.317c.426'] {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* Apply rotate animation to any settings icon */
.dataTables_wrapper svg[viewBox*='24 24'] path[d*='M10.325 4.317c.426'] {
    transition: transform 0.3s ease;
    transform-origin: center;
}

/* Force animation on parent elements containing settings icons */
.dataTables_wrapper a:hover svg path[d*='M10.325 4.317c.426'],
.dataTables_wrapper button:hover svg path[d*='M10.325 4.317c.426'] {
    transform: rotate(90deg);
}


/* Universal settings icon animation - works everywhere */
svg path[d*='M10.325 4.317c.426'] {
    transition: transform 0.3s ease;
    transform-origin: center;
}

a:hover svg path[d*='M10.325 4.317c.426'],
button:hover svg path[d*='M10.325 4.317c.426'],
.nav-link:hover svg path[d*='M10.325 4.317c.426'] {
    transform: rotate(90deg);
}

/* Ensure parent elements don't interfere */
a, button, .nav-link {
    overflow: visible !important;
}

a svg, button svg, .nav-link svg {
    overflow: visible !important;
}

/* KI-Icon Pulsierende Animation */
@keyframes ki-pulse {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

.btn-animate-icon-pulse:hover svg,
.btn-animate-icon-pulse svg {
    animation: ki-pulse 2s infinite ease-in-out;
}

/* KI-Icon Glow-Effekt beim Hover */
.btn-animate-icon-pulse:hover svg {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
    transition: filter 0.3s ease;
}