/* ======================
   Dev-Plattform Styles
   ====================== */

/* Custom Properties */
:root {
    /* Spacing */
    --dp-spacing-xs: 0.25rem;
    --dp-spacing-sm: 0.5rem;
    --dp-spacing-md: 1rem;
    --dp-spacing-lg: 1.5rem;
    --dp-spacing-xl: 3rem;

    /* Sizes */
    --dp-touch-target: 44px;
    --dp-chat-width: 340px;
    --dp-chat-height: 440px;
    --dp-chat-toggle-size: 48px;
    --dp-kanban-column-min: 300px;
    --dp-kanban-cards-min: 200px;

    /* Transitions */
    --dp-transition-fast: 0.15s;
    --dp-transition-normal: 0.2s;

    /* Border */
    --dp-border-accent: 4px;
    --dp-border-radius-sm: 0.25rem;
    --dp-border-radius-md: 0.375rem;
    --dp-border-radius-lg: 0.5rem;
}

/* Basis */
body {
    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Navbar */
.navbar-brand {
    font-weight: 700;
}

/* Projekt-Switcher Abgrenzung */
.nav-separator {
    border-right: 1px solid var(--bs-border-color);
    margin: 0.25rem 0.5rem;
}

@media (max-width: 991.98px) {
    .nav-separator {
        border-right: none;
        border-bottom: 1px solid var(--bs-border-color);
        margin: 0.25rem 0;
    }
}

/* Projekt-Switcher - gleiche Hoehe wie Nav-Pills */
.nav-project-switcher .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: inherit;
    transition: all 0.2s ease;
    margin: 0 0.15rem;
}

.nav-project-switcher .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.nav-project-switcher .nav-link::after {
    font-size: 0.6rem;
    opacity: 0.5;
}

.nav-project-switcher .color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Navigation Pills (rechteckig) */
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link {
    padding: 0.5rem 1rem;
    margin: 0 0.15rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active {
    background: var(--bs-primary);
    color: #fff !important;
}

/* Wiki Sidebar */
.wiki-sidebar .list-group-item {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.wiki-sidebar .list-group-item.active {
    --bs-list-group-active-bg: transparent;
    --bs-list-group-active-color: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
}

.wiki-sidebar .list-group-item {
    cursor: grab;
}

.wiki-sidebar-ghost {
    opacity: 0.4;
}

/* Wiki Content */
.wiki-content-card {
    border-top: 3px solid var(--bs-primary);
}

/* Projekt-Farb-Indikator (kleines Farbquadrat) */
.color-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Cards */
.card {
    border-color: var(--bs-border-color);
}

/* Login-Seite */
.min-vh-100 {
    background: var(--bs-body-bg);
}

/* Flash-Messages */
.alert {
    border-radius: 0.375rem;
}

/* ========================
   Toast Notifications
   ======================== */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1060;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    max-width: 320px;
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bs-primary);
    border: none;
    border-radius: var(--dp-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-size: 0.85rem;
    color: #fff;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-notification.hide {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
    opacity: 0.9;
}

.toast-content {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s;
}

.toast-close:hover {
    color: #fff;
}

/* Toast-Typen */
.toast-notification.toast-success {
    background: var(--bs-success);
}

.toast-notification.toast-danger {
    background: var(--bs-danger);
}

.toast-notification.toast-warning {
    background: var(--bs-warning);
    color: #000;
}

.toast-notification.toast-warning .toast-close {
    color: rgba(0, 0, 0, 0.5);
}

.toast-notification.toast-warning .toast-close:hover {
    color: #000;
}

.toast-notification.toast-info {
    background: var(--bs-info);
    color: #000;
}

.toast-notification.toast-info .toast-close {
    color: rgba(0, 0, 0, 0.5);
}

.toast-notification.toast-info .toast-close:hover {
    color: #000;
}

@media (max-width: 576px) {
    .toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}

/* Color Picker */
.color-option {
    cursor: pointer;
}

.color-swatch {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition:
        border-color 0.15s,
        transform 0.15s;
}

.color-option:hover .color-swatch {
    transform: scale(1.1);
}

.color-option input:checked + .color-swatch {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.color-option input:checked + .color-swatch::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Gefahrenzone */
.border-danger .card-header {
    font-weight: 600;
}

/* Scrollbar (Dark Theme) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-bg);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-tertiary-bg);
}

/* Drop-Zone */
#dropArea {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

#dropArea:hover,
#dropArea.border-primary {
    border-color: var(--bs-primary);
}

/* Doc-Inhalt (Parsedown-Rendering) */
.doc-content {
    font-size: 0.95rem;
    line-height: 1.75;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4,
.doc-content h5,
.doc-content h6 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.doc-content h1:first-child,
.doc-content h2:first-child,
.doc-content h3:first-child {
    margin-top: 0;
}

.doc-content h1 {
    font-size: 1.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--bs-border-color);
}

.doc-content h2 {
    font-size: 1.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.doc-content h3 {
    font-size: 1.15rem;
}

.doc-content h4 {
    font-size: 1rem;
}

.doc-content p {
    margin-bottom: 0.75rem;
}

.doc-content ul,
.doc-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.doc-content li {
    margin-bottom: 0.25rem;
}

.doc-content li > ul,
.doc-content li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.doc-content a {
    color: var(--bs-primary);
    text-decoration: none;
}

.doc-content a:hover {
    text-decoration: underline;
}

.doc-content code {
    background: var(--bs-tertiary-bg);
    color: #e685b5;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

.doc-content pre {
    background: var(--bs-tertiary-bg);
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
}

.doc-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.6;
}

.doc-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
}

.doc-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border-radius: 0.375rem;
    overflow: hidden;
}

.doc-content thead th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.doc-content th,
.doc-content td {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--bs-border-color);
}

.doc-content tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.doc-content blockquote {
    border-left: 4px solid var(--bs-primary);
    padding: 0.75rem 1.25rem;
    margin: 1rem 0;
    background: rgba(13, 110, 253, 0.04);
    border-radius: 0 0.375rem 0.375rem 0;
    color: var(--bs-secondary-color);
}

.doc-content blockquote p:last-child {
    margin-bottom: 0;
}

.doc-content hr {
    border: none;
    border-top: 1px solid var(--bs-border-color);
    margin: 1.5rem 0;
}

/* Dateiverwaltung */
.file-card {
    cursor: pointer;
    transition: border-color var(--dp-transition-fast);
}

.file-card:hover {
    border-color: var(--bs-primary);
}

.file-thumb {
    background: var(--bs-tertiary-bg);
}

.badge-status {
    width: auto;
    height: auto;
    display: inline-block;
    border-radius: 0.25rem;
    font-size: 0.7rem;
}

.file-row {
    cursor: pointer;
}

.file-row:hover td {
    color: var(--bs-light);
}

/* Inline-Kategorie-Edit in Tabelle */
.file-cat-inline {
    cursor: pointer;
    position: relative;
}

.file-cat-inline:hover .cat-label {
    text-decoration: underline;
    color: var(--bs-light) !important;
}

.file-cat-inline select {
    min-width: 140px;
}

/* Sortierbare Spalten */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--dp-transition-fast);
}

th.sortable:hover {
    color: var(--bs-primary);
}

th.sortable.sort-asc,
th.sortable.sort-desc {
    color: var(--bs-primary);
}

/* Aktive Filter hervorheben */
.filter-cat.active,
.filter-status.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.filter-cat.active:hover,
.filter-status.active:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Toast UI Editor Anpassungen */
.toastui-editor-defaultUI {
    border-color: var(--bs-border-color);
}

.toastui-editor-defaultUI .toastui-editor-toolbar-icons {
    border: none;
}

/* Bild-Picker Modal */
.image-picker-card {
    transition: border-color var(--dp-transition-fast);
}

.image-picker-card:hover {
    border-color: var(--bs-primary) !important;
}

/* Kanban Filter Badge (klickbar) */
#filterBadge {
    cursor: pointer;
    transition: opacity var(--dp-transition-fast);
}

#filterBadge:hover {
    opacity: 0.8;
}

/* Kanban Board */
.kanban-column {
    min-height: var(--dp-kanban-column-min);
}

.kanban-cards {
    min-height: var(--dp-kanban-cards-min);
}

/* Farbige Spalten-Header */
.kanban-header-secondary {
    background-color: rgba(108, 117, 125, 0.15);
    border-bottom: 2px solid #6c757d;
}

.kanban-header-purple {
    background-color: rgba(111, 66, 193, 0.15);
    border-bottom: 2px solid #6f42c1;
}

.kanban-header-primary {
    background-color: rgba(13, 110, 253, 0.15);
    border-bottom: 2px solid #0d6efd;
}

.kanban-header-info {
    background-color: rgba(13, 202, 240, 0.15);
    border-bottom: 2px solid #0dcaf0;
}

.kanban-header-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-bottom: 2px solid #198754;
}

.kanban-header-text {
    font-weight: 600;
    font-size: 0.875rem;
}

.kanban-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    margin-right: 0.35rem;
}

.kanban-header-secondary .kanban-count {
    background-color: rgba(108, 117, 125, 0.3);
}

.kanban-header-purple .kanban-count {
    background-color: rgba(111, 66, 193, 0.3);
}

.kanban-header-primary .kanban-count {
    background-color: rgba(13, 110, 253, 0.3);
}

.kanban-header-info .kanban-count {
    background-color: rgba(13, 202, 240, 0.3);
}

.kanban-header-success .kanban-count {
    background-color: rgba(25, 135, 84, 0.3);
}

/* Add-Button im Header anpassen */
.kanban-column .card-header .btn-add-card,
.kanban-column .card-header .btn-add-card-multi {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: inherit;
    opacity: 0.7;
}

.kanban-column .card-header .btn-add-card:hover,
.kanban-column .card-header .btn-add-card-multi:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.kanban-card.card {
    cursor: pointer;
    transition:
        border-color var(--dp-transition-fast),
        box-shadow var(--dp-transition-fast);
    position: relative;
}

.kanban-card.card:hover {
    border-color: var(--bs-primary);
}

/* Prioritaets-Badge rechts oben */
.kanban-prio-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.kanban-prio-badge.bg-warning {
    color: #000;
}

.kanban-prio-icon {
    font-weight: 700;
    margin-right: 0.2rem;
}

.kanban-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
}

/* Touch-Targets: Mindestgroesse fuer interaktive Elemente */
.btn-add-card,
.view-toggle,
.todo-delete {
    min-width: var(--dp-touch-target);
    min-height: var(--dp-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kanban-assignee {
    width: auto;
    height: auto;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

/* Badges-Container in Karten-Fusszeile */
.kanban-card .card-body > .d-flex > span:last-child {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.kanban-card .card-body > .d-flex > span:last-child .badge {
    margin-left: 0 !important;
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

/* SortableJS States */
.kanban-ghost {
    opacity: 0.4;
}

.kanban-chosen {
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.kanban-drag {
    opacity: 0.9;
}

/* Kanban Board-Karte (Uebersicht) */
.kanban-board-card {
    transition:
        border-color var(--dp-transition-fast),
        transform var(--dp-transition-fast);
}

.kanban-board-card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

/* Kanban Multi-Board Uebersicht */
.kanban-multi-board {
    padding-bottom: 0.5rem;
}

.kanban-board-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.kanban-column-compact {
    min-height: 180px;
}

.kanban-column-compact .kanban-cards {
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
}

/* ========================
   Daily-Liste (Kompakt)
   ======================== */
.daily-page {
    max-width: 1400px;
}

.daily-column {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--dp-border-radius-lg);
    padding: 0;
}

.daily-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: var(--dp-border-radius-lg) var(--dp-border-radius-lg) 0 0;
}

.daily-column-indicator {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
}

.daily-section {
    padding: 0.5rem;
}

.daily-section-divider {
    height: 1px;
    background: var(--bs-border-color);
    margin: 0 0.5rem;
}

.daily-empty {
    padding: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Quick-Todos */
.daily-todo-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--dp-border-radius-sm);
    transition: background-color var(--dp-transition-fast);
    cursor: grab;
}

.daily-todo-item:hover {
    background: var(--bs-tertiary-bg);
}

.daily-todo-item:active {
    cursor: grabbing;
}

.daily-todo-item .form-check-input {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    flex-shrink: 0;
}

.daily-todo-text {
    flex: 1;
    font-size: 0.8125rem;
}

.daily-todo-done .daily-todo-text {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.daily-todo-from {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--dp-border-radius-sm);
}

.daily-todo-delete {
    opacity: 0;
    background: none;
    border: none;
    padding: 0 0.25rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition:
        opacity var(--dp-transition-fast),
        color var(--dp-transition-fast);
}

.daily-todo-delete:hover {
    color: var(--bs-danger);
}

.daily-todo-item:hover .daily-todo-delete {
    opacity: 1;
}

/* Kanban-Tasks */
.daily-task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--dp-border-radius-sm);
    transition: background-color var(--dp-transition-fast);
}

.daily-task-item:hover {
    background: var(--bs-tertiary-bg);
}

.daily-task-prio {
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.daily-task-content {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.daily-task-content:hover .daily-task-title {
    color: var(--bs-primary);
}

.daily-task-title {
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--dp-transition-fast);
}

.daily-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.daily-task-board {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.daily-task-doc {
    font-size: 0.75rem;
    color: var(--bs-info);
    text-decoration: none;
}

.daily-task-doc:hover {
    text-decoration: underline;
}

.daily-task-status {
    flex-shrink: 0;
    width: auto;
    min-width: 100px;
    font-size: 0.8125rem;
}

/* Gemeinsam-Bereich */
.daily-shared {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--dp-border-radius-lg);
}

.daily-shared .daily-column-header {
    border-radius: var(--dp-border-radius-lg) var(--dp-border-radius-lg) 0 0;
}

.daily-shared-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.25rem;
}

/* SortableJS States */
.quick-todo-ghost {
    opacity: 0.4;
    background: var(--bs-primary);
}

.quick-todo-chosen {
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.quick-todo-drag {
    opacity: 0.9;
    background: var(--bs-tertiary-bg);
}

/* Legacy support */
.todo-delete {
    opacity: 0;
    transition: opacity var(--dp-transition-fast);
}

.quick-todo:hover .todo-delete {
    opacity: 1;
}

/* Dashboard */
.dash-task {
    transition: background-color var(--dp-transition-fast);
}

.dash-task:hover {
    background-color: var(--bs-tertiary-bg);
}

.progress {
    background-color: var(--bs-secondary-bg);
}

/* ========================
   Chat Popup
   ======================== */
.chat-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050;
}

.chat-toggle-btn {
    width: var(--dp-chat-toggle-size);
    height: var(--dp-chat-toggle-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    padding: 0;
}

.chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chat-window {
    width: var(--dp-chat-width);
    height: var(--dp-chat-height);
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--dp-border-radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.chat-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-input {
    padding: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    position: relative;
}

/* Einzelne Nachricht */
.chat-msg {
    max-width: 85%;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.35;
    word-break: break-word;
}

.chat-msg-own {
    align-self: flex-end;
    background: var(--bs-primary);
    color: #fff;
}

.chat-msg-own .chat-msg-time {
    color: rgba(255, 255, 255, 0.65);
}

.chat-msg-other {
    align-self: flex-start;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.chat-msg-header {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.1rem;
}

.chat-msg-user {
    font-weight: 600;
    font-size: 0.7rem;
}

.chat-msg-time {
    font-size: 0.6rem;
    color: var(--bs-secondary-color);
}

.chat-msg-text {
    white-space: pre-wrap;
}

/* @-Verlinkungen */
.chat-mention {
    color: #58a6ff;
    text-decoration: none;
    font-weight: 500;
}

.chat-mention:hover {
    text-decoration: underline;
}

.chat-msg-own .chat-mention {
    color: #c9e6ff;
}

/* Chat Autocomplete */
.chat-autocomplete {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: 0.375rem 0.375rem 0 0;
    z-index: 10;
}

.chat-ac-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.chat-ac-item:last-child {
    border-bottom: none;
}

.chat-ac-item:hover,
.chat-ac-item.active {
    background: var(--bs-tertiary-bg);
}

.chat-ac-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.chat-ac-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-body-color);
}

.chat-ac-value {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-family: monospace;
}

/* Leere Zustaende */
.empty-state,
.empty-state-inline {
    color: var(--bs-secondary-color);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state p {
    margin-bottom: 1rem;
}

.empty-state .btn {
    margin-top: 0.5rem;
}

.empty-state-inline {
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem 0;
    text-align: center;
}

/* Responsive: Filter-Leiste auf Mobile */
@media (max-width: 767.98px) {
    .card-body .border-start {
        display: none;
    }

    .filter-cat,
    .filter-status {
        margin-bottom: 0.25rem;
    }
}

/* Responsive: Kanban auf Mobile */
@media (max-width: 575.98px) {
    .kanban-column {
        min-height: 150px;
    }

    .kanban-cards {
        min-height: 80px;
    }

    .kanban-column-compact {
        min-height: 120px;
    }

    .kanban-column-compact .kanban-cards {
        max-height: 250px;
    }
}

/* Responsive: kleiner auf Mobile */
@media (max-width: 576px) {
    .chat-window {
        width: calc(100vw - 40px);
        height: 360px;
    }

    .chat-popup {
        bottom: 10px;
        left: 10px;
    }
}

/* ========================
   Kanban Detail Modal
   ======================== */

/* Status-gefaerbte Header (passend zu Kanban-Spalten) */
.modal-header-backlog {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
    color: #fff;
}

.modal-header-in_arbeit {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: #fff;
}

.modal-header-review {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    color: #000;
}

.modal-header-fertig {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
    color: #fff;
}

/* Detail-Modal Header kompakter */
#taskDetailModal .modal-header {
    padding: 0.5rem 1rem;
}

#taskDetailModal .modal-title {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Header Icon-Button (Bearbeiten) */
.btn-header-icon {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--dp-transition-fast);
}

.btn-header-icon:hover {
    opacity: 1;
}

.modal-header-backlog .btn-header-icon,
.modal-header-in_arbeit .btn-header-icon,
.modal-header-fertig .btn-header-icon {
    color: #fff;
}

.modal-header-review .btn-header-icon {
    color: #000;
}

/* Modal Body Elemente */
.task-detail-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.task-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.task-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.task-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.task-detail-meta-separator {
    color: var(--bs-border-color);
}

.task-detail-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.task-detail-description {
    white-space: pre-wrap;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    padding: 0.75rem;
    border-radius: var(--dp-border-radius-md);
    max-height: 200px;
    overflow-y: auto;
}

.task-detail-doclinks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task-detail-doclinks li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.task-detail-doclinks li:last-child {
    border-bottom: none;
}

.task-detail-doclinks a {
    color: var(--bs-body-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--dp-transition-fast);
}

.task-detail-doclinks a:hover {
    color: var(--bs-primary);
}

/* ========================
   Doc Table of Contents
   ======================== */
.doc-toc-wrapper {
    position: sticky;
    top: 1rem;
}

.doc-toc {
    background: var(--bs-tertiary-bg);
    border-radius: var(--dp-border-radius-md);
    padding: 1rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.doc-toc-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.doc-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.doc-toc-item {
    margin-bottom: 0.25rem;
}

.doc-toc-h2 {
    padding-left: 0.75rem;
}

.doc-toc-h3 {
    padding-left: 1.5rem;
}

.doc-toc-link {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--dp-border-radius-sm) var(--dp-border-radius-sm) 0;
    transition:
        color var(--dp-transition-fast),
        background-color var(--dp-transition-fast),
        border-color var(--dp-transition-fast);
    line-height: 1.4;
}

.doc-toc-link:hover {
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.05);
}

.doc-toc-link.active {
    color: var(--bs-primary);
    border-left-color: var(--bs-primary);
    background: rgba(13, 110, 253, 0.1);
}

/* ========================
   Doc Prev/Next Navigation
   ======================== */
.doc-nav {
    padding: 1rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--dp-border-radius-md);
}

.doc-nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--bs-body-color);
    border-radius: var(--dp-border-radius-sm);
    transition: background-color var(--dp-transition-fast);
    max-width: 45%;
}

.doc-nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bs-primary);
}

.doc-nav-link span {
    font-size: 0.9rem;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-nav-link small {
    font-size: 0.7rem;
}

/* ========================
   Files Browser (Sidebar-Layout)
   ======================== */

/* Container: Negatives Margin um main-padding zu entfernen */
.files-browser-container {
    margin: -1.5rem -0.75rem -1.5rem -0.75rem;
    width: calc(100% + 1.5rem);
}

/* Haupt-Grid: 2 Spalten */
.files-browser {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: calc(100vh - 56px);
    gap: 0;
}

/* Linke Sidebar: Kategorien */
.files-sidebar {
    background: var(--bs-dark);
    border-right: 1px solid var(--bs-border-color);
    overflow-y: auto;
    height: calc(100vh - 56px);
    padding: 1rem 0;
}

.files-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.5rem;
}

.files-sidebar-header h5 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Kategorie-Gruppen in Sidebar */
.files-category {
    margin-bottom: 0.25rem;
}

.files-category-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dp-transition-fast);
}

.files-category-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.files-category-header.active {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.files-category-header .chevron {
    margin-right: 0.5rem;
    transition: transform 0.2s;
    font-size: 0.7rem;
}

.files-category.collapsed .chevron {
    transform: rotate(-90deg);
}

.files-category.collapsed .files-category-files {
    display: none;
}

/* Datei-Vorschau in Sidebar */
.files-category-files {
    padding: 0.25rem 0;
}

.files-sidebar-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem 0.35rem 1.75rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: all var(--dp-transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files-sidebar-file:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bs-body-color);
}

.files-sidebar-file-thumb {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
}

.files-sidebar-more {
    padding: 0.25rem 1rem 0.25rem 1.75rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Content-Bereich */
.files-content-area {
    background: var(--bs-body-bg);
    overflow-y: auto;
    height: calc(100vh - 56px);
    padding: 1.5rem;
}

.files-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.files-content-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

/* Gruppen im Content-Bereich */
.files-group {
    margin-bottom: 1.5rem;
}

.files-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--bs-border-color);
}

.files-group-header:hover {
    color: var(--bs-primary);
}

.files-group-header .chevron {
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.files-group.collapsed .chevron {
    transform: rotate(-90deg);
}

.files-group.collapsed .files-group-content {
    display: none;
}

.files-group-title {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Mobile: Offcanvas Button */
.files-mobile-nav-btn {
    display: none;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1040;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive: Tablet */
@media (max-width: 1200px) {
    .files-browser {
        grid-template-columns: 220px 1fr;
    }
}

/* Responsive: Mobile */
@media (max-width: 991px) {
    .files-browser {
        grid-template-columns: 1fr;
    }

    .files-sidebar {
        display: none;
    }

    .files-content-area {
        height: auto;
        min-height: calc(100vh - 56px);
        padding: 1rem;
    }

    .files-mobile-nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ======================
   Tag Input (Projekt erstellen)
   ====================== */

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--dp-border-radius-md);
    min-height: 42px;
}

.tag-input-container:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    font-size: 0.875rem;
    line-height: 1.2;
}

.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin-left: 0.125rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--dp-transition-fast),
        color var(--dp-transition-fast);
}

.tag-remove:hover {
    background: var(--bs-danger);
    color: #fff;
}

.tag-input {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.tag-input::placeholder {
    color: var(--bs-secondary-color);
}

/* ======================
   Settings Page
   ====================== */
.settings-page {
    max-width: 900px;
}

.settings-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.settings-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--dp-border-radius-lg);
    text-decoration: none;
    color: var(--bs-body-color);
    transition:
        border-color var(--dp-transition-fast),
        background-color var(--dp-transition-fast),
        transform var(--dp-transition-fast);
    height: 100%;
}

.settings-card:hover {
    border-color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
    transform: translateY(-2px);
    color: var(--bs-body-color);
}

.settings-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--dp-border-radius-md);
}

.settings-card:hover .settings-card-icon {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

.settings-card-content {
    flex: 1;
    min-width: 0;
}

.settings-card-content h6 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.settings-card-content p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.settings-card-arrow {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    transition: transform var(--dp-transition-fast);
}

.settings-card:hover .settings-card-arrow {
    transform: translateX(3px);
    color: var(--bs-primary);
}

/* ======================
   Subtasks
   ====================== */

.subtask-item {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.subtask-item:last-child {
    border-bottom: none;
}

.subtask-checkbox {
    cursor: pointer;
    flex-shrink: 0;
}

.subtask-label {
    font-size: 0.9rem;
    word-break: break-word;
}

.subtask-delete {
    opacity: 0;
    transition: opacity var(--dp-transition-fast);
    font-size: 1.1rem;
    line-height: 1;
}

.subtask-item:hover .subtask-delete {
    opacity: 1;
}

#subtaskProgress {
    font-size: 0.7rem;
}

#subtasksList {
    max-height: 200px;
    overflow-y: auto;
}

/* ======================
   Daily Subtasks
   ====================== */

.daily-subtasks {
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    border-left: 2px solid var(--bs-border-color);
}

.daily-subtask-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.daily-subtask-item .form-check-input {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.daily-subtask-text {
    flex: 1;
    word-break: break-word;
}

.daily-subtask-done .daily-subtask-text {
    text-decoration: line-through;
    opacity: 0.6;
}

.daily-subtask-add {
    margin-top: 0.25rem;
    padding-left: 1.5rem;
}

.daily-subtask-add .subtask-input {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background: transparent;
    border: 1px dashed var(--bs-border-color);
}

.daily-subtask-add .subtask-input:focus {
    background: var(--bs-body-bg);
    border-style: solid;
}

.daily-task-header {
    cursor: pointer;
}

.daily-task-content {
    flex: 1;
    min-width: 0;
}